/* ROR Labs — 3D 내 위험 태양계: 캔버스 레이어, 히어로 무대, 챕터 인트로, 3D 위 유리 카드, 챕터 바.
   캔버스·라벨은 클릭을 받지 않는다. 콘텐츠는 그 위(z-index:1).
   html.r3d      = 3D 켜짐(유리 카드)   html.r3d-lowfx = 폰·저사양(블러 없음, 더 불투명)
   html.no3d     = WebGL 없음(정지 포스터, 원래의 불투명 카드) */
#ror3d,#ror3d-labels{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#ror3d-labels{z-index:2}   /* above the page so planet labels can be tapped; each label turns pointer-events on only while visible */
#ror3d{opacity:0}
/* deep-space backdrop behind the scene: dark mode only (JS turns it on); light mode keeps the page's own lavender tone */
#ror3d-space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(1200px 700px at 18% 42%,#2A1F5E 0%,rgba(42,31,94,0) 60%),
    radial-gradient(900px 520px at 85% 20%,#14306B 0%,rgba(20,48,107,0) 65%),
    linear-gradient(160deg,#0B0A22 0%,#0A0E2E 45%,#070818 100%)}
html.no3d #ror3d-space{display:none}
#ror3d-space .comet{position:absolute;top:-4%;left:100%;width:180px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(210,225,255,.9));transform-origin:100% 50%;
  animation:ror-comet 12s linear infinite}
#ror3d-space .comet.c2{animation-duration:15s;animation-delay:6s;top:12%;width:130px}
@keyframes ror-comet{0%{opacity:0;transform:translate3d(0,0,0) rotate(-24deg)}
  2%{opacity:1}14%{opacity:0;transform:translate3d(-62vw,28vw,0) rotate(-24deg)}100%{opacity:0;transform:translate3d(-62vw,28vw,0) rotate(-24deg)}}
@media (prefers-reduced-motion:reduce){#ror3d-space .comet{display:none}}
#ror3d canvas{display:block;width:100%;height:100%}
html.no3d #ror3d,html.no3d #ror3d-labels{display:none}
body>header,body>section,body>.ticker,body>footer{position:relative;z-index:1}
body>section[id],body>header{scroll-margin-top:72px}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

/* ---------- hero */
.hero{background:none}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 78%,transparent) 38%,transparent 60%)}
.hero .wrap{min-height:calc(100svh - 64px - 42px)}
.hero-stage{position:relative;height:min(62vh,560px);min-height:320px}
.hero-stage .poster{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s ease}
html.r3d-on .hero-stage .poster{opacity:0}
.stage-cap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:10px;align-items:center;
  white-space:nowrap;font-size:13px;font-weight:500;color:var(--muted);background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:8px 14px;margin:0}
.stage-cap i{width:10px;height:10px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px var(--navy-soft);flex:none}

/* ---------- labels projected from the scene */
.r3-lbl{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;will-change:transform,opacity}
.r3-lbl.mod{font-size:12px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 9px;box-shadow:0 2px 8px rgba(40,30,90,.10)}
button.r3-lbl.mod{font-family:inherit;line-height:1.4;cursor:pointer;margin:0;-webkit-tap-highlight-color:transparent}
button.r3-lbl.mod::after{content:"";position:absolute;inset:-10px -4px}   /* ~44px tap target */
button.r3-lbl.mod:hover{border-color:var(--navy);color:var(--navy)}
button.r3-lbl.mod:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.r3-lbl.mod em{font-style:normal;font-weight:600;color:var(--navy)}
.r3-lbl.mod .short{display:none}
#ror3d-labels.narrow .r3-lbl.mod{font-size:11px;padding:2px 7px}
#ror3d-labels.narrow .r3-lbl.mod .full{display:none}
#ror3d-labels.narrow .r3-lbl.mod .short{display:inline}
.r3-lbl.me{text-align:center;line-height:1}
.r3-lbl.me b{display:block;font:800 30px/1 Sora,var(--kr,Inter),sans-serif;letter-spacing:-.04em;color:var(--ink)}
.r3-lbl.me small{display:block;margin-top:5px;font-size:11px;font-weight:700;color:var(--navy);letter-spacing:0}
/* over deep space: quiet, light-on-dark labels */
#ror3d-labels.space .r3-lbl.mod{color:#F2EEFF;background:rgba(12,10,32,.5);border-color:rgba(179,162,255,.28);box-shadow:none}
#ror3d-labels.space .r3-lbl.mod em{color:#C9B8FF}
#ror3d-labels.space button.r3-lbl.mod:hover{border-color:#C9B8FF;color:#fff}
#ror3d-labels.space .r3-lbl.me b{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
#ror3d-labels.space .r3-lbl.me small{color:#E8DFFF}

/* ---------- name tags hanging under the hero planets (name, then %) */
.r3-lbl.tag{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 3px;margin:0;background:none;border:0;border-radius:8px;
  font:inherit;line-height:1.15;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.r3-lbl.tag::after{content:"";position:absolute;inset:-8px -4px}   /* bigger tap target */
.r3-lbl.tag b{font-size:12px;font-weight:700}
.r3-lbl.tag em{font-style:normal;font-size:11px;font-weight:600;color:var(--navy)}
.r3-lbl.tag:hover b{color:var(--navy)}
.r3-lbl.tag:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#ror3d-labels.narrow .r3-lbl.tag b{font-size:11px}
#ror3d-labels.narrow .r3-lbl.tag em{font-size:10px}
#ror3d-labels.space .r3-lbl.tag{color:#F2EEFF}
#ror3d-labels.space .r3-lbl.tag em{color:#C9B8FF}

/* ---------- chapter intro bands: title on glass, the 3D subject shows at .spot */
body>.chap-intro{position:relative;z-index:1;min-height:72vh;display:flex;align-items:center}
.chap-intro .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;width:100%}
.chap-intro .txt{max-width:470px;padding:24px 26px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.chap-intro h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;margin-top:8px}
.chap-intro p{color:var(--muted);margin-top:10px}
.chap-intro .spot{height:56vh}
html.no3d body>.chap-intro{min-height:0;padding:48px 0 24px}
html.no3d .chap-intro .spot{display:none}
html.no3d .chap-intro .txt{background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- section content as glass cards over the scene */
html.r3d{--card:color-mix(in srgb,var(--surface) 84%,transparent);--card-line:color-mix(in srgb,var(--line) 80%,transparent)}
html.r3d .tile:not(.t-score),html.r3d .post,html.r3d .future,html.r3d .honest .col,
html.r3d .sec-head>div:first-child,html.r3d .studio .controls,html.r3d .app .wrap>div:first-child,html.r3d footer .wrap{
  background:var(--card);border:1px solid var(--card-line);box-shadow:var(--shadow)}
html.r3d .sec-head>div:first-child,html.r3d .studio .controls,html.r3d .app .wrap>div:first-child{border-radius:22px;padding:20px 22px}
html.r3d footer .wrap{border-radius:18px;padding:16px 20px}
html.r3d .app{background:transparent;border-color:transparent}
html.r3d .ticker{background:var(--card)}
html.r3d:not(.r3d-lowfx) .tile:not(.t-score),html.r3d:not(.r3d-lowfx) .post,html.r3d:not(.r3d-lowfx) .future,
html.r3d:not(.r3d-lowfx) .honest .col,html.r3d:not(.r3d-lowfx) .sec-head>div:first-child,html.r3d:not(.r3d-lowfx) .studio .controls{
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* phones / older devices: no blur over a moving canvas (costly); lean on opacity instead */
html.r3d-lowfx{--card:color-mix(in srgb,var(--surface) 90%,transparent)}
html.r3d-lowfx .nav,html.r3d-lowfx .chap,html.r3d-lowfx .chap-intro .txt,html.r3d-lowfx .stage-cap{
  -webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--surface) 93%,transparent)}

/* ---------- chapter bar */
.chap{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;
  display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);max-width:calc(100vw - 24px)}
.chap a{min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.chap a:hover{color:var(--ink)}
.chap a.on{background:var(--navy);color:#fff}
.chap a:focus-visible{outline:3px solid var(--accent);outline-offset:1px}

/* ---------- phones & tablets: the scene comes first, the headline + main button sit on a card below it */
@media (max-width:960px){
  .hero::before{display:none}
  .hero .wrap{display:flex;flex-direction:column;min-height:0;padding-top:0;gap:0}
  .hero-stage{order:-1;align-self:stretch;height:50svh;min-height:300px;max-height:520px}
  .hero .wrap>div:not(.hero-stage){display:flex;flex-direction:column;margin-top:-6px;padding:18px 18px 20px;border-radius:24px;
    background:var(--card,var(--surface));border:1px solid var(--line);box-shadow:var(--shadow)}
  .hero .eyebrow{order:0}
  .hero h1{order:1;font-size:clamp(26px,7.4vw,34px)}
  .hero .cta{order:2;margin-top:16px}
  .hero .lead{order:3;font-size:15px;margin-top:16px}
  .hero .proof{order:4}
  body>.chap-intro{min-height:0;padding:28px 0 0}
  .chap-intro .wrap{grid-template-columns:1fr;gap:0}
  .chap-intro .spot{height:42vh}
}
@media (max-width:480px){
  .chap a{padding:0 10px;font-size:12px}
  .stage-cap{font-size:12px;white-space:normal;text-align:left;width:max-content;max-width:calc(100vw - 32px)}
  .hero .cta .btn{padding:11px 16px;font-size:14px}
  .hero .cta .btn-accent{flex:1 1 100%;justify-content:center}
}