/* keyform — 디자인 시스템 정본 (3단계). Tailwind 4 @theme 이름공간, 선언은 :root (#73).
 * 3D 재질·빛 색도 여기서 읽는다(kit.js tokenColor) — scene.js 에 raw hex 0. */
:root {
  /* ── 화면 색 ───────────────────────────────────────── */
  --color-bg: #e9e8e4;            /* 스튜디오 종이 — 캔버스 칸·포스터·카탈로그 그림 바탕 */
  --color-surface: #f6f5f2;       /* 패널·dock·정적 블록·칩 바탕 — 모든 글자는 이 위나 bg 위 */
  --color-ink: #1a1b1d;           /* 글자·주 단추 바탕·고른 옵션 테두리 */
  --color-mute: #5d5f63;          /* 보조 글자 */
  --color-line: #d3d1cb;          /* 1px 구분선 — 장식, 글자 금지 */
  --color-control: #85878c;       /* 고르지 않은 칸 테두리(비글자 3:1) */
  --color-accent: #e06a00;        /* 주황 Esc · 고른 옵션 사각 8px — 면 금지, surface 위만 (OKLCH h 50.4°) */

  /* ── 3D 재질 (scene.js 만 읽는다) ─────────────────────── */
  --color-floor: #e9e8e4;         /* 사이클로라마 종이 — 렌더 평균이 bg 가 되게 구현이 세기를 맞춘다 */
  --color-studio-wall: #b8b7b3;   /* PMREM 스튜디오 방 벽 */
  --color-softbox: #ffffff;       /* PMREM 빛 판 셋 */
  --color-key-light: #fff6ec;     /* 키 라이트(방향광) — 살짝 따뜻한 스튜디오 텅스텐 보정 */
  --color-window: #ffe9d2;        /* 책상 장면 오후 창빛 끝값 */
  --color-alu-silver: #c4c7ca;
  --color-alu-graphite: #3c3f44;
  --color-pc-frost: #dfe4e6;
  --color-plate: #9a9890;
  --color-pcb: #2c2e31;
  --color-cap-sand-alpha: #ece5d6;
  --color-cap-sand-mod: #bdb4a4;
  --color-cap-graphite-alpha: #3a3c41;
  --color-cap-graphite-mod: #6b6e74;
  --color-cap-fog-alpha: #e3e6e8;
  --color-cap-fog-mod: #a3acb4;
  --color-stem-l45: #d9d5cc;      /* 유백 */
  --color-stem-t55: #8b8d91;      /* 회 */
  --color-stem-c60: #26272a;      /* 먹 */
  --color-spring: #b9bcc0;
  --color-mat: #c9c7c0;           /* 데스크 매트 펠트 */
  --color-paper: #f3f1ea;         /* 노트 */
  --color-cable: #2a2b2e;

  /* ── 서체 ─────────────────────────────────────────── */
  --font-display: "Familjen Grotesk", "Pretendard Variable", sans-serif; /* 라틴·숫자 전용 — 모델명·합계·수치 */
  --font-body: "Pretendard Variable", "Pretendard", sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", monospace;     /* 구성 코드·사양·필드 이름 */

  /* ── 글자 크기 ───────────────────────────────────── */
  --text-model: clamp(2.75rem, 4.4vw, 4.5rem);    /* 모델명 · 책상 장면 합계 (1024+) */
  --text-model-m: clamp(2.25rem, 6vw, 2.75rem);   /* 〃 (<1024) */
  --text-scene: clamp(1.625rem, 2.6vw, 2.5rem);   /* 장면 2~4 제목 · 정적 h2 */
  --text-scene-m: 1.5rem;
  --text-figure: clamp(2rem, 3vw, 3rem);          /* 재질·스위치 수치 */
  --text-price: 1.5rem;                           /* dock 합계 */
  --text-price-m: 1.25rem;
  --text-lead: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-meta: 0.75rem;                           /* mono 머리 줄·필드 이름 */
  --text-meta-m: 0.6875rem;

  /* ── 간격 (4px 척도) ─────────────────────────────── */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-gutter: clamp(1.25rem, 3.2vw, 2rem);
  --spacing-panel: clamp(23.75rem, 36vw, 35rem);  /* 1024+ 오른쪽 패널 폭 */
  --spacing-panel-pad: 2.5rem;                    /* 패널 안쪽 여백(1024+) — 폭 표의 칸 계산 근거 */
  --spacing-stage-m: 46svh;                       /* <1024 캔버스 칸 높이 */
  --spacing-dock: 4.5rem;                         /* dock 높이 72 (1024+) */
  --spacing-dock-m: 4rem;                         /* 64 + safe-area */
  --spacing-content: 72rem;                       /* 정적 블록 최대 폭 */
  --spacing-target: 2.75rem;                      /* 누름 칸 44 */

  /* ── 모서리 ──────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 4px;      /* 단추·옵션 칸·칩 */
  --radius-md: 8px;      /* 담기 판 */
  --radius-swatch: 50%;  /* 재질 견본 원만 */

  /* ── 그림자 (거의 없음) ─────────────────────────── */
  --shadow-none: none;
  --shadow-sheet: 0 -1px 0 var(--color-line), 0 -12px 32px rgb(26 27 29 / 0.04); /* 담기 판 하나 */
  --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-ink);

  /* ── 이징 ────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* 등장·재배치 */
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);   /* 재질 보간 300ms · 누름 */
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1); /* 카메라 이동 구간 모양 */
  --ease-linear: linear;                            /* scrub */
}