/* ============================================================
   gnb.css — 과금 중심형 메가메뉴 (GNB)
   2단 헤더(상단 바 + 메뉴 바), 데스크탑 hover 드롭다운/메가패널,
   모바일(<992px) 풀스크린 아코디언. 토큰은 시네마 프리미엄 테마 재사용.
   ============================================================ */

.gnb { position: sticky; top: 0; z-index: 300;
  background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line); transition: background .4s var(--ease); }
@supports not (backdrop-filter: blur(1px)) { .gnb { background: var(--bg); } }
.gnb.scrolled { background: color-mix(in oklab, var(--bg) 97%, transparent); }

/* ---- 상단 바 (nav_top) ---- */
.gnb-top { border-bottom: 1px solid var(--line); }
.gnb-top-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px,4vw,60px);
  height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.gnb-top a.tlink { font-size: 12.5px; color: var(--muted); transition: color .2s var(--ease); }
.gnb-top a.tlink:hover { color: var(--ink); }
.gnb-top .pt { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.gnb-top .pt b { color: var(--gold); font-weight: 600; }
.gnb-top .tdivider { width: 1px; height: 14px; background: var(--line-2); }
.badge-vip { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink);
  background: var(--accent); border-radius: var(--r-xs); padding: 2px 6px; line-height: 1; }
/* 성인인증만 통과한 비로그인 = 게스트(헤어라인 칩, accent 미사용). 클릭 시 게스트 로그아웃. */
.badge-guest { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-xs); padding: 3px 8px; line-height: 1.4;
  text-decoration: none; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
a.badge-guest:hover { color: var(--accent-hi); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.badge-guest span { font-size: 11px; opacity: .8; }

/* user dropdown (로그인 시) */
.gnb-user { position: relative; }
.gnb-user .uname { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); background: none; border: 0; padding: 6px 4px; }
.gnb-user .uname:hover { color: var(--accent-hi); }
.gnb-user-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: var(--bg-3);
  border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); z-index: 40; }
.gnb-user.open .gnb-user-menu { opacity: 1; transform: none; pointer-events: auto; }
/* 트리거↔메뉴 사이 6px 간격을 투명 브리지로 메움 — 마우스가 메뉴로 내려갈 때 mouseleave 로 닫히는 문제 방지 */
.gnb-user-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.gnb-user-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 13px; color: var(--ink-soft); border-radius: var(--r-sm); }
.gnb-user-menu a:hover { background: var(--bg-4); color: var(--ink); }
.gnb-user-menu .sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* ---- 메뉴 바 (nav_menu) ---- */
.gnb-main { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px,4vw,60px);
  height: 66px; display: flex; align-items: center; gap: clamp(14px,2.4vw,34px); }
.gnb-logo { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.gnb-logo .logo-mark { width: 34px; height: 34px; }

.gnb-menu { display: flex; align-items: stretch; gap: clamp(4px,1.4vw,20px); list-style: none; margin: 0; padding: 0; height: 100%; }
.gnb-menu > li { position: relative; display: flex; align-items: center; }
.gnb-link { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 4px; background: none; border: 0;
  font-size: 15px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; position: relative; transition: color .2s var(--ease); cursor: pointer; }
.gnb-link:hover, .gnb-menu > li.open .gnb-link, .gnb-link.active { color: var(--ink); }
.gnb-link .sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; padding: 2px 5px; border-radius: var(--r-xs); line-height: 1; }
.gnb-link .sub.vip { color: var(--accent-hi); border: 1px solid color-mix(in oklab,var(--accent) 45%,transparent); }
.gnb-link .sub.pt { color: var(--gold); border: 1px solid color-mix(in oklab,var(--gold) 42%,transparent); }
.gnb-link .caret { transition: transform .2s var(--spring); color: var(--muted); }
.gnb-menu > li.open .gnb-link .caret { transform: rotate(180deg); }
.gnb-link::after { content:""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .24s var(--spring); }
.gnb-link.active::after, .gnb-menu > li.open .gnb-link::after { transform: scaleX(1); }

/* dropdown (A/B) */
.gnb-dd { position: absolute; left: -10px; top: calc(100% + 4px); min-width: 248px;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: 0 28px 70px -30px rgba(0,0,0,.9); padding: 8px; z-index: 50;
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s var(--ease), transform .2s var(--ease); }
.gnb-menu > li.open .gnb-dd { opacity: 1; transform: none; pointer-events: auto; }
.gnb-dd .dd-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.gnb-dd .dd-head .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gnb-dd .dd-head a { font-size: 11.5px; color: var(--accent-hi); }
.gnb-dd a.dd-item { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: var(--r-sm); color: var(--ink-soft); transition: background .16s var(--ease), color .16s; }
.gnb-dd a.dd-item:hover { background: var(--bg-4); color: var(--ink); }
.gnb-dd a.dd-item .nm { font-size: 14px; font-weight: 500; }
.gnb-dd a.dd-item .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.tag { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .03em; line-height: 1; padding: 3px 6px; border-radius: var(--r-xs); }
.tag-vip { background: var(--accent); color: var(--accent-ink); }
.tag-point { background: var(--gold); color: #20180c; }

/* megapanel (C 큐레이션) */
.gnb-mega { position: fixed; left: 0; right: 0; top: auto; z-index: 50;
  background: var(--bg-3); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .2s var(--ease), transform .22s var(--ease); }
.gnb-menu > li.open .gnb-mega { opacity: 1; transform: none; pointer-events: auto; }
.gnb-mega-inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(20px,2.4vw,30px) clamp(16px,4vw,60px); }
.gnb-mega-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.gnb-mega-head .eyebrow { color: var(--accent-hi); }
.gnb-mega-head h3 { font-size: 20px; }
.gnb-mega-head .all { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }
.gnb-mega-head .all:hover { color: var(--accent-hi); }
.mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (max-width: 1200px) { .mega-grid { grid-template-columns: repeat(4, 1fr); } }
.mega-cell { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: var(--r-sm); border: 1px solid transparent; color: var(--ink-soft); transition: background .16s var(--ease), border-color .16s, color .16s; }
.mega-cell:hover { background: var(--bg-2); border-color: var(--line-2); color: var(--ink); }
.mega-cell .rank { font-family: var(--font-mono); font-size: 10px; color: var(--faint); width: 18px; flex: 0 0 auto; }
.mega-cell:hover .rank { color: var(--accent-hi); }
.mega-cell .nm { font-size: 13.5px; line-height: 1.3; }
.mega-cell .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); flex: 0 0 auto; }

/* ---- actions (검색 + 포인트구매) ---- */
.gnb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.gnb-search { display: flex; align-items: center; height: 40px; border-radius: var(--r-sm); }
.gnb-search form { display: flex; align-items: center; height: 40px; background: var(--bg-2); border: 1px solid transparent;
  border-radius: var(--r-sm); overflow: hidden; transition: border-color .2s var(--ease), background .2s, width .28s var(--spring); width: 40px; }
.gnb-search.open form { width: clamp(180px, 22vw, 280px); border-color: var(--line-2); background: var(--bg-3); }
.gnb-search.open form:focus-within { border-color: var(--accent); }
.gnb-search .sbtn { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--ink-soft); flex: 0 0 auto; }
.gnb-search .sbtn:hover { color: var(--ink); }
.gnb-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 14px; outline: none; padding-right: 10px; width: 0; opacity: 0; transition: opacity .2s; }
.gnb-search.open input { width: auto; opacity: 1; }
.gnb-search input::placeholder { color: var(--faint); }

/* ---- 햄버거 / 모바일 ---- */
.gnb-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg-2); color: var(--ink); place-items: center; flex: 0 0 auto; }
.gnb-burger span, .gnb-burger span::before, .gnb-burger span::after { content:""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--spring), opacity .2s; }
.gnb-burger span { position: relative; }
.gnb-burger span::before { position: absolute; top: -6px; }
.gnb-burger span::after { position: absolute; top: 6px; }

.gnb-mobile { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.gnb-mobile.open { opacity: 1; pointer-events: auto; }
.gnb-mobile-top { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px,5vw,24px); border-bottom: 1px solid var(--line); }
.gnb-mobile-close { width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2); color: var(--ink); display: grid; place-items: center; }
.gnb-mobile-body { flex: 1; overflow-y: auto; padding: 18px clamp(16px,5vw,24px) 24px; }
.gnb-msearch form { display: flex; align-items: center; height: 50px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 6px 0 14px; margin-bottom: 20px; }
.gnb-msearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: 15px; outline: none; }
.gnb-msearch button { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--ink-soft); }

.macc { border-top: 1px solid var(--line); }
.macc-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 18px 2px; background: none; border: 0; color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 600; text-align: left; }
.macc-row .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 2px 6px; border-radius: var(--r-xs); }
.macc-row .sub.vip { color: var(--accent-hi); border: 1px solid color-mix(in oklab,var(--accent) 45%,transparent); }
.macc-row .sub.pt { color: var(--gold); border: 1px solid color-mix(in oklab,var(--gold) 42%,transparent); }
.macc-row .pm { margin-left: auto; color: var(--muted); transition: transform .25s var(--spring); }
.macc.open .macc-row .pm { transform: rotate(45deg); color: var(--accent-hi); }
.macc-panel { overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); }
.macc.open .macc-panel { max-height: 900px; }
.macc-panel-inner { padding: 0 2px 16px; }
.macc-panel a.macc-sub { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--ink-soft); border-radius: var(--r-sm); }
.macc-panel a.macc-sub:hover, .macc-panel a.macc-sub:active { background: var(--bg-3); color: var(--ink); }
.macc-panel a.macc-sub .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.macc-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.macc-theme-grid a { display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-size: 13px; color: var(--ink-soft); border-radius: var(--r-sm); }
.macc-theme-grid a:hover { background: var(--bg-3); color: var(--ink); }
.macc-theme-grid a .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.gnb-mobile-foot { padding: 16px clamp(16px,5vw,24px) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.gnb-mobile-foot .btn { flex: 1; }

/* responsive switch @ 992px */
@media (max-width: 992px) {
  .gnb-top-inner { justify-content: space-between; }
  .gnb-menu, .gnb-actions { display: none; }
  .gnb-burger { display: grid; margin-left: auto; }
  .gnb-main { height: 60px; }
}
@media (min-width: 993px) { .gnb-mobile { display: none; } }