/* base.css — 全ページ共通のトークンと土台
 *
 * ★2026-08-06に切り出した。それまでは6ページのHTMLに直書きしていた。
 *   デザイン統一(選手ページをライトに寄せる)が済んで、6ページのトークンが
 *   完全一致したあとに切り出している。★統一より先に切り出すと、
 *   統一の差分と混ざって何を変えたのか読めなくなる(E-16: 変数を1つずつ)。
 *
 * ★切り出し前に照合済み: :root を持つ5ページで「値の不一致は0件」。
 *   ページによって持っていないトークンはあるが、値が違うものは無い。
 *
 * 中身は3ブロックだけ:
 *   1. :root      — 色と半径のトークン
 *   2. リセット   — box-sizing / margin / padding、[hidden]
 *   3. .state     — 読込中・見つからない・取得失敗の箱(4ページで完全一致していた)
 *
 * ★ページ固有のCSSはここに入れない。各HTMLの <style> に残す。
 *   ここに入れてよいのは「6ページで同じもの」だけ。
 *
 * ★キャッシュ: Cloudflare Pages の静的ファイルは
 *   Cache-Control: public, max-age=0, must-revalidate で配信される(実測)。
 *   毎回サーバに問い合わせて ETag で確認するので、
 *   ★更新したときに古いCSSが返ることはない。
 *   (max-age=300 が付くのは Pages Functions のAPI応答だけで、静的ファイルには付かない)
 */

:root {
  --bg: #f4f4f2;
  --bg2: #eaeae7;
  --panel: #fff;
  --border: #c8c8c0;
  --border-light: #ddd;
  --ink: #1a1a1a;
  --ink2: #555;
  --ink3: #888;
  --ink4: #aaa;

  /* 枠番6色。★識別のためだけに使う。良し悪しを示唆する色ではない */
  --w1: #e8e8e8; --w1-ink: #222;
  --w2: #1a1a1a; --w2-ink: #fff;
  --w3: #d62839; --w3-ink: #fff;
  --w4: #1e6fbf; --w4-ink: #fff;
  --w5: #e8c820; --w5-ink: #222;
  --w6: #1b9e4b; --w6-ink: #fff;

  /* ★決まり手の6色は「例外として残す」判断(2026-08-06)。グレーに直さないこと。
     規約が禁じたのは「良い=緑 / 悪い=赤」という★価値判断の色であって、
     「6色以上使うな」ではない。決まり手の色は枠番色と同じ
     ★「識別のための色」で、性質が同じなので規約の趣旨に反しない。
     (グレー階調6段では6種類を判別できない、という実務上の理由もある)
     ★ただし彩度を落とし、枠番色より目立たなくしてある。 */
  --k-nige:#7ba79a; --k-sashi:#8fa6bd; --k-makuri:#c0917f;
  --k-makurizashi:#a894b3; --k-nuki:#a8adb1; --k-megumare:#8d949a;

  /* バーの塗り。★単色。グラデーションは使わない(AI感を出さない) */
  --fill: #555;
  --fill-weak: #999;

  /* ★角丸は最小限 */
  --radius: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* 読込中 / 見つからない / 取得失敗 の箱 */
.state {
  margin: 24px 0; padding: 18px; border: 1px solid var(--border); background: var(--panel);
  font-size: 13px; color: var(--ink2);
}
.state b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.state .sub { font-size: 12px; color: var(--ink3); margin-top: 6px; }