/* chanpaca.net v3 — tokens (design.md §3). paper + ink + one cobalt. */
/* Paperlogy (OFL) — 4 of 9 weights: 400 body · 500 titles · 700 numerals · 900 the name */
@font-face { font-family: "Paperlogy"; src: url("fonts/Paperlogy-4Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("fonts/Paperlogy-5Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("fonts/Paperlogy-7Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("fonts/Paperlogy-9Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
/* metric-matched fallback so the 900 name doesn't reflow when the font lands (Paperlogy hhea, measured with fontTools: asc 0.978 / desc 0.2 / gap 0) */
@font-face { font-family: "Paperlogy Fallback"; src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeo-Regular"), local("Malgun Gothic"); ascent-override: 97.8%; descent-override: 20%; line-gap-override: 0%; }
:root {
  /* type — display outside the scale; body scale 1.25 major third */
  --font: "Paperlogy", "Paperlogy Fallback", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --display: clamp(9rem, 26vw, 23rem);               /* name: 2 glyphs → 30vw ≈ 60% width (kott 10 glyphs @17vw = 100%) */
  --title: clamp(1.75rem, 1rem + 3.4vw, 4rem);      /* ledger 3 lines: 28→64px */
  --step-2: 1.5625rem;   /* 25 */
  --step-1: 1.25rem;     /* 20 */
  --step-0: 1rem;        /* 16 */
  --step--1: 0.8125rem;  /* 13 */
  --meta: 0.75rem;       /* 12: sandeep/kott meta labels */
  --lh-display: 0.9;     /* sandeep 100/90 */
  --lh-tight: 1.1;
  --lh-body: 1.7;
  --track-display: -0.03em; /* sandeep -4px/100px; Paperlogy 900 is already tight → -0.03 */
  --track-meta: 0.06em;
  --w-regular: 400; --w-medium: 500; --w-bold: 700; --w-black: 900;

  /* color — roles. one hue only. */
  --paper: #f7f6f2;      /* surface */
  --paper-2: #eeece6;    /* raised / plate mount */
  --line: #d6d3ca;
  --ink: #121212;        /* 17.6:1 */
  --ink-2: #66655f;      /* muted, 5.2:1 on paper */
  --accent: var(--ink); /* 2026-09-18 윤찬: 강조색 없이 흑백. 역할 토큰은 남겨 두고 값만 잉크로 */
  --accent-ink: var(--paper);
  /* canvas derives from these (read via getComputedStyle, never hardcoded) */
  --particle-ink: #000000; /* 2026-09-18 윤찬: 입자는 잉크가 아니라 회색 */
  --particle-alpha: 0.62;

  /* space — 8 base, section rhythm from sandeep (75px inset @1440 = 5.2vw) */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem;
  --s6: clamp(4rem, 2rem + 5vw, 8rem);
  --s7: clamp(6rem, 3rem + 8vw, 12rem);
  --inset: clamp(1.25rem, 5.2vw, 4.75rem);
  --max: 90rem;

  /* shape */
  --radius: 0;
  --hair: 1px;

  /* motion */
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --control: 2.75rem;
  --focus: 2px solid var(--accent);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: var(--lh-body); font-weight: var(--w-regular); word-break: keep-all; overflow-wrap: anywhere; font-synthesis-weight: none; font-kerning: normal; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: var(--focus); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.meta { font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); line-height: 1.2; }