/* ============================================
   ローリスクでハイリターンな馬券術
   スタイルシート（ダッシュボード / グリーン基調）
   ============================================ */

:root {
  --brand-dark:   #2a5c34;   /* ヘッダーバー（温かみのあるグリーン） */
  --brand:        #4b9350;   /* 中間グリーン（アクセント・罫線強調） */
  --brand-bright: #4b9350;   /* 明るいグリーン（互換用） */
  --brand-pale:   #fff4e6;   /* 薄いオレンジ（淡い背景アクセント） */

  --accent:       #f2994a;   /* 暖色アクセント（コーラルオレンジ） */
  --accent-dark:  #d97b2e;

  --grid-border:  #ecdfce;   /* グリッド罫線（温かみのあるベージュ） */
  --grid-border-strong: #d8c3a8;
  --cell-border:  #b3946a;   /* テーブルセル区切り線（はっきり見える濃いめの色） */

  --bg:           #fffaf3;   /* ページ背景（温かみのあるオフホワイト） */
  --panel-bg:     #ffffff;   /* パネル背景 */

  --text-main:    #2e2418;
  --text-sub:     #8a7960;
  --text-on-dark: #fff7ec;

  --link:         #1a56db;   /* リンク文字色（下線なし） */
  --link-hover:   #123f9e;

  --win-bg:   #ffce54;
  --win-text: #4a3300;
  --place-bg: #ecdec8;
  --place-text: #4a3d2a;
  --show-bg:  #e8a15f;
  --show-text: #402a12;

  /* JRA枠番カラー */
  --waku1: #ffffff;  --waku1-text:#2e2418; --waku1-border:#c9b8a3;
  --waku2: #1c1c1c;  --waku2-text:#ffffff; --waku2-border:#1c1c1c;
  --waku3: #e0554a;  --waku3-text:#ffffff; --waku3-border:#e0554a;
  --waku4: #2f68c0;  --waku4-text:#ffffff; --waku4-border:#2f68c0;
  --waku5: #f0c93a;  --waku5-text:#2e2418; --waku5-border:#f0c93a;
  --waku6: #3f9a5a;  --waku6-text:#ffffff; --waku6-border:#3f9a5a;
  --waku7: #f2954a;  --waku7-text:#ffffff; --waku7-border:#f2954a;
  --waku8: #ed92b8;  --waku8-text:#2e2418; --waku8-border:#ed92b8;

  --page-max: 1300px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text-main);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Segoe UI", sans-serif;
  min-height: 100vh;
  padding: 16px 12px 40px;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 720px;
  margin: 0 auto;
}

/* リンク共通：下線なし・青文字 */
a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ---------- サイトヘッダー ---------- */
.site-header {
  text-align: center;
  padding: 4px 0 16px;
  border-bottom: 3px solid var(--accent);
  margin-bottom: 20px;
}

.site-name {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--brand-dark);
  font-weight: 800;
  margin: 0;
}

.site-name::before,
.site-name::after {
  content: "―";
  color: var(--grid-border-strong);
  margin: 0 8px;
  font-weight: 400;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--link);
  margin-bottom: 14px;
}

/* ---------- レースタイトル ---------- */
.race-title {
  text-align: center;
  margin-bottom: 20px;
}

.race-year {
  display: block;
  font-size: 13px;
  color: var(--text-sub);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.race-name {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

.race-meta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent-dark);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.race-meta span {
  padding: 0 8px;
  border-right: 1px solid var(--grid-border-strong);
}

.race-meta span:last-child {
  border-right: none;
}

.horse-header {
  text-align: center;
  padding: 4px 0 18px;
  margin-bottom: 20px;
}

.horse-header .horse-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 6px;
}

.horse-header .horse-title {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text-main);
}

/* ============================================
   結果テーブル（皐月賞 一覧）— Excelグリッド風
   ============================================ */
.result-panel {
  background: var(--panel-bg);
  border: 1px solid var(--grid-border-strong);
  border-radius: 8px;
  overflow: hidden;
}

table.result-table {
  width: 100%;
  border-collapse: collapse;
}

.result-table thead th {
  background: var(--brand);
  color: #ffffff;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 5px 6px;
  border: 1px solid var(--brand-dark);
  text-align: center;
}

.result-table th.th-name {
  text-align: left;
  padding-left: 12px;
}

.result-table tbody td {
  padding: 4px 6px;
  border: 1.5px solid var(--cell-border);
  font-size: 13.5px;
  text-align: center;
  vertical-align: middle;
  background: var(--panel-bg);
}

.result-table tbody tr:nth-child(even) td {
  background: var(--panel-bg);
}

.result-table tbody tr.rank-1,
.result-table tbody tr.rank-2,
.result-table tbody tr.rank-3 {
  box-shadow: inset 4px 0 0 var(--accent);
}

.result-table tbody tr.rank-1 td:first-child,
.result-table tbody tr.rank-2 td:first-child,
.result-table tbody tr.rank-3 td:first-child {
  border-left: 4px solid var(--accent);
}

/* 枠番バッジ（JRA公式の枠色） */
.waku-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 800;
  font-size: 11px;
  border: 1px solid;
  border-radius: 5px;
}

.waku-1 { background: var(--waku1); color: var(--waku1-text); border-color: var(--waku1-border); }
.waku-2 { background: var(--waku2); color: var(--waku2-text); border-color: var(--waku2-border); }
.waku-3 { background: var(--waku3); color: var(--waku3-text); border-color: var(--waku3-border); }
.waku-4 { background: var(--waku4); color: var(--waku4-text); border-color: var(--waku4-border); }
.waku-5 { background: var(--waku5); color: var(--waku5-text); border-color: var(--waku5-border); }
.waku-6 { background: var(--waku6); color: var(--waku6-text); border-color: var(--waku6-border); }
.waku-7 { background: var(--waku7); color: var(--waku7-text); border-color: var(--waku7-border); }
.waku-8 { background: var(--waku8); color: var(--waku8-text); border-color: var(--waku8-border); }

/* 馬番 */
.num-badge {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

/* 着順 */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 4px;
  font-weight: 800;
  font-size: 12.5px;
  background: var(--place-bg);
  color: var(--place-text);
  border: 1px solid var(--grid-border-strong);
  border-radius: 12px;
}

tr.rank-1 .rank-badge {
  background: var(--win-bg);
  color: var(--win-text);
  border-color: #c9a23c;
}

tr.rank-2 .rank-badge {
  background: var(--place-bg);
  color: var(--place-text);
  border-color: var(--grid-border-strong);
}

tr.rank-3 .rank-badge {
  background: var(--show-bg);
  color: var(--show-text);
  border-color: #a97645;
}

/* 馬名 */
.horse-name {
  text-align: left;
  padding-left: 12px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* グレードバッジ（GI＝赤 / GII＝青 / GIII＝緑） */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 7px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  border-radius: 4px;
  color: #ffffff;
}

.grade-1 { background: #c0392b; }
.grade-2 { background: #2f68c0; }
.grade-3 { background: #2f9e5c; }

/* 馬名リンク */
a.horse-link {
  color: var(--link);
  font-weight: 700;
}

a.horse-link:hover,
a.horse-link:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

/* 人気 */
.popularity {
  font-variant-numeric: tabular-nums;
  color: var(--text-sub);
}

.popularity .pop-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.popularity .pop-unit {
  font-size: 10px;
  margin-left: 1px;
}

.fav-1 .pop-num { color: var(--accent-dark); }

/* ---------- フッター注記 ---------- */
.note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1.7;
  padding: 10px 12px;
  background: var(--brand-pale);
  border: 1px solid var(--grid-border-strong);
  border-radius: 8px;
}

.site-footer {
  margin-top: 26px;
  text-align: center;
  font-size: 11px;
  color: var(--text-sub);
  letter-spacing: 0.05em;
}

/* ============================================
   馬プロフィール（グリーンエナジー戦績）
   項目名 / 値の2列テーブルを Excel の行のように並べる
   ============================================ */
.races-grid {
  display: block;
}

.race-card {
  background: var(--panel-bg);
  border: 1px solid var(--grid-border-strong);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
}

.race-card-head {
  background: var(--brand);
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--brand-dark);
}

.race-card-head .rc-date {
  font-size: 11px;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.race-card-head .rc-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.race-card-head .rc-place {
  font-size: 11.5px;
  color: #ffffff;
}

table.rc-table {
  width: 100%;
  border-collapse: collapse;
}

.rc-table td {
  padding: 9px 14px;
  font-size: 12.5px;
  border: 1.5px solid var(--cell-border);
  vertical-align: top;
}

.rc-table tr:nth-child(even) td {
  background: #ffffff;
}

.rc-table td.rc-label {
  width: 30%;
  color: var(--text-sub);
  font-weight: 700;
  background: #f5f8f6;
  white-space: nowrap;
}

.rc-table tr:nth-child(even) td.rc-label {
  background: #f5f8f6;
}

.rc-table td.rc-value {
  color: var(--text-main);
  line-height: 1.7;
  font-weight: 600;
}

.rc-table td.rc-value.rc-big {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rc-table td.rc-value.rc-finish-value {
  color: var(--accent-dark);
}

.rc-table td.rc-value.rc-body {
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.8;
}

/* ---------- パンくず（グリーンエナジー戦績ページ上部） ---------- */
.breadcrumb-bar {
  background: var(--brand);
  color: #ffffff;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}

.breadcrumb-bar a.breadcrumb-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.breadcrumb-bar a.breadcrumb-link:hover,
.breadcrumb-bar a.breadcrumb-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

.breadcrumb-bar .breadcrumb-sep {
  opacity: 0.6;
}

.breadcrumb-bar .breadcrumb-current {
  opacity: 0.92;
  font-weight: 600;
}

/* ============================================
   レスポンシブ
   ============================================ */

/* --- PC：横幅をたっぷり使う --- */
@media (min-width: 1000px) {
  body {
    padding: 32px 24px 60px;
  }

  .page {
    max-width: var(--page-max);
  }

  .race-name,
  .horse-header .horse-title {
    font-size: 40px;
  }

  .site-name {
    font-size: 15px;
  }

  .race-year,
  .race-meta {
    font-size: 14px;
  }

  .result-table thead th {
    font-size: 15px;
    padding: 8px 12px;
  }

  .result-table tbody td {
    font-size: 17px;
    padding: 7px 12px;
  }

  .rank-badge {
    min-width: 36px;
    height: 32px;
    font-size: 16px;
  }

  .waku-badge {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .num-badge {
    font-size: 17px;
  }

  .popularity .pop-num {
    font-size: 18px;
  }

  .popularity .pop-unit {
    font-size: 12px;
  }

  .note {
    font-size: 13px;
  }

  .breadcrumb-bar {
    font-size: 15px;
  }

  .rc-table td {
    font-size: 15.5px;
    padding: 12px 16px;
  }

  .rc-table td.rc-label {
    font-size: 14px;
  }

  .rc-table td.rc-value.rc-big {
    font-size: 20px;
  }

  .rc-table td.rc-value.rc-body {
    font-size: 14.5px;
  }

  .race-card-head .rc-name {
    font-size: 18px;
  }

  .race-card-head .rc-date,
  .race-card-head .rc-place {
    font-size: 12.5px;
  }
}

/* --- モバイル：レイアウトはPCと同じ表のまま、文字と余白だけを縮小 --- */
@media (max-width: 640px) {
  .page {
    max-width: 100%;
  }

  .result-table thead th {
    font-size: 10.5px;
    padding: 4px 3px;
    letter-spacing: 0.01em;
  }

  .result-table tbody td {
    font-size: 12px;
    padding: 3px 3px;
  }

  .horse-name {
    padding-left: 6px !important;
  }

  .waku-badge {
    width: 18px;
    height: 18px;
    font-size: 9.5px;
  }

  .num-badge {
    font-size: 11.5px;
  }

  .rank-badge {
    min-width: 22px;
    height: 20px;
    font-size: 10.5px;
    padding: 0 2px;
  }

  .popularity .pop-num {
    font-size: 12px;
  }

  .popularity .pop-unit {
    font-size: 8.5px;
  }

  .rc-table td {
    font-size: 11px;
    padding: 7px 8px;
  }

  .rc-table td.rc-label {
    width: 34%;
  }

  .rc-table td.rc-value.rc-big {
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .result-table thead th {
    font-size: 9px;
    padding: 3px 2px;
  }

  .result-table tbody td {
    font-size: 10.5px;
    padding: 2px 2px;
  }

  .horse-name {
    padding-left: 4px !important;
  }

  .waku-badge {
    width: 16px;
    height: 16px;
    font-size: 8.5px;
  }

  .num-badge {
    font-size: 10px;
  }

  .rank-badge {
    min-width: 19px;
    height: 18px;
    font-size: 9px;
  }

  .popularity .pop-num {
    font-size: 10.5px;
  }
}