/* ==========================================================================
   CROWNNA · assets/css/header.css  v3.0 (DESIGN V2 · 공통 헤더 승격)
   Header v3.0 — v2-index 의 V2 헤더를 전 페이지 공통 컴포넌트로 승격.

   ※ 이 파일이 헤더 스타일의 유일한 소스입니다.
     페이지 CSS에서 .nav / .nav-* / .notif-* / .mobile-menu 를 재정의하지 마세요.
     헤더 수정은 header.css + header.js 두 파일에서만 합니다.

   ── 자립(self-contained) 원칙 ─────────────────────────────────────────────
   페이지마다 팔레트(:root 변수)가 다르므로 헤더는 페이지 토큰에 의존하지 않는다.
   필요한 값은 .nav / .mobile-menu 에 --hd-* 스코프 토큰으로 직접 정의한다.
   → 브라운 톤 페이지(notice 등)에서도 헤더는 항상 동일한 V2 퍼플로 보인다.

   ── 담당 DOM (header.js v3.0 이 생성) ────────────────────────────────────
   <header class="nav">
     <div class="nav-inner">                       ← grid 3열
       a.logo (.logo-mark .logo-text .logo-tag)
       div.nav-links > a
       div.nav-right
         button.icon-btn                           ← 검색
         div.notif-wrap#navNotifWrap               ← 알림(로그인 시)
           button.icon-btn.bell > span.icon-badge
           div.notif-panel#navNotifPanel
         button.nav-ham                            ← 모바일 햄버거
         div.nav-guest#navGuest                    ← 비로그인
         div.nav-user-wrap#navUserWrap             ← 로그인
           button.nav-user (.nav-ava .nav-user-meta .nav-caret)
           div.nav-user-menu#navUserMenu
   </header>
   <div class="mobile-menu" id="mobileMenu">       ← 헤더 외부 독립 DOM

   ── 반응형 ────────────────────────────────────────────────────────────────
   1080px 이하 : 데스크탑 메뉴 숨김 → 햄버거
    680px 이하 : 헤더 축소(로고 + 알림 + 햄버거), 프로필/게스트 블록 숨김
   ========================================================================== */

/* ── 폰트 자립 (v3.0) ────────────────────────────────────────────────────────
   페이지마다 Pretendard 웹폰트 로드 여부가 달라(선언만 하고 미로드) 헤더 글자 굵기가
   페이지별로 다르게 보이는 문제가 있었다. 공통 헤더는 어디서든 동일해야 하므로
   폰트도 header.css 가 직접 보장한다. (페이지에 <link> 가 이미 있으면 중복 다운로드 없음)
   ※ @import 는 반드시 다른 규칙보다 앞에 와야 한다. */
@import url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard.css');

/* CLS 방지 */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* ── 헤더 컨테이너 + 스코프 토큰 ─────────────────────────────────────────── */
.nav,
.mobile-menu {
  --hd-v700:#4B3BFF;
  --hd-v600:#6C63FF;
  --hd-v500:#8079FF;
  --hd-v300:#B3AEFF;
  --hd-v100:#EEEDFF;
  --hd-v50:#F5F4FF;
  --hd-g500:#C9A063;
  --hd-ink:#1E1A2B;
  --hd-ink2:#413C52;
  --hd-muted:#8A85A0;
  --hd-muted2:#B3AFC4;
  --hd-line:#EBE8F2;
  --hd-white:#fff;
  --hd-pill:999px;
  --hd-font:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
}

.nav {
  background: var(--hd-white);
  border-bottom: 1px solid var(--hd-line);
  position: sticky;
  top: 0;
  z-index: 200;
  font-family: var(--hd-font);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* ── 로고 ────────────────────────────────────────────────────────────────── */
.nav .logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  justify-self: start;
  text-decoration: none;
  color: var(--hd-ink);
}
.nav .logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--hd-v500), var(--hd-v700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
/* ── 왕관 아이콘 (브랜드 로고에서 추출) ────────────────────────────────────
   CSS mask 로 그려서 주변 글자 색을 그대로 따라간다(currentColor).
   Font Awesome 아이콘과 동작이 같아, 밝은 배경·어두운 배경 구분 없이 하나로 쓴다.
   크기도 1em 이라 글자 크기에 맞춰 자동으로 커지고 작아진다. */
.crown-ico {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.14em;
  background-color: currentColor;
  -webkit-mask: url('../images/crown-icon.png') center / contain no-repeat;
          mask: url('../images/crown-icon.png') center / contain no-repeat;
  flex-shrink: 0;
}
/* mask 를 모르는 아주 오래된 브라우저에서 네모가 보이지 않게 */
@supports not ((-webkit-mask: none) or (mask: none)) {
  .crown-ico { background-color: transparent; }
}

/* 로고 이미지 (왕관 + 크라운나 글자 일체형).
   높이만 지정하고 width:auto 로 비율을 유지한다. */
.nav .logo-img {
  height: 26px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
/* 아래 두 규칙은 로고 이미지를 쓰지 않는 옛 마크업을 위해 남겨둔다 */
.nav .logo-text { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--hd-ink); }
.nav .logo-tag  { font-size: 11px; color: var(--hd-muted2); font-weight: 500; margin-left: 2px; letter-spacing: -.01em; }

/* ── 데스크탑 메뉴 ───────────────────────────────────────────────────────── */
.nav-links {
  display: flex;
  gap: 28px;
  justify-self: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hd-muted);
  padding: 24px 1px;
  position: relative;
  transition: color .2s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover  { color: var(--hd-ink2); }
.nav-links a.active { color: var(--hd-ink); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5px;
  background: var(--hd-v600);
  border-radius: 2px;
}

/* ── 우측 영역 ───────────────────────────────────────────────────────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  justify-self: end;
}

.nav .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hd-muted);
  font-size: 15px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.nav .icon-btn:hover { background: var(--hd-v50); color: var(--hd-v600); }
.nav .icon-btn.lit   { background: var(--hd-v100); color: var(--hd-v600); }

/* 알림 벨은 아이콘이 먼저 읽혀야 한다 — 글리프를 키운다 */
.nav .icon-btn.bell { font-size: 17px; }

/* 배지는 작게, 아이콘 오른쪽 위 '바깥' 모서리에 걸치도록 이동시킨다.
   (예전에는 15px 배지가 아이콘 안쪽에 놓여 종 모양을 가렸다) */
.nav .icon-badge {
  position: absolute;
  top: 5px; right: 5px;
  transform: translate(50%, -50%);
  min-width: 13px;
  height: 13px;
  background: var(--hd-v600);
  color: #fff;
  border-radius: var(--hd-pill);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
  padding: 0 3px;
  border: 1.5px solid #fff;
  box-sizing: content-box;
  pointer-events: none;
}

/* ── 비로그인 버튼 ───────────────────────────────────────────────────────── */
.nav-guest { display: flex; align-items: center; gap: 7px; }
.nav-btn-outline,
.nav-btn-solid {
  border-radius: var(--hd-pill);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-btn-outline { background: #fff; color: var(--hd-ink2); border: 1px solid var(--hd-line); }
.nav-btn-outline:hover { border-color: var(--hd-v300); color: var(--hd-v600); background: var(--hd-v50); }
.nav-btn-solid { background: var(--hd-v600); color: #fff; border: none; }
.nav-btn-solid:hover { background: var(--hd-v700); }

/* ── 프로필 ──────────────────────────────────────────────────────────────── */
.nav-user-wrap { position: relative; }
.nav-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--hd-pill);
  margin-left: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
.nav-user:hover { background: var(--hd-v50); }
.nav-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--hd-v300), var(--hd-v600));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nav-user-meta { line-height: 1.25; text-align: left; }
.nav-user-name { font-size: 13px; font-weight: 700; color: var(--hd-ink); }
.nav-user-role { font-size: 10.5px; color: var(--hd-muted2); font-weight: 600; }
.nav-caret     { color: var(--hd-muted2); font-size: 11px; }

.nav-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 172px;
  background: #fff;
  border: 1px solid var(--hd-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(30,26,43,.14);
  padding: 6px;
  display: none;
  z-index: 300;
}
.nav-user-menu.show { display: block; }
.nav-user-menu a,
.nav-user-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hd-ink2);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
}
.nav-user-menu a:hover,
.nav-user-menu button:hover { background: var(--hd-v50); color: var(--hd-v600); }
.nav-user-menu i { width: 16px; text-align: center; color: var(--hd-muted); }

/* ── 알림 드롭다운 ───────────────────────────────────────────────────────── */
.notif-wrap { position: relative; display: inline-block; flex-shrink: 0; }

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--hd-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(30,26,43,.16);
  display: none;
  z-index: 300;
  text-align: left;
  font-family: var(--hd-font);
}
.notif-panel.show { display: block; }

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hd-line);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--hd-ink);
  position: sticky;
  top: 0;
  background: #fff;
}
.notif-head button {
  background: none;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hd-v600);
  cursor: pointer;
  font-family: inherit;
}

.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hd-line);
  cursor: pointer;
  transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover  { background: var(--hd-v50); }
.notif-item.unread { background: var(--hd-v50); }
.notif-item-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hd-ink);
}
.notif-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hd-v600); flex: 0 0 auto; }
.notif-item-msg  { font-size: 12px; color: var(--hd-muted); margin-top: 4px; line-height: 1.5; }
.notif-item-time { font-size: 11px; color: var(--hd-muted2); margin-top: 5px; }
.notif-empty     { padding: 2.5rem 1rem; text-align: center; font-size: 13px; color: var(--hd-muted2); }

/* ── 햄버거 (데스크탑 숨김) ──────────────────────────────────────────────── */
.nav-ham {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--hd-ink2);
  font-size: 17px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-ham:hover { background: var(--hd-v50); color: var(--hd-v600); }

/* ── 모바일 메뉴 (헤더 외부 독립 DOM) ───────────────────────────────────── */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid var(--hd-line);
  padding: 10px 18px 16px;
  box-shadow: 0 8px 20px rgba(30,26,43,.08);
  position: sticky;
  top: 68px;
  z-index: 199;
  font-family: var(--hd-font);
}
.mobile-menu.open { display: flex; }
.mobile-menu > a {
  padding: 12px 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hd-ink2);
  text-decoration: none;
  border-bottom: 1px solid var(--hd-line);
}
.mobile-menu > a:hover   { color: var(--hd-v600); }
.mobile-menu > a.active  { color: var(--hd-v600); font-weight: 700; }

.mobile-menu-auth { display: flex; gap: 8px; margin-top: 14px; }
.mobile-menu-auth button {
  flex: 1;
  padding: 12px;
  border-radius: var(--hd-pill);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: none;
}
.mobile-menu-auth .solid   { background: var(--hd-v600); color: #fff; }
.mobile-menu-auth .outline { background: #fff; color: var(--hd-ink2); border: 1px solid var(--hd-line); }

/* ═══════════════════════════════════════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1080px 이하 — 데스크탑 메뉴 숨김, 햄버거 노출 */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: 1fr auto; gap: 0; }
  .nav-ham   { display: flex; }
}

/* 680px 이하 — 헤더 축소: 로고 + 알림 + 햄버거 */
@media (max-width: 680px) {
  .nav-inner   { height: 60px; padding: 0 18px; }
  .mobile-menu { top: 60px; }
  .nav .logo-tag  { display: none; }
  .nav .logo-img  { height: 22px; }
  .nav .logo-text { font-size: 17px; }
  .nav .logo-mark { width: 27px; height: 27px; border-radius: 8px; }
  .nav-right .icon-btn:not(.bell) { display: none; }
  .nav-user-wrap { display: none !important; }
  .nav-guest     { display: none !important; }
  .notif-panel   { width: min(320px, calc(100vw - 36px)); }
}