/* marginalia — 디자인 시스템 정본. 이름은 Tailwind 4 @theme 이름공간, 선언은 :root(브라우저는 @theme 을 읽지 않는다 #73).
 * style.css 는 여기 변수만 쓴다. 대비 실측은 _design/DESIGN.md 대비표. */
:root {
  /* 색 — 차가운 은회청 바탕 하나, 크림슨은 선·숫자로만(면 금지 #52) */
  --color-bg: #c9d4e1;            /* 바탕 — oklch(0.865 0.022 253) */
  --color-surface-raise: #e2e9f0; /* 띄운 면 — 펼친 여백 메모 · 구독 판 안쪽 · #note 강조 */
  --color-surface-sunk: #b7c4d2;  /* 가라앉은 면 — 연재 띠 · 도판 판 바깥 테 · 꼬리 */
  --color-surface-mark: #dbb1b7;  /* 형광펜 — 짝 강조 때 본문 앵커 밑 (잉크만 올린다) */
  --color-ink: #12161c;           /* 본문 · 제목 · 숫자 */
  --color-ink-mute: #474e57;      /* 여백 메모 · 메타 · 캡션 */
  --color-ink-faint: #626a73;     /* 예정 회차 숫자(24px 이상)·비활성 — 본문 글자에 쓰지 않는다 */
  --color-rule: #95a0ab;          /* 머리카락 선 — 글자 아님 */
  --color-accent: #951741;        /* 먹 크림슨 — 메모 번호 · 지금 회차 · 읽은 위치 선 · 초점 링 */
  --color-on-ink: #e2e9f0;        /* 잉크 면(구독 단추·눌린 태그) 위 글자 */

  /* 서체 — 서가 가족만. Gothic A1 400·700·900 / Hahmlet 가변 */
  --font-display: "Gothic A1", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-body: "Gothic A1", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-note: "Hahmlet", "AppleMyungjo", serif;

  /* 글자 크기 — 본문 18 기준, 제목·숫자는 유동 */
  --text-micro: 0.8125rem;   /* 13 — 메타(보조 잉크) */
  --text-small: 0.875rem;    /* 14 — 머리·꼬리 링크, 표 */
  --text-note: 0.9375rem;    /* 15 — 여백 메모(Hahmlet) */
  --text-body-m: 1.0625rem;  /* 17 — 모바일 본문 */
  --text-body: 1.125rem;     /* 18 — 본문 */
  --text-lead: 1.375rem;     /* 22 — 글 부제 */
  --text-h3: 1.5rem;         /* 24 — 목록 제목 · 인용(Hahmlet) */
  --text-h2: 2rem;           /* 32 — 본문 소제목 · 쪽 구간 제목 */
  --text-wordmark: 1.5rem;   /* 24 — 머리 워드마크(900) · 모바일 1.25rem */
  --text-year: 4rem;         /* 64 — 아카이브 연도(900, 메타 칸 160 안) */
  --text-h1: clamp(2.125rem, 1.2rem + 3.1vw, 4rem);       /* 34 → 64 */
  --text-numeral: clamp(4rem, 2rem + 6vw, 7.5rem);        /* 64 → 120 — 회차 숫자(900) */
  --text-season: clamp(5rem, 2rem + 10vw, 10rem);         /* 80 → 160 — 계절 낱말(900, 2자 이하) */

  /* 행간·자간 */
  --text-body--line-height: 1.85;
  --text-note--line-height: 1.7;
  --text-h1--line-height: 1.16;
  --text-numeral--line-height: 0.86;
  --text-h1--letter-spacing: -0.02em;
  --text-numeral--letter-spacing: -0.04em;

  /* 간격 — 4 의 배수 척도 + 유동 셋 */
  --spacing-1: 0.25rem;   /* 4 */
  --spacing-2: 0.5rem;    /* 8 */
  --spacing-3: 0.75rem;   /* 12 */
  --spacing-4: 1rem;      /* 16 */
  --spacing-5: 1.5rem;    /* 24 */
  --spacing-6: 2rem;      /* 32 */
  --spacing-7: 3rem;      /* 48 */
  --spacing-8: 4rem;      /* 64 */
  --spacing-9: 6rem;      /* 96 */
  --spacing-10: 8rem;     /* 128 */
  --spacing-11: 10rem;    /* 160 */
  --spacing-page: clamp(1.25rem, -0.5rem + 5vw, 4rem);      /* 좌우 쪽 여백 20 → 64 */
  --spacing-section: clamp(4rem, 2rem + 8vw, 10rem);        /* 구간 사이 64 → 160 */
  --spacing-gutter: clamp(2.5rem, 1rem + 2.5vw, 3.5rem);    /* 본문 ↔ 여백 칸 40 → 56 */
  /* 칸 폭 — wireframe 폭 표의 근거 */
  --spacing-col-meta: 10rem;     /* 160 — 회차 숫자 칸(≥1200) */
  --spacing-col-body: 42.5rem;   /* 680 — 본문 최대 폭(18px 에 한글 39자) */
  --spacing-col-margin: 17rem;   /* 272 — 여백 칸(≥1200) */
  --spacing-col-margin-s: 16rem; /* 256 — 여백 칸(960~1199) */
  --spacing-hair: 1px;
  --spacing-tap: 2.75rem;        /* 44 — 최소 터치 */

  /* 모서리 — 거의 각지게, 이중 테 두 곳만 둥글게 */
  --radius-hair: 2px;
  --radius-field: 4px;
  --radius-plate: 1.25rem;                       /* 이중 테 바깥 */
  --radius-plate-inner: calc(1.25rem - 0.375rem); /* 이중 테 안쪽(테 두께 6px) */

  /* 그림자 — 펼친 메모·이중 테 안쪽에만, 아주 넓게 퍼진 것 */
  --shadow-lift: 0 1px 0 rgb(255 255 255 / 0.55) inset, 0 18px 40px -24px rgb(18 22 28 / 0.28);
  --shadow-plate: 0 1px 1px rgb(255 255 255 / 0.6) inset, 0 30px 60px -40px rgb(18 22 28 / 0.35);

  /* 이징 — linear·기본 ease-in-out 쓰지 않는다 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* 펼침·짝 강조·등장 */
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);    /* 메모 1 자리 잡기 */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);          /* 접힘·거름에서 빠짐(짧게) */
}