/* 기본 — 리셋, 변수, 타이포, 로딩 화면.
 * 로드 순서: base → board → ui → print */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --green: #1f9e4a;
  --pink: #e62383;
  --yellow: #f6d419;
  --blue: #2b50c7;
  --ink: #0c0c0c;
  --paper: #ffffff;
  /* 영문: kensington / 한글: 산돌 고딕Neo3 (둘 다 Typekit) */
  --font: "kensington", "sandoll-gothicneo3", sans-serif;
}

html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-weight: 700;
  font-style: normal;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 영문 병기 스팬 — 화면은 한글만 쓴다 */
.en { display: none; }

/* ── 로딩 카운터 ─────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease;
}
#loader.is-done { opacity: 0; pointer-events: none; }
.load-num {
  font-size: clamp(72px, 15vw, 180px);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.load-num::after {
  content: "%";
  font-size: 0.18em;
  vertical-align: super;
  margin-left: 0.2em;
}

/* ── 조각 안 타이포 ──────────────────────────────────── */
.p-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.p-title .year {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.3em;
}
.p-sub {
  font-style: italic;
  font-size: 11.5px;
}
.p-sec {
  font-weight: 700;
  font-size: 11.5px;
}
.p-body {
  font-size: 11.5px;
  line-height: 1.62;
}
.p-info { font-size: 11px; }
.p-quote {
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.75;
}
.p-body .url {
  display: inline-block;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p-url-line { letter-spacing: 0.04em; }