/* ─────────────────────────────────────────────────────────
   Ponte · v9 "Midnight launch"
   deep midnight navy · crisp white type · one big phone,
   one laptop · scroll-scrubbed reveal · rim-light glows
   dark only
   ───────────────────────────────────────────────────────── */

@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#060a14;
  --bg2:#090e1c;
  --bg3:#0d1324;
  --fg:#f4f6fb;
  --fg2:rgba(244,246,251,.66);
  --fg3:rgba(244,246,251,.42);
  --line:rgba(244,246,251,.10);
  --line2:rgba(244,246,251,.06);
  --rim:#8fbcff;            /* cool rim light */
  --rim-soft:rgba(255,106,31,0.072);
  --kakao:#FEE500;
  --kakao-ink:#191919;
  --kakao-bg:#B2C7D9;
  --slack-bg:#1a1d21;
  --slack-side:#19171d;
  --slack-ink:#d1d2d3;
  --send:#2eb67d;
  --send-d:#007a5a;
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:"Pretendard",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}
@supports (overflow:clip){html,body{overflow-x:clip}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
.c{max-width:1200px;margin:0 auto;padding-inline:32px}
@media (max-width:640px){.c{padding-inline:20px}}
.skip{position:absolute;left:-9999px;top:12px;z-index:99;padding:10px 14px;background:var(--fg);color:var(--bg);border-radius:8px}
.skip:focus{left:12px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--rim);outline-offset:3px;border-radius:6px}

.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rim)}
.h1{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:700;line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.h1 .ln{display:block;overflow:hidden}
.h1 .ln i{display:block;font-style:normal}
.h1 .dim{color:var(--fg3)}
.h2{margin-top:18px;font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:700;line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.h2 .dim{color:var(--fg3)}
.sd{margin-top:20px;font-size:1.0625rem;line-height:1.75;color:var(--fg2);max-width:560px}
.sh{max-width:720px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .35s}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-w{background:var(--fg);color:var(--bg);box-shadow:0 0 0 0 rgba(255,106,31,0)}
.btn-w:hover{background:#fff;box-shadow:0 0 36px -6px rgba(255,106,31,0.203)}
.btn-o{border-color:rgba(244,246,251,.22);color:var(--fg)}
.btn-o:hover{border-color:rgba(244,246,251,.55)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn.lg{height:54px;padding:0 28px;font-size:15.5px}

/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .4s,border-color .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(6,10,20,.66);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-color:var(--line2)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.logo b{width:26px;height:26px;border-radius:8px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:700;box-shadow:0 0 24px -4px rgba(255,106,31,0.225)}
.menu{display:flex;gap:32px;font-size:14px;color:var(--fg2)}
.menu a{transition:color .25s}
.menu a:hover{color:var(--fg)}
@media (max-width:700px){.menu{display:none}}

/* ── hero ── */
.hero{position:relative;z-index:2;padding:168px 0 36px;overflow:hidden}
.glow{position:absolute;border-radius:50%;pointer-events:none;opacity:.9}
.glow-a{width:820px;height:820px;left:50%;top:-380px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,106,31,0.072),rgba(255,106,31,0.018) 55%,transparent 72%)}
.glow-b{width:520px;height:520px;right:-180px;top:160px;background:radial-gradient(closest-side,rgba(255,106,31,.05),transparent 70%)}
.hero-in{position:relative;text-align:center;max-width:900px}
.hero-cta{margin-top:40px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.js .h1 .ln i{animation:rise 1.1s var(--ease) both}
.js .h1 .ln:nth-child(2) i{animation-delay:.12s}
.js .hero-cta{animation:fade 1.2s var(--ease) .4s both}
@keyframes rise{from{transform:translateY(110%)}}
@keyframes fade{from{opacity:0;transform:translateY(16px)}}

/* ── 대표 장면 (shared demo) ── */
.demo-sec{position:relative;z-index:2;padding:24px 0 clamp(56px,8vw,112px)}

/* 휴대폰 프레임 — 대표 콘솔에서 씀 */
.phone{position:absolute;left:50%;top:50%;width:340px;height:724px;margin:-362px 0 0 -170px;border-radius:58px;padding:12px;
  background:linear-gradient(145deg,#343a48 0%,#0b0e16 38%,#12161f 70%,#2a2f3b 100%);
  box-shadow:0 0 0 1px #000,inset 0 0 0 1.5px rgba(255,255,255,.16),0 70px 120px -40px rgba(0,0,0,0.16),0 0 90px -20px rgba(255,106,31,0.126);
  transform-style:preserve-3d;will-change:transform;z-index:3}
.ph-btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(#3a404d,#15181f)}
.ph-l1{left:-3px;top:150px;height:40px}.ph-l2{left:-3px;top:206px;height:68px}.ph-r{right:-3px;top:190px;height:96px}
.phone .scr{position:absolute;inset:12px;border-radius:46px;overflow:hidden;background:var(--kakao-bg);isolation:isolate}
.phone .island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:104px;height:32px;border-radius:20px;background:#000;z-index:5}
.phone .glass{position:absolute;inset:0;border-radius:58px;pointer-events:none;z-index:6;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.04) 100%)}

.kk-sig{display:inline-flex;align-items:flex-end;gap:2px}
.kk-sig i{width:3px;background:currentColor;border-radius:1px}
.kk-sig i:nth-child(1){height:5px}.kk-sig i:nth-child(2){height:8px}.kk-sig i:nth-child(3){height:11px}
.kk-sig b{width:22px;height:11px;border:1.5px solid currentColor;border-radius:3px;margin-left:6px;position:relative}
.kk-sig b::after{content:"";position:absolute;inset:2px;right:4px;background:currentColor;border-radius:1px}

/* ── 도구 ── */
.works{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--bg2)}
.works-in{display:flex;align-items:center;justify-content:center;gap:44px;padding-block:30px}
.tool{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(180deg,#fff,#e8e8e8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.5),0 10px 20px -8px rgba(0,0,0,.8),0 0 30px -8px rgba(255,106,31,0.135);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tool-k{background:linear-gradient(180deg,#fff06a 0%,#fee500 55%,#e9cf00 100%)}
.tool::after{content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:9px 9px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));pointer-events:none}
.tool svg{width:23px;height:23px;filter:drop-shadow(0 1px .5px rgba(0,0,0,.25))}
.tool:hover{transform:translateY(-4px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.4),0 18px 28px -8px rgba(0,0,0,.8),0 0 40px -6px rgba(255,106,31,0.225)}
@media (max-width:640px){.works-in{gap:28px}}

/* ── sections ── */
.sec{padding-block:150px;position:relative}
@media (max-width:760px){.sec{padding-block:96px}}

/* Product */
.prod{margin-top:72px;display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}
@media (max-width:960px){.prod{grid-template-columns:1fr;gap:48px}}
.prod-main{position:relative;padding:40px;border-radius:28px;background:linear-gradient(160deg,rgba(255,106,31,0.036),rgba(255,106,31,0.009) 50%,transparent);border:1px solid var(--line);overflow:hidden}
.prod-main::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at 20% 0%,rgba(255,106,31,0.081),transparent 60%)}
.prod-main h3{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;position:relative}
.prod-main p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--fg2);position:relative;max-width:520px}
.chan{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
@media (max-width:520px){.chan{grid-template-columns:1fr}}
.chan div{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(244,246,251,.05);border:1px solid var(--line2);font-size:14.5px;font-weight:500}
.chan div span{font-size:12.5px;color:var(--fg3);font-weight:400}
.chan div em{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:9px;background:var(--fg);color:var(--bg)}
.prod-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
@media (max-width:520px){.prow{grid-template-columns:1fr;gap:16px}}
.prow h3{font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
.prow p{margin-top:4px;font-size:14.5px;color:var(--fg2)}
.pvis{min-width:200px}
@media (max-width:520px){.pvis{min-width:0}}
.biz{font-size:1.7rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.biz span{color:var(--fg3)}
.ok{margin-top:4px;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#5fe29a;font-weight:600}
.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#5fe29a;box-shadow:0 0 10px #5fe29a}
.alert{border-radius:12px;background:rgba(244,246,251,.05);border:1px solid var(--line);padding:12px 16px}
.alert b{display:block;font-size:15px;font-weight:600}
.alert span{font-size:12.5px;color:var(--fg3)}
.alert i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff5a5a;margin-right:8px;vertical-align:middle;box-shadow:0 0 0 4px rgba(255,90,90,.18)}
.path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--fg2)}
.path span{padding:6px 10px;border-radius:8px;background:rgba(244,246,251,.06)}
.path span:last-child{background:var(--fg);color:var(--bg);font-weight:600}
.path i{font-style:normal;color:var(--fg3)}
.sync{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}
.sync span{padding:10px 14px;border-radius:10px;background:rgba(244,246,251,.06);border:1px solid var(--line2)}
.sync em{flex:1;min-width:48px;height:1px;background:var(--line);position:relative;overflow:hidden}
.sync em::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--rim),transparent);animation:slide 2.4s var(--ease) infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* Features */
.sec-feat{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);overflow:hidden}
.glow-c{width:900px;height:900px;left:-300px;top:-200px;background:radial-gradient(closest-side,rgba(255,106,31,0.041),transparent 70%)}
.feat{margin-top:64px;display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start;position:relative}
@media (max-width:900px){.feat{grid-template-columns:1fr;gap:32px}}
.feat-nav{position:sticky;top:92px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
@media (max-width:900px){.feat-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 18px;border:0}}
.feat-nav a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--fg2);transition:color .25s}
@media (max-width:900px){.feat-nav a{padding:6px 0;border:0;gap:6px}}
.feat-nav a:hover{color:var(--fg)}
.feat-nav em,.fg-h em{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(244,246,251,.08);color:var(--fg2);margin-left:8px}
.fg + .fg{margin-top:72px}
.fg-h{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;padding-bottom:16px;border-bottom:1px solid var(--fg)}
.fl{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
@media (max-width:640px){.fl{grid-template-columns:1fr}}
.fl li{position:relative;padding:24px 0 24px 46px;border-bottom:1px solid var(--line)}
.fl li span{position:absolute;left:0;top:27px;font-size:12.5px;font-weight:600;color:var(--rim);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fl h4{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.fl p{margin-top:5px;font-size:14px;line-height:1.65;color:var(--fg2)}

/* CEO Console */
.ceo{display:grid;grid-template-columns:1fr 420px;gap:96px;align-items:center}
@media (max-width:960px){.ceo{grid-template-columns:1fr;gap:64px}}
.dlist{margin-top:36px;border-top:1px solid var(--line)}
.dlist li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.dlist b{font-weight:600}
.dlist span{color:var(--fg2);text-align:right}
.ceo-shot{margin-top:40px;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#0d1324;box-shadow:0 40px 80px -40px rgba(0,0,0,0.16);position:relative}
.ceo-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,20,.1),rgba(6,10,20,.45));pointer-events:none}
.ceo-shot img{width:100%;height:100%;object-fit:cover}
.ceo-dev{justify-self:center;position:relative}
.ceo-dev::before{content:"";position:absolute;inset:-80px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,31,0.063),transparent 70%);pointer-events:none}
.phone-sm{position:relative;left:auto;top:auto;margin:0;width:320px;height:680px;transform:none}
.js .phone-sm{transform:perspective(1400px) rotateY(-10deg) rotateX(4deg);transition:transform 1.2s var(--ease)}
.js .ceo-dev.in .phone-sm{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
@media (max-width:420px){.phone-sm{width:min(320px,100%);height:auto;aspect-ratio:320/680}}
.scr-dark{background:#0a0f1c!important}
.con{position:absolute;inset:0;display:flex;flex-direction:column;color:var(--fg);font-size:14px}
.con-status{height:54px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 28px 6px;font-size:14.5px;font-weight:600}
.con-top{padding:10px 20px 14px;font-size:22px;font-weight:700;letter-spacing:-.03em}
.con-card{margin:0 14px 10px;padding:16px 16px 14px;border-radius:18px;background:rgba(244,246,251,.06);border:1px solid var(--line2)}
.con-card.c1{background:linear-gradient(160deg,rgba(255,106,31,0.099),rgba(255,106,31,0.027));border-color:rgba(255,106,31,0.135)}
.con-card b{display:block;font-size:15.5px;font-weight:700}
.con-card span{display:block;margin-top:3px;font-size:12.5px;color:var(--fg2);line-height:1.5}
.con-bars{margin-top:14px;display:flex;align-items:flex-end;gap:5px;height:48px}
.con-bars i{flex:1;height:calc(var(--h)*100%);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#fff,rgba(255,106,31,0.225));transform-origin:bottom}
.js .con-bars i{transform:scaleY(0);transition:transform 1s var(--ease)}
.js .ceo-dev.in .con-bars i{transform:none}
.js .ceo-dev.in .con-bars i:nth-child(2){transition-delay:.06s}.js .ceo-dev.in .con-bars i:nth-child(3){transition-delay:.12s}.js .ceo-dev.in .con-bars i:nth-child(4){transition-delay:.18s}.js .ceo-dev.in .con-bars i:nth-child(5){transition-delay:.24s}.js .ceo-dev.in .con-bars i:nth-child(6){transition-delay:.3s}.js .ceo-dev.in .con-bars i:nth-child(7){transition-delay:.36s}
.con-dots{margin-top:12px;display:flex;gap:7px}
.con-dots i{flex:1;height:28px;border-radius:7px;background:rgba(244,246,251,.07)}
.con-dots i.on{background:var(--rim);box-shadow:0 0 12px rgba(255,106,31,0.27)}
.con-rows{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.con-rows i{height:8px;width:calc(var(--w)*100%);border-radius:4px;background:rgba(244,246,251,.22)}
.con-ring{margin-top:12px;display:flex;align-items:center;gap:12px}
.con-ring i{width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--rim) 0 72%,rgba(244,246,251,.1) 72% 100%);-webkit-mask:radial-gradient(circle,transparent 55%,#000 56%);mask:radial-gradient(circle,transparent 55%,#000 56%)}

/* 숫자 */
.sec-nums{padding-block:0}
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nums div{padding:48px 24px 48px 0;border-right:1px solid var(--line2)}
.nums div:last-child{border-right:0}
.nums b{display:block;font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(255,106,31,0.158)}
.nums span{display:block;margin-top:14px;font-size:14px;color:var(--fg2)}
@media (max-width:760px){.nums{grid-template-columns:1fr 1fr}.nums div{padding:32px 16px 32px 0}.nums div:nth-child(2){border-right:0}.nums div:nth-child(-n+2){border-bottom:1px solid var(--line2)}}

/* For */
.sizes{margin-top:64px;display:grid;grid-template-columns:1.15fr 1fr 1fr;border-top:1px solid var(--line)}
@media (max-width:960px){.sizes{grid-template-columns:1fr}}
.sz{padding:36px 32px 40px 0;border-right:1px solid var(--line2);margin-right:32px;display:flex;flex-direction:column;gap:18px;position:relative}
.sz:last-child{border-right:0;margin-right:0}
@media (max-width:960px){.sz{border-right:0;margin-right:0;border-bottom:1px solid var(--line2);padding-inline:0}}
.sz::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:48px;background:var(--fg3)}
.sz-k::before{width:100%;margin-right:32px;background:linear-gradient(90deg,var(--rim),transparent);box-shadow:0 0 18px rgba(255,106,31,0.27)}
.sz-tag{align-self:flex-start;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--fg2)}
.sz-k .sz-tag{border-color:rgba(255,106,31,0.18);color:var(--rim)}
.sz h3{font-size:1.3rem;font-weight:700;letter-spacing:-.03em;line-height:1.4;text-wrap:balance}
.sz ul{margin-top:4px;padding-top:18px;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:10px}
.sz li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.6;color:var(--fg2)}
.sz li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--fg3)}
.sz-k li::before{background:var(--rim);box-shadow:0 0 8px rgba(255,106,31,0.36)}

/* Process */
.proc{margin-top:80px;position:relative}
.rail{position:relative;height:1px;background:var(--line);margin-bottom:44px}
.rail i{position:absolute;left:0;top:-1px;height:3px;width:100%;transform:scaleX(var(--p,1));transform-origin:left;background:linear-gradient(90deg,var(--rim),#fff);box-shadow:0 0 18px rgba(255,106,31,0.315);border-radius:2px}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:28px}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr;gap:40px 28px}.rail{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.st{position:relative;padding-top:4px}
.st::before{content:"";position:absolute;left:0;top:-52px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--fg3);transition:background .5s,border-color .5s,box-shadow .6s}
.st.on::before{background:var(--fg);border-color:var(--fg);box-shadow:0 0 0 5px rgba(255,106,31,0.09),0 0 16px rgba(255,106,31,0.36)}
@media (max-width:1000px){.st::before{display:none}}
.st-n{display:block;font-size:40px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--fg3);transition:color .5s}
.st.on .st-n{color:var(--fg)}
.st h3{margin-top:22px;font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.st p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--fg2)}
.tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--fg2)}

/* Why */
.sec-why{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.voices{margin-top:72px;display:flex;flex-direction:column;gap:56px}
.vc{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.vc:nth-child(even){direction:rtl}
.vc:nth-child(even) > *{direction:ltr}
@media (max-width:860px){.vc{grid-template-columns:1fr;gap:24px}.vc:nth-child(even){direction:ltr}}
.vimg{border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:#0d1324;position:relative;box-shadow:0 40px 80px -40px rgba(0,0,0,0.16)}
.vimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,20,.05),rgba(6,10,20,.5));pointer-events:none}
.vimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.6s var(--ease)}
.vc.in .vimg img{transform:scale(1)}
.vtx blockquote{font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:600;line-height:1.5;letter-spacing:-.03em;text-wrap:pretty}
.vtx figcaption{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.65;color:var(--fg2)}
.vtx figcaption b{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:15px;color:var(--fg)}
.vtx figcaption b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rim);box-shadow:0 0 10px var(--rim)}

/* FAQ */
.faqw{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start}
.faqw .sh{position:sticky;top:110px}
@media (max-width:860px){.faqw{grid-template-columns:1fr;gap:40px}.faqw .sh{position:static}}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:14px;height:14px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1.5px;background:var(--fg);transition:transform .4s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a p{margin:0 0 26px;font-size:15px;color:var(--fg2);line-height:1.75;max-width:620px}
.js .faq details[open] .a{animation:fade .5s var(--ease)}

/* Contact */
.cta{position:relative;overflow:hidden;border-radius:32px;padding:80px 64px;display:grid;grid-template-columns:1fr 1fr;gap:64px;border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(6,10,20,.96) 0%,rgba(6,10,20,.82) 45%,rgba(6,10,20,.45) 100%),url("/img/lines.jpg") center/cover no-repeat,var(--bg3)}
.cta::before{content:"";position:absolute;right:-220px;top:-220px;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,31,0.072),transparent);pointer-events:none}
@media (max-width:900px){.cta{grid-template-columns:1fr;padding:48px 28px;gap:40px;border-radius:24px}}
.cta-txt{position:relative}
.form{position:relative;display:flex;flex-direction:column;gap:14px}
.f2c{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.f2c{grid-template-columns:1fr}}
.fld label{display:block;font-size:12.5px;color:var(--fg2);margin-bottom:6px}
.fld input,.fld select{width:100%;height:50px;padding:0 16px;border-radius:12px;border:1px solid rgba(244,246,251,.14);background:rgba(244,246,251,.04);color:var(--fg);font:inherit;font-size:15px;outline:none;transition:border-color .25s,background .25s,box-shadow .25s}
.fld select option{color:#000}
.fld input::placeholder{color:var(--fg3)}
.fld input:focus,.fld select:focus{border-color:rgba(255,106,31,0.315);background:rgba(244,246,251,.07);box-shadow:0 0 0 3px rgba(255,106,31,0.068)}
.form .btn{justify-content:center;margin-top:6px}
.done{display:none;padding:14px;border-radius:12px;background:rgba(255,106,31,0.045);color:var(--rim);font-size:14px;text-align:center}
.done.show{display:block}

/* footer */
.foot{padding-block:56px;border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--fg3)}

/* 등장 */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .sync em::after{display:none}
}

/* ── 상담 라우팅 (숫자 띠 대체) ── */
.route{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px)}
.route b,.route dt{display:block;font-size:clamp(1.2rem,1.7vw,1.45rem)!important;line-height:1.35!important;letter-spacing:-.025em!important;white-space:normal}
.route span,.route dd{line-height:1.65;max-width:34ch}
@media (max-width:760px){.route{grid-template-columns:1fr}.route>*{border-left:0!important;border-right:0!important;padding-left:0!important}.route>*+*{border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}}
/* ── 사무소 원칙 ── */
.rules-w{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.rules-w>.sh,.rules-w>.head{position:sticky;top:110px}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.rules li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:6px 28px;padding:26px 0;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.rules b{font-size:1.06rem;font-weight:600;letter-spacing:-.02em;line-height:1.5}
.rules p{margin:0;font-size:15px;line-height:1.7;color:var(--fg2)}
@media (max-width:860px){.rules-w{grid-template-columns:1fr}.rules-w>.sh,.rules-w>.head{position:static}.rules li{grid-template-columns:1fr;padding:22px 0}}
.sec-nums{padding-top:clamp(72px,9vw,120px)}

/* ── 개발사 정보 ── */
.dev-wrap{display:block!important}
.dev-info{display:flex;flex-direction:column;gap:3px;margin-top:28px;font-style:normal;font-size:12px;line-height:1.6;letter-spacing:0;color:var(--fg3);word-break:keep-all;overflow-wrap:anywhere}
.dev-info b{font-weight:600;margin-right:.7em}

/* 히어로 문구가 한 줄씩 들어가도록 */
@media (min-width:861px){.h1{font-size:clamp(2.6rem,5.2vw,4.75rem)}}
.dev-info{color:var(--fg2)}

/* ── Ponte brand lockup + shared demo (shared assets) ── */
.pt-brand{display:inline-flex;align-items:center;height:var(--pt-h,64px);gap:var(--pt-gap,10px);color:currentColor;text-decoration:none;font-family:Pretendard,-apple-system,system-ui,sans-serif;line-height:1;flex:none;white-space:nowrap}
.pt-brand__mark{width:var(--pt-mark,28px);height:var(--pt-mark,28px);flex:none}
.pt-brand__name{font-weight:700;font-size:var(--pt-name,20px);letter-spacing:-.01em}
.pt-brand__sep{width:1px;height:var(--pt-sep,16px);background:currentColor;opacity:.25;margin:0 2px}
.pt-brand__tag{font-weight:600;font-size:var(--pt-tag,11px);letter-spacing:.18em;text-transform:uppercase;opacity:.65;padding-top:1px}
@media (max-width:480px){.pt-brand{--pt-mark:22px;--pt-name:17px;--pt-tag:9.5px;--pt-sep:13px;--pt-gap:8px}.pt-brand__tag{letter-spacing:.14em}}
.pt-flogo{display:inline-flex;align-items:center;gap:8px;color:currentColor;font-weight:700;letter-spacing:-.01em;line-height:1}
.pt-flogo .pt-brand__mark{width:1.25em;height:1.25em}
.nav .pt-brand{--pt-h:40px;--pt-mark:26px;--pt-name:18px;color:var(--fg)}
.foot .pt-flogo{font-size:17px;color:var(--fg)}
.demo-sec .pd-demo{--pd-bg:transparent;--pd-accent:var(--rim);--pd-frame:#2a2a2e;--pd-frame-edge:rgba(255,255,255,.22);--pd-line:rgba(255,255,255,.3);--pd-shadow:0 50px 90px -40px rgba(0,0,0,0.16),0 0 0 1px rgba(255,255,255,.06);--pd-slack-shadow:0 30px 70px -30px rgba(0,0,0,0.16),0 0 0 1px rgba(255,255,255,.08);--pd-shadow:0 0 0 1px #000,0 70px 120px -40px rgba(0,0,0,0.16),0 0 90px -20px rgba(255,106,31,0.126)}

/* 2분 시나리오 (iframe, 16:9) */
.scn-wrap{position:relative;width:100%;max-width:1200px;margin:0 auto;aspect-ratio:16/9;background:transparent}
.scn{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;color-scheme:normal}

/* ── 도구 아이콘: 떠오름 · 연결 빛 · 광택 ── */
.works-in{position:relative}
.tool-rail{position:absolute;top:50%;height:2px;margin-top:-1px;left:0;width:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(255,106,31,0.099) 12%,rgba(255,106,31,0.099) 88%,transparent)}
.tool-rail i{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#cfe3ff;box-shadow:0 0 10px 2px rgba(255,106,31,0.383),0 0 24px 6px rgba(255,106,31,0.158);opacity:0;will-change:transform,opacity}
.tool{z-index:1;animation:toolFloat 4.8s cubic-bezier(.45,0,.25,1) infinite}
.tool:nth-child(2){animation-delay:.25s}.tool:nth-child(3){animation-delay:.5s}.tool:nth-child(4){animation-delay:.75s}.tool:nth-child(5){animation-delay:1s}
@keyframes toolFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.tool{overflow:hidden}
.tool::before{content:"";position:absolute;inset:-40% auto -40% -60%;width:45%;transform:skewX(-20deg) translateX(-140%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);pointer-events:none;z-index:2;opacity:0}
.tool.hit::before{animation:toolShine .7s cubic-bezier(.22,1,.36,1)}
.tool.hit{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.4),0 14px 26px -8px rgba(0,0,0,.8),0 0 36px -4px rgba(255,106,31,0.293)}
@keyframes toolShine{0%{opacity:1;transform:skewX(-20deg) translateX(-140%)}100%{opacity:1;transform:skewX(-20deg) translateX(420%)}}
@media (prefers-reduced-motion:reduce){.tool{animation:none}.tool-rail i{display:none}.tool.hit::before{animation:none}}

/* 한국어 줄바꿈 — 낱말 중간에서 끊지 않고, 제목은 고르게 · 본문은 끝줄 한두 글자 방지 */
body{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
h1,h2,h3,h4,.h1,.h2{text-wrap:balance}
p,li,dd,blockquote,figcaption,summary{text-wrap:pretty}
/* 대표 콘솔 폰 그림 속 칸 — 좁으면 한 줄 말줄임(글자 단위로 쪼개지지 않게) */
.con-card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.con-card{min-width:0}

@media (max-width:760px){.scn-wrap{aspect-ratio:820/640;max-width:none;margin-inline:-12px;width:calc(100% + 24px)}}

/* ── 상단 로고: 입체 접힌 카드 · 빛이 지나감 · 천천히 기울어짐 ── */
.pt-3d{display:inline-grid;place-items:center;perspective:220px;flex:none}
.pt-3d .pt-brand__mark{width:34px;height:34px;transform-style:preserve-3d;animation:pt3dTilt 6s cubic-bezier(.45,0,.25,1) infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,106,31,0.113))}
.pt-3d .pt-brand__flap{transform-origin:16.8px 10.4px;animation:pt3dFlap 6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes pt3dTilt{0%,100%{transform:rotateY(-30deg) rotateX(10deg)}50%{transform:rotateY(30deg) rotateX(-6deg)}}
@keyframes pt3dFlap{0%,15%,100%{transform:rotate(0)}50%,62%{transform:rotate(-9deg)}}
@media (max-width:480px){.pt-3d .pt-brand__mark{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.pt-3d .pt-brand__mark,.pt-3d .pt-brand__flap{animation:none}}

/* 문의 폼: 동의 · 숨은 칸 · 결과 */
.fld-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--fg2);cursor:pointer;word-break:keep-all}
.agree input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--rim)}
.agree a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.done.bad{background:rgba(255,120,120,.1);color:#ffb3b3}
.foot-links{margin-top:14px;font-size:12.5px}
.foot-links a{color:var(--fg2);text-decoration:underline;text-underline-offset:3px}

/* ── Why Ponte? 비교 ── */
.cmp{margin-top:56px;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.cmp-r{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.3fr;border-top:1px solid var(--line2)}
.cmp-r:first-child{border-top:0}
.cmp-k,.cmp-c{padding:18px 22px;font-size:15px;line-height:1.5;word-break:keep-all}
.cmp-k{font-weight:600;color:var(--fg)}
.cmp-c{color:var(--fg2)}
.cmp-p{color:var(--fg);font-weight:600;background:linear-gradient(90deg,rgba(49,130,246,.14),rgba(49,130,246,.06));box-shadow:inset 1px 0 0 rgba(255,106,31,0.158)}
.cmp-head .cmp-c{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--fg2)}
.cmp-head .cmp-p{color:var(--rim)}
.cmp-l{display:none}
@media (max-width:760px){
  .cmp{border:0;border-radius:0;display:flex;flex-direction:column;gap:12px}
  .cmp-head{display:none}
  .cmp-r{grid-template-columns:1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .cmp-k{padding:14px 18px 6px}
  .cmp-c{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:8px 18px;font-size:14.5px}
  .cmp-p{padding-block:12px}
  .cmp-l{display:block;font-size:12.5px;color:var(--fg3);font-weight:500}
  .cmp-p .cmp-l{color:var(--rim)}
}
/* 좁은 화면: 대표 폰 목업이 0폭으로 접히던 것 — 부모 폭을 잡아 줌 */
@media (max-width:960px){.ceo-dev{justify-self:stretch;display:flex;justify-content:center}}
@media (max-width:420px){.phone-sm{width:min(300px,82vw)}}
/* 좁은 화면: 상단 로고 줄이 넘쳐 [도입 문의] 가 잘리던 것 */
@media (max-width:480px){
  .nav .pt-brand{--pt-name:16px;--pt-tag:8.5px;--pt-gap:6px;--pt-sep:11px}
  .nav .pt-brand__tag{letter-spacing:.1em}
  .nav .pt-iso{width:28px;height:28px}
  .nav .btn.sm{padding-inline:14px}
}
@media (max-width:380px){.nav .pt-brand__sep,.nav .pt-brand__tag{display:none}}
html{overflow-x:clip}

/* 문의 접수 완료 팝업 */
.dm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(3,6,14,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.dm.show{opacity:1;pointer-events:auto}
.dm-card{width:min(380px,100%);background:#0f1524;border:1px solid var(--line);border-radius:22px;padding:34px 28px 26px;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,0.16);transform:translateY(12px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dm.show .dm-card{transform:none}
.dm-ic{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(49,130,246,.16);box-shadow:0 0 0 6px rgba(49,130,246,.08)}
.dm-ic svg{width:28px;height:28px;fill:none;stroke:#8fbcff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dm-card h3{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.dm-card p{margin:8px 0 24px;font-size:15px;color:var(--fg2);word-break:keep-all}
.dm-ok{width:100%;justify-content:center}

/* ── 인트로 영상: 첫 방문 때 한 번, 끝나면 부드럽게 랜딩으로 ── */
html.intro-on, html.intro-on body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:#03060d;transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s}
.intro.out{opacity:0;transform:scale(1.04);filter:blur(6px);pointer-events:none}
.intro-bg{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 45%,rgba(255,106,31,0.063),transparent 70%),#03060d}
.intro-v{position:relative;height:min(92vh,calc(92vw * 16 / 9));width:auto;max-width:92vw;aspect-ratio:9/16;object-fit:cover;border-radius:22px;box-shadow:0 40px 120px -30px rgba(0,0,0,0.16),0 0 0 1px rgba(255,255,255,.06);background:#060a14}
@media (max-width:640px){.intro-v{height:100vh;height:100dvh;max-width:100vw;width:100vw;border-radius:0;box-shadow:none}}
.intro-ui{position:absolute;right:24px;bottom:28px;display:flex;gap:10px;z-index:2}
.intro-ui button{font:600 14px var(--sans);color:#f4f6fb;background:rgba(10,14,26,.62);border:1px solid rgba(255,255,255,.18);padding:10px 16px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.intro-ui .intro-skip{background:#f4f6fb;color:#060a14;border-color:#f4f6fb}
@media (max-width:640px){.intro-ui{right:16px;bottom:calc(20px + env(safe-area-inset-bottom))}}
.intro-bar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.06);z-index:2}
.intro-bar i{display:block;height:100%;background:linear-gradient(90deg,#8fbcff,#cfe3ff);transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear}
/* 문의: 폼만 */
.cta.form-only{display:block;max-width:640px;margin-inline:auto}
.cta.form-only .form{width:100%}
/* 문의 폼: 거래처 수 선택 칩 */
.fld-size{border:0;margin:0;padding:0;min-width:0}
.fld-size legend{padding:0;margin-bottom:8px;font-size:13px;color:var(--fg2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:14px;color:var(--fg2);transition:background .2s,border-color .2s,color .2s}
.chip:hover span{border-color:rgba(255,106,31,0.18)}
.chip input:checked + span{background:rgba(49,130,246,.18);border-color:rgba(255,106,31,0.315);color:var(--fg)}
.chip input:focus-visible + span{outline:2px solid var(--rim);outline-offset:2px}
/* 인트로: 건너뛰기를 위쪽에도 잘 보이게 (휴대폰 하단 막대에 가리지 않게) */
.intro-ui{top:20px;bottom:auto;right:20px}
@media (max-width:640px){.intro-ui{top:calc(14px + env(safe-area-inset-top));bottom:auto;right:12px}}
.intro{cursor:pointer}

/* ── 히어로: 글 + 세로 릴스 ── */
.hero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;text-align:left}
.hero-split .hero-txt{min-width:0}
.hero-split .hero-cta{justify-content:flex-start}
.hero-reel-w{position:relative;justify-self:center;width:min(100%,380px);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#060a14;box-shadow:0 50px 100px -40px rgba(0,0,0,0.16),0 0 0 1px rgba(255,255,255,.07),0 0 80px -20px rgba(255,106,31,0.113)}
.hero-reel-v{display:block;width:100%;height:100%;object-fit:cover}
.reel-snd{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;background:rgba(6,10,20,.45);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .2s;opacity:.85}
.reel-snd:hover{background:rgba(6,10,20,.7);transform:scale(1.06);opacity:1}
.reel-snd svg{width:20px;height:20px;fill:none;stroke:#f4f6fb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reel-snd svg path:first-child{fill:rgba(244,246,251,.9);stroke:none}
.reel-snd .i-on{display:none}.reel-snd.on .i-on{display:block}.reel-snd.on .i-off{display:none}
@media (max-width:900px){.hero-split{grid-template-columns:1fr;gap:40px;text-align:center}.hero-split .hero-cta{justify-content:center}.hero-reel-w{width:min(86vw,360px)}}
.hero-split .h1{font-size:clamp(2.1rem,3.6vw,3.6rem);line-height:1.14}

/* ── 채널은 하나, 담당자는 여럿 (iframe 로 끼움) ── */
.sec-split .sh{max-width:780px}
.split-f{display:block;width:100%;height:900px;border:0;margin-top:48px;background:transparent;color-scheme:normal;overflow:hidden}
.dm-ck{margin:-8px 0 12px}
.dm-ck-t{margin:0 0 14px!important;font-size:14px!important}
.dm-go{width:100%;justify-content:center;text-decoration:none}
.dm-ok.btn-o{margin-top:0;background:transparent;color:var(--fg);border-color:rgba(244,246,251,.22);transition:none}

/* ── 블로그 톤(흰 바탕 · 먹색 글자 · 주황 포인트) — 색만 바꾼 시안. 안쪽 시연 화면(iframe)도 같이 ── */
:root{color-scheme:light;
  --bg:#ffffff;--bg2:#fafafa;--bg3:#f4f4f5;
  --fg:#121212;--fg2:#4d4d4d;--fg3:#8c8c8c;
  --line:#ececec;--line2:#f3f3f3;
  --rim:#ff6a1f;--rim-soft:rgba(255,106,31,.12);--accent:#ff6a1f}
html,body{background:transparent}
.pv-note{background:rgba(255,255,255,.9)}
.cta{background:#fafafa;border:1px solid #ececec}
.cta::before{background:radial-gradient(closest-side,rgba(255,106,31,.10),transparent)}
.fld input,.fld select,.csel-btn{border:1px solid #e3e3e3;background:#fff;color:#121212}
.fld input:focus,.fld select:focus{border-color:#ff6a1f;background:#fff;box-shadow:0 0 0 3px rgba(255,106,31,.15)}
.done{background:rgba(255,106,31,.1);color:#d4520f}
.btn-w{background:#121212;color:#fff}

/* ── 맨 위 바 · 모바일 메뉴: 흰 바탕 ── */
.nav.solid{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);border-color:#ececec}
.nav .pt-brand{color:#121212}
.mpanel{background:#fff;border-top:1px solid #ececec}
.mpanel a{color:#4d4d4d;border-bottom:1px solid #ececec}
.mpanel a:hover,.mpanel a[aria-current="page"]{color:#121212}
.nav{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:#ececec}
.mtog{border-color:#cfcfcf}
.mtog:hover{border-color:#121212}

/* ── 블로그와 같은 로고 · 메뉴 · 도구 아이콘(납작하게) ── */
.pt-brand.bk{gap:9px;--pt-h:40px;color:#121212;height:40px}
.bk-mark{width:26px;height:26px;flex:none}
.pt-brand.bk b,.pt-flogo.bk b{font-weight:700;font-size:20px;letter-spacing:-.02em}
.bk-tag{font-size:10.5px;letter-spacing:.16em;font-weight:600;color:#8c8c8c;padding-left:10px;margin-left:2px;border-left:1px solid #e6e6e6;text-transform:uppercase;line-height:1.2}
.pt-flogo.bk{gap:8px;color:#121212}.pt-flogo.bk .bk-mark{width:22px;height:22px}
@media (max-width:860px){.bk-tag{display:none}}
.nav .menu{gap:2px}
.menu a{padding:8px 13px;border-radius:9px;font-size:15px;font-weight:500;color:#4d4d4d;transition:color .15s,background .15s}
.menu a:hover{color:#121212;background:#f3f5f8}
.menu a::after{display:none}
.menu a[aria-current],.menu a.on{color:#121212;font-weight:700}
.mtog{border:0;background:transparent;border-radius:10px;width:40px;height:40px}
.mtog:hover{border:0;background:#f3f5f8}
.mtog i{left:11px;width:18px;height:2px;background:#121212}
.mtog i:nth-child(1){top:13px}.mtog i:nth-child(2){top:19px}.mtog i:nth-child(3){top:25px}
.mtog[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mtog[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mpanel a{padding:14px 0;font-size:16px;font-weight:600;color:#121212;min-height:0}
.mpanel a[aria-current="page"],.mpanel a.on{color:#ff6a1f}
.mpanel a:hover{color:#ff6a1f}
/* 도구 아이콘: 입체 · 그림자 없이 */
.tool{background:#fff;border:1px solid #e6e6e6;box-shadow:none}
.tool-k{background:#fee500;border-color:#f2d800}
.tool::after{display:none}
.tool svg{filter:none}
.tool:hover{transform:translateY(-2px);box-shadow:none;border-color:#cfcfcf}
.mpanel a{color:#121212!important;font-weight:600!important}
.mpanel a[aria-current="page"],.mpanel a.on,.mpanel a:hover{color:#ff6a1f!important}
.tool,.tool:hover{box-shadow:none!important}
.pt-flogo.bk{display:inline-flex;align-items:center;background:none;width:auto;height:auto;padding:0;border:0}
.sec-feat{padding-bottom:72px}
.scn-wrap{margin-top:0}
/* FAQ 열고 닫는 중 */
details.is-opening .a,details.is-closing .a{will-change:opacity}
details summary i{transition:transform .38s cubic-bezier(.16,1,.3,1)}

/* 아이패드 사파리: 스크롤 중 상단 바가 사라지는 문제 — 고정 바를 별도 레이어로 */
.nav{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:transform;z-index:90}
/* 구역 사이 빈칸 다듬기 */
.sec-split{padding-bottom:28px}
#product.sec{padding-top:72px}
/* 윤곽 버튼: 흰 바탕에서 테두리가 보이게 */
.btn-o{border:1.5px solid #cfcfcf;background:#fff;color:#121212}
.btn-o:hover{border-color:#ff6a1f;color:#ff6a1f;background:#fff}
@media (max-width:760px){.sec-split{padding-bottom:12px}#product.sec{padding-top:48px}}
.faq .a ul{margin:0 0 18px;padding:0 0 0 20px;max-width:620px;font-size:15px;color:var(--fg2);line-height:1.75}.faq .a li{margin:0 0 8px}.faq .a li strong{color:var(--fg);font-weight:600}.faq .a ul+p{margin-top:4px}