/* ══════════════════════════════════════════════════════════════════════
   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;
  --evo-acc-navy:#2f45d8; --evo-acc-navy2:#465fff; --evo-acc-sky:#3b56f0;
  /* ND-21: 브랜드 teal 액센트(트윗 액션·케이스 칩·Soft Daylight 버튼) → 마린블루로 통일.
     ND-14에서 275곳을 var(--evo-acc-teal,…)로 토큰화해둔 것의 활용 지점. */
  --evo-acc-teal:#465fff; --evo-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: EVOCOV 로고 원본에서 추출한 브랜드 색 (심볼마크와 워드마크가 같은 색을 쓰도록) */
  --evo-brand-blue:#125B9C; --evo-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: 사이드바 브랜드 — 세로 배치: EVOCOV 로고 위 / 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; }
/* 접기 버튼: 심볼 아이콘 + 라운드 호버 */
/* ★2026-08-29 사용자 신고 재발: «접기 버튼이 안 보인다(눌리긴 함)».
   원인은 여기 색이었다 — --text-3(#98a2b3)은 흰 사이드바 대비 2.4:1 이라 묻힌다.
   위 .sb-toggle 규칙이 --text-2 를 줘도 이 규칙이 아이콘에 직접 걸려 이긴다. 같은 눈금으로 올린다. */
body.nd-theme .sb-toggle-icon .ti{ font-size:18px; color:var(--text-2,#5b6573); transition:color .15s; }
body.nd-theme .sb-toggle:hover .sb-toggle-icon .ti{ color:var(--brand,#465fff); }
body.nd-theme .sb-toggle:hover .sb-toggle-icon .ti{ color:var(--brand); }
/* ND-32: 헤더 (테마) 전환 버튼 제거 */
body.nd-theme .hdr button[onclick^="EvoTheme.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:6px 8px; }
/* ND: 각진 풀폭 하이라이트 → 안쪽 여백 + 둥근 pill(모던 사이드바 룩). 비활성 가볍게(500). */
body.nd-theme .sb-item-btn{
  border-bottom:none; width:100%; box-sizing:border-box; margin:1px 0; padding:9px 11px;
  border-radius:10px; font-weight:500; transition:background .14s ease, color .14s ease;
}
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); font-weight:600; }
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:.7px; font-size:10px; font-weight:700; color:var(--sb-sec); opacity:.75; padding:15px 14px 5px; }
body.nd-theme .sb-hdr{ border-bottom:1px solid #eef1f5; }
/* 사이드바 브랜드 = 로고 스퀘어 + SEP + 버전 배지 (헤더에서 이동, 아티팩트 구조) */
/* 락업 구조: [마크] [EVOCOV] [SEP / 버전 2단]
   - 마크 높이 = "EVOCOV" 한 줄 높이
   - 우측 2단(SEP 위 · 버전 아래)의 전체 높이 = EVOCOV 높이 (align-self:stretch 로 행 높이에 맞춤) */
body.nd-theme .sb-brand{ display:flex; align-items:center; gap:8px; }
/* EVOCOV 심볼마크 — 원 로고의 원형 엠블럼 그대로. 자체 형태·색을 가지므로 배경 컨테이너를 두지 않는다. */
/* 2026-08-29 사용자 지시: 워드마크(«EVOCOV» 글자)는 빼고 로고 심볼만 — SEP·버전은 남긴다 */
body.nd-theme .sb-wm{ display:none !important; }
/* ★2026-08-29: <img>(.sb-mark) 는 경로·로드 타이밍에 계속 걸려 «로고가 안 보인다»가 반복됐다.
   → 이미지 요소를 쓰지 않고 브랜드 줄에 «배경»으로 그린다. 값(--evo-mark)은 부팅 때 내장 base64 로 채운다.
     배경은 로드 실패라는 개념이 없어(데이터 URI) 항상 그려진다. */
.sb-brand::before{ content:''; width:26px; height:26px; flex:none; display:block;
  background:var(--evo-mark) center/contain no-repeat; }
.sb-brand:not([style*="--evo-mark"])::before{}   /* 값이 없으면 빈 칸(레이아웃만 유지) */
.sb-mark{ display:none !important; }            /* 옛 이미지 자리 — 규격만 남기고 그리지 않는다 */
/* 심볼마크(정사각) — 접든 펴든 같은 모양.
   ★테마 클래스(body.nd-theme)에 매달지 않는다: 그 클래스가 늦게 붙거나 빠진 순간 규격이 사라져
     «로고가 안 보인다»가 된다(2026-08-29 실측 대응). 규격은 클래스 없이도 성립해야 한다. */
.sb-mark{ width:26px; height:26px; max-width:none; flex-shrink:0; object-fit:contain; display:block; }
body.nd-theme .sb-mark{ width:26px; height:26px; max-width:none; flex-shrink:0; object-fit:contain; display:block; }
body.nd-theme .sidebar.collapsed .sb-mark{ width:26px; height:26px; object-fit:contain; }
/* 이 줄이 락업 높이를 결정한다 */
body.nd-theme .sb-wm{ font-weight:800; font-size:24px; line-height:1.1; letter-spacing:-.4px; color:var(--evo-brand-blue,#125B9C); white-space:nowrap; }
/* SEP / 버전 2단 — 행 높이(=EVOCOV 높이)에 맞춰 늘리고 위아래로 벌린다 */
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(--evo-brand-orange,#E96328); }
/* 버전은 조용하게 — 2단 안에 들어가야 하므로 컴팩트하게 */
body.nd-theme .sb-brand .hdr-ver-badge{
  font-size:9px !important; font-weight:700 !important; padding:0 2px !important; line-height:1.25;
  color:var(--text-3,#98a2b3) !important; background:transparent !important;
  border:none !important; border-radius:0 !important;   /* 2026-08-29 사용자 지시: 테두리 삭제 — 여기가 진짜 규칙이었다(더 구체적) */
}
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{ border-radius:9px; margin:1px 0; font-weight:500; transition:background .14s ease, color .14s ease; }
body.nd-theme .sb-sub .sb-sub-btn:hover{ background:var(--sb-hover); }
body.nd-theme .sb-sub .sb-sub-btn.active{ background:var(--brand-50); color:var(--brand); font-weight:600; }

/* ── 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{
  font-size:9px !important; font-weight:700 !important; padding:0 2px !important; line-height:1.25;
  color:var(--text-3,#98a2b3) !important; background:transparent !important;
  border:none !important;   /* 2026-08-29 사용자 지시: 테두리 삭제 */
  border-radius:0 !important; letter-spacing:0 !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):not(.usr-dd-item):not(.usr-sw){
  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):not(.usr-dd-item):not(.usr-sw):hover{ background:#eef1f7 !important; color:var(--text) !important; }
/* v2.880: EVOCOV 로고(홈) 버튼 — 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; }
/* v3.843: 사용자 메뉴 항목은 '헤더 버튼'이 아니라 '목록 항목'이다.
   위 헤더 버튼 규격(배경·1px 테두리·높이 34px)이 드롭다운 안까지 내려와 항목마다
   네모 상자가 그려지고 있었다 — .hdr-home-btn 때와 같은 처리(제외 + 전용 규칙). */
body.nd-theme .usr-dropdown .usr-dd-item{
  background:none !important; border:none !important; box-shadow:none !important;
  height:auto !important; border-radius:12px !important;
  color:var(--text-strong) !important; transition:background .15s, color .15s !important;
}
body.nd-theme .usr-dropdown .usr-dd-item:hover{
  background:rgba(70,95,255,.10) !important; color:var(--primary,#465fff) !important;
}
body.nd-theme .usr-dropdown .usr-dd-item:active{ background:rgba(70,95,255,.17) !important; }
body.nd-theme .usr-dropdown .usr-dd-item.danger{ color:var(--red,#e11d48) !important; }
body.nd-theme .usr-dropdown .usr-dd-item.danger:hover{
  background:rgba(225,29,72,.10) !important; color:#be123c !important;
}
/* 토글도 헤더 버튼 규격에서 빼둔다(스위치에 테두리가 생기면 유리 위에서 이물감) */
body.nd-theme .usr-dropdown .usr-sw{ border:none !important; height:27px !important; }
/* 다크 */
body.nd-theme.nd-dark .usr-dropdown .usr-dd-item:hover{
  background:rgba(95,120,255,.20) !important; color:#9db1ff !important;
}
body.nd-theme.nd-dark .usr-dropdown .usr-dd-item.danger:hover{
  background:rgba(225,29,72,.20) !important; color:#ff8098 !important;
}
/* ND-38: 헤더 버튼 높이 일괄 통일 — 텍스트 버튼(인사/근태·미션보드)과 아이콘 버튼 정렬 */
body.nd-theme .hdr-actions button:not(#hdr-user-btn):not(.usr-dd-item):not(.usr-sw),
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-sgop-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-sgop-btn):not(#hdr-user-btn) > i{
  display:inline-flex !important; width:100% !important; justify-content:center !important; line-height:1 !important;
}
/* 2026-08-15 (사용자 요청): 인사/근태·미션보드 CTA를 '각기 다른 그라데이션'으로. */
/* 인사/근태 = rose→coral 그라데이션 */
body.nd-theme #hdr-hr-btn{ background:linear-gradient(135deg,#fff1f2,#ffdde3) !important; color:#e11d48 !important; border:1px solid #fbcfd6 !important; }
body.nd-theme #hdr-hr-btn:hover{ background:linear-gradient(135deg,#ffe4e6,#fecdd3) !important; border-color:#f9b8c2 !important; }
/* 미션보드 = indigo→violet 그라데이션(인사/근태와 확연히 다른 색계열) */
body.nd-theme #hdr-eval-btn{ background:linear-gradient(135deg,#eef1ff,#e6e0ff) !important; color:#5b46e5 !important; border:1px solid #d7d4fb !important; }
body.nd-theme #hdr-eval-btn:hover{ background:linear-gradient(135deg,#e5e9ff,#ddd3ff) !important; color:#4c34dd !important; border-color:#c8c3f8 !important; }

/* 2026-08-15 (사용자 요청): 캘린더 버튼만 원형이던 문제 — app.css #hdr-mcal-btn 의 레거시 pill(radius --r-xl=20px, margin-right:6px)이
   ID 우선순위로 New Design 균일 아이콘(34×34·radius10)을 덮고 있었다. 다른 아이콘과 동일하게 되돌린다. */
body.nd-theme #hdr-mcal-btn{ border-radius:10px !important; margin-right:0 !important; padding:0 !important; width:34px !important; min-width:34px !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; }
/* ★ND-4326 (사용자 지시): 메일 옆 «조약돌» 을 없앤다 — 알약도, 큰 글씨도, 제각각인 크기도.
   숫자는 «옆에 적힌 수» 이지 강조 딱지가 아니다. 폴더 이름이 주인공이고 수는 거들 뿐이다.
   ★자리를 맞추려고 등폭 숫자(tabular-nums)를 쓴다 — 안 그러면 자릿수마다 오른쪽 끝이 들쭉날쭉하다. */
/* ★ND-4328 (사용자 재지적 «폰트 크기를 동일하게»): 클래스에 기대지 않고 «목록 안의 모든 수» 를 한 규칙으로 잡는다.
   .mail-cnt 가 안 붙는 카운트가 하나라도 생기면 다시 제각각이 되기 때문이다.
   #mail-sidebar-tree 는 이 목록의 유일한 컨테이너다(index.html). */
#mail-sidebar-tree .badge,
#mail-sidebar-tree .badge.mail-cnt,
body.nd-theme #mail-sidebar-tree .badge,
body.nd-theme #mail-sidebar-tree .mail-folder-btn.active .badge{
  background:transparent !important; border:none !important; padding:0 0 0 6px !important;
  border-radius:0 !important; font-size:11px !important; font-weight:600 !important;
  line-height:1.4 !important; letter-spacing:0 !important;
  color:var(--text-3,#94a3b8) !important; font-variant-numeric:tabular-nums; }
body.nd-theme #mail-sidebar-tree .mail-folder-btn.active .badge{ color:var(--brand) !important; }

body.nd-theme .mail-folder-btn .badge.mail-cnt,
body.nd-theme .mail-folder-btn.active .badge.mail-cnt{
  background:transparent; border:none; padding:0 0 0 6px; border-radius:0;
  font-size:11px; font-weight:600; line-height:1.4; letter-spacing:0;
  color:var(--text-3,#94a3b8); font-variant-numeric:tabular-nums; }
body.nd-theme .mail-folder-btn.active .badge.mail-cnt{ color:var(--brand); }
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) ══ */
/* 2026-08-20: 채운 브랜드 블록(굵기800) → 조용한 섹션 헤더. 사이드바 위계상 '메뉴'가 주인공이고 즐겨찾기는 구획 라벨. */
.sb-fav-toggle{ width:calc(100% - 16px); margin:2px 8px 2px; display:flex; align-items:center; gap:7px;
  background:none; border:none; border-radius:7px; padding:7px 9px;
  color:var(--sb-sec,#98a2b3); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; font-family:inherit; transition:background .14s ease, color .14s ease; }
.sb-fav-toggle .sb-fav-ic{ font-size:13px; opacity:.85; }
.sb-fav-toggle .sb-fav-lbl{ flex:1; text-align:left; }
.sb-fav-toggle .sb-fav-cnt{ font-size:10.5px; font-weight:600; letter-spacing:0; color:var(--sb-sec,#98a2b3);
  font-variant-numeric:tabular-nums; }
.sb-fav-toggle .sb-fav-chev{ font-size:12px; opacity:.6; transition:transform .2s cubic-bezier(.33,1,.68,1); }
.sb-fav-toggle.active .sb-fav-chev{ transform:rotate(180deg); }
.sb-fav-toggle:hover{ background:var(--sb-hover,#f4f6fb); color:var(--text-2,#5b6573); }
.sb-fav-toggle.active{ color:var(--brand,#465fff); }
/* 2026-08-23: '즐겨찾기 뷰' 라는 모드는 없앴다. 예전엔 body.fav-view 로 메뉴트리를 통째로
   감췄는데(즐겨찾기를 보려면 메뉴를 포기해야 했다), 이제 메뉴 위에 함께 놓이는 한 섹션이다. */
#sb-fav-view{ padding:2px 0 4px; }
.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-item-btn)와 같은 값이어야 한다 — 다르면 즐겨찾기만
   6px 더 들어가 보이고 글자도 작아 '딴 목록'으로 읽힌다(2026-08-23 사용자 지시).
   숫자를 바꿀 일이 생기면 .sb-item-btn(app.css 2264 · newdesign.css 182) 과 함께 바꾼다. */
.sb-fav-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; margin:1px 0; border-radius:10px; cursor:pointer; color:var(--sb-fg,#5b6573); font-size:13.5px; font-weight:500; letter-spacing:-.2px; transition:background .14s ease, color .14s ease; }
.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:600; }
/* 아이콘은 메인 메뉴와 같은 .sb-icon 을 쓴다(폭 18 · 16px · --sb-ico).
   ND 는 order:0 을 .sb-item-btn 안에서만 풀어 줘서, 여기서도 같이 풀어야 왼쪽에 선다. */
body.nd-theme .sb-fav-item .sb-icon{ order:0; }
.sb-fav-item.active .sb-icon{ color:var(--brand,#465fff); opacity:1; }
.sb-fav-item:hover .sb-icon{ color:var(--sb-fg-h,#111827); }
.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:14px; cursor:pointer; line-height:1; padding:0 2px; opacity:0; transition:opacity .12s, color .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.5; padding:8px 18px 4px; }
/* 점선 대시 박스 → 조용한 텍스트 액션(메뉴 리듬을 깨지 않음) */
.sb-fav-add{ width:100%; margin:2px 0 6px; display:flex; align-items:center; gap:10px;
  background:none; border:none; border-radius:10px; padding:8px 11px;
  color:var(--sb-sec,#98a2b3); font-size:12px; font-weight:500; cursor:pointer; font-family:inherit;
  transition:background .14s ease, color .14s ease; }
.sb-fav-add:hover{ background:var(--sb-hover,#f4f6fb); color:var(--brand,#465fff); }
.sb-fav-add i{ font-size:13px; }
.sidebar.collapsed .sb-fav-lbl, .sidebar.collapsed .sb-fav-chev, .sidebar.collapsed .sb-fav-cnt, .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; }

/* ── 좌측하단 "New Design" 버전 배지 제거 (사용자 요청 2026-08-15). 버전 확인은 사이드바 하단 js-app-version 으로. ── */

/* ── 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: 단가비교 시트 EvoSheet 표준 룩 — 행 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(--evo-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;
  /* ★ND-4334 (2026-08-30, 브라우저 실검증에서 발견): «파생 토큰» 을 여기서 다시 잡는다.
     app.css 는 :root(html) 에서 --txt:var(--gray-900) 처럼 다른 토큰을 참조해 파생시킨다.
     그런데 다크 팔레트는 body 에 걸린다 — :root 는 body 의 «부모» 라서 반전된 gray 를 못 본다.
     결과: --txt 가 light 값(#1a202c, 거의 검정)으로 굳어, 그 토큰을 쓰는 것이 배경에 묻혔다.
     실제로 app.css 의 바닥 규칙 td{color:var(--txt)} 때문에 다크에서 «평범한 표의 셀» 이
     통째로 안 보였다(주문서 정체 목록에서 실측). 셀마다 색을 박는 대신 뿌리를 고친다. */
  --txt:var(--gray-900); --txt2:var(--gray-500); --txt3:var(--gray-400);
  --blue:var(--navy-700); --blue2:var(--navy-600);
  /* 구 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;
  --evo-acc-teal:#5f78ff; --evo-acc-teal-d:#7b8dff; --evo-acc-navy:#5f78ff; --evo-acc-navy2:#6c82ff; --evo-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); }
/* 모달/다이얼로그 — EvoDialog·팝오버 흰 배경 */
body.nd-theme.nd-dark .evo-dialog, body.nd-theme.nd-dark .evo-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 .evo-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; }
/* 스크롤바 */
/* 2026-08-21: 다크도 같은 이유로 진하게. .16 은 검은 배경에서 거의 안 보였다. */
body.nd-theme.nd-dark ::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }
body.nd-theme.nd-dark ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28); border:3px solid transparent; background-clip:content-box; }
body.nd-theme.nd-dark ::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.42); }
body.nd-theme.nd-dark ::-webkit-scrollbar-thumb:active{ background:rgba(255,255,255,.55); }
body.nd-theme.nd-dark *{ scrollbar-color:rgba(255,255,255,.28) rgba(255,255,255,.04); }
/* 로그인 화면은 자체 다크 디자인 유지 — 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). 간격과 패딩을 함께 좁힌다. */
/* 2026-08-15 (사용자 요청): 아이콘 묶음과 유저(아이디 인디케이터)를 오른쪽에 밀착.
   .hdr-actions 가 늘어나(grow) 유저만 멀리 밀려 보이던 케이스까지 잡으려 flex-end 로 우측 정렬 강제 +
   자식들의 잔여 좌우 마진 제거(간격은 gap 로만). */
body.nd-theme .hdr-actions{ gap:6px !important; justify-content:flex-end !important; flex-wrap:nowrap !important; }
body.nd-theme .hdr-actions > *{ margin-left:0 !important; margin-right:0 !important; }
body.nd-theme #login-area{ gap:4px !important; margin-left:0 !important; }
body.nd-theme #hdr-user-btn{ padding-left:10px !important; padding-right:12px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-20 사이드바 스타일 옵션 (사용자 선택 · 설정 ▸ 표시·개인화)
   html[data-sbstyle="finder|settings|ios|dark"] — 미지정(기본)이면 기존 ND pill 그대로.
   DOM·JS 무변경: .sb-item-btn/.sb-icon/.sb-label/.sb-sub-btn 구조에 스킨만 덮어씀.
   ★backdrop-filter 미사용(정적 그라데이션) — Windows Chrome 재래스터 비용 회피(성능 표준).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01. Finder — 중성 회색 활성, 색은 아이콘만 ── */
body.nd-theme[data-sbstyle="finder"] .sb-item-btn{ padding:5px 9px; border-radius:6px; font-size:13px; font-weight:400; margin:1px 0; }
body.nd-theme[data-sbstyle="finder"] .sb-item-btn .sb-icon{ color:#5b8def; }
body.nd-theme[data-sbstyle="finder"] .sb-item-btn:hover{ background:rgba(0,0,0,.045); }
body.nd-theme[data-sbstyle="finder"] .sb-item-btn.active,
body.nd-theme[data-sbstyle="finder"] .sb-item-btn.open{ background:rgba(0,0,0,.085); color:var(--text,#1d1d1f); font-weight:500; }
body.nd-theme[data-sbstyle="finder"] .sb-item-btn.active .sb-icon,
body.nd-theme[data-sbstyle="finder"] .sb-item-btn.open .sb-icon{ color:#3b6fd4; }
body.nd-theme[data-sbstyle="finder"] .sb-sub .sb-sub-btn{ font-size:12.5px; padding-top:4px; padding-bottom:4px; }
body.nd-theme[data-sbstyle="finder"] .sb-sub .sb-sub-btn.active{ background:rgba(0,0,0,.075); color:var(--text,#1d1d1f); }
body.nd-theme.nd-dark[data-sbstyle="finder"] .sb-item-btn:hover{ background:rgba(255,255,255,.06); }
body.nd-theme.nd-dark[data-sbstyle="finder"] .sb-item-btn.active,
body.nd-theme.nd-dark[data-sbstyle="finder"] .sb-item-btn.open{ background:rgba(255,255,255,.11); color:#fff; }

/* ── 02. 시스템 설정 — 컬러 아이콘 타일, 활성 brand 채움 ── */
body.nd-theme[data-sbstyle="settings"] .sb-item-btn{ padding:5px 9px; border-radius:8px; font-size:13px; gap:10px; margin:1px 0; }
/* 즐겨찾기 줄(.sb-fav-item)도 같은 타일을 쓴다 — 사이드 메뉴와 한 화면에 있는데
   한쪽만 선 아이콘이면 다른 앱처럼 보인다(2026-08-23 사용자 지시). */
body.nd-theme[data-sbstyle="settings"] .sb-item-btn .sb-icon,
body.nd-theme[data-sbstyle="settings"] .sb-fav-item .sb-icon{
  width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex:none;
  color:#fff; background:#8e8e93; box-shadow:0 1px 1.5px rgba(0,0,0,.16); font-size:13px;
}
body.nd-theme[data-sbstyle="settings"] .sb-item-btn .sb-icon i,
body.nd-theme[data-sbstyle="settings"] .sb-fav-item .sb-icon i{ font-size:13px; }
/* 모듈별 고유 색 — 기존 모듈 액센트와 동일 계열.
   ★.sb-item-btn 이 아니라 '.sb-nav 안에서 data-tab 을 가진 것' 으로 잡는다 —
     즐겨찾기 줄도 같은 색표를 그대로 쓴다(색표를 복사하면 두 벌이 된다). */
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="welcome"] .sb-icon{ background:#5b8def; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="mail"] .sb-icon{ background:#3ba3f0; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="sales"] .sb-icon{ background:#2fb37a; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="quote"] .sb-icon{ background:#465fff; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="purchase"] .sb-icon{ background:#f0902f; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="logistics"] .sb-icon{ background:#8b6ef0; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="accounting"] .sb-icon{ background:#e0603f; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="casehub"] .sb-icon{ background:#6e8ba0; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="board"] .sb-icon{ background:#c07ab5; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="service"] .sb-icon{ background:#0aa2c0; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="crm"] .sb-icon{ background:#d4568a; }
body.nd-theme[data-sbstyle="settings"] .sb-nav [data-tab="settings"] .sb-icon{ background:#8e8e93; }
body.nd-theme[data-sbstyle="settings"] .sb-item-btn:hover{ background:rgba(0,0,0,.045); }
body.nd-theme[data-sbstyle="settings"] .sb-item-btn.active,
body.nd-theme[data-sbstyle="settings"] .sb-item-btn.open{ background:var(--brand,#465fff); color:#fff; font-weight:600; }
body.nd-theme[data-sbstyle="settings"] .sb-item-btn.active .sb-icon,
body.nd-theme[data-sbstyle="settings"] .sb-item-btn.open .sb-icon{ background:rgba(255,255,255,.22) !important; box-shadow:none; }
body.nd-theme[data-sbstyle="settings"] .sb-item-btn.active .sb-arrow,
body.nd-theme[data-sbstyle="settings"] .sb-item-btn.open .sb-arrow{ color:rgba(255,255,255,.85); }
/* 소메뉴는 Xcode 밀도 채택 — 펼쳐도 스크롤 최소화 */
body.nd-theme[data-sbstyle="settings"] .sb-sub .sb-sub-btn{ font-size:12px; padding-top:3px; padding-bottom:3px; }
body.nd-theme.nd-dark[data-sbstyle="settings"] .sb-item-btn:hover{ background:rgba(255,255,255,.06); }

/* ── 04. iOS 그룹 인셋 — 터치 우선(44px) ── */
body.nd-theme[data-sbstyle="ios"] .sb-nav{ padding:10px 10px; }
/* ★2026-08-29 수정: 이 앱은 «항목 1개 = .sb-group 1개» 마크업이다(index.html).
   그래서 .sb-group 에 카드(배경·테두리·overflow:hidden·margin 12px)를 주면 항목마다 카드가 생기고
   버튼이 카드보다 커져 글자가 잘렸다(사용자 실측). 행 자체를 인셋 행으로 그린다. */
body.nd-theme[data-sbstyle="ios"] .sb-group{
  background:transparent; border:none; border-radius:0; overflow:visible; margin:0 0 2px;
}
body.nd-theme[data-sbstyle="ios"] .sb-item-btn{
  display:flex; align-items:center; gap:9px;
  min-height:36px; height:auto; padding:5px 10px; margin:0;
  border-radius:9px; border:none; background:transparent;   /* 2026-08-29: 테두리·카드 배경 제거(사용자 지시) */
  font-size:13px; font-weight:400; line-height:1.25; position:relative; overflow:hidden;
}
body.nd-theme[data-sbstyle="ios"] .sb-item-btn:hover{ background:rgba(15,23,42,.05); }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn .sb-label{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.nd-theme[data-sbstyle="ios"] .sb-item-btn .sb-icon{
  order:0; width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  flex:none; color:#fff; background:#8e8e93; font-size:12.5px; line-height:1; opacity:1;
}
body.nd-theme[data-sbstyle="ios"] .sb-item-btn[data-tab="welcome"] .sb-icon{ background:#5b8def; }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn[data-tab="mail"] .sb-icon{ background:#3ba3f0; }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn[data-tab="sales"] .sb-icon{ background:#2fb37a; }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn[data-tab="quote"] .sb-icon{ background:#465fff; }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn[data-tab="purchase"] .sb-icon{ background:#f0902f; }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn[data-tab="logistics"] .sb-icon{ background:#8b6ef0; }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn[data-tab="accounting"] .sb-icon{ background:#e0603f; }
body.nd-theme[data-sbstyle="ios"] .sb-item-btn.active,
body.nd-theme[data-sbstyle="ios"] .sb-item-btn.open{
  background:var(--brand-50,#e8ebff); border:none; color:var(--brand,#465fff); font-weight:600;
}
/* 하위 메뉴가 열리면 그 항목과 한 덩어리로 보이게 — 아래 모서리를 붙인다 */
body.nd-theme[data-sbstyle="ios"] .sb-item-btn.open{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
body.nd-theme[data-sbstyle="ios"] .sb-sub{
  background:rgba(15,23,42,.03); border:none; border-radius:0 0 9px 9px; overflow:hidden;
}
body.nd-theme[data-sbstyle="ios"] .sb-sub .sb-sub-btn{ min-height:31px; height:auto; font-size:12.5px; padding-left:41px; border-radius:0; border:none; }

/* ── 05. 다크 머티리얼 — 사이드바만 어둡게(정적 그라데이션) ── */
body.nd-theme[data-sbstyle="dark"] #sidebar,
body.nd-theme[data-sbstyle="dark"] .sidebar,
body.nd-theme[data-sbstyle="dark"] aside.sb{
  background:linear-gradient(180deg,#2a2a30 0%,#1f1f24 100%) !important;
  border-right-color:#33333a !important;
}
body.nd-theme[data-sbstyle="dark"] .sb-nav{ padding:8px 9px; }
body.nd-theme[data-sbstyle="dark"] .sb-item-btn{ padding:6px 9px; border-radius:7px; font-size:13px; color:#dcdce4; margin:1px 0; }
body.nd-theme[data-sbstyle="dark"] .sb-item-btn .sb-icon{ color:#9a9aa6; }
body.nd-theme[data-sbstyle="dark"] .sb-item-btn:hover{ background:rgba(255,255,255,.055); }
body.nd-theme[data-sbstyle="dark"] .sb-item-btn.active,
body.nd-theme[data-sbstyle="dark"] .sb-item-btn.open{ background:rgba(255,255,255,.11); color:#fff; font-weight:500; }
body.nd-theme[data-sbstyle="dark"] .sb-item-btn.active .sb-icon,
body.nd-theme[data-sbstyle="dark"] .sb-item-btn.open .sb-icon{ color:#8b9dff; }
body.nd-theme[data-sbstyle="dark"] .sb-label{ color:inherit; }
body.nd-theme[data-sbstyle="dark"] .sb-sub{ background:transparent; }
body.nd-theme[data-sbstyle="dark"] .sb-sub .sb-sub-btn{ color:#b6b6c2; font-size:12.5px; }
body.nd-theme[data-sbstyle="dark"] .sb-sub .sb-sub-btn:hover{ background:rgba(255,255,255,.05); color:#fff; }
body.nd-theme[data-sbstyle="dark"] .sb-sub .sb-sub-btn.active{ background:rgba(255,255,255,.1); color:#fff; }
body.nd-theme[data-sbstyle="dark"] .sb-group-label,
body.nd-theme[data-sbstyle="dark"] .sb-nav .sb-sec-label{ color:#7d7d88 !important; }

/* 태블릿(터치)에서는 어느 스타일이든 타깃 확대 — 04를 전면 적용하지 않고도 오조작 방지 */
@media (pointer:coarse){
  body.nd-theme .sb-item-btn{ min-height:40px; }
  body.nd-theme .sb-sub .sb-sub-btn{ min-height:36px; }
}

/* 2026-08-20: 즐겨찾기 피커 — ★/☆ 텍스트에서 라인 아이콘으로 전환하며 크기·색 정돈 */
.fav-pick-star{ background:none; border:none; cursor:pointer; padding:2px 4px; line-height:1;
  color:var(--gray-300,#cbd5e1); font-size:15px; transition:color .12s; display:grid; place-items:center; }
.fav-pick-star:hover{ color:var(--brand,#465fff); }
.fav-pick-star.on{ color:var(--brand,#465fff); }

/* ══ 2026-08-22: 사이드바 상단 정리 — '접기'와 '즐겨찾기' ══════════════
   전에는 [접기]가 폭 전체를 채운 라벤더 알약이라 **사이드바에서 제일 눈에 띄었다.**
   정작 제일 안 중요한 버튼인데 메뉴보다 목소리가 컸다. 즐겨찾기는 반대로 흐린
   회색 줄에 숫자만 멀리 떨어져 비활성처럼 읽혔다.
   → 접기는 브랜드 줄 오른쪽의 조용한 아이콘 버튼으로, 즐겨찾기는 라벨+알약 배지의
     제대로 된 섹션 헤더로. 위계를 메뉴 → 즐겨찾기 → 접기 순으로 되돌린다. */
/* ★위(161줄)에서 flex-direction:column 을 이미 잡아 뒀다 — 방향까지 명시해야 덮인다 */
body.nd-theme .sb-hdr{ display:flex; flex-direction:row; align-items:center; gap:8px; }
body.nd-theme .sb-hdr .sb-brand{
  flex:1; min-width:0;
  /* 브랜드가 갖고 있던 아래 구분선·여백은 sb-hdr 자신의 것(204줄)과 겹친다 — 여기선 줄만 맞춘다 */
  padding-bottom:0; margin-bottom:0; border-bottom:none; }
body.nd-theme .sb-toggle{
  width:30px; height:30px; flex:none; padding:0; margin-top:-2px;
  display:grid; place-items:center;
  /* ★2026-08-23 사용자 신고: "로고 옆 접기 표시 색이 같아서 안 보임".
     원인은 색 하나였다 — --text-3(#98a2b3)은 흰 사이드바 대비 2.4:1 이라 로고 옆에서 묻혔다.
     ★1차 수정에서 옅은 판 + 테두리를 깔았다가 "알약이 생겼다"는 지적을 받았다(2026-08-23).
       평소 모습은 아이콘 하나여야 한다. 그래서 **색만** 올린다 — 판·테두리는 호버에서만.
     ★--sb-line 은 쓰지 않는다 — 값이 transparent 라 폴백(#e5e9f0)이 안 걸린다.
       기존 호버 테두리가 안 보이던 것도 같은 이유였다(여기서 실제로 밟았다). */
  background:transparent; border:1px solid transparent; border-radius:9px;
  color:var(--text-2,#5b6573);
  transition:background .14s ease, color .14s ease, border-color .14s ease; }
body.nd-theme .sb-toggle:hover{
  background:var(--brand-50,#eef1ff); border-color:var(--brand-200,#c7d0ff);
  color:var(--brand,#465fff); filter:none; }
body.nd-theme .sb-toggle:active{ transform:scale(.94); }
body.nd-theme .sb-toggle .sb-toggle-icon{ width:auto; }
/* 아이콘은 버튼 색을 따라간다 — 169줄이 --text-3 로 못박아 둬서 위 색이 안 먹었다 */
body.nd-theme .sb-toggle .sb-toggle-icon .ti{ font-size:16px; color:currentColor; }
body.nd-theme .sb-toggle:hover .sb-toggle-icon .ti{ color:currentColor; }
/* 라벨은 아이콘 버튼에선 숨긴다 — 뜻은 툴팁이 전한다(app-nav.js 가 값을 넣는 건 그대로) */
body.nd-theme .sb-toggle .sb-toggle-lbl{ display:none; }
/* ★접힌 사이드바는 60px 다. 로고(30)+간격(8)+버튼(30)=68 이라 가로로 두면 **잘린다**
   (사용자 신고: "접으면 로고가 작아져야 하는데 그냥 짤림").
   접히면 세로로 쌓고 로고를 24px 로 줄인다 — 자르지 않고 작아지게. */
body.nd-theme .sidebar.collapsed .sb-hdr{
  flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 6px 10px; }
body.nd-theme .sidebar.collapsed .sb-hdr .sb-brand{ flex:none; width:100%; justify-content:center; }
body.nd-theme .sidebar.collapsed .sb-mark{ width:24px; height:24px; }
body.nd-theme .sidebar.collapsed .sb-toggle{ margin-top:0; }

/* 즐겨찾기 — 섹션 헤더답게. 숫자는 라벨 옆 알약으로 붙여 한 덩어리로 읽히게 */
body.nd-theme .sb-fav-toggle{
  gap:8px; padding:8px 10px; border-radius:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:none;
  color:var(--sb-sec,#98a2b3);
  /* 2026-08-23 (사용자 지시): 이 섹션은 사이드 메뉴 **맨 아래**다.
     ★자리는 order 가 정한다 — DOM 어디에 꽂혀 있든 항상 마지막으로 그려진다.
       menu-favorites.js 도 맨 뒤로 옮기지만(_keepLast), 그 스크립트가 옛 버전으로
       캐시돼 있거나 다른 코드가 위에 꽂아 넣으면 CSS 만 새 것이 되어 **위쪽에 거대한
       빈칸**이 생긴다(2026-08-23 사용자 화면에서 실제로 그랬다).
       자리 같은 눈에 띄는 약속은 CSS 혼자서도 지킬 수 있어야 한다.
     margin-top:auto — 메뉴가 짧으면 바닥에 붙고, 길면 메뉴 끝에 그대로 이어진다.
     position:relative — 위쪽 구분선(::before)의 기준. */
  order:99; position:relative; margin-top:auto; }
body.nd-theme .sb-fav-toggle .sb-fav-ic{ font-size:14px; opacity:1; }
body.nd-theme .sb-fav-toggle .sb-fav-lbl{ flex:0 0 auto; }
body.nd-theme .sb-fav-toggle .sb-fav-cnt{
  flex:none; min-width:18px; padding:1px 6px; border-radius:999px;
  background:var(--sb-hover,#f4f6fb); color:var(--text-3,#98a2b3);
  font-size:10px; font-weight:700; line-height:1.5; text-align:center; }
body.nd-theme .sb-fav-toggle .sb-fav-cnt:empty{ display:none; }
body.nd-theme .sb-fav-toggle .sb-fav-chev{ margin-left:auto; font-size:13px; opacity:.55; }
body.nd-theme .sb-fav-toggle:hover .sb-fav-ic{ color:var(--evo-acc-amber,#f59e0b); }
body.nd-theme .sb-fav-toggle.active{ color:var(--text-strong,#111827); }
body.nd-theme .sb-fav-toggle.active .sb-fav-ic{ color:var(--evo-acc-amber,#f59e0b); }
body.nd-theme .sb-fav-toggle.active .sb-fav-cnt{
  background:rgba(245,158,11,.14); color:var(--evo-acc-amber,#b45309); }

/* ══ 2026-08-23 사용자 신고 2건 — 사이드바 상단 ══════════════════════════
   ① "최상단 EVOCOV 로고에 접기 표시 색이 같아서 안 보임"
   ② "즐겨찾기 N 하단에 줄칸으로, 메인 사이드 메뉴와 동일한 아이콘으로 배치"      */

/* ① 접기 버튼의 대비는 위(사이드바 상단 정리 블록)의 본 규칙에서 고쳤다 — 여기 또 쓰면 두 벌이 된다. */

/* ② 즐겨찾기 섹션 — 사이드 메뉴 **맨 아래**(사용자 지시). 메뉴가 짧으면 바닥에 붙고,
   길면 메뉴 끝에 이어 붙는다. 구분선은 섹션 **위**에 긋는다(메뉴와 섞여 보이지 않게).
   ★선을 헤더의 border-top 으로 주면 호버 알약이 그 선까지 먹어 지저분하다 →
     떨어진 자리에 ::before 로 긋는다. */
body.nd-theme .sb-fav-toggle::before{
  content:''; position:absolute; left:0; right:0; top:-7px;
  border-top:1px solid var(--border,#eef1f5); }
/* ★좌우 padding 은 0 이어야 한다 — .sb-nav 가 이미 8px 를 주고 있어서, 여기서 또 주면
   즐겨찾기 줄만 메뉴보다 안쪽으로 밀린다(이번 지시의 '줄칸' 어긋남 원인). */
body.nd-theme #sb-fav-view{ order:100; padding:2px 0 6px; }
body.nd-theme .sb-fav-item.active{ font-weight:600; }

/* ══ 2026-08-23 사용자 지시: "즐겨찾기 앞의 별표를 다른 사이드 메뉴처럼 아이폰 아이콘으로" ══
   설정(아이폰) 스킨에서만 적용된다 — 다른 스킨은 선 아이콘이 그 스킨의 언어다.
   ★파일 끝에 두는 이유: 위쪽 .sb-fav-toggle:hover/.active 의 별 색 규칙과 명시도가 같아서,
     나중에 와야 타일 안 글자색(흰색)이 호버·펼침 상태에서도 유지된다. */
body.nd-theme[data-sbstyle="settings"] .sb-fav-toggle .sb-fav-ic{
  width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; flex:none;
  /* 별=노랑은 iOS 의 오랜 약속. 채도는 옆 타일들(#f0902f 등)과 같은 결로 맞췄다. */
  background:#f0b52f; color:#fff; box-shadow:0 1px 1.5px rgba(0,0,0,.16);
  font-size:13px; opacity:1; }
body.nd-theme[data-sbstyle="settings"] .sb-fav-toggle:hover .sb-fav-ic,
body.nd-theme[data-sbstyle="settings"] .sb-fav-toggle.active .sb-fav-ic{ color:#fff; }
/* 타일이 생기면 헤더도 메뉴 줄과 같은 리듬이어야 한다 — 아이콘만 커지고 줄은 얇으면 튄다 */
body.nd-theme[data-sbstyle="settings"] .sb-fav-toggle{ padding:5px 9px; gap:10px; font-size:13px; }