:root {
  --green: #087f5b !important;
  --green-dark: #055f45 !important;
  --green-soft: #e8f7f0 !important;
  --green-bg: #f3f7f4 !important;
  --mint: #0ca678 !important;
  --dark: #17211c !important;
  --navy: #17211c !important;
  --white: #ffffff !important;
  --gray: #607068 !important;
  --line: #d8e5dd !important;
  --radius: 16px !important;
  --radius-lg: 20px !important;
  --shadow-sm: 0 10px 24px rgba(8, 78, 57, .08) !important;
  --shadow: 0 16px 36px rgba(8, 78, 57, .10) !important;
}

html { background: #f5faf7; }
body {
  min-width: 320px;
  padding-bottom: 94px;
  color: var(--dark);
  background: #f5faf7;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  letter-spacing: 0;
  word-break: keep-all;
}

header {
  position: sticky !important;
  top: 0;
  z-index: 240;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, calc((100% - 1180px) / 2));
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid #dce9e1;
  box-shadow: 0 8px 28px rgba(7, 92, 65, .06);
  backdrop-filter: blur(12px);
}

.logo-wrap {
  min-width: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--dark) !important;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.logo-wrap img {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px;
  object-fit: contain;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.logo-text { min-width: 0; color: var(--dark) !important; }
.logo-text .accent, .accent, .green { color: var(--green) !important; }

.nav-menu {
  margin-left: auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px) !important;
}
.nav-menu > a, .nav-dropdown > a {
  padding: 8px 0 !important;
  color: #314139 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.nav-menu > a:hover, .nav-menu > a:focus-visible,
.nav-dropdown > a:hover, .nav-dropdown > a:focus-visible,
.nav-menu > a.active, .nav-dropdown > a.active {
  color: var(--green) !important;
  border-color: var(--green) !important;
}
.dropdown-menu {
  border: 1px solid #dce9e1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 16px 32px rgba(8, 78, 57, .13) !important;
  overflow: hidden;
}
.dropdown-menu a { color: #314139 !important; font-weight: 750 !important; }
.dropdown-menu a:hover { color: var(--green) !important; background: var(--green-soft) !important; }

.nav-cta { margin-left: 6px; gap: 8px !important; }
.nav-btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 16px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.nav-btn-outline {
  border-color: var(--green) !important;
  background: #fff !important;
  color: var(--green) !important;
}
.nav-btn-fill {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(8, 127, 91, .18) !important;
}

.hero, .page-title, .main-title {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: clamp(42px, 6vw, 76px) max(16px, calc((100% - 1040px) / 2)) !important;
  background: linear-gradient(145deg, #ffffff 0%, #f6fcf8 48%, #e9f6ee 100%) !important;
  border-bottom: 1px solid #dbe9e0;
  text-align: center;
}
.hero::before, .page-title::before, .main-title::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 100px;
  right: -44px;
  top: 20px;
  border-radius: 100% 0 100% 0;
  background: rgba(148, 211, 171, .19) !important;
  transform: rotate(-18deg);
  pointer-events: none;
}
.hero-content, .page-title > *, .main-title > * { position: relative; z-index: 1; }
.hero-badge, .main-title .badge, .page-title .badge {
  display: inline-flex !important;
  align-items: center;
  min-height: 32px;
  padding: 0 13px !important;
  border: 1px solid #b9dbc9 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.84) !important;
  color: var(--green) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 20px rgba(8, 127, 91, .05);
}
.hero h1, .page-title h1, .main-title h1 {
  max-width: 820px;
  margin: 12px auto 0 !important;
  color: var(--dark) !important;
  font-size: clamp(30px, 4.3vw, 48px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}
.hero h1 span, .page-title h1 span { color: var(--green) !important; }
.hero h1 .green { color: var(--green) !important; }
.page-title h1 .board-brand { color: var(--dark) !important; }
.board-page-title h1 .board-title-accent { color: var(--green) !important; }
.hero p, .page-title p, .main-title p, .subtitle {
  max-width: 680px;
  margin: 14px auto 0 !important;
  color: #607068 !important;
  font-size: clamp(15px, 1.65vw, 18px) !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
}
.main-title::after { content: none !important; display: none !important; }
.main-title .sub { color: var(--green) !important; font-weight: 900 !important; }
.main-title h1, .main-title h1 span { color: var(--dark) !important; }
.main-title h1 strong, .main-title h1 .green, .main-title h1 .accent { color: var(--green) !important; }

.main-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 16px 28px !important;
}
.main-section > section, .main-section > div { scroll-margin-top: 96px; }

.card, .step-question, .faq-guide, .faq-guide-card,
.faq-item, .post-card, .plan-card, .addon-card,
.plan-reference, .choice-card, .carrier-tabs, .plan-tabs,
.sub-tabs, .bottom-cta, .notice {
  border-color: #d8e5dd !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}

.cards, .faq-guide, .post-list, .plans-grid, .plans-grid-3, .addon-grid {
  gap: clamp(12px, 2vw, 18px) !important;
}
.card, .choice-card, .faq-guide-card, .post-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card:hover, .choice-card:hover, .faq-guide-card:hover, .post-card:hover {
  border-color: #80bb9f !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px);
}

.step-question, .faq-guide, .plan-reference { padding: clamp(20px, 3vw, 32px) !important; }
.step-question h2, .faq-guide h2, .section-header h2, .section-title,
.plan-reference h2, .bottom-cta h2 {
  color: var(--dark) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}
.q-label, .section-icon, .post-category, .best-badge, .new-badge, .promo-badge {
  border-radius: 999px !important;
  background: var(--green) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.card-yes, .choice-card.active, .faq-tab.active, .plan-tab.active, .carrier-tab.active, .sub-tab.active {
  border-color: var(--green) !important;
  background: var(--green-soft) !important;
  color: var(--green-dark) !important;
}
.card-no { border-color: #d8e5dd !important; background: #fff !important; }
.card-desc, .section-subtitle, .post-excerpt, .addon-desc, .faq-answer, .notice, .plan-reference p { color: #607068 !important; }

.main-title ~ .cards .card {
  min-height: 0 !important;
  padding: clamp(20px, 3vw, 30px) !important;
  background: #fff !important;
  color: var(--dark) !important;
}
.main-title ~ .cards .card-yes { border-color: #8bc8ac !important; background: linear-gradient(145deg, #ffffff, #edf9f2) !important; }
.main-title ~ .cards .card-no { border-color: #d8e5dd !important; }
.main-title ~ .cards .card h2 { color: var(--dark) !important; font-size: clamp(24px, 3vw, 32px) !important; }
.main-title ~ .cards .card .card-desc { color: #607068 !important; }
.main-title ~ .cards .cta-btn, .inquiry-btn {
  min-height: 54px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--green) !important;
  border-radius: 14px !important;
  background: var(--green) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.main-title ~ .cards .card-no .cta-btn { background: #fff !important; color: var(--green) !important; }
.main-title ~ .cards .cta-btn:hover, .inquiry-btn:hover { background: var(--green-dark) !important; color: #fff !important; }
.opening-steps, .step-question { border-color: #d8e5dd !important; background: #fff !important; }
.opening-steps .step, .opening-steps li { border-color: #d8e5dd !important; }
.opening-steps .step.active, .opening-steps .step.is-active { color: var(--green) !important; border-color: var(--green) !important; background: var(--green-soft) !important; }

.plan-tabs, .carrier-tabs, .sub-tabs { padding: 6px !important; }
.plan-tab, .carrier-tab, .sub-tab {
  border-radius: 13px !important;
  color: #506158 !important;
  font-weight: 850 !important;
}
.plan-card, .addon-card { overflow: hidden; }
.card-top-bar { background: linear-gradient(90deg, var(--green), #38b88a) !important; }
.plan-card-inner, .addon-card { border-color: #d8e5dd !important; }
.plan-price .amount, .plan-price .won, .addon-price, .data-highlight { color: var(--green) !important; }
.plan-btn, .btn-primary, .btn-kakao, .btn {
  min-height: 52px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}
.plan-btn, .btn-primary { background: var(--green) !important; color: #fff !important; }
.btn-kakao { background: #ffd84d !important; color: #251f00 !important; }
.plan-btn:hover, .btn-primary:hover { background: var(--green-dark) !important; }
.btn-kakao:hover { background: #f5cf37 !important; }
.addon-card-icon { background: var(--green-soft) !important; color: var(--green) !important; }
.badge-free { background: var(--green-soft) !important; color: var(--green) !important; }

.board-search, .category-filter {
  border-color: #d8e5dd !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.board-search input {
  border-color: #d8e5dd !important;
  border-radius: 13px !important;
  color: var(--dark) !important;
}
.board-search button, .filter-btn.active { background: var(--green) !important; color: #fff !important; }
.filter-btn { border-color: #cfe0d5 !important; color: #496157 !important; border-radius: 999px !important; }
.faq-item { overflow: hidden; }
.faq-question { color: var(--dark) !important; font-weight: 850 !important; }
.q-badge { background: var(--green-soft) !important; color: var(--green) !important; }
.faq-item.open, .faq-item.active { border-color: #98cdb2 !important; }
.arrow { color: var(--green) !important; }

.bottom-cta {
  margin-top: 36px !important;
  padding: clamp(24px, 4vw, 40px) !important;
  background: linear-gradient(145deg, #ffffff, #edf8f2) !important;
}
.bottom-cta p { color: #4e6056 !important; font-weight: 750 !important; }
.bottom-cta .btn-group, .bottom-cta-actions { gap: 10px !important; }

.sub-footer, footer {
  margin-top: 54px;
  padding: 38px 20px 114px !important;
  background: #14231d !important;
  color: #c9d9d1 !important;
}
.sub-footer b, footer b { color: #fff !important; }
.sub-footer-links a { color: #d6e8dd !important; }

.sub-mobile-cta {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 520 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid #dce9e1;
  box-shadow: 0 -8px 26px rgba(17,24,39,.11);
}
.sub-mobile-cta a {
  min-height: 58px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0 !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.sub-mobile-cta a:first-child { background: #ffd84d !important; color: #251f00 !important; }
.sub-mobile-cta a:last-child { background: var(--green) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(8,127,91,.18); }
.sub-mobile-cta .cta-kakao-mark { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 0; background: transparent url("/kakao-channel-logo.webp") center / contain no-repeat; color: transparent; font-size: 0; font-weight: 900; letter-spacing: 0; }
.sub-mobile-cta .cta-open-mark { width: 22px; height: 28px; display: inline-grid; place-items: center; color: #fff; font-size: 27px; font-weight: 900; line-height: 1; }
.float-inquiry { display: none !important; }

@media (min-width: 900px) {
  header { min-height: 78px; }
  .main-section { padding-left: 24px !important; padding-right: 24px !important; }
  .sub-mobile-cta {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: min(430px, calc(100% - 48px));
    padding: 8px !important;
    border: 1px solid #dce9e1;
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(17,24,39,.16);
  }
  .sub-mobile-cta a { min-height: 56px !important; border-radius: 14px !important; font-size: 15px !important; }
}

@media (max-width: 899px) {
  header { min-height: 68px; padding: 10px 14px; }
  .logo-wrap { gap: 6px; font-size: 13px; }
  .logo-wrap img { width: 40px !important; height: 40px !important; flex-basis: 40px; }
  .logo-text { font-size: 13px !important; }
  .nav-cta { display: none !important; }
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1px solid #d8e5dd !important;
    border-radius: 13px !important;
    background: #fff !important;
  }
  .hamburger span { width: 22px !important; height: 2px !important; border-radius: 2px !important; background: var(--dark) !important; }
  .nav-menu {
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 68px);
    margin: 0 !important;
    padding: 18px 12px 24px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow-y: auto;
    background: #fff !important;
    border-bottom: 1px solid #d8e5dd !important;
    box-shadow: 0 18px 32px rgba(17,24,39,.14) !important;
  }
  .nav-menu.open { display: grid !important; }
  .nav-menu > a, .nav-dropdown > a {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 15px !important;
    border: 1px solid #d8e5dd !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #314139 !important;
  }
  .nav-dropdown { display: contents; }
  .nav-dropdown .dropdown-menu { display: none !important; }
  .nav-menu-cta {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    width: auto !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
  }
  .nav-menu-cta .nav-btn { min-height: 52px !important; }
  .float-inquiry { display: none !important; }
}

@media (max-width: 540px) {
  .hero, .page-title, .main-title { padding: 38px 16px !important; }
  .hero h1, .page-title h1, .main-title h1 { font-size: 30px !important; }
  .hero p, .page-title p, .main-title p, .subtitle { font-size: 15px !important; }
  .main-section { padding: 28px 12px 18px !important; }
  .step-question, .faq-guide, .plan-reference, .bottom-cta { padding: 20px !important; }
  .card, .choice-card, .faq-guide-card, .post-card, .plan-card, .addon-card { border-radius: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}