/* 広い画面（1280px 以上）の作り（運営者 10/6・10/15「PC で開くと両側が大きく余る」）. site.css の 30KB の予算の外に置き、
   `<link media="(min-width: 1280px)">` で読む（1280px 未満では適用されない）. 念のため中身も全部 @media の中に書く. 対象は body の
   class（`lay-home` `lay-day` `lay-race` `lay-marks` `lay-hub`）が付いたページの本文だけ = 読み物のページの本文は 960px のまま.
   ヘッダー・速報帯・フッターの幅だけは全ページ 1400px にそろえる（ページを移っても上下の枠が動かない）.
   style 属性は使わない（CSP）. 注記:
   - 幅は 1400px（本文は 1352px）まで。1 行が長くなる文章は列にして、1 列 700px 前後に収める.
   - 流れる段組み（column-count）は「見出し + 箱」が兄弟で並ぶだけの所（レースの各タブ・印の成績）に使う. 見出しは箱と離さず（break-after）、
     箱は途中で切らない（break-inside）. */
@media (min-width: 1280px) {
.gh-in, .ticker .wrap, .gf-in { max-width: 1400px; padding-left: 24px; padding-right: 24px; }
.lay-home main > .wrap, .lay-day main > .wrap, .lay-race main > .wrap, .lay-marks main > .wrap, .lay-hub main > .wrap { max-width: 1400px; padding-left: 24px; padding-right: 24px; }

/* --- トップ: 節を 2 列の格子に（ふつうは 1 列ぶち抜き） --- */
.lay-home main > .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
.lay-home main > .wrap > * { grid-column: 1 / -1; min-width: 0; }
.lay-home main > .wrap > .usage:has(+ .top-note) { grid-column: 1; }
.lay-home main > .wrap > .top-note { grid-column: 2; }
.lay-home .usage h2 { margin-top: 0; }
.lay-home .top-note { margin-top: 0; }
.lay-home .hero { margin-bottom: 14px; }
.lay-home .hero h1 { font-size: 30px; }

/* A（動く展開）: 地図と帯を大きく・札は右に */
.lay-home .hm-stage { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; }
.lay-home .hm-mapbox { height: 340px; }
.lay-home .hm-stripbox { height: 288px; }
.lay-home .hm-tile { height: 92px; }
.lay-home .hm-still-cv { height: 190px; }
.lay-home .hm-a-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; }
.lay-home .hm-lead { max-width: 72em; }
.lay-home .hm-card { position: sticky; top: 16px; }
.lay-home .hm-btns { grid-template-columns: minmax(0, 1fr); }

/* 今週の開催: 場ごとのカードを 2 列に */
.lay-home .meet { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 12px 20px; align-items: stretch; }
.lay-home .meet > :not(.meet-day) { grid-column: 1 / -1; }
.lay-home .meet-day { margin: 0; display: flex; flex-direction: column; }
.lay-home .meet-day:only-of-type { max-width: 700px; }
.lay-home .meet-day > .actions:last-child { margin-top: auto; }

/* B（答え合わせボード）: 盤を大きく・カードは 4 列 */
.lay-home .hm-b { --fw: clamp(16px, calc((100vw - 96px) / 17), 76px); }
.lay-home .hm-st-num { --fw: 52px; }
.lay-home .hm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lay-home .hm-tape-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lay-home .hm-hit-list { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 6px 14px; }

/* 使い方・note の箱・データを見る */
.lay-home .hub-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lay-home .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lay-home .usage .panel ul { column-count: 2; column-gap: 24px; }
.lay-home .usage .panel li { break-inside: avoid; }
.lay-home .note-box.sister { max-width: 760px; }

/* --- 日別: 六角形の地図を大きく・場ごとの一覧は場を横に並べる・早見表の画像も横に --- */
.lay-day main > .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
.lay-day main > .wrap > * { grid-column: 1 / -1; min-width: 0; }
.lay-day main > .wrap > .figure { grid-column: auto; }
.lay-day .dm-stage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
.lay-day .dm-cl { max-width: 500px; }
.lay-day .dm-hub { min-height: 168px; }
.lay-day .track-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); column-gap: 28px; align-items: start; }
.lay-day .track-scope:has(.track-group ~ .track-group ~ .track-group) { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); column-gap: 20px; }
.lay-day .track-scope > .picker { grid-column: 1 / -1; }
.lay-day .track-group { min-width: 0; }
.lay-day .track-group > h2:first-child { margin-top: 18px; }
.lay-day .track-group:only-child { max-width: 960px; }

/* --- レース: 先頭の案内は 880px に収め、タブの中は 2 列に --- */
.lay-race main > .wrap > :is(.status, h1, .race-nav, .lead, .actions, .note, .note-strip, p.panel, .note-box) { max-width: 880px; }
.lay-race .tab-panel { column-count: 2; column-gap: 32px; padding-bottom: 20px; }
.lay-race .tab-panel > h2 { margin-top: 0; }
.lay-race .tab-panel .panel { margin-bottom: 28px; }
.lay-race .tab-panel > h2, .lay-race .tab-panel > section > h2 { break-after: avoid; }
.lay-race .tab-panel .panel, .lay-race .tab-panel section, .lay-race .tab-panel .figure { break-inside: avoid; }
.lay-race .tab-panel .panel.article { break-inside: auto; }
/* 出走馬: 左に条件・自分の印・注記、右に出走表（表が 1 列で横に間延びしない）. 6 行は左の項目の分で、右の表はその全部をまたぐ（7 行目が余りを持つ） */
.lay-race #tab-entries { column-count: 1; }
.lay-race #tab-entries .whatif > .panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 28px; align-items: start; }
.lay-race #tab-entries .whatif > .panel > * { grid-column: 1; }
.lay-race #tab-entries .whatif > .panel > .scroll { grid-column: 2; grid-row: 1 / span 7; }
.lay-race #tab-entries > .panel:not(:has(.whatif)) { max-width: 1100px; }

/* --- 印の成績: 2 列に流す（長いレース一覧は列をまたいでよい） --- */
.lay-marks main > .wrap { column-count: 2; column-gap: 40px; }
.lay-marks main > .wrap > :is(.breadcrumb, h1, .lead, .tb-strip) { column-span: all; }
.lay-marks main > .wrap > :is(h2, h3) { break-after: avoid; }
.lay-marks .panel { break-inside: avoid; }
.lay-marks .panel:has(> .pl-list) { break-inside: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lay-marks .day-race { break-inside: avoid; }

/* --- 一覧（/races/）: 週のレースは「日 + 場」ごとの行を 2 列に流す --- */
.lay-hub section[aria-labelledby="races-hub-week"] { column-count: 2; column-gap: 40px; }
.lay-hub section[aria-labelledby="races-hub-week"] > h2 { column-span: all; }
.lay-hub section[aria-labelledby="races-hub-week"] > h3 { break-after: avoid; margin-top: 0; padding-top: 18px; }
.lay-hub section[aria-labelledby="races-hub-week"] > .linklist { break-inside: avoid; }
}