/* 평판 平板 (plainboard) — 디자인 시스템 정본.
 * 이름은 Tailwind 4 @theme 이름공간(--color-* --font-* --text-* --spacing-* --radius-* --shadow-* --ease-*).
 * 브라우저가 @theme 를 모르므로 :root 에 둔다 — 승급 때 이 블록을 globals.css 의 @theme 로 그대로 옮긴다.
 * style.css 는 여기 이름만 쓴다(raw 색 금지). 근거·대비 실측은 _design/DESIGN.md.
 */
:root {
  color-scheme: dark;

  /* ── 색 — 먹(바탕) · 종이(반전) · 야광(강조 1색) ───────────────────────── */
  /* 바탕: 잉크 흑. 무채. luma #1d0a10 과 ΔE 0.065, vantar #1a2228 과 0.126 — 그보다 밝히면 luma 와 붙는다(#0a0a0a = 0.047). */
  --color-bg: #060606;
  /* 입력칸·누름·코드처럼 "바탕에서 한 겹 떠 있는" 면. 괘선으로 가르는 게 먼저고, 면은 여기 하나뿐. */
  --color-surface: #121211;
  /* 반전 — 선택된 줄·현재 쪽·공지 딱지. 먹 위의 종이. 글자는 --color-ink-invert. 이 면 위에 야광을 올리지 않는다(1.01:1). */
  --color-paper: #dcdad4;

  --color-ink: #dcdad4; /* 본문 — 순백은 먹 위에서 번진다(halation). 14.49:1 */
  --color-ink-strong: #f2f0ea; /* 제목·세로 제목·글쓴이 이름 */
  --color-ink-2: #9a9893; /* 메타(날짜·조회·글쓴이 열) — 7.03:1 */
  --color-ink-3: #85837e; /* 보조(자리표시 문구·구분 기호) — surface 위에서도 4.5 이상 */
  --color-ink-invert: #060606; /* 종이·야광 위의 글자 */

  --color-line: #2a2a28; /* 괘선 — 장식선. 표·칸 나눔(비텍스트 대비 요구 밖) */
  --color-line-strong: #6a6a66; /* 입력칸·버튼 테두리 — 비텍스트 3:1 이상(3.73:1) */

  /* 강조: 야광 비취 — OKLCH h≈164°(구간 150–179°, 아직 아무도 안 쓴 구간). "지금 살아 있는 것" 에만 — 새 글·누른 추천·포커스·커서. */
  --color-accent: #7ff0c0;

  /* ── 서체 — 사람의 말은 바탕체, 기계의 말은 고정폭 ───────────────────── */
  --font-serif: "Gowun Batang", "Noto Serif KR", "AppleMyungjo", serif;
  /* 숫자·로마자는 JetBrains Mono, 그 안의 한글은 Gowun Batang 으로 떨어진다(의도). */
  --font-mono: "JetBrains Mono", "Gowun Batang", ui-monospace, "SFMono-Regular", monospace;

  /* ── 글자 크기 — 가장 큰 것(세로 제목) : 가장 작은 것(메타) = 40 : 12 ──── */
  --text-micro: 0.75rem; /* 12 — 고정폭 메타·열 머리·명령줄 */
  --text-micro--line-height: 1.4;
  --text-micro--letter-spacing: 0.02em;
  --text-meta: 0.8125rem; /* 13 — 목록의 글쓴이, 댓글 머리 */
  --text-meta--line-height: 1.45;
  --text-row: 0.9375rem; /* 15 — 목록 제목 한 줄 */
  --text-row--line-height: 1.4;
  --text-comment: 1rem; /* 16 — 댓글 본문 */
  --text-comment--line-height: 1.75;
  --text-body: 1.0625rem; /* 17 — 글 본문. 바탕체는 x-높이가 작아 16 은 먹 위에서 가늘다 */
  --text-body--line-height: 1.85;
  --text-lead: 1.25rem; /* 20 — 절 머리(댓글 24 · 제1조) */
  --text-lead--line-height: 1.5;
  --text-mast: 1.5rem; /* 24 — 워드마크 평판 */
  --text-mast--line-height: 1;
  --text-title: 1.75rem; /* 28 — 모바일 가로 제목 · 쓰기 제목 입력 */
  --text-title--line-height: 1.3;
  --text-spine: 2.5rem; /* 40 — 세로 제목 띠(데스크톱). 모바일은 --text-title */
  --text-spine--line-height: 1.2;
  --text-count: 1.5rem; /* 24 — 추천/비추천 숫자(고정폭) */
  --text-count--line-height: 1;

  /* ── 간격 — 4px 척도. 줄 높이·칸 폭은 목록 15줄이 첫 화면에 들어가게 잰 값 ── */
  --spacing: 0.25rem; /* 4 — 기본 단위 */
  --spacing-gutter: 1rem; /* 16 — 칸 안쪽 좌우 */
  --spacing-row: 2.25rem; /* 36 — 데스크톱 목록 한 줄 */
  --spacing-row-2: 2.75rem; /* 44 — 모바일 두 줄 목록(제목 + 메타) · 터치 타깃 */
  --spacing-bar: 2.75rem; /* 44 — 탭 줄·쪽 넘김 줄·버튼 높이 */
  --spacing-mast: 3rem; /* 48 — 머리 띠 */
  --spacing-pane: 2.5rem; /* 40 — 읽기 칸 안쪽 */
  --spacing-spine: 6.5rem; /* 104 — 세로 제목 띠 폭(40px 글자 2줄 + 괘선) */
  --spacing-indent: 2rem; /* 32 — 대댓글 들여쓰기(1단만) */
  --spacing-section: 4rem; /* 64 — 본문 ↔ 추천 ↔ 댓글 */
  --spacing-list: 41rem; /* 656 — 목록 칸(1440 에서 45%) */
  --spacing-rail: 20rem; /* 320 — 글 페이지의 좁은 목록 */
  --spacing-measure: 38rem; /* 608 — 본문 한 줄 ≈ 36자(17px 바탕체) */

  /* ── 모서리·그림자 — 둘 다 없다 ─────────────────────────────────────── */
  --radius-none: 0px;
  --shadow-none: none;
  /* 포커스는 outline 이 먼저다. outline 을 못 쓰는 곳(overflow 잘림)만 이 그림자. */
  --shadow-focus: 0 0 0 2px var(--color-accent);

  /* ── 이징 — 움직임은 셋뿐(DESIGN.md 모션 규칙) ─────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 크로스페이드·접기 */
  --ease-step: steps(1, end); /* 명령줄 커서 깜빡임 — 흐르지 않고 끊긴다 */
}