/* ===========================================================================
   랜딩 — 깊이 있는 별빛과 성운 위의 편집형 타이틀
   장식 금지: 그라데이션 텍스트, 알약 버튼, 발광 아이콘 박스, 그라데이션 카운터.
   =========================================================================== */

.hero { position: relative; height: 1400vh; background: var(--space-bg); }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 680px;
  display: flex; align-items: center; overflow: hidden;
}
#warp { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* 밝은 별빛은 오른쪽에 열어두고, 활자 뒤와 본문 경계만 감쇠한다. */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--veil-opacity, 1);
  background:
    linear-gradient(90deg, rgba(var(--space-rgb), .88), rgba(var(--space-rgb), .5) 38%, rgba(var(--space-rgb), 0) 72%),
    linear-gradient(0deg, var(--bg-0), rgba(var(--space-rgb), 0) 28%, rgba(var(--space-rgb), .12) 80%, rgba(var(--space-rgb), .5));
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5);
  will-change: transform, opacity;
  transform-origin: 30% 50%;
}
.hero-block { max-width: var(--space-copy-width); padding: var(--sp-8) 0; }

.hero-kicker {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--space-muted);
  margin-bottom: var(--sp-5);
}
.hero-kicker .live {
  width: 6px; height: 6px; flex: none; background: var(--accent);
}

.hero h1 {
  font-size: var(--space-display);
  font-weight: 600; letter-spacing: -.055em; line-height: 1.22;
  word-break: keep-all;
  margin-bottom: var(--sp-5);
  color: var(--space-text);
}
.hero h1 .line { display: block; }
.hero h1 .line-2 { color: var(--space-muted); }

.hero-sub {
  font-size: 1rem; color: var(--space-muted); max-width: 43ch; word-break: keep-all;
  margin: 0 0 var(--sp-6);
}
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* 통계: 괘선으로 나눈 표. 그라데이션 숫자 없음 */
.hero-stats {
  display: flex; flex-wrap: wrap;
  margin-top: var(--sp-7);
  border-top: 1px solid var(--rule);
  max-width: 560px;
}
.hstat {
  flex: 1 1 0; min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
}
.hstat + .hstat { border-left: 1px solid var(--rule); padding-left: var(--sp-4); }
.hstat b {
  display: block;
  font-family: var(--mono); font-size: var(--space-stat-size); font-weight: 500;
  letter-spacing: -.02em; color: var(--fg-0);
}
.hstat span {
  font-family: var(--mono); font-size: var(--fs-micro);
  color: var(--space-muted); letter-spacing: .1em; text-transform: uppercase;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono); font-size: var(--fs-micro);
  color: var(--space-muted); letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .3s var(--ease);
}
.scroll-cue span { display: inline-block; margin-left: var(--sp-3); }
.flight-skip {
  position: absolute; left: var(--sp-5); bottom: var(--sp-4); z-index: 2;
  padding: var(--sp-3); font-size: var(--fs-xs); color: var(--space-muted);
  background: rgba(var(--space-rgb), .6);
  border: 1px solid var(--rule-strong); border-radius: var(--r-1);
}
.flight-skip:hover { color: var(--space-text); }
.motion-toggle {
  position: absolute; right: var(--sp-5); bottom: var(--sp-4); z-index: 2;
  padding: var(--sp-3); background: rgba(var(--space-rgb), .6);
  border: 1px solid var(--rule-strong); border-radius: var(--r-1);
  color: var(--space-muted); font-size: var(--fs-xs); cursor: pointer;
}
.motion-toggle:hover { color: var(--space-text); border-color: var(--space-muted); }
.motion-toggle:disabled { cursor: default; opacity: .7; }
.scroll-cue:focus-visible, .motion-toggle:focus-visible, .flight-skip:focus-visible {
  outline: 2px solid var(--accent); outline-offset: var(--sp-1);
}
#latest { scroll-margin-top: var(--sp-8); }

/* ------------------------------------------------------------- 본문 */
.after-hero { position: relative; z-index: 3; background: var(--bg-0); }

/* 분류 축 목록 */
.axis-block + .axis-block { margin-top: var(--sp-6); }
.axis-block-head {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.constellation { display: flex; flex-wrap: wrap; gap: 0; }
.const-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 0; margin-right: var(--sp-5);
  font-size: var(--fs-sm); color: var(--fg-1);
  transition: color var(--dur) var(--ease);
}
.const-chip::before {
  content: ""; width: 8px; height: 8px; flex: none; background: var(--c, var(--fg-3));
}
.const-chip:hover { color: var(--fg-0); }
.const-chip b {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3); font-weight: 400;
}

/* 연도 분포
   주의: 막대 높이를 %로 주면 부모 높이가 content 기준이라 붕괴한다.
   높이는 JS가 px로 계산해 넣고, 여기서는 열 구조만 잡는다. */
.yearchart { border-top: 1px solid var(--rule); padding-top: var(--sp-4); }
.yearbars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 168px; padding-bottom: 1px;
  border-bottom: 1px solid var(--rule);
}
.yearbar {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  cursor: default;
}
.yearbar .val {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3);
  text-align: center; margin-bottom: 4px; line-height: 1;
  white-space: nowrap;
}
.yearbar .bar {
  width: 100%; background: var(--fg-3); min-height: 2px;
  transition: background var(--dur) var(--ease);
}
.yearbar:hover .bar { background: var(--accent); }
.yearbar:hover .val { color: var(--fg-0); }
.yearlabels { display: flex; gap: 3px; margin-top: 6px; }
.yearlabels span {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--fg-3);
}

/* 하단 */
.foot {
  border-top: 1px solid var(--rule); margin-top: var(--sp-7);
  padding: var(--sp-6) 0 var(--sp-8);
  color: var(--fg-3); font-size: var(--fs-xs);
}
.foot a { color: var(--fg-2); border-bottom: 1px solid var(--rule-strong); }

@media (max-width: 720px) {
  .hero { height: 1100vh; }
  .hero-sticky { min-height: 740px; }
  .hero-block { max-width: none; }
  .hero-inner { transform-origin: 50% 50%; }
  .hero h1 { max-width: 12ch; }
  .hero-veil {
    background: linear-gradient(0deg, var(--bg-0), rgba(var(--space-rgb), .8) 24%, rgba(var(--space-rgb), .5) 70%, rgba(var(--space-rgb), .12));
  }
  .hero-stats { max-width: none; }
  .hstat { padding-right: var(--sp-2); }
  .hstat + .hstat { padding-left: var(--sp-2); }
  .scroll-cue { left: var(--sp-5); bottom: var(--sp-8); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-sticky { position: relative; }
  .hero-inner { transform: none !important; opacity: 1 !important; visibility: visible !important; }
}