/* MIRACLE AD AI — 시각 언어 v2
   ═══════════════════════════════════════════════════════════════════════════
   대표가 준 레퍼런스 둘을 합쳤다(2026-08-20).
     · Active Theory v4  → 장면 전환 · 거대 아웃라인 타이포 · 입자 · 유리 재질
     · motion.ai 스펙    → 다크 글래스모피즘 카드 · CSS 3D 아이소메트릭 · 발광 아이콘
   공통 언어: 아주 어두운 남보라 바탕 · 발광이 정보를 나른다 · 3D 가 화면의 주인공.

   ⛔장식으로 빛나지 않는다. 색과 빛은 **상태**다 —
     초록=지키는 중 · 노랑=검토 · 장미=부정클릭 · 시안=우리 행동.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --void:#030308;                      /* 히어로 바닥 — 가장 깊은 곳(Cripton) */
  --dark:#0B0A1A; --dark-2:#0F0E22;
  --card:rgba(255,255,255,.03); --card-hi:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10); --line-hi:rgba(255,255,255,.20);
  --ink:#F5F5FA; --gray:#9CA3AF;
  /* ⚠`#6B7280` 은 이 바탕(#0B0A1A)에서 **4.05:1** 이라 기준(4.5)에 못 미쳤다.
     9쪽 202곳이 전부 이 한 값이었다 — 색은 여기서만 정하니 여기서만 고치면 된다.
     `#767E8D` = 4.79:1. 파란기를 살짝 남겨 청록 강조와 같은 계열로 둔다. */
  --gray-2:#767E8D;
  --cyan:#22d3ee; --cyan-6:#06b6d4; --blue-6:#2563eb;
  --green:#10b981; --yellow:#facc15; --blue:#3b82f6; --rose:#f43f5e; --violet:#a78bfa;
  --wrap:1280px;
  --sp:clamp(72px,10vw,150px);
  --gut:clamp(20px,4vw,32px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;overflow-x:hidden;background:var(--dark);color:var(--ink);
  font-family:"Inter","Gothic A1",system-ui,sans-serif;
  font-size:16px;line-height:1.75;word-break:keep-all;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(58% 46% at 6% -4%,rgba(88,28,135,.34) 0%,transparent 62%),
    radial-gradient(62% 52% at 102% 100%,rgba(23,37,84,.46) 0%,transparent 64%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

::selection{background:var(--cyan);color:#04141a}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:#26263c;border:2px solid var(--dark);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#39395a}
html{scrollbar-color:#26263c var(--dark);scrollbar-width:thin;caret-color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* 주변 형상 — 클릭을 통과시킨다 */
.amb{position:fixed;pointer-events:none;z-index:0;filter:blur(2px)}
.amb.tr{top:-260px;right:-260px;width:800px;height:800px;transform:rotate(45deg);
  background:linear-gradient(180deg,rgba(30,58,138,.20),transparent 70%)}
.amb.bl{bottom:-220px;left:-220px;width:600px;height:600px;transform:rotate(-45deg);
  background:linear-gradient(180deg,rgba(88,28,135,.20),transparent 70%)}

/* ── 글자 ───────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0 0 .5em;letter-spacing:-.03em;line-height:1.14;font-weight:700;text-wrap:balance}
h1{font-size:clamp(32px,5.4vw,62px);letter-spacing:-.038em}
h2{font-size:clamp(26px,3.8vw,46px)}
h3{font-size:clamp(17px,1.7vw,19px);letter-spacing:-.018em;font-weight:600}
p{margin:0 0 1em;max-width:66ch;color:#C7C7D4;line-height:1.75}
b,strong{font-weight:700;color:var(--ink)}
.muted,.sub{color:var(--gray)}
.wrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* 거대 아웃라인 타이포 — Active Theory 의 문법. 배경을 가로지른다. */
.ghost{position:absolute;left:0;right:0;pointer-events:none;z-index:1;
  font-weight:700;letter-spacing:-.05em;line-height:.86;text-transform:uppercase;
  font-size:clamp(64px,15vw,220px);color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.075);white-space:nowrap;overflow:hidden}

/* ── 유리 표면 ──────────────────────────────────────────────────────────── */
.glass{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  backdrop-filter:blur(12px);padding:22px}
.glass.hi{background:var(--card-hi);border-color:var(--line-hi)}

/* ── 등장 — 오른쪽에서 차례로(스태거) ──────────────────────────────────── */
[data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rise].in{opacity:1;transform:none}
[data-slide]{opacity:0;transform:translateX(32px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-slide].in{opacity:1;transform:none}

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:.75rem;border:1px solid var(--line-hi);
  background:rgba(255,255,255,.05);color:var(--ink);text-decoration:none;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  transition:background .3s var(--ease),border-color .3s var(--ease),
             transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.btn.p,.btn.run{border:none;color:#fff;
  background:linear-gradient(90deg,var(--cyan),var(--blue-6));
  box-shadow:0 0 20px rgba(6,182,212,.4)}
.btn.p:hover,.btn.run:hover{box-shadow:0 0 32px rgba(6,182,212,.62);transform:translateY(-4px)}
.btn.lg{padding:16px 34px;font-size:15.5px}
.btn.g{background:rgba(255,255,255,.05)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.42;pointer-events:none}

/* ── 머리글 ─────────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:60;background:rgba(11,10,26,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.hd .in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:20px;height:66px}
.hd .logo{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:700;letter-spacing:-.02em;font-size:15px;white-space:nowrap}
.hd .logo i{width:9px;height:9px;border-radius:9999px;background:var(--cyan);
  box-shadow:0 0 14px var(--cyan);animation:beat 2.6s var(--ease) infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}
.hd nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.hd nav::-webkit-scrollbar{display:none}
.hd nav a{padding:8px 13px;text-decoration:none;color:var(--gray);white-space:nowrap;
  font-size:13.5px;font-weight:500;border-radius:.5rem;transition:color .25s,background .25s}
.hd nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.hd nav a.on{color:var(--ink);background:rgba(255,255,255,.07)}
.hd .act{display:flex;gap:8px}
.hd .act .btn{padding:9px 16px;font-size:12.5px}
@media(max-width:1080px){.hd .act .btn.g{display:none}}
@media(max-width:820px){
  .hd .in{height:auto;flex-wrap:wrap;padding-top:11px;padding-bottom:3px;gap:12px}
  .hd nav{order:3;width:100%;margin:0;padding-bottom:5px}
  .hd .act{margin-left:auto}
  .hd .act .btn{padding:8px 13px;font-size:11.5px}
}

/* ── 바닥 ───────────────────────────────────────────────────────────────── */
footer{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.07);
  margin-top:var(--sp);padding:44px 0 60px;color:var(--gray);font-size:13px}
footer .fl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:22px}
footer .fl a{text-decoration:none;color:var(--gray)}
footer .fl a:hover{color:var(--ink)}
footer .biz{line-height:1.85;color:var(--gray-2)}
footer .cp{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;color:var(--gray-2)}

section{position:relative;padding:var(--sp) 0}
.sec-h{margin-bottom:clamp(30px,4vw,54px);max-width:44rem}
.sec-h p{color:var(--gray);font-size:clamp(15px,1.5vw,17px)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-rise],[data-slide]{opacity:1!important;transform:none!important}
}

/* ═══ 3D 순위 축(WebGL) 위에 글이 뜬다 ═══════════════════════════════════ */
/* ── 페이지별 히어로 그림 (08-21) ──────────────────────────────────────────
   전에는 WebGL 캔버스 한 장이 전 페이지 공통이었다 — 대표: "전부다 공통이자나".
   이제 `_scene(path)` 가 고른 그림 한 장이 그 페이지의 배경이다.
   ⭐그림은 **오른쪽에 주인공, 왼쪽은 빈 공간**으로 만들었다(STYLE_BIBLE 4번).
     그래서 글이 왼쪽에 앉아도 겹치지 않는다. 좁은 화면에서는 그 여유가 없으니
     `object-position` 을 오른쪽으로 밀어 주인공만 남긴다. */
.bgart{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgart img,.bgart video{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  display:block;opacity:.92}
/* ⭐홈이 아닌 쪽은 조금 옅게. 히어로가 한 화면도 안 되고 바로 카드·표가 나오는데
   그림이 진하면 글이 안 읽힌다(08-21: /bid 의 「과열되면 폭주한다」가 막대에 걸쳤다). */
body:not([data-scene=home]) .bgart img{opacity:.72}
/* ⚠08-21 대표: "모바일은 안한건가?" — 폰에서 그림이 **사실상 안 보였다.**
     opacity .40 에 세로 어둠막(.58→.92)까지 겹쳐 검은 화면과 구분이 안 됐다.
     폰이 우리 손님의 주 화면이다. 옅게 하는 게 아니라 **자리를 나눠야** 한다:
     그림은 위쪽에서 살아 있고, 글이 앉는 아래쪽만 눌러 준다. */
@media(max-width:860px){
  .bgart img,.bgart video{object-position:70% 38%;opacity:.95}
  body:not([data-scene=home]) .bgart img{opacity:.85}
}
/* 영상이 있으면 정지 그림은 숨는다. 움직임을 줄여 놓은 사람에겐 반대로. */
.bgart video ~ .still{display:none}
@media(prefers-reduced-motion:reduce){
  .bgart video{display:none}
  .bgart video ~ .still{display:block}
}
/* 스크롤하면 배경이 아주 천천히 물러난다 — 그림 한 장이 죽어 보이지 않게 */
.bgart img,.bgart video{transform:scale(1.06) translateY(calc(var(--bgy,0) * -1px));
  transition:transform .1s linear;will-change:transform}
#bg3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;pointer-events:none}
/* ⭐왼쪽(글 자리)을 세로로 한 번 더 눌러 대비를 만든다 — 그림이 아무리 어두워도
   흰 글씨가 밝은 부분 위에 걸치면 안 읽힌다. 오른쪽 주인공은 건드리지 않는다. */
.shade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,5,16,.86) 0%,rgba(5,5,16,.62) 34%,
    rgba(5,5,16,.10) 62%,transparent 82%)}
/* 폰 — 위 25% 는 그림이 그대로 보이고, 글이 시작되는 아래부터 눌러 준다.
   ⚠전에는 맨 위부터 .58 로 덮어 그림이 안 보였다(08-21). */
@media(max-width:860px){.shade::after{background:linear-gradient(180deg,
  rgba(5,5,16,.06) 0%,rgba(5,5,16,.20) 22%,rgba(5,5,16,.74) 46%,
  rgba(5,5,16,.93) 70%,rgba(5,5,16,.96) 100%)}}
.shade{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(11,10,26,.94) 0%,rgba(11,10,26,.62) 30%,
             rgba(11,10,26,.10) 52%,rgba(11,10,26,.30) 78%,rgba(11,10,26,.86) 100%)}
@media(max-width:900px){
  .shade{background:linear-gradient(180deg,rgba(11,10,26,.92) 0%,rgba(11,10,26,.66) 38%,
         rgba(11,10,26,.28) 62%,rgba(11,10,26,.9) 100%)}
}
html.no3d #bg3d,html.no3d .shade{display:none}

/* ═══ 히어로 ══════════════════════════════════════════════════════════════ */
.hero{min-height:clamp(600px,94vh,940px);display:flex;align-items:center;
      padding:clamp(30px,4vw,56px) 0}
.hero .in{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1.06fr .94fr;
          align-items:center;width:100%}
@media(max-width:980px){.hero .in{grid-template-columns:1fr}}
.hero .ghost{top:6%}
.hero h1{margin-bottom:.44em}
.hero h1 em{font-style:normal;
  background:linear-gradient(94deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(15px,1.6vw,18px);color:#C7C7D4;max-width:38ch;margin-bottom:0}
.hcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .note{margin-top:16px;font-size:12.5px;color:var(--gray-2);line-height:1.65;max-width:46ch}

/* 히어로 오른쪽 계기 — 유리판 */
.dials{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.dials .w{grid-column:1/-1}
.dial{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;
      backdrop-filter:blur(12px);padding:17px 18px}
.dial > span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
             text-transform:uppercase;color:var(--gray-2);margin-bottom:12px}
.cyc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cyc div{border-radius:.7rem;padding:13px 8px;text-align:center;
         background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.cyc div b{display:block;font-size:clamp(21px,2.7vw,30px);font-weight:700;letter-spacing:-.03em;
           line-height:1;color:#4B4B66;font-variant-numeric:tabular-nums}
.cyc div span{display:block;margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.1em;
              text-transform:uppercase;color:var(--gray-2)}
.cyc div.on{border-color:rgba(34,211,238,.42);background:rgba(34,211,238,.06);
            box-shadow:0 0 22px rgba(6,182,212,.2),inset 0 0 16px rgba(6,182,212,.09)}
.cyc div.on b{color:var(--cyan);text-shadow:0 0 18px rgba(34,211,238,.55)}
.cyc div.on span{color:#8FD9E8}
.dial .row{display:flex;align-items:center;gap:13px}
.dial .row b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em}
.dial .row small{display:block;font-size:12px;color:var(--gray-2);line-height:1.5}
.ring{flex:none;width:46px;height:46px;border-radius:9999px;position:relative;
      background:conic-gradient(var(--c,var(--cyan)) var(--p,72%),rgba(255,255,255,.06) 0);
      box-shadow:0 0 20px -4px var(--c,var(--cyan))}
.ring::after{content:"";position:absolute;inset:5px;border-radius:9999px;background:#12112A}

/* ═══ 아이소메트릭 무대(motion.ai 문법) ═════════════════════════════════ */
.stage{perspective:1200px;display:flex;justify-content:center;align-items:center;min-height:540px}
.iso{transform:rotateX(60deg) rotateZ(45deg);transform-style:preserve-3d;position:relative}
@media(max-width:1023px){.stage{min-height:440px}.iso{scale:.76}}
@media(max-width:560px){.stage{min-height:370px}.iso{scale:.58}}

.panel3{position:relative;width:262px;height:442px;border-radius:2.5rem;
  background:rgba(19,21,42,.9);border:2px solid rgba(6,182,212,.4);
  box-shadow:0 0 44px rgba(6,182,212,.26);transform-style:preserve-3d;padding:14px}
.under{position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none}
.under.c{left:4%;top:14%;width:220px;height:220px;background:rgba(6,182,212,.44);transform:translateZ(-72px)}
.under.b{left:28%;top:56%;width:236px;height:236px;background:rgba(37,99,235,.36);transform:translateZ(-94px)}
.screen3{position:relative;height:100%;border-radius:1.5rem;background:var(--dark);
  padding:20px;display:flex;flex-direction:column;gap:18px}

.donut{width:106px;height:106px;margin:2px auto 0;border-radius:9999px;transform:rotate(45deg);
  border:8px solid;border-top-color:var(--cyan-6);border-right-color:var(--green);
  border-bottom-color:var(--yellow);border-left-color:var(--blue);
  box-shadow:inset 0 0 18px rgba(6,182,212,.35),0 0 24px rgba(6,182,212,.2);position:relative}
.donut i{position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:9999px;
  background:#fff;box-shadow:0 0 12px rgba(255,255,255,.75)}

.minis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{border-radius:12px;padding:9px 10px 4px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05))}
.mini b{display:block;font-size:11px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mini span{display:block;font-size:9px;color:var(--gray-2);margin-bottom:4px}
.mini svg{display:block;width:100%;height:26px}

.bars{display:flex;flex-direction:column;gap:11px;margin-top:2px}
.bar span{display:block;font-size:9.5px;color:var(--gray-2);margin-bottom:5px}
.track{height:7px;border-radius:9999px;background:rgba(255,255,255,.05);overflow:hidden}
.track i{display:block;height:100%;border-radius:9999px}
.f1{width:75%;background:var(--cyan-6);box-shadow:0 0 10px rgba(6,182,212,.75)}
.f2{width:45%;background:var(--yellow);box-shadow:0 0 10px rgba(250,204,21,.7)}
.f3{width:90%;background:var(--blue);box-shadow:0 0 10px rgba(59,130,246,.75)}

.cube{position:absolute;width:44px;height:44px;transform-style:preserve-3d}
.cube .f{position:absolute;inset:0;backdrop-filter:blur(4px);border:1px solid}
.cube .top{transform:translateZ(var(--h))}
.cube .front{height:var(--h);transform:rotateX(-90deg);transform-origin:bottom}
.cube .right{width:var(--h);left:auto;right:0;transform:rotateY(90deg);transform-origin:right}
.cube .lbl{position:absolute;left:50%;top:50%;translate:-50% -50%;
  transform:translateZ(calc(var(--h) + 1px));font-size:10px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;color:#04141a}
.c1{--h:40px;left:-98px;top:104px;animation:floatZ 3.6s ease-in-out infinite}
.c2{--h:75px;left:-106px;top:212px;animation:floatZ 2.9s ease-in-out .4s infinite}
.c3{--h:120px;left:-94px;top:322px;animation:floatZ 4.4s ease-in-out .9s infinite}
.c1 .f{background:rgba(250,204,21,.22);border-color:rgba(250,204,21,.55)}
.c1 .top{background:rgba(250,204,21,.44);box-shadow:0 0 22px rgba(250,204,21,.55)}
.c2 .f{background:rgba(16,185,129,.22);border-color:rgba(16,185,129,.55)}
.c2 .top{background:rgba(16,185,129,.44);box-shadow:0 0 22px rgba(16,185,129,.55)}
.c3 .f{background:rgba(6,182,212,.22);border-color:rgba(6,182,212,.55)}
.c3 .top{background:rgba(6,182,212,.46);box-shadow:0 0 26px rgba(6,182,212,.62)}

.chip{position:absolute;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);box-shadow:0 10px 28px -12px #000}
.chip.one{right:-86px;top:64px;transform:translateZ(56px);animation:floatZSmall 2.5s ease-in-out infinite}
.chip.two{right:-74px;top:300px;transform:translateZ(40px);animation:floatZSmall 3.4s ease-in-out .6s infinite}
@keyframes floatZ{0%,100%{translate:0 0 0}50%{translate:0 0 50px}}
@keyframes floatZSmall{0%,100%{translate:0 0 0}50%{translate:0 0 25px}}

/* ═══ 기능 카드 ═══════════════════════════════════════════════════════════ */
.fcards{display:flex;flex-direction:column;gap:14px}
.fcard{display:flex;align-items:flex-start;gap:19px;padding:20px;border-radius:1.25rem;
  background:var(--card);border:1px solid var(--line);backdrop-filter:blur(12px);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
@media(min-width:640px){.fcard{align-items:center}}
.fcard.in:hover{background:var(--card-hi);border-color:var(--line-hi);transform:translateX(-12px)}
.ibox{flex:none;width:56px;height:56px;border-radius:.75rem;display:grid;place-items:center;border:1px solid}
.ibox svg{width:26px;height:26px;transition:transform .3s var(--ease)}
.fcard:hover .ibox svg{transform:scale(1.1)}
.fcard h3{margin:0 0 6px}
.fcard p{margin:0;color:var(--gray);font-size:14px;line-height:1.7}
.i-green{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.06);
  box-shadow:0 0 18px rgba(16,185,129,.22),inset 0 0 14px rgba(16,185,129,.12)}
.i-green svg{color:var(--green);filter:drop-shadow(0 0 6px rgba(16,185,129,.8))}
.i-yellow{border-color:rgba(250,204,21,.45);background:rgba(250,204,21,.06);
  box-shadow:0 0 18px rgba(250,204,21,.22),inset 0 0 14px rgba(250,204,21,.12)}
.i-yellow svg{color:var(--yellow);filter:drop-shadow(0 0 6px rgba(250,204,21,.8))}
.i-blue{border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.06);
  box-shadow:0 0 18px rgba(59,130,246,.22),inset 0 0 14px rgba(59,130,246,.12)}
.i-blue svg{color:var(--blue);filter:drop-shadow(0 0 6px rgba(59,130,246,.8))}
.i-rose{border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.06);
  box-shadow:0 0 18px rgba(244,63,94,.22),inset 0 0 14px rgba(244,63,94,.12)}
.i-rose svg{color:var(--rose);filter:drop-shadow(0 0 6px rgba(244,63,94,.8))}
.i-violet{border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.06);
  box-shadow:0 0 18px rgba(167,139,250,.22),inset 0 0 14px rgba(167,139,250,.12)}
.i-violet svg{color:var(--violet);filter:drop-shadow(0 0 6px rgba(167,139,250,.8))}

/* ═══ 격자 · 카드 · 요금 ═════════════════════════════════════════════════ */
.g3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  backdrop-filter:blur(12px);padding:26px 24px;
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.card:hover{background:var(--card-hi);border-color:var(--line-hi);transform:translateY(-5px)}
.card h3{margin:0 0 .5em}
.card p{margin:0;color:var(--gray);font-size:14.5px}
.card .n{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--gray-2);margin-bottom:12px}
.card.warn{border-color:rgba(244,63,94,.28)}
.card.warn .n{color:var(--rose)}

.tiers{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.tier{background:var(--card);border:1px solid var(--line);border-radius:1.4rem;
  backdrop-filter:blur(12px);padding:30px 26px;display:flex;flex-direction:column;gap:16px;
  transition:transform .45s var(--ease),border-color .45s var(--ease)}
.tier:hover{transform:translateY(-6px);border-color:var(--line-hi)}
.tier.hot{border-color:rgba(34,211,238,.42);box-shadow:0 0 46px -20px rgba(6,182,212,.75)}
.tier .tn{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-2)}
.tier.hot .tn{color:var(--cyan)}
.tier .tp{font-size:clamp(30px,3.6vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.tier .tp small{font-size:13px;font-weight:500;color:var(--gray-2);margin-left:7px;letter-spacing:0}
.tier .td{font-size:13.5px;color:var(--gray);margin:0}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.tier li{position:relative;padding-left:22px;font-size:14px;color:#C7C7D4;line-height:1.62}
.tier li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:6px;
  border-left:1.5px solid var(--cyan);border-bottom:1.5px solid var(--cyan);
  transform:rotate(-45deg);opacity:.85}
.tier .btn{width:100%}

/* 전환 상자 */
.cta{background:var(--card);border:1px solid var(--line-hi);border-radius:1.6rem;
  backdrop-filter:blur(14px);padding:clamp(34px,5vw,62px);text-align:center;
  box-shadow:0 0 80px -50px rgba(6,182,212,.9)}
.cta h2{margin-bottom:.36em}
.cta p{margin:0 auto 26px;color:var(--gray);max-width:50ch}
.cta .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* 수치 줄 — 운영 DB 에서 온 값만 */
.stats,.proofbar{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  backdrop-filter:blur(12px);padding:22px}
.stats > div,.proofbar > div,.pb{display:flex;flex-direction:column;gap:5px;padding:6px 10px}
.stats .v,.proofbar .v,.pb b{font-size:clamp(22px,2.6vw,31px);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--cyan);font-variant-numeric:tabular-nums;
  text-shadow:0 0 20px rgba(34,211,238,.35)}
.stats .k,.proofbar .k,.pb span{font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-2)}

/* 문답 */
.faqsec{padding:var(--sp) 0}
.faq{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:1.25rem;backdrop-filter:blur(12px);overflow:hidden}
.fld{border-bottom:1px solid rgba(255,255,255,.07)}
.fld:last-child{border-bottom:none}
.fh{display:flex;align-items:center;gap:12px;width:100%;padding:19px 22px;cursor:pointer;
  background:none;border:none;color:var(--ink);text-align:left;font-family:inherit;
  font-size:15px;font-weight:600;line-height:1.5}
.fh:hover{background:rgba(255,255,255,.04)}
.fn{margin-left:auto;flex:none;width:12px;height:12px;position:relative}
.fn::before,.fn::after{content:"";position:absolute;inset:0;margin:auto;background:var(--gray)}
.fn::before{width:12px;height:1.5px}
.fn::after{width:1.5px;height:12px;transition:transform .25s var(--ease)}
.fld[open] .fn::after{transform:scaleY(0)}
.fv{padding:0 22px 21px;color:var(--gray);font-size:14.5px;line-height:1.78;max-width:74ch}
.fv p{color:inherit;margin:0 0 .7em}

/* 폼 · 계산기 · 나머지 어휘 */
.form{display:grid;gap:15px;background:var(--card);border:1px solid var(--line);
  border-radius:1.25rem;backdrop-filter:blur(12px);padding:clamp(22px,3vw,32px)}
input,select,textarea{width:100%;padding:13px 14px;background:rgba(255,255,255,.04);
  color:var(--ink);border:1px solid var(--line-hi);border-radius:.7rem;font:inherit;font-size:15px;
  transition:border-color .25s,box-shadow .25s}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.32)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.18)}
input::placeholder,textarea::placeholder{color:#5A5A72}
label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-2);margin-bottom:8px}
.opt,.op{display:flex;flex-wrap:wrap;gap:9px}
.opt label,.op label{margin:0}
.oi{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border-radius:.7rem;
  border:1px solid var(--line-hi);background:rgba(255,255,255,.04);cursor:pointer;
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.oi:hover{border-color:rgba(255,255,255,.34)}
.oi input{width:auto;padding:0}
.oi:has(input:checked){border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.sim{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
  background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  backdrop-filter:blur(12px);padding:clamp(22px,3vw,32px)}
.simin{display:grid;gap:16px;align-content:start}
.simout{display:grid;gap:13px;align-content:start;border-left:1px solid var(--line);
  padding-left:clamp(18px,2.5vw,28px)}
@media(max-width:660px){.simout{border-left:none;border-top:1px solid var(--line);
  padding-left:0;padding-top:22px}}
/* 비용 계산기 결과 행.
   ⚠08-20 사고: 이 행들이 `.sr` 이라는 이름을 쓰고 있었는데, `.sr` 은 **화면낭독기
     전용 숨김**(1×1px·clip) 유틸이었다. 이름이 겹친 게 아니라 **남의 상자를 통째로
     뒤집어쓴 것**이라, 판매 페이지에서 「매달 남는 돈」·「1년이면」이 아무에게도
     안 보인 채로 있었다(폰에서는 그 잔해가 화면을 23px 밀기까지 했다).
     ⇒ 결과 행은 `.srow` 로 제 이름을 갖는다. 숨김 유틸은 `.visually-hidden` 이다. */
.srow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.srow:last-of-type{border-bottom:none}
.srow .k{color:var(--gray);font-size:13.5px;line-height:1.5}
.srow .k b{color:var(--ink);font-weight:600}
.srow .v{font-size:17px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.srow .v.hold{color:var(--cyan)}
.simout .big{padding:14px 0 10px;flex-wrap:wrap}
.simout .big .k{font-size:14px;color:var(--ink)}
.simout .big .v{font-size:clamp(28px,4.2vw,44px);font-weight:700;letter-spacing:-.035em;
  line-height:1.05;color:var(--cyan);font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(34,211,238,.35)}
.simout .cap{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2)}
.simout .snote{font-size:12.5px;color:var(--gray-2);line-height:1.65;margin:0}
/* 계산기 입력 한 줄.
   ⚠08-20 사고 둘째: 이 줄들이 문답 아코디언의 `.fld/.fh/.fv/.fn` 을 그대로 쓰고 있었다.
     그중 `.fn` 은 **12×12px 짜리 ＋ 아이콘**인데 거기에 「50만원 ~ 2억원」 문장을 넣었다.
     문장이 12px 상자 안에서 65px 넘쳐 **폰에서 페이지가 23px 가로로 굴렀다.**
     같은 이름 두 용도 = 남의 상자를 뒤집어쓰는 것이다. 계산기는 `s` 를 붙여 뗀다. */
.sfld{display:grid;gap:9px}
.sfh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sfh label{font-size:13.5px;color:var(--gray);cursor:pointer}
.sfv{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sfn{font-size:11.5px;color:var(--gray-2);line-height:1.5}
.simin input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:rgba(255,255,255,.14);border-radius:9999px;outline:none;margin:0}
.simin input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .2s var(--ease)}
.simin input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
.simin input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;
  border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.simin input[type=range]:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.sbar{height:8px;border-radius:9999px;background:rgba(255,255,255,.05);overflow:hidden}
.sbar > i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 14px rgba(34,211,238,.8)}

.ptop{padding:clamp(60px,8vw,110px) 0 0}
/* 실크스크린 라벨 — 이 페이지의 이름이다(장식 아님). 08-20 지웠다 되살림. */
.eb{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
 font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
 color:var(--cyan);font-family:Inter,"Gothic A1",system-ui,sans-serif}
.eb::before{content:"";width:22px;height:1px;background:var(--cyan);opacity:.55}
.ptop h1{margin-bottom:.36em}
.ptop p{color:var(--gray);font-size:clamp(15px,1.6vw,17.5px);max-width:58ch}
.duo{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.duo .d{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  backdrop-filter:blur(12px);padding:28px 26px}
.duo .d p{color:var(--gray);font-size:14.5px}
.tag2,.tag{display:inline-block;margin-bottom:13px;padding:5px 11px;border-radius:9999px;
  border:1px solid var(--line-hi);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray)}
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.steps .st{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;
  backdrop-filter:blur(12px);padding:24px 22px}
.steps .st::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:block;
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--cyan);margin-bottom:10px}
.steps .st h3{font-size:16px;margin-bottom:.42em}
.steps .st p{margin:0;font-size:14px;color:var(--gray)}
.shots{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.shot{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;overflow:hidden;
  backdrop-filter:blur(12px)}
.shot .frame{background:#070614;border-bottom:1px solid var(--line)}
.shot p{margin:0;padding:16px 18px;font-size:13.5px;color:var(--gray)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;
  font-weight:600;color:var(--cyan);text-decoration:none}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.full{grid-column:1/-1}
.grid,.plans,.g2c{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.pr{font-variant-numeric:tabular-nums}
.hold,.msg{color:var(--gray);font-size:13.5px}
.nm{font-weight:700}
.shead{margin-bottom:clamp(28px,3.6vw,48px)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);flex:none}
/* 화면낭독기 전용 숨김. ⛔`.sr` 이라는 짧은 이름을 쓰지 말 것 —
   08-20 에 비용 계산기 결과 행이 이 이름을 쓰다가 통째로 안 보였다. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══════════════════════════════════════════════════════════════════════
   ACT — 스크롤 시퀀스 (2026-08-20)

   레퍼런스 넷을 합친 것(DESIGN.md 표 참고). 여기가 그 중 Outbox 3.2/3.3 의 번역.

   ⭐**`.scrub` 이 없으면 연출이 하나도 안 걸린다** — 그게 이 파일의 첫 번째 규칙이다.
     scene.js 가 안 돌거나(파일 유실·JS 오류) 사용자가 움직임을 줄여 놨으면
     클래스가 안 붙고, 아래 기본 규칙대로 **평범한 세로 배치**로 그냥 읽힌다.
     ⛔연출 전용 값을 `.scrub` 밖에 쓰지 말 것. 쓰는 순간 목록이 사라지는 화면이 된다.
   ═══════════════════════════════════════════════════════════════════════ */

.act{position:relative;z-index:2}
.act .stick{position:relative}

.act.scrub .stick{position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center}

/* ── ACT 0 · 히어로 ──────────────────────────────────────────────────── */
/* ⛔배경을 칠하지 않는다 — `#bg3d`(순위 축)가 z-0 에 깔려 있어서
     불투명한 배경을 주는 순간 3D 가 통째로 가려진다(08-20 첫 촬영에서 새까맸다). */
.act.a0.scrub{height:400vh}

.hwrap{position:relative;width:100%;height:100%;display:grid;place-items:center;
  transform-origin:50% 42%;will-change:transform,opacity}
.act.scrub .hwrap{
  transform:scale(calc(1 - var(--s,0) * .28)) translateY(calc(var(--s,0) * -4vh));
  border-radius:calc(var(--s,0) * 56px);
  opacity:calc(1 - var(--s,0) * .97);
  overflow:hidden}

/* 동심원 — 커지며 화면을 삼킨다.
   ⛔08-21: 배경이 **스크롤 프레임 시퀀스**로 바뀌면서 이 원들이 그 위를 덮어
     28% 지점이 새까맣게 죽었다(실측 캡처에서 잡힘). 이제 프레임 자체가
     「빨려드는」 연출을 하므로 원은 필요 없다 — 같은 일을 두 번 하면 둘 다 흐려진다. */
.act.a0 .rings{display:none}
.rings{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  pointer-events:none}
.rings i{position:absolute;display:block;width:min(52vmin,430px);aspect-ratio:1;
  border-radius:9999px;will-change:transform,opacity}
/* ⚠08-20 촬영: r1 을 `#0891b2` 로 뒀더니 화면을 삼키는 순간 **글자 대비가 무너졌다**
     — 밝은 청록판 위에 회색 본문이 떠서 안 읽혔다. 삼키는 색은 어두워야 한다.
   ⚠r3·r4 를 불투명으로 두면 삼킨 뒤가 **아무것도 없는 검은 판**이 된다
     (3D 순위 축이 통째로 가려진다). 반투명이라야 물속으로 들어간 느낌이 난다. */
/* 삼키는 동심원 — 배경이 그림으로 바뀐 뒤(08-21) 더 옅게. 그림을 가리면 안 된다.
   이제 이 원들이 하는 일은 「다음 막으로 넘어간다」는 전환뿐이다. */
.rings .r1{background:radial-gradient(circle at 38% 32%,rgba(13,85,104,.72),rgba(5,47,61,.72))}
.rings .r2{background:rgba(9,54,72,.62)}
.rings .r3{background:rgba(10,33,55,.52)}
.rings .r4{background:rgba(3,3,8,.34)}
.act.scrub .rings i{transform:scale(calc(.26 + var(--s,0) * 6.2))}
.act.scrub .rings .r1{opacity:calc(1 - var(--s,0) * var(--s,0))}
.act.scrub .rings .r2{opacity:calc(1 - var(--s,0) * .92)}
.act.scrub .rings .r3{opacity:calc(1 - var(--s,0) * .78)}
/* r4 는 바닥이라 남지만, 다 덮으면 3D 가 죽는다 — 절반쯤만 남긴다.
   ⚠여기가 히어로에서 가장 오래 머무는 구간(문제 문구)이다. 이 구간이 새까맣게
     굳으면 400vh 중 40% 동안 화면이 아무것도 안 하는 셈이 된다. */
.act.scrub .rings .r4{opacity:calc(1 - var(--s,0) * .52)}
/* .scrub 이 없으면 원은 아예 안 그린다 — 글자를 덮으면 안 되니까 */
.act:not(.scrub) .rings{display:none}

/* 거대 「1위」 — 지키는 자리 그 자체.
   ⚠08-20: 처음엔 문구 **뒤 한가운데**에 뒀다가 「위」가 본문 위에 얼룩처럼 얹혔다.
     가운데는 글이 쓰는 자리다. 숫자는 오른쪽 아래로 비켜 세워 잘리게 둔다 —
     잘린 글자는 화면 밖으로 이어지는 느낌을 주고, 무엇보다 **글을 안 가린다.**
   ⛔폰에서는 아예 안 그린다. 390px 에는 비켜설 자리가 없다. */
.giant{position:absolute;right:1.6vw;bottom:-3vh;z-index:1;
  display:flex;align-items:center;gap:.04em;pointer-events:none;
  font-family:Inter,"Gothic A1",system-ui,sans-serif;font-weight:700;
  letter-spacing:-.055em;line-height:.84;
  text-align:center;mix-blend-mode:screen}
.giant .d{font-size:clamp(130px,25vw,370px);color:transparent;line-height:1;
  -webkit-text-stroke:1.5px rgba(226,247,252,.20)}
.giant .u{font-family:"Gothic A1",Inter,system-ui,sans-serif;font-weight:700;
  font-size:clamp(46px,8.6vw,126px);color:transparent;letter-spacing:-.03em;line-height:1;
  -webkit-text-stroke:1.5px rgba(226,247,252,.16)}
.act.scrub .giant{opacity:calc(1 - var(--o,0));
  transform:scale(calc(1 + var(--o,0) * .34))}
.act:not(.scrub) .giant{margin-bottom:8px}

/* 조준선 — 「1」을 감싼 고리. 자리를 겨누고 있다는 뜻. */
.retic{position:absolute;z-index:2;width:min(62vmin,540px);aspect-ratio:1;
  border-radius:9999px;border:1px solid rgba(34,211,238,.34);pointer-events:none}
.retic::before,.retic::after{content:"";position:absolute;inset:-1px;
  border-radius:9999px;border:1px solid transparent}
.retic::before{border-top-color:var(--cyan);border-right-color:var(--cyan);
  animation:retspin 9s linear infinite}
.retic::after{inset:9%;border-bottom-color:rgba(34,211,238,.5);
  animation:retspin 14s linear infinite reverse}
@keyframes retspin{to{transform:rotate(360deg)}}
.act.scrub .retic{opacity:calc(1 - var(--o,0));
  transform:scale(calc(1 + var(--o,0) * .9))}
.act:not(.scrub) .retic{display:none}

/* 문구 — 구간마다 하나씩 올라왔다 내려간다 */
.hstage{position:relative;z-index:3;width:100%;max-width:var(--wrap);
  margin:0 auto;padding:0 var(--gut)}
.act.scrub .hstage{position:absolute;inset:0;display:grid;place-items:center}
.hline{max-width:41rem;text-align:center;will-change:transform,opacity}
/* ⭐들어오기 × 나가기 — 곱해야 **앞 문구가 제때 비켜난다**.
     `--s` 기본 1(구간이 없으면 처음부터 보임) · `--o` 기본 0(아직 안 나감). */
.act.scrub .hline{position:absolute;left:50%;top:50%;
  transform:translate(-50%,calc(-50% + (1 - var(--s,1)) * 44px
                                     - var(--o,0) * 34px));
  opacity:calc(var(--s,1) * (1 - var(--o,0)));
  pointer-events:none}
.act.scrub .hline[data-on]{pointer-events:auto}
.hline h1,.hline h2{margin:0 0 .5em;letter-spacing:-.038em;line-height:1.12;
  font-size:clamp(30px,5.4vw,68px);text-wrap:balance}
.hline em{font-style:normal;color:var(--cyan)}
.hline p{color:#C7C7D4;font-size:clamp(15px,1.7vw,19px);margin:0 auto;max-width:36ch}
.hline .hcta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.hline .note{margin-top:16px;font-size:12.5px;color:var(--gray-2);line-height:1.7}
/* 연출이 없을 땐 둘 다 그냥 보인다(가운데 정렬만 유지) */
.act:not(.scrub) .hline{margin:0 auto 34px}

/* 하단 실측 바 — Gridline 3.3 을 우리 숫자로 */
.hstats{position:relative;z-index:3;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:clamp(16px,3vw,38px);
  padding:0 var(--gut)}
.act.scrub .hstats{position:absolute;left:0;right:0;bottom:clamp(72px,9vh,104px);
  opacity:calc(var(--s,1) * (1 - var(--o,0)));
  transform:translateY(calc((1 - var(--s,1)) * 18px))}
.hstats div{text-align:center}
.hstats b{display:block;font-size:clamp(19px,2.4vw,29px);font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.hstats span{display:block;margin-top:3px;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;color:var(--gray-2);text-transform:uppercase;
  font-family:Inter,"Gothic A1",system-ui,sans-serif}
.hstats hr{width:1px;height:30px;border:0;background:rgba(255,255,255,.13);margin:0}

/* 스크롤 안내 — Cripton 4.2 */
.sind{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  display:grid;justify-items:center;gap:8px;pointer-events:none}
.sind i{display:block;width:22px;height:36px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.22);position:relative}
.sind i::after{content:"";position:absolute;left:50%;top:7px;margin-left:-3px;
  width:5px;height:5px;border-radius:9999px;background:var(--cyan);
  box-shadow:0 0 9px rgba(34,211,238,.85);animation:sdot 2s ease-in-out infinite}
@keyframes sdot{0%,100%{transform:translateY(0);opacity:1}
  55%{transform:translateY(13px);opacity:.35}}
.sind span{font-size:9px;font-weight:600;letter-spacing:.22em;color:var(--gray-2);
  text-transform:uppercase;font-family:Inter,system-ui,sans-serif}
.act:not(.scrub) .sind{display:none}
.act.scrub .sind{opacity:calc(1 - var(--p,0) * 4)}

/* ── ACT 1 · 쌓이는 카드 (Outbox 3.3) ────────────────────────────────── */
.act.a1{background:linear-gradient(180deg,rgba(11,10,26,.55),rgba(11,10,26,.93) 42%)}
.act.a1.scrub{height:340vh;margin-top:-100vh}
.act.a1 .stick{align-content:center}
.stkin{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;gap:clamp(26px,4vw,60px);align-items:center}
.act.a1.scrub .stkin{grid-template-columns:1fr}
.stkhead{max-width:32rem}
.stkhead h2{margin:0 0 .5em}
.stkhead p{color:var(--gray);font-size:clamp(15px,1.5vw,17px);margin:0}
.stkstage{position:relative}
/* ⚠overflow 를 안 주면 **아직 안 올라온 카드가 무대 아래에 그대로 보인다**
     — 08-20 촬영에서 첫 장만 보여야 할 자리에 넉 장이 다 널려 있었다. */
.act.scrub .stkstage{height:min(60vh,430px);overflow:hidden;
  padding-bottom:2px;margin-bottom:-2px}

.scard{position:relative;border-radius:1.4rem;padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);background:var(--dark-2);overflow:hidden;
  will-change:transform}
.act:not(.scrub) .scard{margin-bottom:14px}
.act.scrub .scard{position:absolute;left:0;right:0;
  top:calc(var(--i) * 34px);height:calc(100% - var(--n) * 34px);
  transform:translateY(calc((1 - var(--own,1)) * 106%))
            scale(calc(1 - var(--depth,0) * .045));
  transform-origin:50% 0}
.scard::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;background:linear-gradient(180deg,transparent 52%,rgba(3,3,8,.62))}
.scard > *{position:relative;z-index:2}
.scard .tag{display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-2);font-family:Inter,system-ui,sans-serif;margin-bottom:14px}
.scard .tag b{width:6px;height:6px;border-radius:9999px;background:currentColor}
.scard h3{margin:0 0 10px;font-size:clamp(20px,2.5vw,30px);letter-spacing:-.03em}
.scard p{margin:0;color:var(--gray);font-size:clamp(14px,1.4vw,15.5px);
  line-height:1.75;max-width:44ch}
.scard .kv{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.scard .kv span{padding:5px 11px;border-radius:9999px;border:1px solid var(--line);
  font-size:11.5px;color:#C7C7D4;background:rgba(255,255,255,.03)}
.scard.s1{background:linear-gradient(155deg,#0d2f3a,#0b1428)}
.scard.s2{background:linear-gradient(155deg,#2b1220,#0f0b1e)}
.scard.s3{background:linear-gradient(155deg,#111f38,#0b0f22)}
.scard.s4{background:linear-gradient(155deg,#2a2410,#141020)}
.scard.s1 .tag{color:var(--cyan)}
.scard.s2 .tag{color:var(--rose)}
.scard.s3 .tag{color:var(--blue)}
.scard.s4 .tag{color:var(--yellow)}

/* ── 요금 슬라이더 (Pricing–Predictable 를 PLANS 로) ──────────────────── */
.pcalc{display:grid;gap:clamp(16px,2.4vw,26px);
  grid-template-columns:1fr;align-items:start}
.pglass{background:var(--card);border:1px solid var(--line);border-radius:1.6rem;
  padding:clamp(22px,3.2vw,34px);backdrop-filter:blur(20px)}
.pglass h3{margin:0 0 6px;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.03em}
.pglass > p{margin:0;color:var(--gray);font-size:14px}
.pslide{margin-top:28px}
.pslide .lab{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;margin-bottom:12px}
.pslide .lab span{color:var(--gray)}
.pslide .lab b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--cyan)}
input[type=range].pr{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:rgba(255,255,255,.14);border-radius:9999px;outline:none;margin:0}
input[type=range].pr::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
input[type=range].pr::-webkit-slider-thumb:hover{transform:scale(1.14);
  box-shadow:0 6px 18px rgba(0,0,0,.5)}
input[type=range].pr::-moz-range-thumb{width:26px;height:26px;border:0;
  border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
input[type=range].pr:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.pgrid div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);
  border-radius:1rem;padding:13px 10px;text-align:center;
  transition:background .25s var(--ease)}
.pgrid div:hover{background:rgba(255,255,255,.07)}
.pgrid span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.13em;
  color:var(--gray-2);text-transform:uppercase;
  font-family:Inter,system-ui,sans-serif}
.pgrid b{display:block;margin-top:5px;font-size:clamp(17px,2vw,22px);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pnow{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.pnow .nm{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--cyan);
  text-transform:uppercase;width:100%;margin-bottom:2px;
  font-family:Inter,"Gothic A1",system-ui,sans-serif}
.pnow .amt{font-size:clamp(36px,5.6vw,58px);font-weight:700;letter-spacing:-.045em;
  line-height:1;font-variant-numeric:tabular-nums;
  transition:opacity .16s ease-out,transform .16s ease-out}
.pnow .per{color:var(--gray);font-size:14px;margin-bottom:6px}
.pcta{display:block;width:100%;margin-top:24px;text-align:center}
.pnote{margin-top:14px;font-size:12px;color:var(--gray-2);line-height:1.7}

/* ── 녹아웃 CTA (Outbox 3.5 — 비디오 대신 우리 3D 가 비친다) ──────────── */
.knock{position:relative;padding:clamp(74px,11vw,150px) 0;text-align:center;
  overflow:hidden}
/* ⚠행간 .92 는 라틴 기준이다 — 한글은 받침이 있어 두 줄이 겹친다(08-20 촬영에서 겹쳤다).
     한글 디스플레이는 1.05 아래로 내리지 말 것. */
.knock .kt{margin:0;font-weight:700;letter-spacing:-.045em;line-height:1.06;
  font-size:clamp(33px,7.4vw,102px);
  background:linear-gradient(100deg,#22d3ee,#a78bfa 46%,#f5f5fa);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance}
.knock p{margin:20px auto 0;max-width:40ch;color:var(--gray);
  font-size:clamp(14.5px,1.6vw,17px)}
.knock .kcta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* ── 반응형 ──────────────────────────────────────────────────────────── */
@media (min-width:860px){
  .act.a1.scrub .stkin{grid-template-columns:.86fr 1.14fr}
  .pcalc{grid-template-columns:1.08fr .92fr}
  .hstats{gap:clamp(22px,3vw,44px)}
}
@media (max-width:859px){
  /* 폰에서는 스크럽 거리를 줄인다 — 손가락으로 400vh 를 넘기는 건 고역이다 */
  .act.a0.scrub{height:270vh}
  /* ⭐폰에서는 **쌓기를 하지 않는다.**
     한 화면에 제목·문단·버튼·카드를 다 넣으면 제목이 헤더 뒤로 밀려 잘린다(08-20 촬영).
     쌓기는 넓은 화면의 즐거움이고, 폰에서는 그냥 네 장을 차례로 읽는 편이 낫다.
     ⛔내용을 숨겨서 맞추지 않는다 — 숨기면 폰 손님만 못 읽는다. */
  .act.a1.scrub{height:auto;margin-top:0}
  .act.a1.scrub .stick{position:relative;height:auto;overflow:visible;
    display:block;padding:var(--sp) 0}
  .act.a1.scrub .stkstage{height:auto;overflow:visible}
  .act.a1.scrub .scard{position:relative;top:0;height:auto;transform:none;
    margin-bottom:13px}
  .hstats{gap:14px}
  .hstats hr{display:none}
  .pgrid{grid-template-columns:repeat(3,1fr);gap:7px}
  .pgrid b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .retic::before,.retic::after,.sind i::after{animation:none}
}

/* 체크박스 — 브라우저 기본 네모는 판매 화면에서 싸구려로 보인다(08-20 촬영). */
.pchk{position:relative;display:flex;gap:15px;align-items:flex-start;cursor:pointer;
  border-radius:1.3rem;padding:19px 21px}
.pchk input{position:absolute;opacity:0;width:0;height:0}
.pchk .bx{flex:0 0 auto;margin-top:3px;width:21px;height:21px;border-radius:.45rem;
  border:1.5px solid var(--line-hi);background:rgba(255,255,255,.04);
  display:grid;place-items:center;transition:all .2s var(--ease)}
.pchk .bx::after{content:"";width:10px;height:6px;border-left:2px solid #04141a;
  border-bottom:2px solid #04141a;transform:rotate(-45deg) scale(.5);
  opacity:0;transition:all .2s var(--ease)}
.pchk input:checked ~ .bx{background:var(--cyan);border-color:var(--cyan)}
.pchk input:checked ~ .bx::after{opacity:1;transform:rotate(-45deg) scale(1)}
.pchk input:focus-visible ~ .bx{outline:2px solid var(--cyan);outline-offset:3px}
.pchk:hover .bx{border-color:var(--cyan)}
.pchk b{display:block;font-size:15.5px}
.pchk .sub2{display:block;margin-top:5px;font-size:13px;color:var(--gray);line-height:1.7}

/* 쌓이는 카드 왼쪽 열 — 빈 검은 반쪽이 아니라 여기서도 부를 수 있게 */
.stkhead .scta{margin-top:26px;display:flex;flex-wrap:wrap;gap:11px}
.stkhead .snote{margin-top:14px;font-size:12.5px;color:var(--gray-2);line-height:1.7}

@media (max-width:859px){
  .giant{display:none}          /* 390px 에는 비켜설 자리가 없다 */
}

/* 히어로 글 뒤 — 순위 눈금 선이 제목을 가로지르지 않게 부드럽게 깐다.
   (Cripton 5.1 의 inset 그림자와 같은 뜻: 3D 를 죽이지 않고 글만 읽히게) */
.hstage::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;
  width:min(94%,880px);height:min(74%,540px);transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(3,3,10,.88) 0%,
    rgba(3,3,10,.70) 44%,transparent 76%)}
.act:not(.scrub) .hstage::before{display:none}
/* 「1위」 두 글자가 다 보이게 — baseline 정렬이면 작은 「위」가 아래로 잘린다 */
.giant{align-items:center}

/* 히어로 안에서 겹쳐 드는 「밀리는 순간」 그림 (08-21) — 이야기를 이 한 장이 맡는다.
   ⚠`.scrub` 안에서만 걸린다. JS 가 없으면 아예 안 그린다(글이 주인공이니 없어도 된다). */
.slipart{display:none}
/* ⚠08-21 첫 판: 이 그림을 opacity .92 로 깔았더니 **「가만두면 밀립니다」가 통째로
     묻혔다.** 배경 그림은 글보다 뒤로 물러나야 한다 — 아무리 좋은 그림이어도
     읽을 글을 덮으면 그건 그냥 방해다. 옅게 깔고, 글 쪽은 한 번 더 눌러 준다. */
/* ⚠08-21: 처음엔 이 그림을 화면 **전체**에 깔았다. 그랬더니 중앙까지 침범해
     본문과 겹치고, 배경 그림과 배율이 달라 좌우에 띠까지 생겼다.
     ⇒ **오른쪽 절반에만** 둔다. 왼쪽 경계는 그라디언트로 녹여 없앤다.
     글이 오는 자리는 손대지 않는다 — 그게 이 그림의 유일한 규칙이다. */
.act.scrub .slipart{display:block;position:absolute;top:0;bottom:0;right:0;left:auto;
  width:min(54%,760px);z-index:1;pointer-events:none;overflow:hidden;
  opacity:calc(var(--s,0) * (1 - var(--o,0)) * .62)}
.act.scrub .slipart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,5,16,1) 0%,rgba(5,5,16,.72) 26%,
    rgba(5,5,16,.22) 58%,transparent 100%)}
.act.scrub .slipart img{width:100%;height:100%;object-fit:cover;object-position:64% 46%;
  display:block;transform:none}
@media(max-width:860px){
  /* 폰에는 옆에 둘 자리가 없다 — 아래쪽에 낮게 깔고 위는 완전히 녹인다 */
  .act.scrub .slipart{left:0;width:100%;top:auto;height:52%;
    opacity:calc(var(--s,0) * (1 - var(--o,0)) * .40)}
  .act.scrub .slipart img{object-position:72% 40%}
  .act.scrub .slipart::after{background:linear-gradient(180deg,rgba(5,5,16,1) 0%,
    rgba(5,5,16,.60) 34%,rgba(5,5,16,.30) 100%)}
}
@media(prefers-reduced-motion:reduce){.act.scrub .slipart{display:none}}

/* ⭐폰 히어로 — 그림과 글이 **자리를 나눈다**(08-21).
   위 1/3 은 그림, 아래 2/3 는 글. 겹치지 않으니 둘 다 살아난다.
   ⛔전처럼 그림 위에 글을 겹쳐 놓고 그림을 지워 버리지 않는다. */
@media(max-width:860px){
  /* ⚠실측 바(`.hstats`)와 문단이 겹쳤다(08-21). 처음엔 `.hstage` 에 `padding-bottom` 을
     줘서 밀려 했는데 안 먹었다 — **절대배치 자식의 `bottom:0` 은 부모의 padding **box**
     기준이라 padding 은 무시된다.** 값을 직접 줘야 밀린다. 재 보고 알았다. */
  .act.scrub .hstage{align-content:end}
  .act.scrub .hline{top:auto;bottom:clamp(132px,23vh,200px);
    transform:translate(-50%,calc((1 - var(--s,1)) * 34px - var(--o,0) * 26px))}
  .act.scrub .hstats{bottom:clamp(34px,5vh,62px)}
  .ptop{padding-top:clamp(150px,30vh,240px)}
}

/* ── 스크롤하며 바뀌는 배경 (08-21) ────────────────────────────────────────
   대표: "스크롤하고는 상관없는건가? / 섹션별로 다 다르게하든"
   `.bgart` 는 그 페이지의 기본 그림, `.bgnext` 는 **지금 보고 있는 섹션**의 그림이다.
   섹션이 화면 가운데에 들어오면 그 그림이 여기로 부드럽게 얹힌다.
   ⛔JS 가 없으면 `.bgnext` 는 빈 채로 남고 기본 그림만 보인다 — 화면이 비지 않는다. */
.bgnext{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .55s var(--ease)}
.bgnext.on{opacity:1}
.bgnext img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  display:block;opacity:.72;transform:scale(1.06)}
@media(max-width:860px){.bgnext img{object-position:70% 38%;opacity:.85}}
@media(prefers-reduced-motion:reduce){.bgnext{transition:none}}

/* ── 스크롤에 맞춰 움직이는 히어로 (08-21) ────────────────────────────────
   대표: "스크롤하면 스크롤에 맞게 영상이 같이 움직이는 이렇게 되는걸 원했는데"
   레퍼런스 MotionSite「LIVSPACE」— 영상 프레임을 캔버스에 직접 그린다.
   ⚠`.seqbox` 는 `.bgart` 안에 있고 `.bgart` 가 이미 fixed 다 — 여기선 채우기만 한다.
   ⭐높이는 **히어로 막(`.act.a0`)** 이 정한다. 그 막을 스크롤하는 동안 프레임이 흐른다. */
.seqbox{position:absolute;inset:0;overflow:hidden}
.seqbox canvas{display:block;width:100%;height:100%;opacity:0;
  transition:opacity .5s var(--ease)}
.seqbox.ready canvas{opacity:.92}
@media(max-width:860px){.seqbox.ready canvas{opacity:.95}}
/* 캔버스가 뜨면 뒤의 정지 그림은 물러난다(받는 동안에는 그게 보인다) */
.seqbox.ready ~ .still{opacity:0;transition:opacity .5s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .seqbox{display:none}
  .seqbox ~ .still{display:block;opacity:1}
}