@charset "utf-8";
/* 스크롤 비트 엔진 — 레퍼런스 x-on.kr 실측 재현 (2026-09-06, 라이브 DOM)
   ★ 실측 상수 — 바꾸면 레퍼런스 대조가 깨진다
     설계판  가로 1600×900 / 세로 높이 1080 기준, 폭=1080/r (r=vh/vw 1.55~2.45, 폭 400~620)
     패딩    상하 DH×10%(가로)·6%(세로) / 좌우 DW×4.5%(가로)·6%(세로)
     per     화면당 스크롤 가로 2.4 · 세로 1.2
     진행도  pN = (scrollTop/총스크롤) × (N − 0.4)
     페이드  IN 가로 0.20·세로 0.65 / HOLD 가로 0.80·세로 0.35
     세로이동 나가는 장 −ease×DH×0.34 / 들어오는 장 +ease×DH×0.34
     스냅    html.snapon { scroll-snap-type: y proximity }

   v4 변경 : 지면이 화이트다. 비트는 기본 흰 바탕이고,
   사진이 깔리거나(.beat--shot) 임팩트가 필요한 장(.beat--nv)만 네이비로 간다.
   겹쳐 쌓인 장이라 배경색은 장 자신이 들고 있어야 크로스페이드가 자연스럽다. */

html.snapon{scroll-snap-type:y proximity;scroll-behavior:auto}

.track{position:relative}
.snaps{position:absolute;inset:0;z-index:0;pointer-events:none}
.snaps i{position:absolute;left:0;width:1px;height:1px;display:block;scroll-snap-align:start}

.viewport{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.stage{position:relative;z-index:2;flex:none;width:var(--dw,1600px);height:var(--dh,900px);transform:scale(var(--k,1));transform-origin:center center}

/* ★ pointer-events 는 beats.js 가 매 프레임 관리한다.
   장 11개가 같은 자리에 겹쳐 있어서, 여기서 none 을 풀면 맨 마지막 장이
   안 보이는 채로 위에 덮여 앞 장의 링크를 전부 삼킨다.
   반대로 none 인 채로 두면 보이는 장의 링크도 안 눌린다 (2026-09-06 버그).
   그래서 "지금 화면에 선 장 하나만" auto 로 만든다. */
.beat{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;justify-content:center;padding:var(--padY,90px) var(--padX,72px);will-change:opacity,transform}
.beat.is-mid{align-items:center;text-align:center}
.beat.is-top{justify-content:flex-start}

/* 설계판이 화면보다 살짝 작을 때 생기는 레터박스까지 색이 차도록 넉넉히 흘린다.
   .viewport 가 overflow:hidden 이라 밖으로는 안 넘친다. */
.beat--nv::before,.beat--shot::before{content:'';position:absolute;inset:-50vmax;z-index:-3;display:block}
.beat--nv::before{background:var(--nv)}
.beat--shot::before{background:#0A1024}
/* 어두운 장 안에서는 잉크와 강조색을 통째로 갈아끼운다.
   ★ --navy 까지 바꿔야 한다. 안 그러면 .lock__b, .eyebrow 처럼
   var(--navy) 로 칠해진 것들이 어두운 배경에 네이비로 찍혀 안 보인다
   (2026-09-06 실물 확인 — 1번 장의 'DCF FULFILLMENT' 가 이렇게 묻혔다). */
.beat--nv,.beat--shot{
  color:var(--nv-ink);
  --ink:var(--nv-ink);
  --ink-2:var(--nv-ink-2);
  --ink-3:var(--nv-ink-3);
  --line:var(--nv-line);
  --line-2:var(--nv-line-2);
  --navy:var(--accent);
}

.beat__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.34}
.beat__veil{position:absolute;inset:-50vmax;z-index:-1;background:linear-gradient(180deg,rgba(10,16,36,.42),rgba(10,16,36,.88))}

.b-h{font-size:76px;font-weight:800;line-height:1.16;letter-spacing:-.035em;text-wrap:balance;margin:0}
.b-h em{font-style:normal;color:var(--navy)}
.beat--nv .b-h em,.beat--shot .b-h em{color:var(--accent)}
.b-h .thin{font-weight:300;color:var(--ink-2)}
.beat--nv .b-h .thin,.beat--shot .b-h .thin{color:var(--nv-ink-2)}
.b-sub{margin-top:26px;font-size:22px;line-height:1.95;color:var(--ink-2);max-width:30em}
.beat--nv .b-sub,.beat--shot .b-sub{color:var(--nv-ink-2)}
.beat.is-mid .b-sub{margin-left:auto;margin-right:auto}
.b-note{margin-top:22px;font-size:var(--fs-body-s);line-height:1.92;color:var(--ink-3)}
.beat--nv .b-note,.beat--shot .b-note{color:var(--nv-ink-3)}

/* ══ 고정 UI ══ */
.hud{position:fixed;z-index:40;pointer-events:none}
.hud--bar{left:0;right:0;top:0;height:3px;background:rgba(18,20,28,.10)}
.hud--bar i{display:block;height:100%;width:0;background:var(--navy);transition:width .12s linear}
.hud--cue{right:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.2vw,28px);font-family:var(--f-brand);font-size:14px;letter-spacing:.18em;color:var(--ink-3);font-variant-numeric:tabular-nums;background:rgba(255,255,255,.72);padding:5px 11px;border-radius:100px;backdrop-filter:blur(6px)}
.hud--cue b{color:var(--navy);font-weight:600}
.beatnav{position:fixed;z-index:40;left:clamp(12px,1.6vw,22px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:11px}
.beatnav button{width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.beatnav i{width:7px;height:7px;border-radius:50%;background:rgba(18,20,28,.24);display:block;transition:all .3s var(--ease-io)}
.beatnav button[aria-current="true"] i{background:var(--navy);width:7px;height:22px;border-radius:4px}
@media (max-width:860px){.beatnav{display:none}}

/* 어두운 장 위에서는 고정 UI도 뒤집는다. beats.js 가 body[data-tone] 을 갱신한다. */
body[data-tone="dark"] .hud--bar{background:rgba(255,255,255,.14)}
body[data-tone="dark"] .hud--bar i{background:var(--accent)}
body[data-tone="dark"] .hud--cue{color:var(--nv-ink-3);background:rgba(11,18,48,.55)}
body[data-tone="dark"] .hud--cue b{color:var(--accent)}
body[data-tone="dark"] .beatnav i{background:rgba(255,255,255,.28)}
body[data-tone="dark"] .beatnav button[aria-current="true"] i{background:var(--accent)}
body[data-tone="dark"] .topbar__back,body[data-tone="dark"] .topbar .lock__a{color:var(--nv-ink)}
body[data-tone="dark"] .topbar .lock__b{color:var(--accent)}
body[data-tone="dark"] .topbar.is-solid{background:rgba(11,18,48,.86)}

/* 상단 바는 화면 폭을 가로지르는 고정 요소라, 막대 자체가 클릭을 먹으면
   그 아래 띠에 있는 것들이 안 눌린다. 막대는 통과시키고 안의 링크만 받는다. */
.topbar{position:fixed;z-index:45;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,3vw,40px);transition:transform .8s var(--ease-io),background .4s linear;pointer-events:none}
.topbar > *{pointer-events:auto}
.topbar.is-hidden{transform:translateY(-104%)}
.topbar.is-solid{background:rgba(255,255,255,.90);backdrop-filter:blur(10px)}
.topbar__back{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-cap);color:var(--ink-2)}
.topbar__back:hover{color:var(--navy)}

/* ══ 도해 공통 ══ */
.figbox{width:100%;display:block}
.dash{stroke-dasharray:5 7;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.pulse{animation:pulse 2.6s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:.26;r:26}50%{opacity:.05;r:44}}
@media (prefers-reduced-motion:reduce){.dash,.pulse{animation:none}.pkts{display:none}}

/* ══ 모션 해제 — 비트를 일반 문서 흐름으로. 텍스트는 두 모드에서 동일하다 ══ */
.nomotion .viewport{position:static;height:auto;overflow:visible;display:block;background:none}
.nomotion .stage{width:auto;height:auto;transform:none;display:block}
.nomotion .track{height:auto!important}
.nomotion .snaps,.nomotion .hud,.nomotion .beatnav{display:none}
.nomotion .beat{position:relative;inset:auto;opacity:1!important;visibility:visible!important;pointer-events:auto;min-height:auto;padding:clamp(56px,9vw,112px) clamp(20px,5vw,72px);border-bottom:1px solid var(--line)}
.nomotion .beat--nv::before,.nomotion .beat--shot::before{inset:0}
.nomotion .beat__veil{inset:0}
.nomotion .b-h{font-size:clamp(28px,5.4vw,58px)}
.nomotion .b-sub{font-size:clamp(16px,1.8vw,20px)}
@media print{.viewport{position:static!important;height:auto!important;overflow:visible!important}}