/* 같은 인물, 여섯 가지 재질. 색과 장식은 히어로 경계 안에서만 바뀐다. */
.hero {
  background: var(--paper);
  color: var(--ink);
  --focus: 2px solid var(--ink);
}
.hero .hero-art { position: absolute; inset: 0; bottom: var(--hero-art-bottom, 30%); z-index: 0; pointer-events: none; overflow: hidden; }
.hero .topbar { gap: var(--s2); }
/* 하단 텍스트의 반응선. 레이아웃과 링크의 히트 영역은 고정한다. */
.hero .ledger dt, .hero .ledger .role { position: relative; transform-origin: center; }
.hero .ledger dt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.16em; height: var(--hair); background: currentColor; pointer-events: none; transform: scaleX(var(--response-fill, 0)); transform-origin: left; }
.hero .ledger dt::after { top: -0.12em; bottom: auto; }
.hero .motion-btn { min-width: var(--control); }
.style-next { appearance: none; display: flex; align-items: center; gap: var(--s2); min-height: var(--control); padding: var(--s1) 0; margin-left: var(--s4); border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--meta); cursor: pointer; }
.style-next[hidden], .style-label[hidden] { display: none; }
.style-count { color: var(--ink-2); font-family: var(--font-mono); }
.style-label { min-width: 7.5em; text-align: left; }
.style-arrow { transition: transform var(--dur-1) var(--ease); font-size: var(--step-1); }
.style-next:hover .style-arrow { transform: translateX(4px); }
.hero .style-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--line); z-index: 2; }
.style-progress > span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
/* v4: 순환은 놀이터(?style·?cycle)에서만. 메인에서는 진행 막대가 의미 없는 장식이 된다 */
.hero:not([data-playground="true"]) .style-progress { display: none; }
.hero:not([data-style="particles"]) canvas.fx { display: none; }
.hero:not([data-style="particles"]) canvas.fx.is-on ~ .name h1 > :is(.ko, .en) { color: var(--ink); }

/* 렌더러는 첫 프레임을 그린 뒤에만 DOM 이름의 페인트를 넘겨받는다. */
.hero canvas.material-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; }
.hero canvas.material-fx.is-on { opacity: 1; }
.hero.is-material .hero-art { visibility: hidden; }
.hero.is-material .name h1 > :is(.ko,.en), .hero.is-material canvas.fx.is-on ~ .name h1 > :is(.ko,.en) { color: transparent; text-shadow: none; }
.hero .motion-btn { min-width: 6em; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); }
.hero .motion-btn::before { content: 'Ⅱ'; font-family: var(--font-mono); font-size: var(--meta); }
.hero .motion-btn[aria-pressed="false"]::before { content: '▷'; }
.hero .motion-btn:disabled { cursor: default; }
/* WebGL 없음·로딩·감소 모션에서도 읽을 수 있는 재질을 유지한다. */
/* 폴백은 같은 팔레트의 DOM 활자를 유지한다. 독립 장식 도형은 쓰지 않는다. */
.hero[data-style="cyber"] .name h1 > :is(.ko,.en) { text-shadow: 1px 0 var(--hero-secondary),-1px 0 var(--hero-signal); }
.hero[data-style="kitsch"] .name h1 > :is(.ko,.en) { text-shadow: 3px 2px var(--hero-signal); }
.hero[data-style="soft"] .name h1 > :is(.ko,.en) { text-shadow: -1px -1px var(--hero-highlight),2px 3px 5px var(--hero-shadow); }
.hero.is-material .name h1 > :is(.ko,.en) { color: transparent; text-shadow: none; }
@media (max-width: 60rem) {
  .style-next { margin-left: 0; gap: var(--s1); }
  .hero .topbar { column-gap: var(--s2); row-gap: 0; }
  .hero .topbar-right { margin-left: auto; }
}
@media (max-width: 32rem) {
  .hero[data-playground="true"] .topbar-right { width: 100%; justify-content: flex-end; }
  .style-next { margin-left: auto; }
  .hero .topbar { align-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-art * { animation: none; }
  .style-arrow { transition: none; }
}
@media (forced-colors: active) {
  .hero .hero-art, .hero canvas, .style-progress { display: none; }
  .hero canvas.fx.is-on ~ .name h1 > :is(.ko, .en) { color: CanvasText; text-shadow: none; }
}