/* ======================================================
   공용 GNB (User Flow v2.0 — 전 페이지 상단 메뉴바 통일)
   랜딩(landing-v4.css)과 학생앱(style.css) 양쪽에서 로드됨.
   - 랜딩보다 뒤에 로드해 드롭다운 hover 갭 픽스가 우선 적용되게 한다.
   - 학생앱 전역 변수와 충돌하지 않도록 nav 스코프로만 규칙을 둔다.
   ====================================================== */

/* sticky는 래퍼(#siteGnb)에 걸어야 한다 — .gnb에 걸면 부모(#siteGnb) 높이가 자기 높이와
   같아 이동 범위가 0이 되어 고정 효과가 없다 (팀 피드백 R3 ①) */
#siteGnb { position: sticky; top: 0; z-index: 120; }
.gnb {
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #ece8df;
  font-family: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.gnb * { box-sizing: border-box; }
.gnb-inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* R3 ③: 정식 로고 이미지 (public/images/landing/brand/logo-h.png — 원본 daybykorea_logo 가로형) */
.gnb-logo { height: 24px; width: auto; display: block; }
.gnb-brand {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: 'Plus Jakarta Sans', 'Pretendard', sans-serif; font-weight: 800; font-size: 18px;
  letter-spacing: -0.01em; color: #18181b; text-decoration: none;
}
.gnb-brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, #d41500 0%, #ff4d8d 50%, #845ef7 100%);
  box-shadow: 0 8px 24px rgba(212, 21, 0, 0.25);
}
/* R4 ⑫: VI 라벨이 길어 2줄로 랩되던 문제 — nowrap + gap 축소 + 라벨 축약(vi.json) + 마이페이지 아이콘화 */
.gnb-links { display: flex; gap: 22px; align-items: center; white-space: nowrap; }
.gnb-links > a {
  font-size: 14.5px; font-weight: 500; color: #3f3f46; text-decoration: none; transition: color 0.15s;
}
.gnb-links > a:hover { color: #18181b; }
.gnb-links a.active { color: #d41500; font-weight: 700; }
.gnb-links a.gnb-soft { color: #a1a1aa; font-weight: 400; }
.gnb-links a.gnb-soft:hover { color: #3f3f46; }
.gnb-links a.gnb-soft.active { color: #71717a; font-weight: 500; }

/* 코스 드롭다운(급수/영역)은 팀 피드백 R1(2026-09-01)로 삭제 — 강의 수 늘면 재도입 예정.
   재도입 시 git 히스토리의 .gnb-dd* 규칙(hover 갭 브리지 포함)을 복원할 것. */

/* 우측: 언어 토글 + 인증 */
.gnb-right { display: flex; gap: 10px; align-items: center; }
.gnb-lang { display: inline-flex; border: 1px solid #ece8df; border-radius: 999px; overflow: hidden; }
.gnb-lang button {
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px;
  border: none; background: transparent; color: #a1a1aa; cursor: pointer;
}
.gnb-lang button.on { background: #18181b; color: #fff; }
.gnb-btn {
  display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 9px 16px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font-family: inherit; border: none; transition: transform 0.15s;
}
.gnb-btn:hover { transform: translateY(-1px); }
/* 마이페이지 아이콘 버튼 (R4 ⑫ — 텍스트 대신 아이콘) */
.gnb-mypage {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px; text-decoration: none;
  border: 1px solid rgba(24, 24, 27, 0.35); transition: transform 0.15s, background 0.15s;
}
.gnb-mypage:hover { transform: translateY(-1px); background: rgba(24, 24, 27, 0.05); }
.gnb-btn-ghost { background: transparent; color: #18181b; border: 1px solid rgba(24, 24, 27, 0.4); }
.gnb-btn-primary {
  background: linear-gradient(135deg, #d41500 0%, #ff4d8d 50%, #845ef7 100%); color: #fff;
  box-shadow: 0 8px 24px rgba(212, 21, 0, 0.2);
}

/* 901~1080px 컴팩트 구간 (리뷰 P2) — nowrap 링크 + VI 라벨이 길어 모바일 전환점(900px)
   직상단에서 브랜드가 눌리던 문제. 간격·폰트·버튼을 축소해 901px 경계에서도 로고가 원형 유지 */
@media (min-width: 901px) and (max-width: 1080px) {
  .gnb-inner { gap: 10px; padding: 14px 14px; }
  .gnb-logo { height: 20px; }
  .gnb-links { gap: 10px; }
  .gnb-links > a { font-size: 12.5px; }
  .gnb-right { gap: 6px; }
  .gnb-lang button { font-size: 11px; padding: 5px 8px; }
  .gnb-btn { font-size: 12px; padding: 8px 10px; }
  .gnb-mypage { width: 32px; height: 32px; font-size: 15px; }
  .gnb-noti .noti-bell { font-size: 16px; padding: 4px; }
}

/* 모바일 */
.gnb-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: #18181b; padding: 4px 8px; }
@media (max-width: 900px) {
  .gnb-links { display: none; }
  .gnb-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid #ece8df; padding: 12px 24px 16px;
    box-shadow: 0 12px 40px rgba(24, 24, 27, 0.08);
  }
  .gnb-links.open > a { display: block; padding: 10px 0; font-size: 15px; }
  .gnb-toggle { display: block; }
  .gnb-btn-ghost { display: none; }
  /* 모바일 회귀 수정 — 전역 .gnb-brand flex-shrink:0(901px P2)이 모바일까지 로고 축소를 막아
     우측 가입 버튼·언어 토글이 화면 밖으로 밀리던 문제(스테이징 390px 실측 docW 473).
     모바일에선 브랜드가 남는 폭에 맞춰 줄고, 로고는 비율 유지로 함께 축소 */
  .gnb-inner { padding: 12px 14px; gap: 10px; }
  /* 리뷰 P1: min-width 0이면 320px 로그인에서 로고가 ~8px까지 줄어 홈 링크가 사실상 소멸 —
     브랜드에 사용 가능한 최소 폭(88px)을 보장하고, 부족한 공간은 아래 480px 블록에서
     로그아웃 pill을 햄버거 메뉴로 옮겨 확보한다 */
  .gnb-brand { flex-shrink: 1; min-width: 88px; padding: 10px 0; } /* 세로 패딩 = 협폭에서 로고가 얇아져도 터치 타깃 높이 확보 */
  .gnb-logo { height: auto; width: auto; max-height: 22px; max-width: 100%; object-fit: contain; }
  .gnb-right { gap: 6px; flex-shrink: 0; } /* 축소는 브랜드 로고만 — 우측 컨트롤이 안쪽에서 짜부되지 않게 */
  .gnb-lang button { font-size: 11px; padding: 5px 8px; }
  .gnb-btn { font-size: 12.5px; padding: 8px 11px; }
  .gnb-mypage { width: 32px; height: 32px; font-size: 15px; }
  .gnb-noti .noti-bell { font-size: 16px; padding: 4px; }
}

/* 햄버거 메뉴 내 로그아웃 항목 — 초협폭 전용 (기본·데스크톱에선 숨김) */
.gnb-menu-logout { display: none; }
@media (max-width: 480px) {
  /* 리뷰 P1: 초협폭에서 로그인 상태의 우측이 브랜드 최소 폭(88px)을 침범하지 않도록
     로그아웃 pill을 숨기고 햄버거 메뉴 항목으로 대체 (동일 핸들러) */
  #gnbLogout { display: none; }
  .gnb-links.open .gnb-menu-logout {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 10px 0; font-size: 15px; font-weight: 500; color: #d41500; font-family: inherit;
    border-top: 1px solid #ece8df; margin-top: 6px;
  }
}

/* GNB 알림 벨 (로그인 상태) — 학생앱 style.css 미로드 페이지 대비 자체 스타일 */
.gnb-noti { position: relative; }
.gnb-noti .noti-bell {
  position: relative; background: none; border: none; font-size: 18px; cursor: pointer; padding: 6px;
}
.gnb-noti .noti-count {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; border-radius: 999px;
  background: #d41500; color: #fff; font-size: 10px; font-weight: 700;
  display: none; align-items: center; justify-content: center; padding: 0 4px;
}
.gnb-noti .noti-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 400px; overflow-y: auto;
  background: #fff; border: 1px solid #ece8df; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(24, 24, 27, 0.12); display: none; z-index: 140;
}
.gnb-noti .noti-dropdown.open { display: block; }