:root{
  --bg:#ffffff; --fg:#111827; --muted:#6b7280; --brand:#4f7cff; --card:#ffffff;
  --border:#e5e7eb; --accent:#00d4ae;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Arial, Apple SD Gothic Neo, Noto Sans KR, sans-serif; color:var(--fg); background:var(--bg); line-height:1.6;}
a{color:var(--brand); text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.container.narrow{max-width:780px}
.site-header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:rgba(255,255,255,.7);border-bottom:1px solid var(--border);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700}
.nav nav a{margin-left:16px;color:var(--muted)}
.nav nav a.cta{color:#fff;background:var(--brand);padding:8px 12px;border-radius:8px}
.hero{padding:96px 0 56px;border-bottom:1px solid var(--border); background:radial-gradient(1000px 400px at 20% -10%, rgba(79,124,255,.08), transparent), radial-gradient(1000px 400px at 100% 0%, rgba(0,212,174,.08), transparent);}
.hero h1{font-size:42px;line-height:1.25;margin:0 0 12px}
.hero .sub{color:var(--muted);margin:0 0 24px}
.hero-cta .btn{margin-right:12px}
.section{padding:64px 0;border-bottom:1px solid var(--border)}
.section.alt{background:#f9fafb}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards article{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cards .app-icon{display:block;width:48px;height:48px;border-radius:8px;margin-bottom:8px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;list-style:decimal inside;padding:0;margin:0}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;transition:.2s ease;border:1px solid var(--border);color:var(--fg)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#ffffff}
.btn.ghost{background:transparent;color:var(--fg)}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:12px}
.contact .btn{margin-right:10px}
.site-footer{padding:28px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:20px}
.footer-nav a{color:var(--muted);margin-left:12px}
.doc main{padding:48px 0}
.doc h1,.doc h2{margin-top:24px}
.consent{position:fixed;left:0;right:0;bottom:0;background:#ffffff;border-top:1px solid var(--border);padding:14px;z-index:100}
.consent.hidden{display:none}
.consent-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1080px;margin:0 auto}
.consent p{margin:0;color:var(--muted)}
.consent-actions .btn{margin-left:8px}
.ad-slot{display:flex;justify-content:center;align-items:center;min-height:90px}
.ad-slot.kakao{min-height:90px}
@media (max-width:640px){
  .hero{padding:72px 0 40px}
  .hero h1{font-size:30px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:8px}
  .hero-cta .btn{margin-right:0}
  .section{padding:48px 0}
  .nav{height:auto;padding:8px 0;flex-wrap:wrap}
  .nav nav{width:100%;margin-top:8px;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav nav a{margin-left:0;flex:0 0 auto;padding:8px 10px}
  .cards article{padding:14px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .consent-inner{flex-direction:column;align-items:flex-start}
  .preview iframe{height:200px}
}