/* ぷらいまりーぐの公開ページの共通の見た目（2026-10-20 ゆ～き「両モードでトップと別ページのデザインがそろうように」）。
   読むページ: リーグHP（common/league-home.html）・期のページ（sN/home.html）・成績・選手一覧・オーダー/結果・卓組・ぷらいまダービー（bot の生成ページ）。
   ここに置くのは、どのページでも同じもの（色・文字・上の帯・ページの見出し・切り替えのボタン・下の帯）だけ。ページごとの中身の見た目は各ページの <style> に置く。
   上の帯・下の帯の HTML は、リーグHP・期のページ（手書き）と bot/src/core/site_chrome.py（生成ページ）で同じにする。
   色は既定がライト。上の帯の右でダークに切り替えられ、選んだ色はその端末に覚える（localStorage の prima-theme。どのページも共通） */
:root {
  color-scheme: light;
  --page: #f3f5fa; --bg: #ffffff; --ink: #1b2340; --head: #143e83; --head-ink: #ffffff; --sub: #eef2fa;
  --line: #d9dfeb; --mute: #6b7591; --gold: #ffc000; --gold-soft: #fff4cc; --link: #143e83; --on-gold: #1b2340;
  --band: #143e83; --band-deep: #0a2659; --on-band: #ffffff; --shadow: rgba(20, 62, 131, .14);
  /* ロゴは色を変えず背景も透過のまま。紺の地に沈む紺の部分は細い白い縁で見せる（2026-10-20 ゆ～き「背景は透過」） */
  --logo-edge: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
  --font-en: "Barlow Condensed", "Arial Narrow", "Yu Gothic UI", sans-serif;
  --font-body: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --gh-h: 0px;  /* 上に残る上の帯の高さ（スマホは上の帯が残らないので 0。PC は下の @media で決める） */
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e1630; --bg: #17223f; --ink: #edf1f9; --head: #9cbcff; --head-ink: #0e1630; --sub: #1d2a4b;
  --line: #2b3a5f; --mute: #9ba8c6; --gold-soft: #3d3313; --link: #9cbcff;
  --band: #0d2c66; --band-deep: #071637; --shadow: rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 8px; }
/* 中身が短いページでも下の帯を画面の下に置く */
body { background: var(--page); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.6; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
a { color: var(--link); }
/* 幅：上の帯・見出し・下の帯はページの幅（--site-w。決めなければ 1080px）。表が横に広いページは --site-w を広げ、ロゴ・見出し・本文の左の端をそろえる */
.in { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.gh .in, .foot .in { max-width: var(--site-w, 1080px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 上の帯・見出し・下の帯の行の高さは、本文の行の高さが違うページでも同じにする */
.gh, .hero, .ph, .foot { line-height: 1.6; }

/* 上の帯（ロゴ・リーグHP のメニュー・色の切り替え）。PC は上に固定する */
.gh { background: var(--bg); border-top: 4px solid var(--gold); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.gh .in { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { flex: none; display: block; }
.brand img { display: block; height: 40px; width: auto; }
:root[data-theme="dark"] .brand img { filter: var(--logo-edge); }
.gnav { display: flex; gap: 4px; margin-left: auto; }
.gnav a { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 6px; white-space: nowrap; position: relative; }
.gnav a:hover { color: var(--head); background: var(--sub); }
.gnav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.theme { flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--sub); border: 1px solid var(--line); }
.theme button { font: inherit; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--mute); background: none; border: 0; border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.theme button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
.theme button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 900px) {
  .gh { position: sticky; top: 0; }
  html { scroll-padding-top: 76px; }
  :root { --gh-h: 69px; }  /* 上に残る上の帯の高さ（金の線 4px＋中身 64px＋下の線 1px）。表の見出しはこの下に残す */
}
@media (max-width: 899px) {
  .gh .in { flex-wrap: wrap; gap: 0 12px; padding-top: 8px; }
  .brand img { height: 34px; }
  .theme { margin-left: auto; }
  .gnav { order: 3; width: 100%; margin: 4px 0 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gnav::-webkit-scrollbar { display: none; }
  .gnav { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .gnav a { padding: 8px 10px 10px; }
}

/* 紺の見出しの地（リーグHP・期のページの大きな見出しと、ほかのページの見出しで同じ）。斜めの細い線を薄く重ねる */
.hero, .ph { position: relative; overflow: hidden; color: var(--on-band); background:
  radial-gradient(circle at 78% 30%, rgba(255, 192, 0, .16), transparent 46%),
  linear-gradient(135deg, var(--band) 0%, var(--band-deep) 100%); }
.hero::before, .ph::before { content: ""; position: absolute; inset: 0; opacity: .07; background-image: repeating-linear-gradient(-45deg, #fff 0 2px, transparent 2px 22px); pointer-events: none; }
/* 見出しの上の「ぷらいまりーぐ › 6期」（上の階層へ戻るリンク） */
.crumb { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 12px; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.crumb a { color: var(--on-band); opacity: .85; text-decoration: none; }
.crumb a:hover { opacity: 1; text-decoration: underline; }
.crumb > * + *::before { content: "›"; display: inline-block; margin: 0 8px; opacity: .6; color: var(--on-band); }
.kicker { margin: 0; font-family: var(--font-en); font-weight: 700; font-size: 15px; letter-spacing: .24em; color: var(--gold); }

/* ページの見出し（成績・選手一覧・オーダー/結果・卓組・ぷらいまダービー）：英字の小見出し＋日本語の題＋期と状態。
   幅は本文と同じ（本文だけを広げるとき（卓組の全節の表）は --main-w。決めなければ --site-w） */
.ph { border-bottom: 4px solid var(--gold); }
.ph .in { position: relative; max-width: var(--main-w, var(--site-w, 1080px)); padding-top: 22px; padding-bottom: 26px; }
.ph h1 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 900; font-size: 42px; line-height: 1.15; letter-spacing: .02em; text-shadow: 0 3px 14px rgba(0, 0, 0, .25); }
.ph .meta { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; opacity: .9; }
.ph .meta:empty { display: none; }
@media (max-width: 699px) {
  .ph .in { padding-top: 16px; padding-bottom: 20px; }
  .ph h1 { font-size: 32px; }
  .kicker { letter-spacing: .18em; }
}

/* 切り替えのボタン（成績のチーム／個人／個人賞・節・トータル）。上の帯の色の切り替えと同じく、選んでいるものを金に */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: inherit; font-size: 13px; font-weight: 700; line-height: 1; min-width: 34px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.seg button:hover { border-color: var(--head); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 表の帯と列の見出しを、ページを下へスクロールしても上の帯の下に残す（成績・卓組・ぷらいまダービーの表。2026-11-11 ゆ～き）。
   列の見出しの写し（.sthead）と、表の箱の印（.sthd）・帯の無い表を包む枠（.stbox）は bot/src/core/sticky_table_head.js が付ける。
   表の箱は、帯が残るように overflow: clip で角を丸める（各ページの .board） */
.sthd > .bh, details.sthd[open] > summary { position: sticky; top: var(--gh-h); z-index: 6; }
.sthead { position: sticky; z-index: 5; overflow-x: auto; scrollbar-width: none; }
.sthead::-webkit-scrollbar { display: none; }
.stbox { min-width: 0; overflow: hidden; overflow: clip; }

/* アイコンの無い人の仮の人型（ぷらメン・アイコンを出していない選手・実況解説者など、人のアイコンの代わりはどのページもこれ。2026-10-25 ゆ～き）。
   個人賞の画像でダービーの人に使う人型（bot/src/features/team_rank_image/render.py の _placeholder）と同じ形と色：灰の地 #CCCCCC に、薄い灰 #E6E6E6 の頭（中心 50,34・半径 17）と体（幅 19〜81・上 54 から下の端まで）。
   写真と同じ扱いなので、ダークでも色を変えない。枠の形（角丸・丸）と大きさは、ページのアイコンの枠（.ic・.av など）に合わせる。
   ページの <style> の枠の地の色（.tb .av の白など）より強くするため !important */
.sil { background: #ccc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23ccc'/%3E%3Ccircle cx='50' cy='34' r='17' fill='%23e6e6e6'/%3E%3Crect x='19' y='54' width='62' height='66' rx='12' fill='%23e6e6e6'/%3E%3C/svg%3E") center / cover no-repeat !important; color: transparent !important; font-size: 0 !important; }

/* 下の帯 */
.foot { background: var(--band-deep); color: var(--on-band); border-top: 4px solid var(--gold); }
.foot .in { padding-top: 34px; padding-bottom: 30px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.foot .plate { display: block; }
.foot .plate img { display: block; height: 52px; width: auto; filter: var(--logo-edge); }
.foot nav { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; }
.foot nav a { color: var(--on-band); opacity: .8; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.foot nav a:hover { opacity: 1; text-decoration: underline; }
.foot small { font-size: 11.5px; opacity: .6; }