/* Asian Breeze — Player Showcase / 共通土台
   3案（A/B/C）すべてがこれを読み込み、各案は a.css / b.css / c.css で上書きする。

   白基調（2026-08-04 テソン指示で暗背景から変更）。
   実在のスポーツサイト（Baseball Savant / Perfect Game / NBA / プレミアリーグ）を
   実際に開いて確認した上で、次を守る。

   1. 面はフラット。カードにグラデーションを敷かない
   2. 光らせない。box-shadow の色付きグロー、ホログラム、発光する枠は使わない
   3. 背景にテクスチャを敷かない（斜めストライプ・放射グラデーションは廃止）
   4. 赤は「押す場所」と「一番良い数値」だけ。面積を増やさない
   5. 極小の全大文字ラベルを並べない。ラベルは12px以上、字間は控えめに
   6. 書体は1つ（Inter）。数字は tabular-nums で桁を揃える
   7. コントラストは本文9:1以上、補助4.5:1以上を確保する

   白基調で一番やりがちな失敗は「クリーム色っぽい背景＋薄いグレー文字」で、
   これは明るく見えるどころか読みにくくなる。ここでは
   ・背景はクリーム寄りにせず、わずかに青を含む中間色にする
   ・補助文字は必ず 4.5:1 以上（#5E6C7A が下限）
   を守っている。 */

:root{
  /* 面 — ページはごく薄いグレー、カードは純白。この差でカードが浮いて見える */
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --surface-2:#F7F9FB;
  --surface-3:#EDF1F5;

  --line:#E3E8ED;      /* 面と面の仕切り。装飾用 */
  --line-2:#C8D1DA;    /* 少し強い仕切り。装飾用 */
  --line-3:#7A8895;    /* 押せる部品の枠。白 3.63:1 / --bg 3.35:1 で WCAG 1.4.11 を満たす */

  /* 文字 */
  --ink:#0F1721;        /* 見出し  白に対して 17.9:1 */
  --body:#384453;       /* 本文    白に対して  9.9:1 */
  --muted:#5E6C7A;      /* 補助    白に対して  5.4:1 / --bg に対して 5.0:1 */

  /* 赤 — ABのブランド赤。白背景ならそのまま文字にも使える（5.9:1） */
  --red:#C8102E;
  --red-brand:#C8102E;
  --red-deep:#A00D24;  /* 赤ボタンのホバー。白文字で 8.15:1 */

  /* データ用の段階色。パーセンタイルの高低を示すためだけに使う。
     白地に載せるので、白抜き文字が読める濃さ（4.8:1 以上）に揃えてある。
     赤だけでなく青・琥珀も使う（数値の高低が色で分かるようにするため） */
  --d-hi:#C8102E;
  --d-mid:#A8600A;
  --d-lo:#2F6690;
  --d-track:#E3E8ED;

  --ok:#17753F;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --jp:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;

  --z-sticky:10;
  --z-dock:30;
  --z-modal:50;

  --pad:clamp(16px,3vw,32px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1,"cv05" 1;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
.jp{font-family:var(--jp)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── 文字の型 ─────────────────────────────────────
   全大文字は「見出し」と「表のヘッダ」だけ。本文には使わない。 */
.h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.04;color:var(--ink)}
.h2{font-size:17px;font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.h3{font-size:14px;font-weight:600;color:var(--ink)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.tiny{font-size:12px;color:var(--muted)}

/* セクション見出し。装飾の記号は付けない */
.sec{margin-bottom:28px}
.sec:last-child{margin-bottom:0}
.sec > header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.sec > header .h2{margin-right:auto}
/* 見出し脇の小さな注記。囲みの .note とは別物なので名前を分ける */
.hmeta{font-size:12.5px;color:var(--muted)}

/* ── 面 ───────────────────────────────────────── */
.box{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,33,.04)}
.box-pad{padding:18px 20px}

/* ── 表（Savant / PG の成績表と同じ作り） ────────── */
.tbl{font-size:13.5px}
.tbl th{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:right;padding:0 10px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl th:first-child{text-align:left}
.tbl td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;color:var(--body);white-space:nowrap}
.tbl td:first-child{text-align:left;color:var(--ink);font-weight:500}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.total td{font-weight:700;color:var(--ink);background:var(--surface-2)}
/* grid/flex の子は min-width:0 を持たないと、中身の最小幅がトラックを押し広げる */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}

/* ── 定義リスト（プロフィール） ───────────────── */
.dl{font-size:14px}
.dl div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.dl div:last-child{border-bottom:none}
.dl dt{flex:0 0 116px;color:var(--muted);font-size:13px}
.dl dd{flex:1;color:var(--ink);min-width:0}
.dl dd .sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
/* 本文と同色のリンクは押せると分からない。赤＋下線で「押す場所」と分かるようにする */
.lnk{color:var(--red-brand);border-bottom:1px solid rgba(200,16,46,.35)}
.lnk:hover{border-bottom-color:var(--red-brand)}

/* ── パーセンタイルのバー ────────────────────────
   Baseball Savant の作りに合わせる。目盛りヘッダ＋バー＋末端に順位＋右に実測値。 */
.pctwrap{padding:4px 0}
.pcthead{display:grid;grid-template-columns:118px 1fr 62px;gap:12px;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding-bottom:6px}
.pcthead .scale{display:flex;justify-content:space-between}
.pctrow{display:grid;grid-template-columns:118px 1fr 62px;gap:12px;align-items:center;padding:7px 0}
.pctrow .nm{font-size:13px;color:var(--body);text-align:right}
.pctrow .val{font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.track{position:relative;height:22px;display:flex;align-items:center}
.track::before{content:"";position:absolute;left:0;right:0;height:6px;border-radius:3px;background:var(--d-track)}
.track::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-2)}
.fill{position:relative;height:6px;border-radius:3px;background:var(--d-hi);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.fill.mid{background:var(--d-mid)}
.fill.lo{background:var(--d-lo)}
.knob{position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:var(--d-hi);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.fill.mid .knob{background:var(--d-mid)}
.fill.lo .knob{background:var(--d-lo)}
@media (max-width:520px){
  .pcthead,.pctrow{grid-template-columns:88px 1fr 52px;gap:8px}
  .pctrow .nm{font-size:12px}
}

/* ── 数値タイル ───────────────────────────────── */
/* 数値タイル。列数は項目数で割り切れる数を指定すること。
   auto-fit にすると最終行に空きセルができて、面だけが並んで見える。 */
.figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.figs > div{background:var(--surface);padding:13px 4px;text-align:center;min-width:0}
/* 狭い列でも "1.230" が切れない大きさ。広い場所（.wide）だけ大きくする */
.figs .n{font-size:18px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.figs.wide .n{font-size:clamp(18px,2.2vw,26px)}
.figs .n small{font-size:.5em;font-weight:600;color:var(--muted);margin-left:2px}
.figs .k{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.figs.wide{grid-template-columns:repeat(10,minmax(0,1fr))}
@media (max-width:1080px){.figs.wide{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ── ソース表記 ───────────────────────────────── */
.src{font-size:12px;color:var(--muted)}
.src b{color:var(--body);font-weight:500}

/* ── バッジ ───────────────────────────────────── */
.chip{display:inline-block;font-size:12px;font-weight:500;color:var(--body);
  border:1px solid var(--line-2);border-radius:4px;padding:3px 9px;white-space:nowrap}
.chip.red{color:#fff;background:var(--red-brand);border-color:var(--red-brand)}
.chip.ghost{color:var(--muted)}
/* .pool は実際に押すボタン（.chip の見た目を借りているだけ）。枠を操作部品の濃さにする */
.chip.pool{border-color:var(--line-3);cursor:pointer}
.chip.pool:hover{background:var(--surface-3)}
.chip.pool.red:hover{background:var(--red-deep);border-color:var(--red-deep)}

/* ── ボタン ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:6px;font-size:14px;font-weight:600;
  border:1px solid var(--line-3);color:var(--ink);background:var(--surface-2);
  transition:background .15s,border-color .15s}
.btn:hover{background:var(--surface-3);border-color:var(--muted)}
.btn.primary{background:var(--red-brand);border-color:var(--red-brand);color:#fff}
/* --red と --red-brand は同値なので、ホバーは一段濃い --red-deep にしないと無反応になる */
.btn.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.sm{padding:7px 13px;font-size:13px}

/* ── 引用 ─────────────────────────────────────── */
.quote{font-size:15.5px;line-height:1.75;color:var(--body);max-width:70ch;text-wrap:pretty}
.quote + .by{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.by .who{font-size:14px;font-weight:700;color:var(--ink)}

/* ── 動画 ─────────────────────────────────────── */
.vplayer{background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.vplayer video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:contain}
.vplayer .meta{padding:12px 16px;border-top:1px solid var(--line);background:var(--surface);
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}

.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.clip{display:block;text-align:left;width:100%;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--surface);transition:border-color .15s}
.clip:hover{border-color:var(--line-2)}
.clip .th{position:relative}
.clip .th img{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--surface-2)}
.clip .th::after{content:"";position:absolute;left:10px;bottom:10px;width:28px;height:28px;
  border-radius:50%;background:rgba(14,16,19,.82);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'><path d='M8 5.2v13.6l11-6.8z'/></svg>");
  background-repeat:no-repeat;background-position:center}
.clip .cap{display:block;padding:10px 12px}
.clip .cap b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.clip .cap span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.gal a{border:1px solid var(--line);border-radius:6px;overflow:hidden;display:block}
.gal a:hover{border-color:var(--line-2)}
.gal img{aspect-ratio:1;width:100%;object-fit:cover}

dialog.lb{border:none;padding:0;background:transparent;width:min(94vw,1100px);max-width:94vw;
  max-height:92vh;margin:auto;z-index:var(--z-modal)}
dialog.lb::backdrop{background:rgba(15,23,33,.78)}
dialog.lb .vplayer video{max-height:74vh}
dialog.lb .meta button{margin-left:auto}

/* ── 注記 ─────────────────────────────────────── */
.note{border:1px solid var(--line-2);border-radius:8px;padding:14px 17px;
  background:var(--surface);font-size:13.5px;line-height:1.7;color:var(--body);max-width:76ch}
.note b{color:var(--ink);font-weight:600}

/* ── 案を切り替えるバー（比較用。本番では外す） ── */
.switch{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface);
  border-bottom:1px solid var(--line-2);padding:0 var(--pad)}
.switch .in{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:4px;
  height:46px;overflow-x:auto}
.switch .lab{font-size:12.5px;color:var(--muted);margin-right:6px;white-space:nowrap}
@media (max-width:560px){.switch .lab{display:none}}
.switch a{white-space:nowrap}
.switch a{font-size:13px;font-weight:600;color:var(--muted);padding:6px 13px;border-radius:5px;
  border:1px solid transparent}
.switch a:hover{color:var(--ink);background:var(--surface-3)}
.switch a.on{color:#fff;background:var(--red-brand);border-color:var(--red-brand)}
.switch .demo{margin-left:auto;font-size:12px;color:var(--muted)}
@media (max-width:640px){.switch .demo{display:none}}

footer.ft{border-top:1px solid var(--line);margin-top:44px;padding:22px var(--pad)}
footer.ft .in{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}