@font-face{font-family:"Pretendard Variable";font-weight:45 920;font-style:normal;font-display:swap;src:url("/fonts/PretendardVariable.woff2") format("woff2")}
:root{
  --bg:#F7F8FA; --bg-2:#EEF1F5; --paper:#FFFFFF; --ink:#0E1A26; --ink-2:#3A4858; --ink-3:#6A7786;
  --line:#E2E6EB; --line-2:#CBD3DB; --navy:#163A5F; --navy-2:#0F2C4A;
  --blue:#2563EB; --blue-2:#1D4FD7; --blue-weak:#E8EFFD; --amber:#94560A; --amber-weak:#FDF1DA; --ok:#15803D; --ok-weak:#E3F4E8;
  --grid-a:rgba(22,58,95,.045); --grid-b:rgba(22,58,95,.08);
  --shadow:0 1px 2px rgba(14,26,38,.05),0 10px 30px -12px rgba(14,26,38,.16);
  --shadow-lg:0 2px 4px rgba(14,26,38,.04),0 30px 60px -24px rgba(14,26,38,.28);
  --app-bg:#E8ECF1; --app-top:#FFFFFF; --app-panel:#FFFFFF; --app-line:#D9DFE6; --app-text:#334252; --app-mute:#8794A2; --app-row:#F2F5F8;
  --dark:#0A1520; --dark-2:#0F1D2A; --dark-3:#16273A; --dark-line:#22364B; --dark-ink:#E8EEF4; --dark-mute:#90A3B6;
  --font:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --r:10px; --wrap:1180px; --on-blue:#FFFFFF;
  --ease:cubic-bezier(.2,.8,.2,1);
  --card-grad:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 100%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(14,26,38,.05),0 2px 0 -1px #E6EAEF,0 8px 20px -14px rgba(14,26,38,.18);
  --card-shadow-hover:inset 0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(14,26,38,.05),0 4px 0 -1px #E3E8ED,0 26px 40px -22px rgba(14,26,38,.3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1219; --bg-2:#111A23; --paper:#121C26; --ink:#E8EDF3; --ink-2:#B6C2CE; --ink-3:#8796A6;
    --line:#1F2C39; --line-2:#2D3D4E; --navy:#173D63; --navy-2:#12304F;
    --blue:#6B9BF5; --blue-2:#8DB2F8; --blue-weak:#15243A; --amber:#F0B13A; --amber-weak:#2B2210; --ok:#4ADE80; --ok-weak:#12301D;
    --grid-a:rgba(150,180,215,.035); --grid-b:rgba(150,180,215,.065);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.5); --shadow-lg:0 30px 60px -24px rgba(0,0,0,.6);
    --app-bg:#0F1720; --app-top:#16212C; --app-panel:#141E28; --app-line:#25333F; --app-text:#C3CEDA; --app-mute:#7F8E9D; --app-row:#1A2633; --on-blue:#07121D;
    --card-grad:linear-gradient(180deg,#16212C 0%,#121C26 100%);
    --card-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.3),0 2px 0 -1px #0A1119,0 8px 20px -14px rgba(0,0,0,.5);
    --card-shadow-hover:inset 0 1px 0 rgba(255,255,255,.07),0 2px 3px rgba(0,0,0,.3),0 4px 0 -1px #0A1119,0 26px 40px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1219; --bg-2:#111A23; --paper:#121C26; --ink:#E8EDF3; --ink-2:#B6C2CE; --ink-3:#8796A6;
  --line:#1F2C39; --line-2:#2D3D4E; --navy:#173D63; --navy-2:#12304F;
  --blue:#6B9BF5; --blue-2:#8DB2F8; --blue-weak:#15243A; --amber:#F0B13A; --amber-weak:#2B2210; --ok:#4ADE80; --ok-weak:#12301D;
  --grid-a:rgba(150,180,215,.035); --grid-b:rgba(150,180,215,.065);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.5); --shadow-lg:0 30px 60px -24px rgba(0,0,0,.6);
  --app-bg:#0F1720; --app-top:#16212C; --app-panel:#141E28; --app-line:#25333F; --app-text:#C3CEDA; --app-mute:#7F8E9D; --app-row:#1A2633; --on-blue:#07121D;
  --card-grad:linear-gradient(180deg,#16212C 0%,#121C26 100%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.3),0 2px 0 -1px #0A1119,0 8px 20px -14px rgba(0,0,0,.5);
  --card-shadow-hover:inset 0 1px 0 rgba(255,255,255,.07),0 2px 3px rgba(0,0,0,.3),0 4px 0 -1px #0A1119,0 26px 40px -22px rgba(0,0,0,.7);
}
/* 카드 공통 — 살짝 입체 + 올리면 떠오름(부드럽게) */
.why-c,.plan,.ai-card,.f-pt,.s3,.stat-card,.car-tab.act,.ch,.perk,.step3,.auth-box,.chat,.zz-v,.lens-card{background:var(--card-grad);box-shadow:var(--card-shadow)}
.why-c,.plan,.ai-card,.f-pt,.s3,.perk,.step3{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.why-c:hover,.plan:hover,.ai-card:hover,.f-pt:hover,.s3:hover,.perk:hover,.step3:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em;line-height:1.2;word-break:keep-all}
p{margin:0;word-break:keep-all}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
h1[tabindex="-1"]:focus{outline:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 진행 막대 · 리본 · 머리줄 */
.progress{position:fixed;left:0;top:0;height:2px;width:0;background:var(--blue);z-index:60;transition:width .1s linear}
.ribbon{background:var(--navy);color:#DCE7F3;font-size:13.5px}
.ribbon .wrap{display:flex;align-items:center;justify-content:center;gap:12px;min-height:38px;position:relative}
.ribbon b{color:#fff;font-weight:600}
.ribbon .dday{font:600 12px var(--mono);background:rgba(255,255,255,.12);padding:2px 8px;border-radius:99px;color:#fff}
.ribbon a.go{color:#fff;font-weight:600;display:inline-flex;gap:4px;align-items:center}
.ribbon a.go:hover span{transform:translateX(3px)}
.ribbon a.go span{transition:transform .2s}
.ribbon .x{position:absolute;right:16px;background:none;border:0;color:#9FB4CA;width:28px;height:28px;border-radius:6px;font-size:16px}
.ribbon .x:hover{background:rgba(255,255,255,.1);color:#fff}

.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.nav-in{display:flex;align-items:center;height:64px;gap:28px}
.logo{display:inline-flex;align-items:center;gap:1px;font:800 23px/1 var(--font);letter-spacing:-.055em;color:var(--ink)}
.logo .lx{width:20px;height:20px;margin-left:1px;margin-top:2px}
.logo .lx path{stroke:var(--blue);stroke-width:3.4;stroke-linecap:round}
.logo .lx circle{fill:var(--blue)}
.logo:hover .lx circle{animation:jdot .6s ease}
@keyframes jdot{50%{transform:scale(1.6)}}
.logo .lx circle{transform-box:fill-box;transform-origin:center}
.menu{display:flex;align-items:center;gap:2px;flex:1}
.m-item{position:relative;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 13px;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink-2);background:none;border:0;transition:color .15s,background .15s}
.m-item:hover,.m-item[aria-expanded="true"]{color:var(--ink);background:var(--bg-2)}
.m-item[aria-current="page"]{color:var(--ink)}
.m-item[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:-13px;height:2px;background:var(--blue);border-radius:2px}
.m-item .chev{width:10px;height:10px;transition:transform .2s}
.m-item[aria-expanded="true"] .chev{transform:rotate(180deg)}
.new{font:700 9.5px/1 var(--mono);color:var(--blue);background:var(--blue-weak);padding:3px 5px;border-radius:4px;letter-spacing:.04em}
.nav-r{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--paper)}
.lang button{border:0;background:none;font:600 12px var(--mono);padding:5px 8px;border-radius:6px;color:var(--ink-3)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.login-l{font-size:15px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:8px}
.login-l:hover{color:var(--ink);background:var(--bg-2)}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.burger i{display:block;width:16px;height:2px;background:var(--ink);margin:3px auto;border-radius:2px;transition:transform .25s,opacity .2s}
.nav.m-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.m-open .burger i:nth-child(2){opacity:0}
.nav.m-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* 펼침 메뉴 */
.dd{position:relative}
.mega{position:absolute;left:-12px;top:calc(100% + 12px);width:640px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:top left;transition:opacity .21s,transform .21s,visibility 0s .21s}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .21s,transform .22s cubic-bezier(.2,.9,.3,1.1)}
.mega h6{margin:8px 12px 6px;font:600 11px var(--mono);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.mega a.mi{display:flex;gap:12px;padding:10px 12px;border-radius:10px;transition:background .15s}
.mega a.mi:hover{background:var(--bg-2)}
.mega a.mi:hover .mi-ic{border-color:var(--blue);color:var(--blue)}
.mi-ic{flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--ink-2);background:var(--paper);transition:border-color .15s,color .15s}
.mi-ic svg{width:18px;height:18px}
.mi b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.mi > span:last-child > span{display:block;font-size:13px;color:var(--ink-3);line-height:1.45}
.mega .feat-l a{display:flex;justify-content:space-between;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-2)}
.mega .feat-l a:hover{background:var(--bg-2);color:var(--ink)}
.mega .feat-l a em{font:500 11px var(--mono);color:var(--ink-3);font-style:normal}
.mega .promo{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:12px 14px;border-radius:10px;background:var(--bg-2);font-size:13.5px;color:var(--ink-2)}
.mega .promo a{font-weight:600;color:var(--blue)}

/* 모바일 메뉴 */
.mobile{display:none}
@media (max-width:960px){
  .menu,.nav-r .login-l,.nav-r .lang{display:none}
  .burger{display:block}
  .nav-in{gap:12px}.nav-in .logo{flex:1}
  .mobile{display:block;position:fixed;inset:64px 0 0;background:var(--bg);z-index:49;padding:12px 20px 40px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .25s,visibility 0s .25s}
  .nav.m-open + .mobile{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s}
  .mobile a{display:flex;justify-content:space-between;padding:15px 4px;border-bottom:1px solid var(--line);font-size:18px;font-weight:600}
  .mobile .m-sub a{font-size:15px;font-weight:500;color:var(--ink-2);padding:11px 4px 11px 16px}
  .mobile .m-cta{display:grid;gap:10px;margin-top:22px}
  .mobile .lang{display:inline-flex;margin-top:18px}
}
@media (max-width:560px){ .nav-r .btn{display:none} .ribbon .wrap{font-size:12.5px;padding-right:44px;justify-content:flex-start;gap:8px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px} }

/* ── 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:9px;background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 88%,#fff) 0%,var(--blue) 55%,var(--blue-2) 100%);color:var(--on-blue);font-weight:600;font-size:15px;border:1px solid var(--blue-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(14,26,38,.12),0 3px 0 -1px color-mix(in srgb,var(--blue-2) 70%,#000 10%);transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 3px rgba(14,26,38,.1),0 14px 26px -12px color-mix(in srgb,var(--blue) 65%,transparent),0 5px 0 -1px color-mix(in srgb,var(--blue-2) 70%,#000 10%)}
.btn:active{transform:translateY(1px);transition-duration:.08s;box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 1px 0 0 color-mix(in srgb,var(--blue-2) 70%,#000 10%)}
.btn .arr{display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn.lg{height:50px;padding:0 22px;font-size:16px;border-radius:11px}
.btn.sm{height:34px;padding:0 13px;font-size:14px;border-radius:8px}
.btn.ghost{background:linear-gradient(180deg,var(--paper),var(--bg-2));color:var(--ink);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(14,26,38,.06),0 3px 0 -1px var(--line-2)}
.btn.ghost:hover{filter:none;border-color:var(--ink-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 3px rgba(14,26,38,.06),0 14px 24px -14px rgba(14,26,38,.3),0 5px 0 -1px var(--line-2)}
.btn.ghost:active{box-shadow:inset 0 2px 3px rgba(14,26,38,.1),0 1px 0 0 var(--line-2)}
.btn.dark{background:linear-gradient(180deg,#fff,#E9EFF6);color:#0A1520;border-color:#D5DEE8;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.25),0 3px 0 -1px #B8C4D2}
.btn.dark:hover{filter:none;box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(0,0,0,.25),0 16px 26px -12px rgba(0,0,0,.55),0 5px 0 -1px #B8C4D2}
.btn.dark:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.12),0 1px 0 0 #B8C4D2}
.btn.line-d{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:#E8EEF4;border-color:#36506B;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 0 -1px #1C2F44}
.btn.line-d:hover{filter:none;border-color:#6F8CAA;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 24px -14px rgba(0,0,0,.6),0 5px 0 -1px #1C2F44}
.btn.line-d:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.3),0 1px 0 0 #1C2F44}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:16px;height:16px}

/* ── 페이지 */
.page{display:none}
.page.cur{display:block;animation:pgIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rvl{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rvl.in{opacity:1;transform:none}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.kicker::before{content:"";width:14px;height:2px;background:currentColor;border-radius:2px}
.sec{padding:120px 0}
.sec.tight{padding:90px 0}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin:16px 0 16px}
.sec-head p{font-size:18px;color:var(--ink-2);line-height:1.65}
.sec-head.c{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.c .kicker{justify-content:center}

/* ── 홈: 첫 화면 */
.hero{position:relative;padding:76px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-b) 1px,transparent 1px),linear-gradient(90deg,var(--grid-b) 1px,transparent 1px),linear-gradient(var(--grid-a) 1px,transparent 1px),linear-gradient(90deg,var(--grid-a) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 30%,transparent 75%);pointer-events:none}
.hero .corner{position:absolute;width:22px;height:22px;border-color:var(--line-2);border-style:solid;opacity:.9}
.hero .corner.tl{left:24px;top:24px;border-width:1.5px 0 0 1.5px}.hero .corner.tr{right:24px;top:24px;border-width:1.5px 1.5px 0 0}
.hero-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border:1px solid var(--line);border-radius:99px;background:var(--paper);font-size:14px;color:var(--ink-2);box-shadow:0 1px 2px rgba(0,0,0,.03);transition:border-color .2s}
.eyebrow:hover{border-color:var(--blue)}
.eyebrow .arr{color:var(--blue);transition:transform .2s}
.eyebrow:hover .arr{transform:translateX(3px)}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ok);opacity:0;animation:ping 2s infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.h-hero{margin:26px 0 22px;font-size:clamp(42px,7.2vw,86px);font-weight:900;letter-spacing:-.05em;line-height:1.04}
.h-hero .l1{display:block;color:var(--ink-2);font-weight:800}
.h-hero .u{position:relative;display:inline-block;padding:0 .04em}
.wire-u{position:absolute;left:0;right:-.18em;bottom:-.04em;width:calc(100% + .18em);height:.2em;overflow:visible}
.wire-u path{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards}
.wire-u circle{fill:var(--blue);opacity:0;animation:pop .3s 1.5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.4)}100%{opacity:1;transform:none}}
.wire-u circle{transform-box:fill-box;transform-origin:center}
.lead{max-width:640px;font-size:clamp(17px,2vw,20px);color:var(--ink-2);line-height:1.65}
.cta-row{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.facts{display:flex;gap:22px;margin:24px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-3);flex-wrap:wrap;justify-content:center}
.facts li{display:inline-flex;align-items:center;gap:7px}
.facts li::before{content:"";width:14px;height:14px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* 데모 창 */
.demo-wrap{position:relative;max-width:1240px;margin:60px auto 0;padding:0 24px;perspective:1600px}
.demo-tilt{transform-origin:50% 0;will-change:transform;transition:transform .08s linear}
.win{background:var(--app-top);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.win-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:var(--app-panel);border-bottom:1px solid var(--app-line)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:var(--app-line)}
.win-bar .url{margin:0 auto;font:500 12px var(--mono);color:var(--app-mute);background:var(--app-bg);padding:4px 14px;border-radius:6px;display:inline-flex;gap:8px;align-items:center;max-width:70%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win-bar .url::before{content:"";width:9px;height:9px;flex:none;background:no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Crect x='1' y='5' width='8' height='6' rx='1.5' fill='%238794A2'/%3E%3Cpath d='M3 5V3.5a2 2 0 014 0V5' fill='none' stroke='%238794A2' stroke-width='1.4'/%3E%3C/svg%3E")}
.win-bar .live{font:600 10.5px var(--mono);color:#fff;background:#E5484D;padding:2px 6px;border-radius:4px;letter-spacing:.04em}
.win svg.app{width:100%;height:auto;background:var(--app-bg)}
.chap{display:flex;gap:8px;margin:18px auto 0;max-width:900px;align-items:stretch}
.ch-play{flex:none;width:44px;border:1px solid var(--line);background:var(--paper);border-radius:10px;display:grid;place-items:center}
.ch-play:hover{border-color:var(--ink-3)}
.ch-play svg{width:14px;height:14px;fill:var(--ink)}
.ch{flex:1;min-width:0;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:9px 12px 11px;position:relative;overflow:hidden;transition:border-color .2s}
.ch:hover{border-color:var(--line-2)}
.ch .n{font:600 11px var(--mono);color:var(--ink-3)}
.ch .t{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch.act{border-color:var(--blue)}
.ch.act .t,.ch.act .n{color:var(--blue)}
.ch .bar{position:absolute;left:0;bottom:0;height:3px;background:var(--blue);width:0}
@media (max-width:640px){ .chap{flex-wrap:wrap}.ch{flex:1 1 40%}.ch-play{width:100%;height:36px} .demo-wrap{padding:0 12px} }

/* 앱 그림 공통(SVG) */
svg text{font-family:var(--font)}
.a-bg{fill:var(--app-bg)} .a-top{fill:var(--app-top)} .a-panel{fill:var(--app-panel)} .a-canvas{fill:var(--app-bg)}
.a-ln{stroke:var(--app-line);stroke-width:1;fill:none}
.a-logo{font:800 15px var(--font);fill:var(--app-text);letter-spacing:-.05em}
.a-x{fill:var(--blue)}
.a-t{fill:var(--app-text)} .a-m{fill:var(--app-mute)} .a-b{fill:var(--app-text);font-weight:700}
.a-ic{fill:var(--app-line)} .a-ic.on{fill:var(--blue)}
.a-pill{fill:var(--app-bg)} .a-okd{fill:#16A34A}
.a-sel{fill:var(--blue-weak)} .a-input{fill:var(--app-bg);stroke:var(--app-line)} .a-row{fill:var(--app-row)} .a-rowh{fill:var(--blue-weak)}
.a-th{fill:var(--app-row)} .a-btn{fill:var(--app-panel);stroke:var(--app-line)} .a-btnp{fill:var(--blue)} .a-btnt{fill:#fff;font-weight:600}
.a-chip{fill:var(--blue-weak)} .a-chipt{fill:var(--blue);font-weight:600}
.a-amb{fill:var(--amber-weak)} .a-ambt{fill:var(--amber);font-weight:700}
.a-mhi{fill:var(--blue-weak)}
.s-paper{fill:#FFFFFF;stroke:#CDD5DD} .s-grid{fill:url(#pg-dot)} .s-strip{fill:#F1F4F7;stroke:#D6DDE4}
.s-ink{stroke:#1E2C3A;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-thin{stroke:#9AA6B2;stroke-width:1;fill:none}
.s-dash{stroke-dasharray:3 3}
.s-tag{fill:#1E2C3A;font:600 10.5px var(--mono)} .s-sm{fill:#6B7886;font:9px var(--mono)} .s-wn{fill:#2F5F97;font:500 8.6px var(--mono)}
.s-xr{fill:#C2580C;font:700 9.5px var(--mono)} .s-mir{fill:#1E2C3A;font:8.6px var(--mono)} .s-txt{fill:#1E2C3A} .s-mute{fill:#7C8995}
.s-colno{fill:#8794A2;font:9px var(--mono);text-anchor:middle}
.s-jd{fill:#1E2C3A}
.s-m{fill:#1E2C3A;font:700 13px var(--font);text-anchor:middle}
.sel-box{fill:none;stroke:#2563EB;stroke-width:1.3;stroke-dasharray:4 3}
.hint-bg{fill:#0E1A26;opacity:.88} .hint-t{fill:#fff;font:500 12.5px var(--font)}
.xl{fill:none;stroke:#E8930C;stroke-width:1.7;stroke-dasharray:5 4;animation:flow .9s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.cur-p{fill:#0E1A26;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.carry-bg{fill:#2563EB} .carry-t{fill:#fff;font:600 11px var(--font)}
/* 데모 시간 효과 */
#demo .sym{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .4s cubic-bezier(.2,1.5,.4,1)}
#demo .sym.on{opacity:1;transform:none}
#demo .w{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease}
#demo .w.on{stroke-dashoffset:0}
#demo .f{opacity:0;transition:opacity .3s}
#demo .f.on{opacity:1}
#demo .dock{transform:translateY(230px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
#demo .dock.on{transform:none}
#demo .rip circle{fill:none;stroke:#2563EB;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
#demo .rip.on circle{animation:rip .55s ease-out forwards}
@keyframes rip{0%{opacity:.7;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}
#demo .row{opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
#demo .row.on{opacity:1;transform:none}
#demo .ovl{opacity:0;transition:opacity .6s}
#demo .ovl.on{opacity:1}
#demo.snap *{transition:none!important;animation:none!important}
#d-carry{transition:opacity .15s}

/* ── 화면 넘김 */
.car{display:grid;grid-template-columns:330px 1fr;gap:36px;align-items:start}
.car-tabs{display:flex;flex-direction:column;gap:6px}
.car-tab{position:relative;text-align:left;border:0;background:transparent;padding:16px 18px 18px;border-radius:12px;overflow:hidden;transition:background .2s}
.car-tab:hover{background:var(--bg-2)}
.car-tab .n{font:600 11.5px var(--mono);color:var(--ink-3)}
.car-tab b{display:block;font-size:18px;font-weight:700;margin:2px 0 0;color:var(--ink-3);transition:color .2s}
.car-tab span.d{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.55;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .3s,margin .3s}
.car-tab.act{background:var(--paper);box-shadow:var(--shadow)}
.car-tab.act b{color:var(--ink)} .car-tab.act .n{color:var(--blue)}
.car-tab.act span.d{max-height:80px;opacity:1;margin-top:6px}
.car-tab .bar{position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--line)}
.car-tab .bar i{display:block;height:100%;width:0;background:var(--blue)}
.car-tab:not(.act) .bar{opacity:0}
.car-stage{position:relative;display:grid}
.slide{grid-area:1/1;margin:0;opacity:0;transform:translateX(24px) scale(.985);transition:opacity .55s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.slide.act{opacity:1;transform:none;pointer-events:auto;z-index:2}
.slide.out{transform:translateX(-24px) scale(.985)}
.slide .win svg{width:100%;height:auto;background:var(--app-bg)}
.car-nav{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;align-items:center}
.car-nav .cnt{font:500 13px var(--mono);color:var(--ink-3);margin-right:auto}
.icon-btn{width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;background:linear-gradient(180deg,var(--paper),var(--bg-2));display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 -1px var(--line-2);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.icon-btn:hover{border-color:var(--ink-3);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 18px -12px rgba(14,26,38,.35),0 4px 0 -1px var(--line-2)}
.icon-btn:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(14,26,38,.1)}
.icon-btn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:960px){ .car{grid-template-columns:1fr;gap:16px} .car-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:0 24px 4px} .car-tab{flex:none;padding:10px 14px 12px} .car-tab span.d{display:none} .car-tab b{font-size:15px} }

/* ── 지그재그 */
.zz{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center;padding:56px 0}
.zz + .zz{border-top:1px solid var(--line)}
.zz.rev .zz-t{order:2}
.zz-t .no{font:600 13px var(--mono);color:var(--blue)}
.zz-t h3{font-size:clamp(26px,3vw,36px);font-weight:800;margin:12px 0 16px}
.zz-t p{font-size:17px;color:var(--ink-2);line-height:1.7}
.zz-t ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.zz-t li{position:relative;padding-left:22px;font-size:15.5px;color:var(--ink-2)}
.zz-t li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border:2px solid var(--blue);border-radius:50%}
.zz-t code{font:600 .9em var(--mono);color:var(--ink);background:var(--bg-2);padding:1px 5px;border-radius:4px}
.zz-v{position:relative;border:1px solid var(--line);border-radius:16px;padding:14px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.zz-v:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}
.zz-v svg{width:100%;height:auto;border-radius:8px}
.zz-v .cap{display:flex;justify-content:space-between;margin-top:12px;font:500 12px var(--mono);color:var(--ink-3)}
@media (max-width:900px){ .zz{grid-template-columns:1fr;gap:28px;padding:40px 0} .zz.rev .zz-t{order:0} }
.zz-v svg *{animation-play-state:paused}
.zz.in .zz-v svg *{animation-play-state:running}
.z-paper{fill:#FFFFFF} .z-grid{fill:url(#pg-dot)}
.z1-move{animation:z1m 6s infinite cubic-bezier(.6,0,.2,1)}
@keyframes z1m{0%,8%{transform:translateX(130px);opacity:0}12%{opacity:1}34%{transform:translateX(0)}92%{transform:translateX(0);opacity:1}100%{transform:translateX(0);opacity:0}}
.z1-guide{stroke:#2563EB;stroke-width:1.2;stroke-dasharray:4 4;opacity:0;animation:z1g 6s infinite}
@keyframes z1g{0%,30%{opacity:0}36%,44%{opacity:1}52%,100%{opacity:0}}
.z1-wire{stroke-dasharray:1;stroke-dashoffset:1;animation:z1w 6s infinite}
@keyframes z1w{0%,42%{stroke-dashoffset:1;opacity:1}56%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.z1-lbl{opacity:0;animation:z1l 6s infinite}
@keyframes z1l{0%,56%{opacity:0}62%,92%{opacity:1}100%{opacity:0}}
.z1-chip{opacity:0;animation:z1c 6s infinite}
@keyframes z1c{0%,38%{opacity:0;transform:translateY(6px)}44%,90%{opacity:1;transform:none}100%{opacity:0}}
.z2-mir{opacity:0;animation:z2a 6s infinite}
@keyframes z2a{0%,14%{opacity:0}24%,92%{opacity:1}100%{opacity:0}}
.z2-arc{stroke-dasharray:1;stroke-dashoffset:1;animation:z2b 6s infinite}
@keyframes z2b{0%,26%{stroke-dashoffset:1;opacity:1}48%,92%{stroke-dashoffset:0;opacity:1}100%{opacity:0;stroke-dashoffset:0}}
.z2-ref{opacity:0;animation:z2c 6s infinite}
@keyframes z2c{0%,50%{opacity:0}58%,92%{opacity:1}100%{opacity:0}}
.z2-ring{fill:none;stroke:#E8930C;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:z2d 6s infinite}
@keyframes z2d{0%,48%{opacity:0;transform:scale(.4)}54%{opacity:.9}66%,100%{opacity:0;transform:scale(1.4)}}
.z3-new{opacity:0;transform-box:fill-box;transform-origin:center;animation:z3a 6s infinite cubic-bezier(.2,1.5,.4,1)}
@keyframes z3a{0%,12%{opacity:0;transform:scale(.5)}20%,92%{opacity:1;transform:none}100%{opacity:0}}
.z3-old{animation:z3b 6s infinite}
@keyframes z3b{0%,26%{opacity:1;transform:none}32%,94%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}}
.z3-num{opacity:0;animation:z3c 6s infinite}
@keyframes z3c{0%,28%{opacity:0;transform:translateY(10px)}34%,92%{opacity:1;transform:none}100%{opacity:0}}
.z3-row{fill:var(--amber-weak);opacity:0;animation:z3d 6s infinite}
@keyframes z3d{0%,28%{opacity:0}34%,70%{opacity:1}90%,100%{opacity:0}}
.z3-chip{opacity:0;animation:z3e 6s infinite}
@keyframes z3e{0%,34%{opacity:0;transform:translateY(6px)}42%,88%{opacity:1;transform:none}100%{opacity:0}}
.z3-old,.z3-num,.z1-chip,.z3-chip{transform-box:fill-box}

/* ── AI 띠 */
.dark{background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(140,175,215,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,175,215,.06) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);pointer-events:none}
.dark .kicker{color:#8DB2F8}
.dark h2,.dark h1{color:#fff}
.dark p{color:var(--dark-mute)}
.ai-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.ai-grid h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin:16px 0 18px}
.ai-grid > div > p{font-size:18px;line-height:1.7}
.principles{margin:30px 0 32px;padding:0;list-style:none;display:grid;gap:14px}
.principles li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:15.5px;color:#C9D6E3}
.principles li b{display:block;color:#fff;font-weight:600}
.principles .pn{width:30px;height:30px;border:1px solid var(--dark-line);border-radius:8px;display:grid;place-items:center;font:600 12px var(--mono);color:#8DB2F8}
@media (max-width:900px){ .ai-grid{grid-template-columns:1fr;gap:40px} }
.chat{position:relative;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);overflow:hidden;font-size:14.5px}
.chat-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--dark-line);font-weight:600;color:#E8EEF4}
.chat-h .dt{width:8px;height:8px;border-radius:50%;background:#8DB2F8;box-shadow:0 0 0 4px rgba(141,178,248,.15)}
.chat-h .chip{font:600 10px var(--mono);color:#8DB2F8;border:1px solid #2E4A6B;padding:2px 6px;border-radius:4px}
.chat-h .ctx{margin-left:auto;font:500 12px var(--mono);color:var(--dark-mute)}
.chat-b{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:206px}
.msg{max-width:88%;padding:10px 13px;border-radius:12px;line-height:1.55;transition:opacity .3s,transform .3s}
.msg.u{align-self:flex-end;background:#2563EB;color:#fff;border-bottom-right-radius:4px}
.msg.a{align-self:flex-start;background:var(--dark-3);color:#D9E3ED;border-bottom-left-radius:4px}
.msg ol{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}
.msg ol li{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.chat.s3 .msg ol li,.chat.s4 .msg ol li,.chat.s5 .msg ol li{opacity:1;transform:none}
.chat.s3 .msg ol li:nth-child(2){transition-delay:.25s}.chat.s3 .msg ol li:nth-child(3){transition-delay:.5s}
.msg code{font:600 12.5px var(--mono);color:#FFD08A}
.caret{display:inline-block;width:2px;height:1em;background:#fff;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.think{display:flex;gap:4px;padding:13px 14px}
.think i{width:6px;height:6px;border-radius:50%;background:#8DA2B8;animation:bob 1s infinite}
.think i:nth-child(2){animation-delay:.15s}.think i:nth-child(3){animation-delay:.3s}
@keyframes bob{40%{transform:translateY(-4px);background:#C9D6E3}}
.chat .msg.u,.chat .think,.chat .reply{display:none}
.chat.s1 .msg.u,.chat.s2 .msg.u,.chat.s3 .msg.u,.chat.s4 .msg.u,.chat.s5 .msg.u{display:block}
.chat.s2 .think{display:flex}
.chat.s3 .reply,.chat.s4 .reply,.chat.s5 .reply{display:block;animation:pgIn .35s}
.chat-prev{position:relative;margin:0 16px;border:1px dashed #2E4A6B;border-radius:10px;background:#F7F9FB;overflow:hidden;opacity:.35;transition:opacity .4s,border-color .4s}
.chat.s4 .chat-prev,.chat.s5 .chat-prev{opacity:1;border-color:#5B8DEF}
.chat-prev svg{width:100%;height:auto}
.chat-prev .tag{position:absolute;right:8px;top:8px;font:600 10.5px var(--mono);padding:3px 7px;border-radius:5px;background:#2563EB;color:#fff;opacity:0;transition:opacity .3s}
.chat.s4 .chat-prev .tag{opacity:1}
.chat.s5 .chat-prev .tag{opacity:1;background:#15803D}
.g-ghost{stroke:#2563EB;stroke-dasharray:4 3;transition:stroke .4s,stroke-dasharray .4s}
.g-ghost-t{fill:#2563EB;transition:fill .4s}
.chat.s5 .g-ghost{stroke:#1E2C3A;stroke-dasharray:none}
.chat.s5 .g-ghost-t{fill:#1E2C3A}
.g-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease}
.chat.s4 .g-draw,.chat.s5 .g-draw{stroke-dashoffset:0}
.chat-act{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px}
.chat-act .btn{height:32px;font-size:13.5px;padding:0 13px}
.chat-act .apply{position:relative}
.chat.s45 .chat-act .apply{transform:scale(.95);background:#1D4FD7}
.chat-done{position:absolute;left:50%;bottom:66px;transform:translate(-50%,10px);background:#15803D;color:#fff;font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap}
.chat.s5 .chat-done{opacity:1;transform:translate(-50%,0)}
.chat-in{display:flex;align-items:center;gap:8px;margin:0 16px 14px;padding:10px 12px;border:1px solid var(--dark-line);border-radius:10px;color:#6F8296;font-size:14px}
.chat-in kbd{margin-left:auto;font:500 11px var(--mono);border:1px solid var(--dark-line);padding:1px 6px;border-radius:4px;color:#8DA2B8}
.chat .ex{position:absolute;right:16px;top:44px;font-size:11px;color:#5F7387}

/* ── 숫자 · 웹이라서 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.stat{padding:34px 32px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .v{font:800 clamp(36px,4.6vw,54px)/1 var(--font);letter-spacing:-.045em}
.stat .v small{font-size:.5em;margin-left:2px;color:var(--ink-3);font-weight:700}
.stat .l{margin-top:12px;font-size:15px;color:var(--ink-2)}
.stat .s{margin-top:4px;font-size:13px;color:var(--ink-3)}
@media (max-width:760px){ .stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line)} }
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.why-c{position:relative;padding:28px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.why-c:hover{border-color:var(--line-2)}
.why-c .ic{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:18px;color:var(--blue)}
.why-c .ic svg{width:20px;height:20px}
.why-c h4{font-size:18px;font-weight:700;margin-bottom:8px}
.why-c p{font-size:15px;color:var(--ink-2);line-height:1.65}
@media (max-width:860px){ .why{grid-template-columns:1fr} }

/* ── 베타 띠 */
.beta-band{position:relative;border-radius:22px;background:var(--navy-2);color:#E2EBF5;padding:56px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.beta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.beta-band > *{position:relative}
.beta-band .kicker{color:#9CC0FF}
.beta-band h2{color:#fff;font-size:clamp(28px,3.6vw,42px);font-weight:800;margin:14px 0 14px}
.beta-band p{color:#B3C5D8;font-size:17px;line-height:1.7}
.beta-band .cta-row{justify-content:flex-start;margin-top:28px}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:rgba(255,255,255,.15)}
.tl li{position:relative;padding:0 0 26px 40px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:4px;top:5px;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:var(--navy-2)}
.tl li.now::before{border-color:#4ADE80;background:#4ADE80;box-shadow:0 0 0 5px rgba(74,222,128,.18)}
.tl li.done::before{border-color:#9CC0FF;background:#9CC0FF}
.tl .dte{font:600 13px var(--mono);color:#9CC0FF}
.tl b{display:block;color:#fff;font-size:17px;margin-top:2px}
.tl span{font-size:14px;color:#9FB3C8}
.tl .today{display:inline-block;margin-left:8px;font:700 11px var(--mono);background:#4ADE80;color:#0A2414;padding:2px 7px;border-radius:5px;vertical-align:2px}
@media (max-width:860px){ .beta-band{grid-template-columns:1fr;padding:36px 24px} }

/* ── 쪽 머리 */
.ph{position:relative;padding:96px 0 64px;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-a) 1px,transparent 1px),linear-gradient(90deg,var(--grid-a) 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);pointer-events:none}
.ph .wrap{position:relative}
.ph h1{font-size:clamp(36px,5.4vw,64px);font-weight:900;letter-spacing:-.045em;margin:18px 0 20px;max-width:860px}
.ph p.lead{font-size:clamp(17px,2vw,20px)}
.crumb{font:500 13px var(--mono);color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}

/* 제품 소개: 따라붙는 이야기 */
.story{display:grid;grid-template-columns:1fr 1.25fr;gap:64px}
.story-steps{display:flex;flex-direction:column}
.step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .4s}
.step.act{opacity:1}
.step .no{font:600 13px var(--mono);color:var(--blue)}
.step h3{font-size:clamp(24px,3vw,34px);font-weight:800;margin:10px 0 14px}
.step p{font-size:17px;color:var(--ink-2);line-height:1.7}
.step ul{margin:16px 0 0;padding-left:18px;color:var(--ink-2);font-size:15.5px;display:grid;gap:6px}
.story-vis{position:sticky;top:120px;height:min(560px,70vh);display:grid;align-items:center;order:2}
.story-vis .sv{grid-area:1/1;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.story-vis .sv.act{opacity:1;transform:none}
.story-vis .win svg{width:100%;height:auto;background:var(--app-bg)}
.story-dots{display:flex;gap:6px;margin-top:14px;justify-content:center}
.story-dots i{width:22px;height:3px;border-radius:2px;background:var(--line-2);transition:background .3s,width .3s}
.story-dots i.act{background:var(--blue);width:36px}
@media (max-width:900px){ .story{grid-template-columns:1fr} .story-vis{position:sticky;top:72px;height:auto;z-index:2;background:var(--bg);padding:8px 0} .step{min-height:auto;padding:40px 0;opacity:1} }
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){ .who{grid-template-columns:1fr} }

/* 주요 기능 쪽 */
.f-layout{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start}
.f-index{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.f-index a{padding:8px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;color:var(--ink-3);transition:color .2s,border-color .2s}
.f-index a:hover{color:var(--ink)}
.f-index a.act{color:var(--ink);font-weight:600;border-left-color:var(--blue)}
.f-block{padding:0 0 96px;scroll-margin-top:96px}
.f-block .no{font:600 13px var(--mono);color:var(--blue)}
.f-block h2{font-size:clamp(26px,3vw,36px);font-weight:800;margin:10px 0 14px}
.f-block > p{font-size:17px;color:var(--ink-2);max-width:680px;line-height:1.7}
.f-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 28px}
.f-pt{padding:16px 18px;border:1px solid var(--line);border-radius:12px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.f-pt:hover{border-color:var(--line-2)}
.f-pt b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.f-block .win svg{width:100%;height:auto;background:var(--app-bg)}
@media (max-width:960px){ .f-layout{grid-template-columns:1fr}.f-index{display:none}.f-pts{grid-template-columns:1fr} }

/* AI 쪽 */
.ph.dark{padding:110px 0 100px}
.ph.dark::before{display:none}
.ai-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ai-card{padding:32px;border:1px solid var(--line);border-radius:18px}
.ai-card .tagl{font:600 11.5px var(--mono);color:var(--blue);letter-spacing:.05em}
.ai-card h3{font-size:24px;font-weight:800;margin:10px 0 12px}
.ai-card p{color:var(--ink-2);font-size:16px;line-height:1.7}
.ai-card .flow{display:flex;align-items:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.ai-card .flow span{font-size:13.5px;font-weight:600;padding:7px 11px;border-radius:8px;background:var(--bg-2);color:var(--ink-2)}
.ai-card .flow span.on{background:var(--blue-weak);color:var(--blue)}
.ai-card .flow i{width:14px;height:1.5px;background:var(--line-2)}
.mcp-vis{margin-top:22px;display:flex;align-items:center;gap:10px;font:600 13px var(--mono);color:var(--ink-2)}
.mcp-vis .nd{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.mcp-vis .ln{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:mcp 1s linear infinite}
@keyframes mcp{to{background-position:24px 0}}
@media (max-width:860px){ .ai-cards{grid-template-columns:1fr} }
.note-l{margin-top:28px;font-size:14px;color:var(--ink-3)}

/* 요금제 */
.notice{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:18px 22px;border-radius:14px;background:var(--ok-weak);border:1px solid color-mix(in srgb,var(--ok) 25%,transparent);margin-bottom:28px;flex-wrap:wrap}
.notice b{color:var(--ok)}
.notice p{font-size:15.5px;color:var(--ink-2)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.plan{position:relative;display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--line);border-radius:18px}
.plan:hover{border-color:var(--line-2)}
.plan.free{border-color:var(--blue);box-shadow:var(--card-shadow),0 0 0 3px var(--blue-weak)}
.plan.free:hover{box-shadow:var(--card-shadow-hover),0 0 0 3px var(--blue-weak);border-color:var(--blue)}
.plan .badge{position:absolute;top:-11px;left:28px;font:700 11px var(--mono);background:var(--blue);color:var(--on-blue);padding:3px 9px;border-radius:6px;letter-spacing:.03em}
.plan h3{font-size:22px;font-weight:800;letter-spacing:-.02em}
.plan .for{font-size:14.5px;color:var(--ink-3);margin-top:4px;min-height:44px}
.plan .price{margin:22px 0 4px;font:800 40px/1 var(--font);letter-spacing:-.04em}
.plan .price.tbd{font-size:24px;color:var(--ink-3);font-weight:700;letter-spacing:-.02em;height:40px;display:flex;align-items:flex-end}
.plan .when{font-size:13.5px;color:var(--ink-3)}
.plan ul{list-style:none;margin:22px 0 26px;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14.5px;color:var(--ink-2);flex:1}
.plan li{display:flex;gap:9px}
.plan li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan li.mute{color:var(--ink-3)}
.plan li.mute::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2' fill='%238794A2'/%3E%3C/svg%3E")}
.plan .btn{width:100%}
.plan .btn.done{background:var(--ok-weak);color:var(--ok);border-color:transparent}
.common{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:24px;font-size:14px;color:var(--ink-3)}
.common span{display:inline-flex;gap:7px;align-items:center}
.common svg{width:16px;height:16px;color:var(--ink-3)}
@media (max-width:1100px){ .plans{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .plans{grid-template-columns:1fr} }
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:none;border:0;padding:22px 2px;font-size:17px;font-weight:600}
.qa button .pm{flex:none;width:22px;height:22px;position:relative}
.qa button .pm::before,.qa button .pm::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;background:var(--ink-3);border-radius:2px;transition:transform .25s}
.qa button .pm::after{transform:rotate(90deg)}
.qa.open button .pm::after{transform:rotate(0)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans > div{overflow:hidden}
.qa .ans p{padding:0 2px 22px;color:var(--ink-2);font-size:16px;line-height:1.75}

/* 베타 쪽 */
.count{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.count .u{min-width:96px;padding:16px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-align:center}
.count .u b{display:block;font:800 40px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.count .u span{display:block;margin-top:8px;font-size:13px;color:var(--ink-3)}
.count-l{margin-top:14px;font-size:14px;color:var(--ink-3)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.s3{position:relative;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.s3 .no{font:700 13px var(--mono);color:var(--blue)}
.s3 h4{font-size:19px;font-weight:700;margin:12px 0 8px}
.s3 p{font-size:15px;color:var(--ink-2);line-height:1.65}
.s3:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:10px;height:10px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:translateY(-50%) rotate(45deg);z-index:1}
@media (max-width:860px){ .steps3{grid-template-columns:1fr}.s3::after{display:none} }
.perks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.perk{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.perk .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-weak);color:var(--blue);display:grid;place-items:center}
.perk .ic svg{width:22px;height:22px}
.perk h4{font-size:17px;font-weight:700;margin-bottom:6px}
.perk p{font-size:15px;color:var(--ink-2);line-height:1.65}
.perk .soon{display:inline-block;margin-left:6px;font:700 11px var(--mono);background:var(--amber-weak);color:var(--amber);padding:2px 6px;border-radius:4px;vertical-align:2px}
@media (max-width:760px){ .perks{grid-template-columns:1fr} }
.htl{position:relative;margin-top:12px;padding:40px 0 0}
.htl-line{position:relative;height:4px;background:var(--line);border-radius:4px}
.htl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:4px;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.htl-pts{position:relative;height:110px}
.htl-pt{position:absolute;top:-12px;transform:translateX(-50%);text-align:center;width:180px}
.htl-pt::before{content:"";display:block;width:16px;height:16px;margin:0 auto 12px;border-radius:50%;border:3px solid var(--line-2);background:var(--paper)}
.htl-pt.on::before{border-color:var(--blue)}
.htl-pt .dte{font:600 13px var(--mono);color:var(--blue)}
.htl-pt b{display:block;font-size:15.5px;margin-top:2px}
.htl-pt span{font-size:13px;color:var(--ink-3)}
.htl-today{position:absolute;top:-34px;transform:translateX(-50%);font:700 11px var(--mono);background:var(--ok);color:var(--on-blue);padding:3px 8px;border-radius:6px;white-space:nowrap;transition:left 1.4s cubic-bezier(.2,.8,.2,1)}
.htl-today::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:12px;background:var(--ok);transform:translateX(-50%)}
@media (max-width:760px){ .htl-pt{width:110px}.htl-pt span{display:none} }

/* ── 바닥글 */
footer.ft{border-top:1px solid var(--line);background:var(--paper);padding:64px 0 40px;margin-top:40px}
.ft-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.ft-grid h6{margin:0 0 14px;font:600 12px var(--mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.ft-grid a,.ft-grid button{display:block;background:none;border:0;padding:0;margin:0 0 10px;font-size:14.5px;color:var(--ink-2);text-align:left}
.ft-grid a.logo{display:inline-flex;margin:0}
.ft-grid a:hover,.ft-grid button:hover{color:var(--ink)}
.ft-tag{margin-top:14px;font-size:14.5px;color:var(--ink-3);max-width:260px;line-height:1.6}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.ft-bot .dom{font-family:var(--mono)}
@media (max-width:860px){ .ft-grid{grid-template-columns:1fr 1fr}.ft-grid > div:first-child{grid-column:1/-1} }

/* ── 알림 */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:10px;font-size:14px;box-shadow:var(--shadow-lg);animation:tin .3s cubic-bezier(.2,.9,.3,1.2);max-width:min(560px,calc(100vw - 32px))}
.toast.bye{animation:tout .25s forwards}
.toast b{font-weight:700}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes tout{to{opacity:0;transform:translateY(6px)}}

/* ── 편집기 모양을 본뜬 그림 — 추가 클래스 */
.a-home{fill:none;stroke:var(--app-text);stroke-width:1.4}
.a-blue{fill:#2563EB;font-weight:600} .a-green{fill:#15803D;font-weight:600}
.a-pillb{fill:#EEF3FD;stroke:#B9CDF5} .a-pillg{fill:#E7F6EC;stroke:#BFE3CB}
.a-blueln{stroke:#2563EB;stroke-width:2;fill:none}
.a-thumb{fill:#fff;stroke:var(--app-line)} .a-thumbsel{fill:none;stroke:#2563EB;stroke-width:1.5}
.a-canvas{fill:#E8ECF1} .a-prev{fill:#F7F9FB;stroke:var(--app-line)}
.a-dotb{fill:#2563EB}
.a-tabon{fill:#EEF3FD;stroke:#B9CDF5}
.a-dim{fill:rgba(14,26,38,.28)} .a-dlg{fill:#fff;stroke:#CBD3DB;filter:drop-shadow(0 24px 40px rgba(14,26,38,.28))}
.a-card{fill:#fff;stroke:#E2E6EB} .a-big{fill:#0E1A26} .a-icb{fill:#2563EB} .a-ink{fill:#0E1A26}
.a-okbg{fill:#15803D}
.a-caret{fill:#2563EB;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.s-frame{fill:none;stroke:#1E2C3A;stroke-width:2.2} .s-ruler{stroke:#AEB8C4;stroke-width:1;fill:none}
.s-paper{fill:#FFFFFF;stroke:#CDD5DD}
.s-grid{fill:url(#pg-grid)}
.s-logo{font:800 12px var(--font);fill:#334252;letter-spacing:-.04em} .s-logo-x{fill:#2563EB}
.s-no{fill:#2563EB;font:11px var(--mono)}
/* 실제 심볼 — 앱 도면과 같은 굵기 0.25 mm = 1.6 px · 끝 모양 butt · 점선 1.25/0.75 mm */
.s-sym{stroke:#1E2C3A;stroke-width:1.6;fill:none;stroke-linecap:butt;stroke-linejoin:miter} .s-symd{stroke-dasharray:8 4.8} .s-symf{fill:#1E2C3A;stroke:none} .s-symt{fill:#1E2C3A;text-anchor:middle;dominant-baseline:central;font-family:var(--font)}
.s-sym.g-ghost{stroke:#2563EB;stroke-dasharray:4 3}
.s-fill{fill:#1E2C3A;stroke:none}
.s-tag{font:500 16px var(--font);fill:#1E2C3A} .s-sm{fill:#6B7886;font:12px var(--font)} .s-wn{fill:#2F5F97;font:500 10.5px var(--mono)}
.s-xr{fill:#C2580C;font:700 11.5px var(--mono)} .s-mir{fill:#1E2C3A;font:11px var(--mono)}
.s-m{fill:#1E2C3A;font:600 20px var(--font);text-anchor:middle}
.s-colno{fill:#8794A2;font:11px var(--font);text-anchor:middle}
.g-ghost{stroke:#2563EB;stroke-dasharray:4 3;fill:none;stroke-width:1.4} .g-ghost-d{fill:#2563EB} .g-ghost-t{fill:#2563EB} .g-ghost-box{fill:rgba(37,99,235,.06);stroke:#2563EB;stroke-dasharray:5 4}
/* 재생 효과 — 데모·AI 띠 공통(svg.app 안) */
svg.app .sym{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .4s cubic-bezier(.2,1.5,.4,1)}
svg.app .sym.on{opacity:1;transform:none}
svg.app .w{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease}
svg.app .w.on{stroke-dashoffset:0}
svg.app .f{opacity:0;transition:opacity .3s}
svg.app .f.on{opacity:1}
svg.app .row{opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
svg.app .row.on{opacity:1;transform:none}
svg.app .rip circle{fill:none;stroke:#2563EB;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
svg.app .rip.on circle{animation:rip .55s ease-out forwards}
svg.app.snap *{transition:none!important;animation:none!important}
.win svg.app{width:100%;height:auto;background:var(--app-bg);display:block}
/* 화면 넘김 — 탭을 위로(그림을 넓게) */
.car{grid-template-columns:1fr;gap:14px}
.car-tabs{flex-direction:row;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.car-tab{padding:12px 14px 14px}
.car-tab b{font-size:15px}
.car-tab span.d{display:none}
.car-nav .desc{font-size:14.5px;color:var(--ink-2);margin-right:auto;margin-left:14px}
@media (max-width:960px){ .car-tabs{display:flex;overflow-x:auto} .car-nav .desc{display:none} }
.sub-note{font-size:14px;color:var(--ink-3);margin-top:-36px;margin-bottom:28px}
.ai-note{margin-top:14px;font-size:13.5px;color:var(--dark-mute);line-height:1.6}
.ai-grid{grid-template-columns:1fr;gap:40px}
.ai-grid > div:first-child{max-width:760px}
.zz-v svg{width:100%;height:auto}
@media (max-width:640px){ .sum th:nth-child(3),.sum td:nth-child(3){display:none} }
.sum td,.sum th{word-break:keep-all}

/* ── 등급·초안 표시 */
.new.soon{color:var(--amber);background:var(--amber-weak);font:700 10.5px/1 var(--font);letter-spacing:0;padding:3px 6px;white-space:nowrap}
.plan.pro-now{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.plan .badge.ok{background:var(--ok)}
.plan .seat{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.plans-note{margin-top:14px;font-size:13.5px;color:var(--ink-3);text-align:center}
.draft-tag{display:inline-block;margin-left:4px;font:700 10.5px var(--font);color:var(--amber);background:var(--amber-weak);padding:1px 6px;border-radius:4px;vertical-align:1px}
/* 바닥글 사업자 정보 */
.ft-biz{margin-top:18px;font-size:12.5px;color:var(--ink-3);line-height:1.8}
.ft-biz span{white-space:nowrap}
@media (max-width:480px){ .ft-biz span{white-space:normal} }


/* 그림은 언제나 밝은 앱 */
svg.app,.zz-v svg{--bg:#F7F8FA;--bg-2:#EEF1F5;--paper:#FFFFFF;--ink:#0E1A26;--ink-2:#3A4858;--ink-3:#6A7786;--line:#E2E6EB;--line-2:#CBD3DB;--blue:#2563EB;--blue-2:#1D4FD7;--blue-weak:#E8EFFD;--amber:#94560A;--amber-weak:#FDF1DA;--ok:#15803D;--ok-weak:#E3F4E8;--app-bg:#E8ECF1;--app-top:#FFFFFF;--app-panel:#FFFFFF;--app-line:#D9DFE6;--app-text:#334252;--app-mute:#8794A2;--app-row:#F2F5F8;--on-blue:#FFFFFF}

/* 휴대폰 폭 — 화면 넘김 탭 줄이 칸을 넓히지 않게(탭 줄은 가로로 넘겨 본다) */
@media (max-width:960px){ .car{grid-template-columns:minmax(0,1fr)} .car > *,.car-stage > *{min-width:0} .story{grid-template-columns:minmax(0,1fr)} .story > *,.story-vis > *{min-width:0} .f-layout{grid-template-columns:minmax(0,1fr)} .f-layout > *{min-width:0} }
@media (max-width:480px){ .htl{margin-left:44px;margin-right:44px} .htl-pt{width:96px} }