/* ============================================================================
   UMABASE — 過去データページ (/race/<id>/past) リデザイン (N1ライト)
   すべて .pd-rd 配下にスコープ。 ヒーロー/タブ/サイド共通部品は既存を踏襲し、
   本文 (要点KPI + 統計傾向 + 歴代成績) を本ファイルで再構築する。
   ============================================================================ */

/* 過去情報⇄推奨馬分析 のタブ切替をぬるっと (= コンテンツのフェードイン。 全ブラウザ・
   モバイル対応・JS不要)。 past / analysis 共通の本 CSS で両ページに適用。 */
@keyframes pd-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .pd-rd { animation: pd-page-in 0.26s ease both; }
}

.pd-rd {
  --navy: #152E4A;
  --navy-2: #1E3B5E;
  --gold: #C4A35A;
  --gold-l: #D8BC7E;
  --gold-d: #A9854A;
  --teal: #1A6B5A;
  --panel: #FFFFFF;
  --border: #E2E5EB;
  --text: #2D3436;
  --subtle: #6B7280;
  --g1: #1161c7;
  --g2: #cc2f42;
  --g3: #1A6B5A;
  /* 推奨①②/昨年実績の tier 色 (= past の昨年実績カードと analysis で共用) */
  --t1a: #2E4664; --t1b: #466180; --t2a: #7B92AF; --t2b: #A0B4CB;
  --shadow: 0 8px 22px rgba(139, 116, 73, 0.07);
  --shadow-h: 0 16px 38px rgba(21, 46, 74, 0.14);
  --display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --num: "Manrope", "Zen Kaku Gothic New", sans-serif;
  color: var(--text);
}
.pd-rd *,
.pd-rd *::before,
.pd-rd *::after { box-sizing: border-box; }

/* ── グレード / 曜日バッジ (ソース nf-grade / nf-wd) ───────── */
.pd-rd .pd-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.pd-rd .pd-grade.G1 { background: var(--g1); }
.pd-rd .pd-grade.G2 { background: var(--g2); }
.pd-rd .pd-grade.G3 { background: var(--g3); }
.pd-rd .pd-wd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 4px;
  border-radius: 4px;
  color: #fff;
}
.pd-rd .pd-wd.sm { font-size: 0.62rem; }
.pd-rd .pd-wd.sun { background: #dc3545; }
.pd-rd .pd-wd.sat { background: #007bff; }

/* ── ヒーロー (ソース版 nf-hero) ─────────────────────────── */
.pd-hero-scope { margin-top: 8px; }
.pd-rd .pd-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 6px;
}
.pd-rd .pd-hero-main { min-width: 0; }
.pd-rd .pd-eyebrow {
  font-family: var(--num);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold-d);
  text-transform: uppercase;
  margin-bottom: 11px;
}
.pd-rd .pd-title {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.06;
  margin: 0;
}
.pd-rd .pd-title .g { font-size: 1rem; vertical-align: middle; margin-right: 14px; white-space: nowrap; }
.pd-rd .pd-sub {
  font-size: 0.95rem;
  color: var(--subtle);
  margin-top: 13px;
  display: flex;
  gap: 11px;
  align-items: center;
  flex-wrap: wrap;
}
.pd-rd .pd-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: #c2c8d2; }
.pd-rd .pd-tabs {
  display: inline-flex;
  gap: 4px;
  background: #e7eaf0;
  padding: 5px;
  border-radius: 10px;
  flex: 0 0 auto;
}
.pd-rd .pd-tab {
  padding: 10px 24px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--subtle);
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
  text-decoration: none;
}
.pd-rd .pd-tab:hover { color: var(--navy); }
.pd-rd .pd-tab.active { background: var(--navy); color: #fff; }

/* ── 要点 KPI ───────────────────────────────────────────── */
.pd-insights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
.pd-ins {
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pd-ins::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-d));
}
.pd-ins::after {
  content: "";
  position: absolute;
  top: -50px; right: -40px;
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(196, 163, 90, 0.1), rgba(196, 163, 90, 0) 70%);
}
.pd-ins:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-h);
  border-color: rgba(196, 163, 90, 0.45);
}
.pd-ins .k {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--subtle);
  margin-bottom: 12px;
  position: relative;
}
.pd-ins .v {
  font-family: var(--num);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  position: relative;
  letter-spacing: -0.01em;
}
.pd-ins .v .u {
  color: var(--gold-d);
  font-size: 1.2rem;
  margin-left: 2px;
}
.pd-ins .d {
  font-size: 0.78rem;
  color: var(--subtle);
  margin-top: 12px;
  line-height: 1.55;
  position: relative;
  padding-top: 11px;
  border-top: 1px solid #eef0f3;
}

/* ── レイアウト: サイド左 + 本文右 ─────────────────────── */
.pd-rd .pd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.pd-rd .pd-side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pd-rd .pd-main { min-width: 0; }

/* ── 左サイド: 当該レースのコラムカード (= コラム一覧の c1x-card を流用) ── */
.pd-rd .pd-col-wrap { margin: 0; }

/* ── 左サイド: 直近の的中 (回収率なし・バッジ表記) ───────── */
.pd-rd .pd-sidecard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pd-rd .pd-sidehead {
  padding: 12px 18px;
  font-family: var(--display);
  font-weight: 900;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
}
.pd-rd .pd-sidehead::before { content: ""; width: 4px; height: 16px; background: var(--gold); border-radius: 2px; }
.pd-rd .pd-sidebody { padding: 4px 18px; }
/* full-bleed (= 横 -18px) でホバー背景をカード幅いっぱいに広げる */
.pd-rd .pd-hit { display: block; padding: 12px 18px; margin: 0 -18px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .16s; }
.pd-rd .pd-hit:last-child { border-bottom: none; }
.pd-rd .pd-hit:hover { background: rgba(196, 163, 90, 0.07); }
.pd-rd .pd-hit:hover .nm { color: var(--gold-d); }
.pd-rd .pd-hit .top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pd-rd .pd-hit .nm { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 0.96rem; transition: color .16s; }
.pd-rd .pd-hit .bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pd-rd .pd-hit .meta { font-size: 0.76rem; color: var(--subtle); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pd-rd .pd-hitbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  border-radius: 4px;
  padding: 3px 9px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.pd-rd .pd-hitbadge.double { background: linear-gradient(135deg, #d4a017, #b8860b); }
.pd-rd .pd-hitbadge.single { background: linear-gradient(135deg, var(--teal), #1a8b65); }

/* ── サイド: 昨年の推奨実績 (past/analysis 共用) ───────────── */
.pd-rd .an-ly-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.pd-rd .an-ly-body .an-ly-row:last-of-type { border-bottom: none; }
.pd-rd .an-ly-row .nm { font-weight: 700; color: var(--navy); flex: 1; min-width: 0; }
.pd-rd .an-tier { display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: #fff; padding: 3px 9px; border-radius: 5px; flex: 0 0 auto; }
.pd-rd .an-tier.t1 { background: linear-gradient(135deg, var(--t1a), var(--t1b)); }
.pd-rd .an-tier.t2 { background: linear-gradient(135deg, var(--t2a), var(--t2b)); }
.pd-rd .an-ly-more { display: inline-flex; margin-top: 12px; font-size: 0.84rem; font-weight: 800; color: var(--gold-d); text-decoration: none; }
.pd-rd .an-ly-more:hover { color: var(--navy); }
/* 的中 / 不的中 バッジ (= 昨年実績・推奨カード共用) */
.pd-rd .an-hit { display: inline-flex; font-size: 0.72rem; font-weight: 800; color: #fff; border-radius: 4px; padding: 2px 9px; background: linear-gradient(135deg, var(--teal), #1a8b65); }
.pd-rd .an-hit.double { background: linear-gradient(135deg, #d4a017, #b8860b); }
.pd-rd .an-miss { display: inline-flex; font-size: 0.72rem; font-weight: 700; color: var(--subtle); background: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 2px 9px; }

@media (min-width: 960px) {
  .pd-rd .pd-layout { grid-template-columns: 332px minmax(0, 1fr); gap: 30px; }
  .pd-rd .pd-side { position: sticky; top: 18px; }
}
/* モバイルは過去データ本文を先頭に、 サイド (今週の重賞 / 的中 / 広告) を下に回す */
@media (max-width: 959px) {
  .pd-rd .pd-main { order: 1; }
  .pd-rd .pd-side { order: 2; }
}

/* ── セクション見出し (他ページと統一: アイブロー＋タイトル＋金罫線) ── */
.pd-rd .rd-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 13px;
  margin-bottom: 16px;
}
.pd-rd .rd-sec-en {
  flex-basis: 100%;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-d);
  text-transform: uppercase;
}
.pd-rd .rd-sec-ttl {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--navy);
  white-space: nowrap;
  margin: 0;
}
.pd-rd .rd-sec-rule {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(196, 163, 90, 0));
}
.pd-rd .pd-sec-mt { margin-top: 34px; }

.pd-rd .pd-intro {
  font-size: 0.9rem;
  color: var(--subtle);
  line-height: 1.7;
  margin: 0 0 18px;
}

/* ── 統計傾向: 実数値 + 率の表 ─────────────────────────── */
.pd-rd .pd-statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
/* 脚質別+騎手別を 1 セルに縦スタック (= 性齢別の右)。 結果、 末尾の
   血統(父)別・血統(母父)別が必ず横並びになる。 */
.pd-rd .pd-substack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd-rd .pd-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pd-rd .pd-card-head {
  padding: 12px 18px;
  font-family: var(--display);
  font-weight: 900;
  color: var(--navy);
  font-size: 0.98rem;
  border-bottom: 1px solid var(--border);
}
.pd-rd .pd-st-wrap { overflow-x: auto; }
.pd-rd .pd-st {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  table-layout: fixed;
}
/* 全表共通: 1着〜複勝率の 7 列を同じ幅 (= 同 %) に。 先頭 (ラベル) 列は残り + 折返し。
   幅を % にすることで table-layout:fixed の表が常にコンテナ幅ぴったりに収まり、
   画面幅が狭まると各列が比例縮小して横スクロールが発生しない。 */
.pd-rd .pd-st th:not(:first-child),
.pd-rd .pd-st td:not(:first-child) { width: 11.14%; }
.pd-rd .pd-st th:first-child,
.pd-rd .pd-st td:first-child { width: 22%; white-space: normal; }
.pd-rd .pd-st thead th {
  background: #f4f6f9;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 8px 3px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pd-rd .pd-st thead th:first-child { text-align: left; padding-left: 12px; }
.pd-rd .pd-st tbody td {
  padding: 7px 3px;
  text-align: center;
  border-bottom: 1px solid #eef0f3;
  white-space: nowrap;
}
.pd-rd .pd-st tbody td:first-child {
  text-align: left;
  padding-left: 12px;
  font-weight: 700;
  color: var(--navy);
}
.pd-rd .pd-st tbody tr:last-child td { border-bottom: none; }
.pd-rd .pd-st tbody tr:hover td { background: rgba(196, 163, 90, 0.05); }
.pd-rd .pd-st td.c1 { background: #fdf3d3; font-weight: 700; }
.pd-rd .pd-st td.c2 { background: #dde9f6; font-weight: 700; }
.pd-rd .pd-st td.c3 { background: #fbe2cb; font-weight: 700; }
.pd-rd .pd-st td.rate { font-family: var(--num); color: #1f4e79; font-weight: 600; }
.pd-rd .pd-st td.pr { font-family: var(--num); font-weight: 800; color: var(--navy); }
.pd-rd .pd-st td.hot { color: var(--gold-d); background: rgba(196, 163, 90, 0.14); font-weight: 800; }

/* ── 枠色セル ───────────────────────────────────────────── */
.pd-rd .pd-wcell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 19px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 800;
  flex: 0 0 auto;
}
.pd-rd .pd-wcell.waku-1 { background: #fff; color: #111; border: 1px solid #cfd4da; }
.pd-rd .pd-wcell.waku-2 { background: #222; color: #fff; }
.pd-rd .pd-wcell.waku-3 { background: #d32f2f; color: #fff; }
.pd-rd .pd-wcell.waku-4 { background: #1976d2; color: #fff; }
.pd-rd .pd-wcell.waku-5 { background: #ffd600; color: #111; }
.pd-rd .pd-wcell.waku-6 { background: #2e7d32; color: #fff; }
.pd-rd .pd-wcell.waku-7 { background: #f57c00; color: #fff; }
.pd-rd .pd-wcell.waku-8 { background: #f8bbd0; color: #111; }

/* ── 歴代成績テーブル ───────────────────────────────────── */
.pd-rd .pd-res-wrap { overflow-x: auto; }
.pd-rd .pd-res {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}
.pd-rd .pd-res thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 10px 8px;
  text-align: center;
}
.pd-rd .pd-res tbody td {
  padding: 8px 8px;
  text-align: center;
  border-bottom: 1px solid #eef0f3;
}
/* 着・人気列は同じ幅に揃える */
.pd-rd .pd-res th.pd-rank-col,
.pd-rd .pd-res td.pd-rank-col { width: 3em; }
.pd-rd .pd-res tbody td.name { text-align: left; font-weight: 700; color: var(--navy); }
.pd-rd .pd-res tbody td.ped { text-align: left; color: var(--text); }
.pd-rd .pd-res tbody td.yr { font-family: var(--num); font-weight: 800; color: var(--gold-d); }
.pd-rd .pd-res td.c1 { background: #fdf3d3; font-weight: 800; }
.pd-rd .pd-res td.c2 { background: #dde9f6; font-weight: 800; }
.pd-rd .pd-res td.c3 { background: #fbe2cb; font-weight: 800; }
.pd-rd .pd-res td.pop { background: transparent; font-weight: 600; }
.pd-rd .pd-res tr.year-first td { border-top: 2px solid var(--navy); }
.pd-rd .pd-res tbody tr:hover td { background: rgba(196, 163, 90, 0.05); }
.pd-rd .pd-res tbody tr:hover td.c1 { background: #fbedc0; }
.pd-rd .pd-res tbody tr:hover td.c2 { background: #d2e2f2; }
.pd-rd .pd-res tbody tr:hover td.c3 { background: #f8d9bb; }

/* ── 下部ボタン (= レース情報へ戻る + クロス導線。 past/analysis 共通) ── */
.pd-rd .pd-back { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pd-rd .pd-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
  border: 1.5px solid var(--navy);
  border-radius: 8px;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  transition: .16s;
}
.pd-rd .pd-back a:hover { background: var(--navy); color: #fff; }
.pd-rd .pd-back a.primary { background: var(--navy); color: #fff; }
.pd-rd .pd-back a.primary:hover { background: var(--navy-2); }

/* ── レスポンシブ ───────────────────────────────────────── */
/* 統計傾向は 2 列だと 8 列テーブルが窮屈になるので、 画面が狭まったら 1 列にリフローし、
   各表が全幅 (= 列が広い) を使えるようにする。 列幅 % と併せて横スクロールを避ける。 */
@media (max-width: 1500px) {
  .pd-rd .pd-statgrid { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .pd-rd .pd-insights { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 860px) {
  .pd-rd .pd-hero { flex-direction: column; align-items: stretch; gap: 16px; }
  /* モバイルは推奨馬分析/過去情報トグルを右寄せ (PC は現状維持) */
  .pd-rd .pd-tabs { align-self: flex-end; }
  .pd-rd .pd-title { font-size: 2.1rem; }
}
@media (max-width: 768px) {
  .pd-rd .pd-ins .v { font-size: 2.1rem; }
  .pd-rd .pd-sec-mt { margin-top: 26px; }
  .pd-rd .pd-title { font-size: 1.85rem; }
  .pd-rd .pd-tab { padding: 9px 18px; }
}
@media (max-width: 480px) {
  .pd-rd .pd-insights { grid-template-columns: 1fr; }
  /* 最小端末は列が % でも狭く「100.0%」が重なりうるため、 フォント・余白を縮小して桁重なりを防ぐ */
  .pd-rd .pd-st { font-size: 0.6rem; }
  .pd-rd .pd-st thead th { font-size: 0.54rem; padding: 6px 1px; }
  .pd-rd .pd-st tbody td { padding: 6px 1px; }
  .pd-rd .pd-st thead th:first-child,
  .pd-rd .pd-st tbody td:first-child { padding-left: 7px; }
  .pd-rd .pd-wcell { width: 16px; height: 15px; font-size: 0.56rem; }
}