/* noahOS 랜딩 v4 · 출시 버전(launch) — relayout
   레이아웃 언어: 큰 둥근 카드(1px 선) · 어두운 「캔버스」 면(히어로·최고 수치·엔터프라이즈·마지막 CTA) · 스크롤에 쌓이는 기능 카드
   메인 색: 쪽빛(藍) — 깊은 쪽 #0B2A7A → 코발트 #1450D8 → 세룰리안 #0874AC, 지평선 끝의 시안 #4FD8E6 은 빛으로만 쓴다
   토큰 3블록: :root(라이트) / 시스템 다크(+라이트 고정 아님) / [data-theme=dark] */
:root{
  --bg:#FFFFFF; --bg-2:#F4F6FA; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#ECF0F5;
  --ink:#0D1117; --ink-2:#384150; --ink-3:#596273; --ink-4:#97A0AE;
  --line:#E2E6ED; --line-2:#D0D7E1;
  --accent:#1450D8; --accent-ink:#1148C8; --accent-soft:#E9F0FE; --on-accent:#FFFFFF;
  --card:#F6F8FB; --card-line:#E2E6ED; --pill:#E9EEF5; --pill-ink:#2B3442;
  --under:#FFFFFF;                 /* 뒤로 물러난 카드를 덮는 막 */
  --frag-shadow:0 1px 2px rgba(10,20,40,.10), 0 18px 40px -14px rgba(10,20,40,.30);
  --key-shadow:0 0 0 1px rgba(20,80,216,.22), 0 30px 70px -22px rgba(20,80,216,.45);
  --glow-op:.42;
  --mark:#D8E6FD;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#04060A; --bg-2:#0A0E15; --surface:#0C1119; --surface-2:#111722; --surface-3:#18202D;
    --ink:#EEF2F8; --ink-2:#B6C0CF; --ink-3:#8A95A7; --ink-4:#5A6475;
    --line:#171E2A; --line-2:#252F40;
    --accent:#2F6BEF; --accent-ink:#78C6F2; --accent-soft:#0E1B36; --on-accent:#FFFFFF;
    --card:#080C13; --card-line:#1A2232; --pill:#131A26; --pill-ink:#C9D3E2;
    --under:#04060A;
    --frag-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 56px -16px rgba(0,0,0,.85);
    --key-shadow:0 0 0 1px rgba(79,216,230,.30), 0 30px 80px -20px rgba(20,86,224,.70);
    --glow-op:.62;
    --mark:#16305E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#04060A; --bg-2:#0A0E15; --surface:#0C1119; --surface-2:#111722; --surface-3:#18202D;
  --ink:#EEF2F8; --ink-2:#B6C0CF; --ink-3:#8A95A7; --ink-4:#5A6475;
  --line:#171E2A; --line-2:#252F40;
  --accent:#2F6BEF; --accent-ink:#78C6F2; --accent-soft:#0E1B36; --on-accent:#FFFFFF;
  --card:#080C13; --card-line:#1A2232; --pill:#131A26; --pill-ink:#C9D3E2;
  --under:#04060A;
  --frag-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 56px -16px rgba(0,0,0,.85);
  --key-shadow:0 0 0 1px rgba(79,216,230,.30), 0 30px 80px -20px rgba(20,86,224,.70);
  --glow-op:.62;
  --mark:#16305E;
  color-scheme:dark;
}
/* 테마와 무관한 것: 쪽빛 단계 · 어두운 캔버스 */
:root{
  --j1:#0B2A7A; --j2:#1450D8; --j3:#0874AC; --j4:#4FD8E6;
  --grad:linear-gradient(120deg,var(--j2) 0%,var(--j3) 100%);    /* 흰 글자 5.0:1 이상 (끝 #0874AC) */
  --cv:#050912; --cv-ink:#F3F6FB; --cv-ink-2:rgba(222,231,245,.74); --cv-line:rgba(255,255,255,.09);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --wrap:1224px; --gut:24px; --sec:136px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ez:cubic-bezier(.2,.8,.2,1);
  --r:16px;
}

/* ── 기본 ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
::selection{background:var(--j2);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;text-wrap:balance}
button{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
html{scrollbar-color:var(--line-2) var(--bg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid var(--bg)}
.skip{position:absolute;left:16px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:100;font-size:15px}
.skip:focus{top:12px}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}

/* 버튼 */
.lbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;border:0;
  font-size:16px;font-weight:620;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s}
.lbtn:active{transform:none!important}
.lbtn--pri{background:var(--grad);color:#fff}
.lbtn--pri:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(20,80,216,.7)}
.lbtn--light{background:#fff;color:#0A1020}
.lbtn--light:hover{background:#E6F0FF;transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(79,216,230,.55)}
.lbtn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.lbtn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.lbtn--sm{height:36px;padding:0 16px;font-size:14px}
.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:18px;transition:background-color .2s,color .2s}
.iconbtn:hover{background:var(--surface-3);color:var(--ink)}

/* ── 헤더 ── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav__in{height:64px;width:min(1280px,100% - var(--gut)*2);margin-inline:auto;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;color:var(--ink);padding:6px 0}
.brand .wm{height:15px;width:auto;display:block}
.nav__links{display:flex;gap:28px}
.nav__links a{font-size:15px;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__end{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav__login{font-size:15px;font-weight:500;color:var(--ink-2);padding:8px 6px}
.nav__login:hover{color:var(--ink)}

/* ── 캔버스: 어두운 면 + 쪽빛 지평선 (히어로·최고 수치·엔터프라이즈·마지막 CTA 가 같은 면) ── */
.canvas{position:relative;isolation:isolate;background:var(--cv);color:var(--cv-ink)}
.canvas__bg{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.canvas__bg::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--cv-line)}
.canvas__bg i{position:absolute;display:block;border-radius:50%}
/* 빛: 지평선 위로 번지는 쪽빛 대기 */
.hz{left:50%;top:100%;width:130%;height:130%;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(20,86,224,.78) 0%,rgba(11,42,122,.42) 46%,rgba(11,42,122,0) 74%)}
/* 지평선: 거대한 원의 윗변 — 시안 가장자리, 아래는 캔버스보다 어두운 면이 빛을 가린다 */
.hz-rim{left:50%;width:240%;aspect-ratio:1;translate:-50% 0;background:#02040A;
  box-shadow:inset 0 1.5px 0 rgba(130,236,246,.95),inset 0 14px 40px -20px rgba(79,216,230,.55),0 -2px 18px rgba(79,216,230,.50),0 -40px 120px rgba(28,104,235,.55)}

/* ── 히어로 ── */
.hero{padding:12px 12px 0}
.hero__canvas{display:flow-root;border-radius:28px;padding:112px 24px 0}
.hero .hz{top:60%;width:120%;height:110%}
.hero .hz-rim{top:60%}
.hero__copy{text-align:center;width:min(1000px,100%);margin-inline:auto}
.hero h1{font-size:clamp(46px,5vw + 18px,96px);line-height:1.06;letter-spacing:-.04em;color:var(--cv-ink)}
.hero h1 .ln:nth-child(1)>span{font-weight:300;color:rgba(226,234,247,.62)}
.hero h1 .ln:nth-child(2)>span{font-weight:760}
.lead{text-wrap:pretty;margin:28px auto 0;font-size:clamp(17px,.35vw + 15px,20px);line-height:1.65;color:var(--cv-ink-2);font-weight:450}
.hero__cta{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.lstage{position:relative;z-index:1;width:min(1180px,100%);margin:72px auto -232px;perspective:2200px}
.win{position:relative;border-radius:14px;background:var(--surface);overflow:hidden;transform-origin:50% 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 -1px 0 rgba(130,236,246,.35),0 40px 100px -30px rgba(2,4,10,.9),0 16px 40px -18px rgba(20,80,216,.35)}
.win__bar{position:relative;height:40px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.win__dots{display:flex;gap:7px}
.win__dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.win__title{position:absolute;left:50%;transform:translateX(-50%);font-size:12.5px;color:var(--ink-3);font-weight:500}
.win__note{margin-left:auto;font-size:12px;color:var(--ink-3)}
.win .appframe{height:640px}
.lstage__ctl{display:flex;justify-content:flex-end;margin-top:248px;min-height:36px}   /* 창이 캔버스 아래로 232px 걸친 만큼 */
.pausebtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-3);font-size:13px;font-weight:500;cursor:pointer;transition:color .2s,border-color .2s}
.pausebtn:hover{color:var(--ink);border-color:var(--line-2)}
.pausebtn[hidden]{display:none}
/* 히어로 대화는 아래에 붙인다 — 새 글이 오면 위로 밀려 올라가는 실제 대화처럼 */
.appframe .is-hero .log{overflow:hidden}
.appframe .rail__nav,.appframe .side__scroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
.appframe .hpanel{width:296px;flex:none;display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-2);min-height:0;overflow:hidden}
.appframe .hpanel .blk__h{margin-bottom:var(--s-2)}
.appframe .hpanel .badge{margin-left:var(--s-1)}
.appframe .hpanel__note{margin-left:auto;font-weight:var(--w-regular);color:var(--ink-3);font-size:var(--t-meta)}
@container app (max-width:1099px){.appframe .hpanel{display:none}}

/* 창 밖에 떠 있는 조각 */
.hfrag{z-index:2}
.hfrag--l{left:-72px;top:236px;width:372px}
.hfrag--r{right:-64px;top:404px;width:330px}

/* ── 앱 조각(.frag): C안 마크업 그대로, 배율 1 ── */
.frag{position:absolute;border-radius:14px;box-shadow:var(--frag-shadow)}
.frag>.appframe{border-radius:inherit;background:var(--surface);padding:14px;overflow:hidden}
.frag>.appframe>.card,.frag>.appframe>.list{margin:0;max-width:none;box-shadow:none;background:transparent;padding:0}
.frag>.appframe>.card{padding:2px}
.frag>.appframe>.lrow{padding:0 var(--s-1)}
.frag>.appframe>.blk__h{margin:2px 4px 10px;display:flex;align-items:center;gap:var(--s-2)}
.frag>.appframe>.msg{padding:0}
.frag>.appframe>.qa{padding:4px 2px;box-shadow:none}
.frag>.appframe>.why{padding:0;box-shadow:none}
.frag>.appframe>.perf-h{margin:2px 2px 6px}
.frag .perf-kpi{padding:var(--s-2) 0}
.frag .doc{font-size:var(--t-ui);line-height:var(--lh-body);color:var(--ink-2)}
.frag.is-key{box-shadow:var(--key-shadow)}

/* ── 섹션 공통 ── */
.lsec{padding-top:var(--sec)}
.lsec h2{font-size:clamp(32px,1.8vw + 22px,52px);font-weight:700;line-height:1.18;letter-spacing:-.035em}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px 64px;align-items:end;margin-bottom:48px}
.sec-head p{color:var(--ink-3);font-size:18px;line-height:1.7}

/* 큰 카드 (clobe 의 카드 언어: 1px 선, 반경 16, 꽉 찬 폭) */
.bigcard{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line)}

/* ── 문제 ── */
.pains__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px 72px;padding:64px;align-items:start}
.pains__list{list-style:none;margin:0;padding:0}
.pains__list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;align-items:center;padding:24px 0}
.pains__list li+li{border-top:1px solid var(--card-line)}
.pains__list li:first-child{padding-top:4px}
.pains__list li:last-child{padding-bottom:4px}
.pi{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:var(--accent-ink);background:var(--pill)}
.pains__list p{font-size:clamp(19px,.7vw + 14px,24px);font-weight:600;letter-spacing:-.022em;line-height:1.4;color:var(--ink)}

/* ── 기능: sticky 스택 카드 ── */
.feats__head{margin-bottom:56px}
.stack{display:flex;flex-direction:column;gap:48px;padding-bottom:8px}
.scard{position:sticky;top:calc(92px + var(--n) * 16px);height:584px;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line),0 -12px 40px -24px rgba(0,0,0,.25);overflow:hidden;isolation:isolate;
  transform-origin:50% 0;transform:scale(calc(1 - var(--d,0) * .028));transition:transform .6s var(--ease)}
.scard::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--under);opacity:calc(var(--d,0) * .22);transition:opacity .6s var(--ease)}
.scard__copy{align-self:center;padding:64px 24px 64px 64px;position:relative;z-index:2}
.scard--rev{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.scard--rev .scard__copy{order:2;padding:64px 64px 64px 24px}
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;background:var(--pill);color:var(--pill-ink);font-size:14px;font-weight:600}
.pill i{font-size:16px;color:var(--accent-ink)}
.scard h3,.scard .h3{margin-top:28px;font-size:clamp(30px,1.4vw + 22px,46px);font-weight:720;line-height:1.16;letter-spacing:-.035em}
.scard__copy p{margin-top:20px;color:var(--ink-3);font-size:17.5px;line-height:1.72;max-width:26em}

/* 장면: 680×520 설계 크기, 카드 가장자리에서 잘린다 */
.scene{position:relative;width:680px;height:520px;align-self:center;justify-self:start}
.scard--rev .scene{justify-self:end}
.scene__glow{position:absolute;left:var(--gx,50%);top:var(--gy,50%);width:520px;height:380px;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(20,86,224,.9),rgba(8,116,172,.45) 55%,transparent);filter:blur(36px);opacity:var(--glow-op);transition:opacity 1s var(--ease)}
.f-a{z-index:1}.f-b{z-index:2}.f-c{z-index:3}
/* 업무를 한곳에 */
.scene--one{--gx:44%;--gy:46%}
.scene--one .f-b{left:120px;top:104px;width:340px}
.scene--one .f-a{left:472px;top:36px;width:220px}
.scene--one .f-c{left:40px;top:392px;width:340px}
/* 말로 맡기기 */
.scene--ask{--gx:50%;--gy:52%}
.scene--ask .f-a{left:40px;top:52px;width:392px}
.scene--ask .f-b{left:136px;top:164px;width:452px}
.scene--ask .f-c{left:372px;top:330px;width:300px}
/* 회의에서 목표까지 */
.scene--goal{--gx:56%;--gy:46%}
.scene--goal .f-a{left:24px;top:36px;width:340px}
.scene--goal .f-b{left:296px;top:150px;width:380px}
.scene--goal .f-c{left:92px;top:346px;width:430px}
/* 답하는 AI */
.scene--ai{--gx:44%;--gy:50%}
.scene--ai .f-a{left:336px;top:24px;width:340px}
.scene--ai .f-b{left:44px;top:168px;width:452px}
.scene--ai .f-c{left:200px;top:404px;width:400px}
.appframe mark.cite{color:inherit;border-radius:3px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background:linear-gradient(var(--accent-tint-2),var(--accent-tint-2)) no-repeat 0 0/100% 100%;transition:background-size 1.1s var(--ease) .5s}

/* ── 토큰포스트 사례 ── */
.case__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:28px 64px;align-items:end;margin-bottom:48px}
.case__logo{grid-column:1/-1}
.case__logo .tp{height:34px;width:auto;display:block}
.case__lede{color:var(--ink-3);font-size:18px;line-height:1.7}
.tp--dark{display:none!important}
:root[data-theme="dark"] .tp--light{display:none!important}
:root[data-theme="dark"] .tp--dark{display:block!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tp--light{display:none!important}
  :root:not([data-theme="light"]) .tp--dark{display:block!important}
}
.kpis{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:16px;margin-bottom:16px}
.kpi{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);padding:32px 32px 30px;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:236px}
.kpi__lb{font-size:14px;color:var(--ink-3);font-weight:600}
.kpi__v{font-size:clamp(44px,2.6vw + 20px,68px);font-weight:720;letter-spacing:-.04em;line-height:1.05;margin-top:auto;padding-top:28px;white-space:nowrap}
.kpi__v small{font-size:.38em;font-weight:600;letter-spacing:-.01em;margin-left:6px;color:var(--ink-2)}
.kpi__sub{font-size:13.5px;color:var(--ink-3)}
.kpi--wide{background:var(--cv);box-shadow:none;border-radius:var(--r);color:var(--cv-ink)}
.kpi--wide .hz{left:78%;top:118%;width:150%;height:170%}
.kpi--wide .kpi__lb,.kpi--wide .kpi__sub,.kpi--wide .kpi__v small{color:var(--cv-ink-2)}
.itbl-wrap{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--card-line);overflow:hidden;background:var(--card)}
.itbl{width:100%;border-collapse:collapse;font-size:15px}
.itbl caption{caption-side:top;text-align:left;padding:20px 28px;font-size:14px;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--card-line)}
.itbl th,.itbl td{padding:18px 28px;text-align:left;vertical-align:middle}
.itbl thead th{font-size:13px;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--card-line);padding-block:12px}
.itbl tbody tr+tr th,.itbl tbody tr+tr td{border-top:1px solid var(--card-line)}
.itbl tbody th{font-weight:600;font-size:15.5px}
.itbl tbody th small{display:block;font-weight:450;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.itbl td{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.itbl td.is-goal{color:var(--ink);font-weight:600}
.itbl .cell-save{width:28%}
.isave{display:flex;align-items:center;gap:14px}
.isave b{min-width:5.2em;font-weight:650;color:var(--ink)}
.ibar{flex:1;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;max-width:180px}
.ibar i{display:block;height:100%;border-radius:3px;background:var(--grad);transform-origin:0 50%}
.itbl tfoot th,.itbl tfoot td{border-top:1px solid var(--line-2);font-weight:650;color:var(--ink);font-size:16px}
.fine{margin-top:16px;font-size:13.5px;color:var(--ink-3);max-width:60em}

/* ── 요금 · 마지막 CTA ── */
.pricing{padding-bottom:var(--sec)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);padding:32px 32px 36px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.plan h3{font-size:26px;font-weight:700;letter-spacing:-.025em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan h3 span{font-size:15px;font-weight:550;color:var(--ink-3);letter-spacing:0}
.plan__who{margin-top:10px;color:var(--ink-3);font-size:16px}
.plan__list{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--card-line);align-self:stretch;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--ink-2)}
.plan__list li{display:flex;gap:10px;align-items:baseline}
.plan__list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-3px)}
.plan--inv{background:var(--cv);box-shadow:none;color:var(--cv-ink)}
.plan--inv .hz{left:100%;top:100%;width:160%;height:160%}
.plan--inv h3 span,.plan--inv .plan__who{color:var(--cv-ink-2)}
.plan--inv .plan__list{color:var(--cv-ink-2);border-top-color:var(--cv-line)}
.plan--inv .plan__list li::before{background:var(--j4)}
.cta-band{margin-top:16px;border-radius:24px;padding:88px 32px 96px;display:flex;flex-direction:column;align-items:center;gap:36px;overflow:hidden}
.cta-band .hz{top:96%;width:110%;height:150%}
.cta-band .hz-rim{top:84%;width:300%}
.cta-band__wm{height:44px;width:auto;color:#fff}
.cta-band__btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ── 푸터 ── */
.lfoot{border-top:1px solid var(--line);padding:48px 0 56px}
.lfoot__in{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:start}
.lfoot__brand .wm{height:14px;width:auto;display:block;color:var(--ink)}
.lfoot__brand p{margin-top:12px;color:var(--ink-3);font-size:14px}
.lfoot__nav{display:flex;gap:28px;font-size:14px;color:var(--ink-2)}
.lfoot__nav a:hover{color:var(--ink)}
.lfoot__c{grid-column:1/-1;font-size:13px;color:var(--ink-3);padding-top:24px;border-top:1px solid var(--line)}

/* ───────── 모션 ─────────
   ① 히어로 첫 1초(html.intro): 첫 구절이 흐린 빛에서 맺히고 → 둘째 구절이 마스크에서 올라오고 → 지평선이 밝아지며 앱 창이 기울기에서 선다 → 조각 둘
   ② 기능 카드: 네이티브 sticky + 카드가 화면에 들어올 때 조각이 한 번 자리 잡기 · 앞 카드는 transform/opacity 로 물러남
   ③ 섹션 제목 줄 마스크 · 표 막대 · 수치 카운트업 — 한 번씩.  동작 줄이기·?still 이면 모두 완성 상태 */
[data-step].is-hid{display:none!important}
.appframe .is-paused,.win.is-paused *{animation-play-state:paused!important}
@keyframes larrive{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:no-preference){
  .is-new{animation:larrive .7s var(--ease) both}
  html.intro .hero h1 .ln:nth-child(1)>span{animation:h1soft 1s var(--ease) both}
  html.intro .hero h1 .ln:nth-child(2)>span{animation:lline 1s var(--ease) .32s both}
  html.intro .hero .lead,html.intro .hero__cta{animation:lfade .9s var(--ease) .55s both}
  html.intro .hero .hz{animation:hzup 1.6s var(--ease) .1s both}
  html.intro .hero .hz-rim{animation:rimup 1.6s var(--ease) .1s both}
  html.intro .win{animation:winup 1.2s var(--ease) .42s both}
  html.intro .hfrag--r{animation:fragup .9s var(--ease) 1.05s both}
  html.intro .hfrag--l{animation:fragup .9s var(--ease) 1.2s both}
}
@keyframes h1soft{from{opacity:0;filter:blur(10px);letter-spacing:.02em}}
@keyframes lline{from{transform:translateY(105%)}}
@keyframes lfade{from{opacity:0;transform:translateY(12px)}}
@keyframes hzup{from{opacity:.15;scale:.7 .5}}
@keyframes rimup{from{translate:-50% 90px;opacity:.4}}
@keyframes winup{from{transform:perspective(2200px) rotateX(16deg) translateY(90px) scale(.94);opacity:.4}}
@keyframes fragup{from{opacity:0;transform:translateY(22px) scale(.96)}}

/* 기능 카드 장면: 대기는 「보이는」 상태(조각이 약간 아래·작게) → 들어오면 제자리로 */
@media (prefers-reduced-motion:no-preference){
  .scene .frag{transition:transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--k,0) * 120ms + 80ms)}
  .scene.armed .frag{transform:translateY(calc(26px + var(--k,0) * 14px)) scale(.965);filter:saturate(.6) brightness(.92)}
  .scene.armed .scene__glow{opacity:calc(var(--glow-op) * .3)}
  .scene.armed .appframe mark.cite{background-size:0% 100%}
}

/* 레이아웃 모션 — JS 가 .m 과 [data-m]·--i 를 붙이고, 묶음이 화면에 들어오면 .is-in */
@property --i{syntax:'<number>';inherits:false;initial-value:0}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .m [data-m="title"]:not(.is-in){transform:translateY(108%)}
  .m [data-m="rise"]:not(.is-in){opacity:.3;transform:translateY(24px)}
  .m [data-m="bar"]:not(.is-in){transform:scaleX(0)}
  .m [data-m].is-in{transition:opacity .8s var(--ez),transform .8s var(--ez);transition-delay:calc(var(--i) * 80ms)}
  .m [data-m="title"].is-in{transition-duration:.9s}
  .m [data-m="bar"].is-in{transition-duration:.9s;transition-delay:calc(240ms + var(--i) * 90ms)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scard,.scard::after{transition:none}
}

/* ── 반응형 ── */
@media (max-width:1279px){.hfrag{display:none}}
@media (max-width:1100px){
  :root{--sec:112px}
  .nav__links{display:none}
  .scard,.scard--rev{position:relative;top:auto;height:auto;grid-template-columns:1fr;transform:none}
  .scard::after{display:none}
  .scard--rev .scard__copy,.scard__copy{order:0;padding:48px 48px 8px}
  .scene,.scard--rev .scene{justify-self:center}
  .pains__in{grid-template-columns:1fr;padding:48px}
  .sec-head,.case__head{grid-template-columns:1fr;gap:16px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi--wide{grid-column:1/-1}
  .plans{grid-template-columns:1fr 1fr}
  .plan--inv{grid-column:1/-1}
}
@media (max-width:720px){
  :root{--gut:16px;--sec:88px}
  body{font-size:16px}
  .nav__in{gap:16px}
  .nav__login{display:none}
  .hero{padding:8px 8px 0}
  .hero__canvas{border-radius:22px;padding:64px 16px 0}
  .hero h1{font-size:clamp(40px,11.4vw,48px);letter-spacing:-.04em}
  .lead{font-size:16px;margin-top:20px}
  .lead br{display:none}
  .hero__cta{margin-top:28px;flex-direction:column;align-items:stretch;padding-inline:8px}
  .lstage{margin:48px auto -180px}
  .lstage__ctl{margin-top:196px}
  .win{border-radius:12px}
  .win__title{display:none}
  .win .appframe{height:600px}

  .hero .hz-rim{width:520%}
  .stack{gap:20px}
  .scard__copy,.scard--rev .scard__copy{padding:32px 24px 4px}
  .scard h3,.scard .h3{margin-top:20px;font-size:30px}
  .scard__copy p{font-size:16px;margin-top:14px}
  .scene{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;padding:28px 16px 32px}
  .scene .frag{position:relative;left:auto!important;top:auto!important;width:min(100%,380px)!important}
  .scene .frag+.frag{margin-top:-14px}
  .scene .f-a{display:none}
  .scene--ask .f-a{display:block}
  .scene--ask .f-c{display:none}
  .scene--ask .f-b{margin-inline-start:24px;width:min(100% - 24px,380px)!important}
  .scene__glow{width:320px;height:300px}
  .pains__in{padding:32px 24px;gap:28px}
  .pains__list li{grid-template-columns:40px minmax(0,1fr);gap:16px;padding:18px 0}
  .pi{width:40px;height:40px;font-size:19px;border-radius:10px}
  .sec-head{margin-bottom:32px}
  .case__head{margin-bottom:32px}
  .case__logo .tp{height:28px}
  .kpis{grid-template-columns:1fr;gap:12px}
  .kpi{padding:24px;min-height:0}
  .kpi__v{padding-top:12px}
  .itbl-wrap{box-shadow:none;border-radius:0;background:none}
  .itbl caption{display:block;padding:14px 0}
  .itbl thead{display:none}
  .itbl,.itbl tbody,.itbl tfoot,.itbl tr{display:block}
  .itbl tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:18px 0;border-top:1px solid var(--line)}
  .itbl tbody tr+tr th,.itbl tbody tr+tr td{border-top:0}
  .itbl th,.itbl td{padding:0;display:block;white-space:normal}
  .itbl tbody th{grid-column:1/-1;margin-bottom:4px}
  .itbl tbody td::before{content:attr(data-lb);display:block;font-size:12px;color:var(--ink-3);font-weight:550}
  .itbl tbody td.cell-save{grid-column:1/-1;width:auto;margin-top:6px}
  .itbl tfoot tr{display:flex;justify-content:space-between;padding:16px;border-radius:12px;background:var(--bg-2)}
  .itbl tfoot th,.itbl tfoot td{border:0;background:none}
  .itbl tfoot td:empty{display:none}
  .plans{grid-template-columns:1fr;gap:12px}
  .plan{padding:24px 24px 28px}
  .cta-band{padding:56px 20px 64px;border-radius:20px}
  .cta-band__wm{height:30px}
  .cta-band__btns{flex-direction:column;align-self:stretch}
  .lfoot__in{grid-template-columns:1fr}
  .lfoot__nav{flex-wrap:wrap;gap:16px 24px}
}
@media (max-height:700px) and (min-width:1101px){.scard{position:relative;top:auto}}