/* ============================================================
   header.css — 共通ヘッダー（header.js が全ページに差し込む・常時表示）
   出典: staging/rookie_hub_mock_v2/css/_new.css:79-157（top: 0 に変更・
   モックが末尾に持っていたPC/SP切替の @media(max-width:899px) は削除し、
   ブレークポイントを @media(min-width:900px) 側の1系統に統一。
   現在地は header.js が出す aria-current="page" で示す（PC横並びナビ・
   ドロワー双方に同じ属性を出すため、CSSも両方に着色する）
   ============================================================ */
.rc-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  background: rgba(255,255,255,.96);
  border-bottom: 3px solid var(--pop);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink2) 14%, transparent);
}
.rc-header__logo { display: inline-flex; align-items: center; gap: 10px; line-height: 0; }
.rc-header__logo img { display: block; height: clamp(34px, 6vw, 42px); width: auto; }
.rc-header__logo--vol img { height: clamp(46px, 8vw, 58px); } /* Vol ロゴ（縦長め・1000×562）は共通ロゴと同じくらいの横幅（約 100px）になるまで大きく。ヘッダー 64px に収まる上限（運営指示 2026-09-14） */
.rc-header__logo .rc-header__vol {
  font-family: var(--font-pop); font-weight: 900; font-size: 13px; line-height: 1; letter-spacing: .04em;
  color: #fff; background: var(--pop); border-radius: 999px; padding: 5px 10px;
}
.rc-header__nav { display: none; align-items: center; gap: 8px; }
.rc-header__nav a, .rc-header__nav button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 14px;
  border: 2px solid var(--pop); border-radius: 999px; background: #fff;
  color: var(--pop); font-family: var(--font-pop); font-size: 12.5px; font-weight: 900;
  letter-spacing: .04em; cursor: pointer; white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease;
}
.rc-header__nav a:hover, .rc-header__nav button:hover { transform: translateY(-2px); background: var(--lemon); }
.rc-header__nav [aria-current="page"] { background: var(--lemon); }
.rc-header__nav .is-live { background: var(--pop); color: #fff; }
.rc-header__nav .is-live .status-dot { border-color: #fff; }
.rc-header__nav a:focus-visible, .rc-header__nav button:focus-visible, .rc-toggle:focus-visible { outline: 3px solid var(--tealband); outline-offset: 2px; }

/* ハンバーガー（開くと✕に変形）。900px未満で表示 */
.rc-toggle {
  display: flex; flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 2px solid var(--pop); background: var(--lemon);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--ink2) 22%, transparent);
}
.rc-toggle:active { transform: translateY(1px); }
.rc-toggle__bar { width: 20px; height: 3px; border-radius: 2px; background: var(--pop); transition: transform .25s ease, opacity .2s ease; }
body.nav-open .rc-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .rc-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .rc-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

/* ドロワー（右からスライドイン） */
.rc-drawer { position: fixed; inset: 0; z-index: 50; }
.rc-drawer[hidden] { display: none; }
.rc-drawer__overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink2) 55%, transparent); }
.rc-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(320px, 84vw); overflow-y: auto;
  background-color: #fff;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--mint2) 100%, transparent) 22%, transparent 24%);
  background-size: 14px 14px;
  border-left: 4px solid var(--pop);
  box-shadow: -8px 0 24px color-mix(in srgb, var(--ink2) 30%, transparent);
  padding: calc(var(--header-h) + 14px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
  animation: rc-drawer-in .28s ease both;
}
@keyframes rc-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.rc-drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc-drawer__list a {
  display: block; font-family: var(--font-pop); font-weight: 900; font-size: 15px; color: var(--ink2);
  background: #fff; border: 2px solid var(--pop); border-radius: 14px; padding: 10px 16px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink2) 20%, transparent);
  transition: transform .15s ease, background-color .15s ease;
}
.rc-drawer__list a:hover, .rc-drawer__list a:focus-visible { transform: translateY(-2px); background: var(--lemon); outline: 3px solid var(--pop); outline-offset: 2px; }
.rc-drawer__list a.is-live { background: var(--pop); color: #fff; }
.rc-drawer__list a[aria-current="page"] { background: var(--lemon); }
.rc-drawer__list .nav-en { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .22em; color: var(--teal-text); }
.rc-drawer__list a.is-live .nav-en { color: var(--lemon); }
@media (prefers-reduced-motion: reduce) { .rc-drawer__panel { animation: none; } }

/* PC（900px 以上）は横並びナビ、未満はハンバーガー（運動会にはこの切替が無いため新規） */
@media (min-width: 900px) {
  .rc-header__nav { display: flex; }
  .rc-toggle { display: none; }
}