/* Voicecape — marketing site. Tokens from brand/foundation.md (dark-led). No frameworks. */

/* ── Site-local values. Every colour, radius, duration and easing comes from
   assets/tokens.css, which is generated from brand/tokens.json. Do not add a
   hex, a radius or a duration here — add it to the token source and regenerate. ── */
:root{
  --g:var(--s-gutter);
  --maxw:1120px;
  --font:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@font-face{font-family:"Geist";src:url("/fonts/GeistVF.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/GeistMonoVF.woff2") format("woff2");font-weight:100 900;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);background:var(--canvas);color:var(--label);
  font-size:16px;line-height:1.6;letter-spacing:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
:lang(ko) body, body:lang(ko){word-break:keep-all}
img,svg{max-width:100%;display:block}
a{color:var(--signal-fg);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
::selection{background:rgb(var(--signal-rgb) / .35)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--g)}
.section{padding:96px 0}
@media(max-width:720px){.section{padding:64px 0}}

h1,h2,h3{font-weight:640;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(40px,7vw,72px);font-weight:680}
h2{font-size:clamp(28px,4vw,40px)}
h3{font-size:19px;letter-spacing:-.01em}
.lead{font-size:clamp(17px,2vw,20px);color:var(--label-n);max-width:620px;text-wrap:pretty}
.kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-fg)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ── Nav (상시 blur 1곳 = 예산 전부) ── */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  background:rgb(var(--canvas-rgb) / .72);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-standard) var(--ease-out);
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:64px}
.nav .brand{display:flex;align-items:center;gap:10px;color:var(--label);font-weight:640;font-size:17px;letter-spacing:-.02em}
.nav .brand:hover{text-decoration:none}
.nav .brand svg{width:26px;height:26px}
.nav-links{display:flex;gap:24px;margin-left:8px}
.nav-links a{color:var(--label-a);font-size:14px;font-weight:500}
.nav-links a:hover{color:var(--label);text-decoration:none}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{font-size:13px;color:var(--label-a);font-weight:500}
.lang:hover{color:var(--label);text-decoration:none}
@media(max-width:860px){.nav-links{display:none}}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--r-control);
  font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;border:1px solid transparent;
  transition:background var(--t-quick) var(--ease-out),border-color var(--t-quick) var(--ease-out),transform var(--t-quick) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cta);color:var(--static-white)}
.btn-primary:hover{background:var(--cta-hover)}
.btn-ghost{background:transparent;color:var(--label);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--label-a)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}

/* ── Hero ── */
.hero{position:relative;padding:172px 0 96px;overflow:hidden}
.hero-glow{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:min(920px,120vw);aspect-ratio:1.6;border-radius:50%;
  background:radial-gradient(ellipse at center,rgb(var(--signal-rgb) / .16) 0%,rgb(var(--live-rgb) / .05) 45%,transparent 70%);
  pointer-events:none;filter:blur(2px);
}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hero .lead{max-width:560px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.hero-note{font-size:13px;color:var(--label-a)}

/* Demo panel — 브랜드 모먼트(말→글) 전용 무대 */
.demo{
  position:relative;margin-top:56px;width:min(760px,100%);
  background:linear-gradient(180deg,rgb(var(--card-rgb) / .92),rgb(var(--canvas-alt-rgb) / .92));
  border:1px solid var(--line);border-radius:var(--r-feature);
  box-shadow:0 24px 80px rgb(var(--static-ink-rgb) / .5), inset 0 1px 0 rgb(var(--ink-rgb) / .06);
  padding:28px 28px 24px;text-align:left;
}
.demo-chrome{display:flex;gap:6px;margin-bottom:20px}
.demo-chrome i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.demo-doc{font-family:var(--mono);font-size:clamp(14px,2.2vw,17px);line-height:1.75;min-height:96px;color:var(--label-n)}
.demo-doc .muted{color:var(--label-a);text-decoration:line-through;text-decoration-color:rgb(var(--ink-rgb) / .35)}
.demo-doc .final{color:var(--label)}
.caret{display:inline-block;width:2px;height:1.15em;background:var(--signal);vertical-align:text-bottom;margin-left:1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Floating Voice Bar (제품 실UI 인용 = 의미 결박 floating) */
.voicebar{
  position:absolute;right:28px;bottom:-22px;
  display:flex;align-items:center;gap:10px;
  background:rgb(var(--card-rgb) / .9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-strong);border-radius:999px;
  padding:10px 18px;font-size:13px;font-weight:500;color:var(--label-n);
  box-shadow:0 12px 40px rgb(var(--static-ink-rgb) / .45);
}
.voicebar .dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 12px rgb(var(--live-rgb) / .8)}
.voicebar[data-state="processing"] .dot{background:var(--signal);box-shadow:0 0 12px rgb(var(--signal-rgb) / .8)}
.voicebar[data-state="inserted"] .dot{background:var(--label-a);box-shadow:none}
.voicebar .wave{display:flex;align-items:center;gap:2.5px;height:14px}
.voicebar .wave i{width:2.5px;border-radius:2px;background:var(--live);height:6px}
.voicebar[data-state="listening"] .wave i{animation:wv .9s ease-in-out infinite alternate}
.voicebar .wave i:nth-child(2){animation-delay:.12s}.voicebar .wave i:nth-child(3){animation-delay:.24s}
.voicebar .wave i:nth-child(4){animation-delay:.36s}.voicebar .wave i:nth-child(5){animation-delay:.48s}
@keyframes wv{from{height:4px}to{height:13px}}
@media(max-width:600px){.voicebar{right:14px}}

/* ── Chips marquee (works-where-you-type) ── */
.band{padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--canvas)}
.band .label-row{text-align:center;font-size:13px;color:var(--label-a);margin-bottom:20px}
.chips-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chips{display:flex;gap:12px;width:max-content;animation:marq 36s linear infinite}
.chips span{
  flex:none;padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  color:var(--label-a);font-size:14px;font-weight:500;background:var(--canvas-alt);
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── Metrics ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-feature);overflow:hidden}
.metric{background:var(--canvas-alt);padding:32px 24px;text-align:center}
.metric b{display:block;font-size:clamp(28px,4vw,40px);font-weight:680;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--label)}
.metric span{font-size:13.5px;color:var(--label-a)}
@media(max-width:820px){.metrics{grid-template-columns:1fr 1fr}}

/* ── Bento ── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.cardb{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-feature);
  padding:28px;position:relative;overflow:hidden;
  transition:border-color var(--t-standard) var(--ease-out),transform var(--t-standard) var(--ease-out);
}
.cardb:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.cardb h3{margin-bottom:8px}
.cardb p{font-size:14.5px;color:var(--label-a);text-wrap:pretty}
.cardb .icon{width:36px;height:36px;border-radius:10px;background:rgb(var(--signal-rgb) / .12);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cardb .icon svg{width:19px;height:19px;stroke:var(--signal-fg)}
.b-lg{grid-column:span 4}.b-md{grid-column:span 3}.b-sm{grid-column:span 2}
@media(max-width:860px){.b-lg,.b-md,.b-sm{grid-column:span 6}}

.beforeafter{margin-top:20px;font-family:var(--mono);font-size:13.5px;line-height:1.8;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px}
.beforeafter .row-b{color:var(--label-a)}
.beforeafter .row-b s{text-decoration-color:rgb(var(--warning-rgb) / .6)}
.beforeafter .row-a{color:var(--label)}
.beforeafter .arrow{color:var(--live);padding:2px 0;display:block}

/* ── Contract (Cleaned, never rewritten) ── */
.contract{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.contract .col{background:var(--card);border:1px solid var(--line);border-radius:var(--r-feature);padding:28px}
.contract h3{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.contract .ok{color:var(--live)}.contract .no{color:var(--label-a)}
.contract ul{list-style:none}
.contract li{padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--label-n);display:flex;gap:10px}
.contract li:first-child{border-top:0}
.contract li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;margin-top:8px}
.contract .keep li::before{background:var(--live)}
.contract .never li::before{border:1.5px solid var(--label-as);background:transparent}
@media(max-width:820px){.contract{grid-template-columns:1fr}}

/* ── Privacy panel ── */
.privacy{
  background:linear-gradient(180deg,var(--card),var(--canvas-alt));
  border:1px solid var(--line);border-radius:24px;padding:clamp(32px,6vw,64px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.privacy ul{list-style:none;margin-top:20px}
.privacy li{display:flex;gap:12px;padding:10px 0;color:var(--label-n);font-size:15px}
.privacy li svg{flex:none;width:18px;height:18px;stroke:var(--live);margin-top:3px}
.net-card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-feature);padding:24px;font-family:var(--mono);font-size:13px;line-height:2}
.net-card .h{color:var(--label-a);font-family:var(--font);font-weight:600;margin-bottom:8px;font-size:13px}
.net-card .off{color:var(--label-a)}
.net-card .off b{color:var(--live);font-weight:500}
@media(max-width:860px){.privacy{grid-template-columns:1fr}}

/* ── Personas marquee (리뷰 마키 컴포넌트 — 프리런치: 페르소나 카드, 출시 후 실리뷰 스왑) ── */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);cursor:grab;margin-top:48px}
.marquee.dragging{cursor:grabbing}
.mq-track{display:flex;gap:16px;width:max-content;will-change:transform}
.mq-card{
  flex:none;width:340px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-feature);padding:24px;
  transition:border-color var(--t-standard) var(--ease-out);
}
.mq-card:hover{border-color:var(--line-strong)}
.mq-card p{font-size:14.5px;color:var(--label-n);line-height:1.65;text-wrap:pretty}
.mq-card .who{display:flex;align-items:center;gap:10px;margin-top:18px}
.mq-card .who i{width:30px;height:30px;border-radius:50%;background:rgb(var(--signal-rgb) / .14);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:var(--signal-fg);font-weight:600}
.mq-card .who span{font-size:13px;color:var(--label-a)}
@media(max-width:480px){.mq-card{width:280px}}

/* ── Pricing ── */
.price-card{
  max-width:520px;margin:48px auto 0;background:var(--card);
  border:1px solid var(--line-strong);border-radius:24px;padding:40px;text-align:center;
  position:relative;
}
.price-card::before{
  content:"";position:absolute;inset:-1px;border-radius:24px;padding:1px;
  background:linear-gradient(135deg,rgb(var(--signal-rgb) / .5),transparent 40%,transparent 60%,rgb(var(--live-rgb) / .35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.price-num{font-size:64px;font-weight:680;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-num small{font-size:22px;font-weight:600;vertical-align:baseline;margin-right:2px}
.price-sub{color:var(--label-a);font-size:14px;margin-top:4px}
.price-list{list-style:none;margin:28px 0;text-align:left}
.price-list li{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--label-n)}
.price-list li:first-child{border-top:0}
.price-list svg{flex:none;width:18px;height:18px;stroke:var(--live);margin-top:2px}
.price-note{font-size:12.5px;color:var(--label-a);margin-top:14px}

/* ── FAQ ── */
.faq{max-width:720px;margin:48px auto 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 8px;display:flex;justify-content:space-between;gap:16px;
  font-weight:600;font-size:16px;color:var(--label);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--label-a);font-weight:400;font-size:20px;line-height:1;transition:transform var(--t-quick) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 8px 20px;color:var(--label-a);font-size:14.5px;max-width:640px;text-wrap:pretty}

/* ── Final CTA ── */
.final{position:relative;text-align:center;padding:128px 0;overflow:hidden}
.final .hero-glow{top:50%}
.final .mark{width:56px;height:56px;margin:0 auto 28px}

/* ── Footer ── */
footer{border-top:1px solid var(--line);padding:48px 0;font-size:13.5px;color:var(--label-a)}
.foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot .brand{display:flex;align-items:center;gap:8px;color:var(--label-a)}
.foot .brand svg{width:20px;height:20px}
/* wrap is not optional: the footer carries ten links once legal pages exist, and a
   nowrap row of ten pushed the whole document to 606px on a 360px phone. */
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-left:auto}
.foot a{color:var(--label-a);padding:4px 0;min-height:24px;display:inline-flex;align-items:center}
.foot a:hover{color:var(--label)}
@media(max-width:720px){
  .foot{flex-direction:column;align-items:flex-start;gap:20px}
  .foot nav{margin-left:0}
}

/* ── Reveal on scroll ──
   Gated on (scripting: enabled) instead of a <noscript> override. If JavaScript is off —
   or the browser is too old to know the query — the rule never applies and the content is
   simply visible. Nothing can leave a section hidden with no way to reveal it, and the
   page needs no inline <style>, so the CSP can stay at style-src 'self'. */
@media (scripting: enabled){
  .rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-gentle) var(--ease-out),transform var(--t-gentle) var(--ease-out)}
  .rv.in{opacity:1;transform:none}
}

/* ── Reduced motion: 정보 손실 0 ── */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .chips,.mq-track{animation:none!important}
  .caret{animation:none}
  .voicebar .wave i{animation:none!important}
  .cardb:hover{transform:none}
}

/* 접근성·크롤러용 시각적 숨김 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Skip link — the first thing a keyboard user meets ── */
.skip{
  position:absolute;left:var(--s-lg);top:-64px;z-index:100;
  padding:10px 16px;border-radius:var(--r-control);
  background:var(--card);color:var(--label);border:1px solid var(--line-strong);
  font-size:14px;font-weight:600;
  transition:top var(--t-quick) var(--ease-out);
}
.skip:focus{top:var(--s-md);text-decoration:none}

/* ── Long-form documents (legal, download) ──
   Measure is capped at ~68 characters: past that the eye loses the line return, and a
   refund policy nobody can read is a refund policy nobody trusts. */
.doc{padding:128px 0 96px}
.doc .wrap{max-width:720px}
.doc h1{font-size:clamp(32px,5vw,44px);margin-top:8px}
.doc .lead{margin-top:16px}
.doc h2{
  font-size:19px;line-height:1.4;letter-spacing:-.01em;
  margin:44px 0 12px;padding-top:24px;border-top:1px solid var(--line);
}
.doc p{color:var(--label-n);margin-bottom:14px;text-wrap:pretty;max-width:64ch}
.doc ul{margin:0 0 14px;padding-left:20px;color:var(--label-n);max-width:64ch}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--label-as)}
.doc-meta{font-size:13px;color:var(--label-a);margin-top:20px}
.doc-back{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.doc-lead h2{border-top:0;padding-top:0;margin-top:56px}
@media(max-width:720px){.doc{padding:96px 0 72px}}

/* ── Download ── */
.dl-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:36px 0 0;max-width:none}
@media(max-width:560px){.dl-grid{grid-template-columns:1fr}}
.dl-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;margin:0;
}
.dl-card h3{font-size:16px;margin-bottom:6px}
.dl-req{font-size:13px;color:var(--label-a);margin-bottom:8px}
.dl-note{font-size:13px;color:var(--label-a);margin:0}

/* Status panel. Uses the info tint rather than a warning colour: nothing is wrong,
   there is simply nothing to download yet. */
.notice{
  margin:36px 0 8px;padding:24px;border-radius:var(--r-feature);
  background:var(--tint-info);border:1px solid var(--line);
}
.notice h2{margin:0 0 10px;border-top:0;padding-top:0;font-size:17px;color:var(--signal-fg)}
.notice p{color:var(--label-n);margin-bottom:16px}
:root[data-theme="dark"] .notice h2{color:var(--signal-fg)}

/* Final CTA 내부 간격 — 인라인 style 대신 클래스로(CSP·일관성) */
.final .lead{margin:16px auto 32px}
.final .hero-note{margin-top:16px}
.price .btn{width:100%}

/* ── Touch targets ──
   WCAG 2.5.8 exempts links inline in a sentence; everything below is a standalone
   control, so each one gets a real 40px+ box even when its label is short. */
.nav .brand{padding:8px 0;min-height:40px}
.lang{display:inline-flex;align-items:center;min-height:40px;padding:0 8px}
.btn-sm{min-height:40px}
.doc-back a{display:inline-flex;align-items:center;min-height:40px}

/* ── 사업자 표시사항 (전자상거래법 §13) ──
   법이 지정한 항목만 담는 정의 목록. 장식하지 않는다 — 확인하러 온 사람이 빨리 찾고
   나머지 독자에게는 조용해야 한다. */
.biz{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:8px 0 14px;font-size:13.5px}
.biz dt{color:var(--label-a)}
.biz dd{color:var(--label-n);margin:0}
@media(max-width:520px){.biz{grid-template-columns:1fr;gap:2px}.biz dt{margin-top:8px}}

/* 초기화면 최소 표시 — 한 줄, 푸터 최하단 */
.foot-biz{
  border-top:1px solid var(--line);margin-top:24px;padding-top:16px;
  font-size:12px;line-height:1.7;color:var(--label-a);
}
.foot-biz a{color:var(--label-a);text-decoration:underline;text-underline-offset:2px}

/* ── 404 ──
   존재하지 않는 주소에 도달한 사람에게 필요한 건 사과문이 아니라 다음 목적지다. */
.brand-404{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--label);margin-bottom:32px}
.brand-404 svg{width:26px;height:26px}
.brand-404:hover{text-decoration:none}
.nf-links{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:2px;max-width:320px}
.nf-links a{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--label-n)}
.nf-links a:hover{color:var(--label);text-decoration:none}