/* Hallmark · macrostructure: Marquee Hero · tone: instrument/utilitarian · anchor hue: neutral
 * genre: modern-minimal · theme: Ledger (custom) · nav: N6 masthead · footer: Ft1 mast-headed
 * enrichment: none — 계기 판독창이 그 자리를 대신한다
 * paper band: light (L 99.2%) · display: grotesk-sans w800 tight · accent: neutral
 *
 * 이 사이트는 예쁘려 하지 않는다. 측정 결과를 보여준다.
 * 크림색 종이 + 명조 + 러스트 액센트를 버린 이유: 현재 AI 생성물의 기본 팔레트이기 때문.
 * 채도 예산은 전부 데이터(--color-low/high)에 배정하고, 구획은 색면이 아니라 괘선으로 만든다.
 *
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);   /* 17px — KRDS 한국 표준 (Pretendard는 상대적으로 작게 그려짐) */
  line-height: 1.7;
  /* Pretendard는 설계 단계에서 자간이 이미 확정돼 있다. 음수를 더하면 이중 적용이다. */
  letter-spacing: 0;
  /* 한글엔 이탤릭·대소문자 관습이 없다 (W3C klreq). 합성 기울임을 막는다. */
  font-synthesis: none;
  /* keep-all은 단어 중간 절단을 막고, overflow-wrap이 실제 넘칠 때만 안전판이 된다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 표·코드·URL은 반대로 어디서든 끊어야 레이아웃이 안 깨진다 */
td, code, .url { word-break: break-all; }

/* 한글 제목 조판 — 토스·와이드어웨이크 실측 기준.
 * 한글은 80px에서도 자간 0이고 굵기는 700이다. 라틴 디스플레이 관행(-0.03em, w800)을
 * 한글에 그대로 쓰면 글자가 뭉쳐 읽히지 않는다. 어센더·디센더가 없어 행간도 더 필요하다. */
.hero__title, .sect__title, .close__stmt,
.masthead__name, .foot__name, .grp__name, .step__name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* 숫자는 이 사이트의 본문이다. 항상 등폭·표조판. */
.stat__value, .gauge__row dd, .row__state, .grp__n,
.strip, .hero__eyebrow, .step__no, .stat__label, .sect__kicker, .gauge__head {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

::selection { background: var(--color-accent-soft); color: var(--color-ink); }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--space-lg); }
.measure { max-width: 38em; }  /* ≈ 한글 40자 */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--space-md); top: var(--space-md); z-index: 20;
  background: var(--color-paper); padding: var(--space-xs) var(--space-sm);
  border: var(--rule-heavy);
}

/* ── 상단 스트립 ─────────────────────────────────────────────── */

/* 스트립 전체에 모노를 씌우면 한글 자모가 등폭 칸에 갇혀 자간이 벌어진다.
 * 서체는 본문으로 두고, 등폭은 날짜에만 건다. */
.strip {
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-xs);
  padding-block: var(--space-xs);
}
.strip__row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.strip span { white-space: nowrap; }
.strip time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── N6 · 마스트헤드 ─────────────────────────────────────────── */

.masthead { border-bottom: var(--rule-hair); padding-block: var(--space-md); }
.masthead__row {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  align-items: baseline; justify-content: space-between;
}
.masthead__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); letter-spacing: -0.01em; margin: 0;
}
.masthead__name a { text-decoration: none; }
.masthead__nav { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.masthead__nav a {
  font-size: var(--text-sm); color: var(--color-ink-2);
  text-decoration: none; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.masthead__nav a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }

/* ── 히어로 ─────────────────────────────────────────────────── */

.hero { padding-block: var(--space-xl) var(--space-lg); }
.hero__grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}
.hero__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-2); margin: 0 0 var(--space-md);
}
.hero__title {
  font-size: var(--text-display); line-height: 1.32; font-style: normal;
  margin: 0 0 var(--space-md); overflow-wrap: anywhere; min-width: 0;
}
/* 강조는 색이 아니라 밑줄로. 채도 예산은 데이터에만 쓴다. */
.hero__title em {
  font-style: normal;
  box-shadow: inset 0 -0.14em 0 var(--color-accent-soft);
}
.hero__lede { font-size: var(--text-md); color: var(--color-ink); margin: 0 0 var(--space-lg); max-width: 26em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }

.btn {
  display: inline-block; font-size: var(--text-sm); font-weight: 600;
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* 검정 채움 + 흰 테두리 한 쌍은 어느 페이지에나 붙는 기본값이라 버렸다.
 * 브랜드색 하나만 채우고, 보조 동선은 테두리 없는 밑줄 링크로 낮춘다. */
.btn--solid { background: var(--color-accent); color: var(--color-paper-2); }
.btn--solid:hover { background: var(--color-focus); }
.btn--ghost {
  padding-inline: 0; color: var(--color-ink-2);
  text-decoration: underline; text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-ink-4);
}
.btn--ghost:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
.btn:active { transform: translateY(1px); }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums; color: var(--color-ink-3);
  padding-top: var(--space-sm); border-top: var(--rule-hair);
}
.hero__meta b { color: var(--color-ink-2); font-weight: 500; }

/* 계기 판독창 — 이 카테고리(Keepa·PCPartPicker)는 색 예산을 브랜드가 아니라 데이터에 쓴다 */
.gauge {
  border: var(--rule-mid);
  background: var(--color-paper-2);
  padding: var(--space-md) var(--space-lg) var(--space-md);
}
.gauge__head {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-2); margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-xs); border-bottom: var(--rule-hair);
}
.gauge__rows { margin: 0; }
.gauge__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-md); padding-block: var(--space-2xs);
}
.gauge__row dt { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.4; }
/* 등폭은 숫자에만 건다. 한글에 걸면 자모가 등폭 칸에 갇혀 낱말이 벌어진다 (I-5). */
.gauge__row dd {
  margin: 0; font-size: var(--text-sm);
  color: var(--color-ink); white-space: nowrap;
}
.num, .gauge__row dd time {
  font-family: var(--font-mono); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.gauge__foot {
  margin: var(--space-sm) 0 0; font-size: var(--text-xs);
  color: var(--color-ink-3); line-height: 1.6;
}
.gauge__foot b {
  font-family: var(--font-mono); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--color-ink-2);
}

/* ── 스탯 행 ────────────────────────────────────────────────── */

/* 구획은 괘선이 아니라 여백이 만든다.
 * 앞서는 칸마다 테두리를 둘러 장부의 칸을 흉내 냈는데, 화면 전체가 모눈종이로 읽혔다. */
.stats { padding-block: var(--space-2xl); }
.stats__grid {
  display: grid; gap: var(--space-xl) var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.stat { padding: 0; }
.stat__label {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-3); margin: 0 0 var(--space-2xs);
}
/* 값에 모노를 씌우면 한글만 Pretendard로 폴백해 한 줄 안에서 서체가 갈린다
 * (RESEARCH-DESIGN.md I-5). 음수 자간도 한글에선 글자를 뭉갠다(I-1). 둘 다 뺀다. */
.stat__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1.25; margin: 0 0 var(--space-xs);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.stat__note { font-size: var(--text-sm); color: var(--color-ink-2); margin: 0; line-height: 1.5; }

/* ── 밴드 (색 전환으로 리듬 만들기) ──────────────────────────── */

.band { background: var(--color-paper-2); }
.band--deep { background: var(--color-deep); color: var(--color-deep-ink); }
.band--deep .sect__title { color: var(--color-deep-ink); }
.band--deep .sect__kicker { color: var(--color-deep-ink-2); }

/* 사진을 밴드 바닥에 깐다. 알갱이 윤곽만 남기고 거의 다 덮는다 —
 * 덜 덮으면 초록이 사진에 얹혀 이끼처럼 얼룩진다. 읽히는 건 글자여야 한다. */
.band--photo { position: relative; isolation: isolate; }
.band--photo::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("img/kibble.jpg") center / 140% auto;
  filter: grayscale(1) brightness(0.6) blur(3px);
  opacity: 0.09;
}

.sect { padding-block: var(--space-2xl); }
.sect__kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-2); margin: 0 0 var(--space-sm);
}
.sect__title {
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  font-size: var(--text-display-s); line-height: 1.35;
  margin: 0 0 var(--space-md); text-wrap: balance;
}
.sect__lede { font-size: var(--text-md); color: var(--color-ink); margin: 0 0 var(--space-2xl); max-width: 38em; }
.band--deep .sect__lede { color: var(--color-deep-ink-2); }

/* ── 산문 (문제 제기) ───────────────────────────────────────── */

.prose { columns: 2; column-gap: var(--space-2xl); max-width: 56em; }
.prose p { margin: 0 0 var(--space-md); break-inside: avoid; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
@media (max-width: 46rem) { .prose { columns: 1; } }

/* 도판이 옆에 서면 산문은 한 단으로 돌아온다 — 좁은 폭에 2단은 읽히지 않는다 */
.prose--single { columns: 1; max-width: 34em; }

/* ── 도판 ───────────────────────────────────────────────────────
 * 사진은 분위기용이 아니라 캡션이 달린 도판이다. 캡션이 사진의 지위를 밝힌다. */

.why__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--space-2xl);
  align-items: start;
}
.plate { margin: 0; }
.plate img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  border: var(--rule-hair);
  filter: saturate(0.88);
}
.plate__cap {
  margin-top: var(--space-xs);
  font-size: var(--text-xs); line-height: 1.5;
  color: var(--color-ink-2);
  border-top: var(--rule-hair); padding-top: var(--space-2xs);
}
.plate__note { color: var(--color-ink-3); }

@media (max-width: 52rem) {
  .why__body { grid-template-columns: minmax(0, 1fr); }
  .prose--single { max-width: 56em; }
  .plate { max-width: 22rem; }
}

/* ── 번호 스텝 ──────────────────────────────────────────────── */

/* 네 항목이 3단에 걸리면 마지막 하나만 다음 줄로 떨어져 큰 구멍이 남는다.
 * 폭이 되면 4단, 안 되면 2단으로 접어 홀수 낙오를 없앤다. */
.steps {
  display: grid; gap: var(--space-xl) var(--space-2xl);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 64rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { padding-top: var(--space-sm); border-top: var(--rule-mid); }
.step__no {
  font-size: var(--text-xs);
  color: var(--color-ink-3); letter-spacing: 0.1em; margin: 0 0 var(--space-2xs);
}
.step__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); margin: 0 0 var(--space-xs);
}
.step p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; }
.band--deep .step p { color: var(--color-deep-ink-2); }
/* 옛 러스트 팔레트에서 남은 갈색 괘선을 토큰으로 되돌린다 — 초록 밴드 위에서 갈색으로 떴다 */
.band--deep .step { border-top-color: color-mix(in oklab, var(--color-deep-ink) 28%, transparent); }

/* ── 색인 ───────────────────────────────────────────────────── */

#index { background: var(--color-paper-2); }
/* 그룹마다 품목 수가 달라 격자로 깔면 짧은 단 아래로 빈 구멍이 남는다.
 * 다단 흐름으로 바꿔 위에서부터 채운다. */
.idx__groups {
  columns: 3 15rem;
  column-gap: var(--space-2xl);
}
.idx__groups > div {
  break-inside: avoid;
  margin-bottom: var(--space-xl);
}
.grp__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); margin-bottom: var(--space-xs);
  padding-bottom: var(--space-2xs); border-bottom: var(--rule-mid);
}
.grp__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); margin: 0;
}
.grp__n {
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums; color: var(--color-ink-3);
}
/* 행마다 밑줄을 그으면 26줄 × 3단이 통째로 모눈이 된다. 줄 간격만으로 세운다. */
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-md); align-items: baseline;
  padding-block: var(--space-2xs);
}
.row__name { margin: 0; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
/* 진행률 — "수집 중"보다 회차 수가 정직하고 검산 가능하다.
 * 모노는 숫자·라틴에만 걸리게 두고, "회차"는 본문 서체로 흘린다. */
.row__state {
  font-size: var(--text-sm);
  color: var(--color-ink-3); white-space: nowrap;
}
.row__state b {
  font-family: var(--font-mono); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--color-ink-2);
  margin-right: 0.15em;
}

/* ── 클로징 ─────────────────────────────────────────────────── */

.close { padding-block: var(--space-2xl); }
.close__stmt {
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  font-size: var(--text-2xl); line-height: 1.5;
  margin: 0 0 var(--space-lg); max-width: 44rem; text-wrap: balance;
}
.close__by { font-size: var(--text-sm); color: var(--color-ink-2); margin: 0; }

/* ── Ft1 · 마스트헤드 푸터 ──────────────────────────────────── */

.foot { border-top: var(--rule-heavy); padding-block: var(--space-lg) var(--space-2xl); }
.foot__band {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  align-items: baseline; justify-content: space-between;
}
.foot__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); margin: 0; padding: 0; list-style: none; }
.foot__links a { text-underline-offset: 3px; white-space: nowrap; }
.foot__links a:hover { color: var(--color-accent); }
.foot__fine { margin: var(--space-lg) 0 0; font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.75; max-width: 46rem; }

/* ── 한 번의 조율된 등장 ────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise var(--dur-slow) var(--ease-out) both; }
  .rise:nth-child(2) { animation-delay: 70ms; }
  .rise:nth-child(3) { animation-delay: 140ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── 좁은 화면 ──────────────────────────────────────────────── */

@media (max-width: 52rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 30rem) {
  .hero { padding-block: var(--space-2xl) var(--space-xl); }
  .sect { padding-block: var(--space-2xl); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row__state { justify-self: start; }
}

/* 가격이 아직 없다는 사실을 흐리지 않되, 26줄이 경고처럼 보이지도 않게 한다 */
.row__state--none { color: var(--color-pending); font-size: var(--text-xs); }