/*
 * nar-index-report.css — NAR 前日静的 指数表示（ショートコード [nar_index_view]）の見た目（P5）
 * 設計: 地方競馬/30_設計/25_NAR_UX_中央準拠リッチ化_実装計画.md（§3.5）／上位 24_§12
 *
 * 方針:
 *   - 中央(競馬AIナビ)静的指数ページ race-report-unified_v2.css の typography/見出し/余白/ボタン寸法/
 *     テーブル密度を「値レベルで」忠実に踏襲（中央UX統一・2026-06-22 ユーザー指示でフォント/見出し/
 *     ボタンサイズを中央へ合わせる）。
 *   - ただし中央の悪癖は持ち込まない＝!important を一切使わない（中央は 1019件）・世代増殖無し・単一CSS・
 *     全セレクタに nar- 接頭辞・中央資産（dual-index-／ability-／race-ability-report／window.DualIndexReport 等）
 *     を一切参照しない（別系統＝構造分離）。色は CSS変数に集約。
 *   - 中央のレース見出し h3 は青→水色グラデ帯／データ表は 11px・灰ヘッダ#f2f2f2・全辺#ddd罫・padding 3px 6px
 *     ／レース選択ボタンは height 32px＝これらに合わせる。
 *   - ★中央は表ヘッダ navy#1e3a8a 白字（サマリ表）と灰#f2f2f2 暗字（データ表）の2系統を持つ。NAR のデータ表は
 *     中央データ表系＝灰ヘッダ暗字を採用（白文字×明色のコントラスト不足も同時回避）。ソートは中央の汎用
 *     sortable-header（hover #e3f2fd／active #bbdefb）に合わせる。
 *   - タップ領域: 中央の寸法（ボタン32px等）に合わせる（ユーザー指示・中央UX統一優先）。
 */

.nar-index-container {
  /* 色テーマ（中央パレットを CSS変数に集約） */
  --nar-fg: #333333;
  --nar-fg-muted: #6b7280;
  --nar-brand: #005ab3;          /* 中央ブランド青 */
  --nar-brand-dark: #004494;
  --nar-grid: #dddddd;           /* 表の罫線（中央 #ddd） */
  --nar-border-soft: #dee2e6;    /* セレクタ枠 */
  --nar-th-bg: #f2f2f2;          /* データ表ヘッダ（中央 灰） */
  --nar-tab-bg: #f5f5f5;
  --nar-tab-hover: #e9e9e9;
  --nar-tab-active-bg: #e3f2fd;
  --nar-zebra: #f9f9f9;
  --nar-selector-bg: #f8f9fa;
  --nar-freshness-bg: #eef4fb;
  --nar-freshness-fg: #1f3a5f;
  --nar-focus: #a35e00;          /* キーボードフォーカス輪郭。淡背景で3:1以上＝WCAG1.4.11/2.4.11（A11Y-01是正・旧 #ffd166 は約1.4:1で不足） */
  --nar-rank1-bg: #ffe6e6;
  --nar-rank2-bg: #fff3e0;
  --nar-rank3-bg: #e3f2fd;
  --nar-odds-low-fg: #c62828;    /* 狙い目オッズ<10（短オッズ）の赤太字（中央 low-odds 準拠・AA考慮で#d32f2fより僅かに濃色） */

  /* ★レース選択UI（バナー＋Rストリップ）の和モダン緑パレット＝窓口 nar-gateway と統一（2026-06-25
     ユーザー決定「緑ピルで選択UIだけ統一」）。緑系はこの選択UIのみに限定し、タブ/データ表/Chart.js は
     中央準拠ブルー（上記 --nar-brand 系）を据置＝ページ上部=緑クロム/下部=青コンテンツの二層構成。
     値は nar-gateway.css の同名変数と一字一句一致（意匠の単一情報源）。 */
  --nar-green: #1c5c3b;          /* ブランド濃緑（選択R塗り/場名アクセント） */
  --nar-ink: #20231d;            /* 場名見出し（濃墨） */
  --nar-rpill-future-bg: #fbfaf5;
  --nar-rpill-future-fg: #3a382f;
  --nar-rpill-future-bd: #d6cfbc;
  --nar-rpill-done-bg: #e7e1d2;
  --nar-rpill-done-fg: #9a957f;
  --nar-rnav-bg: #efeadd;
  --nar-rnav-fg: #5e6b60;

  /* ★基底 typography を中央 .race-ability-report と同値に固定（これが見出し等の縦幅差の真因）。
     中央: font-size 14px / line-height 1.4 / Meiryo。これを設定しないと em 見出しがテーマの ~16px×テーマ行高
     で resolve され大きく/高くなる。色テーマと併せてコンテナで一括指定。 */
  color: var(--nar-fg);
  font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.nar-index-container *,
.nar-index-container *::before,
.nar-index-container *::after { box-sizing: border-box; }

/* 鮮度表示（NAR固有・「対象開催日 … の前日指数」＝realtime 誤認防止）。中央には無い小ピル。 */
.nar-index-freshness {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nar-freshness-fg);
  background: var(--nar-freshness-bg);
  border: 1px solid var(--nar-border-soft);
  border-radius: 6px;
}

/* ============================================================
   JS-UI / フォールバック表 のトグル（!important 不使用＝特異度で勝つ）
   ============================================================ */
.nar-index-container .nar-index-race-selector,
.nar-index-container .nar-index-race-container { display: none; }
.nar-index-container.nar-js-ready .nar-index-race-selector,
.nar-index-container.nar-js-ready .nar-index-race-container { display: block; }
.nar-index-container.nar-js-ready .nar-index-fallback { display: none; }

/* ============================================================
   レース選択（窓口 nar-gateway の Rストリップへ統一＝和モダン緑ピル＋course_bg バナー＋◀▶パン）。
   2026-06-25 ユーザー決定「緑ピルで選択UIだけ統一」。意匠は nar-gateway-rstrip 系を nar-index- 接頭辞で
   「移植」（CSS共有でなく移植＝各場SCページは nar-gateway.css を enqueue しない構造分離を維持）。
   ★no-JS は .nar-index-race-selector ごと display:none（フォールバック表に縮退）ゆえ ◀▶ の個別 no-JS
     ガードは不要（窓口は strip 自体が no-JS実体ゆえ ◀▶ を隠す必要があったが、各場は別アーキ）。
   ★状態クラスは current(選択中=緑塗り)/done(発走済=灰)/future(未来=淡枠)。緑=「今表示中のR」（窓口の
     current は時刻基準だが、各場は選択基準＝1ピルのみ緑。初期選択は現在R[時刻]or深リンク#rN）。
   ============================================================ */
.nar-index-race-selector { margin-bottom: 30px; }
.nar-index-race-buttons { display: flex; flex-direction: column; gap: 16px; }
.nar-index-venue-group { display: flex; flex-direction: column; }

/* 場ヘッダ帯（高さ44px・一体型バナー course_bg.png。場名は馬の右に重ね白縁取り＝窓口と同値）。 */
.nar-index-venue-header {
  display: flex;
  align-items: center;
  height: 44px;
  overflow: hidden;
  background: url(../assets/course_bg.png) no-repeat left center;
  background-size: cover;
}
.nar-index-container .nar-index-venue-name {
  margin: 0;
  padding: 0 0 0 96px; /* 馬の右に場名（帯高44pxに連動・窓口と同値） */
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--nar-ink);
  letter-spacing: 1px;
  position: relative;
  top: -3px;
  border: 0;
  background: none;
  box-shadow: none;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,
               0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.nar-index-container .nar-index-venue-name::before,
.nar-index-container .nar-index-venue-name::after { content: none; }

/* 単一場（各場CPT）では場名は上部の競馬場タブが示すゆえ course_bg バナーは冗長＝隠す（画像の中央風＝バナー無し）。
   複数場（全場 view）では :only-child でないため各場バナーを保持（場の識別に必要）。 */
.nar-index-race-buttons .nar-index-venue-group:only-child .nar-index-venue-header { display: none; }

/* レース選択ストリップ（中央(JRA)/netkeiba 風＝R番号ボタンの横並び・◀▶ は非表示でネイティブ横スクロール）。 */
.nar-index-rstrip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 0;
}
/* ◀▶ ナビは非表示（画像の中央(JRA)風＝矢印なし・ネイティブ横スクロール[スマホ=指/PC=ホイール・トラックパッド]で操作）。
   JS は DOM 上に残る ◀▶ の disabled を更新するが display:none ゆえ無害（hidden 要素はフォーカスを受けない）。 */
.nar-index-rnav { display: none; }
.nar-index-rpills {
  flex: 1;
  min-width: 0;                      /* flex 子が内容幅未満に縮める＝overflow-x スクロールを有効化 */
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;                  /* 全Rを1列・横スクロール（スマホ/タブレット=指で慣性ドラッグ／PC=◀▶/ホイール） */
  scroll-snap-type: x proximity;     /* ピルが緩くスナップ（mandatory より自由＝指の操作を妨げない） */
  -webkit-overflow-scrolling: touch; /* iOS の慣性スクロール */
  scrollbar-width: none;             /* Firefox: スクロールバー非表示（◀▶/ドラッグで操作） */
}
.nar-index-rpills::-webkit-scrollbar { display: none; } /* WebKit/Chrome/Safari: スクロールバー非表示 */
.nar-index-rpill {
  flex: 0 0 auto;                    /* 内容幅で並べて溢れさせる（旧 flex:1 の等幅フィルではない） */
  min-width: 54px;
  scroll-snap-align: center;         /* スナップ基準＝各ピル中央 */
  text-align: center;
  padding: 8px 12px;
  border-radius: 5px;                /* 角丸ボタン（画像の中央(JRA)風＝丸ピルでなく角丸の番号ボタン） */
  font-family: 'Roboto Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--nar-rpill-future-bd);
  background: var(--nar-rpill-future-bg);
  color: var(--nar-rpill-future-fg);
  transition: background 0.15s ease, color 0.15s ease;
}
.nar-index-rpill.nar-index-rpill-current {
  background: var(--nar-green);
  color: #ffffff;
  border-color: var(--nar-green);
}
.nar-index-rpill.nar-index-rpill-done {
  background: var(--nar-rpill-done-bg);
  color: var(--nar-rpill-done-fg);
  border-color: var(--nar-rpill-done-bg);
}
/* キーボード時のみフォーカス枠（濃色トークン＝3:1以上・マウス時は抑制＝既存ボタンの focus 規律を踏襲）。 */
.nar-index-rpill:focus { outline: 2px solid var(--nar-focus); outline-offset: 2px; }
.nar-index-rpill:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   他競馬場 切替UI（設計28 Task2・中央(JRA)/netkeiba 風の競馬場タブ＝緑系）。
   ・各場CPT は単一場固定ゆえ、同日開催の全場へ横断する導線を上部にタブとして常時表示（サーバレンダ
     <a href>＝no-JS でも遷移可・.nar-js-ready 非依存）。R選択ボタン（.nar-index-rpill）とは別系統の
     class（.nar-index-venuetab＝場遷移の <a>/現在地 <span>）で役割を分離。
   ・current（現在地）＝白地＋緑上線＋緑太字（aria-current=page・非リンク）。他場＝淡色タブのリンク。
   ・場数が多い日はタブ帯を横スクロール（overflow-x）。現在地タブは JS が中央へ寄せる（CSS-02 是正）。
   ============================================================ */
/* 地方競馬TOP（窓口）へ戻るボタン（各場ページ・競馬場選択タブの上・右揃え・2026-07-19）。
   地方=グリーンのアウトラインボタン（hoverで塗り）。テーマ本文リンクの color/下線に勝つ特異度（:link/:visited 明示）。 */
.nar-index-back-top { text-align: right; margin: 0 0 18px; } /* 戻るボタン↔競馬場選択タブ の間隔を少し広め（2026-07-19） */
.nar-index-container a.nar-index-back-top-link,
.nar-index-container a.nar-index-back-top-link:link,
.nar-index-container a.nar-index-back-top-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid var(--nar-green);
  border-radius: 6px;
  background: #ffffff;
  color: var(--nar-green);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nar-index-container a.nar-index-back-top-link:hover { background: var(--nar-green); color: #ffffff; }
.nar-index-back-top-link:focus-visible { outline: 2px solid var(--nar-focus); outline-offset: 2px; }

.nar-index-venue-switch { margin-bottom: 8px; } /* タブ帯とレース番号ボタンの間隔（少し狭め） */
.nar-index-venue-switch-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;                      /* flex 子が内容幅未満に縮める＝overflow-x スクロールを有効化 */
  overflow-x: auto;                  /* 多数場は横スクロール（スマホ=指/PC=ホイール・トラックパッド） */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* Firefox: スクロールバー非表示 */
  border-bottom: 2px solid var(--nar-green); /* タブの土台ライン（全タブ共通の下辺） */
}
.nar-index-venue-switch-tabs::-webkit-scrollbar { display: none; } /* WebKit: スクロールバー非表示 */
.nar-index-container .nar-index-venuetab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 64px;                       /* 文字数(2〜3字)に依らず一定幅＝タブの横幅を揃える（box-sizing:border-box で枠込み一定） */
  padding: 7px 4px;
  text-align: center;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  color: #5b626e;                    /* 非選択タブ文字＝#eef1ec 上で約5.4:1（NAR-VTAB-01・--nar-fg-muted #6b7280 は4.24:1でAA不足） */
  background: #eef1ec;               /* 非選択タブ＝淡いグレー緑 */
  border: 1px solid var(--nar-rpill-future-bd);
  border-bottom: 0;                  /* 下辺は土台ライン（タブ帯の border-bottom）に委ねる */
  border-radius: 6px 6px 0 0;        /* 上だけ角丸＝タブ形状 */
  transition: background 0.15s ease, color 0.15s ease;
}
/* テーマ本文リンクの color/下線に確実に勝つ特異度（CSS-01 堅牢化＝.container .venuetab a:link で (0,3,1)）。 */
.nar-index-container a.nar-index-venuetab:link,
.nar-index-container a.nar-index-venuetab:visited { color: #5b626e; text-decoration: none; }
.nar-index-container a.nar-index-venuetab:hover { background: #e3e9e0; color: var(--nar-green); }
.nar-index-container .nar-index-venuetab-current {
  padding-top: 5px;                  /* 上線 3px ぶん詰めて非選択タブと高さを揃える */
  color: var(--nar-green);
  font-weight: 700;
  background: #ffffff;               /* 現在地＝白地（中央(JRA)風の active タブ） */
  border-color: var(--nar-green);
  border-top-width: 3px;             /* 現在地＝緑の上線（太） */
  cursor: default;
}
.nar-index-venuetab:focus { outline: 2px solid var(--nar-focus); outline-offset: 2px; }
.nar-index-venuetab:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   レースブロック / 見出し（中央 h3.race-title＝青→水色グラデ帯）
   ============================================================ */
/* レースブロック（中央 .ability-race-block＝margin 30/50・padding-bottom 15・border-bottom 2px #eee） */
.nar-index-race-block {
  margin: 30px 0 50px;
  padding-bottom: 15px;
  border-bottom: 2px solid #eee;
}
/* 見出し（中央 h3.race-title）。テーマの h3 装飾(line-height/border/::before)に負けないよう
   .nar-index-container 配下の十分な特異度＋明示リセットで縦幅を固定（!important 不使用）。
   font-size 1.2em は基底14px基準で 16.8px・line-height 1.4 を明示＝中央と同縦幅。 */
.nar-index-container .nar-index-race-title {
  margin: 0 0 5px;
  padding: 10px 15px;
  font-size: 1.2em;
  line-height: 1.4;
  color: #ffffff;
  background: linear-gradient(to right, #005ab3, #87ceeb);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
}
.nar-index-container .nar-index-race-title::before,
.nar-index-container .nar-index-race-title::after { content: none; }

/* レース補足行（中央 .race-details＝タイトル直下の小さめ情報行：クラス + 発走時刻）。
   メタ4項目（設計25 §9 v1.6）。タイトルはレース名+ダ/芝+距離、本行はクラス+発走時刻。 */
.nar-index-container .nar-index-race-details {
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--nar-fg-muted);
}

/* ============================================================
   タブ（中央 .ability-tab-button＝padding 8px・高さ指定なし）
   ============================================================ */
.nar-index-tab-buttons {
  display: flex;
  width: 100%;
  border-bottom: 2px solid var(--nar-grid);
  margin-bottom: 10px;
}
.nar-index-tab-button {
  flex: 1;
  padding: 8px;
  font-size: 14px;
  color: var(--nar-fg);
  background: var(--nar-tab-bg);
  border: none;
  border-bottom: 3px solid transparent;
  margin-right: 2px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.nar-index-tab-button:last-child { margin-right: 0; }
.nar-index-tab-button:hover { background: var(--nar-tab-hover); }
.nar-index-tab-button.nar-active {
  color: var(--nar-brand);
  font-weight: 700;
  background: var(--nar-tab-active-bg);
  border-bottom-color: var(--nar-brand);
}
.nar-index-tab-button:focus { outline: 2px solid var(--nar-focus); outline-offset: -2px; }
.nar-index-tab-button:focus:not(:focus-visible) { outline: none; }

.nar-index-tab-content { display: none; }
.nar-index-tab-content.nar-active { display: block; }

/* ============================================================
   ソートラジオ（中央 .sort-container＝馬番順/指数順でチャート＋テーブル同期）
   ============================================================ */
.nar-index-sort-container {
  margin-bottom: 15px;
  padding: 10px;
  background: var(--nar-selector-bg);
  border-radius: 5px;
}
.nar-index-sort-label { margin-right: 10px; font-weight: 700; }
.nar-index-sort-group { display: inline-block; }
.nar-index-sort-group[hidden] { display: none; } /* active タブのグループのみ表示（[hidden] を再宣言で確実に隠す） */
.nar-index-sort-option {
  margin-right: 15px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
/* ラジオ本体: モバイル/テーマのフォームリセット（input{width:..}/appearance:none 等）で潰れない様、
   .nar-index-container 配下の特異度で native 表示と寸法を明示（中央も @768 で radio に width/height を明示）。 */
.nar-index-container .nar-index-sort-option input[type="radio"] {
  -webkit-appearance: radio;
  appearance: auto;
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex: none;
  margin: 0 5px 0 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
}

/* ============================================================
   チャート枠（中央 .chart-container＝position:relative/width:100%。高さは JS が px 指定）
   ============================================================ */
.nar-index-chart-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}
.nar-index-chart-wrap canvas { display: block; }

/* ============================================================
   横スクロール枠＋ヒント影（中央 .table-container＝overflow-x/margin-top:15px。影は NAR の控えめ追加）
   ============================================================ */
.nar-index-scroll-frame { position: relative; margin-top: 15px; }
.nar-index-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nar-index-scroll-hint {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: linear-gradient(to right, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.16));
}
.nar-index-scroll-frame.nar-show-hint .nar-index-scroll-hint { opacity: 1; }

/* ============================================================
   テーブル（中央データ表＝11px・全辺#ddd罫・padding 3px 6px・灰ヘッダ#f2f2f2 暗字・ゼブラ#f9f9f9）
   ============================================================ */
.nar-index-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.nar-index-table th,
.nar-index-table td {
  border: 1px solid var(--nar-grid);
  padding: 3px 6px;
  text-align: center;
  white-space: nowrap;
}
.nar-index-table thead th {
  background: var(--nar-th-bg);
  color: var(--nar-fg);
  font-weight: 700;
}
.nar-index-table tbody tr:nth-child(even) { background: var(--nar-zebra); }

.nar-index-umamei,
.nar-index-th-umamei { text-align: left; }
.nar-index-umaban,
.nar-index-tansho,
.nar-index-fukusho,
.nar-index-ev,
.nar-index-odds-proper,
.nar-index-odds-target,
.nar-index-rank { font-variant-numeric: tabular-nums; }

/* 順位 上位3（中央＝背景色のみ。順位の数字そのものが非色チャネルゆえ色覚非依存は成立） */
.nar-index-rank.nar-rank-1 { background: var(--nar-rank1-bg); }
.nar-index-rank.nar-rank-2 { background: var(--nar-rank2-bg); }
.nar-index-rank.nar-rank-3 { background: var(--nar-rank3-bg); }

/* 適正/狙い目オッズ < 閾値（既定10＝「10倍未満は赤」の競馬一般認識）の赤太字（両列に適用）。
   背景ではなく文字色＋太字（数字自体が主チャネルゆえ色覚非依存も成立）。 */
.nar-index-odds-proper.nar-odds-low,
.nar-index-odds-target.nar-odds-low { color: var(--nar-odds-low-fg); font-weight: 700; }

/* ============================================================
   フォールバック表（JS無効/失敗時のみ可視・上記 .nar-index-table 等を継承）
   ============================================================ */
.nar-index-fallback .nar-index-race { margin: 0 0 22px; }
.nar-index-fallback .nar-index-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 広告（各レース情報の下・下部プロフィールの上＝窓口と同じ AdSense 横長ユニット・2026-07-19）。
   区切りバー（border-top）は不要（ユーザー指示）。上の余白のみで分離。min-height で CLS 抑制・実体は Google の <ins>。 */
.nar-index-ad { margin-top: 24px; }
.nar-index-ad-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #999999;
  margin-bottom: 8px;
}
.nar-index-ad-slot { min-height: 80px; }

/* データなし */
.nar-index-no-data {
  padding: 28px 16px;
  text-align: center;
  color: var(--nar-fg-muted);
  background: #f8fafc;
  border: 1px dashed var(--nar-grid);
  border-radius: 8px;
}

/* ============================================================
   レスポンシブ（中央の @768 / @480 寸法を踏襲）
   ============================================================ */
@media (max-width: 768px) {
  .nar-index-race-selector { margin-bottom: 24px; }
  .nar-index-tab-button { font-size: 12px; padding: 6px 4px; }
  .nar-index-sort-option { font-size: 12px; margin-right: 10px; }
  .nar-index-race-block { margin-left: -5px; margin-right: -5px; padding-left: 5px; padding-right: 5px; }
  .nar-index-chart-wrap { margin-left: -5px; margin-right: -5px; width: calc(100% + 10px); }
  .nar-index-chart-wrap canvas { font-feature-settings: "kern" 0; letter-spacing: -0.3px; }
}
@media (max-width: 480px) {
  /* 狭幅でバナー/ピル/◀▶ を僅かに縮小（Rストリップは横スクロール帯＝溢れる前提で指ドラッグ）。 */
  .nar-index-container .nar-index-venue-name { font-size: 18px; padding-left: 84px; }
  .nar-index-venue-header { height: 40px; }
  .nar-index-rpill { font-size: 12px; padding: 7px 10px; min-width: 48px; }
  .nar-index-container .nar-index-venuetab { font-size: 12px; padding: 7px 12px; }
  .nar-index-container .nar-index-venuetab-current { padding-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .nar-index-scroll-hint,
  .nar-index-rnav,
  .nar-index-rpill,
  .nar-index-venuetab,
  .nar-index-tab-button { transition: none; }
}