/* OSSU / 딜버디 랜딩 — 절제된 SaaS 스타일 (anti-slop) */
:root{
  --bg:#ffffff; --fg:#111418; --muted:#5b636e; --line:#e6e8ec;
  --soft:#f6f7f9; --accent:#1a1d21; --accent-fg:#ffffff;
  --link:#2557d6; --radius:12px; --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",Roboto,"Noto Sans KR",sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* header */
header.site{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand img{height:22px}
.brand .sep{color:var(--line)}
.brand .sub{font-size:.8rem; color:var(--muted); font-weight:600}
.nav-links{display:flex; gap:22px; align-items:center}
.nav-links a{color:var(--fg); font-size:.92rem; font-weight:500}
.btn{display:inline-block; padding:11px 18px; border-radius:10px; font-weight:600; font-size:.95rem; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--accent-fg)}
.btn-primary:hover{opacity:.9; text-decoration:none}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line)}
.btn-ghost:hover{background:var(--soft); text-decoration:none}

/* hero */
.hero{padding:84px 0 64px; text-align:center}
.badge{display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:.8rem; color:var(--muted); margin-bottom:22px}
.hero h1{font-size:clamp(1.9rem,5vw,3rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 16px}
.hero p.lead{font-size:clamp(1rem,2.4vw,1.2rem); color:var(--muted); max-width:640px; margin:0 auto 28px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.note-byok{margin-top:18px; font-size:.85rem; color:var(--muted)}

/* sections */
section{padding:64px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 40px}
.section-head h2{font-size:clamp(1.5rem,3.5vw,2rem); letter-spacing:-.01em; margin:0 0 10px}
.section-head p{color:var(--muted); margin:0}

/* feature grid */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--bg)}
.card .ic{font-size:1.5rem; margin-bottom:10px}
.card h3{margin:0 0 6px; font-size:1.05rem}
.card p{margin:0; color:var(--muted); font-size:.93rem}

/* steps */
.steps{counter-reset:s; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{position:relative; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--soft)}
.step::before{counter-increment:s; content:counter(s); display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:8px; background:var(--accent); color:#fff; font-weight:700; margin-bottom:12px}
.step h3{margin:0 0 6px; font-size:1rem}
.step p{margin:0; color:var(--muted); font-size:.92rem}

/* pricing */
.price-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); max-width:720px; margin:0 auto}
.plan{border:1px solid var(--line); border-radius:16px; padding:28px}
.plan.pro{border-color:var(--accent); box-shadow:0 4px 24px rgba(0,0,0,.06)}
.plan h3{margin:0 0 4px; font-size:1.1rem}
.plan .amt{font-size:1.9rem; font-weight:800; margin:8px 0}
.plan .amt small{font-size:.9rem; font-weight:500; color:var(--muted)}
.plan ul{list-style:none; padding:0; margin:16px 0 22px}
.plan li{padding:6px 0 6px 24px; position:relative; color:var(--fg); font-size:.93rem}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--link); font-weight:700}
.tag-todo{display:inline-block; background:#fff4d6; color:#8a5a00; border:1px solid #f0d38a; border-radius:6px; padding:2px 8px; font-size:.75rem; font-weight:600}

/* faq */
details{border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:10px}
details summary{cursor:pointer; font-weight:600; list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] summary{margin-bottom:8px}
details p{margin:0; color:var(--muted); font-size:.93rem}

/* footer / legal (전자상거래법 핵심) */
footer.site{border-top:1px solid var(--line); background:var(--soft); padding:44px 0 60px; font-size:.86rem}
footer .foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px}
footer .foot-links a{color:var(--muted); margin-right:16px}
.legal{color:var(--muted); line-height:1.9}
.legal b{color:var(--fg); font-weight:600}
.legal .todo{background:#fff4d6; color:#8a5a00; border-radius:4px; padding:1px 6px; font-size:.8em}

/* legal pages */
.doc{max-width:820px; margin:0 auto; padding:48px 20px 80px}
.doc h1{font-size:1.6rem; margin:0 0 8px}
.doc h2{font-size:1.15rem; margin:32px 0 8px; border-top:1px solid var(--line); padding-top:24px}
.doc p,.doc li{color:#333; font-size:.95rem}
.doc .back{display:inline-block; margin-bottom:24px; font-size:.9rem}
.doc .todo{background:#fff4d6; color:#8a5a00; border-radius:4px; padding:1px 6px}

@media (max-width:640px){
  .nav-links{display:none}
  .hero{padding:56px 0 40px}
  section{padding:48px 0}
}