@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #ffffff; }

:root {
  --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --brand:       #E11D48;
  --brand-dark:  #9F1239;
  --brand-mid:   #FECDD3;
  --brand-light: #FFF1F2;
  --t1: #111827;
  --t2: #4B5563;
  --t3: #9CA3AF;
  --bg: #ffffff;
  --bg-soft: #F9FAFB;
  --border: #E5E7EB;
  --green:     #059669;
  --green-bg:  #DCFCE7;
  --orange:    #D97706;
  --orange-bg: #FEF3C7;
  --kakao:     #FEE500;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12);
  --r:    14px;
  --r-lg: 20px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
}

/* ── NAV ─────────────────────────────────── */
#nav {
  position: fixed; top: 0; z-index: 200;
  width: min(430px, 100vw);
  left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px;
}
.nav-logo {
  font-size: 20px; font-weight: 900; color: var(--brand);
  letter-spacing: -.05em; text-decoration: none;
}
.nav-links { display: none; }
.nav-apply { display: none; }
#hamburger { display: block; background: none; border: none; cursor: pointer; color: var(--t2); padding: 4px; }
#mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  background: #fff; border-top: 1px solid var(--border);
  padding: 10px 16px 16px;
}
#mobile-menu.open { display: flex; }
.m-link {
  display: block; padding: 11px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 600; color: var(--t2); text-decoration: none;
  transition: background .15s, color .15s;
}
.m-link:hover, .m-link.active { background: var(--brand-light); color: var(--brand); }

/* ── LAYOUT ──────────────────────────────── */
.pw    { padding: 0 20px; }
.pw-sm { padding: 0 20px; }
.pw-md { padding: 0 20px; }

/* ── SECTIONS ────────────────────────────── */
.sec     { padding: 60px 20px; }
.sec-alt { padding: 60px 20px; background: var(--bg-soft); border-top: 1px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.05); }
.sec-brand {
  padding: 64px 20px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 60%, #FB7185 100%);
}

/* ── HERO (homepage) ────────────────────────── */
.hero {
  background: linear-gradient(150deg, var(--brand-dark) 0%, var(--brand) 40%, #FB7185 75%, var(--brand-mid) 100%);
  padding: 88px 20px 60px;
}
.hero-card-col { display: none; }
.trust-strip {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
}

/* ── PAGE HERO (sub-pages) ────────────────── */
.page-hero {
  padding: 84px 20px 48px;
  background: linear-gradient(150deg, var(--brand-dark) 0%, var(--brand) 55%, #FB7185 100%);
}

/* ── BUTTONS ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font); font-weight: 700;
  transition: all .15s; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--brand); color: #fff;
  font-size: 15px; padding: 14px 28px; border-radius: 12px;
  box-shadow: 0 3px 14px rgba(225,29,72,.30);
}
.btn-primary:active { background: var(--brand-dark); }
.btn-secondary {
  background: #fff; color: var(--brand);
  font-size: 15px; padding: 13px 27px; border-radius: 12px;
  border: 2px solid var(--brand);
}
.btn-outline-white {
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 15px; padding: 13px 27px; border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-white {
  background: #fff; color: var(--brand);
  font-size: 15px; padding: 14px 28px; border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.btn-kakao {
  background: var(--kakao); color: #000;
  font-size: 15px; padding: 14px 28px; border-radius: 12px;
  box-shadow: 0 3px 14px rgba(254,229,0,.35);
}

/* CTA row — always stacked */
.cta-row { display: flex; flex-direction: column; gap: 10px; }
.cta-row .btn { width: 100%; justify-content: center; }

/* ── CARDS ────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ── ICON BOX ─────────────────────────────── */
.icon-box {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 12px; background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
}

/* ── STATUS ───────────────────────────────── */
.status-pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pip-green  { background: var(--green); box-shadow: 0 0 0 3px rgba(5,150,105,.2); }
.pip-orange { background: var(--orange); }
.pip-gray   { background: var(--t3); }
.status-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 9999px;
}
.tag-green  { background: var(--green-bg);  color: var(--green); }
.tag-orange { background: var(--orange-bg); color: var(--orange); }
.tag-gray   { background: var(--bg-soft);   color: var(--t3); }

/* ── BADGE ────────────────────────────────── */
.badge-white {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.2); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.38);
}
.badge-brand {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-light); color: var(--brand);
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 9999px;
  border: 1px solid var(--brand-mid);
}

/* ── TYPOGRAPHY ──────────────────────────── */
.eyebrow { font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 10px; }
.h1 { font-size: 34px; font-weight: 900; letter-spacing: -.045em; line-height: 1.1; }
.h2 { font-size: 26px; font-weight: 900; letter-spacing: -.04em; line-height: 1.15; }
.h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.body { font-size: 15px; color: var(--t2); line-height: 1.72; }
.caption { font-size: 13px; color: var(--t3); }

/* ── DIVIDER ──────────────────────────────── */
hr.div { border: none; border-top: 1px solid var(--border); }

/* ── FADE UP ──────────────────────────────── */
.fu { opacity: 0; transform: translateY(14px); transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); }
.fu.v { opacity: 1; transform: none; }
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}

/* ── FAQ ──────────────────────────────────── */
details summary { list-style: none; user-select: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
.faq-chv { transition: transform .22s; flex-shrink: 0; }
details[open] .faq-chv { transform: rotate(180deg); }

/* ── FORM ─────────────────────────────────── */
.inp {
  width: 100%; background: #fff;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--t1);
  font-family: var(--font); font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.inp::placeholder { color: var(--t3); }
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225,29,72,.10); }
select.inp option { background: #fff; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .75s linear infinite; }

/* ── STATUS BAR ───────────────────────────── */
.status-bar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

/* ── FOOTER ───────────────────────────────── */
.footer { background: #111827; color: #fff; padding: 44px 20px 32px; }
.footer-logo { font-size: 20px; font-weight: 900; color: var(--brand-mid); letter-spacing: -.05em; margin-bottom: 10px; }
.footer-body { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.9; }
.footer-link { font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; }
.footer-grid { display: flex; flex-direction: column; gap: 28px; margin-bottom: 32px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; display: flex; flex-direction: column; gap: 4px; }