/* 공용 상단 내비게이션(메가메뉴 포함) — 허브(main/index.html)와 모든 훈련 모듈이 동일하게 사용
   (2026-07-23 헤더/푸터 통일). 훈련 모듈에서 플레이 중 이 nav의 실제 이동 링크를 클릭하면
   그만하기 확인창을 먼저 띄우는 처리는 각 모듈 js가 document 클릭 위임으로 담당한다.

   sticky는 이 요소가 직접 지지 않는다 — .season-strip이 있는 화면은 그 바로 아래 붙어야 해서
   두 요소를 함께 감싸는 .site-sticky-head(shared/css/season-strip.css)가 대신 진다. 여기서
   또 sticky를 걸면 같은 결과를 두 번 계산하게 될 뿐이라 z-index만 유지한다(드롭다운 메뉴가
   페이지 콘텐츠 위에 뜨려면 이 요소가 포지셔닝 컨텍스트여야 한다). season-strip이 없는 화면
   (로그인·회원가입 등)은 nav.top이 곧 맨 위 요소이므로 이 규칙만으로 여전히 상단 고정된다. */
nav.top { padding: 14px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 51; }
.site-sticky-head nav.top { position: relative; top: auto; }
nav.top .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }

.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.brand .mark { height: 32px; width: auto; display: block; flex-shrink: 0; }
.brand .sub { display: flex; align-items: center; padding-left: 12px; border-left: 1px solid var(--line); line-height: 1; }
.brand .sub-logo { height: 26px; width: auto; display: block; }

nav.top .row > ul { display: flex; list-style: none; gap: 32px; font-size: 15px; }
nav.top ul > li { position: relative; }
nav.top ul a { color: var(--text); font-weight: 600; }
nav.top ul a:hover, nav.top ul a.active { color: var(--primary); }
nav.top ul a.is-soon { opacity: .5; cursor: default; }
nav.top ul a.is-soon:hover { color: var(--text); }
/* margin-left는 0 — 좌측을 음수로 잡으면 이 pill의 히트박스가 왼쪽 li 쪽으로 파고들어
   "클래스"와의 간격만 다른 메뉴 항목 사이 gap(32px)보다 좁아 보이는 문제가 있었음. */
nav.top ul a.mensa-link { color: var(--primary); padding: 6px 14px; margin: -6px -14px -6px 0; border-radius: 999px; background: transparent; }
nav.top ul a.mensa-link:hover { background: var(--primary); color: #fff; }
.soon-tag { font-size: 10px; font-weight: 700; color: var(--text-mute); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; margin-left: 5px; vertical-align: 2px; }

/* 2뎁스 — "대회"·"멘사코리아" 두 항목만 보유. 각자 li에 마우스를 올렸을 때만 그 아래 작은
   드롭다운이 뜨는 통상적인 방식(과거의 전체너비 메가메뉴 방식은 폐기, 2026-07-24). */
.nav-caret { width: 10px; height: 7px; margin-left: 4px; vertical-align: 1px; transition: transform .15s ease; }
nav.top ul > li:hover > a > .nav-caret { transform: rotate(180deg); }
/* margin 없이 li 바로 아래 딱 붙임(top:100%) — 예전에 margin-top으로 여백을 뒀더니 그 틈에서
   마우스가 li 밖으로 벗어나 hover가 풀리면서 드롭다운으로 못 내려가는 문제가 있었음.
   여백은 margin 대신 padding-top으로 박스 안쪽에 줘서, 그 여백 구간도 계속 hover 판정에 들어가게 함. */
.dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 14px 8px 8px; min-width: 180px;
  list-style: none; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
nav.top ul > li:hover > .dropdown-menu { display: block; }
.dropdown-menu li a { display: block; padding: 8px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.dropdown-menu li a:hover { color: var(--primary); background: var(--bg); }
.dropdown-menu li a.is-soon { opacity: .45; cursor: default; }
.dropdown-menu li a.is-soon:hover { color: var(--text); background: transparent; }
.ext-ic { font-size: 11px; opacity: .5; margin-left: 2px; }

/* "대회"는 경쟁/포인트 전용 액센트(--game, 주황)를 상시 적용해 다른 메뉴와 구분되게 강조
   (2026-08-10 PM 지시). 점수·랭킹·등급에 쓰던 토큰을 그대로 재사용 — 새 색 정의 안 함. */
nav.top ul > li.nav-competition > a { color: var(--game); }
nav.top ul > li.nav-competition > a:hover { color: var(--game-dark); }
.nav-competition .dropdown-menu li a { color: var(--game); }
.nav-competition .dropdown-menu li a:hover { color: var(--game-dark); background: var(--game-pale); }

/* 모바일 전용 계정 묶음(li.nav-mobile-account) — 데스크톱에서는 항상 숨김, 860px 이하에서만
   .nav-mobile-account 규칙(아래)이 다시 보이게 함(2026-08-05 PM 지시). */
.nav-mobile-account { display: none; }

.login-row { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
/* 헤더 버튼(로그인·로그아웃·무료로 훈련하기)은 사이트 기본 CTA 버튼(.btn)보다 작아야 자연스럽다
   — 여기서만 크기를 줄인다(2026-08-05 PM 지시: "버튼이 너무 커 보인다"). */
.login-row .btn { padding: 9px 18px; font-size: 13.5px; }
/* 로그인 상태의 회원 이름 링크는 로그아웃·무료훈련하기 버튼과 나란히 두면 "버튼 3개 나열"처럼
   무거워 보여 버튼 스타일을 빼고 가벼운 텍스트 링크로 둔다(비로그인 "로그인"·비회원조회 "마이페이지"는
   버튼 옆에 딱 하나뿐이라 버튼형 유지). */
.login { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.login:hover { color: var(--primary); }
.login-row .ic { display: none; width: 18px; height: 18px; flex-shrink: 0; }
/* 회원명 앞 등급 배지 — 마이페이지 누적 레벨 배지와 같은 이미지(assets/images/level/*.png) */
.login-badge { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
/* 로그인 상태의 회원 이름 — 클릭하면 마이페이지로 이동한다는 걸 알 수 있도록 강조색을 준다.
   이름은 최대 60자까지 허용되므로(회원가입 검증 기준) 긴 이름이 헤더를 밀어내지 않도록 자른다. */
.login-name { color: var(--primary); font-weight: 800; display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* 햄버거 버튼 — 기본 숨김, 860px 이하에서만 노출(js/nav-toggle.js가 열고 닫음) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* ⚠️ 반드시 "nav.top .row > ul" 셀렉터로 써야 함 — 12행의 기본 표시 규칙과 동일한 특이도라야
     이 display:none이 실제로 이김(특이도가 낮은 "nav.top ul"로 썼다가 기본 규칙에 밀려 계속
     펼쳐진 채로 안 닫히는 버그가 있었음). */
  nav.top .row > ul {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    flex-direction: column; gap: 0; margin: 0; padding: 8px 20px 16px; list-style: none;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.1);
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  nav.top .row > ul.is-open { display: flex; }
  nav.top ul > li { width: 100%; }
  nav.top ul a { display: flex; align-items: center; padding: 12px 0; }
  /* 데스크톱에서 pill 모양을 만들던 마진/패딩(-6px -14px 0 등)이 특이도가 더 높아 위 규칙을
     이겨버려서, 세로로 나열되는 모바일 목록에서 "멘사코리아"만 정렬이 어긋나 보였음 — 모바일은
     리스트라 pill이 필요 없으니 다른 항목과 동일하게 초기화. */
  nav.top ul a.mensa-link { padding: 12px 0; margin: 0; border-radius: 0; }
  /* 모바일은 호버/탭 인터랙션이 없이 2뎁스를 색상 배경으로 구분해 항상 펼쳐 보여줌 — 화살표는
     "펼치고 접는" 동작이 없어졌으므로 모바일에서는 의미가 없어 숨김. */
  .nav-caret { display: none; }
  .dropdown-menu { position: static; display: block; margin: 2px 0 6px; padding: 4px 14px; min-width: 0; border: none;
    box-shadow: none; background: var(--bg); border-radius: var(--radius-md); }
  .dropdown-menu li a { padding: 10px 0; color: var(--text-dim); font-weight: 500; }

  /* 마이페이지·로그인·로그아웃·무료훈련은 헤더 우측 대신 햄버거 메뉴 맨 위로 이동해서 보여준다
     (2026-08-05 PM 지시 — 좁은 화면에서 헤더가 복잡해 보임). 헤더의 .login-row는 숨기고,
     .nav-mobile-account를 목록 첫 항목으로 노출 + 세로로 쌓아 각 버튼을 꽉 채운다. */
  .login-row:not(.login-row--mobile) { display: none; }
  .nav-mobile-account { display: block; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 10px; }
  .login-row--mobile { flex-direction: column; align-items: stretch; gap: 8px; }
  .login-row--mobile .login, .login-row--mobile .btn { width: 100%; justify-content: center; }
  .login-row--mobile .ic { display: block; }
}
/* 모바일: 로고 한 줄 유지가 우선 */
@media (max-width: 480px) {
  nav.top .row { flex-wrap: nowrap; }
  .brand { flex-wrap: nowrap; }
  .brand .mark { height: 24px; }
  .brand .sub-logo { height: 18px; }
  .brand .sub { padding-left: 6px; }
}