html{-webkit-text-size-adjust:100%}
body{
/* ★単色。以前は radial-gradient 2枚を重ねていた */
background: var(--bg);
color:var(--ink);
/* ★他4ページと同じ指定順にする(実機で書体が違って見えていた) */
font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
line-height:1.5;
min-height:100vh;
/* ★等幅数字を body に指定する(他5ページと同じ)。
個別指定だと足し忘れた箇所で桁がずれ、6コースを縦に見比べられなくなる。 */
font-variant-numeric: tabular-nums;
padding:clamp(16px,4vw,48px);
}
.wrap{max-width:920px;margin:0 auto}
/* ---- header ---- */
.breadcrumb{font-size:11px;color:var(--ink3);margin-bottom:8px}
.breadcrumb a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--border)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:10px}
.name-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
h1{font-size:clamp(34px,7vw,56px);font-weight:800;letter-spacing:.02em;line-height:1}
.toban{font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink2);border:1px solid var(--border);border-radius:var(--radius);padding:4px 12px}
.meta{margin-top:14px;display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.meta b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
/* 母数・信頼度は値より一段落とす。色は付けない(意味の色を使わない) */
.meta .n-sub{color:var(--ink2);font-variant-numeric:tabular-nums}
/* ---- 登番入力(全選手対応) ---- */
.id-form{margin:24px 0 8px;display:inline-flex;padding:4px;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);align-items:center}
.id-form label{font-size:12px;color:var(--ink3);padding-left:12px;letter-spacing:.04em}
.id-form input{
font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
color:var(--ink);background:transparent;border:0;border-radius:var(--radius);
padding:9px 6px;width:80px;text-align:center;
}
.id-form input:focus{outline:1px solid var(--fill);outline-offset:-1px}
.id-form button{font:inherit;font-size:13px;font-weight:600;color:var(--ink2);background:transparent;border:0;border-radius:var(--radius);padding:9px 18px;cursor:pointer;transition:.25s}
.id-form button:hover{color:var(--ink)}
/* ---- 状態表示 ---- */
.state{
margin:28px 0;padding:22px;border:1px solid var(--border);border-radius:var(--radius);
background:var(--panel);font-size:14px;color:var(--ink2);
}
.state b{color:var(--ink);display:block;font-size:15px;margin-bottom:4px}
.state .hint{font-size:12px;color:var(--ink3);margin-top:8px}
/* ---- section titles ---- */
/* ★見出しの形は base.css の .sec-h に寄せた(2026-09-06・Step 1)。
★ここに持っていた定義は消した。★ページごとに見出しを持たない(E-40) */
.section-sub{font-size:12px;color:var(--ink3);margin-bottom:16px}
/* ---- toggle ---- */
.toggle{margin:20px 0 8px;display:inline-flex;padding:4px;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.toggle button{font:inherit;font-size:13px;font-weight:600;color:var(--ink2);background:transparent;border:0;border-radius:var(--radius);padding:9px 18px;cursor:pointer;transition:.25s}
.toggle button.on{background:#333;color:#fff}
.view-note{font-size:13px;color:var(--ink3);margin:10px 2px 24px;min-height:1.2em}
/* ★期間別の表(2026-09-01)。★列=期間・行=指標。★同じ量は横で比べる */
/* ★★2026-09-01: ★横スクロールの手がかり(★影)。★/terms と同じ形(HANDOFF §5-96)。
★左右に影を置き、★その上に背景色の板を ★local で重ねる。
★★端まで来ると板が影を隠す = ★スクロールできる側にだけ影が出る。
★★★溢れていない箱では両端とも板が乗るので★影は出ない。
★実測: ★高さ ±0 / ★背景色の種類 ±0(★グラデーションは backgroundColor に出ない) /
★但し書き ±0。★正本は public/doc.css の .doc .tw。 */
.tw{
overflow-x:auto;
background:
linear-gradient(to right, var(--bg) 40%, transparent) left center / 28px 100% no-repeat local,
linear-gradient(to left, var(--bg) 40%, transparent) right center / 28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) left center / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) right center / 14px 100% no-repeat scroll;
}
.ptbl{/* border-collapse は .tile(base.css) */font-size:13px;margin-top:10px}
/* ★padding は 6px10px から 5px6px にした。★320px(枠288px)で 319.4px → 287.4px。
★見出しも「直近5年」→「5年」に縮めて ★282.8px(実測・2026-09-01) */
/* ★★セルの border を外した(2026-09-06・Step 5-6)。★線が二重だった:
★.tile の border-spacing 1px が★既に罫線になっている。
★その上に border:1px solid var(--border) を敷くと ★2本になる。
★元の値: border: 1px solid var(--border); */
.ptbl th,.ptbl td{padding:5px 6px;text-align:right;white-space:nowrap}
.ptbl thead th{background:var(--panel);color:var(--ink2);font-weight:700;text-align:center;line-height:1.35}
.ptbl tbody th{text-align:left;font-weight:600;color:var(--ink2)}
.ptbl td{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.ptbl-n{display:block;font-size:11px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}
/* ---- course lanes ---- */
.lanes{display:flex;flex-direction:column;gap:12px}
.lane{
position:relative;background:var(--panel);border:1px solid var(--border);
border-radius:var(--radius);padding:16px 18px 14px 16px;
display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:start;
overflow:hidden;
}
.lane::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--wc,transparent);opacity:.9}
.badge{
width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;
font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;
background:var(--wc);color:var(--bc,var(--ink));
border:1.5px solid rgba(0,0,0,.14);margin-top:2px;
}
.track-wrap{min-width:0}
.track-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.course-label{font-size:12px;color:var(--ink2);font-weight:600}
.rate{font-variant-numeric:tabular-nums;font-weight:800;font-size:22px;line-height:1}
.rate small{font-size:12px;font-weight:600;color:var(--ink2);margin-left:2px}
.rate small.pctl{font-size:11px;font-weight:400;color:var(--ink3);margin-left:6px}
.rate.none{color:var(--ink3)}
.track{position:relative;height:12px;border-radius:2px;background:var(--bg2);border:1px solid var(--border-light);overflow:visible}
.fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--fill);width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}
.pop-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--mark);left:0;transition:left .6s cubic-bezier(.4,0,.2,1)}
.pop-marker::after{content:"全出走平均";position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--ink2);white-space:nowrap;letter-spacing:.04em}
.pop-marker.is-right::after{left:auto;right:0;transform:none}
.pop-marker.is-left::after{left:0;transform:none}
.ghost{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--ink3);background:transparent;left:0;transition:left .6s cubic-bezier(.4,0,.2,1);opacity:0}
/* ★1着だったレースの一覧(2026-09-05)。★★必ず畳む —
★実測(390px): ★開いたままだと ★306走で ★+6,500px（★ページが2.2倍）。
★★畳めば ★+755px（★6つの summary のぶん。★走数によらずほぼ一定）。
★1コースだけ開いたときは ★15走 +314px / ★184走 +3,844px。 */
.winlist{margin-top:8px}
.winlist summary{font-size:11px;color:var(--ink3);cursor:pointer}
.winlist .wr{display:block;font-size:11px;color:var(--ink2);line-height:1.9;
white-space:nowrap;font-variant-numeric:tabular-nums}
/* ★場名が長いと 320px で溢れる(★実測: 「ボートレース住之江」+ST で 298px / 使える285px)。
★★ST は入れない。★それでも溢れる端末のために★横スクロールを保険で置く。 */
.winlist .wl-body{overflow-x:auto}
/* ---- kimarite strip ---- */
.kimarite{margin-top:11px}
.k-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.k-label{font-size:10.5px;color:var(--ink3);letter-spacing:.06em}
.k-note{font-size:10px;color:var(--ink3)}
.k-note.warn{color:var(--ink2)}
.k-strip{display:flex;height:16px;border-radius:2px;overflow:hidden;border:1px solid var(--border-light);background:var(--bg2)}
.k-seg{position:relative;display:grid;place-items:center;min-width:0;font-size:9.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;transition:filter .2s;cursor:default}
.k-seg span{padding:0 4px;overflow:hidden;text-overflow:clip}
.k-seg:hover{filter:brightness(1.15)}
.k-empty{height:16px;border-radius:2px;border:1px dashed var(--border-light);background:var(--bg2);display:grid;place-items:center;font-size:10px;color:var(--ink3)}
.lane[data-thin="1"] .k-seg{opacity:.45}
.lane[data-thin="1"] .k-strip{border-style:dashed}
.conf{width:96px;text-align:right;margin-top:2px}
.conf .n{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.conf .n span{font-size:11px;color:var(--ink2);font-weight:600}
.dots{display:flex;gap:3px;justify-content:flex-end;margin-top:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--fill-subtle)}
.dot.f{background:var(--fill)}
.conf .tag{font-size:10px;color:var(--ink3);margin-top:5px;letter-spacing:.03em}
.lane[data-thin="1"]{opacity:.85}
.lane[data-none="1"]{opacity:.6}
/* ---- 相手依存3軸 ---- */
.dep-section{margin-top:36px}
.axis-toggle{margin:12px 0 16px;display:inline-flex;padding:3px;gap:3px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.axis-toggle button{font:inherit;font-size:12px;font-weight:600;color:var(--ink2);background:transparent;border:0;border-radius:var(--radius);padding:7px 14px;cursor:pointer;transition:.25s}
.axis-toggle button.on{background:#333;color:#fff}
.axis-note{font-size:12px;color:var(--ink3);margin:0 0 16px 2px}
.dep-lanes{display:flex;flex-direction:column;gap:10px}
.dep-lane{
background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
padding:14px 18px;display:grid;grid-template-columns:44px 1fr 140px;gap:14px;align-items:center;
}
/* ★★2026-09-01: ★font-size を ★16px → ★19px にした(HANDOFF §5-93)。
★理由: ★.badge が ★19px/800 と ★16px/800 の★2段階を消費していた(★同じ艇番のバッジ)。
★★★箱は 36x36 のまま。★実測: ★行の高さも文書の高さも★1pxも動かない
(★dep-lane 78/105/105 のまま・★文書 5,198px のまま)。★数字は 34x34 で収まる。
★44x44 に揃える案は★行が 78→86px、★文書が +20px になるので★採らなかった。 */
.dep-lane .badge{width:36px;height:36px;font-size:19px;border-radius:10px}
.dep-bars{min-width:0}
.dep-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dep-row:last-child{margin-bottom:0}
.dep-row-label{font-size:11px;color:var(--ink2);width:96px;flex-shrink:0;text-align:right}
.dep-bar-wrap{flex:1;height:10px;border-radius:2px;background:var(--bg2);border:1px solid var(--border-light);position:relative;overflow:visible}
.dep-bar{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.dep-bar.a{background:var(--fill)}
.dep-bar.b{background:var(--fill-weak)}
.dep-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;width:48px;text-align:right}
.dep-meta{text-align:right}
/* 型ラベルは無彩色。良し悪しの含意を持たせない(★だけが注目を示す) */
.dep-type{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
/* ★.dep-type .star は消した(2026-09-07)。★元: .dep-type .star{color:var(--ink2);margin-right:2px} */
.dep-diff{font-size:11px;color:var(--ink2);margin-top:2px;font-variant-numeric:tabular-nums}
.dep-n{font-size:10px;color:var(--ink3);margin-top:2px}
.dep-lane[data-no-data="1"]{opacity:.45}
.dep-lane[data-no-data="1"] .dep-bars{display:flex;align-items:center;justify-content:center}
/* ---- legends & footer ---- */
.k-legend{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2);align-items:center}
.k-legend .chip{display:inline-flex;align-items:center;gap:6px}
.k-legend i{width:12px;height:12px;border-radius:2px;display:inline-block}
.foot{
margin-top:18px;padding:16px 18px;border:1px solid var(--border);
border-radius:var(--radius);background:var(--bg2);
font-size:12.5px;color:var(--ink2);line-height:1.7;
}
.foot b{color:var(--ink)}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink3)}
.legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.lg-fill{width:14px;height:8px;border-radius:2px;background:var(--fill)}
.lg-pop{width:2px;height:12px;background:var(--mark)}
.lg-ghost{width:8px;height:8px;border-radius:50%;border:2px solid var(--ink3)}
/* ---- 読み方ガイド ---- */
.guide{
margin-top:32px;padding:20px;border:1px solid var(--border);
border-radius:var(--radius);background:var(--bg2);
font-size:12.5px;color:var(--ink2);line-height:1.8;
}
.guide h3{font-size:14px;color:var(--ink);margin-bottom:12px;font-weight:700}
.guide h4{font-size:12px;color:var(--ink);margin:14px 0 6px;font-weight:700}
.guide dl{margin:0;padding:0}
.guide dt{font-weight:700;color:var(--ink);display:inline}
.guide dd{display:inline;margin:0 0 0 4px}
.guide dd::after{content:"";display:block;margin-bottom:6px}
.guide .tech{font-size:11px;color:var(--ink3);margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
@media (max-width:600px){
.lane{grid-template-columns:38px 1fr;gap:12px}
.conf{grid-column:2/3;width:auto;text-align:left;display:flex;gap:12px;align-items:center;margin-top:4px}
.dots{margin-top:0}.conf .tag{margin-top:0}
.dep-lane{grid-template-columns:36px 1fr;gap:10px}
.dep-meta{grid-column:2/3;text-align:left;display:flex;gap:12px;align-items:baseline}
}
@media (prefers-reduced-motion:reduce){
.fill,.pop-marker,.ghost,.dep-bar{transition:none}
}