/* 카빌 마케팅 홈페이지 — 공용 디자인 시스템
   브랜드 토큰은 legal/privacy.html 과 동일하게 유지(사이트 일관성). */
:root{
  --brand:#12885B; --brand-deep:#0B5A3C; --gold:#E7B93C;
  --ink:#1A1712; --ink2:#5B5B58; --ink3:#8A8A85;
  --paper:#FFFFFF; --surface:#F6F8F5; --line:#E5E7E2;
  --brand-tint:#EAF3EE; --gold-tint:#FBF3DC; --gold-ink:#8A6A12;
  --shadow:0 18px 50px -20px rgba(9,60,40,.28);
  --radius:18px; --maxw:1080px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#2BB47A; --brand-deep:#1E7A54; --gold:#E7B93C;
    --ink:#F1ECDF; --ink2:#B4AD9C; --ink3:#847C6D;
    --paper:#14120F; --surface:#1E1B15; --line:#332E24;
    --brand-tint:#12291F; --gold-tint:#332a12; --gold-ink:#E7C766;
    --shadow:0 18px 50px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --brand:#2BB47A; --brand-deep:#1E7A54; --gold:#E7B93C;
  --ink:#F1ECDF; --ink2:#B4AD9C; --ink3:#847C6D;
  --paper:#14120F; --surface:#1E1B15; --line:#332E24;
  --brand-tint:#12291F; --gold-tint:#332a12; --gold-ink:#E7C766;
  --shadow:0 18px 50px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Gothic A1','IBM Plex Sans KR',sans-serif; margin:0; line-height:1.18; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px}

/* ── nav ── */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:9px; font-family:'Gothic A1',sans-serif; font-weight:900; font-size:20px; letter-spacing:-.02em}
.brand img{width:26px; height:26px; border-radius:7px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{color:var(--ink2); font-size:14.5px; font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; align-items:center; gap:10px}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 22px; border-radius:12px; font-family:'IBM Plex Sans KR',sans-serif; font-weight:700; font-size:15.5px; border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 24px -12px var(--brand)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-sm{height:42px; padding:0 16px; font-size:14px; border-radius:10px}

/* ── hero ── */
.hero{padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:7px; background:var(--brand-tint); color:var(--brand); font-weight:700; font-size:13px; padding:7px 13px; border-radius:999px; margin-bottom:20px}
.hero h1{font-size:clamp(34px,5vw,52px); font-weight:900}
.hero .lead{color:var(--ink2); font-size:clamp(16px,2vw,19px); margin-top:18px; max-width:30em}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.trust{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; color:var(--ink3); font-size:13.5px; font-weight:500}
.trust b{color:var(--brand); font-weight:700}
.phone{justify-self:center; width:min(300px,78vw); border:10px solid var(--ink); border-radius:40px; overflow:hidden; box-shadow:var(--shadow); background:var(--ink)}
.phone img{width:100%; display:block}

/* ── sections ── */
.section{padding:64px 0}
.section-head{max-width:38em; margin-bottom:40px}
.section-head .kicker{color:var(--brand); font-weight:700; font-size:14px; letter-spacing:.02em}
.section-head h2{font-size:clamp(26px,3.4vw,36px); font-weight:800; margin-top:10px}
.section-head p{color:var(--ink2); margin-top:12px; font-size:16.5px}
.section.alt{background:var(--surface); border-block:1px solid var(--line)}

/* ── steps ── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.step{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.step .num{width:34px; height:34px; border-radius:10px; background:var(--brand); color:#fff; font-family:'Gothic A1',sans-serif; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:16px}
.step h3{font-size:18px; font-weight:800; margin:16px 0 7px}
.step p{color:var(--ink2); font-size:14.5px}

/* ── features ── */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.feat .ic{font-size:26px; line-height:1}
.feat h3{font-size:18px; font-weight:800; margin:14px 0 8px}
.feat p{color:var(--ink2); font-size:14.5px}
.feat.hi{background:var(--brand); border-color:var(--brand)}
.feat.hi h3,.feat.hi p{color:#fff}
.feat.hi p{opacity:.9}

/* ── showcase (screenshots row) ── */
.shots{display:flex; gap:20px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory}
.shots .phone{flex:0 0 auto; width:230px; scroll-snap-align:center}

/* ── cta band ── */
.band{background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff; border-radius:24px; padding:46px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.band h2{color:#fff; font-size:clamp(24px,3vw,32px); font-weight:800}
.band p{color:rgba(255,255,255,.88); margin-top:10px}
.band .btn-primary{background:#fff; color:var(--brand-deep); box-shadow:none}
.band .btn-primary:hover{background:var(--gold-tint)}
.band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.band .btn-ghost:hover{border-color:#fff; color:#fff}

/* ── doc pages (terms/privacy/about) ── */
.doc{max-width:760px; margin:0 auto; padding:56px 24px 80px}
.doc h1{font-size:clamp(28px,4vw,38px); font-weight:900}
.doc .meta{color:var(--ink3); font-size:14px; margin-top:10px}
.doc h2{font-size:20px; font-weight:800; margin:38px 0 12px}
.doc p,.doc li{color:var(--ink2); font-size:15.5px; line-height:1.75}
.doc ul{padding-left:20px}
.notice{background:var(--gold-tint); color:var(--gold-ink); border:1px solid color-mix(in srgb,var(--gold) 40%,transparent); border-radius:12px; padding:14px 16px; font-size:14px; font-weight:500; margin:22px 0}
.placeholder{border:1.5px dashed var(--line); border-radius:var(--radius); padding:48px 28px; text-align:center; color:var(--ink3); background:var(--surface)}

/* ── footer ── */
.foot{border-top:1px solid var(--line); background:var(--surface); margin-top:20px}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding:52px 0 30px}
.foot .brand{margin-bottom:12px}
.foot p{color:var(--ink3); font-size:13.5px; max-width:26em}
.foot h4{font-size:13px; color:var(--ink3); font-weight:700; letter-spacing:.04em; margin:0 0 14px; text-transform:uppercase}
.foot-col a{display:block; color:var(--ink2); font-size:14.5px; padding:5px 0}
.foot-col a:hover{color:var(--brand)}
.foot-legal{border-top:1px solid var(--line); padding:22px 0; color:var(--ink3); font-size:12.5px; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between}

/* ── responsive ── */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero{padding:40px 0 20px}
  .phone{order:-1}
  .nav-links{display:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .band{padding:34px 24px}
}