/* Phase 3 헤더(header-nav.php). 한 줄 고정·넘침 없음 — 넘치는 1단은 JS(Priority+)가 "더보기"로 옮긴다.
   기준: <768 모바일(☰·🔍·🛒·♿·아바타) / 768~1023 태블릿(☰ + 들어가는 만큼) / ≥1024 데스크톱(☰ 없음). */
.wux-nav{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #d9e2ec;color:#1f2933;font-size:15px;line-height:1.3}
.admin-bar .wux-nav{top:32px}
@media (max-width:782px){.admin-bar .wux-nav{top:46px}}
@media (max-width:600px){.admin-bar .wux-nav{top:0}}
.wux-sentinel{height:1px;margin-top:-1px}
.wux-nav-in{display:flex;align-items:center;gap:4px;max-width:1440px;margin:0 auto;padding:0 12px;min-height:64px;transition:min-height .2s}
.wux-nav.is-stuck .wux-nav-in{min-height:56px}
.wux-nav .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 아이콘 버튼(44×44) — GP 의 button:hover 회색 배경을 덮는다 */
html body .wux-ib{display:inline-grid;place-items:center;position:relative;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:10px;background:transparent;color:#1f2933;cursor:pointer;text-decoration:none;flex:none}
html body .wux-ib:hover,html body .wux-ib:focus{background:#eef4fa;color:#1f2933}
.wux-nav :focus-visible,.wux-drawer :focus-visible,.wux-search :focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.wux-burger{display:none!important}
.wux-logo{display:none;align-items:center;flex:none;margin-inline:4px 8px}
.wux-logo img{height:32px;width:auto;display:block}
.wux-nav.is-stuck .wux-logo{display:inline-flex}

/* 1단 메뉴 */
.wux-menu{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin:0;padding:0;list-style:none;gap:2px}
.wux-mi{position:relative;list-style:none;margin:0;flex:none}
.wux-mi.is-over,.wux-dup{display:none}
.wux-dup.is-on{display:list-item}
html body .wux-menu .wux-top,.wux-dd>summary{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border-radius:10px;color:#1f2933;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;list-style:none;background:none}
.wux-dd>summary::-webkit-details-marker{display:none}
.wux-dd>summary::marker{content:""}
html body .wux-menu .wux-top:hover,.wux-dd>summary:hover,.wux-dd[open]>summary{background:#eef4fa;color:#185a89}
.wux-car{transition:transform .15s;flex:none}
.wux-dd[open]>summary .wux-car{transform:rotate(180deg)}
.wux-panel{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:1001;min-width:220px;padding:8px;background:#fff;border:1px solid #d9e2ec;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.16)}
.wux-panel-r{inset-inline-start:auto;inset-inline-end:0}
.wux-panel ul{list-style:none;margin:0;padding:0}
html body .wux-panel a,html body .wux-drawer a{color:#1f2933;text-decoration:none}
.wux-panel .wux-l{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:8px;font-size:15px;white-space:nowrap}
.wux-panel .wux-l:hover,.wux-panel .wux-l:focus{background:#eef4fa}
.wux-mega{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;width:min(720px,calc(100vw - 32px));padding:16px}
.wux-ph{margin:0 0 6px;color:#52606d;font-size:13px;font-weight:700;letter-spacing:.02em}
.wux-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
.wux-cats li{display:flex;flex-wrap:wrap;align-items:center}
.wux-cats>li>a{flex:1 1 auto;display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 8px;border-radius:8px;font-size:15px}
.wux-cats>li>a:hover{background:#eef4fa}
.wux-cnt{color:#52606d;font-size:13px}
.wux-sub{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:none;color:#52606d;cursor:pointer}
.wux-sub:hover{background:#eef4fa}
.wux-sub[aria-expanded=true] .wux-car{transform:rotate(180deg)}
.wux-cats-sub{grid-column:1/-1;display:block;flex-basis:100%;margin:0 0 6px;margin-inline-start:12px;padding-inline-start:8px;border-inline-start:2px solid #d9e2ec}
.wux-cats-sub a{display:flex;gap:6px;min-height:36px;align-items:center;padding:4px 8px;font-size:14px}
.wux-cats-sub .wux-all{font-weight:600;color:#185a89!important}
.wux-mega-links ul{display:grid;gap:2px}
.wux-mega-all{display:inline-flex;margin-top:10px;min-height:44px;align-items:center;padding:0 12px;font-weight:700;color:#185a89!important}

/* 유틸리티 */
.wux-utils{display:flex;align-items:center;gap:2px;margin-inline-start:auto;flex:none}
.wux-util-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.wux-util-list>li{list-style:none;margin:0}
html body .wux-lang-btn.wux-ib{width:auto;grid-auto-flow:column;gap:6px;padding:0 10px}
.wux-lang-name{font-size:14px;font-weight:600;white-space:nowrap}
.wux-badge-n{position:absolute;top:4px;inset-inline-end:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#b42318;color:#fff;font-size:13px;font-weight:700;line-height:18px;text-align:center}
html body .wux-hd-login{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin-inline-start:4px;border-radius:999px;background:#1f6fa8;color:#fff!important;font-weight:700;text-decoration:none;white-space:nowrap}
html body .wux-hd-login:hover{background:#185a89}
.wux-utils .wux-acct-menu{top:calc(100% + 8px)}

@media (max-width:1279px){.wux-lang-name{display:none}}
@media (max-width:1023px){
  .wux-burger{display:inline-grid!important}
  .wux-logo{display:inline-flex}
}
@media (max-width:767px){
  .wux-menu{display:none}
  .wux-lang-btn{display:none!important}
  .wux-utils{gap:0}
  .wux-utils .wux-acct-name,.wux-utils .wux-caret{display:none}
  .wux-utils .wux-acct-btn{padding:4px;border:0}
  html body .wux-hd-login{padding:0 12px}
  .wux-logo{margin:0 auto}
  .wux-logo img{height:28px}
}
@media (max-width:359px){.wux-utils .wux-a11y-item{display:none}}
/* JS 없을 때 1024 미만: 1단은 전부 "더보기"로 */
@media (max-width:1023px){html:not(.wux-js) .wux-mi:not(.wux-more-li){display:none}html:not(.wux-js) .wux-dup{display:list-item}}

/* 드로어 */
html.wux-lock,html.wux-lock body{overflow:hidden}
html.wux-lock body{position:fixed;left:0;right:0;width:100%}
.wux-drawer{position:fixed;inset:0;z-index:100002;background:rgba(15,23,42,.5)}
.wux-drawer[hidden],.wux-search[hidden]{display:none!important}
.wux-drawer-p{position:absolute;top:0;inset-inline-start:0;bottom:0;width:min(400px,92vw);overflow-y:auto;overflow-x:hidden;padding:12px 16px 32px;background:#fff;color:#1f2933;font-size:16px;line-height:1.5;box-shadow:8px 0 32px rgba(15,23,42,.25);animation:wux-in .2s ease-out}
@keyframes wux-in{from{opacity:.4}to{opacity:1}}
.wux-drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wux-drawer-h{margin:0;font-size:18px}
.wux-dcard{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;padding:12px;margin-bottom:12px;border:1px solid #d9e2ec;border-radius:12px}
.wux-dcard img,.wux-dcard-ini{width:44px;height:44px;border-radius:50%;object-fit:cover}
.wux-dcard-ini{display:inline-grid;place-items:center;background:#1f6fa8;color:#fff;font-weight:700}
.wux-dcard div{display:flex;flex-direction:column}
.wux-dcard div span{color:#52606d;font-size:14px}
.wux-dcard .wux-btn{grid-column:1/-1}
.wux-dcard-guest{grid-template-columns:1fr 1fr}
.wux-dsearch{display:flex;gap:6px;margin-bottom:12px}
.wux-dsearch input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid #9aa5b1;border-radius:10px;font-size:16px}
.wux-dmenu{list-style:none;margin:0;padding:0;border-top:1px solid #e4e7eb}
.wux-dmenu>li{border-bottom:1px solid #e4e7eb;list-style:none}
.wux-dmenu>li>.wux-l,.wux-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 4px;font-weight:600;font-size:16px;cursor:pointer;list-style:none}
.wux-acc>summary::-webkit-details-marker{display:none}
.wux-acc[open]>summary .wux-car{transform:rotate(180deg)}
.wux-acc-b{padding:0 0 12px;padding-inline-start:8px}
.wux-acc-b .wux-cats{grid-template-columns:1fr}
.wux-acc-links{list-style:none;margin:8px 0 0;padding:0}
.wux-acc-links .wux-l{display:flex;align-items:center;min-height:44px;padding:4px 8px}
.wux-dutil{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* 검색 오버레이 */
.wux-search{position:fixed;inset:0;z-index:100002;background:rgba(15,23,42,.5);padding:72px 16px 16px}
.wux-search-p{max-width:720px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(15,23,42,.3);overflow:hidden}
.wux-search-f{display:flex;align-items:center;gap:4px;padding:8px;border-bottom:1px solid #e4e7eb}
.wux-search-f input{flex:1;min-width:0;min-height:48px;padding:8px 12px;border:0;font-size:18px;background:transparent;color:#1f2933}
.wux-search-f input:focus{outline:none}
.wux-search-f:focus-within{box-shadow:inset 0 -3px 0 #f59e0b}
.wux-sugg{list-style:none;margin:0;padding:6px;max-height:min(60vh,520px);overflow-y:auto}
.wux-sugg-h{padding:8px 10px 4px;color:#52606d;font-size:13px;font-weight:700}
.wux-o{display:flex;gap:12px;align-items:center;min-height:48px;padding:6px 10px;border-radius:10px;cursor:pointer}
.wux-o img{width:40px;height:56px;object-fit:cover;border-radius:4px;background:#eef2f6;flex:none}
.wux-o[aria-selected=true],.wux-o:hover{background:#eef4fa;outline:2px solid #1f6fa8}
.wux-o-b{display:flex;flex-direction:column;min-width:0}
.wux-o-t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wux-o-m{color:#52606d;font-size:14px}
.wux-sugg-clear{margin:4px 10px 8px;min-height:44px;padding:0 12px;border:1px solid #d9e2ec;border-radius:10px;background:#fff;color:#1f2933;cursor:pointer}

@media (prefers-reduced-motion:reduce){.wux-nav-in,.wux-car,.wux-drawer-p{transition:none!important;animation:none!important}}
html.wux-motion .wux-drawer-p{animation:none}
/* 메가 패널 격자가 행 높이를 늘려 링크 간격이 60px 로 벌어졌다(실측) — 위로 붙인다 */
.wux-mega,.wux-mega-col,.wux-cats,.wux-mega-links ul{align-content:start;align-items:start}
.wux-cats>li{align-self:start}
/* NAV-07: 삼국지 365 화면 안의 별도 언어 선택기(5개 언어, ?lang=) — 전역 언어(헤더 🌐, wia-nav-lang 쿠키·저장값)를 그 플러그인도 따른다
   (class-shortcode.php:20-21, 2026-10-10 ja·en·fr 실측) → 새 헤더가 있을 때만 숨긴다 */
.wux-hd .wia-sg365-lang-toggle{display:none!important}
/* 드로어 링크색 규칙(#1f2933)이 버튼 글자까지 덮었다(실측: "내 서재" 대비 부족) */
html body .wux-drawer a.wux-btn-primary,html body .wux-drawer .wux-btn-primary{background:#1f6fa8;color:#fff!important}
html body .wux-drawer a.wux-btn:not(.wux-btn-primary){color:#185a89}
/* 검색 후보: 키보드 선택(aria-selected)만 테두리, 마우스 올림은 배경만 — 두 줄이 동시에 선택돼 보였다 */
.wux-o:hover{outline:0}
.wux-o[aria-selected=true]{outline:2px solid #1f6fa8}
/* 좁은 폭: 로고가 줄어들어 자리를 내준다(아랍어 375px 에서 "로그인" 글자가 길어 유틸이 화면 밖으로 밀렸다) */
@media (max-width:767px){.wux-logo{flex:0 1 auto;min-width:0;overflow:hidden}.wux-logo img{max-width:100%;height:auto;max-height:28px;object-fit:contain}html body .wux-hd-login{max-width:40vw;overflow:hidden;text-overflow:ellipsis}}
/* 이 사이트는 요소가 content-box 라 min-height 44 + padding 이 60px 이 됐다(실측) — 새 부품은 border-box */
.wux-nav,.wux-nav *,.wux-drawer,.wux-drawer *,.wux-search,.wux-search *{box-sizing:border-box}

/* deep-QA(Phase 3) */
/* 스티키가 768px 이하에서 죽었다: mu-plugins/wiabook-seo.php:274 의 @media(max-width:768px){html,body{overflow-x:hidden!important}}
   — overflow-x:hidden 은 스크롤 상자를 만들어 position:sticky 를 끊는다. clip 은 가로 넘침만 자르고 sticky 를 살린다. 특이도를 올려 이긴다. */
@media (max-width:768px){html:root,html body{overflow-x:clip!important}}
html.wux-lock:root,html.wux-lock body{overflow:hidden!important}
/* 고정 헤더가 앵커·포커스 요소를 가리지 않게(#wia-download-files 등) */
html{scroll-padding-top:80px}
html:has(body.admin-bar){scroll-padding-top:112px} /* scroll-padding 은 루트에서만 먹는다 */
/* JS 꺼짐 + 768 미만: 햄버거(JS)는 못 쓰니 "더보기"를 보이고 1단 전부를 그 안 복제본으로 */
@media (max-width:767px){html:not(.wux-js) .wux-menu{display:flex;flex:0 1 auto}html:not(.wux-js) .wux-mi:not(.wux-more-li){display:none}html:not(.wux-js) .wux-burger{display:none!important}}
/* 검색 목록 밖으로 옮긴 머리글·지우기 */
p.wux-sugg-h{margin:0;padding:10px 16px 0}
.wux-search-p>.wux-sugg-clear{margin:0 16px 12px}
@media print{.wux-nav{position:static;border:0}.wux-utils,.wux-burger,.wux-more-li,.wux-drawer,.wux-search{display:none!important}}