:root {
  --ink: #292d33;
  --muted: #56616e;
  --coral: #243b5a;
  --paper: #fafbfc;
  --line: #d6dfe8;
  --lilac: #edf2f7;
  --studio-dark: #243247;
  --studio-shadow: 0 12px 30px #3038440c;
}

body {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  letter-spacing: -.025em;
  background: var(--paper);
}
h1, h2, h3 { letter-spacing: -.045em; }
.wrap { width: min(1180px, calc(100% - 64px)); }
header { background: #fafbfcf5; }
header > nav.wrap { gap: clamp(10px, 1.3vw, 21px); }
header .brand .brand-logo { max-height: 64px; }
header .navlink { font-weight: 720; }
header .smallbtn, .btn { border-radius: 999px; }
.membership-menu { border-radius: 17px; box-shadow: 0 16px 40px #2c343f24; }
.membership-menu a:is(:hover, :focus-visible, [aria-current=page]) {
  background: var(--lilac);
  color: var(--coral);
}

.breadcrumb { padding-top: 26px; }
.page-intro {
  padding: 34px 38px 36px;
  margin: 16px 0 28px;
  background: linear-gradient(115deg, #f1f2f4, #f8f8f9 58%, #f0f2f4);
  border: 1px solid var(--line);
  border-radius: 24px;
}
.page-intro h1 { margin: 8px 0 12px; }
.page-intro p { max-width: 720px; }
.how, .membership-app-stage { background: var(--lilac); }
.steps { gap: 16px; }
.step, .activation-channel-card, .membership-store-card, .membership-app-step {
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--studio-shadow);
}
.detail-note, .info-table th { background: var(--lilac); }
.table-scroll { border: 1px solid var(--line); border-radius: 16px; }
.faq details { background: white; border: 1px solid var(--line); border-radius: 14px; margin-top: 9px; padding: 18px 20px; }
.contact { background: var(--studio-dark); border-radius: 24px; }
.contact p { color: #f0f2f4; }
footer.business-footer { background: #21272f; border-color: #384251; color: #f0f2f4; }
.mobilebar { background: #fafbfcf5; }

.home-banner { border-radius: 24px; box-shadow: 0 20px 42px #24324725; background: var(--studio-dark); }
.home-banner-slide.activation-banner { background: var(--studio-dark); }
.activation-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #232a33e8 3%, #232a33b5 43%, #232a3318 78%);
}
.activation-banner-copy h1 em, .membership-banner-copy h2 em { color: #f0f2f4; }
.activation-banner-tag { background: #ffffff14; border-color: #f0f2f470; color: #f2f3f5; }
.home-banner-slide.consultation-banner {
  background: radial-gradient(ellipse at 100% 0%, #4a576a, transparent 65%), #252c36;
}
.home-banner-slide.membership-k-banner {
  background: radial-gradient(ellipse at 95% 15%, #4a586b, transparent 68%), #252c36;
}
.home-banner-dots button[aria-current="true"] span { background: #f0f2f4; }
.home-banner .activation-banner-channel { background: #607189; }
.home-banner .activation-banner-channel:hover { background: #4c5a6e; }

:is(#plans, #how) .tabs { gap: 10px; }
:is(#plans, #how) .tabs .tab { border-radius: 999px; }
:is(#plans, #how) .tabs .tab[aria-selected=true] { background: var(--coral); color: white; border-color: var(--coral); }
:is(#plans, #how) .plans .plan {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid #a5afbd;
  border-radius: 20px;
  box-shadow: var(--studio-shadow);
}
:is(#plans, #how) .plans .plan .badge, :is(#plans, #how) .plans .plan .plan-ribbon {
  background: var(--lilac);
  color: #485568;
  border-color: var(--line);
  border-radius: 999px;
}
:is(#plans, #how) .plans .plan .btn {
  background: var(--coral);
  color: white;
  border: 1px solid var(--coral);
  border-radius: 999px;
}
:is(#plans, #how) .plans .plan .btn:hover { background: #445163; border-color: #445163; }
:is(#plans, #how) .plans .plan .plan-price strong, .esim-benefit h3 em { color: var(--coral); }
:is(#plans, #how) .plans .plan .plan-price { background: var(--lilac); border: 0; border-radius: 12px; margin-bottom: 12px; }
:is(#plans, #how) .plans .esim-benefit .esim-benefit-visual { background: var(--lilac); }

@media (min-width: 901px) {
  .home-banner-slide.activation-banner { padding-top: 52px; }
  .activation-banner-buttons { flex-direction: row; width: auto; max-width: 100%; }
  .activation-banner-buttons .activation-banner-cta { width: auto; }
  :is(#plans, #how) .plans { gap: 20px; }
  .page-body .usim { grid-template-columns: 1.15fr .85fr; }
}

@media (max-width: 800px) {
  .wrap { width: calc(100% - 32px); }
  .page-intro { padding: 24px 20px; margin: 12px 0 22px; border-radius: 18px; }
  .home-banner { border-radius: 18px; }
  .activation-banner::after { background: linear-gradient(90deg, #232a33b5, #232a3338); }
}