/* L-154: 통합 RADAR header — release.html 기준 모든 페이지 통일.
 * 색상 변수는 각 page 의 :root 에서 정의 (--bg-0 / --t-0 / --neon 등) — 여기선 var() 만 참조.
 *
 * !important — 각 page 의 inline `<style>` 이 link CSS 보다 source-order 늦어 우선되는
 * 문제 해결. inline 에 남아있는 `header { display:flex; padding:18px 40px }` 가 partial
 * 의 `.header-inner` 구조와 충돌하지 않도록 강제 override.
 */

/* ── Sticky header ──────────────────────────────────────────── */
header {
  padding: 0 !important;
  display: block !important;       /* 각 file inline 이 flex 로 만들면 partial 깨짐 */
  border-bottom: 1px solid var(--line-0);
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,12,0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.header-inner {
  max-width: 1480px; margin: 0 auto;
  padding: 18px 40px;
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 20px;
  position: relative;  /* nav absolute reference */
  /* L-155: 명시적 height — 모든 page 동일 (각 file inline 의 logo/nav font 차이로
     line-height 가 다르게 적용되는 1~5px 흔들림 강제 차단). */
  height: 68px !important;
  box-sizing: border-box !important;
}

/* ── Logo ── */
.logo {
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 24px; font-weight: 900; letter-spacing: -0.03em;
  /* L-155: line-height 1 강제 — 각 file inline `.logo` 가 line-height 명시 안 해
     default (1.4~1.6) 적용되면 header height 가 5px 정도 다르게 보임. */
  line-height: 1 !important;
  color: var(--t-0); text-decoration: none;
  cursor: pointer; transition: color .15s ease;
}
.logo:hover { color: var(--neon); }
.logo .accent { color: var(--neon); }

/* ── Nav (가운데 absolute fixed — L-150 흔들림 방지) ── */
.nav {
  display: flex; gap: 4px; align-items: center;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav a {
  color: var(--t-2); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
  transition: color .2s ease, background .2s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--t-0); background: var(--bg-2); }
.nav a.active { color: var(--bg-0); background: var(--neon); font-weight: 700; }

/* ── Head actions (admin/user/anonymous 3가지 분기) ── */
.head-actions { display: flex; align-items: center; gap: 10px; }
.btn-auth {
  padding: 7px 14px; font-size: 12px; font-weight: 700;
  border-radius: 6px; text-decoration: none;
  transition: all .15s ease;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-login-link {
  background: var(--neon); color: #000;
  border: 1px solid var(--neon);
}
.btn-login-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(182,255,92,0.25);
}
.btn-admin-link {
  background: rgba(106,214,255,0.12);
  color: var(--cyan);
  border: 1px solid rgba(106,214,255,0.35);
}
.btn-admin-link:hover {
  background: rgba(106,214,255,0.22);
  border-color: rgba(106,214,255,0.60);
}
.btn-logout-link {
  background: var(--bg-2); color: var(--t-2);
  border: 1px solid var(--line-1);
}
.btn-logout-link:hover {
  background: var(--bg-3); color: var(--t-1);
  border-color: var(--line-2);
}
.btn-signup-link {
  background: transparent; color: var(--cyan);
  border: 1px solid rgba(106,214,255,0.30);
}
.btn-signup-link:hover {
  background: rgba(106,214,255,0.10);
  border-color: rgba(106,214,255,0.55);
}
.btn-user-info {
  background: var(--bg-2); color: var(--t-1);
  border: 1px solid var(--line-0);
  cursor: pointer;  /* L-159: 마이페이지 link 화 — hover effect */
}
.btn-user-info:hover {
  background: var(--bg-3); color: var(--t-0);
  border-color: rgba(255,200,97,0.30);
}
.btn-user-info.active {
  background: rgba(255,200,97,0.12);
  color: var(--gold);
  border-color: rgba(255,200,97,0.40);
}

/* ── 모바일 ── */
@media (max-width: 700px) {
  .nav { display: none; }
  .header-inner { padding: 14px 20px; }
}