/* ══════════════════════════════════════════════════════════════════════
   newdesign.css — SEP New Design 테마 (TailAdmin 계열)
   ────────────────────────────────────────────────────────────────────
   전략: app.css 뒤에 로드. 모든 규칙을 body.nd-theme 아래로 스코프 →
        · 클래스 하나(body.nd-theme)로 전 모듈 일괄 적용
        · 클래스만 빼면 즉시 구디자인 롤백 (A/B 안전)
   레버리지: SEP는 토큰(--primary/--border/--r-*/--shadow-* 등)과
            공용 클래스(.card/.btn/.badge/.inp/.kpi/.hdr/사이드바 --sb-*)로
            구성 → 토큰값 + 공용 클래스만 덮으면 모듈 내부까지 함께 바뀜.
   Phase 1: 팔레트·반경·그림자 토큰 / 카드·버튼·뱃지·입력·KPI / 라이트 사이드바 / 라이트 헤더
   Phase 2(예정): 서브내비 바·모듈별 하드코딩 hex 감사·테이블 통일
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 토큰 재정의 (body에 얹어 전 하위 요소로 캐스케이드) ── */
body.nd-theme{
  /* 브랜드: 마린 블루 (승인된 시제품 팔레트) */
  --brand:#465fff; --brand-600:#3b56f0; --brand-700:#2f45d8;
  --brand-50:#eef1ff; --brand-100:#dfe5ff; --brand-200:#c7d0ff;

  /* primary 계열을 브랜드로 리포인트 (버튼·포커스·강조 전역) */
  --primary:#465fff; --primary-dark:#3b56f0; --primary-hover:#5b72ff;
  --navy-700:#465fff; --navy-600:#3b56f0;   /* .kpi b-blue 등 navy 참조부까지 브랜드화 */
  --navy-800:#111827; --navy-900:#0b1120;   /* 구 navy 제목색(#1e3a5f 111곳 토큰화분) → 다크 잉크로 */
  /* ND-20: 파랑 계열 전면 통일 — 모듈 하드코딩 blue 10종 토큰화분의 nd 값 */
  --navy-500:#5b72ff; --navy-50:#eef1ff; --blue-300:#b9c5ff;
  --mx-acc-navy:#2f45d8; --mx-acc-navy2:#465fff; --mx-acc-sky:#3b56f0;
  /* ND-21: 브랜드 teal 액센트(트윗 액션·케이스 칩·Soft Daylight 버튼) → 마린블루로 통일.
     ND-14에서 275곳을 var(--mx-acc-teal,…)로 토큰화해둔 것의 활용 지점. */
  --mx-acc-teal:#465fff; --mx-acc-teal-d:#2f45d8;

  /* 중립: 쿨 슬레이트 + 부드러운 보더 */
  --bg:#f4f6fb; --surface:#ffffff;
  --gray-200:#e6e9f2; --gray-100:#f1f4f9; --gray-50:#f8fafc;
  --border:#e6e9f2; --border-strong:#d5dae6;
  --text-strong:#111827; --text:#1a2233; --text-2:#5b6573; --text-3:#98a2b3;

  /* 상태색: 살짝 채도 조정 + 파스텔 배경 (칩) */
  --green:#12b76a; --green-bg:#e7f7ee; --green-bg-soft:#e7f7ee; --green-text:#05603a; --green-text-dark:#05603a;
  --yellow:#f79009; --yellow-bg:#fdf3e6; --yellow-bg-soft:#fef8ee; --yellow-text:#93370d;
  --red:#f04438; --red-bg:#fdecec; --red-text:#912018; --red-strong:#e8352b;
  --blue-bg:#e7f2fe; --blue-text:#175cd3; --blue-border:#c7ddfb;
  --orange:#f79009;
  --purple:#7a5af8; --purple-bg:#f4f0ff; --purple-text:#5925dc;

  /* 반경: 카드 크게(16), 칩 라운드 */
  --r-sm:8px; --r-md:10px; --r-lg:16px; --r-xl:20px; --r-xs:8px;

  /* 그림자: 부드럽게 (navy 틴트 제거) */
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow-md:0 8px 24px rgba(16,24,40,.08);
  --shadow-lg:0 16px 40px rgba(16,24,40,.12);

  /* 2차 토큰 세트(.kpi 등이 참조) */
  --panel:#ffffff; --brd:#e6e9f2; --radius:16px;

  /* 라이트 사이드바 (--sb-* 재정의 → 사이드바 전체가 흰 그룹형으로) */
  /* 2026-07-31: Marinex 로고 원본에서 추출한 브랜드 색 (심볼마크와 워드마크가 같은 색을 쓰도록) */
  --mx-brand-blue:#125B9C; --mx-brand-orange:#E96328;
  --sb-bg:#ffffff; --sb-fg:#5b6573; --sb-fg-h:#111827; --sb-on:#465fff;
  --sb-acc:#465fff; --sb-ico:#98a2b3; --sb-line:transparent; --sb-sec:#98a2b3;
  --sb-subfg:#667085; --sb-hover:#f4f6fb; --sb-tgbg:#eef1ff; --sb-tgfg:#465fff;
  --sb-scroll:rgba(16,24,40,.14);
}

/* ── ND-58: 폰트 완전 통일 — 앱 전역 Pretendard 우선 (Paperlogy 107규칙·인라인 지정 전부 오버라이드).
   ⚠️ 아이콘 폰트(.ti = Tabler)·monospace(품번·금액·LOT)는 반드시 제외해야 깨지지 않음. --font-sans 단일 원천. */
body.nd-theme{ --font-sans:'Pretendard','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif; }
body.nd-theme,
body.nd-theme *:not(.ti):not([class*="tabler"]):not([style*="mono"]):not(.mono):not([class*="mono"]):not(i){
  font-family:var(--font-sans) !important;
}
/* 아이콘 폰트 복원(만일의 오버라이드 대비) */
body.nd-theme .ti, body.nd-theme [class^="ti-"], body.nd-theme [class*=" ti-"]{ font-family:"tabler-icons" !important; }
/* 모노(품번·금액·LOT·코드) 복원 — 통일에서 제외 */
body.nd-theme [style*="ui-monospace"], body.nd-theme [style*="monospace"], body.nd-theme .mono,
body.nd-theme code, body.nd-theme kbd, body.nd-theme pre, body.nd-theme .mxlot-code, body.nd-theme .mxlot-lot{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace !important;
}

/* ══ ND-60: 재고관리 프로페셔널 레이아웃 (inventory.js와 짝) ══ */
/* 창고 요약 타일 — 통일 보더·서브틀 액티브(브랜드 링) */
.inv-wh-card{ flex:1; min-width:158px; text-align:left; cursor:pointer; font-family:inherit;
  border:1px solid var(--border,#e6e9f2); background:var(--surface,#fff); border-radius:14px; padding:14px 16px;
  box-shadow:var(--shadow-xs,0 1px 2px rgba(16,24,40,.05)); transition:box-shadow .14s,border-color .14s,transform .12s; }
.inv-wh-card:hover{ box-shadow:var(--shadow-md,0 8px 24px rgba(16,24,40,.08)); transform:translateY(-1px); }
.inv-wh-card.active{ border-color:var(--brand,#465fff); box-shadow:0 0 0 3px rgba(70,95,255,.12); }
.inv-wh-top{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.inv-wh-flag{ font-size:15px; }
.inv-wh-name{ font-size:12.5px; font-weight:700; color:var(--text-2,#5b6573); }
.inv-wh-items{ margin-left:auto; font-size:10px; font-weight:700; color:var(--text-3,#98a2b3); background:var(--gray-50,#f8fafc); border:1px solid var(--border,#e6e9f2); padding:1px 8px; border-radius:999px; }
.inv-wh-qty{ font-size:24px; font-weight:800; color:var(--text-strong,#111827); font-family:ui-monospace,monospace; line-height:1; letter-spacing:-.5px; }
.inv-wh-qty small{ font-size:11px; color:var(--text-3,#98a2b3); font-weight:600; margin-left:4px; font-family:var(--font-sans); }
.inv-wh-card.active .inv-wh-qty{ color:var(--brand,#465fff); }
/* 툴바 버튼 — 세컨더리 통일 + 프라이머리(입고 등록) */
.inv-tbtn{ height:34px; display:inline-flex; align-items:center; gap:5px; background:var(--surface,#fff);
  border:1px solid var(--border,#e6e9f2); color:var(--text-2,#5b6573); padding:0 12px; border-radius:10px;
  font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; transition:.12s; }
.inv-tbtn:hover{ background:var(--gray-50,#f8fafc); color:var(--text-strong,#111827); border-color:var(--border-strong,#d5dae6); }
.inv-tbtn--primary{ background:var(--brand,#465fff); border-color:var(--brand,#465fff); color:#fff; font-weight:800; }
.inv-tbtn--primary:hover{ background:var(--brand-600,#3b56f0); color:#fff; }
.inv-tbtn--icon{ padding:0 10px; }
.inv-tbtn.on{ background:var(--brand-50,#eef1ff); border-color:var(--brand-200,#c7d0ff); color:var(--brand,#465fff); }
.inv-tbtn--danger.on{ background:var(--red,#f04438); border-color:var(--red,#f04438); color:#fff; }
/* 표 헤더/행 — 클린 */
body.nd-theme #inv-sheet-table thead th{ background:var(--gray-50,#f8fafc); color:var(--text-3,#98a2b3); font-size:10.5px; font-weight:700; text-transform:none; padding:9px 10px; border-bottom:1px solid var(--border,#e6e9f2); }
body.nd-theme #inv-sheet-table tbody tr:hover{ background:var(--gray-50,#f8fafc); }
.inv-panel{ background:var(--surface,#fff); border:1px solid var(--border,#e6e9f2); border-radius:16px; box-shadow:var(--shadow-xs,0 1px 2px rgba(16,24,40,.05)); padding:16px 18px; }
.inv-panel-title{ font-size:14px; font-weight:800; color:var(--text-strong,#111827); }
.inv-panel-sub{ font-size:11.5px; font-weight:600; color:var(--text-3,#98a2b3); }

/* ── 2. 카드/패널 ── */
body.nd-theme .card{ border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-xs); }
body.nd-theme .card--tight{ padding:14px 16px; }
body.nd-theme .kpi{ border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-xs); }
body.nd-theme .kpi.clickable:hover{ box-shadow:var(--shadow-md); border-color:var(--brand-200); transform:translateY(-2px); }
body.nd-theme .kpi.b-blue{ border-top:3px solid var(--brand); background:linear-gradient(160deg,rgba(70,95,255,.05) 0%,var(--surface) 100%); }
body.nd-theme .kpi.b-green{ border-top:3px solid var(--green); background:linear-gradient(160deg,rgba(18,183,106,.05) 0%,var(--surface) 100%); }
body.nd-theme .kpi.b-orange{ border-top:3px solid var(--orange); background:linear-gradient(160deg,rgba(247,144,9,.05) 0%,var(--surface) 100%); }

/* ── 3. 버튼 ── */
body.nd-theme .btn{ border-radius:10px; font-weight:700; }
body.nd-theme .btn--primary{ background:var(--brand,#465fff); color:#fff; }
body.nd-theme .btn--primary:hover{ background:var(--brand-600,#3b56f0); box-shadow:0 4px 12px rgba(70,95,255,.28); }
body.nd-theme .btn--outline{ color:var(--brand); border:1.5px solid var(--brand); }
body.nd-theme .btn--outline:hover{ background:var(--brand-50); }
body.nd-theme .btn--ghost{ background:var(--gray-100); border:1px solid var(--border); color:var(--text-2); }
body.nd-theme .btn--sm{ border-radius:8px; }

/* ── 4. 뱃지/칩 → pill ── */
body.nd-theme .badge{ border-radius:999px; padding:2px 9px; font-weight:700; letter-spacing:.1px; }

/* ── 5. 입력/셀렉트 ── */
body.nd-theme .inp{ border:1px solid var(--border); border-radius:10px; }
body.nd-theme .inp:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(70,95,255,.12); }

/* ── 6. 라이트 사이드바 (그룹형 / pill 액티브) ── */
body.nd-theme .sidebar{ border-right:1px solid #eaedf5; }

/* ── ND-31: 아티팩트형 레이아웃 — 사이드바 좌측 전체 높이 · 헤더/본문 우측 ──
   DOM 변경 없이 CSS로: 사이드바 fixed(100vh) 승격 + 헤더/퀵내비/본문 margin-left.
   접힘은 body.sb-collapsed(app-nav toggleSidebar 동기화)로 margin 축소. 데스크톱 한정. */
@media (min-width:860px){
  body.nd-theme .sidebar{
    position:fixed; left:0; top:0; bottom:0; height:100vh; z-index:150;
    box-shadow:1px 0 0 #eaedf5;
  }
  body.nd-theme .hdr{ margin-left:232px; transition:margin-left .22s cubic-bezier(.4,0,.2,1); }
  body.nd-theme #quick-nav{ margin-left:232px; transition:margin-left .22s cubic-bezier(.4,0,.2,1); }
  /* ND-56: 헤더 아래 즐겨찾기 바(#quick-nav)는 사이드바 즐겨찾기(MenuFav)로 대체 → 숨김 */
  body.nd-theme #quick-nav{ display:none !important; }
  body.nd-theme .app-body{ margin-left:232px; transition:margin-left .22s cubic-bezier(.4,0,.2,1); }
  body.nd-theme.sb-collapsed .hdr,
  body.nd-theme.sb-collapsed #quick-nav,
  body.nd-theme.sb-collapsed .app-body{ margin-left:60px; }
  /* 헤더 좌측 구분선 숨김(로고는 JS로 사이드바 이동 — .hdr 스코프만 숨겨 이동 후엔 보임) */
  body.nd-theme .hdr .hdr-home-btn, body.nd-theme .hdr .hdr-sep{ display:none; }
}
body.nd-theme .sb-brand-name{ font-size:14px; }
/* ND-33: 사이드바 브랜드 — 세로 배치: 마리넥스 로고 위 / SEP+버전 아래 (ND-35: 좌측 정렬 고정) */
body.nd-theme .sb-hdr{ padding:14px 14px 10px; display:flex; flex-direction:column; align-items:stretch; gap:10px; text-align:left; }
/* 2026-07-31: 브랜드 락업은 가로(마크+워드마크). 구 세로 배치는 폐기 */
body.nd-theme .sb-brand{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:6px; margin:0; width:100%; }
body.nd-theme .sb-brand .hdr-home-btn{ display:flex; background:none; border:none; padding:0; cursor:pointer; }
body.nd-theme .sb-brand .hdr-logo{ height:28px; object-fit:contain; }
body.nd-theme .sb-sep-ver{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; letter-spacing:-.2px; color:var(--text-strong); }
body.nd-theme .sidebar.collapsed .sb-sep-ver{ display:none; }
/* 접기 버튼: 심볼 아이콘 + 라운드 호버 */
body.nd-theme .sb-toggle-icon .ti{ font-size:17px; color:var(--text-3); transition:color .15s; }
body.nd-theme .sb-toggle:hover .sb-toggle-icon .ti{ color:var(--brand); }
/* ND-32: 헤더 (테마) 전환 버튼 제거 */
body.nd-theme .hdr button[onclick^="MxTheme.cycle"]{ display:none !important; }
/* ND-35: 홈 ⭐즐겨찾기 — 기본 접힘은 인라인(welcome.js, CSS 로드와 무관하게 보장),
   hover 펼침만 CSS(!important로 인라인 override) */
/* ND-54: 기본 접힘(인라인 max-height:0) + 클릭 토글(Welcome.toggleFav, 인라인 style). hover는 '접힘 상태에서만' 살짝 미리보기 */
#wel-fav-card.wel-fav-collapsed:hover .wel-fav-body{ max-height:120px; opacity:.55; margin-top:10px; }
/* 카드 크기 완전 고정 — 클릭/포커스/리플로우에도 높이·폰트 불변 */
.wel-fav-body > button{ height:70px !important; overflow:hidden; }
.wel-fav-body > button *{ line-height:1.35; }
body.nd-theme .sb-nav{ padding-top:6px; }
body.nd-theme .sb-item-btn{
  border-bottom:none; width:100%; box-sizing:border-box; margin:0; padding:11px 16px;
  border-radius:0; font-weight:600;
}
body.nd-theme .sb-label{ flex:1 1 auto; }   /* 라벨이 남는 폭을 채워 화살표를 사이드바 우측 끝으로 밀어냄 */
body.nd-theme .sb-item-btn::before{ display:none; }            /* 좌측 accent 바 제거 → pill 하이라이트로 */
/* 아이콘=좌측 끝(order 0) / 라벨=가운데(flex) / 펼침 화살표 ▾=우측 끝(order 2) */
body.nd-theme .sb-item-btn .sb-icon{ order:0; }
/* 펼침 화살표를 메뉴 오른쪽 끝으로 (라벨이 flex로 밀어내고, 여백 최소화) */
body.nd-theme .sb-item-btn .sb-arrow{ order:2; margin-left:auto; }

/* 소메뉴 펼침/닫힘 — max-height 1600 → 실제 높이에 가까운 값 + 스냅 이징으로 부드럽고 빠르게.
   (1600px는 닫힐 때 대부분 '죽은 구간'이라 마지막에 툭 닫혀 딱딱했음) */
body.nd-theme .sb-sub{ transition:max-height .2s cubic-bezier(.33,1,.68,1); }
body.nd-theme .sb-sub.open{ max-height:460px; }
body.nd-theme .sb-arrow{ transition:transform .2s cubic-bezier(.33,1,.68,1), opacity .15s; }
body.nd-theme .sb-item-btn:hover{ background:var(--sb-hover); }
body.nd-theme .sb-item-btn.active,
body.nd-theme .sb-item-btn.open{ background:var(--brand-50); color:var(--brand); }
body.nd-theme .sb-item-btn.active .sb-icon,
body.nd-theme .sb-item-btn.open .sb-icon{ color:var(--brand); }
body.nd-theme .sb-seclbl{ text-transform:uppercase; letter-spacing:.6px; font-size:10.5px; font-weight:800; color:var(--sb-sec); opacity:.9; padding:16px 22px 6px; }
body.nd-theme .sb-hdr{ border-bottom:1px solid #eef1f5; }
/* 사이드바 브랜드 = 로고 스퀘어 + SEP + 버전 배지 (헤더에서 이동, 아티팩트 구조) */
/* 락업 구조: [마크] [Marinex] [SEP / 버전 2단]
   - 마크 높이 = "Marinex" 한 줄 높이
   - 우측 2단(SEP 위 · 버전 아래)의 전체 높이 = Marinex 높이 (align-self:stretch 로 행 높이에 맞춤) */
body.nd-theme .sb-brand{ display:flex; align-items:center; gap:8px; }
/* Marinex 심볼마크 — 원 로고의 원형 엠블럼 그대로. 자체 형태·색을 가지므로 배경 컨테이너를 두지 않는다. */
body.nd-theme .sb-mark{ width:26px; height:26px; flex-shrink:0; object-fit:contain; display:block; }
/* 이 줄이 락업 높이를 결정한다 */
body.nd-theme .sb-wm{ font-weight:800; font-size:24px; line-height:1.1; letter-spacing:-.4px; color:var(--mx-brand-blue,#125B9C); white-space:nowrap; }
/* SEP / 버전 2단 — 행 높이(=Marinex 높이)에 맞춰 늘리고 위아래로 벌린다 */
body.nd-theme .sb-brand-name{ display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  align-self:stretch; min-width:0; }
/* SEP = 제품명. 로고의 오렌지를 그대로 써서 심볼마크와 한 덩어리로 읽히게 한다 */
body.nd-theme .sb-wm-sep{ font-weight:800; font-size:13px; line-height:1; letter-spacing:1.6px; color:var(--mx-brand-orange,#E96328); }
/* 버전은 조용하게 — 2단 안에 들어가야 하므로 컴팩트하게 */
body.nd-theme .sb-brand .hdr-ver-badge{
  font-size:9px !important; font-weight:700 !important; padding:0 5px !important; line-height:1.25;
  color:var(--text-3,#98a2b3) !important; background:transparent !important; border:1px solid var(--border,#e6e9f2) !important;
}
body.nd-theme .sidebar.collapsed .sb-brand-name,
body.nd-theme .sidebar.collapsed .sb-wm{ display:none; }
/* 접힘: 워드마크만 감추고 심볼마크는 남겨 중앙 정렬 — 접어도 브랜드가 사라지지 않게 */
body.nd-theme .sidebar.collapsed .sb-brand{ display:flex !important; justify-content:center; gap:0; }
body.nd-theme .sidebar.collapsed .sb-mark{ width:30px; height:30px; }
/* 구 마크(그라데이션 M 스퀘어) — 다른 화면에 남아 있을 수 있어 정의는 유지 */
body.nd-theme .sb-logo-sq{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#7c93ff);
  color:#fff; font-weight:800; font-size:15px; letter-spacing:.5px;
  display:inline-flex; align-items:center; justify-content:center;
}
body.nd-theme .sb-sub .sb-sub-btn:hover{ background:var(--sb-hover); }

/* ── 7. 라이트 헤더 (인라인 rgba-white 버튼을 라이트로 오버라이드) ── */
body.nd-theme .hdr{
  background:#ffffff !important; color:var(--text) !important;
  border-bottom:1px solid var(--border); box-shadow:var(--shadow-xs);
}
body.nd-theme .hdr-title{
  -webkit-text-fill-color:var(--text-strong) !important; color:var(--text-strong) !important;
  background:none !important;
}
body.nd-theme .hdr-ver-badge{ color:var(--brand) !important; background:var(--brand-50) !important; border-color:var(--brand-100) !important; }
body.nd-theme .hdr-sep{ background:var(--border) !important; }
body.nd-theme .hdr-date{ color:var(--text-3) !important; }
/* New Design: 상단 tab-nav 바 숨김 — 내비게이션은 사이드바 담당(아티팩트형 클린 헤더) */
body.nd-theme .tab-nav{ display:none !important; }
/* 좌·우 액션 버튼 모두(인라인 rgba 흰색 → 라이트). tab-btn·로그인·인사근태 제외 */
body.nd-theme .hdr button:not(#login-btn):not(#hdr-hr-btn):not(.tab-btn):not(#hdr-user-btn):not(.hdr-home-btn){
  background:var(--surface-2, #f8fafc) !important; color:var(--text-2) !important;
  border:1px solid var(--border) !important;
}
body.nd-theme .hdr button:not(#login-btn):not(#hdr-hr-btn):not(.tab-btn):not(#hdr-user-btn):not(.hdr-home-btn):hover{ background:#eef1f7 !important; color:var(--text) !important; }
/* v2.880: Marinex 로고(홈) 버튼 — nd 헤더버튼 배경/보더가 로고 위에 '투명박스'로 겹쳐 보이던 것 제거(완전 투명) + 로고 30% 축소(52→36px) */
body.nd-theme .hdr .hdr-home-btn,
body.nd-theme .hdr .hdr-home-btn:hover{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; }
body.nd-theme .hdr-logo{ height:36px !important; }
/* 좌측 클러스터 정렬 */
body.nd-theme .hdr-left{ margin-right:8px; }
/* ND-38: 헤더 버튼 높이 일괄 통일 — 텍스트 버튼(인사/근태·미션보드)과 아이콘 버튼 정렬 */
body.nd-theme .hdr-actions button:not(#hdr-user-btn),
body.nd-theme .hdr-left button,
body.nd-theme #hdr-search-container{
  height:34px !important; box-sizing:border-box !important;
  display:inline-flex !important; align-items:center !important;
  padding-top:0 !important; padding-bottom:0 !important;
}
/* ND-69: 헤더 아이콘 버튼 간격 보정 — 아이콘 전용 버튼을 34×34 정사각형으로 통일(이모지/아이콘 폭 차이 제거), gap 균일화.
   텍스트 CTA(인사/근태·미션보드)와 유저·검색은 제외해 자동 폭 유지. */
body.nd-theme .hdr-actions{ gap:8px !important; }
body.nd-theme .hdr-actions > button:not(#hdr-hr-btn):not(#hdr-eval-btn):not(#hdr-user-btn){
  width:34px !important; min-width:34px !important;
  padding-left:0 !important; padding-right:0 !important;
  justify-content:center !important;
}
/* 아이콘 글리프를 박스 정중앙에 — 글리프별 좌우 베어링 차이로 간격이 달라 보이던 것 제거 */
body.nd-theme .hdr-actions > button:not(#hdr-hr-btn):not(#hdr-eval-btn):not(#hdr-user-btn) > i{
  display:inline-flex !important; width:100% !important; justify-content:center !important; line-height:1 !important;
}
/* 인사/근태 CTA는 rose 액센트 유지(라이트 버전) */
body.nd-theme #hdr-hr-btn{ background:#fef0f2 !important; color:#e8352b !important; border:1px solid #fbd6db !important; }
/* ND-70: 미션보드 CTA는 바이올렛 액센트로 차별화(인사/근태 rose·아이콘 그레이와 구분) */
body.nd-theme #hdr-eval-btn{ background:#f3f0ff !important; color:#6d28d9 !important; border:1px solid #ddd0fb !important; }
body.nd-theme #hdr-eval-btn:hover{ background:#e9e2ff !important; color:#5b21b6 !important; }
/* 통합검색 박스 */
body.nd-theme #hdr-search-container{ background:var(--surface-2, #f8fafc) !important; border:1px solid var(--border) !important; }
body.nd-theme #hdr-search-input{ color:var(--text) !important; }
body.nd-theme #hdr-search-input::placeholder{ color:var(--text-3) !important; }
body.nd-theme #hdr-search-container i{ color:var(--text-3) !important; }
body.nd-theme #hdr-search-container kbd{ background:#fff !important; color:var(--text-3) !important; border-color:var(--border) !important; }
/* 헤더 내 tab-btn(있다면) 라이트 */
body.nd-theme .hdr .tab-btn{ color:var(--text-2) !important; }
body.nd-theme .hdr .tab-btn.active{ color:var(--brand) !important; }
/* 유저 메뉴 버튼 */
body.nd-theme #hdr-user-btn{ color:var(--text) !important; }

/* ── 영업현황 전체 현황 (ND-26): 히어로 브랜드 그라데 + 패널 카드 통일 ── */
body.nd-theme .sm-hero{
  background:linear-gradient(120deg,#2f45d8 0%,#465fff 55%,#6a80ff 100%);
  border-radius:20px; box-shadow:0 12px 30px rgba(70,95,255,.28);
}
body.nd-theme .sm-hero-bar-track{ background:rgba(255,255,255,.22); }
body.nd-theme .sm-hero-toggle-btn.on{ color:var(--brand); }
body.nd-theme .sm-panel{ background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-xs); }
/* ND-68: 전체현황 담당자·Top거래처 가로 나란히 → 좁은 화면에선 세로 */
@media(max-width:900px){ .sm-persontop{ grid-template-columns:1fr !important; } }

/* ══ 메일 모듈 (ND-29): TailAdmin 메일앱 톤 — 라이트 3패널 + pill 폴더 + 브랜드 액센트 ══ */
/* 앱 프레임: 라운드 16 + 소프트 섀도 */
body.nd-theme .mail-app{ border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow-xs); }
/* 폴더 사이드바: 순백 + 옅은 구분선 */
body.nd-theme .mail-sidebar{ background:var(--surface); border-right:1px solid var(--border); padding:12px 10px; }
body.nd-theme .mail-sidebar-section{ color:var(--text-3); letter-spacing:.6px; padding:8px 10px 4px; }
/* 폴더 버튼 → pill (인셋 바 제거) */
body.nd-theme .mail-folder-btn{ border-radius:10px; padding:7px 10px; color:var(--text-2); }
body.nd-theme .mail-folder-btn:hover{ background:var(--gray-50); color:var(--text-strong); }
body.nd-theme .mail-folder-btn.active{ background:var(--brand-50); color:var(--brand); box-shadow:none; }
body.nd-theme .mail-folder-btn.active .badge{ background:var(--brand); color:#fff; }
body.nd-theme .mail-folder-btn.mail-acc-active{ box-shadow:inset 3px 0 0 var(--brand); }
body.nd-theme .mail-folder-btn .badge{ background:var(--gray-100); color:var(--text-2); border-radius:999px; }
/* 드래그 분류 타깃: 브랜드 틴트 */
body.nd-theme .mail-folder-btn.mail-drop-target{ background:var(--brand-50) !important; color:var(--brand) !important; box-shadow:inset 0 0 0 2px var(--brand); outline:none; }
body.nd-theme .mail-drop-target{ background:var(--brand-50) !important; outline:2px dashed var(--brand); }
/* 메일쓰기 버튼: 브랜드 그라데 + 라운드 */
body.nd-theme .mail-compose-btn{
  background:linear-gradient(120deg,var(--brand-700),var(--brand)); border-radius:12px;
  padding:11px 14px; box-shadow:0 6px 16px rgba(70,95,255,.25); transition:.15s;
}
body.nd-theme .mail-compose-btn:hover{ box-shadow:0 8px 20px rgba(70,95,255,.36); transform:translateY(-1px); }
/* 검색/툴바 */
body.nd-theme .mail-search-wrap{ background:var(--surface); border-bottom:1px solid var(--border); }
body.nd-theme .mail-search-inp{ border:1px solid var(--border); border-radius:10px; background:var(--gray-50); }
body.nd-theme .mail-search-inp:focus{ border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px rgba(70,95,255,.12); outline:none; }
body.nd-theme .mail-toolbar-poll-btn{ background:var(--brand); border-color:var(--brand); border-radius:10px; font-weight:700; }
body.nd-theme .mail-toolbar-poll-btn:hover{ background:var(--brand-600); }
/* 리스트 행: 여백↑ · 호버/선택 브랜드 틴트 · 읽지않음 강조 */
body.nd-theme .mail-list-row{ padding:9px 14px; border-bottom:1px solid var(--border-2,#eef1f7); }
body.nd-theme .mail-list-row:hover{ background:var(--gray-50); }
body.nd-theme .mail-list-row.unread{ background:var(--surface); }
body.nd-theme .mail-list-row.unread .mail-list-from,
body.nd-theme .mail-list-row.unread .mail-list-subj{ color:var(--text-strong); font-weight:800; }
body.nd-theme .mail-list-row.active{ background:var(--brand-50); box-shadow:inset 3px 0 0 var(--brand); }
body.nd-theme .mail-list-dot{ background:var(--brand); }
body.nd-theme .mail-list-cb{ accent-color:var(--brand); }
body.nd-theme .mail-list-from{ color:var(--text); }
body.nd-theme .mail-list-subj{ color:var(--text); }
/* 읽기 패널 */
body.nd-theme .mail-detail-hd{ padding:20px 24px; border-bottom:1px solid var(--border); }
body.nd-theme .mail-detail-subject{ color:var(--text-strong); font-size:17px; letter-spacing:-.3px; }
body.nd-theme .mail-attach-chip{ background:var(--brand-50); color:var(--brand); border:1px solid var(--brand-100); border-radius:999px; }
body.nd-theme .mail-attach-chip:hover{ background:var(--brand-100); }

/* ══ 로그인 페이지 — v3.227: Split Command 다크(홈페이지 톤). 구 ND-39 라이트 폐기 ══ */
body.nd-theme #login-page{
  background:
    radial-gradient(120% 90% at 80% 6%, rgba(61,139,255,.16), transparent 54%),
    radial-gradient(95% 75% at 10% 98%, rgba(255,106,43,.09), transparent 52%),
    #06070A;
}
/* v3.228: 배경 격자 무늬 제거 */
body.nd-theme #login-page::before{ display:none !important; }
/* orb: 블루 + 오렌지 오로라(홈페이지) — v3.229 반경 확대 + 일렁임 강화 */
body.nd-theme .lp-orb{ filter:blur(90px) !important; }
body.nd-theme .lp-orb1{ width:820px !important; height:820px !important; background:radial-gradient(circle,rgba(61,139,255,.55) 0%,transparent 68%); animation:orbMoveA 10s ease-in-out infinite !important; }
body.nd-theme .lp-orb2{ width:700px !important; height:700px !important; background:radial-gradient(circle,rgba(255,106,43,.42) 0%,transparent 68%); animation:orbMoveB 12s ease-in-out infinite !important; }
body.nd-theme .lp-orb3{ width:480px !important; height:480px !important; background:radial-gradient(circle,rgba(61,139,255,.32) 0%,transparent 68%); animation:orbMoveC 8s ease-in-out infinite !important; }
@keyframes orbMoveA{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(180px,-120px) scale(1.25)}55%{transform:translate(-140px,110px) scale(.8)}80%{transform:translate(70px,140px) scale(1.1)}}
@keyframes orbMoveB{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(-190px,120px) scale(1.22)}60%{transform:translate(140px,-150px) scale(.82)}85%{transform:translate(-90px,-70px) scale(1.12)}}
@keyframes orbMoveC{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(130px,150px) scale(1.28)}70%{transform:translate(-120px,-110px) scale(.85)}}
/* 카드: split 컨테이너가 유리 역할 → 우측 카드는 투명 컬럼 */
body.nd-theme .lp-card{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border:none; box-shadow:none; }
body.nd-theme .lp-card::before{ display:none; }
body.nd-theme .lp-title{ color:#fff; }
body.nd-theme .lp-dsub{ color:rgba(255,255,255,.45); }
body.nd-theme .lp-step-label{ color:rgba(255,255,255,.6); }
/* 명언(좌측 브랜드 패널의 개별 규칙은 app.css가 담당) */
body.nd-theme #lp-quote-text{ color:#fff; }
body.nd-theme #lp-quote-author{ color:rgba(255,255,255,.55); }
/* 필드: 다크 글래스 */
body.nd-theme .lp-field-label{ color:rgba(255,255,255,.55); }
body.nd-theme .lp-field{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff; backdrop-filter:blur(4px); border-radius:12px;
}
body.nd-theme .lp-field::placeholder{ color:rgba(255,255,255,.4); }
body.nd-theme .lp-field:focus{ border-color:var(--brand,#465fff); background:rgba(70,95,255,.1); box-shadow:0 0 0 3px rgba(70,95,255,.28); }
/* 로그인 버튼: 흐르는 그라데이션 애니메이션 (블루→오렌지→블루) */
body.nd-theme .lp-submit{
  background:linear-gradient(100deg,#465fff,#5f78ff,#ff7a3c,#5f78ff,#465fff);
  background-size:300% 100%; animation:lpBtnFlow 5s ease infinite;
  border-radius:12px; box-shadow:0 10px 26px -8px rgba(70,95,255,.75), inset 0 1px 0 rgba(255,255,255,.3); color:#fff;
}
@keyframes lpBtnFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
body.nd-theme .lp-submit:hover{ filter:brightness(1.08); }
body.nd-theme .lp-err{ color:#ff8a80; }
/* 로그인 탭 스위처·아이디저장 라벨: 다크(인라인 스타일보다 우선) */
body.nd-theme #login-tabs{ background:rgba(255,255,255,.06)!important; }
body.nd-theme #login-idpw-form>label{ color:rgba(255,255,255,.55)!important; }
body.nd-theme .lp-footer{ color:rgba(255,255,255,.28); }
/* PIN 모드: 다크 */
body.nd-theme .lp-user-btn{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff;
}
body.nd-theme .lp-user-btn:hover{ background:rgba(70,95,255,.18); border-color:rgba(70,95,255,.5); }
body.nd-theme .lp-role{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); }
body.nd-theme #login-page .admin-pin input{
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18);
  color:#fff; backdrop-filter:blur(8px);
}
body.nd-theme #login-page .admin-pin input:focus{
  border-color:var(--brand,#465fff); background:rgba(70,95,255,.12); box-shadow:0 0 0 3px rgba(70,95,255,.25);
}

/* ══ ND-55: 사이드바 메뉴 즐겨찾기(MenuFav) ══ */
.sb-fav-toggle{ width:calc(100% - 20px); margin:2px 10px 4px; display:flex; align-items:center; gap:11px; background:var(--brand-50,#eef1ff); border:none; border-radius:10px; padding:10px 12px; color:var(--brand,#465fff); font-size:13.5px; font-weight:800; cursor:pointer; font-family:inherit; }
.sb-fav-toggle .mi-ic{ width:22px; text-align:center; font-size:15px; }
.sb-fav-toggle .sb-fav-lbl{ flex:1; text-align:left; }
.sb-fav-toggle .sb-fav-chev{ font-size:11px; opacity:.7; transition:transform .2s; }
.sb-fav-toggle.active .sb-fav-chev{ transform:rotate(180deg); }
.sb-fav-toggle:hover{ background:var(--brand-100,#dfe5ff); }
/* 즐겨찾기 뷰 활성 시 기존 메뉴트리 숨김 */
body.fav-view .sb-nav > .sb-group, body.fav-view .sb-nav > .sb-seclbl{ display:none !important; }
#sb-fav-view{ padding:2px 6px 8px; }
.sb-fav-seclbl{ font-size:10.5px; font-weight:800; letter-spacing:.5px; color:var(--sb-sec,#98a2b3); text-transform:uppercase; padding:10px 10px 6px; }
.sb-fav-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; color:var(--sb-fg,#5b6573); font-size:13px; font-weight:600; }
.sb-fav-item:hover{ background:var(--sb-hover,#f4f6fb); color:var(--text-strong,#111827); }
.sb-fav-item.active{ background:var(--brand-50,#eef1ff); color:var(--brand,#465fff); font-weight:800; }
.sb-fav-item .mi-ic{ width:20px; text-align:center; flex-shrink:0; }
.sb-fav-item-lbl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-fav-sub{ font-size:10.5px; color:var(--gray-400,#98a2b3); font-weight:500; }
.sb-fav-x{ background:none; border:none; color:var(--gray-300,#cbd5e1); font-size:16px; cursor:pointer; line-height:1; padding:0 2px; opacity:0; transition:.12s; }
.sb-fav-item:hover .sb-fav-x{ opacity:1; }
.sb-fav-x:hover{ color:var(--red-strong,#e8352b); }
.sb-fav-empty{ font-size:11.5px; color:var(--gray-400,#98a2b3); line-height:1.6; padding:16px 12px; text-align:center; }
.sb-fav-add{ width:calc(100% - 12px); margin:8px 6px 0; display:flex; align-items:center; justify-content:center; gap:6px; background:#fff; border:1.5px dashed var(--brand-200,#c7d0ff); border-radius:10px; padding:9px; color:var(--brand,#465fff); font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.sb-fav-add:hover{ background:var(--brand-50,#eef1ff); }
.sidebar.collapsed .sb-fav-lbl, .sidebar.collapsed .sb-fav-chev, .sidebar.collapsed #sb-fav-view{ display:none; }
/* 즐겨찾기 추가 모달 */
.fav-pick-row{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; font-size:13px; }
.fav-pick-head{ font-weight:800; color:var(--text-strong,#111827); margin-top:6px; }
.fav-pick-sub{ color:var(--text-2,#5b6573); padding-left:6px; }
.fav-pick-sub:hover, .fav-pick-head:hover{ background:var(--gray-50,#f8fafc); }
.fav-pick-ic{ width:20px; text-align:center; flex-shrink:0; color:var(--brand,#465fff); }
.fav-pick-star{ background:none; border:none; font-size:17px; color:var(--gray-300,#cbd5e1); cursor:pointer; line-height:1; padding:0; flex-shrink:0; width:22px; }
.fav-pick-star.on{ color:var(--yellow,#f79009); }

/* ── 로딩 푸들 (ND-23): 배경 투명 webp + 꼬리치는 wag 애니메이션 ──
   단일 비트맵이라 꼬리만 분리해 흔들 수는 없어, 강아지가 엉덩이째 살랑살랑 흔드는
   wag(하단 고정 좌우 회전 + 미세 바운스)로 자연스럽게 표현 */
@keyframes nd-pup-wag{
  0%   { transform:rotate(-5deg) translateY(0); }
  25%  { transform:rotate(4deg)  translateY(-2px); }
  50%  { transform:rotate(-4deg) translateY(0); }
  75%  { transform:rotate(5deg)  translateY(-2px); }
  100% { transform:rotate(-5deg) translateY(0); }
}
.mxl-bird.mxl-pup{
  width:50px; height:64px; object-fit:contain;
  transform-origin:50% 88%;                       /* 발 근처 고정 → 꼬리치는 느낌 */
  animation:nd-pup-wag .85s ease-in-out infinite; /* mxl-bob 대체 */
  filter:drop-shadow(0 3px 5px rgba(16,24,40,.14));
}
.mxl-bird.mxl-pup.mxl-sm{ width:20px; height:26px; filter:none; }
@media (prefers-reduced-motion:reduce){ .mxl-bird.mxl-pup{ animation:none; } }

/* ── 8. 앱 배경 ── */
body.nd-theme{ background:var(--bg); }

/* ── 8b. 스크롤 격리 (v2.879) ──
   증상: 홈 본문을 내리면 좌측 사이드바까지 통째로 밀림 = 문서(body)가 스크롤됨.
   원인: .app-body는 height:calc(100vh - 56px)로 고정돼 있으나 body 자체에 스크롤 잠금이 없어,
         헤더 보더/서브픽셀 오버플로가 문서 스크롤을 유발 → 사이드바+본문이 함께 이동.
   해결: 문서(html/body)를 뷰포트에 고정하고 스크롤을 잠금. 실제 스크롤은 내부
         .sidebar / .app-content(각자 overflow-y:auto, 기존)가 독립적으로 담당.
   안전: #login-page·토스트·다이얼로그·드로어는 모두 position:fixed(문서 흐름 밖)이라 영향 없음. */
html{ height:100%; overflow:hidden; }
body.nd-theme{ height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none; }

/* ── 8c. 하단 잘림 방지 (v2.881) ──
   증상: 영업현황 등 일부 화면에서 스크롤이 끝까지 안 내려가 하단이 잘림.
   원인: .app-body의 height:calc(100vh - 56px)가 헤더 실제 높이(보더 포함 등)와 어긋나면
         .app-body 하단이 뷰포트 밖으로 나가고, 8b의 body overflow:hidden이 그 부분을 클립 → 스크롤 불가.
   해결: body를 세로 flex 셸로 만들어 .app-body가 헤더 아래 남는 공간을 '정확히' 채우게(56px 가정 제거).
         .app-content는 기존 overflow-y:auto로 하단까지 완전 스크롤. */
body.nd-theme{ display:flex; flex-direction:column; }
body.nd-theme > .hdr{ flex:0 0 auto; }
body.nd-theme > .app-body{ flex:1 1 auto; height:auto; min-height:0; }
/* 서브내비(sticky)는 원래 body 스크롤(고정 56px 헤더 아래) 기준의 top:56px였으나,
   스크롤 컨테이너가 .app-content로 바뀌었으므로 그 컨테이너 상단(top:0)에 붙도록 교정 → 상단 56px 유령 갭 제거. */
body.nd-theme .subnav-bar{ top:0; }

/* ── 버전 배지: 새로고침 후 이 번호가 바뀌면 = 최신 적용됨 (매 수정 시 증가) ── */
body.nd-theme::after{
  content:"New Design · ND-499";
  position:fixed; left:8px; bottom:8px; z-index:2147483647;
  background:#465fff; color:#fff; font:700 10px/1 'Pretendard',sans-serif;
  padding:5px 9px; border-radius:99px; opacity:.9; pointer-events:none;
  box-shadow:0 4px 12px rgba(70,95,255,.35);
}

/* ── 9. 사이드바 변수 고정 (저장된 sbtheme-* .sidebar 규칙보다 높은 우선순위) ── */
body.nd-theme .sidebar{
  --sb-bg:#ffffff; --sb-fg:#5b6573; --sb-fg-h:#111827; --sb-on:#465fff;
  --sb-acc:#465fff; --sb-ico:#98a2b3; --sb-line:transparent; --sb-sec:#98a2b3;
  --sb-subfg:#667085; --sb-hover:#f4f6fb; --sb-tgbg:#eef1ff; --sb-tgfg:#465fff;
  --sb-scroll:rgba(16,24,40,.14);
  background:#ffffff;
}

/* ND-40: PIN 로그인 비활성 — 탭 숨김(ID/PW 전용). 로직 차단은 index.html _loginMode/submitLogin */
#login-tab-pin{ display:none !important; }
#login-tabs{ background:transparent !important; padding:0 !important; }
#login-tab-idpw{ pointer-events:none; box-shadow:none !important; background:transparent !important; text-align:left; padding-left:2px !important; color:var(--text-2,#5b6573) !important; }

/* ── v3.146: 단가비교 시트 MxSheet 표준 룩 — 행 hover·셀 focus (purchase-sheet/rfq-sheet 계열 통일) ── */
.mxcmp-sheet tbody tr:hover td{ background:var(--gray-50,#f8fafc); }
.mxcmp-sheet tbody tr[data-vsub] td{ background:var(--brand-50,#f0fdfa); }
.mxcmp-sheet tbody tr[data-vsub]:hover td{ background:#e6faf5; }
.mxcmp-sheet tbody tr[data-vcust] td{ background:var(--blue-bg,#e7f2fe); }
.mxcmp-sheet tbody tr[data-vcust]:hover td{ background:#dbeafe; }
.mxcmp-sheet input.mxcmp-rmk:focus, .mxcmp-sheet input.mxcmp-lead:focus{ border-color:var(--blue-300,#5eead4) !important; background:var(--surface,#fff) !important; }
.mxcmp-sheet input.mxcmp-price:focus{ border-color:var(--mx-acc-teal,#0e7490) !important; box-shadow:0 0 0 2px rgba(14,116,144,.12); }

/* ══════════════════════════════════════════════════════════════════════
   v3.232: 야간(다크) 모드 — body.nd-theme.nd-dark
   전략: 중립 토큰(bg/surface/gray 램프/text/border/그림자/사이드바)을 다크로 재정의.
        앱이 var(--surface)·var(--gray-*)·var(--text-*)를 압도적으로 사용(측정: surface 1235·gray 6379·text 704회)
        → 토큰만 뒤집어도 토큰 기반 전 모듈이 함께 야간화. 남은 인라인 하드코딩(#fff·#111 등 ~150곳)은
        아래 chrome 오버라이드 + 실사용 지적분 패치로 보정.
   gray 램프는 라이트값의 명도 반전(50=최밝은배경→최어두운배경 … 900=최어두운텍스트→최밝은텍스트).
   ══════════════════════════════════════════════════════════════════════ */
body.nd-theme.nd-dark{
  color-scheme:dark;
  /* 배경/표면 */
  --bg:#0f1218; --surface:#181d27; --panel:#181d27; --surface-2:#1e242f;
  /* gray 램프 반전 — 낮은번호=어두운 배경 / 높은번호=밝은 텍스트 */
  --gray-50:#1a1f29; --gray-75:#1e232d; --gray-100:#222834; --gray-200:#2b323f;
  --gray-300:#3a4251; --gray-400:#8b93a4; --gray-500:#a6aebe; --gray-600:#c3cad6;
  --gray-700:#d7dbe4; --gray-900:#f2f5fa;
  /* 보더 */
  --border:#2b323f; --border-strong:#3a4251; --brd:#2b323f;
  /* 텍스트 */
  --text-strong:#f2f5fa; --text:#e3e8f1; --text-2:#a9b2c3; --text-3:#7c8698;
  /* 구 navy 잉크(제목색) → 밝게 (액센트 navy-700은 브랜드로 유지) */
  --navy-800:#f2f5fa; --navy-900:#f5f7fb; --navy-700:#5f78ff; --navy-600:#6c82ff; --navy-500:#7b8dff;
  --text-strong-navy:#f2f5fa;
  /* 브랜드 — 다크에서 약간 밝게 */
  --brand:#5f78ff; --brand-600:#4b64ff; --brand-700:#4055e0;
  --brand-50:#20263a; --brand-100:#26304a; --brand-200:#31406b;
  --mx-acc-teal:#5f78ff; --mx-acc-teal-d:#7b8dff; --mx-acc-navy:#5f78ff; --mx-acc-navy2:#6c82ff; --mx-acc-sky:#5f78ff;
  --primary:#5f78ff; --primary-dark:#4b64ff; --primary-hover:#7387ff;
  /* 상태 칩 — 배경 어둡게 / 텍스트 밝게 */
  --green:#34d399; --green-bg:#12331f; --green-bg-soft:#14361f; --green-text:#7ee0a6; --green-text-dark:#7ee0a6;
  --yellow:#fbbf24; --yellow-bg:#3a2c12; --yellow-bg-soft:#332711; --yellow-text:#f3c778; --orange:#fb923c;
  --red:#f87171; --red-bg:#3a1c1c; --red-text:#f4a3a3; --red-strong:#f87171;
  --blue-bg:#152a45; --blue-text:#8bb8f5; --blue-border:#2c4568; --blue-300:#5f78ff;
  --purple:#a78bfa; --purple-bg:#271f3d; --purple-text:#c4b3f7;
  /* 그림자 — 다크에선 진하게 */
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 2px 8px rgba(0,0,0,.5);
  --shadow-md:0 8px 24px rgba(0,0,0,.55);
  --shadow-lg:0 16px 40px rgba(0,0,0,.62);
  /* 사이드바 — 다크 그룹형 */
  --sb-bg:#12161e; --sb-fg:#a9b2c3; --sb-fg-h:#f2f5fa; --sb-on:#7b8dff;
  --sb-acc:#5f78ff; --sb-ico:#7c8698; --sb-line:transparent; --sb-sec:#7c8698;
  --sb-subfg:#98a2b3; --sb-hover:#1c222d; --sb-tgbg:#20263a; --sb-tgfg:#8ea2ff; --sb-scroll:rgba(255,255,255,.14);
}

/* ── 헤더 다크 (nd-theme 라이트 #fff 오버라이드) ── */
body.nd-theme.nd-dark .hdr{ background:#12161e !important; color:var(--text) !important; border-bottom:1px solid var(--border) !important; box-shadow:0 2px 12px rgba(0,0,0,.5) !important; }
body.nd-theme.nd-dark .hdr-title{ color:var(--text-strong) !important; -webkit-text-fill-color:var(--text-strong) !important; }
body.nd-theme.nd-dark #hdr-search-container{ background:rgba(255,255,255,.06) !important; border-color:var(--border) !important; }
body.nd-theme.nd-dark #hdr-search-input{ color:var(--text) !important; }
body.nd-theme.nd-dark #hdr-search-input::placeholder{ color:var(--text-3) !important; }
body.nd-theme.nd-dark .hdr button:not(#login-btn):not(#hdr-hr-btn):not(.tab-btn):not(#hdr-user-btn):not(.hdr-home-btn){ background:var(--surface-2) !important; color:var(--text-2) !important; border-color:var(--border) !important; }
body.nd-theme.nd-dark .hdr button:not(#login-btn):not(#hdr-hr-btn):not(.tab-btn):not(#hdr-user-btn):not(.hdr-home-btn):hover{ background:#252b38 !important; color:var(--text) !important; }

/* ── 주간/야간 토글 버튼 (shadcn toggle-theme 스타일: 해↔달 회전 크로스페이드) ── */
.hdr-dark-toggle{ position:relative; width:34px; height:34px; min-width:34px; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); cursor:pointer; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto; transition:background .15s,border-color .15s; }
.hdr-dark-toggle:hover{ background:rgba(255,255,255,.2); }
body.nd-theme .hdr-dark-toggle{ background:var(--surface-2,#f8fafc); border:1px solid var(--border,#e6e9f2); }
body.nd-theme .hdr-dark-toggle:hover{ background:var(--gray-100); }
.hdr-dark-toggle .nd-ico-sun, .hdr-dark-toggle .nd-ico-moon{ position:absolute; font-size:17px; line-height:1; transition:transform .4s cubic-bezier(.5,1.6,.4,1), opacity .3s; }
.hdr-dark-toggle .nd-ico-sun{ color:#f59e0b; transform:rotate(0) scale(1); opacity:1; }
.hdr-dark-toggle .nd-ico-moon{ color:#c4b5fd; transform:rotate(-90deg) scale(0); opacity:0; }
body.nd-dark .hdr-dark-toggle .nd-ico-sun{ transform:rotate(90deg) scale(0); opacity:0; }
body.nd-dark .hdr-dark-toggle .nd-ico-moon{ transform:rotate(0) scale(1); opacity:1; }

/* ── chrome/공통 컴포넌트 다크 보정 (토큰으로 안 잡히는 하드코딩 흰색 최소 보정) ── */
body.nd-theme.nd-dark{ background:var(--bg); color:var(--text); }
body.nd-theme.nd-dark .card, body.nd-theme.nd-dark .kpi{ background:var(--surface); border-color:var(--border); }
body.nd-theme.nd-dark .inp, body.nd-theme.nd-dark input:not([type=checkbox]):not([type=radio]):not(.lp-field), body.nd-theme.nd-dark select, body.nd-theme.nd-dark textarea{ background:var(--gray-50) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
body.nd-theme.nd-dark input::placeholder, body.nd-theme.nd-dark textarea::placeholder{ color:var(--text-3) !important; }
/* 테이블 헤더/행 */
body.nd-theme.nd-dark thead th{ background:var(--gray-50) !important; color:var(--text-3) !important; border-bottom-color:var(--border) !important; }
body.nd-theme.nd-dark tbody tr{ border-color:var(--border); }
body.nd-theme.nd-dark tbody tr:hover, body.nd-theme.nd-dark tbody tr:hover td{ background:var(--gray-75) !important; }
body.nd-theme.nd-dark td{ border-color:var(--border); }
/* 설정 화면 */
body.nd-theme.nd-dark .adm-content, body.nd-theme.nd-dark .adm-pane, body.nd-theme.nd-dark .adm-nav, body.nd-theme.nd-dark .stg-card-sect{ background:var(--surface); color:var(--text); }
body.nd-theme.nd-dark .adm-nav-item{ color:var(--text-2); }
body.nd-theme.nd-dark .adm-nav-item.active{ background:var(--brand-50); color:var(--brand); }
/* 모달/다이얼로그 — MxDialog·팝오버 흰 배경 */
body.nd-theme.nd-dark .mx-dialog, body.nd-theme.nd-dark .mx-dialog-card, body.nd-theme.nd-dark dialog, body.nd-theme.nd-dark .mxpop, body.nd-theme.nd-dark .popover, body.nd-theme.nd-dark [class*="modal"]{ background:var(--surface) !important; color:var(--text); border-color:var(--border) !important; }
body.nd-theme.nd-dark .mx-dialog-backdrop, body.nd-theme.nd-dark dialog::backdrop{ background:rgba(0,0,0,.6) !important; }
/* 하드코딩 흰 배경/밝은 회색 배경 최소 catch (셀렉터 특이도 낮게, !important로 인라인 오버라이드) */
body.nd-theme.nd-dark [style*="background:#fff"]:not(img):not(.lp-card),
body.nd-theme.nd-dark [style*="background:#ffffff"],
body.nd-theme.nd-dark [style*="background: #fff"],
body.nd-theme.nd-dark [style*="background-color:#fff"]{ background-color:var(--surface) !important; }
body.nd-theme.nd-dark [style*="background:#f8fafc"],
body.nd-theme.nd-dark [style*="background:#f1f5f9"],
body.nd-theme.nd-dark [style*="background:#f9fafb"],
body.nd-theme.nd-dark [style*="background:#f4f6fb"]{ background-color:var(--gray-50) !important; }
/* 하드코딩 어두운 텍스트(#0f172a·#111827·#1e293b·#1e3a5f 등) → 밝게 */
body.nd-theme.nd-dark [style*="color:#0f172a"],
body.nd-theme.nd-dark [style*="color:#111827"],
body.nd-theme.nd-dark [style*="color:#1e293b"],
body.nd-theme.nd-dark [style*="color:#1e3a5f"],
body.nd-theme.nd-dark [style*="color:#1a202c"],
body.nd-theme.nd-dark [style*="color:#0b1120"]{ color:var(--text-strong) !important; }
/* 스크롤바 */
body.nd-theme.nd-dark ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); }
body.nd-theme.nd-dark ::-webkit-scrollbar-track{ background:transparent; }
/* 로그인 화면은 자체 다크 디자인 유지 — nd-dark가 토큰을 또 바꿔도 로그인 고유색 우선 */
body.nd-theme.nd-dark #login-page{ color-scheme:dark; }

/* ══ v3.234: 야간모드 보정 — 사이드바 + 네이비 투톤 ══ */
/* ① 사이드바: nd-theme가 .sidebar에 --sb-*·배경을 흰색으로 직접 고정 → 더 높은 특이도로 다크 재정의 */
body.nd-theme.nd-dark .sidebar{
  --sb-bg:#12161e; --sb-fg:#a9b2c3; --sb-fg-h:#f2f5fa; --sb-on:#7b8dff;
  --sb-acc:#5f78ff; --sb-ico:#7c8698; --sb-line:transparent; --sb-sec:#7c8698;
  --sb-subfg:#98a2b3; --sb-hover:#1c222d; --sb-tgbg:#20263a; --sb-tgfg:#8ea2ff;
  --sb-scroll:rgba(255,255,255,.14);
  background:#12161e !important;
  border-right:1px solid #0a0d13 !important;   /* nd-theme 흰 #eaedf5 → 배경보다 어둡게(밝은 선 제거) */
  box-shadow:1px 0 0 #0a0d13 !important;       /* ★진짜 원인: @media(min-width:860px)의 box-shadow:1px 0 0 #eaedf5(흰 세로선) 덮기 */
}
/* 사이드바 내부 흰 구분선/구획(접기바·즐겨찾기·섹션 경계) 다크화 */
body.nd-theme.nd-dark .sidebar [style*="border-bottom:1px solid #e"],
body.nd-theme.nd-dark .sidebar [style*="border-top:1px solid #e"],
body.nd-theme.nd-dark .sidebar [style*="border:1px solid #e"]{ border-color:#232a36 !important; }
body.nd-theme.nd-dark .sidebar hr{ border-color:#232a36 !important; background:#232a36 !important; }
/* ★사이드바 헤더(로고/접기 영역) 아래 밝은 가로선 #eef1f5 제거 (라인 203) */
body.nd-theme.nd-dark .sb-hdr{ border-bottom-color:#232a36 !important; }
body.nd-theme.nd-dark .sb-hdr, body.nd-theme.nd-dark .sb-brand, body.nd-theme.nd-dark .sb-brand-name{ color:var(--sb-fg-h,#f2f5fa) !important; }
/* 사이드바 상단/구분선·즐겨찾기 등 흰 잔재 보정 */
body.nd-theme.nd-dark .sidebar .sb-brand, body.nd-theme.nd-dark .sidebar .sb-top,
body.nd-theme.nd-dark .sidebar .sb-search, body.nd-theme.nd-dark .sidebar input{ background:transparent !important; color:var(--sb-fg) !important; }
body.nd-theme.nd-dark .sidebar [style*="background:#fff"], body.nd-theme.nd-dark .sidebar [style*="background:#ffffff"]{ background:rgba(255,255,255,.05) !important; }

/* ② 네이비 그라데 헤더/히어로/드로어 헤드 → 다크 일관 표면(두 톤 충돌 제거) */
body.nd-theme.nd-dark dialog.mxd .mxd-head,
body.nd-theme.nd-dark .sm-hero,
body.nd-theme.nd-dark #pj-dhead,
body.nd-theme.nd-dark #pd-head{
  background:linear-gradient(135deg,#1a2334,#26355a) !important; color:#f2f5fa !important;
}
/* ③ 네이비 솔리드/그라데 primary 버튼·활성탭 → 브랜드 일관 */
body.nd-theme.nd-dark .pj-save-btn,
body.nd-theme.nd-dark .pj-add-btn,
body.nd-theme.nd-dark .stg-upload-card-btn,
body.nd-theme.nd-dark .stg-sync-bar-btn,
body.nd-theme.nd-dark .bb-sidebar-add,
body.nd-theme.nd-dark .bb-write-btn,
body.nd-theme.nd-dark .bb-cmt-submit,
body.nd-theme.nd-dark .bb-modal-submit,
body.nd-theme.nd-dark dialog.mxd .mxd-btn-primary,
body.nd-theme.nd-dark .si-sort-btn.on,
body.nd-theme.nd-dark .mail-attach-popup button:hover,
body.nd-theme.nd-dark .stab-btn.active::after,
body.nd-theme.nd-dark .crm-type-tab.active,
body.nd-theme.nd-dark .qnav-chip.active{
  background:var(--brand,#5f78ff) !important; border-color:var(--brand,#5f78ff) !important; color:#fff !important;
}
/* navy-50 연한배경 칩/행(하이라이트) → 다크 브랜드 틴트 */
body.nd-theme.nd-dark .rank-row.clickable:hover,
body.nd-theme.nd-dark .crm-co-row.active,
body.nd-theme.nd-dark .crm-type-tab:hover:not(.active),
body.nd-theme.nd-dark .stg-emoji-btn.sel,
body.nd-theme.nd-dark .rfm-key,
body.nd-theme.nd-dark .mtg-our-chip,
body.nd-theme.nd-dark .stg-sync-bar{ background:var(--brand-50,#20263a) !important; }

/* v3.236: 야간모드 — 인라인 하드코딩 흰색 테두리(구분선) 일괄 다크화 */
body.nd-theme.nd-dark [style*="1px solid #e6e9f2"],
body.nd-theme.nd-dark [style*="1px solid #e2e8f0"],
body.nd-theme.nd-dark [style*="1px solid #eaedf5"],
body.nd-theme.nd-dark [style*="1px solid #f1f5f9"],
body.nd-theme.nd-dark [style*="1px solid #eef1f7"],
body.nd-theme.nd-dark [style*="1px solid #e5e7eb"],
body.nd-theme.nd-dark [style*="1px solid #edf0f5"],
body.nd-theme.nd-dark [style*="1px solid #eef2f7"],
body.nd-theme.nd-dark [style*="1.5px solid #e"],
body.nd-theme.nd-dark [style*="2px solid #e2e8f0"],
body.nd-theme.nd-dark [style*="1px solid #ddd"],
body.nd-theme.nd-dark [style*="1px solid #eee"]{ border-color:var(--border) !important; }
/* 설정 좌측 네비·메일/프로젝트 패널 경계 */
body.nd-theme.nd-dark .adm-nav{ border-right-color:var(--border) !important; background:var(--gray-50) !important; }
body.nd-theme.nd-dark .bb-sidebar{ background:var(--gray-50) !important; border-right-color:var(--border) !important; }
body.nd-theme.nd-dark .pm-detail-panel, body.nd-theme.nd-dark .pm-mright, body.nd-theme.nd-dark .mail-list-pane{ border-color:var(--border) !important; }


/* ── v3.325: 조직 & 권한 화면 내부 탭 ── */
.org-tab{background:none;border:none;border-bottom:2.5px solid transparent;color:var(--gray-500,#64748b);font-size:12.5px;font-weight:700;padding:9px 14px;cursor:pointer;font-family:inherit;transition:color .12s,border-color .12s}
.org-tab:hover{color:var(--gray-700,#334155)}
.org-tab.is-on{color:var(--brand,#465fff);border-bottom-color:var(--brand,#465fff)}

/* ══════════════════════════════════════════════════════════════════════════
   v3.388 헤더 액션 버튼 통일
   그동안 버튼마다 인라인 style 이 제각각이라(radius 99px vs var(--r-md),
   padding 5px/6px, margin-left 8px 등) 크기·간격이 미묘하게 어긋났다.
   기준은 이미 있던 .hdr-dark-toggle — 34×34, radius 10.
   ══════════════════════════════════════════════════════════════════════════ */
.hdr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; min-width:34px; padding:0 11px; box-sizing:border-box;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:10px; color:rgba(255,255,255,.92);
  font-family:inherit; font-size:12px; font-weight:700; line-height:1;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s;
  position:relative;   /* 결재·알림 배지(absolute)의 기준점 — 인라인 style 을 걷어내며 함께 사라졌던 것 */
}
.hdr-btn:hover{ background:rgba(255,255,255,.20); }
.hdr-btn:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:2px; }
.hdr-btn--icon{ width:34px; padding:0; font-size:14px; }   /* 아이콘만 → 정사각 */

/* 밝은 헤더(ND) — 흰 배경 위에서는 연회색 칩으로 */
body.nd-theme .hdr-btn{
  background:var(--surface-2,#f8fafc); border-color:var(--border,#e6e9f2); color:var(--text,#111726);
}
body.nd-theme .hdr-btn:hover{ background:var(--gray-100,#f1f5f9); border-color:var(--gray-300,#cbd5e1); }
body.nd-theme .hdr-btn:focus-visible{ outline-color:var(--brand,#465fff); }

/* 성격이 다른 두 개는 색으로 구분 — 외부 시스템(새 창)으로 나간다 */
.hdr-btn--hr{ background:rgba(244,63,94,.18); border-color:rgba(244,63,94,.45); }
.hdr-btn--hr:hover{ background:rgba(244,63,94,.32); }
body.nd-theme .hdr-btn--hr{ background:rgba(244,63,94,.10); border-color:rgba(244,63,94,.34); color:#e11d48; }
body.nd-theme .hdr-btn--hr:hover{ background:rgba(244,63,94,.18); border-color:rgba(244,63,94,.5); }
.hdr-btn--mission{ background:rgba(70,95,255,.16); border-color:rgba(70,95,255,.42); }
.hdr-btn--mission:hover{ background:rgba(70,95,255,.3); }
body.nd-theme .hdr-btn--mission{ background:rgba(70,95,255,.08); border-color:rgba(70,95,255,.32); color:var(--brand,#465fff); }
body.nd-theme .hdr-btn--mission:hover{ background:rgba(70,95,255,.16); border-color:rgba(70,95,255,.5); }

/* 개발자 전용 묶음 — 자식이 전부 숨겨지면 흔적도 남지 않도록 장식 없이 gap 만 */
.hdr-dev-group{ display:inline-flex; align-items:center; gap:6px; }
.hdr-dev-group .hdr-btn{ border-style:dashed; }   /* 일반 기능과 한눈에 구분 */

/* 좌·우 묶음 간격 통일 */
body.nd-theme .hdr-left{ gap:8px !important; }

/* v3.389 헤더 넘침 방지 — 개발 모니터가 좌측 묶음으로 합류하며 폭이 34px 늘어 삐져나왔다.
   ★.hdr 에 overflow:hidden 은 금지 — 알림·결재 드롭다운(absolute)이 잘린다.
   대신 "검색창만 줄어들고 버튼은 안 찌그러지게" 축소 우선순위를 준다. */
body.nd-theme .hdr{ flex-wrap:nowrap; }
body.nd-theme .hdr-left{ min-width:0; }                 /* 기본 min-width:auto 면 안쪽 input 때문에 안 줄어든다 */
body.nd-theme #hdr-search-container{ min-width:118px; } /* 여기까지만 줄고 */
body.nd-theme #hdr-search-input{ min-width:0; width:100%; }
body.nd-theme .hdr-btn,
body.nd-theme .hdr-dark-toggle,
body.nd-theme .hdr-dev-group{ flex:none; }              /* 버튼은 원래 크기 유지 */

/* 화면이 더 좁아지면 검색은 아이콘만 남기고, 그래도 모자라면 ⌘K 배지부터 접는다 */
@media (max-width:1280px){
  body.nd-theme #hdr-search-container kbd{ display:none; }
}
@media (max-width:1100px){
  body.nd-theme #hdr-search-container{ width:44px !important; min-width:44px; padding:5px 0; justify-content:center; }
  body.nd-theme #hdr-search-input{ display:none; }
}

/* v3.392 헤더 우측 묶음 밀착 — 인사/근태~알림 묶음을 개인설정(유저 메뉴) 쪽으로 당긴다.
   벌어져 보이던 실제 원인은 gap 이 아니라 #hdr-user-btn 의 좌우 padding 14px 였다
   (gap 8px + padding 14px = 시각적으로 22px). 간격과 패딩을 함께 좁힌다. */
body.nd-theme .hdr-actions{ gap:6px !important; }
body.nd-theme #login-area{ gap:4px; }
body.nd-theme #hdr-user-btn{ padding-left:10px !important; padding-right:12px !important; }