/* ═══ 도감 디자인 토큰 — 두 표면이 읽는 «단일 정본» ═══════════════════════════════
 *
 * 무엇인가 — 인게임 도감(front/src/ui/GameCodex.jsx, React)과 웹 도감
 *   (front/public/book.html, 번들러를 안 타는 정적 페이지)이 **같은 파일**을 읽는다.
 *
 * 왜 CSS 변수인가 — 웹 도감은 vite 를 안 탄다. 그래서 `@ui/overlay/overlayConstants` 도
 *   `@ui/rarity` 도 import 하지 못한다. 실제로 등급 색표가 book.html 안에 **손으로
 *   베껴져** 있었고(2026-08-29 시점 book.html:852-859), 베낀 표는 반드시 갈린다.
 *   CSS 커스텀 프로퍼티는 <link> 한 줄로 양쪽에 동시에 실린다 —
 *   React 쪽은 inline style 에서 var(--cdx-…) 로, 정적 페이지는 그냥 CSS 로 쓴다.
 *   JS 값이 필요하면 getComputedStyle(document.documentElement)
 *     .getPropertyValue('--cdx-rarity-epic') 로 읽는다(표를 두 번 적지 않는다).
 *
 * ⚠ 이 파일에 «셀렉터를 쓰지 마라». :root 의 변수 선언만 둔다.
 *   React 앱 전역(index.html)에 실리므로 .card / .chip 같은 클래스를 여기 두면
 *   앱 어딘가와 이름이 충돌하고, 그 사고는 도감과 무관한 화면에서 터진다.
 *
 * 값의 출처(베낀 게 아니라 «옮겨 온» 것 — 바꾸려면 양쪽을 같이 본다):
 *   색·테두리  front/src/ui/overlay/overlayConstants.js (GOLD·ACCENT·PANEL_BORDER)
 *   판 배경    front/src/index.css .hudbox-v2
 *   등급       front/src/ui/rarity.js (RARITY_COLOR / RARITY_FRAME)
 *   원칙       .claude/skills/ui-hud/reference/ui_rules.md §인게임 UI 디자인 패턴
 *   도감 규약  .claude/skills/ui-hud/reference/codex_design_system.md
 */
:root {
  /* ── 판(surface) ─────────────────────────────────────────────────────────
     웜 차콜(30~35°). 월드가 따뜻한 무광 복셀인데 판만 차가우면 「오려 붙인 것」이 된다. */
  --cdx-bg: #14100b;
  --cdx-panel: linear-gradient(180deg, rgba(38, 31, 24, 0.95), rgba(22, 18, 13, 0.96));
  --cdx-panel-solid: #1b1610;
  --cdx-sunken: #0e0b07;              /* 썸네일 뒷판 · 입력칸처럼 «파인» 자리 */
  --cdx-tile: rgba(255, 255, 255, 0.025);      /* 눌리는 칸의 평상시 */
  --cdx-tile-hover: rgba(208, 177, 107, 0.07);
  --cdx-tile-on: rgba(103, 232, 214, 0.10);    /* 선택 = 상태 → 청록 */

  /* ── 선 ── HUD_BORDER(0.38) 와 PANEL_BORDER(0.30) 는 «다른 값이다. 합치지 마라». */
  --cdx-line: rgba(198, 164, 98, 0.30);        /* 판 안쪽 칸막이 = PANEL_BORDER */
  --cdx-line-strong: rgba(198, 164, 98, 0.60); /* 창 테두리 = .hudbox-v2 */

  /* ── 글자 ── 4단. 이보다 늘리면 「조금 더 흐린 회색」이 생기고 위계가 죽는다. */
  --cdx-ink: #dce4e2;      /* 본문·이름 */
  --cdx-dim: #8ca6a0;      /* 보조 설명 */
  --cdx-faint: #5a7a74;    /* 수치·단위·비활성 라벨 */
  --cdx-mute: #6b7280;     /* 미획득·없음 */

  /* ── 액센트 ── 골드는 «상시», 청록은 «상태 전용»(켜짐·선택·보유).
       청록을 장식에 쓰면 「지금 뭔가 켜졌다」는 신호가 죽는다(ui_rules §1). */
  --cdx-gold: #d0b16b;
  --cdx-gold-ink: #1a1408;                     /* 골드 칩 위의 글자 */
  --cdx-accent: #67e8d6;
  --cdx-accent-wash: rgba(103, 232, 214, 0.14);

  /* ── 형태 ── 복셀 문법: 라운드 2~4px. 6px 이상은 「둥근 유리 타일」로 읽힌다. */
  --cdx-r: 4px;
  --cdx-r-sm: 3px;
  --cdx-r-pill: 999px;

  /* ── 격자(small multiples) ── 칸 크기가 곧 «질문의 단위»다. 낱개는 1:1,
       한 벌 입은 사람은 세로가 길고, 조감 컷은 눕는다 — 셋을 같은 값으로 두면
       세 보기가 같은 것처럼 읽힌다. */
  --cdx-card-min: 136px;        /* 낱개 격자(아이템·몬스터) */
  --cdx-card-min-sm: 108px;     /* 아이콘만 있는 조밀 격자 */
  --cdx-look-min: 132px;        /* 룩북 — 3:4 */
  --cdx-wide-min: 232px;        /* 조감 컷 — 16:10 */
  --cdx-hub-min: 200px;         /* 허브 대분류 카드 */
  --cdx-gap: 10px;
  --cdx-gap-sm: 8px;

  /* ── 셸 3칸 ── 폭은 «기본값»이고 flex 가 줄인다(리사이즈 리스너를 달지 않는다). */
  --cdx-rail-w: 104px;          /* 대분류 레일 */
  --cdx-rail-w-sm: 60px;
  --cdx-side-w: 250px;          /* 중분류 트리 + 패싯 */
  --cdx-detail-w: 380px;        /* 상세 패널 — 목록을 덮지 않는다 */
  --cdx-shell-max: 1360px;      /* 인게임 창 최대 폭 */

  /* ── 타이포 ── */
  --cdx-fs-title: 15px;
  --cdx-fs-card: 11px;
  --cdx-fs-meta: 9.5px;
  --cdx-fs-body: 12px;
  --cdx-fs-chip: 11px;
  --cdx-fs-rail: 9px;

  /* ── 등급 ── front/src/ui/rarity.js 와 «글자 그대로 같아야 한다».
       book.html 은 이 변수를 getComputedStyle 로 읽는다 — 표를 다시 적지 않기 위해서다. */
  --cdx-rarity-common: #cbd5e1;
  --cdx-rarity-uncommon: #7fc98a;
  --cdx-rarity-rare: #60a5fa;
  --cdx-rarity-epic: #c084fc;
  --cdx-rarity-legendary: #fbbf24;
  --cdx-rarity-mythic: #a78bfa;
  --cdx-rarity-frame-common: #5a6b7a;   /* 테두리만 다르다 — 칸마다 반복되므로 */

  /* ── 등급 «이름» ── 색과 달리 CSS 로는 못 쓰지만, 두 표면이 같은 말을 쓰게
       하려고 여기 남긴다. epic 은 '에픽'이 아니라 '영웅', mythic 은 '신화'다. */
  --cdx-rarity-ko-common: "일반";
  --cdx-rarity-ko-uncommon: "고급";
  --cdx-rarity-ko-rare: "희귀";
  --cdx-rarity-ko-epic: "영웅";
  --cdx-rarity-ko-legendary: "전설";
  --cdx-rarity-ko-mythic: "신화";

  /* ── 상태 ── */
  --cdx-dim-filter: saturate(0.15) brightness(0.55);   /* 미발견 실루엣 */
  --cdx-shadow-card: 0 3px 8px rgba(0, 0, 0, 0.45);
  --cdx-focus: 0 0 0 2px rgba(103, 232, 214, 0.55);

  --cdx-font: "Pretendard", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --cdx-font-num: ui-monospace, Consolas, "SF Mono", monospace;
}