/* 글로벌 네비 — 좌측 로고 + 우측 메뉴 드롭다운 (auth-widget 은 JS 가 우측 끝에 추가)
   2026-05 개편: 가로 스크롤 quick-link 폐지. 모든 메뉴는 드롭다운 안.  */

/* === Layout 토대 (모든 viewport) === */

/* 로고와 메뉴 드롭다운 사이 공간 흡수 — 드롭다운을 우측으로 밀어냄. */
.global-nav .nav-spacer { flex: 1; min-width: 0; }

/* nav-links 컨테이너 — 이제 드롭다운만 담음. 가로 스크롤·mask 불요.
   ⚠️ 21 페이지 인라인 CSS 에 overflow-x: auto 가 남아 있어 드롭다운 패널을
   클립함. !important 로 강제 override — 인라인 정리 전까지 필수.  */
.global-nav .nav-links {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  overflow: visible !important;
  overflow-x: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  scroll-snap-type: none !important;
}

/* === <details> 드롭다운 === */
.global-nav .nav-menu {
  position: relative;
  flex-shrink: 0;
  z-index: 310;
}

.global-nav .nav-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.global-nav .nav-menu > summary::marker { content: ""; font-size: 0; }
.global-nav .nav-menu > summary::-webkit-details-marker { display: none; }

/* 트리거 — pill 형 보더, 호버 시 골드 톤. !important 는 인라인 CSS
   override 보장용 (각 페이지 인라인에 .nav-menu-trigger 가 따로 있는 경우).  */
.global-nav .nav-links .nav-menu-trigger {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  color: var(--text, #e8e8f0);
  background: transparent;
  border: 1px solid var(--line, #1f1f33);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
  white-space: nowrap;
  transition: all 0.15s;
}
.global-nav .nav-links .nav-menu-trigger::before {
  content: none !important;  /* 이전 □ 모양 박스 아이콘 잔재 차단 */
}

.global-nav .nav-links .nav-menu-trigger:hover,
.global-nav .nav-links .nav-menu[open] .nav-menu-trigger {
  background: var(--bg-2, #0e0e1a);
  border-color: var(--gold-soft, rgba(212, 168, 87, 0.55));
  color: var(--gold, #d4a857);
}

/* === 패널 — 우측 정렬, 좌측 확장 === */
.global-nav .nav-links .nav-menu .nav-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0; left: auto;
  width: min(320px, calc(100vw - 24px));
  max-height: min(72vh, 600px);
  overflow: auto;
  z-index: 300;
  padding: 10px;
  background: rgba(14, 14, 26, 0.98);
  border: 1px solid var(--line, #1f1f33);
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
  display: block;
}

.global-nav .nav-links .nav-menu:not([open]) .nav-menu-panel {
  display: none !important;
}

/* 그룹 구분 — 입문/자가진단/읽을거리 */
.nm-group { padding: 6px 0; }
.nm-group + .nm-group {
  border-top: 1px solid var(--line, #1f1f33);
  margin-top: 4px;
  padding-top: 10px;
}
.nm-group-title {
  font-family: "Nanum Myeongjo", serif;
  color: var(--gold, #d4a857);
  font-size: 10.5px; letter-spacing: 3px;
  padding: 4px 10px 6px;
}

/* 패널 안 a 태그 — 인라인 .nav-links a 스타일(padding·white-space·font)을
   덮어쓰기 위해 더 깊은 선택자 + !important.  */
.global-nav .nav-links .nav-menu .nav-menu-panel a {
  display: block !important;
  padding: 8px 10px !important;
  border-radius: 6px;
  color: var(--text, #e8e8f0) !important;
  text-decoration: none;
  font-size: 13.5px !important; line-height: 1.4;
  white-space: normal !important;
  min-height: auto !important;
  scroll-snap-align: none !important;
  transition: background 0.12s;
}

.global-nav .nav-links .nav-menu .nav-menu-panel a:hover {
  background: rgba(212, 168, 87, 0.10) !important;
  color: var(--gold, #d4a857) !important;
}

/* === 모바일 (≤540px) === */
@media (max-width: 540px) {
  .global-nav { padding: 8px 12px; gap: 8px; }
  .global-nav .nav-logo { font-size: 14px; }
  .global-nav .nav-mark { width: 16px; height: 16px; }

  .global-nav .nav-links .nav-menu-trigger {
    font-size: 13px;
    padding: 8px 14px;
    min-height: 36px;
  }

  /* 모바일에선 패널을 화면 양쪽 12px 마진으로 fixed 배치 */
  .global-nav .nav-links .nav-menu .nav-menu-panel {
    position: fixed;
    top: 54px;
    left: 12px; right: 12px;
    width: auto;
    max-height: min(72vh, 520px);
  }
}

/* === 폼 라벨·인풋 터치 영역 보강 — 모바일에서 label/input 간격 확보. === */
@media (max-width: 540px) {
  .field label {
    padding: 0 0 6px 0;
    pointer-events: none;  /* 라벨이 input 클릭을 가로채지 않도록 */
  }
  .field input,
  .field select,
  .field textarea {
    padding: 12px 14px;
    font-size: 16px;  /* iOS Safari 자동 줌인 방지 */
  }
}