/* REV016 navigation; REV022 refines mobile controls without altering the panel. */
.header { align-items: center; gap: 24px; }
.header .brand {
  min-height: 52px;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
}
.header .brand img { filter: drop-shadow(0 2px 5px rgb(0 0 0 / .28)); }
.header .brand img:first-child { width: 32px; }
.header .brand img:last-child { width: 158px; }
.header .header-actions { align-items: center; gap: 10px; }
.header .desktop-navigation,
.header .languages,
.header .mobile-navigation > summary,
.header .nav-dropdown,
.header .mobile-menu-panel {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  -webkit-backdrop-filter: blur(var(--surface-blur));
  backdrop-filter: blur(var(--surface-blur));
  box-shadow: inset 0 1px 0 rgb(245 242 234 / .045);
}
.header .desktop-navigation {
  display: flex;
  gap: clamp(10px, 1.4vw, 24px);
  min-height: 52px;
  padding: 3px 20px;
  margin: 0;
  border-radius: 28px;
}
.header .nav-group { position: relative; }
.header .nav-row { display: flex; align-items: center; }
.header .nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: rgb(245 242 234 / .88);
  white-space: nowrap;
}
.header .desktop-navigation a::after { content: none; }
.header .nav-index {
  display: inline;
  margin: 0;
  font: 9px/1 monospace;
  letter-spacing: .02em;
  color: var(--gold);
}
.header .nav-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 44px;
  margin: 0 -5px 0 1px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: rgb(245 242 234 / .5);
  background: transparent;
  cursor: pointer;
}
.header .nav-disclosure span { display: inline; margin: 0; font: 16px/1 Pretendard, sans-serif; color: inherit; }
.header .nav-parent:hover,
.header .nav-parent[aria-current],
.header .nav-group[data-nav-open] > .nav-row .nav-parent,
.header .nav-disclosure:hover,
.header .nav-disclosure[aria-expanded="true"] { color: var(--gold); }
.header .nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -18px;
  display: grid;
  width: 246px;
  padding: 8px;
  border-radius: 16px;
  max-height: calc(100dvh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(18 20 18 / .92);
}
.header [data-nav-group="business"] > .nav-dropdown { width: 286px; }
.header .nav-group[data-nav-open]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -18px;
  width: 100%;
  height: 9px;
}
.header .nav-dropdown > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  color: rgb(245 242 234 / .88);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
  white-space: normal;
  word-break: keep-all;
  transition: background 160ms ease, color 160ms ease;
}
.header .nav-dropdown > .nav-category { color: var(--gold); font-weight: 650; }
.header .nav-dropdown > .nav-category:not(:first-child) { margin-top: 8px; border-top: 1px solid var(--surface-border); border-radius: 0 0 9px 9px; }
.header .nav-dropdown > .nav-detail { padding-left: 24px; font-size: 13px; }
.header .nav-dropdown > a:hover,
.header .nav-dropdown > a:focus-visible,
.header .nav-dropdown > a[aria-current] { color: var(--gold); background: rgb(237 209 116 / .085); }
.header .nav-arrow { display: inline; margin: 0; font: 13px/1 Pretendard, sans-serif; color: var(--gold); opacity: .6; }
.header .languages {
  display: flex;
  gap: 4px;
  min-height: 52px;
  padding: 3px;
  margin: 0;
  border-radius: 28px;
}
.header .languages > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 44px;
  border-radius: 23px;
  color: rgb(245 242 234 / .6);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .025em;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease;
}
.header .languages > a:hover { color: var(--paper); background: rgb(245 242 234 / .06); }
.header .languages > a[aria-current] { color: var(--gold); background: rgb(237 209 116 / .13); }
.header :is(a, button, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.header .mobile-navigation { display: none; }

@media (min-width: 901px) and (max-width: 1099px) {
  .header .desktop-navigation { gap: 10px; padding-inline: 14px; }
  .header .nav-parent { font-size: 13px; gap: 5px; }
  .header .nav-disclosure { width: 24px; }
  .header .nav-index { display: none; }
}
@media (max-width: 900px) {
  .header { gap: 6px; padding: 18px; }
  .header .brand { gap: 7px; min-height: 50px; }
  .header .brand img:first-child { width: 26px; }
  .header .brand img:last-child { width: 128px; }
  .header .header-actions { gap: 6px; flex-shrink: 0; }
  .header .desktop-navigation { display: none; }
  .header .mobile-navigation { display: block; }
  .header .mobile-navigation > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 80px;
    min-width: 80px;
    min-height: 50px;
    gap: 8px;
    padding: 0 12px;
    border-radius: 25px;
    text-decoration: none;
    color: var(--paper);
  }
  .header .mobile-navigation[open] > summary { color: var(--gold); background: var(--surface-bg-hover); }
  .header .mobile-menu-label { font-size: 12px; font-weight: 650; line-height: 1; letter-spacing: .015em; }
  .header .mobile-menu-glyph { width: 12px; flex: 0 0 12px; font-size: 16px; font-weight: 400; line-height: 1; text-align: center; }
  .header .languages {
    box-sizing: border-box;
    width: 94px;
    min-height: 50px;
    gap: 0;
    padding: 2px;
    border-radius: 25px;
  }
  .header .languages > a {
    box-sizing: border-box;
    width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;
  }
  .header .languages > a:first-child { border-radius: 22px 8px 8px 22px; }
  .header .languages > a:last-child { border-radius: 8px 22px 22px 8px; }
  .header .languages > a[aria-current] {
    background: rgb(215 180 74 / .17);
    color: #edd174;
    box-shadow: inset 0 0 0 1px rgb(215 180 74 / .12);
  }
  .header .mobile-menu-panel {
    top: calc(100% + 8px);
    right: 18px;
    width: min(340px, calc(100vw - 36px));
    max-height: calc(100dvh - 112px);
    padding: 10px;
    border-radius: 18px;
    scrollbar-width: thin;
    background: rgb(18 20 18 / .92);
  }
  .header .mobile-menu-links { gap: 2px; }
  .header .mobile-menu-links .nav-row { justify-content: space-between; }
  .header .mobile-menu-links .nav-parent { flex: 1; padding: 8px 12px; border: 0; min-height: 48px; }
  .header .mobile-menu-links .nav-disclosure { width: 44px; min-height: 44px; margin: 0; }
  .header .mobile-menu-links .nav-index { display: inline; font-size: 9px; }
  .header .mobile-menu-links .nav-dropdown {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 2px 4px 8px 18px;
    margin: 0 0 6px;
    background: rgb(0 0 0 / .12);
    border: 0;
    border-radius: 12px;
    backdrop-filter: none;
    box-shadow: none;
  }
  .header .mobile-menu-links .nav-group::after { content: none; }
}
@media (max-width: 384px) {
  .header .brand { gap: 6px; }
  .header .brand img:first-child { width: 22px; }
  .header .brand img:last-child { width: 110px; }
}
@media (max-width: 350px) {
  .header { padding-inline: 12px; }
  .header .mobile-navigation > summary { width: 44px; min-width: 44px; padding: 0; }
  .header .mobile-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header .mobile-menu-panel { right: 12px; width: calc(100vw - 24px); }
}
@media (max-width: 900px) and (max-height: 480px) {
  .header { padding-block: 12px; }
  .header .mobile-menu-panel { max-height: calc(100dvh - 94px); }
}
@media (prefers-reduced-motion: reduce) {
  .header :is(a, button) { transition: none; }
}