/* 상단 헤더 — 메인(index.html)과 하위 페이지(menu/mealpass/blog)가 **이 파일 하나**를 같이 쓴다.
 *
 * 예전에는 메인은 자기 인라인 CSS, 하위는 page.css 로 각각 헤더를 그렸다.
 * 그래서 메뉴를 누르면 배경색·로고·높이·글씨체가 전부 달라져 **다른 사이트로 넘어간 것처럼**
 * 보였다. 같은 사이트인데 페이지만 다른 것이므로 헤더는 어디서든 똑같아야 한다.
 *
 * ⚠ 고칠 때는 여기만 고친다. 메인 index.html 안에도 `.nav` 규칙이 남아 있으면
 *   나중에 로드되는 이 파일이 이긴다(그래서 index.html 은 이 파일을 마지막에 불러온다).
 */

.nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(16, 30, 82, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-in {
  max-width: 1200px;
  margin: 0 auto;
  height: 74px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 30px; width: auto; }

.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.nav-links a { color: inherit; }

/* 블로그만 오른쪽으로 밀어 CTA 바로 왼쪽에 붙인다.
 * 왼쪽 묶음(버거&피자·밀패스·매장)은 전부 같은 페이지 안에서 스크롤하는 링크이고,
 * 블로그는 혼자 다른 페이지로 나간다. 그게 가운데 세 번째 자리에 섞여 있으면
 * 스크롤될 줄 알고 눌렀다가 화면이 통째로 바뀌어 튄다.
 * 성격이 다른 링크는 자리도 갈라놔야 예측이 된다. (마크업은 그대로 — 모든 페이지가 이 규칙을 같이 받는다) */
.nav-links a[href^="/blog"] { order: 9; margin-left: auto; }
.nav-links a:hover,
.nav-links a.on { color: #E8E23C; }

/* 오른쪽 CTA — 메인은 `.btn.btn-orange`, 하위는 `.nav-cta` 를 쓰던 것을 하나로 맞춘다 */
.nav .nav-cta,
.nav .btn-orange {
  background: #EA580C;
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav .nav-cta:hover,
.nav .btn-orange:hover { background: #C2410C; color: #fff; }

/* 좁은 화면 — 메인은 데스크탑 고정폭이라 원래 대응이 없었다.
   헤더만이라도 가로 스크롤로 넘겨 링크가 잘리지 않게 한다. */
@media (max-width: 900px) {
  .nav-in {
    height: auto;
    padding: 12px 18px;
    gap: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-in::-webkit-scrollbar { display: none; }
  .nav-links { gap: 18px; font-size: 13.5px; flex: 0 0 auto; }
  /* 좁은 화면은 헤더 전체가 가로 스크롤이라 밀어낼 여백 자체가 없다 — 원래 순서대로 둔다 */
  .nav-links a[href^="/blog"] { order: 0; margin-left: 0; }
  .nav-logo img { height: 24px; }
  .nav .nav-cta,
  .nav .btn-orange { padding: 9px 14px; font-size: 12.5px; }
}