/* ============================================================
   Header & navbar (GNB) — shared component styles
   ============================================================ */

:root {
  --header-height: 64px;
  --nav-link-active-color: #ea002c;
  --color-text-primary: #000000;
  --color-text-secondary: #666666;
  --color-border-light: #eeeeee;
  --letter-tight: -0.01em;
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);
  --gutter-mobile: 20px;
  --font-stack: "Noto Sans CJK KR", "Noto Sans KR", "Malgun Gothic", system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------------
   Header (GNB)
   ---------------------------------------------------------- */
.header {
  position: fixed;
  height: 64px;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  /* box-shadow: var(--shadow-header); */
  /* Allow lang dropdown to paint below the 64px bar (avoid clipping with backdrop-filter) */
  overflow: visible;
}

/* MA005 / MMA005: 한국어 메인 T로밍 전환 배너 — 문서 흐름(비고정). GNB만 sticky */
.troaming-banner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 104px;
  min-height: 104px;
  padding: 20px 50px;
  background-color: #3617ce;
  color: #ffffff;
  text-decoration: none;
  flex-shrink: 0;
}

.page-main:has(> .troaming-banner) .header,
body:has(> .troaming-banner) .header {
  position: sticky;
  inset: unset;
  top: 0;
  width: 100%;
  flex-shrink: 0;
  align-self: flex-start;
}

@media (min-width: 1280px) {
  .page-main:has(> .troaming-banner) .header__submenu,
  body:has(> .troaming-banner) .header__submenu {
    position: absolute;
    top: 100%;
  }
}

.page-main:has(> .troaming-banner) {
  --header-stack-height: var(--header-height);
}

.troaming-banner__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 5px;
  min-width: 0;
}

.troaming-banner__message {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  word-break: keep-all;
}

.troaming-banner__line {
  white-space: nowrap;
}

/* PC: 메시지 한 줄 / MO: 두 줄 */
.troaming-banner .br-mobile {
  display: none;
}

.troaming-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
}

.troaming-banner__cta-text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.troaming-banner__cta-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.troaming-banner__logo {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
}

.troaming-banner:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

@media (max-width: 1279.98px) {
  .troaming-banner {
    height: 116px;
    min-height: 116px;
    padding: 16px 20px;
    gap: 20px;
  }

  .troaming-banner .br-mobile {
    display: block;
  }

  .troaming-banner__copy {
    gap: 10px;
  }

  .troaming-banner__message {
    font-size: 16px;
    line-height: 22px;
  }

  .troaming-banner__cta {
    gap: 2px;
  }

  .troaming-banner__cta-text {
    font-size: 14px;
    line-height: 22px;
  }

  .troaming-banner__cta-icon {
    width: 16px;
    height: 16px;
  }

  .troaming-banner__logo {
    width: 72px;
    height: 72px;
  }
}

/* 360 폭: 두 줄 유지 위해 메시지 16px */
@media (max-width: 374.98px) {
  .troaming-banner {
    gap: 12px;
    padding: 16px;
  }

  .troaming-banner__message {
    font-size: 16px;
    line-height: 24px;
  }

  .troaming-banner__logo {
    width: 56px;
    height: 56px;
  }
}

.header__inner {
  box-sizing: border-box;
  height: 100%;
  justify-content: space-between;
  padding: 0 50px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  overflow: visible;
  height: 64px;
}

/* Figma mGNB_2depth — PC·메인·상품리스트에서는 숨김, 모바일 서브 페이지에서만 노출 */
.header__detail {
  display: none;
}

.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
}

.header__logo-mark {
  display: block;
  width: 103px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
}

.header__logo-roaming {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  transform: translateY(2px);
  letter-spacing: var(--letter-tight);
  color: var(--color-text-secondary);
}

.header__menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: center;
}

.header__menu-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 1px;
}

.header__nav {
  display: flex;
  align-items: center;
  align-self: flex-end;
  justify-content: center;
  flex: 1;
  gap: 21px;
  min-width: 0;
}

.header__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__nav-list--secondary {
  gap: 0;
}

.header__nav-item {
  margin: 0;
}

.header__nav-link {
  display: inline-block;
  box-sizing: border-box;
  color: var(--color-text-primary);
  text-decoration: none;
  padding-bottom: 15px;
  border-bottom: 3px solid transparent;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}


.header__nav-link__body {
  position: relative;
  display: inline-grid;
  justify-items: start;
  align-items: end;
  vertical-align: bottom;
}

.header__nav-link__sizer,
.header__nav-link__label {
  grid-area: 1 / 1;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--letter-tight);
  white-space: nowrap;
  font-synthesis: none;
}

/* 호버는 실제 700 대신 메인 탭(.quick-nav)과 같은 가짜 볼드 — Latin 글리프 폭이 안 늘어남 */
.header__nav-link__sizer {
  display: none;
}

.header__nav-link__label {
  position: static;
  font-weight: 400;
  color: inherit;
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
  color: var(--nav-link-active-color);
  border-bottom-color: var(--nav-link-active-color);
  text-decoration: none;
}

.header__nav-link:focus-visible {
  outline: 2px solid var(--nav-link-active-color);
  outline-offset: 4px;
}

.header__nav-link:active {
  color: var(--nav-link-active-color);
  border-bottom-color: var(--nav-link-active-color);
  opacity: 0.92;
}

.header__nav-link[aria-current="page"],
.header__nav-link--active {
  color: var(--nav-link-active-color);
  border-bottom-color: var(--nav-link-active-color);
}

@media (min-width: 1280px) {
  .header__nav-link:hover .header__nav-link__label,
  .header__nav-link:focus-visible .header__nav-link__label,
  .header__nav-link:active .header__nav-link__label,
  .header__nav-link[aria-current="page"] .header__nav-link__label,
  .header__nav-link--active .header__nav-link__label {
    font-weight: 400;
    text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
  }
}

.header__nav-separator {
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--color-border-light);
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 16px;
}

.header__nav-body {
  display: contents;
}

.header__nav-top,
.header__nav-footer,
.header__nav-divider,
.header__nav-accordion {
  display: none;
}

/* Nav dropdown (desktop hover) */
.header__nav-item--has-submenu {
  position: static;
}

.header__submenu {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height);
  z-index: 99;
  background: rgba(247, 248, 249, 0.9);
  border-bottom: 1px solid var(--color-border-light);
  border-top: 1px solid var(--color-border-light);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0s linear 0.18s;
}

.header__submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.header__submenu__inner {
  box-sizing: border-box;
  padding-top: 15px;
}

.header__submenu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 데스크톱 GNB 경계(1280)와 동일 게이트 — 1281 이던 off-by-one 으로 정확히 1280px 폭에서 정렬이 꺼지던 결함 수정 */
@media (min-width: 1280px) {
  .header__submenu--align-start .header__submenu__inner {
    padding-left: var(--submenu-inset-inline-start, 50px);
    padding-right: 50px;
  }

  .header__submenu--align-end .header__submenu__inner {
    display: flex;
    justify-content: flex-end;
    padding-left: 50px;
    padding-right: calc(var(--submenu-inset-inline-end) - 16px);
  }

  .header__submenu--align-start .header__submenu__list {
    justify-content: flex-start;
  }

  .header__submenu--align-end .header__submenu__list {
    justify-content: flex-end;
  }
}

.header__submenu__item {
  margin: 0;
}

.header__nav-item--has-submenu:hover > .header__nav-link,
.header__nav-item--has-submenu:focus-within > .header__nav-link {
  color: var(--nav-link-active-color);
  border-bottom-color: var(--nav-link-active-color);
}

@media (min-width: 1280px) {
  .header__nav-item--has-submenu:hover > .header__nav-link .header__nav-link__label,
  .header__nav-item--has-submenu:focus-within > .header__nav-link .header__nav-link__label {
    font-weight: 400;
    text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
  }
}

.header__nav-item--has-submenu:hover .header__submenu,
.header__nav-item--has-submenu:focus-within .header__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.18s ease,
    visibility 0s linear 0s;
}

/* PC: 투뎁스 페이지에서도 서브메뉴는 호버/포커스 시에만 열림 (상시 노출 금지). 현재 1depth만 active 표시 */
@media (min-width: 1280px) {
  .header__nav-item--current > .header__nav-link {
    color: var(--nav-link-active-color);
    border-bottom-color: var(--nav-link-active-color);
  }

  .header__nav-item--current > .header__nav-link .header__nav-link__label {
    font-weight: 400;
    text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
  }
}

.header__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  flex-shrink: 0;
}

.header__lang {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

/* 모바일 헤더 지구본(언어 바텀시트 진입) — 데스크톱에선 숨김, 모바일 블록에서 노출 */
.header__lang-mobile {
  display: none;
}

/* Mobile header / navbar */
@media (max-width: 1279.98px) {
  .header{
    height: 56px;
  }
  .header__nav-item--has-submenu {
    padding-bottom: 0;
  }
  .header__submenu .header__nav-link__label {
    font-weight: 400;
    font-size: 14px;
  }

  .header__inner {
    flex-wrap: wrap;
    height: 56px;
  }

  .header__logo {
    order: 1;
  }

  .header__actions {
    order: 2;
    flex: 1 1 auto;
    justify-content: end;
    min-width: 0;
  }

  .header__menu-toggle {
    display: flex;
  }

  .header__nav {
    order: 4;
    flex: 1 0 100%;
    width: 100%;
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: #fff;
    border-bottom: 0;
    height: 100%;
    min-height: 100dvh;
    max-height: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  /*
   * 닫힌 드로어: 부모 pointer-events:none 만으로는 부족하다.
   * 자손(.header__submenu 등)이 pointer-events:auto 이면 히트테스트가 다시 살아나
   * 투명 full-screen nav 위로 FAQ 등 본문 클릭이 메뉴 링크로 새어 나간다.
   */
  .header__nav:not(.header__nav--open),
  .header__nav:not(.header__nav--open) * {
    pointer-events: none !important;
  }

  .header__nav--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }

  .header__nav-top {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
    padding: 0 var(--gutter-mobile);
    box-sizing: border-box;
  }

  .header__nav--open .header__nav-top {
    display: flex;
  }

  .header__nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    min-width: 0;
  }

  .header__nav-logo-mark {
    display: block;
    width: 103px;
    height: 30px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .header__nav-logo-roaming {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    transform: translateY(2px);
    letter-spacing: var(--letter-tight);
    color: var(--color-text-secondary);
  }

  .header__nav-close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 -6px 0 0;
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
  }

  .header__nav-close:focus-visible {
    outline: 2px solid var(--nav-link-active-color);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .header__nav-close__icon {
    display: block;
    width: 32px;
    height: 32px;
  }

  .header__nav-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px var(--gutter-mobile) 0;
    box-sizing: border-box;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .header__nav-link {
    display: block;
    width: 100%;
    padding: 20px 0;
    border-bottom: 0;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: #000;
  }

  .header__nav-link__sizer,
  .header__nav-link__label {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .header__nav-link__label {
    position: static;
    font-weight: 700;
  }

  .header__nav-link__body {
    display: block;
  }

  .header__nav-link__sizer {
    display: none;
  }

  .header__nav-link:hover,
  .header__nav-link:focus-visible,
  .header__nav-link:active {
    color: #000;
    border-bottom-color: transparent;
  }

  .header__nav-link:hover .header__nav-link__label,
  .header__nav-link:focus-visible .header__nav-link__label,
  .header__nav-link:active .header__nav-link__label {
    font-weight: 700;
  }

  .header__nav-separator {
    display: none;
  }

  .header__nav-divider {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    background-color: #ddd;
    flex-shrink: 0;
  }

  .header__nav-item--has-submenu > .header__nav-link--parent {
    display: none;
  }

  .header__nav-accordion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 20px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .header__nav-accordion__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000;
  }

  .header__nav-accordion__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }

  /* MCO001: 현재 페이지와 펼친 아코디언은 동시에 레드, 나머지 탑레벨만 그레이 */
  .header__nav:has(.header__nav-item--expanded, .header__nav-item--current)
    .header__nav-list
    > .header__nav-item:not(.header__nav-item--expanded):not(.header__nav-item--current)
    > .header__nav-link,
  .header__nav:has(.header__nav-item--expanded, .header__nav-item--current)
    .header__nav-item:not(.header__nav-item--expanded):not(.header__nav-item--current)
    .header__nav-accordion__label {
    color: #666;
  }

  .header__nav-item--expanded .header__nav-accordion__label,
  .header__nav-item--current > .header__nav-link,
  .header__nav-item--current > .header__nav-accordion .header__nav-accordion__label {
    color: var(--nav-link-active-color);
  }

  .header__nav-item--expanded .header__nav-accordion__icon {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 15L12 9L18 15' stroke='%23ea002c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .header__nav-item--has-submenu:not(.header__nav-item--expanded) .header__submenu {
    display: none;
  }

  .header__nav-item--has-submenu:hover > .header__nav-link,
  .header__nav-item--has-submenu:focus-within > .header__nav-link,
  .header__nav-item--has-submenu:hover .header__submenu,
  .header__nav-item--has-submenu:focus-within .header__submenu {
    color: inherit;
    border-bottom-color: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .header__submenu,
  .page-main .header__submenu,
  .page-main:has(> .troaming-banner) .header__submenu,
  body:has(> .troaming-banner) .header__submenu {
    position: static;
    top: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header__submenu::before {
    display: none;
  }

  .header__submenu__inner {
    padding: 0;
  }

  .header__submenu__list {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding-bottom: 20px;
  }

  .header__submenu .header__nav-link,
  .header__submenu .header__submenu-link {
    padding: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #000;
  }

  .header__submenu .header__nav-link__label {
    font-weight: 400;
  }

  .header__submenu .header__nav-link:hover,
  .header__submenu .header__nav-link:focus-visible {
    color: var(--nav-link-active-color);
    border-bottom-color: transparent;
  }

  .header__submenu .header__nav-link:hover .header__nav-link__label,
  .header__submenu .header__nav-link:focus-visible .header__nav-link__label {
    font-weight: 700;
  }

  .header__nav-footer {
    display: none;
    flex-shrink: 0;
    margin-top: auto;
    padding: 20px var(--gutter-mobile) 40px;
    border-top: 1px solid #ddd;
  }

  .header__nav--open .header__nav-footer {
    display: block;
  }

  .header__nav-lang {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-stack);
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #000;
    text-align: left;
  }

  .header__nav-lang__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .header__nav-lang__icon img,
  .header__nav-lang__icon-svg {
    display: block;
    width: 20px;
    height: 20px;
    color: #000;
  }

  .header__nav-lang__label {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #000;
    white-space: nowrap;
  }

  .header__nav-lang__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex: 0 0 20px;
    color: #000;
  }

  .header__nav-lang__chevron-svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  .header__lang {
    display: none;
  }

  .header__lang-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-primary, #000);
    cursor: pointer;
  }

  /* 지구본이 우측 정렬을 담당하므로 햄버거는 바로 옆에 붙는다 */
  .header__lang-mobile + .header__menu-toggle {
    margin-left: 12px;
  }

  /* 드로어에 닫기(X)가 있으므로 햄버거↔X 모프 없음. 열려 있는 동안 헤더 액션은 숨김 */
  body.header-nav-open .header__actions,
  body.header-nav-open .header__logo {
    visibility: hidden;
    pointer-events: none;
  }

  .header__nav-list > .header__nav-item > .header__nav-link.header__nav-link--active,
  .header__nav-list > .header__nav-item > .header__nav-link[aria-current="page"] {
    color: var(--nav-link-active-color);
    border-bottom-color: transparent;
  }

  .header__submenu .header__nav-link.header__nav-link--active,
  .header__submenu .header__nav-link[aria-current="page"] {
    color: var(--nav-link-active-color);
  }

  /* backdrop-filter 는 fixed 자손의 containing block 이 되어 배너 아래로 잘리므로, 열림 시 헤더를 뷰포트 전체로 올려 덮음 */
  body.header-nav-open .header,
  .page-main:has(> .troaming-banner).header-nav-open .header,
  body:has(> .troaming-banner).header-nav-open .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 200;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #fff;
    overflow: hidden;
    align-self: stretch;
  }

  body.header-nav-open .header__inner {
    height: 100%;
    align-items: stretch;
  }

  body.header-nav-open .header__nav {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  body.header-nav-open {
    overflow: hidden;
  }

  .header__inner {
    padding: 0 var(--gutter-mobile);
  }
}

/* 현재 채널 GNB 활성 표시(Figma: 레드+언더라인) — PC만. 모바일 드로어 활성은 위 MCO001 규칙.
   판정 우선순위: body[data-gnb](레이아웃이 menu 로 명시) > page-* 클래스.
   완료·실패 화면은 CSS 스코프용 page-* 가 상품과 무관(SIM 실패도 page-esim)이라, 클래스만 보면
   data-gnb 로 켠 메뉴와 두 개가 동시에 활성된다 — data-gnb 가 있으면 클래스 규칙은 끈다. */
@media (min-width: 1280px) {
  body[data-gnb="esim"] .header__nav-link[data-nav-link="esim"],
  body[data-gnb="sim"] .header__nav-link[data-nav-link="sim"],
  body[data-gnb="router"] .header__nav-link[data-nav-link="router"],
  body:not([data-gnb]).page-esim .header__nav-link[data-nav-link="esim"],
  body:not([data-gnb]).page-sim .header__nav-link[data-nav-link="sim"],
  body:not([data-gnb]).page-router .header__nav-link[data-nav-link="router"],
  body:not([data-gnb]).page-cell-phone .header__nav-link[data-nav-link="phone"] {
    color: var(--nav-link-active-color);
    border-bottom-color: var(--nav-link-active-color);
  }

  body[data-gnb="esim"] .header__nav-link[data-nav-link="esim"] .header__nav-link__label,
  body[data-gnb="sim"] .header__nav-link[data-nav-link="sim"] .header__nav-link__label,
  body[data-gnb="router"] .header__nav-link[data-nav-link="router"] .header__nav-link__label,
  body:not([data-gnb]).page-esim .header__nav-link[data-nav-link="esim"] .header__nav-link__label,
  body:not([data-gnb]).page-sim .header__nav-link[data-nav-link="sim"] .header__nav-link__label,
  body:not([data-gnb]).page-router .header__nav-link[data-nav-link="router"] .header__nav-link__label,
  body:not([data-gnb]).page-cell-phone .header__nav-link[data-nav-link="phone"] .header__nav-link__label {
    font-weight: 400;
    text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
  }
}

/* 모바일 서브 GNB: 56px, 뒤로 32 · 페이지명 18/26/700 · 우측 스페이서 32(타이틀 중앙 정렬)
   — 메인·상품리스트 제외(body.is-mobile-sub-gnb). 기존 -detail 도 동일 모드 */
@media (max-width: 1279.98px) {
  body.is-mobile-sub-gnb,
  body[class*="-detail"] {
    --header-height: 56px;
  }

  body.is-mobile-sub-gnb .header,
  body[class*="-detail"] .header {
    height: var(--header-height);
  }

  body.is-mobile-sub-gnb .header__inner,
  body[class*="-detail"] .header__inner {
    height: 56px;
    gap: 0;
    flex-wrap: nowrap;
  }

  body.is-mobile-sub-gnb .header__logo,
  body.is-mobile-sub-gnb .header__actions,
  body.is-mobile-sub-gnb .header__nav,
  body[class*="-detail"] .header__logo,
  body[class*="-detail"] .header__actions,
  body[class*="-detail"] .header__nav {
    display: none;
  }

  body.is-mobile-sub-gnb .header__detail,
  body[class*="-detail"] .header__detail {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 56px;
  }

  .header__detail-back,
  .header__detail-spacer {
    box-sizing: border-box;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .header__detail-back {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
  }

  .header__detail-back img {
    display: block;
    width: 32px;
    height: 32px;
  }

  .header__detail-back:focus-visible {
    outline: 2px solid var(--nav-link-active-color);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .header__detail-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--color-text-primary);
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: var(--letter-tight);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* GNB에 타이틀이 있으므로 본문 페이지 H1 중복 숨김(가이드·이벤트 등) */
  body.is-mobile-sub-gnb .event-list__title,
  body.is-mobile-sub-gnb .event-detail__title,
  body.is-mobile-sub-gnb .faq-list__title,
  body.is-mobile-sub-gnb .rc-list__title,
  body.is-mobile-sub-gnb .coupon-list__title,
  body.is-mobile-sub-gnb .legal-doc__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.is-mobile-sub-gnb .event-list__header,
  body.is-mobile-sub-gnb .event-list__header-inner,
  body.is-mobile-sub-gnb .faq-list__header,
  body.is-mobile-sub-gnb .rc-list__header,
  body.is-mobile-sub-gnb .legal-doc__header {
    padding-top: 0 !important;
    min-height: 0;
  }

  body.is-mobile-sub-gnb .event-list__grid {
    padding-top: 20px;
  }

  body.is-mobile-sub-gnb .faq-list__tabs,
  body.is-mobile-sub-gnb .rc-list__tabs {
    margin-top: 20px;
  }

  body.is-mobile-sub-gnb .coupon-list__header {
    padding-top: 20px;
  }
}

@media (max-width: 767.98px) {
  .header__logo-mark,
  .header__nav-logo-mark {
    width: 96px;
    height: 28px;
  }

  .header__logo-roaming,
  .header__nav-logo-roaming {
    font-size: 15px;
    line-height: 22px;
  }
}