@charset "UTF-8";
/* ============================================================================
 * tokens.type.css — 타이포 비교 레이어 (임시)
 *
 * 네 축을 URL 파라미터로 바꿔 비교한다:
 *   ?disp=  제목 폰트    ?body=  본문 폰트
 *   ?h1=    제목 크기    ?h1w=   제목 무게
 *
 * `v1/type-switch.js` 가 head 에서 동기 실행되어
 * <html data-disp data-body data-h1 data-h1w> 와
 * --font-disp-override / --font-body-override / --h1-*-override 를 심는다.
 *
 * **조합이 확정되면 이 파일을 지우고 tokens.v1.css 의 기본값만 남긴다.**
 *
 * 후보 목록·라이선스: tools/font-candidates.json · docs/FONT-LICENSES.md
 * 획 두께 실측:       tools/font-stems.json
 * ==========================================================================*/

/* ── 폰트 축 두 개 — 스위처가 심은 변수를 받는다 ────────────────────────────
 * 후보마다 규칙을 하나씩 쓰지 않는다(11종 × 2축 = 22개 규칙이 된다).
 * 폰트 이름을 변수로 받으면 규칙 두 개로 끝난다.
 * 폴백 체인은 여기서 붙인다 — 웹폰트가 실패해도 조판이 유지되어야 한다. */
html[data-disp] {
  --v1-font-display: var(--font-disp-override), "Nanum Myeongjo",
                     "Apple SD Gothic Neo", serif;
}
html[data-body] {
  --v1-font-body: var(--font-body-override), "Pretendard",
                  "Apple SD Gothic Neo", sans-serif;
}

/* ── 본문이 명조일 때의 보정 ────────────────────────────────────────────────
 * 명조 본문은 획이 얇고 세리프가 있어 산세리프 기준 행간에서 줄이 붙어 보인다.
 * 자간도 미세하게 풀어야 획이 엉기지 않는다.
 * 세리프 후보 5종을 data-body 로 직접 지정한다. */
html[data-body="maru"],
html[data-body="gowun"],
html[data-body="noto"],
html[data-body="ridi"],
html[data-body="nanum"] {
  --v1-lead-base:    1.90;
  --v1-lead-relaxed: 2.05;
  --v1-lead-lg:      1.62;
  --v1-track-base:   0.004em;
  --v1-track-sm:     0.008em;
}

/* 본문이 명조여도 **산세리프를 유지하는 곳** — 판독이 우선인 요소들.
 * 명조로 조판하면 읽기 어려워지는 자리다:
 *   · 작은 라벨·캡션 (획이 얇아 사라진다)
 *   · 숫자 (tabular-nums 지원이 산세리프가 낫다)
 *   · 폼 입력 (사용자가 입력한 글자는 판독이 최우선)
 *   · 상태 뱃지 */
html[data-body="maru"] .eyebrow,   html[data-body="gowun"] .eyebrow,
html[data-body="noto"] .eyebrow,   html[data-body="ridi"] .eyebrow,
html[data-body="nanum"] .eyebrow,
html[data-body="maru"] .field__hint,  html[data-body="gowun"] .field__hint,
html[data-body="noto"] .field__hint,  html[data-body="ridi"] .field__hint,
html[data-body="nanum"] .field__hint,
html[data-body="maru"] .field__err,   html[data-body="gowun"] .field__err,
html[data-body="noto"] .field__err,   html[data-body="ridi"] .field__err,
html[data-body="nanum"] .field__err,
html[data-body="maru"] .field__in,    html[data-body="gowun"] .field__in,
html[data-body="noto"] .field__in,    html[data-body="ridi"] .field__in,
html[data-body="nanum"] .field__in,
html[data-body="maru"] .badge,        html[data-body="gowun"] .badge,
html[data-body="noto"] .badge,        html[data-body="ridi"] .badge,
html[data-body="nanum"] .badge,
html[data-body="maru"] .tbl__num,     html[data-body="gowun"] .tbl__num,
html[data-body="noto"] .tbl__num,     html[data-body="ridi"] .tbl__num,
html[data-body="nanum"] .tbl__num,
html[data-body="maru"] .nrow__n,      html[data-body="gowun"] .nrow__n,
html[data-body="noto"] .nrow__n,      html[data-body="ridi"] .nrow__n,
html[data-body="nanum"] .nrow__n,
html[data-body="maru"] .nrow__d,      html[data-body="gowun"] .nrow__d,
html[data-body="noto"] .nrow__d,      html[data-body="ridi"] .nrow__d,
html[data-body="nanum"] .nrow__d {
  font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
}

/* 고운바탕은 자폭이 0.930em 으로 4종 중 가장 좁다 —
 * 같은 트래킹이 더 조여 보이므로 큰 크기에서만 완화한다. */
html[data-disp="gowun"] {
  --v1-track-3xl: -0.024em;
  --v1-track-2xl: -0.020em;
}

/* ══ 히어로 제목 오버라이드 (비교용) ══════════════════════════════════════
 * type-switch.js 가 --h1-size-override / --h1-weight-override 를 심는다.
 *
 * ⚠️ clamp() 의 최대값만 바꾼다. 최소·기울기를 그대로 두어
 *    **모바일 조판이 비교 때문에 깨지지 않게** 한다.
 *    데스크탑에서만 지정한 px 가 보인다.
 * ⚠️ letter-spacing 은 무게에 따라 재조정한다 —
 *    무게가 올라가면 글자가 굵어져 사이가 좁아 보이므로 **덜** 조여야 한다.
 *    (얇은 획은 사이가 넓어 보여 더 조여야 한다) */
/* ⚠️ 특정도를 올려야 한다. 이 파일은 v1/style.css **앞에** 로드되므로
 *    같은 특정도(단일 클래스)면 나중에 오는 .display 가 이긴다.
 *    실제로 그 함정에 빠져 h1/h1w 파라미터가 무시됐다.
 *    → html[data-h1] 을 앞에 붙여 특정도를 (0,2,1) 로 올린다. */
html[data-h1] .hero__title {
  font-size: clamp(2.6rem, 2rem + 3vw, var(--h1-size-override, 4.44rem));
  font-weight: var(--h1-weight-override, 600);
}
/* 무게별 트래킹 보정 — 굵을수록 완만하게 */
html[data-h1w="300"] .hero__title { letter-spacing: -0.040em; }
html[data-h1w="400"] .hero__title { letter-spacing: -0.034em; }
html[data-h1w="500"] .hero__title { letter-spacing: -0.030em; }
html[data-h1w="600"] .hero__title { letter-spacing: -0.026em; }
html[data-h1w="700"] .hero__title { letter-spacing: -0.022em; }
html[data-h1w="800"] .hero__title { letter-spacing: -0.018em; }
html[data-h1w="900"] .hero__title { letter-spacing: -0.014em; }
/* 고운바탕은 자폭이 0.930em 으로 좁아 같은 값이 더 조여 보인다 → 한 단 완화 */
html[data-font="gowun"][data-h1w="600"] .hero__title { letter-spacing: -0.020em; }
html[data-font="gowun"][data-h1w="700"] .hero__title { letter-spacing: -0.016em; }

/* ══ 나란히 비교 (/type) ═══════════════════════════════════════════════
 * 같은 문장을 후보별로 놓는다. 행 전체가 링크이고 누르면 그 폰트로 설정된다. */
.cmp { display: grid; gap: 0; border-top: 1px solid var(--v1-ink); }
.cmp__row {
  display: grid; grid-template-columns: 13em minmax(0, 1fr);
  gap: var(--v1-space-5);
  align-items: baseline;
  padding: var(--v1-space-5) 0;
  border-bottom: 1px solid var(--v1-border-soft);
  text-decoration: none; color: inherit;
  border-left: 2px solid transparent;
  transition: background-color var(--v1-dur-micro) var(--v1-ease-lift),
              border-left-color var(--v1-dur-short) var(--v1-ease-lift),
              transform var(--v1-dur-short) var(--v1-ease-lift);
}
.cmp__row:hover {
  background: var(--v1-surface);
  border-left-color: var(--v1-accent);
  transform: translateX(var(--v1-space-2));
}
.cmp__row.is-current { background: var(--v1-surface); border-left-color: var(--v1-ink); }
.cmp__meta { display: grid; gap: 2px; }
.cmp__name { font-size: var(--v1-text-base); font-weight: 600; }
.cmp__sub {
  font-size: var(--v1-text-xs); color: var(--v1-ink-3);
  font-family: "Pretendard", sans-serif;   /* 메타는 항상 산세리프 — 판독 우선 */
}
.cmp__tag {
  font-size: var(--v1-text-xs); color: var(--v1-accent);
  border: 1px solid var(--v1-accent); padding: 0 var(--v1-space-2);
  justify-self: start; margin-top: var(--v1-space-1);
}
/* 제목 표본 — 56px 고정. 폰트 비교가 목적이므로 크기를 바꾸지 않는다 */
.cmp__title {
  font-size: 56px; line-height: 1.14; letter-spacing: -0.026em;
  color: var(--v1-ink);
}
.cmp--body .cmp__row { align-items: start; }
.cmp__body {
  font-size: var(--v1-text-base);
  color: var(--v1-ink-2);
  max-width: 46ch;
}
@media (max-width: 860px) {
  .cmp__row { grid-template-columns: 1fr; gap: var(--v1-space-3); }
  .cmp__title { font-size: 40px; }
}

/* ── 무게 단계 ─────────────────────────────────────────────────────────────*/
.ladder { display: grid; gap: 0; border-top: 1px solid var(--v1-ink); }
.ladder__row {
  display: grid; grid-template-columns: 7em minmax(0, 1fr);
  gap: var(--v1-space-5); align-items: baseline;
  padding: var(--v1-space-4) 0;
  border-bottom: 1px solid var(--v1-border-soft);
  text-decoration: none; color: inherit;
  border-left: 2px solid transparent;
  transition: background-color var(--v1-dur-micro) var(--v1-ease-lift),
              border-left-color var(--v1-dur-short) var(--v1-ease-lift);
}
.ladder__row:hover { background: var(--v1-surface); border-left-color: var(--v1-accent); }
.ladder__row.is-current { background: var(--v1-surface); border-left-color: var(--v1-ink); }
.ladder__w {
  font-family: "Pretendard", sans-serif;
  font-size: var(--v1-text-sm); color: var(--v1-ink-3);
  font-variant-numeric: tabular-nums;
}
.ladder__t { font-size: 40px; line-height: 1.2; letter-spacing: -0.022em; }
@media (max-width: 700px) { .ladder__t { font-size: 28px; } }

/* 좁은 폭 어절 분리 확인 블록 */
.narrowcheck {
  max-width: 34ch; margin-top: var(--v1-space-5);
  border-left: 1px solid var(--v1-border);
  padding-left: var(--v1-space-5);
  display: grid; gap: var(--v1-space-4);
}

/* ══ 비교용 표시 배지 ══════════════════════════════════════════════════════
 * 어느 조합을 보고 있는지 화면에서 알 수 있어야 한다.
 * 확정 후 이 파일을 지우면 함께 사라진다. */
.fontbadge {
  position: fixed; right: 0; bottom: 0; z-index: 300;
  display: grid; gap: var(--v1-space-1);
  padding: var(--v1-space-3) var(--v1-space-4);
  background: var(--v1-ink); color: var(--v1-paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5;
  max-width: 46vw;
  /* 콘텐츠를 가리지 않게 반투명 + 호버 시 불투명.
   * 배지가 커져서(합성 여부·가진 weight 추가) 본문을 덮는 문제가 있었다. */
  opacity: .82;
  transition: opacity var(--v1-dur-micro) var(--v1-ease-lift);
}
.fontbadge:hover { opacity: 1; }
/* hidden 속성은 display 선언에 덮인다 — 위의 display:grid 가 이겨서
 * 숨겨지지 않는다. 명시적으로 되돌린다(폼 요약 패널과 같은 함정). */
.fontbadge[hidden] { display: none; }
/* 히어로 컨트롤은 좌측 하단 — 두 배지가 겹치지 않는다 */
.fontbadge--h1 { right: auto; left: 0; }
.fontbadge__h {
  color: var(--v1-border);
  border-bottom: 1px solid color-mix(in srgb, var(--v1-border) 40%, transparent);
  padding-bottom: 2px; margin-bottom: 2px;
  letter-spacing: 0.06em;
}
.fontbadge b { color: var(--v1-on-image); font-weight: 700; }
.fontbadge a { color: var(--v1-border); text-decoration: underline; }
.fontbadge a:hover { color: var(--v1-on-image); }
.fontbadge__dim { color: var(--v1-ink-3); }
.fontbadge__warn { color: var(--v1-accent-raw); }
.fontbadge__row { display: flex; gap: var(--v1-space-3); flex-wrap: wrap; align-items: baseline; }
/* 축 라벨 — 후보가 11종이라 그룹을 표시해야 읽힌다 */
.fontbadge__row > i {
  font-style: normal; color: var(--v1-ink-3);
  flex: 0 0 2.4em; letter-spacing: 0.04em;
}
.fontbadge__h--2 { margin-top: var(--v1-space-2); }
.fontbadge__note {
  color: var(--v1-border); font-size: 10px; line-height: 1.4;
  padding-top: 2px;
}
.fontbadge__note b { color: var(--v1-on-image); }
/* 모바일 CTA 바(≤420px)와 겹치지 않게 위로 올린다 */
@media (max-width: 420px) {
  .fontbadge { bottom: 76px; max-width: 100vw; left: 0; right: 0; }
  .fontbadge--h1 { bottom: 176px; }
}
@media print { .fontbadge { display: none; } }