/* =========================================================================
   site-tabs.css — 上部タブ・テーマ切替・フッター（2026-09-30 新設）
   使うのは新デザインの3ページだけ:
     /career-archive/ ・ /career-archive/<選手>/ ・ /npb-draft/
   既存約200記事と一覧ページのヘッダー／ナビは変えない（Hiro決定）。
   ナビとフッターは両テーマ共通の暗色。アクセントだけ
   .st-top--gold（阪神・アーカイブ）／.st-top--blue（ドラフト）で切り替える。
   ========================================================================= */

.st-top {
  --st-bg: #171310;
  --st-line: #2c261c;
  --st-accent: #f5c000;
  --st-text: #faf6ec;
  --st-mute: #b3ab97;
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-line);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.st-top--blue {
  --st-bg: #0a141e;
  --st-line: #1c2c3b;
  --st-accent: #8fc0e4;
  --st-mute: #a9bccd;
}
.st-top-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 64px;
}
.st-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--st-accent);
  text-decoration: none;
}
.st-tabs {
  display: flex;
  gap: 8px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 64px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  color: var(--st-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.st-tabs a:hover { color: var(--st-text); }
.st-tabs a[aria-current="page"] {
  color: var(--st-text);
  font-weight: 700;
  border-bottom-color: var(--st-accent);
}
.st-tabs a:focus-visible,
.st-logo:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: -2px;
}

/* theme.js が最初の .site-nav に 3択ピッカーを差し込む */
.st-top .site-nav.st-theme {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.st-top .theme-picker {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 2px 3px;
  gap: 1px;
}
.st-top .theme-opt {
  background: none;
  border: 0;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.st-top .theme-opt:hover { color: #fff; }
.st-top .theme-opt.active { background: rgba(255,255,255,0.2); color: #fff; }

/* スマホ: ロゴ行 + 横スクロールのタブ列 */
@media (max-width: 900px) {
  .st-top-inner {
    flex-wrap: wrap;
    padding: 0 0 0 16px;
    gap: 0;
    min-height: 0;
  }
  .st-logo { min-height: 52px; }
  .st-top .site-nav.st-theme { margin-left: auto; padding-right: 12px; min-height: 52px; }
  .st-tabs {
    order: 3;
    flex-basis: 100%;
    margin: 0 0 0 -16px;
    padding: 0 8px;
    border-top: 1px solid var(--st-line);
    gap: 2px;
  }
  .st-tabs a { min-height: 44px; font-size: 13px; padding: 0 12px; }
}

/* ── フッター（新3ページ共通。リンクは既存 .site-footer と同じ） ── */
.st-footer {
  --st-accent: #f5c000;
  background: #0f0e0b;
  color: #9a9282;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.8;
}
.st-footer--blue { --st-accent: #8fc0e4; background: #0a141e; color: #a9bccd; }
.st-footer a { color: inherit; text-decoration: none; }
.st-footer a:hover { color: #fff; text-decoration: underline; }
.st-footer-note {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.st-footer-note-inner,
.st-footer-main,
.st-footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 48px;
  box-sizing: border-box;
}
.st-footer-note-inner {
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  font-size: 12px;
}
.st-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.st-footer-brand {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--st-accent);
  margin: 0 0 8px;
}
.st-footer-main p { margin: 0 0 12px; max-width: 520px; }
.st-footer h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #e9e2d2;
}
.st-footer--blue h4 { color: #e3e9ef; }
.st-footer-links { display: flex; flex-direction: column; gap: 2px; }
.st-footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
.st-footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.st-footer-social a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #e9e2d2;
  font-weight: 700;
  font-size: 12px;
}
.st-footer-social a:hover { text-decoration: none; border-color: var(--st-accent); color: var(--st-accent); }
.st-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
}
@media (max-width: 767px) {
  .st-footer-note-inner, .st-footer-main, .st-footer-bottom { padding-left: 16px; padding-right: 16px; }
  .st-footer-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ── ページ内タブ（role=tablist）。JSが動かないときは全パネルを表示する ── */
.st-panel-heading { display: none; }
.st-no-js .st-panel-heading,
html:not(.st-js) .st-panel-heading { display: block; }
html.st-js [role="tabpanel"][hidden] { display: none; }
html:not(.st-js) .st-tablist { display: none; }