/* Use the design font (Inter / Noto Sans KR) across these pages — overrides
   the old AquawaxPro / HallymGothic so every page matches the home/reservation
   typography. Requires the Google Fonts <link> in the page head. */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, ul, ol, td, th, label,
button, input, select, textarea, strong, em, small, b, dt, dd, blockquote, figcaption {
  font-family: 'Inter', 'Noto Sans KR', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !important;
}
.iata-code { font-family: 'Inter', 'Noto Sans KR', sans-serif !important; }

/* SKYHEX shared header — matches the home (design) chrome. Self-contained
   (hardcoded colors, .sx-* namespace) and reuses the auth.js-wired ids
   (#util-login, #nav-login-btn, #nav-user, #logout-btn, .user-menu-btn).
   Positioned FIXED at the same heights as the old header (util 36px + nav
   72px = 108px desktop; util hidden + nav 64px on mobile) so the existing
   hero/section offsets keep lining up — only the styling changes. */

/* ── Utility bar (fixed, top) ── */
.sx-utilbar { position:fixed; top:0; left:0; right:0; height:36px; z-index:101; background:#071536; color:rgba(255,255,255,.85); font-size:12.5px; }
.sx-utilbar .sx-uc { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; height:36px; }
.sx-utilbar .sx-ul, .sx-utilbar .sx-ur { display:flex; align-items:center; }
.sx-utilbar a, .sx-utilbar button { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; color:rgba(255,255,255,.78); background:transparent; border:none; font-size:12.5px; cursor:pointer; text-decoration:none; transition:color .15s; }
.sx-utilbar .sx-ul { margin-left:-12px; }
.sx-utilbar .sx-ur { margin-right:-12px; }
.sx-utilbar a:hover, .sx-utilbar button:hover { color:#fff; }
/* util-bar auth: join link + logged-in user (name + logout), like the home */
.sx-utilbar .join { color:#fff; font-weight:500; }
.sx-utilbar #util-user { display:inline-flex; align-items:center; }
.sx-utilbar #util-user .user-name { color:#fff; font-weight:500; padding:0 12px; }

/* ── Main header (fixed, below util bar) ── */
.sx-header { position:fixed; top:36px; left:0; right:0; height:72px; z-index:100; background:#fff; border-bottom:1px solid #e6ebf2; }
.sx-header .sx-hc { max-width:1200px; margin:0 auto; padding:0 24px; height:72px; display:flex; align-items:center; gap:24px; justify-content:space-between; }
.sx-header .sx-brand { display:flex; align-items:center; flex-shrink:0; }
.sx-header .sx-brand img { height:24px; width:auto; display:block; }
.sx-header .sx-nav { display:flex; gap:4px; margin:0 auto; }
/* header-right controls: search + My Page (match the home head-actions) */
.sx-header .sx-icon-btn { width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#1a2338; background:transparent; border:none; cursor:pointer; text-decoration:none; transition:background .15s; flex-shrink:0; }
.sx-header .sx-icon-btn:hover { background:#eef2f7; }
.sx-header .sx-mypage { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1px solid #e6ebf2; background:#fff; color:#1a2338; font-weight:500; font-size:14px; text-decoration:none; white-space:nowrap; transition:all .15s; flex-shrink:0; }
.sx-header .sx-mypage:hover { border-color:#314066; color:#314066; }
.sx-header .sx-nav a { position:relative; padding:9px 16px; font-size:15px; font-weight:500; color:#1a2338; border-radius:8px; white-space:nowrap; text-decoration:none; transition:all .15s; }
.sx-header .sx-nav a:hover { background:#f8fafc; color:#314066; }
.sx-header .sx-nav a.active { background:#eef2f7; color:#314066; }
.sx-header .sx-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; position:relative; }
.sx-header .sx-login, .sx-header .btn-login { display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:999px; background:#1a2338; color:#fff; font-weight:600; font-size:14px; text-decoration:none; transition:background .15s; }
.sx-header .sx-login:hover, .sx-header .btn-login:hover { background:#314066; }

/* logged-in user menu (auth.js sets #nav-user inline display + toggles .open) */
.sx-header .nav-user { align-items:center; gap:8px; cursor:pointer; }
.sx-header .nav-user .user-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; background:#eef2f7; }
.sx-header .nav-user .user-name { font-size:14px; font-weight:600; color:#1a2338; }
.sx-header .nav-user .user-menu-btn { border:none; background:transparent; color:#64748b; cursor:pointer; font-size:13px; padding:2px; }
.sx-header .user-dropdown { position:absolute; top:52px; right:0; min-width:150px; background:#fff; border:1px solid #e6ebf2; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.12); padding:6px; display:none; flex-direction:column; }
.sx-header .nav-user.open .user-dropdown { display:flex; }
.sx-header .user-dropdown a, .sx-header .user-dropdown button { display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:transparent; color:#1a2338; font-size:14px; border-radius:8px; cursor:pointer; text-decoration:none; }
.sx-header .user-dropdown a:hover, .sx-header .user-dropdown button:hover { background:#f8fafc; }

@media (max-width:768px) {
  .sx-utilbar { display:none; }
  .sx-header { top:0; height:64px; }
  .sx-header .sx-hc { height:64px; gap:12px; }
  .sx-header .sx-nav { gap:0; }
  .sx-header .sx-nav a { padding:9px 10px; font-size:14px; }
}