/*
 * tokens.css — 디자인 토큰 (색·간격·모서리·그림자). s356 React 시범에서 도입.
 *
 * 순수 CSS 변수라 React 앱(/app/)도, 나중에 옛 base.html도 같은 파일을 읽을 수 있다.
 * 이름 앞에 --zn- 을 붙여 옛 화면의 변수와 겹치지 않게 했다. 바꾸면 새 화면 전체가 따라간다.
 * 정본 목업: app/templates/mockups/2-29R_사이드바.html (밝은 톤 + 파랑).
 * 외부 CDN·웹폰트 없음 — 시스템 폰트만 쓴다.
 */
:root {
  /* ── 글자 ── */
  --zn-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  --zn-font-mono: ui-monospace, Menlo, Consolas, monospace;
  --zn-fs-xs: 12px;
  --zn-fs-sm: 13px;
  --zn-fs-md: 14px;
  --zn-fs-lg: 16px;
  --zn-fs-xl: 20px;
  --zn-fs-title: 32px;

  /* ── 바탕·글자색 ── */
  --zn-bg: #f4f5f7;
  --zn-card: #ffffff;
  --zn-ink: #111827;
  --zn-sub: #6b7280;
  --zn-mute: #9ca3af;
  --zn-line: #e5e7eb;
  --zn-field: #f3f4f6;
  --zn-field-hover: #f9fafb;

  /* ── 상태색 (배너·칩) ── */
  --zn-red: #dc2626;
  --zn-red-l: #fee2e2;
  --zn-red-ink: #b91c1c;
  --zn-red-bg: #fef2f2;
  --zn-red-line: #fecaca;
  --zn-amber: #b45309;
  --zn-amber-l: #fef3c7;
  --zn-amber-line: #fcd34d;
  --zn-yellow-bg: #fef9c3;
  --zn-yellow-line: #fde047;
  --zn-yellow-ink: #713f12;
  --zn-green: #16a34a;
  --zn-green-l: #dcfce7;
  --zn-green-ink: #166534;
  --zn-purple: #7c3aed;
  --zn-purple-l: #ede9fe;
  --zn-purple-ink: #6d28d9;
  --zn-blue: #2563eb;
  --zn-blue-l: #dbeafe;
  --zn-blue-ink: #1d4ed8;
  --zn-gray-l: #e5e7eb;
  --zn-gray-ink: #4b5563;
  /* 보조금 전용 청록 (세션373 CC-84 — 선급 보라·진행 파랑·완료 초록과 겹치지 않는 새 색. 어두운 테마는 아직 없다: 생기면 이 세 줄도 짝으로 만든다) */
  --zn-teal: #0d9488;
  --zn-teal-l: #ccfbf1;
  --zn-teal-ink: #115e59;

  /* ── 주 색 (파랑) ── */
  --zn-ac: #2563eb;
  --zn-ac-d: #1d4ed8;
  --zn-ac-l: #dbeafe;
  --zn-ac-ink: #1e40af;
  --zn-ac-m: #60a5fa;

  /* ── 사이드바 (밝은 톤) ── */
  --zn-sb-bg: #ffffff;
  --zn-sb-line: #e8eaee;
  --zn-sb-line2: #d1d5db;
  --zn-sb-ink: #374151;
  --zn-sb-sub: #9ca3af;
  --zn-sb-hover: #f3f4f6;
  --zn-sb-act-bg: var(--zn-ac-l);
  --zn-sb-act: var(--zn-ac-ink);
  --zn-sb-bar: var(--zn-ac);
  --zn-sb-field: #f3f4f6;
  --zn-sb-brand: #111827;
  --zn-sb-mark: var(--zn-ac-l);
  --zn-sbw: 232px;
  --zn-sbw-narrow: 64px;

  /* ── 모서리 ── */
  --zn-r: 16px;
  --zn-r-lg: 20px;
  --zn-r-md: 12px;
  --zn-r-sm: 10px;
  --zn-r-xs: 8px;
  --zn-r-pill: 999px;

  /* ── 간격 ── */
  --zn-s1: 4px;
  --zn-s2: 8px;
  --zn-s3: 12px;
  --zn-s4: 16px;
  --zn-s5: 24px;
  --zn-s6: 32px;
  --zn-s7: 44px;
  --zn-panel-w: 540px;
  --zn-page-max: 1080px;

  /* ── 그림자 ── */
  --zn-shadow-row: 0 1px 2px rgba(0, 0, 0, 0.03);
  --zn-shadow-row-hover: 0 4px 14px rgba(0, 0, 0, 0.08);
  --zn-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.16);
  --zn-shadow-fly: 0 10px 32px rgba(0, 0, 0, 0.22);
  --zn-shadow-panel: -10px 0 36px rgba(0, 0, 0, 0.12);
  --zn-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.25);
  --zn-shadow-drawer: 0 0 40px rgba(0, 0, 0, 0.35);
  --zn-scrim: rgba(17, 24, 39, 0.45);
  --zn-scrim-drawer: rgba(17, 24, 39, 0.55);
  --zn-scrim-panel: rgba(17, 24, 39, 0.3);

  /* ── 겹침 순서 ── */
  --zn-z-sidebar: 20;
  --zn-z-topbar: 30;
  --zn-z-panel-scrim: 35;
  --zn-z-panel: 40;
  --zn-z-dropdown: 60;
  --zn-z-fly: 600;
  --zn-z-drawer-scrim: 850;
  --zn-z-drawer: 900;
  --zn-z-modal: 2000;
  --zn-z-confirm: 2100;
  --zn-z-bubble: 9000;
}