/* form-rest — 디자인 시스템 정본 (3단계, designer)
 *
 * 이름은 Tailwind 4 @theme 이름공간 그대로다(--color-* --font-* --text-* --spacing-* --radius-* --shadow-* --ease-*
 * 와 --aspect-* --leading-* --tracking-* --container-* --breakpoint-* --font-weight-*). 정적 사이트라 브라우저가
 * 읽을 수 있게 :root 에 둔다 — 승급 때 첫 블록을 globals.css 의 @theme { } 로 그대로 옮긴다.
 * style.css 는 여기의 var() 만 쓴다(raw 색 = G2 ⑨ 경고). 값을 바꾸면 DESIGN.md 대비표를 다시 잰다:
 *   node build.mjs --contrast form-rest
 *
 * 바탕 쪽 이름에는 bg / surface / plate 를 넣었다 — --contrast 가 이름으로 배경·전경을 가른다.
 */

:root {
  /* ── 색 · 벽 넷 (방마다 석회칠 벽 — 페이지 바탕이 곧 방의 벽이다) ─────────────── */
  --color-bg: #c2714f;            /* Clay — 01 Living. 기본 바탕 · template.json palette.bg */
  --color-bg-olive: #8f8a4e;      /* Olive — 02 Sleeping */
  --color-bg-ochre: #b08948;      /* Ochre — 03 Study */
  --color-bg-fig: #ab8388;        /* Fig — 04 Dining */
  --color-bg-night: #221814;      /* 밤 — 쇼룸·꼬리·쇼룸 초대 띠. 먹보다 한 톤 밝은 적갈 */

  /* ── 색 · 벽감(자리표시자·카드 이미지 자리) — 벽보다 한 톤 깊다(벽 82% + 먹 18%) ── */
  --color-surface-clay: #a46044;
  --color-surface-olive: #7a7543;
  --color-surface-ochre: #95743e;
  --color-surface-fig: #916f72;
  --color-surface-bone: #cdbfb1;  /* Bone canvas 천을 골랐을 때의 주 벽감 */

  /* ── 색 · 판(석고) — 치수 도면·고지·캡션 알약에만. 한 화면 면적 20% 이하(종이색 바탕 금지) ── */
  --color-plate: #ecdfd3;

  /* ── 색 · 글자와 선 ──────────────────────────────────────────────────────────── */
  --color-ink: #1b1310;           /* 먹(짙은 엄버). 벽 위 모든 글자 — 벽 위에서는 회색 글자를 쓰지 않는다 */
  --color-ink-soft: #5a4a40;      /* 판(석고) 위 보조 글자 전용 — 벽 위 금지(대비 미달) */
  --color-ink-inverse: #ecdfd3;   /* 밤·먹 알약·페트롤 알약 위 글자 */
  --color-ink-inverse-soft: #b9aa9c; /* 밤 위 보조 글자 */
  --color-accent: #173d48;        /* 페트롤 — 제도 잉크. 치수선·주 CTA 알약·선택 상태·줄자 표지 */
  --color-accent-inverse: #8fb3bb; /* 밤 위 페트롤(동선 점선·표지) */
  --color-rule: rgb(27 19 16 / 0.22);        /* 벽 위 가는 괘선 */
  --color-rule-inverse: rgb(236 223 211 / 0.2); /* 밤 위 괘선 */
  --color-focus: #1b1310;         /* 벽·판 위 포커스 고리 */
  --color-focus-inverse: #ecdfd3; /* 밤·알약 위 포커스 고리 */

  /* ── 색 · 소재 견본(CSS 로 그리는 결 — 글자 바탕으로 쓰지 않는다) ─────────────── */
  --color-material-oak: #c49a6c;
  --color-material-oak-grain: #a37a4f;
  --color-material-walnut: #5b3c2a;
  --color-material-walnut-grain: #3f281b;
  --color-material-boucle: #8f8a4e;
  --color-material-boucle-loop: #aaa56c;
  --color-material-travertine: #d3c4a8;
  --color-material-travertine-pore: #b09f82;

  /* ── 서체 ─────────────────────────────────────────────────────────────────────── */
  --font-display: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-strong: 600;

  /* ── 글자 크기 (유동 · 1440 에서 최대 · 390 에서 최소) ────────────────────────── */
  --text-micro: 0.75rem;            /* 눈썹·캡션 알약 — 대문자 + --tracking-eyebrow */
  --text-micro--line-height: 1.3;
  --text-caption: 0.8125rem;        /* 치수·메타 */
  --text-caption--line-height: 1.45;
  --text-small: 0.9375rem;
  --text-small--line-height: 1.5;
  --text-body: 1.0625rem;           /* 본문 17px */
  --text-body--line-height: 1.6;
  --text-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --text-lead--line-height: 1.45;
  --text-h3: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);          /* DM Serif — 상품명·판 제목 */
  --text-h3--line-height: 1.12;
  --text-h2: clamp(2.25rem, 1.55rem + 2.8vw, 4rem);           /* DM Serif — 블록 제목 */
  --text-h2--line-height: 1.02;
  --text-h1: clamp(2.75rem, 1.6rem + 4.6vw, 6.25rem);         /* DM Serif — 페이지 제목 */
  --text-h1--line-height: 0.98;
  --text-room: clamp(2.75rem, 1.2rem + 6.2vw, 7.25rem);       /* DM Serif — 판의 방 이름 */
  --text-room--line-height: 0.94;
  --text-display: clamp(3.25rem, 1.5rem + 8.6vw, 9.75rem);    /* DM Serif — "Four Walls" · 꼬리 워드마크 */
  --text-display--line-height: 0.9;
  --text-display--letter-spacing: -0.012em;

  --leading-display: 0.9;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-eyebrow: 0.18em;
  --tracking-display: -0.012em;
  --tracking-body: 0;

  /* ── 간격 (Tailwind 기본 단위 + 이 템플릿의 이름 붙은 간격) ────────────────────── */
  --spacing: 0.25rem;
  --spacing-gutter: clamp(1.25rem, 0.75rem + 2vw, 3rem);       /* 판·띠 안쪽 좌우 */
  --spacing-section: clamp(6rem, 3.5rem + 8vw, 11rem);         /* 블록 사이 — 크게 숨 쉰다(렌즈) */
  --spacing-block: clamp(2.5rem, 1.75rem + 2.5vw, 4.5rem);     /* 블록 안 무리 사이 */
  --spacing-peek: clamp(2.75rem, 11vw, 12.5rem);               /* 다음 방 벽이 보이는 폭 — 1440 에서 158px, 390 에서 44px */
  --spacing-nav: 5.5rem;                                       /* 위에 붙은 머리(치수선 자) + 숨 — 본문 시작 여백 */
  --spacing-hdr: 3.5rem;                                       /* 머리 띠 높이 */
  --spacing-rail: 4rem;                                        /* 줄자 레일 높이 */
  --spacing-bezel: 0.5rem;                                     /* 이중 테 바깥 껍데기 안쪽 여백 */
  --spacing-tap: 2.75rem;                                      /* 최소 터치 44px */

  /* ── 모서리 ───────────────────────────────────────────────────────────────────── */
  --radius-plate: 2rem;                                        /* 이중 테 바깥 */
  --radius-plate-inner: calc(2rem - 0.5rem);                   /* 이중 테 안쪽 = 바깥 − bezel (동심원) */
  --radius-niche: 1.25rem;                                     /* 벽감(자리표시자) */
  --radius-swatch: 0.75rem;
  --radius-control: 0px;                                       /* 버튼·칩·토스트 — 치수선 결, 둥글림 0 (헤더 재설계 2026-10-09) */
  --radius-pill: 9999px;                                       /* Nav · 버튼 · 칩 · 캡션 */

  /* ── 그림자 — 떨어지는 그림자는 없다(브리프 "카드 그림자" 금지). 둘 다 안쪽 ─────── */
  --shadow-corner: inset 2.5rem 0 3rem -2.5rem rgb(27 19 16 / 0.3); /* 벽 모서리 — 판 왼쪽 안쪽 */
  --shadow-plate-inset: inset 0 1px 0 rgb(255 255 255 / 0.45);     /* 판 안쪽 윗 가장자리 빛 */
  --shadow-none: none;

  /* ── 이징 — linear·ease-in-out 금지(렌즈) ───────────────────────────────────────── */
  --ease-room: cubic-bezier(0.32, 0.72, 0, 1);      /* 무겁게 멈춘다 — Reveal · 판 · 시트 */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);  /* Hover · Crossfade · Number ticker */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);         /* Press / Tap feedback */
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);      /* Line drawing — 선은 A 에서 B 로 이미 화면 위에 있다 */

  /* ── 비율 · 폭 · 구간 ─────────────────────────────────────────────────────────── */
  --aspect-room: 16 / 9;
  --aspect-piece: 4 / 3;
  --aspect-square: 1 / 1;
  --container-read: 38rem;
  --container-wide: 90rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 90rem;
}

/* Tailwind 4 이름공간 밖 — 승급 때는 @theme 이 아니라 :root 에 남긴다. main.js 가 getComputedStyle 로 읽는다. */
:root {
  --dur-press: 120ms;
  --dur-ui: 240ms;
  --dur-hover: 700ms;
  --dur-reveal: 900ms;
  --dur-draw: 1200ms;
  --stagger: 80ms;
  --track-panel-length: 140;  /* 판 하나를 지나는 세로 스크롤 = 140svh (느림) */
  --track-lerp: 0.12;         /* 관성 보간 — 프레임마다 목표까지 남은 거리의 12% */
  --z-grain: 10;              /* 석회칠 결(고정 · pointer-events none) */
  --z-nav: 30;
  --z-sheet: 40;
  --z-toast: 50;
}