:root{
  --brand:#03ce5d;
  --brand-ink:#0f5132;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --bg-soft:#f6f8f7;
  --border:#e5e7eb;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-soft:0 8px 18px rgba(2,6,12,.06);
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Noto Sans KR',system-ui,AppleSDGothicNeo,'Malgun Gothic',sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:999px; font-weight:700;
  border:1px solid transparent; transition:.25s ease; cursor:pointer;
  box-shadow:var(--shadow-soft);
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(3,206,93,.25) }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--border) }
.btn-ghost:hover{ background:#f8f9fa; transform:translateY(-2px) }
.btn-lg{ padding:16px 24px; font-size:18px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:14px;
  background:rgba(3,206,93,.1); color:var(--brand-ink); border:1px solid rgba(3,206,93,.25)
}

/* Header */
.header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.75); border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand{
  font-weight:900; letter-spacing:-.2px; font-size:22px; display:flex; align-items:center; gap:10px;
}
.brand-badge{ width:28px; height:28px; border-radius:8px; background:var(--brand);
  display:flex; align-items:center; justify-content: center; color:#fff; font-weight:900; box-shadow:0 6px 14px rgba(3,206,93,.35); padding-bottom: 2px; line-height:100%;}
.nav-actions{ display:flex; align-items:center; gap:10px }
.nav .only-mobile{ display:none }
@media (max-width:900px){
  .nav .only-desktop{ display:none }
  .nav .only-mobile{ display:inline-flex }
}

/* Hero (section1) */
.hero{
  position:relative; overflow:hidden; background:
    radial-gradient(1200px 600px at 80% -10%, rgba(3,206,93,.25), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7fffb 60%, #ffffff 100%);
}
.hero-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px;}
.hero h1{ font-size:48px; line-height:1.15; letter-spacing:-.6px; margin:12px 0 16px }
.hero p{ font-size:18px; color:var(--muted); margin:0 0 24px }
.hero-visual{
  position:relative; aspect-ratio:4/6; border-radius:24px; overflow:hidden; 
  background:linear-gradient(135deg);
}
.hero-visual img{ width:100%; height:100%; object-fit:cover }
.hero-float{
  position:absolute; bottom:16px; left:16px; right:16px; display:flex; gap:10px; flex-wrap:wrap
}
.pill{
  background:var(--brand); border-radius:999px; padding:8px 12px; font-weight:700;
  box-shadow:var(--shadow-soft); font-size:12px; color:#fff;
}
@media (max-width:900px){
  .hero-wrap{ grid-template-columns:1fr; padding:42px 0 }
  .hero h1{ font-size:34px }
  .hero-visual img{ object-fit:contain; margin: 0 auto; }
}

/* Section generic */
section{ padding:72px 20px; }
.section-title{ font-size:24px; letter-spacing:-.4px; margin:0 0 12px }
.section-sub{ color:var(--muted); margin:0 0 28px }

/* Section2 */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap }
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-soft)
}
.card-pad{ padding:24px }

/* Section3 – 카드 배경 */
.cards-bg{
  position:relative; overflow:hidden; background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.cards-bg::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:120%;
  background:
    radial-gradient(400px 200px at 20% 30%, rgba(3,206,93,.15), transparent 60%),
    radial-gradient(400px 200px at 80% 60%, rgba(3,206,93,.12), transparent 60%);
  pointer-events:none;
}
.cards-wall{
  position:absolute; inset:0; opacity:.2; mix-blend:normal; pointer-events:none;
  background:
    url('data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="1400" height="600" viewBox="0 0 1400 600"><defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="%23ffffff"/><stop offset="1" stop-color="%23e8fff2"/></linearGradient></defs><g fill="url(%23g)" stroke="%2303ce5d" stroke-opacity=".35" stroke-width="2" opacity=".7"><rect rx="18" x="40" y="40" width="260" height="160"/><rect rx="18" x="340" y="90" width="260" height="160"/><rect rx="18" x="640" y="40" width="260" height="160"/><rect rx="18" x="940" y="90" width="260" height="160"/><rect rx="18" x="160" y="260" width="260" height="160"/><rect rx="18" x="460" y="310" width="260" height="160"/><rect rx="18" x="760" y="260" width="260" height="160"/><rect rx="18" x="1060" y="310" width="260" height="160"/></g></svg>') center/cover no-repeat;
}
.grid-advantages{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.adv{
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:20px 20px 18px; box-shadow:var(--shadow-soft)
}
.adv h4{ margin:0 0 8px; font-size:18px }
.adv p{ margin:0; color:var(--muted) }
@media (max-width:900px){ .grid-advantages{ grid-template-columns:1fr } }

/* Section4 – Steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.step{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow:var(--shadow-soft) }
.step-badge{ width:42px; height:42px; border-radius:12px; background:rgba(3,206,93,.12); display:grid; place-items:center; margin-bottom:12px }
.step h4{ margin:0 0 8px }
.step p{ margin:0; color:var(--muted) }
@media (max-width:900px){ .steps{ grid-template-columns:1fr } }

/* Section5 – 사칭주의 */
.warning{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid #fde68a; border-left:6px solid #f59e0b; border-radius:16px; padding:18px 18px;
  box-shadow:var(--shadow-soft)
}
.warning strong{ color:#92400e }
.warning p{ margin:6px 0 0; color:#7c2d12 }

/* Section6 */
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:18px
}
.feature .box{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px; box-shadow:var(--shadow-soft) }
@media (max-width:900px){ .feature{ grid-template-columns:1fr } }

/* Section7 */
.cards-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px
}
.cards-list .cardtel{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; text-align:center; font-weight:700 }
.cards-list .num{ color:var(--muted); font-weight:600; font-size:14px; margin-top:6px }
@media (max-width:900px){ .cards-list{ grid-template-columns:repeat(2,1fr) } }

/* Section8 – FAQ */
.faq{ display:grid; grid-template-columns:1fr; gap:10px }
.accordion{
  border:1px solid var(--border); border-radius:14px; background:#03ce5d; overflow:hidden; box-shadow:var(--shadow-soft); color:#ffffff;  
}
.accordion summary{
  list-style:none; cursor:pointer; padding:16px 18px; font-weight:800; position:relative
}
.accordion summary::-webkit-details-marker{ display:none }
.accordion summary:after{
  content:"＋"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-weight:900; color:var(--muted)
}
.accordion[open] summary:after{ content:"–" }
.accordion .content{ padding:0 18px 16px; color:var(--muted);   background:#ffffff; }


/* Section9 – 후기 */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.review{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow-soft) }
.stars{ letter-spacing:.5px; color:#f59e0b; font-weight:800 }
.review small{ color:var(--muted) }
@media (max-width:900px){ .reviews{ grid-template-columns:1fr } }

/* Footer */
footer{ padding:40px 0; border-top:1px solid var(--border); background:#fcfffd }
.foot{ display:grid; gap:6px; color:#475569 }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease }
.reveal.show{ opacity:1; transform:none }

/* Floating CTA (mobile) */
.floating{
  position:fixed; bottom:16px; left:16px; right:16px; display:none; gap:10px; z-index:60
}
@media (max-width:900px){
  .floating{ display:flex }
}

/* Utilities */
.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}
.mb-0{margin-bottom:0}.center{text-align:center}