/* 案A — Baseball Savant 型
   横3列。左=選手と成績表 / 中央=パーセンタイル / 右=今季成績と映像。
   スクロールせずに全体が見えることを最優先にする。 */

/* 追従させる。以前は静的で、ページ全長のうち約85%の区間でCTAが画面上に無かった */
.top{position:sticky;top:0;z-index:var(--z-sticky);
  border-bottom:1px solid var(--line);background:var(--surface);padding:0 var(--pad)}
.top .in{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:16px;
  min-height:56px;flex-wrap:wrap}
.top .brand{display:flex;align-items:center;gap:9px}
.top .brand img{width:26px;height:auto}
.top .brand span{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.top .who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-left:16px;border-left:1px solid var(--line-2)}
.top .who b{font-size:15px;font-weight:700;color:var(--ink)}
.top .acts{margin-left:auto;display:flex;gap:8px}
@media (max-width:960px){
  .top .in{min-height:0;padding:12px 0}
  .top .who{padding-left:0;border-left:none;flex-basis:100%}
  .top .acts{margin-left:0}
}

.wrap{max-width:1400px;margin:0 auto;padding:20px var(--pad) 0}
.cols{display:grid;grid-template-columns:302px minmax(0,1fr) 316px;gap:18px;align-items:start}
@media (max-width:1180px){.cols{grid-template-columns:280px minmax(0,1fr)}
  .cols .c3{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}}
@media (max-width:760px){.cols{grid-template-columns:1fr}
  .cols .c3{grid-template-columns:1fr}}

/* 左列 */
.pf{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
/* aspect-ratio は Safari 15 未満で未対応。使えない環境では写真枠が高さ0になり
   選手写真が消えるので、padding-top で 4:3 を作る古い書き方を先に置く。 */
.pf .ph{position:relative;height:0;padding-top:75%;overflow:hidden;background:var(--surface-2)}
.pf .ph img{position:absolute;top:0;left:0}
@supports (aspect-ratio:4/3){
  .pf .ph{height:auto;padding-top:0;aspect-ratio:4/3}
  .pf .ph img{position:static}
}
.pf .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.pf .id{padding:15px 17px 14px;border-bottom:1px solid var(--line)}
.pf .id .n{font-family:var(--disp);font-size:27px;font-weight:700;letter-spacing:-.01em;
  line-height:1.08;color:var(--ink)}
.pf .id .ja{font-size:13.5px;color:var(--muted);margin-top:3px}
.pf .id .meta{font-size:13px;color:var(--body);margin-top:8px}
/* 進路状況はコーチが最初に確認する情報。名前の直下に置く */
.pf .id .status{margin-top:11px}

/* 看板数値。写真と名前のすぐ下に置いて、スクロール前に実力が分かるようにする */
.keyrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.keyrow > div{background:var(--surface);padding:12px 4px 13px;text-align:center;min-width:0}
.keyrow .n{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.05}
.keyrow .n small{font-size:.48em;font-weight:600;color:var(--muted);margin-left:2px}
.keyrow .k{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
/* 区切りの「|」は文字。装飾罫線の色だと読めない（1.55:1）ので --muted にする */
.pf .id .meta .sep{color:var(--muted);margin:0 6px}
.pf .body{padding:13px 17px 15px}
.pf .body + .body{border-top:1px solid var(--line)}
.pf h4{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}

/* 中央列 */
.c2 > .box{padding:16px 18px 18px}
.pctgrp{margin-bottom:16px}
.pctgrp:last-child{margin-bottom:0}
.pctgrp > h4{font-size:12.5px;font-weight:700;color:var(--ink);
  padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* 右列 */
.c3 > * + *{margin-top:18px}

/* 下段 — 以前は auto-fit の4列グリッドで、本人談が321px幅×2147px高に潰れ、
   2列がまるごと空いていた。各セクションは横幅いっぱいに使う縦積みにする。 */
.lower{margin-top:30px}
.lower > .sec{margin-bottom:30px}
.lower > .split{margin-bottom:30px}
.lower > *:last-child{margin-bottom:0}

/* 写真（4枚前後）と連絡先は、単独だと横に間延びするので並べる */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
.split > .sec{margin-bottom:0}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:30px}}
/* 左半分に4枚なので2列。写真が増えても崩れないよう auto-fill の下限だけ決める */
.split .gal{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* グリッドの子が中身の最小幅で膨らむのを防ぐ */
.cols > *,.lower > *{min-width:0}


/* ── 選手一覧のレール（引き出し式）────────────────────
   常時表示していたが、本文の幅を取るのと、選手が増えると下が見切れるため
   ハンバーガーで開閉する引き出しにした。画面幅に関係なく同じ挙動にする。 */
.shell{display:block}

/* Safari は button を flex コンテナにしても子要素を正しく並べられず、gap も
   14.1 未満では無視される。3本線は flex を使わず margin で積む。 */
.burger{display:block;box-sizing:border-box;
  width:36px;height:36px;padding:10px 8px;border-radius:6px;flex:none;line-height:0;
  border:1px solid var(--line-3);background:var(--surface-2)}
.burger span{display:block;width:100%;height:2px;background:var(--ink);border-radius:1px}
.burger span + span{margin-top:4px}
.burger:hover{background:var(--surface-3)}

.railbd{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-backdrop);background:rgba(6,7,9,.6);
  opacity:0;pointer-events:none;transition:opacity .2s}
body.rail-open .railbd{opacity:1;pointer-events:auto}

.rail{position:fixed;top:0;left:0;bottom:0;width:264px;z-index:var(--z-modal);
  background:var(--surface);border-right:1px solid var(--line-2);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
body.rail-open .rail{transform:none}
.rail-in{padding:0 0 24px}

.rail-h{position:sticky;top:0;z-index:1;background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:14px 14px 12px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rail-h .ct{background:var(--surface-3);border-radius:9px;padding:1px 7px;font-size:11px}
.railx{margin-left:auto;width:28px;height:28px;border-radius:6px;font-size:19px;
  line-height:1;color:var(--muted);border:1px solid transparent}
.railx:hover{color:var(--ink);background:var(--surface-3);border-color:var(--line-2)}

/* 区分の見出し。以前は 11px・--muted で、選手名の下の補助文字（同じ --muted）と
   色も大きさもほぼ同じだったため、4区分が一続きの名簿に見えていた。
   見出しを一段明るい面（--surface-3）のベタ帯にして、区分の切れ目を線でなく面で示す。
   帯はフラット塗り。グラデーションも発光も使わない（base.css 1・2） */
.rgrp{margin-top:16px}
.rgrp:first-of-type{margin-top:0}
.rgrp h4{display:flex;align-items:center;gap:8px;
  background:var(--surface-3);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);
  padding:9px 14px;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink)}
.rgrp h4 .t{min-width:0}
.rgrp h4 .ja{display:block;font-size:11px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-top:2px}
/* 人数。区分の規模がひと目で分かる。--surface は帯より暗いので数字が沈まない */
.rgrp h4 .n{margin-left:auto;flex:none;background:var(--surface);color:var(--muted);
  border-radius:9px;padding:1px 7px;font-size:11px;font-weight:600;letter-spacing:0}
.rgrp ul{list-style:none;padding:4px 0}

.ritem{display:block;padding:8px 14px;border-left:3px solid transparent}
.ritem:hover{background:var(--surface-2)}
.ritem .nm{display:block;font-size:13.5px;font-weight:500;color:var(--body)}
/* 副題は漢字の氏名。英語名より一段落として、行の主役が綴りだと分かるようにする */
.ritem .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
/* 表示中の選手。同じ暗色だと見分けがつかないので赤を効かせる */
.ritem.on{background:rgba(232,53,79,.13);border-left-color:var(--red)}
.ritem.on .nm{color:#fff;font-weight:600}
.ritem.on .sub{color:rgba(255,255,255,.72)}

@media print{.rail,.railbd,.burger{display:none !important}}

/* ヘッダーは丸マーク＋赤黒ワードマークの2点だけ（2026-08-05 色川CEO）。
   選手名・ポジション・卒業年・所属は、すぐ下の選手カードに全部載っているので重複させない。
   暗背景なのでマークは白版 ab-mark-white.png。白背景に戻す場合だけ ab-mark-ink.png に
   差し替えること（取り違えるとマークが消える）。
   丸マークと文字は字面の高さが違うので、同じ height では揃わない。実物の比率に合わせて
   マーク:文字 ≒ 40:23 で置いている。 */
.top .brand{display:flex;align-items:center;gap:11px}
.top .brand .mark{height:40px;width:auto;display:block}
.top .brand .wordmark{height:23px;width:auto;display:block}
@media (max-width:960px){
  .top .brand .mark{height:34px}
  .top .brand .wordmark{height:19px}
}