/* ============================================================
   tokens.css — 공통 디자인 토큰 (단일 기준 SSOT, 변수만)
   ------------------------------------------------------------
   색·간격·폰트 변수만 담는다(요소 스타일 없음 → 어느 화면에 링크해도 부작용 0).
   세 화면이 모두 이 파일을 공유:
     - login.html / gantt.html : <link href="/ui/tokens.css">
     - deptwork-client        : import '/ui/tokens.css' (또는 index.html <link>)
   컴포넌트 클래스(.btn/.card/.chip …)는 components.css 에 분리.
   (간트는 자체 컴포넌트/표/버튼과 이름이 겹쳐서 tokens.css만 링크한다.)

   ⚠ 색을 바꾸면 여기 한 곳만 고치면 세 화면에 동시 반영된다.
   ⚠ 폰트: Pretendard Variable 자체호스팅(/ui/fonts/PretendardVariable.woff2). CDN 불필요(회사망 차단 무관).
   ============================================================ */
/* 자체호스팅 웹폰트 — CDN 차단된 회사망에서도 또렷하게. app.js가 /ui로 정적 서빙, CSP font-src 'self' 통과. */
@font-face{
  font-family:'Pretendard';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/ui/fonts/PretendardVariable.woff2') format('woff2');
}
:root{
  /* 강조(인디고) */
  --pri:#4F46E5; --pri-d:#4338CA; --pri-l:#ECEBFE; --pri-rgb:79,70,229; --sec:#8B7CF6; --sec-d:#6D28D9; --sec-l:#EDE9FE;
  /* 잉크·뮤트(쿨 슬레이트) */
  --ink:#1B2333; --ink-2:#3D4759; --muted:#6B7688; --muted-2:#9AA4B5;
  /* 라인·배경 */
  /* ★★★ 배경색 규칙 (반드시 지킬 것) ★★★
     · 화면 바닥(빈 배경) = --surface(흰색). "화면 배경색"을 바꾸려면 **바닥 요소**만 고친다:
         gantt.html: body / .page-body   ·   deptwork: theme/tokens.css의 body·.dw-main,
         AppLayout.jsx·LoginPage.jsx·PreviewMerged.jsx의 floor <div>   ·   login.html: components.css body
     · --bg 는 "바닥"이 아니라 **표 머리글·탭·입력칸·행 hover 등 옅은 채움색**이다.
       ⚠ --bg 를 바꾸면 표머리글·셀·칩·탭·입력칸 색이 전부 같이 바뀐다(과거 사고 원인).
       → **화면 배경만 바꾸고 싶을 땐 절대 --bg 를 건드리지 말 것.** 바닥 요소의 배경값만 바꾼다. */
  --line:#EAEEF3; --line-2:#DCE2EA; --bg:#EEF1F6; --surface:#FFFFFF;
  /* 표 채움·경계색(--bg보다 옅은 단계, 세 화면 공통 — 구 deptwork 로컬 정의를 승격):
     머리글 / 보조 머리글 / 머리글·본문 경계선 / 행 hover / 그룹 행 */
  --tbl-head-bg:#F8F9FB; --tbl-sub-bg:#FBFCFD; --tbl-bd-head:#EAECEF; --tbl-bd-body:#EEF0F2;
  --tbl-row-hover:#FAFBFE; --tbl-row-grp:#F7F9FC;
  /* 상태색 */
  --green:#16A34A; --green-l:#DCFCE7; --amber:#D97706; --amber-l:#FEF3C7;
  --red:#DC2626; --red-l:#FEE2E2; --blue:#2563EB; --blue-l:#DBEAFE;
  --slate:#64748B; --slate-l:#EEF1F5;
  /* 부서색(진한색 + 옅은 배경). 상품부는 2026-07-17 마젠타로 변경 — 구 주황(#F8691B)은
     탭 점(인디고 토큰)과 목록(주황 하드코딩)이 달랐고, 인디고는 브랜드색과 겹침.
     사업부(파랑)·개발부(초록)·브랜드(인디고)와 겹치지 않는 계열로 선정. */
  --dept-sales:#2563EB; --dept-sales-l:#DCEBFA;
  --dept-prod:#DB2777;  --dept-prod-l:#FCE7F3;
  --dept-dev:#16A34A;   --dept-dev-l:#D7EFE0;
  /* 사이드바(딥네이비 기본) */
  --sb-bg:#0F1729; --sb-line:rgba(255,255,255,.08); --sb-brand:#FFF; --sb-h1:rgba(255,255,255,.92);
  --sb-rail:rgba(255,255,255,.12); --sb-item:rgba(255,255,255,.66); --sb-item-h:rgba(255,255,255,.06);
  --sb-ink:#FFF; --sb-act-bg:var(--pri); --sb-act-tx:#FFF; --sb-uln:rgba(255,255,255,.5); --sb-label:#8E97C4;
  /* 그림자 + 폰트 */
  --sh:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05);
  --font:'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}
/* 사이드바 "밝게" 토글 (앱 하단 토글이 :root[data-sidebar=light] 설정) */
:root[data-sidebar="light"]{
  --sb-bg:#FFF; --sb-line:var(--line); --sb-brand:var(--ink); --sb-h1:var(--ink); --sb-rail:var(--line-2);
  --sb-item:#4B5568; --sb-item-h:#F3F5F9; --sb-ink:var(--ink);
  --sb-act-bg:var(--pri-l); --sb-act-tx:var(--pri-d); --sb-uln:var(--muted); --sb-label:var(--muted);
}