/* =========================================================
   Header — 상단 메타바 + 메뉴(탭) 내비게이션
   ========================================================= */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-bg);
  padding: 0 var(--page-pad-x);
}

/* ---------- 메뉴 ---------- */
.nav {
  border-bottom: 1px solid var(--color-line-strong);
}

.nav__list {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav__list::-webkit-scrollbar { display: none; }

.nav__item { flex: none; }

.nav__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text-sub);
  background: transparent;
  border: 0;
  border-bottom: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav__link:hover,
.nav__link:focus-visible {
  background: var(--color-surface);
  color: var(--color-text);
  border-bottom: 0;
}
.nav__link.is-active,
.nav__link.is-active:hover,
.nav__link.is-active:focus-visible {
  background: var(--color-invert-bg);
  color: var(--color-invert-text);
}

/* ---------- 패널 ---------- */
/* JS가 없으면 모든 패널이 그대로 노출된다 (검색엔진·비JS 대비) */
.js .panel { display: none; }
.js .panel.is-active { display: block; }

.panel > .section:first-child,
.panel > .hero:first-child {
  border-top: 0;
}

.js .panel.is-active { animation: panel-in 0.28s ease both; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .panel.is-active { animation: none; }
}

@media (max-width: 640px) {
  /* 스티키 헤더가 화면을 많이 차지하지 않도록 메타바를 한 줄로 */
  .masthead .topbar { padding: 12px 0; gap: 4px 12px; }
  .masthead .topbar__note { display: none; }
  .masthead .topbar__date { margin-left: auto; }

  .nav__link { padding: 12px 13px; font-size: 12.5px; }
}

/* 스티키 헤더에 가리지 않도록 앵커 이동 여백 */
.section,
.hero { scroll-margin-top: 110px; }