/* 디자인 토큰 SSOT — docs/02-brand-design.md §3·§5·§6이 의미를 정의하고, 값은 이 파일이 정본이다. */

:root {
  /* 색 — 「오래 쓴 나무 상자와 그 안의 종이」 (§3) */
  --ch-bg: #fbf4e8;
  --ch-surface: #ffffff;
  --ch-surface-sunken: #f2ede4;
  --ch-border: #e3dacb;
  --ch-text: #241f1a;
  --ch-text-muted: #6b6155;
  --ch-primary: #7a5c3e;
  --ch-on-primary: #ffffff;
  --ch-accent: #2f6b5e;
  --ch-success: #2f6b5e;
  --ch-warning: #8a6412;
  --ch-danger: #9b3b2e;

  /* 관계 기록의 실물 표면 — widget/recap/landing이 공유하는 고정 팔레트 */
  --ch-overlay-ink: #15120f;
  --ch-text-on-accent: #fff;
  --ch-accent-deep: #255b4f;
  --ch-paper-light: #fffaf0;
  --ch-paper-bright: #fffaf1;
  --ch-recap-border: #bda98e;
  --ch-recap-surface: #234f45;
  --ch-recap-muted: #dcd3c3;
  --ch-widget-swatch-border: #b9aa94;
  --ch-widget-swatch-warm: #d9a47d;
  --ch-widget-clean-surface: #f2eee5;
  --ch-widget-clean-ink: #315c51;
  --ch-widget-frame-edge: #eee5d7;
  --ch-widget-photo-base: #8f6955;
  --ch-widget-frame-shadow: #c8b9a4;
  --ch-widget-grid-surface: #ad7c5e;
  --ch-widget-grid-gold: #d6b08e;
  --ch-widget-grid-sage: #698277;
  --ch-widget-stage: #efebe3;
  --ch-widget-preview-border: #cabba6;
  --ch-widget-preview-surface: #f7f2e9;
  --ch-widget-preview-text: #302b25;
  --ch-widget-preview-muted: #75695c;
  --ch-widget-preview-note: #5c5146;
  --ch-widget-clean-border: #91a49b;
  --ch-widget-clean-wash: #f6f4ec;
  --ch-widget-frame-surface: #d7c7ad;
  --ch-widget-photo-warm: #c58e69;
  --ch-widget-photo-cool: #728b80;
  --ch-widget-photo-sand: #d9b890;
  --ch-selection-surface: #e8f0ed;
  --ch-selection-text: #19483e;
  --ch-landing-photo-wash: #e7dccb;
  --ch-primary-hover: #6a4f35;
  --ch-widget-shadow: rgb(67 52 37 / 12%);
  --ch-widget-frame-depth: rgb(62 42 27 / 18%);

  /* 타이포 (§5) — 전달 파일 없는 플랫폼 한국어 sans + 웨이트 4단 + tabular-nums */
  --ch-font: system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ch-display: 700 2.125rem/1.2 var(--ch-font);
  --ch-title: 600 1.375rem/1.35 var(--ch-font);
  --ch-body: 400 1.0625rem/1.6 var(--ch-font);
  --ch-body-lg: 400 1.25rem/1.6 var(--ch-font); /* 관객 뷰 하한 20px */
  --ch-caption: 400 0.875rem/1.5 var(--ch-font);
  --ch-label: 500 0.8125rem/1.4 var(--ch-font);

  /* 공간 */
  --ch-sp-1: 4px;
  --ch-sp-2: 8px;
  --ch-sp-3: 12px;
  --ch-sp-4: 16px;
  --ch-sp-5: 20px;
  --ch-sp-6: 24px;
  --ch-sp-8: 32px;
  --ch-sp-12: 48px;
  --ch-radius: 12px;
  --ch-radius-sm: 8px;
  --ch-focus-width: 2px;
  --ch-focus-offset: 2px;

  /* 모션 (§6) */
  --ch-motion-enter: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ch-motion-switch: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --ch-motion-success: 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="dark"] {
  --ch-bg: #14120f;
  --ch-surface: #1e1b17;
  --ch-surface-sunken: #0e0c0a;
  --ch-border: #332e27;
  --ch-text: #f3eee6;
  --ch-text-muted: #a79c8d;
  --ch-primary: #c9a176;
  --ch-on-primary: #1a140e;
  --ch-accent: #6fbfa8;
  --ch-success: #6fbfa8;
  --ch-warning: #d6a93b;
  --ch-danger: #e08171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ch-bg: #14120f;
    --ch-surface: #1e1b17;
    --ch-surface-sunken: #0e0c0a;
    --ch-border: #332e27;
    --ch-text: #f3eee6;
    --ch-text-muted: #a79c8d;
    --ch-primary: #c9a176;
    --ch-on-primary: #1a140e;
    --ch-accent: #6fbfa8;
    --ch-success: #6fbfa8;
    --ch-warning: #d6a93b;
    --ch-danger: #e08171;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ch-motion-enter: 0ms;
    --ch-motion-switch: 0ms;
    --ch-motion-success: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 120ms !important;
  }
}

/* ── 리셋 + 기본 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--ch-bg);
  color: var(--ch-text);
  font: var(--ch-body);
  font-family: var(--ch-font);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
:focus-visible {
  outline: var(--ch-focus-width) solid var(--ch-accent);
  outline-offset: var(--ch-focus-offset);
  border-radius: 4px;
}
.num {
  font-variant-numeric: tabular-nums;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 한글 어절 보호.
 *
 * 기본값 `word-break: normal`에서 브라우저는 한글을 **음절 단위로 자른다** —
 * "신원을 넘기지 않 / 고 입장하세요."처럼 어절 중간에서 줄이 바뀐다.
 * 실측 2026-08-13, 390px 실제 브라우저에서 이 제품의 첫 화면 20곳이 그 상태였다.
 *
 * **app.css가 아니라 여기 둔다.** 랜딩은 SSG 정적 페이지라 SPA 번들 CSS를 로드하지
 * 않는다 — build.mjs가 이 파일만 /assets/tokens.css로 복사해 랜딩에 링크한다.
 * app.css에 넣었더니 번들에는 들어갔지만 **랜딩에는 도달하지 못했다**(실측 확인).
 *
 * `:where()`로 특이도 0을 유지해 컴포넌트가 필요할 때 한 줄로 덮을 수 있게 한다
 * (URL·코드처럼 어절 개념이 없는 곳).
 */
:where(body) {
  word-break: keep-all;
}

/* keep-all의 대가.
 *
 * 어절을 자르지 않으면 min-content 폭이 가장 긴 어절만큼 커진다. flex/grid 자식의
 * 기본값 `min-width: auto`는 그 아래로 못 줄어들어 **이전에 없던 넘침**이 생긴다.
 * 그래서 두 규칙은 항상 같이 간다.
 */
:where(main, section, article, li, td, p, h1, h2, h3, h4) {
  min-width: 0;
}