/* Shared slim navigation: brush wordmark over a translucent, image-free surface. */
.wuxia-header {
  --nav-glass: rgba(245,239,228,.25); --nav-menu-glass: rgba(245,239,228,.94);
  --nav-ink: #38352e; --nav-accent: #8d382c; --nav-seal: #984332;
  --nav-line: #b29a78; --nav-rule: #9a816344; --nav-panel: #f5efe4;
  --nav-fiber: #80684906; --nav-shadow: #39281417; --nav-hover: #9b60300b;
}
html[data-theme="dark"] .wuxia-header {
  --nav-glass: rgba(35,38,37,.25); --nav-menu-glass: rgba(35,38,37,.94);
  --nav-ink: #ded4c0; --nav-accent: #dda48e; --nav-seal: #954c39;
  --nav-line: #796c54; --nav-rule: #b6a0803b; --nav-panel: #232625;
  --nav-fiber: #d0b89404; --nav-shadow: #0004; --nav-hover: #dec29409;
}
body .site-header.wuxia-header,
html[data-theme="dark"] body .site-header.wuxia-header {
  gap: clamp(16px, 2vw, 32px); color: var(--nav-ink);
  border-bottom: 1px solid var(--nav-rule);
  background: var(--nav-glass);
  box-shadow: 0 2px 8px var(--nav-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.wuxia-header::before, .wuxia-header::after {
  content: ""; position: absolute; inset-inline: 7px; pointer-events: none;
}
.wuxia-header::before { top: 3px; height: 1px; background: var(--nav-rule); }
.wuxia-header::after {
  bottom: 1px; height: 4px; opacity: .45; background: var(--nav-line);
  mask: url("/assets/branding/navigation-border.svg") left bottom / 32px 4px repeat-x;
}
.wuxia-header .nav-brand-group { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; }
.wuxia-header .brand-home { gap: 9px; color: var(--nav-ink); }
.wuxia-header .brand-wordmark {
  display: block; flex: 0 0 72px; width: 72px; height: 42px; object-fit: contain;
}
html[data-theme="dark"] .wuxia-header .brand-wordmark { filter: brightness(0) invert(.91) sepia(.25); }
.wuxia-header .brand-flag {
  display: block; flex: 0 0 40px; width: 40px; height: 54px; margin-right: 2px;
  object-fit: contain; filter: drop-shadow(0 1px 1px #21190e24);
}
.wuxia-header .brand-home small {
  display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 25px; min-height: 0; padding: 2px;
  margin: 2px 0 0; writing-mode: vertical-rl; transform: rotate(-3deg); border: 1px solid var(--nav-seal);
  border-radius: 1px 2px 1px 2px; color: #f8ead3;
  background: repeating-linear-gradient(13deg, #f8ead319 0 1px, transparent 1px 5px), var(--nav-seal);
  box-shadow: inset 0 0 0 1px #f8ead380; font: 600 9px/1 "Noto Serif KR", "Batang", serif; letter-spacing: .05em;
}
body .wuxia-header .top-nav > a {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3px; padding: 5px 3px 8px; border: 0; border-radius: 0;
  color: var(--nav-ink); font: 600 12px/1.4 "Noto Serif KR", "Gowun Batang", "Batang", serif;
  letter-spacing: .02em; white-space: nowrap; transform: none;
  background: linear-gradient(var(--nav-rule), var(--nav-rule)) right center / 1px 28px no-repeat;
  transition: color .16s ease;
}
body .wuxia-header .top-nav > a:last-child { background-image: none; }
.wuxia-header .nav-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; color: inherit; }
.wuxia-header .nav-label { display: block; }
.wuxia-header .coupon-nav-link .nav-label { position: relative; }
.wuxia-header .nav-label[data-coupon-count]::after {
  content: attr(data-coupon-count); position: absolute; bottom: calc(100% + 8px); left: calc(50% + 7px);
  display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px;
  border: 1px solid #e8d8bf; border-radius: 8px; background: #a33229; color: #fff8ec;
  font: 700 9px/1 "Noto Sans KR", sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
html[data-theme="dark"] .wuxia-header .nav-label[data-coupon-count]::after { border-color: #43322c; background: #b63e32; }
body .wuxia-header .top-nav > a::before {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px;
  border: 1px solid currentColor; background: var(--nav-panel); z-index: 1;
  opacity: 0; transform: translate(-50%, 50%) rotate(45deg); pointer-events: none;
}
body .wuxia-header .top-nav > a::after {
  content: ""; position: absolute; left: 50%; right: auto; bottom: 3px; width: 70%; max-width: 64px; height: 1px;
  background: currentColor; transform: translateX(-50%) scaleX(.5); opacity: 0;
  transition: opacity .16s ease, transform .16s ease; pointer-events: none;
}
body .wuxia-header .top-nav > a:hover,
body .wuxia-header .top-nav > a:focus-visible,
body .wuxia-header .top-nav > a[aria-current="page"],
body .wuxia-header .top-nav > a.is-active { color: var(--nav-accent); background-color: transparent; }
body .wuxia-header .top-nav > a:is(:hover, :focus-visible, [aria-current="page"], .is-active)::after {
  opacity: 1; transform: translateX(-50%) scaleX(1);
}
body .wuxia-header .top-nav > a:is([aria-current="page"], .is-active)::before { opacity: 1; }
body .wuxia-header :is(.brand-home, .top-nav > a, .theme-toggle, .nav-toggle):focus-visible {
  outline: 2px solid var(--nav-accent); outline-offset: -3px;
}
body .wuxia-header :is(.theme-toggle, .nav-toggle) {
  color: var(--nav-ink); border: 1px solid var(--nav-rule); background: var(--nav-panel);
  box-shadow: 0 1px 4px var(--nav-shadow);
}
body .wuxia-header .theme-toggle {
  order: 3; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 9px; border-radius: 50%;
}
.wuxia-header .theme-toggle svg { width: 16px; height: 16px; }
body .wuxia-header .nav-toggle:hover { color: var(--nav-accent); border-color: var(--nav-line); }
@media (hover: hover) and (pointer: fine) {
  body .wuxia-header .theme-toggle:hover {
    color: var(--nav-ink); border-color: var(--nav-line);
    background: color-mix(in srgb, var(--nav-panel) 92%, var(--nav-ink));
  }
}
body .wuxia-header .theme-toggle:focus-visible { outline-offset: 2px; }
@media (min-width: 1101px) {
  body .wuxia-header .top-nav {
    display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); flex: 0 1 1080px; max-width: 1080px;
    gap: 0; margin: 0 0 0 auto; align-self: stretch; align-items: stretch;
  }
  body .wuxia-header .top-nav > a { min-width: 0; min-height: calc(var(--site-header-height) - 1px); }
  body .wuxia-header.is-scrolled .top-nav > a { min-height: calc(var(--site-header-scrolled-height) - 1px); }
  .wuxia-header.is-scrolled .brand-flag { height: 50px; }
}
@media (min-width: 1101px) and (max-width: 1250px) {
  body .site-header.wuxia-header { gap: 16px; }
  .wuxia-header .brand-home { gap: 7px; }
  .wuxia-header .brand-wordmark { flex-basis: 66px; width: 66px; height: 38px; }
  body .wuxia-header .top-nav > a { font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 1100px) {
  body .site-header.wuxia-header { gap: 10px; }
  .wuxia-header .brand-wordmark { flex-basis: 66px; width: 66px; height: 38px; }
  .wuxia-header .brand-flag { flex-basis: 36px; width: 36px; height: 48px; }
  body .wuxia-header .nav-toggle { order: 2; width: 34px; height: 34px; border-radius: 2px; }
  body .wuxia-header .top-nav,
  html[data-theme="dark"] body .wuxia-header .top-nav {
    gap: 0 12px; padding: 8px 12px 12px; border: 1px solid var(--nav-line);
    background: var(--nav-menu-glass);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px var(--nav-shadow);
  }
  body .wuxia-header .top-nav > a, body .wuxia-header.is-scrolled .top-nav > a {
    min-height: 58px; padding: 6px 4px 9px; font-size: 13px;
    border-bottom: 1px solid var(--nav-rule); background-image: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .wuxia-header, body .wuxia-header .top-nav, body .wuxia-header .top-nav > a,
  body .wuxia-header .top-nav > a::after { transition: none; }
}
