/*
 * 인생 진행률 — 디자인 장르: 스위스 타이포그래피 · 정보 디자인
 * 검정 + 흰색 + 포인트 1색. 거대한 숫자(잘려 나가게), 헤어라인, 연차보고서 같은 라벨.
 */
:root {
  --brand: #ff4b1f;
  --brand-pressed: #e23a12;
  --brand-soft: #2a120b;
  --brand-on: #0a0a0a;

  --font-display: "Gothic A1", "Archivo", var(--font-sans);

  /* 장식 전용 */
  --art-num: "Archivo Black", "Archivo", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --art-black: #070707;
  --art-white: #f4f4f1;
  --art-hair: rgba(244, 244, 241, 0.18);
  --art-dot-left: #2b2b2b;
  --art-dot-idle: #53534f;
  --art-dot-mid: #9a9a95;
  --art-spring: linear(0, 0.068, 0.239, 0.465, 0.702, 0.917, 1.087, 1.203, 1.263, 1.274, 1.246, 1.194, 1.13, 1.065, 1.009, 0.966, 0.938, 0.926, 0.926, 0.936, 0.951, 0.969, 0.986, 1.001, 1.012, 1.018, 1.021, 1.02, 1.017, 1.012, 1.007, 1.003, 0.999, 0.996, 0.995, 0.994, 1);
  --art-spring-soft: linear(0, 0.048, 0.167, 0.322, 0.488, 0.645, 0.783, 0.895, 0.98, 1.038, 1.074, 1.091, 1.095, 1.088, 1.076, 1.061, 1.045, 1.031, 1.018, 1.008, 1.001, 0.995, 0.992, 0.991, 0.991, 0.992, 0.993, 0.995, 0.996, 0.997, 0.999, 0.999, 1, 1.001, 1.001, 1.001, 1);
  --art-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  background: var(--art-black);
  color: var(--art-white);
}
.topbar {
  background: var(--art-black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--art-white);
}
.topbar__brand { font: 900 16px/1 var(--font-display); letter-spacing: -0.02em; }
.topbar__meta { margin-left: auto; font: 600 12px/1 var(--art-num); letter-spacing: 0.08em; color: var(--color-text-secondary); }

/* 버튼: 각지게, 누르면 눌렸다 튄다 */
.btn { border-radius: var(--r-0); transition: transform 520ms var(--art-spring), background var(--dur-fast); }
.btn--lg { border-radius: var(--r-0); }
.btn--sm { border-radius: var(--r-0); }
.btn:active:not(:disabled):not(.is-loading) { transform: scale(0.94); transition-duration: 70ms; }
.btn--outline { --_bg: transparent; --_bd: var(--art-white); --_fg: var(--art-white); }
.btn--ghost { --_fg: var(--art-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.input { border-radius: var(--r-0); background: transparent; border-color: var(--art-hair); }
.chip { border-radius: var(--r-0); background: transparent; border-color: var(--art-hair); color: var(--art-white); }

/* ---------- 인트로 ---------- */
.intro__brand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-8) 0 var(--sp-10);
  border-bottom: 1px solid var(--art-white);
}
.intro__name { font: 900 18px/1 var(--font-display); letter-spacing: -0.03em; }
.intro__fig { font: 600 11px/1 var(--art-num); letter-spacing: 0.14em; color: var(--color-text-secondary); }
.intro__stage { min-height: 400px; overflow: hidden; align-items: stretch; justify-content: stretch; }
.ip-canvas { position: absolute; inset: 0; }
.ip-overlay { position: absolute; inset: 0; pointer-events: none; }
.intro__steps { justify-content: flex-start; gap: var(--sp-4); margin: var(--sp-12) 0; }
.intro__steps span { width: 24px; height: 2px; border-radius: 0; background: var(--art-hair); }
.intro__steps span.is-on { width: 24px; background: var(--brand); }
.intro__caption { text-align: left; min-height: 92px; }
.intro .fade-swap { animation: none; }
.intro__caption .t-title-02 { font: 900 30px/38px var(--font-display); letter-spacing: -0.04em; }
.intro__caption p { color: var(--color-text-secondary); animation: wipe 700ms var(--ease-out) 240ms both; }
.friend-note { margin: 0; color: var(--color-text-secondary); }

.kin { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kin > i {
  display: inline-block;
  font-style: normal;
  animation: kin-in 720ms var(--art-spring) both;
  animation-delay: calc(var(--k) * 26ms);
}
@keyframes kin-in {
  0% { transform: translateY(105%) skewY(8deg); font-weight: 400; }
  100% { transform: none; }
}
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

/* 인트로 오버레이: 도표 아래 칸을 거대한 숫자로 채운다 */
.ip-overlay { display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--ip-top, 280px); }
.ip-count { display: flex; flex-direction: column; }
.ip-count .odo { font: 900 min(120px, calc(var(--ip-room, 220px) * 0.62)) / 1 var(--art-num); letter-spacing: -0.06em; margin-left: -0.04em; --odo-h: 0.84em; }
.ip-count--one .odo { font-size: min(170px, calc(var(--ip-room, 220px) * 0.74)); color: var(--brand); --odo-h: 0.82em; }
.ip-label { display: block; margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--art-white); font: 600 12px/16px var(--art-num); letter-spacing: 0.08em; color: var(--color-text-secondary); }
.ip-label b { color: var(--art-white); font-family: var(--font-display); letter-spacing: 0; }
.ip-count--one { flex-direction: row; align-items: flex-end; gap: var(--sp-16); }
.ip-count--one .ip-label { margin: 0 0 var(--sp-12); padding: 0 0 0 var(--sp-16); border-top: 0; border-left: 2px solid var(--brand); font: 700 14px/20px var(--font-display); letter-spacing: -0.02em; clip-path: inset(0 100% 0 0); animation: wipe 600ms var(--ease-out) 500ms both; }
.ip-count--one .ip-label b { display: block; margin-bottom: var(--sp-6); font: 900 34px/1 var(--art-num); letter-spacing: -0.04em; }
.ip-pct { display: flex; align-items: flex-start; margin-left: -6px; }
.ip-pct .odo { font: 900 min(140px, calc(var(--ip-room, 220px) * 0.6)) / 1 var(--art-num); letter-spacing: -0.06em; color: var(--brand); --odo-h: 0.82em; }
.ip-pct sup { margin-left: var(--sp-4); font: 900 36px/1 var(--art-num); color: var(--brand); }
.ip-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: var(--sp-12) 0 0;
  border-top: 1px solid var(--art-white);
  font: 600 12px/16px var(--font-display);
  color: var(--color-text-secondary);
  clip-path: inset(0 100% 0 0);
  animation: wipe 600ms var(--ease-out) 700ms both;
}
.ip-split span { padding-top: var(--sp-8); }
.ip-split span + span { padding-left: var(--sp-12); border-left: 1px solid var(--art-hair); }
.ip-split b { display: block; font: 900 28px/1 var(--art-num); letter-spacing: -0.04em; color: var(--art-white); margin-bottom: var(--sp-4); }
.ip-rows { margin: 0; padding: 0; list-style: none; }
.ip-rows li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-10) 0 var(--sp-8);
  font: 700 15px/20px var(--font-display);
  clip-path: inset(0 100% 0 0);
  animation: wipe 520ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 140ms + 120ms);
}
.ip-rows li > span:first-child { display: inline-flex; align-items: center; gap: var(--sp-8); }
.ip-rows li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--art-white);
  transform-origin: left;
  animation: rule 700ms var(--art-spring-soft) both;
  animation-delay: calc(var(--i) * 140ms);
}
.ip-rows b { font: 900 min(44px, calc(var(--ip-room, 220px) * 0.16)) / 1 var(--art-num); letter-spacing: -0.04em; --odo-h: 0.9em; }
.ip-rows small { font: 600 12px var(--art-num); color: var(--color-text-secondary); margin: 0 var(--sp-4); }
.ip-key { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--brand); }
.ip-key--mid { background: var(--art-dot-mid); }
.ip-key--band { width: 10px; height: 14px; border-radius: var(--r-0); background: color-mix(in srgb, var(--brand) 60%, transparent); }
@keyframes rule {
  from { transform: scaleX(0); }
}
.ip-tag {
  position: absolute;
  padding: var(--sp-4) var(--sp-8);
  background: var(--brand);
  color: var(--brand-on);
  font: 800 12px/16px var(--font-display);
  animation: pop 600ms var(--art-spring) both;
}
@keyframes pop {
  0% { transform: scale(0.2); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* 오도미터 */
.odo { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.odo__col { display: inline-block; height: var(--odo-h, 1em); line-height: var(--odo-h, 1em); overflow: hidden; }
.odo__strip {
  display: flex;
  flex-direction: column;
  transition: transform 1250ms var(--art-spring);
  transition-delay: calc(var(--i) * 65ms);
}
.odo__strip span { display: block; height: var(--odo-h, 1em); line-height: var(--odo-h, 1em); }
.odo.is-on .odo__strip { transform: translateY(calc((var(--d) + 10) * var(--odo-h, 1em) * -1)); }
.odo__ch { display: inline-block; height: var(--odo-h, 1em); line-height: var(--odo-h, 1em); }

/* ---------- 본문 ---------- */
.main { padding-bottom: var(--sp-24); }
.sec { padding: var(--sp-24) 0 var(--sp-32); border-top: 1px solid var(--art-white); }
.sec:first-child { border-top: 0; }
.sec__head { display: flex; align-items: baseline; gap: var(--sp-12); margin-bottom: var(--sp-20); }
.sec__no { font: 800 12px/1 var(--art-num); letter-spacing: 0.1em; color: var(--brand); }
.sec__title { margin: 0; font: 900 22px/28px var(--font-display); letter-spacing: -0.04em; }
.sec__tag { margin-left: auto; font: 600 12px/1 var(--art-num); letter-spacing: 0.06em; color: var(--color-text-secondary); }
.foot { margin: var(--sp-8) 0 0; font: var(--caption-01); color: var(--color-text-secondary); }

/* 생년월일: 밑줄 하나짜리 큰 입력칸 */
.birth .field__label { color: var(--color-text-secondary); font: 600 11px/14px var(--art-num); letter-spacing: 0.14em; }
.birth__input {
  width: 100%;
  min-height: 64px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--art-white);
  border-radius: 0;
  background: transparent;
  color: var(--art-white);
  font: 800 38px/1 var(--art-num);
  letter-spacing: -0.02em;
  outline: none;
}
.birth__input::placeholder { color: var(--art-dot-left); }
.birth__input:focus { border-bottom-color: var(--brand); }
.birth.is-error .birth__input { border-bottom-color: var(--color-danger); }
.asof { margin-top: var(--sp-12); }
.asof summary { font: var(--label-02); cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; gap: var(--sp-4); }
.asof__row { margin-top: var(--sp-4); }

/* 거대한 숫자 */
.giant {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: var(--sp-24) calc(var(--gutter) * -1) 0;
  overflow: hidden;
}
.giant__num {
  font: 900 230px/0.8 var(--art-num);
  letter-spacing: -0.07em;
  margin-left: -0.05em;
  --odo-h: 0.8em;
}
.giant__pre,
.giant__unit { font: 900 28px/1 var(--font-display); letter-spacing: -0.03em; padding-top: var(--sp-6); }
.giant__pre { position: absolute; left: var(--gutter); top: calc(var(--sp-8) * -1); color: var(--brand); }
.giant__num { padding-top: var(--sp-24); }
.giant__unit { margin-left: var(--sp-4); padding-top: var(--sp-32); }
.giant--pct .giant__num { font-size: 168px; color: var(--art-white); padding-top: 0; }
.giant--pct .giant__unit { font: 900 44px/1 var(--art-num); color: var(--brand); padding-top: var(--sp-2); }
.giant__meta { margin: var(--sp-12) 0 0; font: 600 12px/16px var(--art-num); letter-spacing: 0.06em; color: var(--color-text-secondary); }

/* 연차보고서 표 */
.rows { margin: var(--sp-24) 0 0; }
.rows > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-12);
  align-items: baseline;
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--art-hair);
}
.rows > div:last-child { border-bottom: 1px solid var(--art-hair); }
.rows dt { font: var(--body-03); color: var(--color-text-secondary); }
.rows dt sup { font: 600 10px var(--art-num); letter-spacing: 0.08em; color: var(--brand); }
.rows dd { margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: var(--sp-2); }
.rows dd b { font: 800 26px/1 var(--art-num); letter-spacing: -0.03em; }
.rows dd small { font: var(--caption-01); color: var(--color-text-tertiary); max-width: 220px; }

.bday-banner {
  display: flex;
  gap: var(--sp-12);
  align-items: flex-start;
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--sp-16) var(--gutter);
  background: var(--brand);
  color: var(--brand-on);
  animation: banner 700ms var(--art-spring) both;
}
.bday-banner p { margin: 0; }
.bday-banner__no { font: 900 40px/0.9 var(--art-num); letter-spacing: -0.04em; }
@keyframes banner {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-12px); }
  to { clip-path: inset(0); transform: none; }
}

/* 진행률 */
.pbar { position: relative; height: 2px; margin-top: var(--sp-16); background: var(--art-hair); }
.pbar span { position: absolute; left: 0; top: -1px; bottom: -1px; background: var(--brand); transition: width 1200ms var(--art-spring-soft); }
.life-ctl { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); margin-top: var(--sp-24); }
.seg { display: flex; border: 1px solid var(--art-white); }
.seg__btn {
  min-width: 48px;
  min-height: var(--tap-min);
  border: 0;
  border-left: 1px solid var(--art-white);
  background: transparent;
  color: var(--art-white);
  font: 800 15px/1 var(--font-display);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.seg__btn:first-child { border-left: 0; }
.seg__btn[aria-selected="true"] { background: var(--art-white); color: var(--art-black); }
.stepper { display: flex; align-items: center; gap: var(--sp-4); }
.stepper .btn { min-height: var(--tap-min); width: var(--tap-min); }
.stepper__val { display: flex; align-items: baseline; gap: var(--sp-2); }
.stepper__val input {
  width: 64px;
  border: 0;
  border-bottom: 1px solid var(--art-white);
  background: transparent;
  color: var(--art-white);
  text-align: center;
  font: 800 22px/32px var(--art-num);
  outline: none;
}
.stepper__val span { font: var(--label-02); color: var(--color-text-secondary); }

.grid-wrap { margin: var(--sp-20) 0 0; }
.life-grid { width: 100%; cursor: crosshair; touch-action: manipulation; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-16); margin-top: var(--sp-12); font: var(--caption-01); color: var(--color-text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-6); }
.lg { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full); }
.lg--lived { background: var(--art-white); }
.lg--left { background: var(--art-dot-left); }
.lg--now { background: var(--brand); }
.lg--goal { border: 1.5px solid var(--brand); }

/* 숫자 블록 (연차보고서 핵심 지표) */
.figs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-16); }
.fig {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-12) 0 var(--sp-20);
  border-top: 1px solid var(--art-white);
  min-width: 0;
}
.fig__no { font: 600 10px/12px var(--art-num); letter-spacing: 0.14em; color: var(--color-text-tertiary); }
.fig__v { display: flex; align-items: baseline; gap: var(--sp-4); font: 900 40px/1 var(--art-num); letter-spacing: -0.05em; --odo-h: 1em; white-space: nowrap; }
.fig__v small { font: 800 14px/1 var(--font-display); letter-spacing: -0.02em; }
.fig__v em { font: 600 12px/1 var(--font-display); font-style: normal; color: var(--color-text-secondary); }
.fig__k { font: 700 14px/20px var(--font-display); }
.fig__s { font: var(--caption-01); color: var(--color-text-tertiary); }
.fig--accent .fig__v { color: var(--brand); }

.parents { margin-top: var(--sp-12); border-top: 1px solid var(--art-white); border-bottom: 1px solid var(--art-hair); }
.parents summary { min-height: 56px; display: flex; align-items: center; font: 800 16px/22px var(--font-display); cursor: pointer; }
.parents__body { padding-bottom: var(--sp-16); }
.parents__out { margin: 0; font: var(--body-02); }
.parents__out strong { font: 900 22px/1 var(--art-num); color: var(--brand); }

/* 이정표 */
.miles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--art-white); }
.mile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-12);
  align-items: baseline;
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--art-hair);
}
.mile__main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.mile__t { font: 800 17px/24px var(--font-display); letter-spacing: -0.02em; }
.mile__s { font: var(--caption-01); color: var(--color-text-tertiary); }
.mile__d { font: 800 20px/1 var(--art-num); letter-spacing: -0.02em; }
.mile.is-next .mile__t,
.mile.is-next .mile__d { color: var(--brand); }
.mile.is-past { opacity: 0.4; }
.mile__hot { margin-left: var(--sp-6); font: 600 10px var(--art-num); letter-spacing: 0.1em; color: var(--brand); vertical-align: super; }

/* 버킷리스트 */
.bucket__form { display: flex; gap: var(--sp-6); margin: var(--sp-16) 0 var(--sp-12); }
.bucket__age { width: 72px; flex: none; text-align: center; }
#bucketIdeas .chip { min-height: 40px; }
.bucket-list { list-style: none; margin: var(--sp-16) 0 0; padding: 0; border-top: 1px solid var(--art-white); }
.bk {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-12);
  min-height: 56px;
  border-bottom: 1px solid var(--art-hair);
}
.bk__check {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--art-white);
  background: transparent;
  color: var(--brand-on);
  font: 900 14px/1 var(--art-num);
  cursor: pointer;
  transition: transform 460ms var(--art-spring), background var(--dur-fast);
  position: relative;
}
.bk__check::after { content: ""; position: absolute; inset: -12px; }
.bk__check:active { transform: scale(0.8); transition-duration: 60ms; }
.bk.is-done .bk__check { background: var(--brand); border-color: var(--brand); }
.bk__t { font: var(--body-02); min-width: 0; overflow-wrap: anywhere; }
.bk.is-done .bk__t { text-decoration: line-through; color: var(--color-text-tertiary); }
.bk__age { font: 700 13px/1 var(--art-num); color: var(--color-text-secondary); }
.bk-empty { padding: var(--sp-16) 0; }

@media (prefers-reduced-motion: reduce) {
  .kin > i,
  .ip-rows li,
  .ip-rows li::before,
  .ip-tag,
  .bday-banner { animation: none !important; clip-path: none !important; }
}

/* =========================================================
 * 2차 개편: 인덱스 탭 버튼, 연차보고서 본문
 * ========================================================= */

h1.intro__name { margin: 0; }

/* 시작 버튼: 색인 탭 + 큰 숫자 */
.idx-btn {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  min-height: 76px;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--art-white);
  background: transparent;
  color: var(--art-white);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.idx-btn__tab {
  display: flex;
  align-items: flex-end;
  min-width: 88px;
  padding: var(--sp-8) var(--sp-10);
  background: var(--brand);
  color: var(--brand-on);
  font: 900 44px/0.78 var(--art-num);
  letter-spacing: -0.05em;
  transition: min-width 520ms var(--art-spring);
}
.idx-btn__body { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); min-width: 0; padding: var(--sp-12) var(--sp-16); }
.idx-btn__body b { font: 900 19px/24px var(--font-display); letter-spacing: -0.03em; }
.idx-btn__body small { font: 600 11px/14px var(--art-num); letter-spacing: 0.06em; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx-btn__arrow { align-self: center; padding-right: var(--sp-4); font: 900 30px/1 var(--art-num); transition: transform 520ms var(--art-spring); }
.idx-btn:active .idx-btn__tab { min-width: 108px; transition-duration: 90ms; }
.idx-btn:active .idx-btn__arrow { transform: translateX(10px); transition-duration: 90ms; }
.intro .idx-btn__tab { animation: tab-in 820ms var(--art-spring) 300ms both; }
@keyframes tab-in {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0); }
}

/* 다른 페이지로 가는 색인 링크 */
.idx-link {
  display: flex;
  align-items: stretch;
  gap: var(--sp-12);
  min-height: 56px;
  margin-top: var(--sp-20);
  border-top: 1px solid var(--art-white);
  color: var(--art-white);
  font: 800 15px/20px var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.idx-link > span:last-child { align-self: center; flex: 1; }
.idx-link__no {
  display: grid;
  place-items: center;
  width: 48px;
  background: var(--art-white);
  color: var(--art-black);
  font: 900 22px/1 var(--art-num);
  transition: width 520ms var(--art-spring);
}
.idx-link:active .idx-link__no { width: 64px; transition-duration: 90ms; }

/* 생년월일 한 줄 요약 */
.sum-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-16); margin: var(--sp-20) 0 0; border-top: 1px solid var(--art-white); }
.sum-row > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-8); padding: var(--sp-10) 0; min-width: 0; border-bottom: 1px solid var(--art-hair); }
.sum-row dt { font: 600 10px/14px var(--art-num); letter-spacing: 0.08em; color: var(--color-text-tertiary); }
.sum-row dd { margin: 0; font: 900 17px/22px var(--font-display); letter-spacing: -0.03em; white-space: nowrap; }
.sum-row > div:first-child dd { color: var(--brand); }

/* ---------- SEO: 연차보고서 도표 ---------- */
.report { color: var(--art-white); }
.report__head { padding-top: var(--sp-12); margin-bottom: var(--sp-24); border-top: 2px solid var(--art-white); }
.report__kicker { font: 600 11px/14px var(--art-num); letter-spacing: 0.14em; color: var(--brand); }
.seo .report__title { margin: var(--sp-8) 0 var(--sp-4); font: 900 28px/34px var(--font-display); letter-spacing: -0.04em; color: var(--art-white); }
.seo .report__meta { margin: 0; font: 600 11px/16px var(--art-num); letter-spacing: 0.04em; color: var(--color-text-secondary); }
.report__fig { margin: 0 0 var(--sp-32); }
.report__fig figcaption { padding: var(--sp-8) 0; font: var(--caption-01); color: var(--color-text-secondary); }
.report__fig figcaption b { margin-right: var(--sp-6); font: 800 11px/1 var(--art-num); letter-spacing: 0.1em; color: var(--art-white); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--art-white); border-bottom: 1px solid var(--art-hair); }
.kpis > div { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-12) var(--sp-8) var(--sp-16) 0; min-width: 0; }
.kpis b { font: 900 32px/0.9 var(--art-num); letter-spacing: -0.05em; color: var(--art-white); white-space: nowrap; }
.kpis > div:first-child b { color: var(--brand); }
.kpis small { font-size: 16px; }
.kpis span { font: var(--caption-01); color: var(--color-text-tertiary); }
.data { width: 100%; border-collapse: collapse; border-top: 1px solid var(--art-white); }
.data th,
.data td { padding: var(--sp-10) 0; border-bottom: 1px solid var(--art-hair); text-align: left; vertical-align: baseline; }
.data thead th { padding: var(--sp-8) 0; font: 600 10px/14px var(--art-num); letter-spacing: 0.12em; color: var(--color-text-tertiary); border-bottom: 1px solid var(--art-white); }
.data tbody th { font: 700 14px/20px var(--font-display); color: var(--art-white); }
.data td { padding-left: var(--sp-8); font: 800 15px/20px var(--art-num); letter-spacing: -0.02em; color: var(--art-white); white-space: nowrap; }
.data thead th:not(:first-child),
.data td { text-align: right; }
.data td.data__how { font: var(--caption-01); color: var(--color-text-tertiary); white-space: normal; letter-spacing: 0; }
/* 자주 묻는 것: 보고서 뒤쪽 용어 색인 (용어 ······ 참조 그림) */
.gloss { border-top: 2px solid var(--art-white); }
.seo .gloss__title { display: flex; align-items: baseline; gap: var(--sp-12); margin: 0; padding: var(--sp-10) 0 var(--sp-8); font: 800 15px/20px var(--font-display); letter-spacing: -0.02em; color: var(--art-white); }
.gloss__title span { font: 600 11px/14px var(--art-num); letter-spacing: 0.14em; color: var(--brand); }
.seo details.gloss__item { padding: 0; border: 0; border-top: 1px solid var(--art-hair); }
.gloss__item summary {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
  min-height: 60px;
  padding: var(--sp-10) 0;
  list-style: none;
  cursor: pointer;
}
.gloss__item summary::-webkit-details-marker { display: none; }
.gloss__term { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.gloss__term b { font: 900 19px/24px var(--font-display); letter-spacing: -0.04em; color: var(--art-white); transition: color var(--dur-fast); }
.gloss__term small { font: 600 12px/16px var(--font-display); color: var(--color-text-tertiary); }
.gloss__item summary i { flex: 1; min-width: var(--sp-16); margin-bottom: var(--sp-6); border-bottom: 2px dotted var(--art-hair); }
.gloss__ref { flex: none; margin-bottom: var(--sp-2); font: 800 12px/16px var(--art-num); letter-spacing: 0.08em; color: var(--color-text-secondary); white-space: nowrap; }
.gloss__item[open] .gloss__term b,
.gloss__item[open] .gloss__ref { color: var(--brand); }
.seo .gloss__item p {
  margin: 0 0 var(--sp-16);
  padding-left: var(--sp-12);
  border-left: 2px solid var(--brand);
  font: 600 14px/22px var(--font-display);
  color: var(--art-white);
  clip-path: inset(0 100% 0 0);
}
.gloss__item[open] p { animation: wipe 520ms var(--ease-out) both; }

/* 하단 추천: SEE ALSO 색인 (그림 번호 이어 매기기) */
.more-sites { padding-top: var(--sp-24); }
.more-sites__title { display: flex; align-items: baseline; gap: var(--sp-12); margin: 0; padding: var(--sp-10) 0 var(--sp-10); border-top: 2px solid var(--art-white); opacity: 1; font: 900 18px/24px var(--font-display); letter-spacing: -0.03em; color: var(--art-white); }
.sa__k { font: 600 11px/14px var(--art-num); letter-spacing: 0.14em; color: var(--brand); }
.more-sites__item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  column-gap: var(--sp-12);
  row-gap: var(--sp-2);
  align-items: center;
  min-height: 76px;
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--art-hair);
  color: var(--art-white);
  text-decoration: none;
  transition: background var(--dur-fast), padding 420ms var(--art-spring);
}
.more-sites__item::after { content: "↗"; grid-column: 3; grid-row: 1 / 3; font: 900 20px/1 var(--art-num); color: var(--art-white); }
.more-sites__item:active { padding-left: var(--sp-8); background: var(--art-white); color: var(--art-black); transition-duration: 80ms; }
.more-sites__item:active .more-sites__name,
.more-sites__item:active::after { color: var(--art-black); }
.sa__fig { grid-row: 1 / 3; display: flex; flex-direction: column; font: 900 40px/0.9 var(--art-num); letter-spacing: -0.05em; color: var(--brand); }
.sa__fig small { font: 600 10px/14px var(--art-num); letter-spacing: 0.14em; color: var(--color-text-tertiary); }
.more-sites__name { grid-column: 2; align-self: end; font: 900 17px/22px var(--font-display); letter-spacing: -0.03em; color: var(--art-white); }
.more-sites__desc { grid-column: 2; align-self: start; opacity: 1; font: 600 12px/16px var(--art-num); letter-spacing: 0.02em; color: var(--color-text-secondary); }

/* 인트로 캡션: 제목 + 회색 부제 대신, 도표 아래 그림 설명(figure caption) */
.intro__caption p { padding-top: var(--sp-6); border-top: 1px solid var(--art-hair); font: 600 12px/18px var(--art-num); letter-spacing: 0.02em; }
.intro__caption p::before { content: "FIG. — "; color: var(--brand); letter-spacing: 0.1em; }