:root { --brand:#1e88ee; --brand-d:#1673d6; --soft:#edf5ff; --ink:#111; --ink2:#5f6368; --ink3:#80858c; --line:#eee; --line2:#e2e4e8; --bg:#f8f8f8; --w:1160px; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; scrollbar-width:thin; scrollbar-color:#c9cdd3 transparent; }
html { scroll-behavior:smooth; }
html,body { overflow-x:clip; }
body { margin:0; font:17px/1.7 "Pretendard Variable",Pretendard,-apple-system,sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere; letter-spacing:-.01em; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
figure { margin:0; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.03em; }
h1,h2 { white-space:pre-line; }

.logo { display:inline-block; flex:none; width:92px; height:31px; overflow:hidden; background:url(/img/logo-full.svg) left center/contain no-repeat; color:transparent; font-size:0; text-decoration:none; }
.btn-primary,.btn-ghost,.btn-white,.btn-outline { display:inline-flex; align-items:center; justify-content:center; height:54px; padding:0 26px; border:1px solid transparent; border-radius:8px; font:inherit; font-size:16px; font-weight:700; letter-spacing:-.03em; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .15s,border-color .15s; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-d); }
.btn-primary:disabled { opacity:.55; }
.btn-primary.sm { height:42px; padding:0 16px; font-size:14.5px; border-radius:6px; }
.btn-ghost { background:#fff; border-color:var(--line2); color:var(--ink); }
.btn-ghost:hover { background:var(--bg); }
.btn-white { background:#fff; color:var(--brand-d); }
.btn-white:hover { background:#f2f7ff; }
.btn-outline { background:rgba(255,255,255,.08); border-color:#fff; color:#fff; }
.btn-outline:hover { background:rgba(255,255,255,.14); }
.block { display:flex; width:100%; }
.text-link { display:inline-block; margin-top:20px; color:var(--brand-d); font-weight:600; text-decoration:none; }
.text-link::after { content:""; display:inline-block; width:7px; height:7px; margin-left:7px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:margin-left .15s; }
.text-link:hover::after { margin-left:11px; }
.text-link.light { color:#fff; }
.note { margin:16px 0 0; color:var(--ink3); font-size:13px; text-align:center; }

.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:34px; height:70px; padding:0 max(20px, calc(50% - 640px)); background:#fff; }
.top nav { display:flex; align-items:center; gap:30px; flex:1; font-size:15.5px; font-weight:500; }
.top nav > a { text-decoration:none; }
.top nav > a:hover,.menu-btn:hover { color:var(--brand-d); }
.menu { position:relative; }
.menu-btn { display:flex; align-items:center; gap:7px; padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; }
.menu-btn::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.menu-panel { position:absolute; left:-14px; top:calc(100% + 20px); display:none; grid-template-columns:1fr 1fr; gap:2px; width:560px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 12px 36px rgba(0,0,0,.1); }
.menu.open .menu-panel { display:grid; }
.menu-panel a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:7px; line-height:1.45; text-decoration:none; }
.menu-panel a:hover { background:var(--bg); }
.menu-panel img { flex:none; width:40px; height:40px; }
.menu-panel span { display:block; }
.menu-panel b { display:block; font-size:15px; font-weight:600; }
.menu-panel small { color:var(--ink3); font-size:13px; }
.top-cta { display:flex; align-items:center; gap:18px; margin-left:auto; font-size:15px; }
.link { color:var(--ink2); text-decoration:none; }
.link:hover { color:var(--ink); }

.hero,.f-hero,.p-hero { position:relative; display:flex; flex-direction:column; justify-content:center; color:#fff; background:#5f93df url(/img/art/hero-glass.webp) center/cover no-repeat; }
.hero::before,.f-hero::before,.p-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(95deg,rgba(14,48,125,.84) 0%,rgba(14,48,125,.72) 56%,rgba(14,48,125,.2) 82%,rgba(14,48,125,.05) 100%); }
.hero > *,.f-hero > *,.p-hero > * { position:relative; }
.hero { min-height:680px; padding:90px max(20px, calc(50% - 580px)) 190px; }
.hero h1 { font-size:clamp(36px,5vw,62px); line-height:1.2; }
.hero p { max-width:36em; margin:20px 0 30px; color:#fff; font-size:clamp(17px,1.5vw,20px); font-weight:500; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.hero .btn-primary,.f-hero .btn-primary { background:#fff; color:var(--brand-d); }
.hero .btn-primary:hover,.f-hero .btn-primary:hover { background:#f2f7ff; }
.hero .btn-ghost,.f-hero .btn-ghost { background:rgba(255,255,255,.08); border-color:#fff; color:#fff; }
.hero .btn-ghost:hover,.f-hero .btn-ghost:hover { background:rgba(255,255,255,.14); }

.stage-wrap { position:relative; z-index:2; max-width:var(--w); margin:-130px auto 0; padding:0 20px; }
.stage { position:relative; }
.frame { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 18px 56px rgba(20,50,110,.16); }
.hero-phone { position:absolute; right:-30px; bottom:-34px; width:23%; overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 14px 46px rgba(20,50,110,.26); }

.pains { padding:112px max(20px, calc(50% - var(--w) / 2)) 100px; text-align:center; }
.pains h2,.cases h2,.all h2 { font-size:clamp(27px,3.2vw,40px); line-height:1.32; }
.pain-grid,.all-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:44px; border-top:1px solid var(--line); border-left:1px solid var(--line); text-align:center; }
.pain-grid article,.all-item { display:block; padding:34px 24px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.pain-grid img,.all-item img { width:76px; height:76px; margin:0 auto 14px; }
.pain-grid h3 { font-size:18px; line-height:1.42; }
.pain-grid p { margin:10px 0 0; color:var(--ink2); font-size:15px; line-height:1.6; }

.band { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); gap:54px; align-items:center; padding:96px max(20px, calc(50% - 640px)); color:#fff; background:#2d63c6 url(/img/art/band-glass.webp) center/cover no-repeat; }
.band::before { content:""; position:absolute; inset:0; background:rgba(14,48,125,.66); }
.band > * { position:relative; }
.band h2 { font-size:clamp(28px,3.2vw,42px); line-height:1.28; }
.band p { margin:16px 0 0; color:#fff; }
.band-points { margin:18px 0 0; padding:0; list-style:none; color:#fff; font-size:15.5px; }
.band-points li { position:relative; padding:4px 0 4px 22px; }
.band-points li::before { content:""; position:absolute; left:2px; top:12px; width:11px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.band .frame { border:0; box-shadow:0 18px 56px rgba(8,25,70,.34); }

.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:60px; align-items:center; padding:108px max(20px, calc(50% - var(--w) / 2)); }
.split.flip { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.split.flip .split-copy { order:2; }
.tint { background:var(--bg); }
.split h2,.team-band h2 { font-size:clamp(27px,3.2vw,40px); line-height:1.3; }
.split p,.team-band p { margin:16px 0 0; color:var(--ink2); }
.sms-stage { position:relative; height:560px; }
.sms-art { position:absolute; left:-4%; top:-26px; width:56%; }
.sms-widget { position:absolute; right:0; top:10px; z-index:1; width:min(290px,60%); overflow:hidden; border-radius:12px; box-shadow:0 14px 46px rgba(20,50,110,.18); }
.sms-phone { position:absolute; left:0; bottom:32px; z-index:2; width:min(320px,62%); padding:18px; border-radius:14px; background:#111; color:#fff; box-shadow:0 14px 46px rgba(0,0,0,.28); font-size:15px; line-height:1.55; }
.sms-from { margin-bottom:9px; color:#aab0ba; font-size:12.5px; }
.sms-bubble { padding:12px 14px; border-radius:12px; background:#2a2d33; }
.copy-art { width:120px; margin:0 0 8px -8px; }

.cases { padding:108px max(20px, calc(50% - 640px)); text-align:center; }
.cases-lead { margin:10px 0 0; color:var(--ink2); }
.case-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:40px; text-align:left; }
.case-grid article { overflow:hidden; border-radius:10px; background:#fff; }
.case-photo { overflow:hidden; border-radius:10px; }
.case-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s var(--ease); }
.case-grid article:hover img { transform:scale(1.04); }
.case-grid h3 { margin:16px 2px 0; font-size:18px; }
.case-grid p { margin:6px 2px 4px; color:var(--ink2); font-size:14.5px; line-height:1.6; }

.team-band { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px; align-items:center; padding:96px max(20px, calc(50% - var(--w) / 2)); background:var(--bg); }
.team-band figure { overflow:hidden; border-radius:10px; }
.team-band img { width:100%; aspect-ratio:3/2; object-fit:cover; }

.all { padding:108px max(20px, calc(50% - var(--w) / 2)); text-align:center; }
.all-item { text-decoration:none; transition:background .15s; }
.all-item:hover { background:#f7fbff; }
.all-item img { transition:transform .25s var(--ease); }
.all-item:hover img { transform:translateY(-4px); }
.all-item b { display:block; font-size:18px; font-weight:700; letter-spacing:-.03em; }
.all-item span { display:block; margin-top:4px; color:var(--ink2); font-size:14.5px; line-height:1.55; }

.f-hero { min-height:520px; padding:70px max(20px, calc(50% - 580px)) 170px; }
.f-hero h1 { font-size:clamp(34px,4.6vw,56px); line-height:1.22; }
.f-hero p { max-width:30em; margin:18px 0 28px; color:#fff; font-size:clamp(17px,1.4vw,19px); font-weight:500; }
.f-part { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); gap:48px; align-items:center; padding:84px max(20px, calc(50% - var(--w) / 2)); }
.f-part:nth-of-type(even) { grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); background:var(--bg); }
.f-part:nth-of-type(even) .f-copy { order:2; }
.f-part.is-narrow,.f-part.is-narrow:nth-of-type(even) { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.f-part h2 { font-size:clamp(25px,2.6vw,34px); line-height:1.32; }
.f-part p { margin:14px 0 0; color:var(--ink2); }
.f-part ul { margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line2); list-style:none; font-size:15.5px; }
.f-part li { position:relative; padding:3px 0 3px 22px; }
.f-part li::before { content:""; position:absolute; left:2px; top:10px; width:11px; height:6px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg); }
.plate { min-width:0; padding:clamp(14px,2.6vw,34px); border-radius:12px; background:#7fa9e6 url(/img/art/plate-glass.webp) center/cover no-repeat; }
.plate .frame { border:0; box-shadow:0 14px 44px rgba(15,45,110,.28); }
.f-part.is-narrow .plate { display:flex; justify-content:center; }
.f-part.is-narrow .frame { width:min(320px,100%); }

.p-hero { min-height:380px; padding:60px 20px; align-items:center; text-align:center; }
.p-hero h1 { font-size:clamp(34px,4.6vw,56px); line-height:1.22; }
.p-hero p { margin:14px 0 0; color:#fff; font-weight:500; }
.p-hero::before { background:rgba(14,48,125,.68); }
.p-plans { position:relative; z-index:2; margin-top:-70px; padding:0 max(20px, calc(50% - 640px)) 80px; }
.plan-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:stretch; }
.plan { display:flex; flex-direction:column; padding:26px 20px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 12px 36px rgba(20,50,110,.08); }
.plan:nth-child(2) { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand),0 12px 36px rgba(20,50,110,.12); }
.plan::before { content:""; display:block; width:68px; height:68px; margin:-4px 0 10px -6px; background:center/contain no-repeat; }
.plan:nth-child(1)::before { background-image:url(/img/art/icon-inbox.webp); }
.plan:nth-child(2)::before { background-image:url(/img/art/icon-ai.webp); }
.plan:nth-child(3)::before { background-image:url(/img/art/icon-workflow.webp); }
.plan:nth-child(4)::before { background-image:url(/img/art/icon-analytics.webp); }
.plan:nth-child(5)::before { background-image:url(/img/art/icon-team.webp); }
.plan h2 { font-size:20px; }
.plan .desc { min-height:42px; margin:4px 0 16px; color:var(--ink3); font-size:14px; line-height:1.5; }
.plan .price { margin:0; font-size:15px; line-height:1.3; }
.plan .price b { font-size:30px; font-weight:800; letter-spacing:-.02em; }
.plan .price span { color:var(--ink3); }
.plan .sub { min-height:40px; margin:8px 0 16px; color:var(--ink3); font-size:13px; line-height:1.55; }
.plan ul { flex:1; margin:0 0 22px; padding:16px 0 0; border-top:1px solid var(--line); list-style:none; font-size:14.5px; }
.plan li { padding:3px 0; }
.calc { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:50px; align-items:center; padding:84px max(20px, calc(50% - var(--w) / 2)); color:#fff; background:#2d63c6 url(/img/art/band-glass.webp) center/cover no-repeat; }
.calc::before { content:""; position:absolute; inset:0; background:rgba(14,48,125,.66); }
.calc > * { position:relative; }
.calc h2 { font-size:clamp(26px,3vw,38px); line-height:1.3; }
.calc-copy p { margin:14px 0 0; color:#fff; }
.calc-box { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:32px; border-radius:10px; background:#fff; color:var(--ink); box-shadow:0 14px 44px rgba(8,25,70,.25); }
.calc-box label { font-size:14px; font-weight:500; }
.calc-box input { display:block; width:100%; height:46px; margin-top:6px; padding:0 12px; border:1px solid var(--line2); border-radius:8px; font:inherit; font-size:16px; }
.calc-box input:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,136,238,.16); }
.calc-result { grid-column:1 / -1; padding-top:14px; border-top:1px solid var(--line); }
.calc-result span { display:block; color:var(--ink2); font-size:14px; }
.calc-result b { display:block; color:var(--brand-d); font-size:34px; font-weight:800; line-height:1.3; letter-spacing:-.02em; }
.calc-result small { color:var(--ink3); font-size:13px; }
.units,.faq { padding:84px max(20px, calc(50% - 400px)) 0; }
.units h2,.faq h2 { margin-bottom:20px; font-size:clamp(25px,2.6vw,34px); }
.unit-table { overflow-x:auto; }
.units table { width:100%; border-collapse:collapse; font-size:15.5px; }
.units th { padding:10px 12px; border-bottom:1px solid var(--ink); font-size:14px; font-weight:600; text-align:right; white-space:nowrap; }
.units td { padding:11px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; text-align:right; }
.units th:first-child,.units td:first-child { text-align:left; }
.faq { padding-bottom:96px; }
.faq details { border-bottom:1px solid var(--line2); }
.faq summary { padding:18px 0; font-weight:600; cursor:pointer; }
.faq details p { margin:0 0 18px; color:var(--ink2); }

.cta { position:relative; padding:100px 20px; color:#fff; text-align:center; background:#2d63c6 url(/img/art/cta-glass.webp) center/cover no-repeat; }
.cta::before { content:""; position:absolute; inset:0; background:rgba(14,48,125,.68); }
.cta-copy { position:relative; }
.cta h2 { font-size:clamp(30px,4vw,46px); line-height:1.28; }
.cta p { margin:14px 0 0; color:#fff; }
.cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }
.foot { display:grid; grid-template-columns:2fr 2fr 1fr; gap:40px; padding:60px max(20px, calc(50% - var(--w) / 2)) 70px; background:#111; color:#c5c5c5; font-size:14.5px; }
.foot .logo { background-image:url(/img/logo-full-white.svg); }
.foot-brand p { margin:8px 0 0; color:#8e8e8e; }
.foot-col { columns:2; column-gap:20px; }
.foot-col:last-child { columns:1; }
.foot-col h3 { margin-bottom:10px; color:#fff; column-span:all; font-size:14px; }
.foot-col a { display:block; padding:3px 0; color:#aaa; text-decoration:none; }
.foot-col a:hover { color:#fff; }

.auth { display:grid; place-items:center; min-height:100dvh; padding:20px; background:#5f93df url(/img/art/hero-glass.webp) center/cover no-repeat; font-size:16px; }
.auth-box { width:100%; max-width:440px; padding:40px 40px 32px; border-radius:12px; background:#fff; box-shadow:0 8px 40px rgba(0,0,0,.15); }
.auth-box h1 { margin:18px 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:20px; letter-spacing:-.035em; }
.auth-box label { display:block; margin-bottom:14px; font-size:14px; font-weight:500; }
.auth-box small { color:var(--ink3); font-weight:400; }
.auth-box input { display:block; width:100%; height:46px; margin-top:6px; padding:0 13px; border:1px solid var(--line2); border-radius:8px; font:inherit; font-size:16px; }
.auth-box input:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,136,238,.16); }
.auth-box .btn-primary { width:100%; margin-top:6px; }
.err { margin:0 0 10px; color:#c8262b; font-size:14px; }
.alt { margin:18px 0 0; color:var(--ink2); font-size:14px; text-align:center; }

/* 첫 화면은 불러올 때 한 번, 나머지는 스크롤로 들어올 때 한 번만 나타난다. */
@keyframes aosUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes aosStage { from { opacity:0; transform:translateY(44px) scale(.975); } to { opacity:1; transform:none; } }
.hero h1,.hero p,.hero .hero-actions,.f-hero h1,.f-hero p,.f-hero .hero-actions,.p-hero h1,.p-hero p { animation:aosUp .8s var(--ease) both; }
.hero p,.f-hero p,.p-hero p { animation-delay:.08s; }
.hero .hero-actions,.f-hero .hero-actions { animation-delay:.16s; }
.stage-wrap > .stage,.stage-wrap > .frame { animation:aosStage 1s var(--ease) .24s both; }
.hero-phone { animation:aosUp .9s var(--ease) .62s both; }
[data-aos] { opacity:0; transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--aos-delay,0ms); will-change:opacity,transform; }
[data-aos="up"] { transform:translateY(34px); }
[data-aos="left"] { transform:translateX(44px); }
[data-aos="right"] { transform:translateX(-44px); }
[data-aos="zoom"] { transform:scale(.95); }
[data-aos].aos-in { opacity:1; transform:none; will-change:auto; }

@media (max-width:1240px) { .hero-phone { right:0; } }
@media (max-width:980px) {
  .top nav > a { display:none; }
  .wide-only { display:none; }
  .band,.split,.split.flip,.f-part,.f-part:nth-of-type(even),.f-part.is-narrow,.f-part.is-narrow:nth-of-type(even),.calc,.team-band { grid-template-columns:minmax(0,1fr); gap:30px; padding-top:60px; padding-bottom:60px; }
  .split.flip .split-copy,.f-part:nth-of-type(even) .f-copy { order:0; }
  .plan-grid,.pain-grid,.all-grid,.case-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pains,.cases,.all { padding-top:64px; padding-bottom:64px; }
  .foot { grid-template-columns:1fr 1fr; }
  .foot-brand { grid-column:1 / -1; }
}
@media (max-width:600px) {
  body { font-size:16px; }
  .top { gap:14px; height:62px; }
  .menu-panel { position:fixed; left:12px; right:12px; top:64px; grid-template-columns:1fr; width:auto; max-height:calc(100dvh - 84px); overflow:auto; }
  .top-cta .link { display:none; }
  .hero { min-height:560px; padding:50px 20px 150px; }
  .f-hero { min-height:440px; padding:50px 20px 130px; }
  .stage-wrap { margin-top:-100px; }
  .stage > .frame { display:none; }
  .hero-phone { position:static; display:block; width:min(300px,84%); margin:0 auto; }
  .plan-grid,.calc-box,.case-grid { grid-template-columns:minmax(0,1fr); }
  .pain-grid,.all-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .pain-grid { grid-template-columns:minmax(0,1fr); }
  .pain-grid article { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:12px; padding:20px 16px; text-align:left; }
  .pain-grid img { grid-row:span 2; width:60px; height:60px; margin:0; }
  .all-item { padding:24px 12px; }
  .plan .desc,.plan .sub { min-height:0; }
  .sms-stage { height:480px; } .sms-art { width:70%; top:-8px; }
  .hero-actions .btn-primary,.hero-actions .btn-ghost { flex:1; padding:0 14px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  [data-aos] { opacity:1; transform:none; }
}

.hero h1,.hero p,.f-hero h1,.f-hero p,.p-hero h1,.p-hero p,.band h2,.band p,.band li,.calc h2,.calc-copy p,.cta h2,.cta p { text-shadow:0 1px 14px rgba(8,28,80,.3); }