/* ─────────────────────────────────────────────────────────────
   우측 날개(햄버거) 메뉴 — 전 페이지 공통
   마크업은 tools/nav.html 한 곳에서 관리하고 tools/build_nav.py 가 각 페이지에 넣는다.
   기존 .navlinks(상단 링크 묶음)·.mobile-drawer 와 겹치지 않도록 wing- 접두사를 쓴다.
   ───────────────────────────────────────────────────────────── */
.wing-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:240;}
.wing-overlay.open{display:block;}
.wing{display:none;position:fixed;top:0;right:0;bottom:0;
  width:min(260px,78vw);background:#16282B;
  flex-direction:column;align-items:stretch;padding:0 0 24px;
  box-shadow:-6px 0 28px rgba(0,0,0,.2);overflow-y:auto;z-index:250;}
.wing.open{display:flex;}
.wing-head{position:relative;display:flex;align-items:center;justify-content:flex-end;
  padding:44px 16px 22px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:6px;}
.wing-head img{height:110px;opacity:.5;}
.wing-close{position:absolute;top:12px;right:16px;background:none;border:none;color:#fff;
  font-size:24px;line-height:1;cursor:pointer;padding:4px;}
.wing-close:hover{color:rgba(255,255,255,.65);}

.wing-links{display:flex;flex-direction:column;gap:2px;padding:10px 16px 6px;}
.wing-drop{position:relative;}
.wing-drop>a,.wing-plain{display:block;padding:10px 0;font-size:15px;font-weight:400;
  color:rgba(255,255,255,.85);text-decoration:none;transition:.15s;}
.wing-drop>a:hover,.wing-plain:hover{color:#fff;}

/* 날개가 화면 우측 끝에 붙어 있어 서브메뉴를 트리거 기준으로 절대배치하면 화면 밖으로 나간다.
   position:fixed 로 두고 nav.js 가 트리거의 실제 좌표를 재서 화면 안으로 넣는다. */
.wing-flyout{display:flex;flex-direction:column;position:fixed;top:0;left:0;margin:0;
  background:rgba(0,0,0,.85);box-shadow:0 18px 36px rgba(0,0,0,.35);
  width:max-content;min-width:180px;max-width:260px;padding:6px;z-index:260;
  opacity:0;visibility:hidden;transform:scale(.98);transform-origin:top left;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none;}
.wing-flyout a{display:block;padding:10px 14px;font-size:14px;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;color:#fff;transition:background .15s,color .15s;}
.wing-flyout a:hover{background:rgba(255,255,255,.12);color:#8FBFA0;}
.wing-drop:hover .wing-flyout{opacity:1;visibility:visible;transform:scale(1);pointer-events:auto;}

/* 좁은 화면 — 옆으로 띄우면 잘리고 호버도 안 먹으므로 항목 아래로 펼치는 아코디언으로 바꾼다 */
@media(max-width:520px){
  .wing-flyout{position:static;left:auto;top:auto;margin:0;max-width:none;min-width:0;
    opacity:0;visibility:hidden;max-height:0;overflow:hidden;transform:none;pointer-events:auto;
    transition:max-height .22s ease;box-shadow:none;background:rgba(0,0,0,.25);padding:0;}
  .wing-flyout a{padding:9px 14px;font-size:13.5px;white-space:normal;}
  .wing-drop.open .wing-flyout{opacity:1;visibility:visible;max-height:400px;margin-bottom:4px;padding:6px;}
}

.wing-cat{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);margin-top:6px;}
.wing-cat-title{color:#fff;font-size:17px;font-weight:800;margin-bottom:12px;}
.wing-cat-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.wing-cat-links a{font-size:15px;font-weight:400;color:rgba(255,255,255,.72);
  text-decoration:none;transition:.15s;}
.wing-cat-links a:hover{color:#fff;}