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

.top{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;
  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:820px){
  .top .in{height:auto;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}
.pf .ph{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.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-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.1;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}
/* 区切りの「|」は文字。装飾罫線の色だと読めない（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}

/* 下段 */
.lower{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.lower .full{grid-column:1/-1}

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