/* 3D 무대 — html.webgl 일 때만 적용. 없으면 site.css 의 정적 배치 그대로. */
html.webgl .top{position:fixed;background:linear-gradient(180deg,rgba(10,11,14,.7),rgba(10,11,14,0))}
html.webgl .stage-wrap{position:relative;height:calc(var(--stage-len,6.82) * 100lvh)}
html.webgl .stage-sticky{position:sticky;top:0;height:100dvh;min-height:520px;overflow:hidden;isolation:isolate}
html.webgl .stage-bg{position:absolute;inset:0;z-index:0}
html.webgl .stage-bg picture{position:absolute;inset:0;top:36%}
html.webgl #gl{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease-2)}
html.webgl .gl-ready #gl{opacity:1}
html.webgl .gl-ready picture,html.webgl .gl-ready .sweep{display:none}
html.webgl .gl-failed picture{transform:scale(1.04)}
html.webgl .stage-bg .veil{opacity:var(--veil,1);transition:none;background:linear-gradient(180deg,rgba(10,11,14,.92) 0%,rgba(10,11,14,.62) 34%,rgba(10,11,14,0) 60%)}
html.webgl .stage-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 60%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
html.webgl .dip{position:absolute;inset:0;z-index:2;background:var(--bg);opacity:0;pointer-events:none}
/* 카피 블록: 전부 겹쳐 두고 opacity 로만 보여 준다(접근성 트리엔 전부 남음) */
html.webgl .blk{position:absolute;inset:0;z-index:3;margin:0;max-width:none;padding:calc(64px + 5svh) var(--gutter) 0;opacity:0;pointer-events:none;will-change:opacity,transform;display:block}
html.webgl .blk.is-on{pointer-events:auto}
html.webgl .blk .inner{max-width:560px}
html.webgl .blk.hero{padding-top:calc(64px + 7svh)}
html.webgl .blk.statement{padding-top:calc(64px + 5svh)}
html.webgl .blk .lede{margin:0;font-size:clamp(21px,3.1vw,34px)}
html.webgl .blk.compare{display:block}
html.webgl .blk.compare .inner{display:grid;gap:18px;max-width:560px}
html.webgl .blk.compare .compare-copy p{margin-top:12px}
html.webgl .blk.compare .board-in{padding:16px 16px 12px}
html.webgl .blk.compare .quotes li{padding:8px 0}
html.webgl .blk.compare .board-head{padding-bottom:10px}
html.webgl .blk.compare .board-foot{padding-top:10px}
html.webgl .blk.how .steps{margin-top:22px;gap:18px}
html.webgl .blk.how .steps p{font-size:15px;line-height:1.55}
html.webgl .blk.promise .rows{margin-top:20px}
html.webgl .blk.promise .rows>div{padding:14px 0}
html.webgl .blk.promise .rows dd{font-size:15px;line-height:1.55}
html.webgl .blk.cta p{margin-top:16px;max-width:44ch;color:var(--fg-2);line-height:1.7}
html.webgl .blk.cta .hero-actions{margin-top:26px}
html.webgl .bar{display:none}
html.webgl body:has(.blk.statement.is-on,.blk.compare.is-on,.blk.how.is-on,.blk.promise.is-on) .bar{display:block}
@media (orientation:portrait){html.webgl .blk.compare .board-foot{display:none}}
@media (max-height:740px){html.webgl .blk.compare .compare-copy p{display:none}}
@media (min-width:960px){
  html.webgl .stage-bg picture{top:0}
  html.webgl .stage-bg .veil{background:linear-gradient(90deg,rgba(10,11,14,.9) 0%,rgba(10,11,14,.55) 34%,rgba(10,11,14,0) 62%)}
  html.webgl .blk{display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter)}
  html.webgl .blk .inner{max-width:520px}
  html.webgl .blk.hero{padding-top:0}
  html.webgl .blk .lede{max-width:560px;font-size:clamp(24px,2.3vw,32px)}
  html.webgl .blk.compare{justify-content:flex-start;padding-top:12vh}
  html.webgl .blk.compare .inner{max-width:1120px;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  html.webgl .blk.how .inner,html.webgl .blk.promise .inner{max-width:700px}
  html.webgl .blk.how .steps{grid-template-columns:1fr 1fr;padding:0 0 0 40px;margin-top:28px}
  html.webgl .blk.how .steps::before,html.webgl .blk.how .steps::after{left:12px;top:10px;width:1px;height:calc(100% - 20px)}
  html.webgl .blk.how .steps::after{height:calc((100% - 20px) * var(--p,0))}
  html.webgl .blk.how .steps .n{left:-40px;top:0}
  html.webgl .bar{display:none}
  html.webgl body:has(.blk.statement.is-on,.blk.compare.is-on,.blk.how.is-on,.blk.promise.is-on) .bar{display:block}
}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* 개발용 */
html.webgl .lil-gui{z-index:60}
@media (prefers-reduced-motion:reduce){html.webgl #gl{transition:none}}