:root {
  color-scheme: light;
  /* 2026-09-20 율미님 승인: 맑은 블루. 상태·유효기간 색의 뜻은 유지한다. */
  --bg: #eff3fa;
  --surface: #ffffff;
  --surface-hi: #f5f8ff;
  --line: #dce4f2;
  --line-strong: #7d8faa;
  --text: #253659;
  --text-strong: #1d2e50;
  --text-muted: #53627b;
  /* 완료·주의 글자는 옅게 섞인 배경에서도 4.5:1 이상 읽히도록 같은 계열에서 진하게 보정한다. */
  --good: #116b34;
  --bad: #b91c1c;
  --warn: #854d0e;
  --focus: #3155a5;
  --accent: #3155a5;
  --accent-hover: #244389;
  --accent-soft: #eaf0ff;
  --accent-contrast: #ffffff;
  /* 폼 필수 표식. 값은 --bad 와 같지만 뜻이 다르다(오류가 아니라 "비우면 등록 실패"). */
  --required-fg: var(--bad);
  /* 재고 현황 유효기간 띠(잔여 18·12·6개월 이내). 전경/배경 대비 6.38 · 6.38 · 6.80 (WCAG AA 4.5 이상). */
  --expiry-18-bg: #fef9c3;  --expiry-18-fg: #854d0e;
  --expiry-12-bg: #ffedd5;  --expiry-12-fg: #9a3412;
  --expiry-6-bg: #fee2e2;   --expiry-6-fg: #991b1b;
  --st-recv-fg: #1d4ed8;  --st-recv-dot: #3b82f6;  --st-recv-bg: #eff6ff;  /* 접수 */
  --st-prog-fg: #a16207;  --st-prog-dot: #eab308;  --st-prog-bg: #fefce8;  /* 진행중 */
  --st-insp-fg: #6d28d9;  --st-insp-dot: #8b5cf6;  --st-insp-bg: #f5f3ff;  /* 검수 대기 */
  --st-done-fg: #15803d;  --st-done-dot: #22c55e;  --st-done-bg: #f0fdf4;  /* 완료 */
  --st-late-fg: #b91c1c;  --st-late-dot: #ef4444;  --st-late-bg: #fef2f2;  /* 지연 */
  /* BOM 대시보드·관계도의 대분류 넷(기획서 bom-dashboard 3절 사전). 도넛 조각·막대·범례 점 같은
     **그림 표식**에만 쓴다 — 흰 바탕 대비 5.67 · 4.49 · 4.97 · 4.35(표식 하한 3:1 이상). 글자색으로 쓰지 않는다. */
  --bom-content: #2f62c8;         /* 내용물 */
  --bom-primary-pack: #c2571a;    /* 1차 포장 */
  --bom-secondary-pack: #17804a;  /* 2차 포장 */
  --bom-other: #6b7a93;           /* 기타 */
  --font-display: "Barlow", "Arial Narrow", "Malgun Gothic", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  /* ── 간격 눈금 ───────────────────────────────────────────────────────
     **이것이 간격의 정본이다.** `tools/ui-sweep` 의 `off-scale-spacing` 검사가
     이 변수들을 화면에서 직접 읽어 판정한다 — 계측기에 값을 복사해 두지 않으므로
     여기를 고치면 관문도 같이 움직인다. 반대로 **이 줄들을 지우면 관문이 빨간불을
     켠다** — 기준이 없어지면 모든 값이 통과하는데, 그건 목록이 아니라 스위치다.

     **왜 이 여덟인가.** 2026-09-14 에 `app/static/*.css` 를 전수로 재서 정했다 —
     간격 선언 628개, 그중 토큰을 쓴 것 14개(2.2%), 서로 다른 px 값 37가지.
     1부터 18까지 거의 모든 정수가 쓰이고 있었다. 눈금이 없으니 새 화면마다 제 숫자를
     골랐다. 아래 여덟은 **실측 분포에서 골랐다** — 후보 여덟을 대보았을 때
     옮기는 비용(Σ 인스턴스×이동거리)이 614px 로 가장 싼 축에 속하고,
     지금 값의 절반(49.7%)은 **아예 안 움직인다**. 8배수 같은 깔끔한 규칙은
     비용이 1064px 로 가장 비싸다 — 지금 제일 흔한 6·10·14 가 전부 갈 곳을 잃는다.

     단계마다 근거(괄호 안은 직접 센 선언 횟수):
       2px  눈에 거의 안 보이는 붙임. 뱃지 안쪽·줄 사이 미세 간격 (28)
       4px  5px(37)·3px(21)가 모이는 자리. 둘 다 1px 거리라 거의 안 움직인다
       6px  라벨↔입력칸의 기본. 이미 제일 많이 쓰이는 작은 값 중 하나 (57)
       8px  **최다 선언값**. 한 칸의 기본으로 삼는다 (73)
      12px  9(18)·11(11)·13(9)·14(59) 가 여기로 모인다 (59)
      16px  카드 안 묶음 사이. 17(3)·18(26)이 여기로 (41)
      20px  카드 안쪽 여백. `--space-card` 가 이미 쓰던 값이라 그대로 둔다 (15)
      28px  구획 사이. `--space-section` 이 이미 쓰던 값이라 그대로 둔다 (1)

     **동률이면 작은 쪽으로.** 10px 처럼 8과 12 에서 거리가 같은 값은 8 로 내린다 —
     오너의 불만은 「줄사이 간격이 너무 크다」였으므로 흔들리면 촘촘한 쪽이 맞다.
     지시서가 물은 세 값의 행선: **6 은 눈금에 그대로 있고, 10→ 8, 14→ 12.** */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 28px;
  /* 이름이 있는 둘은 **눈금을 가리키기만** 한다 — 값을 다시 적으면 정본이 둘이 된다.
     값은 안 바뀐다(20·28px). 이 변경은 화면을 1px 도 움직이지 않는다. */
  --space-card: var(--space-7);
  --space-section: var(--space-8);
  --radius: 18px;
  --radius-control: 10px;
  --motion-fast: 160ms;
  --shadow: 0 2px 6px rgb(49 85 165 / 3%), 0 8px 24px rgb(49 85 165 / 5%);
}