/* =========================================================
   H.S.N.S — 상단 네비 (전 페이지 공통)
   기본 app.css 의 밝은 바(rgba(248,247,244,.8))를 브랜드 네이비로 바꾸고,
   그 위에 얹히는 글자·버튼 색을 다시 맞춘다.
   app.css 뒤에 로드되므로 여기서는 덮어쓰기만 한다.

   바 색을 바꾸려면 --nav-bg 한 줄만 고치면 된다.
   ========================================================= */

:root {
  --nav-bg: #0f2440;          /* 로고의 브랜드 네이비 */
  --nav-fg: #f2f5f9;
  --nav-muted: #93a9c6;
  --nav-border: rgba(255, 255, 255, 0.1);
}

.nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

/* 브랜드: 로고 마크 + 워드마크 */
.brand {
  align-items: center;        /* 이미지가 들어가므로 baseline 정렬 해제 */
  gap: 0.625rem;
}

.brand__mark {
  width: auto;
  height: 2.125rem;           /* 34px — 파일은 2배 크기(68px)로 저장 */
  border-radius: 6px;
  flex: none;
}

.brand__logo { color: var(--nav-fg); }
.brand__logo .dot { color: var(--gold-400); }
.brand__sub { color: var(--nav-muted); }

/* 메뉴 */
.nav__link { color: var(--nav-muted); }
.nav__link:hover { color: var(--gold-400); }

/* 구독 신청 버튼 — 어두운 바 위에서는 ink-900 배경이 묻힌다 */
.btn--pill-sm {
  background: var(--gold-400);
  color: var(--ink-950);
}
.btn--pill-sm:hover { background: #e0b95f; }

/* '증시 캘린더'가 추가되어 메뉴가 5개 — 좁은 화면에서는 어차피 다 들어가지 않는다.
   메뉴(.nav__menu)만 가로로 흘려보내고 브랜드와 '구독 신청' 버튼은 제자리에 고정한다.
   그냥 .nav__links 전체를 스크롤로 두면 CTA 가 화면 밖으로 밀려나고,
   아무것도 안 하면 브랜드가 찌그러져 메뉴와 글자가 겹친다(실측). */
.brand { flex: none; }

.nav__links { min-width: 0; gap: 0.75rem; margin-left: 0.75rem; }

/* 스크롤 영역만 줄어들고, CTA 버튼은 절대 찌그러지지 않게 */
.nav__links > .btn--pill-sm { flex: none; white-space: nowrap; }

.nav__menu {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav__menu::-webkit-scrollbar { display: none; }
.nav__menu > * { flex: none; }

@media (min-width: 640px) { .nav__menu { gap: 1.5rem; } }
@media (max-width: 640px) { .nav__link { font-size: 0.8125rem; } }

@media (max-width: 400px) {
  .brand__mark { height: 1.75rem; }
}