/* Cairn One (pebble-one) — 디자인 시스템 정본 (3단계, designer).
 * 이름은 Tailwind 4 @theme 이름공간 그대로다 — 승급 때 `:root` 를 `@theme` 로 바꿔 globals.css 에 옮긴다.
 * 원칙: 격자 한 칸 = 기기 폭 62 mm × 기기 높이의 절반 67.15 mm. 치수는 CSS mm(96 ppi 기준)로 적는다 —
 *       ≥1200px 에서 기기·칸·도면이 "실측 1:1" 이다. 화면 보정은 style.css 가 --cal 을 곱해서 한다(기본 1).
 * 둥근 것은 제품뿐: --radius-device · --radius-finish 는 기기 자리표시자와 마감 색 칩에만 쓴다.
 * 이 파일 밖에서 색 hex 를 쓰지 않는다(style.css 는 var() 만). */

:root {
  /* ── color ───────────────────────────────────────────────────────────── */
  --color-bg: #ffffff; /* 순백 — 종이색 아님(C=0) */
  --color-ink: #121416; /* 흑연 잉크 — 제목·본문·숫자 */
  --color-ink-muted: #5b6168; /* 보조 잉크 — 캡션·라벨·치수선·자리표시자 라벨. 흰 바탕 6.26:1 */
  --color-rule: #dfe2e4; /* 머리카락 선 — 칸 경계(장식선, 글자에 쓰지 않는다) */
  --color-accent: #0b7a5c; /* 이끼 초록 — 가격·주 버튼 채움·선택 표시·엄지 원호. 흰 바탕 5.31:1(흰 글자 on 강조도 같다) */
  --color-surface: #f4f5f5; /* 고지 칸·자리표시자 바탕·링크 칸 호버 */
  --color-surface-accent: #e6f2ed; /* 선택된 줄·칩 바탕 */

  /* 마감 색 4 — 기기 뒷면 자리표시자 바탕과 칩에만. 글자는 chalk·lichen·clay 위 --color-ink, basalt 위 --color-bg */
  --color-plate-chalk: #e6e4de;
  --color-plate-basalt: #34383d;
  --color-plate-lichen: #8e9b7f;
  --color-plate-clay: #b3836a;

  /* ── font ────────────────────────────────────────────────────────────── */
  /* Outfit 한 가족(/_shared/fonts/outfit/font.css, 100–900 가변, tnum·frac 있음).
   * 대체 서체에 system-ui 를 넣지 않는다 — 애플 기기에서 SF 로 떨어지면 애플 연상이다. */
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-weight-extralight: 200; /* figure(숫자) */
  --font-weight-light: 300; /* display·title */
  --font-weight-normal: 400; /* 본문 */
  --font-weight-medium: 500; /* 라벨·버튼 — 이보다 굵게 쓰지 않는다 */

  /* ── text ────────────────────────────────────────────────────────────── */
  --text-display: clamp(1.75rem, 0.7rem + 4.3vw, 4.75rem); /* H1 — 390 ≈ 28px · 1440 ≈ 73px */
  --text-display--line-height: 1.02;
  --text-display--letter-spacing: -0.025em;
  --text-figure: clamp(2rem, 1.1rem + 2.5vw, 3.75rem); /* fact 칸의 숫자 — 1440 ≈ 54px */
  --text-figure--line-height: 1;
  --text-figure--letter-spacing: -0.03em;
  --text-title: clamp(1.375rem, 1rem + 1vw, 1.875rem); /* 구간 문장·칸 제목 */
  --text-title--line-height: 1.2;
  --text-title--letter-spacing: -0.01em;
  --text-lead: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --text-lead--line-height: 1.45;
  --text-body: 1.0625rem; /* 17px — Outfit 은 x-height 가 낮아 16px 보다 한 단계 */
  --text-body--line-height: 1.55;
  --text-small: 0.875rem;
  --text-small--line-height: 1.45;
  --text-label: 0.75rem; /* 대문자 · 500 · 자간 0.08em — 치수·구간 번호·자리표시자 라벨 */
  --text-label--line-height: 1.2;
  --text-label--letter-spacing: 0.08em;

  /* ── spacing ─────────────────────────────────────────────────────────── */
  --spacing: 0.25rem; /* Tailwind 기본 단위 */
  --spacing-mm: 1mm; /* 96 ppi 기준 1 mm = 3.7795px */
  --spacing-module-w: 62mm; /* 칸 폭 = 기기 폭 */
  --spacing-module-h: 67.15mm; /* 칸 높이 = 기기 높이 / 2 */
  --spacing-device-w: 62mm;
  --spacing-device-h: 134.3mm;
  --spacing-device-d: 8.2mm; /* Cairn One 두께 */
  --spacing-device-d-long: 10.2mm; /* Cairn One Long 두께 */
  --spacing-screen-w: 57.5mm; /* 5.4 in · 19.5:9 활성 화면 */
  --spacing-screen-h: 124.5mm;
  --spacing-thumb-reach: 75mm; /* 엄지 도달 원호 반경 */
  --spacing-card-w: 85.6mm; /* ID-1 카드(보정기) */
  --spacing-card-h: 53.98mm;
  --spacing-hair: 1px; /* 칸 경계 */
  --spacing-header: 4rem; /* 64px */
  --spacing-band-label: 3.5rem; /* 구간 라벨 줄 56px */
  --spacing-band-gap: 5rem; /* 구간 사이 — 모바일은 style.css 에서 3rem */
  --spacing-tile-pad: 1.5rem; /* 칸 안쪽 — 모바일 0.75rem */
  --spacing-tile-pad-sm: 0.75rem;
  --spacing-page-gutter: 1rem; /* 모바일 좌우. ≥1200 은 격자가 가운데 고정 폭 */
  --spacing-target: 2.75rem; /* 44px — 터치 타깃 최소 */

  /* ── radius ──────────────────────────────────────────────────────────── */
  --radius-none: 0; /* 칸·표·매크로 사진 */
  --radius-control: 2px; /* 버튼·선택 버튼 — 거의 각짐(애플·삼성의 알약 버튼과 갈린다) */
  --radius-device: 8.5mm; /* 기기 모서리 — 기기 자리표시자에만 */
  --radius-finish: 999px; /* 마감 색 칩 — 조약돌 */

  /* ── shadow ──────────────────────────────────────────────────────────── */
  --shadow-none: none; /* 그림자는 쓰지 않는다 — 깊이는 선으로 */
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); /* 포커스 링 */

  /* ── ease ────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* 응답·등장 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 화면에 있는 것의 상태 전환(Crossfade) */
  --ease-draw: cubic-bezier(0.45, 0, 0.1, 1); /* 치수선 Line drawing — 천천히 시작해 또렷이 멈춘다 */

  /* ── breakpoint · container (Tailwind 이름공간 — 미디어 쿼리 안에서는 var() 가 안 되니 style.css 는 같은 값을 숫자로 쓴다) */
  --breakpoint-md: 768px; /* 2열 → 5열(축소) */
  --breakpoint-xl: 1200px; /* 5열 실측 1:1 */
  --container-grid: calc(5 * 62mm + 4px); /* 5칸 + 머리카락 선 4 ≈ 1176px */
}

/* Tailwind 이름공간 밖 — 승급 때 @theme 가 아니라 :root 에 남긴다. 길이만 모았다. */
:root {
  --duration-press: 100ms; /* Press / Tap feedback */
  --duration-state: 160ms; /* 가격·보기 전환 Crossfade */
  --duration-finish: 240ms; /* 마감 색 Crossfade */
  --duration-reveal: 320ms; /* Scroll reveal */
  --duration-stagger: 40ms; /* Stagger 간격 — 최대 6칸 */
  --duration-draw: 600ms; /* 치수선 Line drawing */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-press: 0ms;
    --duration-state: 0ms;
    --duration-finish: 0ms;
    --duration-reveal: 0ms;
    --duration-stagger: 0ms;
    --duration-draw: 0ms;
  }
}