/* Page furniture and opening composition. Plan cards keep their existing theme. */
:root {
  --editorial-paper: #f7f3ea;
  --editorial-ink: #343139;
  --editorial-deep: #243247;
  --editorial-mint: #ebeef1;
  --editorial-rule: #ccd7e2;
}

header {
  background: #fff;
  border-color: #d6dfe8;
  color: var(--ink);
  backdrop-filter: none;
}
header > nav.wrap { width: min(1280px, calc(100% - 48px)); height: 74px; }
header .brand {
  padding: 4px 12px;
  background: #fff;
  border-radius: 4px;
}
header .brand .brand-logo { width: 86px; max-height: 44px; }
header .smallbtn {
  background: #243b5a;
  color: #fff;
  border-radius: 5px;
}
header .navlink[aria-current=page],
header .membership-trigger:is(.is-current, [aria-expanded=true]) { color: var(--coral); }
.subnav { color: var(--editorial-ink); border-color: var(--editorial-rule); }
.membership-menu { border-color: var(--editorial-rule); border-radius: 6px; }
.membership-menu a:is(:hover, :focus-visible, [aria-current=page]) {
  background: var(--editorial-mint);
  color: var(--editorial-deep);
}

.home-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(208px, 23%);
  gap: 16px;
  margin-block: 28px 0;
}
.home-opening .home-banner {
  min-width: 0;
  margin: 0;
  border-radius: 6px;
  background: var(--editorial-deep);
  box-shadow: none;
}
.home-opening .home-banner-slide {
  min-height: 470px;
  padding: 42px 60px 64px;
}
.home-opening .activation-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
  padding: 36px 44px 58px;
  background: var(--editorial-deep);
  color: #fff;
}
.home-opening .activation-banner::after { content: none; }
.home-opening .activation-banner-art {
  position: static;
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 390px;
  min-height: 275px;
  object-fit: cover;
  object-position: 88% center;
  border-radius: 4px;
  opacity: 1;
}
.home-opening .activation-banner-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-width: none;
}
.home-opening .activation-banner-tag {
  background: var(--editorial-mint);
  color: var(--editorial-ink);
  border: 0;
  border-radius: 3px;
  letter-spacing: .015em;
}
.home-opening .activation-banner-copy h1 {
  color: var(--editorial-deep);
  font-size: clamp(29px, 3.35vw, 48px);
  line-height: 1.14;
  letter-spacing: -.06em;
}
.home-opening .activation-banner-copy h1 em { color: #323c49; }
.home-opening .activation-banner-features {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 5px 12px;
  color: #3d4857;
  margin-block: 20px;
}
.home-opening .activation-banner-features strong { color: var(--editorial-deep); }
.home-opening .activation-banner-feature-pair { display: contents; }
.home-opening .activation-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  max-width: none;
  flex-direction: row;
  gap: 6px;
}
.home-opening .activation-banner-buttons .activation-banner-cta {
  width: auto;
  min-height: 40px;
  padding: 8px 11px;
  border-radius: 4px;
  font-size: 12px;
}
.home-opening .activation-banner-channel { background: #2b323d; }
.home-opening .activation-banner-channel:hover { background: #243247; }
.home-opening .consultation-banner,
.home-opening .membership-k-banner {
  background: radial-gradient(ellipse at 90% 20%, #3b4554, transparent 65%), var(--editorial-deep);
}
.home-opening .membership-banner-copy h2 em { color: #c8ced6; }
.home-opening .home-banner-arrow {
  width: 30px;
  height: 35px;
  border-radius: 4px;
  background: var(--editorial-deep);
  color: white;
  font-size: 21px;
}
.home-opening .banner-previous { left: 6px; }
.home-opening .banner-next { right: 6px; }
.home-opening .home-banner-dots {
  bottom: 12px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--editorial-deep);
}
.home-opening .home-banner-dots button[aria-current=true] span { background: #bdc4cf; }

.home-opening .quick {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  border: 0;
  gap: 8px;
}
.home-opening .quick a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 8px 4px;
  padding: 17px;
  border: 1px solid var(--editorial-rule);
  border-radius: 6px;
  color: var(--editorial-ink);
  background: var(--editorial-mint);
}
.home-opening .quick a:nth-child(2) { background: var(--editorial-paper); }
.home-opening .quick a:nth-child(3) { background: #f0f2f4; }
.home-opening .quick a:hover { border-color: #323c49; }
.home-opening .quick .ico { grid-column: 1 / -1; font-size: 25px; margin: 0; }
.home-opening .quick small { color: #3d4857; }
.home-opening .quick .arrow { display: block; }

.page-intro {
  background: var(--editorial-paper);
  border: 0;
  border-left: 6px solid #323c49;
  border-radius: 0;
  padding: 35px 36px;
}
.page-intro h1 { color: var(--editorial-ink); }
.how, .membership-app-stage { background: #f0f2f4; }
.step, .activation-channel-card, .membership-store-card, .membership-app-step {
  border-color: var(--editorial-rule);
  border-radius: 6px;
  box-shadow: none;
}
.contact, footer.business-footer { background: var(--editorial-deep); }
.contact { border-radius: 6px; }
.contact p, footer.business-footer { color: #f0f2f4; }

@media (max-width: 1000px) {
  .home-opening { grid-template-columns: minmax(0, 1fr); }
  .home-opening .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
}

@media (max-width: 650px) {
  header > nav.wrap { width: calc(100% - 32px); height: 62px; }
  .home-opening { margin-top: 16px; gap: 10px; }
  .home-opening .home-banner-slide { padding: 24px 36px 54px; }
  .home-opening .activation-banner { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 20px 34px 52px; }
  .home-opening .activation-banner-copy { grid-row: 2; }
  .home-opening .activation-banner-art {
    grid-column: 1;
    min-height: 0;
    height: 145px;
    object-position: right center;
  }
  .home-opening .activation-banner-features { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; }
  .home-opening .activation-banner-feature-pair > span { white-space: normal; }
  .home-opening .quick { grid-template-columns: minmax(0, 1fr); }
  .home-opening .quick a { grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; gap: 8px; }
  .home-opening .quick .ico { grid-column: auto; }
  .home-opening .quick small { margin-top: 3px; }
  .page-intro { padding: 22px 18px; }
}

/* Closing contact section shared by pages with all three channels. */
#contact .contact:has(> .membership-help-actions) {
  display: grid;
  justify-content: stretch;
  gap: 24px;
  margin-top: 28px;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid var(--line);
  border-top: 5px solid #a5afbd;
  background: var(--lilac);
  color: var(--ink);
}
#contact .contact:has(> .membership-help-actions) > div:first-child { text-align: center; }
#contact .contact:has(> .membership-help-actions) p { color: var(--muted); }
#contact .contact > .membership-help-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
#contact .contact > .membership-help-actions .btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  min-height: 84px;
  padding: 14px clamp(12px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  overflow-wrap: anywhere;
}
#contact .contact > .membership-help-actions .btn::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
#contact .contact > .membership-help-actions .kakao-contact { background: #f0f2f4; border-color: #8897ac; color: #3a4453; }
#contact .contact > .membership-help-actions .membership-help-channel { background: #f0f2f4; border-color: #8a99ae; color: #3c4756; }
#contact .contact > .membership-help-actions .btn:hover { border-color: var(--coral); box-shadow: inset 0 -3px var(--coral); }
#contact .contact > .membership-help-actions .kakao-contact:hover { background: #f0f2f4; border-color: #647690; }
#contact .contact > .membership-help-actions .membership-help-channel:hover { background: #d3d8de; border-color: #687b96; }
#contact .contact > .membership-help-actions .btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

@media (max-width: 720px) {
  #contact .contact > .membership-help-actions { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #contact .contact > .membership-help-actions .btn { min-height: 56px; }
}

/* Service icons sit immediately before their button labels. */
#contact .contact > .membership-help-actions .btn:has(> .contact-service-icon) {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 10px;
}
#contact .contact .contact-service-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Plan-page title colors match the customer-guide headers. */
.pricing-page .page-intro {
  background: var(--editorial-deep);
  border-color: var(--editorial-deep);
}
.pricing-page .page-intro :is(h1, p) { color: #fff; }

/* Shared consultation actions below the page introduction. */
.page-intro .title-consult-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.page-intro .title-consult-actions .btn {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.page-intro .title-consult-actions .title-kakao {
  background: #FEE500;
  border-color: #FEE500;
  color: #3C1E1E;
}
.page-intro .title-consult-actions .title-channel {
  background: #f0f2f4;
  border-color: #c0c7d0;
  color: #3c4756;
}
.page-intro .title-consult-actions .title-kakao:hover { background: #f5dc00; border-color: #f5dc00; }
.page-intro .title-consult-actions .title-channel:hover { background: #d3d8de; }
.page-intro .title-consult-actions .btn:focus-visible {
  outline: 3px solid #c0c7d1;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .page-intro .title-consult-actions .btn { flex: 1; padding-inline: 12px; }
}

@media (min-width: 1001px) {
  .page-body .page-intro:has(> .title-consult-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 32px;
    row-gap: 0;
  }
  .page-body .page-intro > h1,
  .page-body .page-intro > p { grid-column: 1; }
  .page-body .page-intro > .title-consult-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    flex-wrap: nowrap;
    margin-top: 0;
  }
  .page-body .page-intro > .title-consult-actions .btn { white-space: nowrap; }
}

@media (min-width: 1001px) {
  .pricing-page #plans .section-top { display: block; }
  .pricing-page #plans .section-top h2 { white-space: nowrap; }
  .pricing-page #plans .section-top p { margin: 12px 0 0; }
  .pricing-page #plans .section-top .pricing-line-break br { display: none; }
  .pricing-page #plans .section-top .pricing-line-break::after { content: " "; }
}

.home-opening .activation-banner-art {
  object-fit: contain;
  object-position: center;
  background: #edf2f7;
}

.home-opening .home-banner {
  border: 1px solid #b5bdc8;
  box-shadow: 0 8px 24px #243b5a1a;
}

/* Align the first hero with the shared dark page headers. */
.home-opening .home-banner {
  border-color: #384250;
  box-shadow: 0 8px 24px #2432471f;
}
.home-opening .activation-banner-copy h1 { color: #fff; }
.home-opening .activation-banner-copy h1 em { color: #f0f2f4; }
.home-opening .activation-banner-features { color: #f0f2f4; }
.home-opening .activation-banner-features strong { color: #fff; }
.home-opening .activation-banner-buttons .activation-banner-channel {
  background: #f0f2f4;
  color: #3c4756;
}
.home-opening .activation-banner-buttons .activation-banner-channel:hover {
  background: #d3d8de;
}

/* The opening slide uses its full width for copy and key details. */
.home-opening .activation-banner.activation-text-only {
  display: flex;
  justify-content: center;
  padding: 38px 44px 60px;
}
.home-opening .activation-text-only .activation-banner-copy {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 18px;
  align-items: center;
}
.home-opening .activation-text-only .activation-banner-tag {
  grid-column: 1;
  justify-self: start;
  align-self: end;
}
.home-opening .activation-text-only .activation-banner-copy h1 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(30px, 3.1vw, 43px);
  line-height: 1.25;
}
.home-opening .activation-text-only .activation-banner-features {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: stretch;
  align-content: center;
  gap: 0;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid #ffffff35;
  font-size: 14px;
}
.home-opening .activation-text-only .activation-banner-features > span,
.home-opening .activation-text-only .activation-banner-feature-pair > span {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid #ffffff26;
}
.home-opening .activation-text-only .activation-banner-features strong { color: #f0f2f4; }
.home-opening .activation-text-only .activation-banner-buttons {
  grid-column: 1;
  align-self: start;
}
.home-opening .activation-text-only .activation-banner-buttons .activation-banner-cta {
  padding: 10px 12px;
}
@media (max-width: 650px) {
  .home-opening .activation-banner.activation-text-only { padding: 26px 36px 54px; }
  .home-opening .activation-text-only .activation-banner-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .home-opening .activation-text-only .activation-banner-copy h1 { font-size: 29px; }
  .home-opening .activation-text-only .activation-banner-features {
    grid-column: 1;
    grid-row: 3;
    padding-left: 0;
    border-left: 0;
    font-size: 12px;
  }
  .home-opening .activation-text-only .activation-banner-features > span,
  .home-opening .activation-text-only .activation-banner-feature-pair > span { padding: 8px 0; }
  .home-opening .activation-text-only .activation-banner-buttons { grid-row: 4; }
}

/* Compact navigation for phones and tablets. */
.mobile-nav-toggle,
.mobile-site-menu { display: none; }
.mobile-site-menu[hidden] { display: none; }

@media (max-width: 1100px) {
  header .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--ink);
    background: #edf2f7;
    border: 1px solid #f0f2f4;
    border-radius: 7px;
    cursor: pointer;
  }
  .mobile-nav-toggle:focus-visible { outline: 3px solid #f0f2f4; outline-offset: 3px; }
  header .mobile-site-menu:not([hidden]) {
    height: auto;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    display: block;
    max-height: min(72vh, calc(100dvh - 90px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 16px;
    border: 1px solid #f0f2f4;
    border-radius: 0 0 14px 14px;
    background: #fff;
    color: #292d33;
    box-shadow: 0 12px 28px #22283126;
    text-align: left;
    white-space: normal;
  }
  .mobile-site-menu > a,
  .mobile-site-menu .mobile-nav-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 4px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    cursor: pointer;
  }
  .mobile-site-menu > a { border-bottom: 1px solid #f0f2f4; }
  .mobile-site-menu .mobile-nav-group {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0f2f4;
  }
  .mobile-site-menu .mobile-nav-group > summary { list-style: none; }
  .mobile-site-menu summary::-webkit-details-marker { display: none; }
  .mobile-site-menu summary::after { content: '+'; color: #243b5a; font-size: 20px; }
  .mobile-site-menu details[open] > summary::after { content: '−'; }
  .mobile-site-menu .mobile-nav-links {
    padding: 4px 12px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #edf2f7;
  }
  .mobile-site-menu .mobile-nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
    font-size: 13px;
    line-height: 1.6;
  }
  .mobile-site-menu a:hover,
  .mobile-site-menu a[aria-current=page] { color: #243b5a; }
}

body.mobile-drawer-open { overflow: hidden; }
.mobile-menu-dialog:not([open]) { display: none; }

@media (max-width: 1100px) {
  header .mobile-menu-dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 18px 20px;
    border: 0;
    border-radius: 16px 0 0 16px;
    background: #fff;
    color: #292d33;
    box-shadow: -12px 0 36px #22283133;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: mobile-drawer-in .22s ease-out both;
  }
  header .mobile-menu-dialog::backdrop { background: #1b202670; }
  header .mobile-menu-dialog.is-closing { animation: mobile-drawer-out .18s ease-in both; }
  .mobile-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f0f2f4;
  }
  .mobile-menu-heading strong { color: #3a4453; font-size: 18px; }
  .mobile-menu-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: #edf2f7;
    color: #3a4453;
    font-size: 28px;
    cursor: pointer;
  }
  header .mobile-menu-dialog .mobile-site-menu:not([hidden]) {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 8px 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
}

@keyframes mobile-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes mobile-drawer-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  header .mobile-menu-dialog,
  header .mobile-menu-dialog.is-closing { animation: none; }
}

#how .home-benefit-cards { margin-top: 30px; }

/* Navy accents with light surfaces and charcoal text. */
body .page-intro,
body .pricing-page .page-intro,
body :is(.guide-activation, .guide-usim, .guide-faq, .guide-membership) .page-intro {
  background: #edf2f7;
  border: 1px solid #d6dfe8;
  border-left: 5px solid #243b5a;
}
body .page-intro :is(h1,p),
body .pricing-page .page-intro :is(h1,p),
body :is(.guide-activation, .guide-usim, .guide-faq, .guide-membership) .page-intro :is(h1,p) { color: #292d33; }
body .page-intro p { color: #56616e; }
.home-opening .home-banner { background: #edf2f7; border-color: #ccd7e2; box-shadow: 0 8px 24px #2432470c; }
.home-opening .home-banner-slide,
.home-opening .activation-banner,
.home-opening .consultation-banner,
.home-opening .membership-k-banner {
  background: #edf2f7;
  color: #292d33;
}
.home-opening .home-banner-slide :is(h1,h2,h3) { color: #292d33; }
.home-opening .home-banner-slide :is(h1,h2) em { color: #243b5a; }
.home-opening .activation-banner-features,
.home-opening .home-banner-slide p { color: #56616e; }
.home-opening .activation-banner-features strong,
.home-opening .activation-text-only .activation-banner-features strong { color: #292d33; }
.home-opening .activation-banner-tag { background: #dfe8f1; color: #243b5a; }
.home-opening .activation-text-only .activation-banner-features { border-left-color: #ccd7e2; }
.home-opening .activation-text-only .activation-banner-features > span,
.home-opening .activation-text-only .activation-banner-feature-pair > span { border-bottom-color: #ccd7e2; }
.home-opening .home-banner-arrow { background: #243b5a; border-color: #243b5a; color: #fff; }
.home-opening .home-banner-dots { background: #dfe8f1; }
.home-opening .home-banner-dots button span { background: #a0a6af; }
.home-opening .home-banner-dots button[aria-current=true] span { background: #243b5a; }
.home-opening .quick a,
.home-opening .quick a:nth-child(2),
.home-opening .quick a:nth-child(3) { background: #fff; color: #292d33; border-color: #d6dfe8; }
.home-opening .quick small { color: #56616e; }
.home-opening .activation-banner-buttons .activation-banner-channel { background: #243b5a; color: #fff; }
.home-opening .activation-banner-buttons .activation-banner-channel:hover { background: #182b44; }
.home-opening .home-banner button:focus-visible { outline-color: #243b5a; }
.home-opening .consultation-banner-card { background: #fff; border-color: #d6dfe8; }
.home-opening :is(.consultation-channeltalk, .membership-banner-link) { background: #243b5a; color: #fff; }
.home-opening :is(.consultation-channeltalk, .membership-banner-link):hover { background: #182b44; }
.home-opening .membership-network-label { background: #dfe8f1; color: #243b5a; border-color: #ccd7e2; }