:root {
  --paper: #eeece4;
  --paper-raised: #f7f6f0;
  --ink: #1c1b18;
  --ink-soft: #55524a;
  --rule: #c9c5b8;
  --rule-strong: #1c1b18;
  --hanko: #b5231c;
  --hanko-soft: #e9d9d6;
  --win: #2f7a3d;
  --lose: #b5231c;

  /* 枠番カラー(JRA公式に準拠) */
  --waku-1: #ffffff; --waku-1-ink: #1c1b18;
  --waku-2: #1c1b18; --waku-2-ink: #ffffff;
  --waku-3: #d0231c; --waku-3-ink: #ffffff;
  --waku-4: #1c4e9c; --waku-4-ink: #ffffff;
  --waku-5: #f2c40f; --waku-5-ink: #1c1b18;
  --waku-6: #2f8a3e; --waku-6-ink: #ffffff;
  --waku-7: #e6791a; --waku-7-ink: #ffffff;
  --waku-8: #e893b8; --waku-8-ink: #1c1b18;

  --font-display: "Shippori Mincho", serif;
  /* 2026-10-08: 本文は端末に入っている日本語フォントを使う(以前は Web フォント Noto Sans JP を4太さ読み込んでおり、
     日本語フォントは容量が大きく初回表示・通信量の負担になっていた)。iPhone/Mac はヒラギノ、Windows は游ゴシック/メイリオ */
  --font-body: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-mono: "Roboto Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  background-image:
    repeating-linear-gradient(0deg, rgba(28,27,24,0.035) 0px, rgba(28,27,24,0.035) 1px, transparent 1px, transparent 28px);
}

.screen { min-height: 100vh; }

.profit-plus { color: var(--win); }
.profit-minus { color: var(--lose); }

/* ---------- ログイン画面 ---------- */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#login-screen[hidden] { display: none; }

.ticket {
  width: 100%;
  max-width: 360px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 40px 32px;
  text-align: center;
  position: relative;
}

.ticket::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--rule);
  pointer-events: none;
}

.ticket-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--hanko);
  margin: 0 0 12px;
}

.ticket-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: 0.06em;
}

.ticket-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

#login-form { display: flex; flex-direction: column; gap: 12px; }

#login-form input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: var(--ink);
}

.error-text { color: var(--hanko); font-size: 13px; margin-top: 14px; }

/* ---------- 管理者リセット通知バナー(全画面共通) ---------- */
.password-reset-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: var(--hanko-soft);
  border-bottom: 1px solid var(--hanko);
  color: var(--ink);
  font-size: 13px;
}
.password-reset-banner button { flex: none; }

/* ---------- 共通ボタン ---------- */
button { font-family: var(--font-body); cursor: pointer; }

.stamp-btn {
  background: var(--hanko);
  color: #fff;
  border: 1px solid var(--hanko);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stamp-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
.stamp-btn:active { transform: translateY(0); box-shadow: none; }
.stamp-btn.is-settled {
  background: #fff;
  color: var(--hanko);
  border: 1px solid var(--hanko);
}
/* 購入不可(予想登録画面の「投票」ボタン。枠番・馬番未確定時。2026-09-30〜): グレーで押せない */
.stamp-btn.is-unavailable,
.stamp-btn.is-unavailable:hover,
.stamp-btn.is-unavailable:active {
  background: #d9d7d0;
  color: #77746b;
  border: 1px solid #bdbab1;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.ghost-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
}
.ghost-btn:hover { background: rgba(28,27,24,0.06); }

/* 無効化されたボタンは操作不可であることが見た目でも分かるようにする
   (処理中の一括登録ボタン等。以前は :disabled のスタイルが無く、押せるように見えていた) */
button:disabled,
button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.stamp-btn:disabled:hover { transform: none; box-shadow: none; }
.ghost-btn:disabled:hover { background: transparent; }

/* ---------- マストヘッド ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 20px 16px;
  border-bottom: 3px double var(--rule-strong);
  max-width: 960px;
  margin: 0 auto;
}

.masthead-inner { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }

.masthead-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.08em;
}

.masthead-nav { display: flex; gap: 4px; }

.nav-link {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid transparent;
}
.nav-link.active {
  color: var(--ink);
  font-weight: 700;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}
.nav-link:not(.active):hover { text-decoration: underline; }

.masthead-actions { display: flex; gap: 10px; align-items: center; }
.current-username { font-size: .85em; color: var(--ink-soft, #55524a); margin-right: 4px; }
.current-username-clickable {
  cursor: pointer;
  border-bottom: 1px dashed var(--ink-soft, #55524a);
}
.current-username-clickable:hover {
  color: var(--ink);
}

/* ---------- サマリーバー ---------- */
.summary-bar {
  max-width: 960px;
  margin: 18px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.summary-item {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-label { font-size: 11px; color: var(--ink-soft); }
.summary-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }

/* ---------- レース一覧 ---------- */
.race-list {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.race-card { background: var(--paper-raised); border: 1px solid var(--rule-strong); }

.race-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-strong);
  background: repeating-linear-gradient(135deg, rgba(28,27,24,0.03) 0 8px, transparent 8px 16px);
  cursor: pointer;
}
.race-card-head-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.race-card-head-main .expand-arrow {
  flex: 0 0 auto;
}
.race-card-head:hover { background: rgba(28,27,24,0.06); }

.race-card-body { display: flex; flex-direction: column; }
.race-card-body[hidden] { display: none; }

.race-total {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* 確定状況(未確定/一部確定/確定済み)はレース単位でのみ表示する
   (同一レースの着順・払戻は式別・買い目を問わず一括で確定するため。
   2026-09-17に式別行(.group-card-head)から移設)。 */
.race-total .status-badge {
  font-family: var(--font-body);
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--rule-strong);
  margin-right: 6px;
}
.race-total .status-badge.settled { background: var(--ink); color: #fff; border-color: var(--ink); }

.race-card-head .r-num, .result-head-line .r-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  background: var(--ink);
  color: #fff;
  padding: 2px 9px;
}
.race-card-head .track, .result-head-line .track { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.race-card-head .race-name, .result-head-line .race-name { color: var(--ink-soft); font-size: 13px; }
.race-card-head .race-date, .result-head-line .race-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

/* ---------- 購入(チケット)ごとの行 ---------- */
.ticket-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
}
.ticket-row:last-child { border-bottom: none; }

.bet-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--rule-strong);
  padding: 5px 4px;
  background: #fff;
}

.ticket-info { min-width: 0; }

.sel-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; font-weight: 600; }

.sel-item { display: inline-flex; align-items: center; gap: 5px; }

.sel-dash, .sel-arrow { color: var(--ink-soft); font-size: 12px; margin: 0 2px; }

.mini-waku {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sel-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  padding: 0 4px;
}

.sel-jockey { font-size: 11px; color: var(--ink-soft); }
.sel-result { font-size: 11px; color: var(--hanko); font-family: var(--font-mono); }

.ticket-memo { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

.ticket-money { text-align: right; font-size: 12px; white-space: nowrap; }
.money-line { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); }
.money-label { color: var(--ink-soft); font-family: var(--font-body); }
.money-line.profit { font-weight: 700; font-size: 13px; }

.row-actions { display: flex; gap: 6px; align-items: center; }

.icon-btn {
  border: 1px solid var(--rule-strong);
  background: #fff;
  width: 30px;
  height: 30px;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: rgba(28,27,24,0.06); }
.icon-btn.delete { color: var(--hanko); }

.empty-state {
  max-width: 960px;
  margin: 60px auto;
  text-align: center;
  color: var(--ink-soft);
  padding: 0 20px;
}

/* ---------- モーダル ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,27,24,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
}
.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--paper-raised);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px 22px 22px;
  border-top: 1px solid var(--rule-strong);
}

.modal h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 18px; }

#entry-form { display: flex; flex-direction: column; gap: 14px; }

.form-row { display: flex; gap: 12px; }
.form-row label { flex: 1; }

label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-soft); }
label.full { width: 100%; }

input, select, textarea {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 10px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; }
/* iOS Safari は font-size 16px 未満の入力欄にフォーカスすると画面全体を自動ズームする
   (馬券かごの「1点あたり」欄で発生。2026-09-30)。タッチ端末では入力欄を一律16pxにして
   自動ズーム自体を起こさない。個別に小さい font-size を指定している欄も多いため !important で
   上書きする。viewport の maximum-scale=1 で止める方法はピンチズームまで殺すため採らない
   (prediction.html のみ従来から maximum-scale=1.0 を指定している)。 */
/* 2026-10-01: 予想登録画面ヘッダー1行目の日付・競馬場・R番号セレクト(.prediction-select)は
   対象外にする。16px化で幅が増え、iPhone SE3で「確定済」ボタンが2行目へ折り返したため
   (このセレクトは430px以下で12pxに詰めて1行に収める前提。自動ズームは全画面の
   viewport maximum-scale=1.0 で抑止しているのでfont-sizeに頼らなくてよい)。 */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select:not(.prediction-select),
  textarea {
    font-size: 16px !important;
  }
}

/* 選択馬の行(馬券登録フォーム内) */
.selection-rows { display: flex; flex-direction: column; gap: 8px; }

.selection-row {
  display: grid;
  grid-template-columns: 44px 64px 56px 1fr 80px 56px;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 6px;
}

.selection-row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
}

.selection-row input, .selection-row select { padding: 6px 6px; font-size: 12.5px; }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---------- 集計ページ ---------- */
.stats-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.stats-heading {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--rule-strong);
}

.stats-note { font-size: 12px; color: var(--ink-soft); margin: -6px 0 12px; }

.overall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.overall-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.overall-label { font-size: 12px; color: var(--ink-soft); }
.overall-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }

/* ---------- 総合成績: 購入比率バー ---------- */
.ratio-block { margin-top: 28px; }
.stats-subheading {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-strong);
}
.ratio-bars { display: flex; flex-direction: column; gap: 8px; }
.ratio-row {
  display: grid;
  grid-template-columns: 84px 1fr 150px;
  gap: 10px;
  align-items: center;
}
.ratio-label {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ratio-bar {
  position: relative;
  height: 16px;
  background: var(--rule);
  overflow: hidden;
}
.ratio-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  min-width: 2px;
  background: var(--ink);
}
.ratio-value {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  color: var(--ink-soft);
}
.ratio-value .ratio-pct { font-weight: 700; color: var(--ink); }
.ratio-value .ratio-yen { margin-left: 6px; }
.ratio-empty { font-size: 13px; color: var(--ink-soft); font-family: var(--font-body); }

.table-wrap { overflow-x: auto; background: var(--paper-raised); border: 1px solid var(--rule-strong); }

.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.stats-table th {
  text-align: left;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 2px solid var(--rule-strong);
  background: repeating-linear-gradient(135deg, rgba(28,27,24,0.03) 0 8px, transparent 8px 16px);
}
.stats-table td { padding: 9px 12px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); }
.stats-table td.table-name { font-family: var(--font-body); font-weight: 600; }
.stats-table tr:last-child td { border-bottom: none; }
.stats-table th.sortable-th { cursor: pointer; user-select: none; }
.stats-table th.sortable-th:hover { background: rgba(28,27,24,0.08); }
.table-empty { text-align: center; color: var(--ink-soft); padding: 20px; font-family: var(--font-body); }

/* ---------- レスポンシブ(スマホ) ---------- */
@media (max-width: 700px) {
  .summary-bar { grid-template-columns: repeat(2, 1fr); }

  .ratio-row { grid-template-columns: 68px 1fr auto; gap: 8px; }
  .ratio-value .ratio-yen { display: none; }

  .race-card-head { align-items: flex-start; }
  .race-card-head-main { gap: 8px; }
  .race-total { margin-left: 0; }
}

@media (max-width: 600px) {
  .masthead { padding: 18px 16px 12px; flex-direction: column; align-items: flex-start; }
  .masthead-title { font-size: 24px; }
  /* 2026-08-10: 上部ナビ(.masthead-nav)の折り返し対策として、ここに
     .masthead-inner を flex-direction:column にする対応を追加していたが、
     同日中にユーザーから改めて「タイトルは非表示・ナビ+ユーザー名+退場ボタンを
     1行にまとめる」という仕様変更の要望があり、下記(クラスタ12対応)へ
     一本化した。このブロックには他の要素(.ticket-row等)のスタイルも
     含まれているため、@media自体は残しつつ .masthead-inner / .masthead-nav
     関連の記述はここから削除している。最新のmastheadレスポンシブ対応は
     このファイル末尾の「2026-08-10: モバイル用ヘッダーの高さ削減」ブロックを
     参照すること。 */
  /* ---------- 2026-08-16: 購入履歴レースカードのモバイル2行化 ----------
     PC(700px超)では従来通り「矢印・日付・競馬場・R・レース名」が1行目、
     「購入額・払戻額・収支」が右寄せで同じ行に表示される(HTML構造・CSSともに
     この@media内でのみ変更する)。
     モバイル(700px以下)では縦に長くなりすぎるのを防ぐため、以下の2行構成にする:
       1行目: 競馬場・R・レース名(日付は非表示。カレンダーで選択済みのため
              重複表示は不要。レース名は画面幅に収まらない場合のみ
              text-overflow:ellipsisで省略する)
       2行目: 購入額・払戻額・収支を左寄せで表示し、行末に開閉矢印(▸/▾)を表示する
     HTML自体はPC・モバイル共通(public/app.jsのrenderRaceCard()参照)で、
     矢印(.expand-arrow)を.race-card-head-main の外(headの直接の子)に出した上で、
     flexboxのorder・flex-basis・margin-right:auto を使って見た目だけを
     モバイル用に並べ替えている。 */
  .race-card-head {
    flex-wrap: wrap;
    align-items: center;
  }
  .race-card-head > .expand-arrow {
    order: 3;
  }
  .race-card-head-main {
    order: 1;
    flex: 1 1 100%;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .race-card-head-main .race-date {
    display: none;
  }
  .race-card-head-main .track,
  .race-card-head-main .r-num {
    flex: 0 0 auto;
  }
  .race-card-head-main .race-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .race-total {
    order: 2;
    flex: 0 1 auto;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }

  .ticket-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "badge money" "info info" "actions actions";
    row-gap: 8px;
  }
  .bet-badge { grid-area: badge; justify-self: start; }
  .ticket-info { grid-area: info; }
  .ticket-money { grid-area: money; }
  .row-actions { grid-area: actions; justify-content: flex-end; }

  .modal { padding: 22px 16px 18px; }
  .form-row { flex-direction: column; }
  .selection-row { grid-template-columns: 1fr 1fr; }

  .entry-form-row {
    grid-template-columns: 46px 50px 1fr 60px 50px;
    gap: 4px;
  }
  .entry-form-row input, .entry-form-row select { padding: 5px 3px; font-size: 11px; }
}

/* ---------- 馬券購入ページ ---------- */
.buy-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 100px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.buy-step-title {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 12px;
}

.buy-hint { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.buy-hint a { color: var(--hanko); }

#race-select {
  width: 100%;
  max-width: 480px;
}

.picker-hint { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 8px; }

.horse-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.horse-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}
.horse-chip:hover { background: rgba(28,27,24,0.05); }
.horse-chip.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.horse-chip.selected .chip-jockey { color: rgba(255,255,255,0.7); }
.horse-chip.disabled-chip { opacity: 0.3; pointer-events: none; }

.chip-order {
  background: var(--hanko);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip-num { font-family: var(--font-mono); font-weight: 700; }
.chip-jockey { font-size: 11px; color: var(--ink-soft); }

.axis-position {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.radio-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  border: 1px solid var(--rule);
  padding: 4px 8px;
  cursor: pointer;
}

#amount-input { max-width: 200px; }

.phase2-method-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.preview-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--rule);
}
.preview-combo-row:last-child { border-bottom: none; }
.preview-combo-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.preview-combo-amount {
  width: 100px;
  font-family: var(--font-mono);
  text-align: right;
}

.preview-area { margin-bottom: 16px; }

/* 買い目欄の要約(2026-09-30〜。見出し行＋馬番構成の行。組み合わせ一覧は折りたたみ) */
.preview-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  margin-bottom: 10px;
}
/* 要約左の「かごへ追加する」チェック(一覧の開閉に関係なく常時表示) */
.preview-master-check { flex: none; padding-top: 3px; cursor: pointer; }
.preview-master-check input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.preview-summary-body { flex: 1; min-width: 0; }
.preview-summary-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.preview-count { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.preview-summary-line { display: flex; gap: 10px; font-size: 13px; padding: 2px 0; }
.preview-summary-label { min-width: 4.5em; color: var(--ink-soft); }
.preview-summary-value { font-family: var(--font-mono); font-weight: 700; word-break: break-all; }
.preview-toggle { margin-bottom: 8px; }
/* 旧「買い目＋金額欄」用の .preview-combo-row{display:grid;1fr 110px} と、全体の
   label{flex-direction:column} を打ち消す(2クラス指定で詳細度を上げている) */
.preview-combo-row.preview-combo-check-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 5px 4px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.preview-combo-check-row input { flex: none; margin: 0; }
.preview-combo-check-row .preview-combo-label { flex: 1; min-width: 0; }
.preview-total { font-weight: 700; font-size: 18px; color: var(--hanko); }

.preview-combo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  padding: 8px 10px;
  background: #fff;
}

.preview-combo {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule);
}
.preview-combo:last-child { border-bottom: none; }
.preview-num { font-weight: 700; }

.submit-message { margin-top: 12px; font-size: 13px; }
.submit-message.success { color: var(--win); }
.submit-message-cart-btn { margin-left: 8px; padding: 4px 12px; font-size: 12.5px; }
.submit-message.error { color: var(--lose); }

/* ---------- レース管理ページ ---------- */
.races-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 20px 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.race-list-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.race-list-card .track { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.race-list-card .meta { font-size: 12px; color: var(--ink-soft); }
.race-list-card .entry-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.race-list-card .settled-badge { font-size: 11px; padding: 2px 8px; border: 1px solid var(--rule-strong); background: #fff; }
.race-list-card .settled-badge.done { background: var(--win); color: #fff; border-color: var(--win); }
/* 管理者向けにentries-badge/settled-badgeがbutton要素(出走馬表・払戻の登録/編集への入口)になる場合の見た目調整 */
button.entries-badge, button.settled-badge {
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.entries-badge:hover, button.settled-badge:hover { background: rgba(28,27,24,0.06); }
button.entries-badge.done:hover { background: var(--ink); opacity: 0.85; }
button.settled-badge.done:hover { background: var(--win); opacity: 0.85; }
.race-list-card .card-actions { margin-left: auto; display: flex; gap: 6px; }

/* レース管理画面: 競馬場カラム内に収めるための調整(横並びカラムでは1カラムの幅が
   狭いため、バッジ類を折り返しさせつつコンパクトにする) */
.race-track-column .race-list-card {
  border: none;
  border-top: 1px solid rgba(0,0,0,.08);
  border-radius: 0;
  padding: 8px 12px;
  gap: 6px;
}
.race-track-column .race-list-card:first-of-type { border-top: none; }
.race-track-column .track-meta { font-size: 11px; color: var(--ink-soft); font-weight: 400; }

.entry-form-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }

.entry-form-row {
  display: grid;
  grid-template-columns: 60px 70px 1fr 100px;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 6px;
}
.entry-form-row input, .entry-form-row select { padding: 6px; font-size: 12.5px; }

.finish-top3-box {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.finish-top3-row { display: flex; gap: 10px; flex-wrap: wrap; }
.finish-top3-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}
.finish-top3-row select { padding: 6px 8px; font-size: 13px; min-width: 90px; }

/* ---------- 購入履歴一覧(グループ表示) ---------- */
.group-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
}

.group-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.group-card-head:hover { background: rgba(28,27,24,0.03); }

.group-card-head .bet-badge { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.method-badge { font-size: 11px; color: var(--ink-soft); border: 1px solid var(--rule); padding: 2px 7px; }
.point-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.group-card-head .group-money { margin-left: auto; font-family: var(--font-mono); font-size: 13px; text-align: right; }

/* ---------- 購入履歴の一括削除(選択モード) ---------- */
/* チェックボックスは見た目だけ。実際のトグルは見出し(.bulk-selectable)全体のクリックで行う。 */
.bulk-check-wrap {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  pointer-events: none;
}
.bulk-check-wrap input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--hanko);
}
/* 選択モード中の見出し行(レース/購入方式グループ)。行全体がタップ対象。 */
.bulk-selectable { cursor: pointer; }
.bulk-selectable:hover { background: rgba(199, 42, 42, 0.08); }
.bulk-selectable.bulk-partial { background: rgba(199, 42, 42, 0.06); }
.bulk-selectable.bulk-selected,
.bulk-selectable.bulk-selected:hover { background: rgba(199, 42, 42, 0.16); }

.bulk-hint {
  margin: 0;
  padding: 10px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--hanko);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* 選択モード中は行ごとの編集input・削除ボタン・レース管理リンクを隠す(誤操作防止) */
body.history-selection-mode .amount-edit-input,
body.history-selection-mode .payout-edit-input,
body.history-selection-mode .detail-delete-btn,
body.history-selection-mode .group-detail-actions {
  display: none !important;
}
#bulk-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--paper-raised);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}
/* id セレクタの display:flex が [hidden] の display:none に勝ってしまうため明示する */
#bulk-action-bar[hidden] { display: none; }
#bulk-action-bar .bulk-bar-spacer { flex: 1; }
#bulk-count { font-weight: 700; font-size: 14px; }
/* .race-list は既に padding-bottom:80px を持つため、固定バー(約56px)ぶんの余白は足りている */

/* モバイルのレース見出しは通常「2行化 + 矢印を行末へ」だが、選択モードでは矢印が無く
   チェックボックスが先頭に来るため、見出しを素直な1〜2行のフローに戻す
   (2行化ルールは @media (max-width: 600px) 側にある)。 */
@media (max-width: 600px) {
  body.history-selection-mode .race-card-head-main { flex: 1 1 auto; }
  body.history-selection-mode .race-total { margin-right: 0; }
}

/* ---------- 結果・払戻入力ページ ---------- */
.result-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 100px;
}

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 16px;
}
.back-link:hover { text-decoration: underline; }

.result-head {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.result-head-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.result-head-line + .result-head-line { margin-top: 8px; }

.result-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.result-row {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.result-row-money { display: flex; align-items: center; gap: 14px; }

.payout-label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
.payout-input { width: 110px; font-family: var(--font-mono); }

.result-actions { display: flex; gap: 12px; align-items: center; }

/* ---------- 出走馬テキスト貼り付け・開催日程一括登録 ---------- */
.paste-box { border: 1px dashed var(--rule); padding: 10px; }
.paste-box textarea { width: 100%; margin: 8px 0; font-family: var(--font-mono); font-size: 12px; }
/* 「テキストから出走馬を一括入力」ボタンの横に「保存する」ボタンを複製配置。
   一括入力→保存までモーダル下部にスクロールしなくても完結できるようにするため。 */
.paste-box-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

.schedule-preview-list {
  list-style: none;
  margin: 10px 0;
  padding: 8px 10px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.schedule-preview-list li { padding: 3px 0; border-bottom: 1px dashed var(--rule); }
.schedule-preview-list li:last-child { border-bottom: none; }

#schedule-modal textarea { width: 100%; font-family: var(--font-mono); font-size: 12px; }
#schedule-modal label { margin-top: 10px; }

.result-ticket-group {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.result-ticket-group .result-head-line { margin-bottom: 8px; }
.result-ticket-group .result-row {
  background: var(--paper);
  border-color: var(--rule);
  padding: 8px 10px;
  margin-bottom: 6px;
}

/* ---------- レース選択グリッド(日付×競馬場×R) ---------- */
.race-grid { margin: 14px 0; overflow-x: auto; }

.race-grid-table { border-collapse: collapse; }
.race-grid-table th, .race-grid-table td { padding: 3px; text-align: center; }
.race-grid-table thead th { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.race-grid-table tbody th { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-align: right; padding-right: 8px; white-space: nowrap; }

.grid-cell {
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}
.grid-cell:hover { border-color: var(--ink); }
.grid-cell.has-entries { background: var(--paper-raised); border-color: var(--rule-strong); font-weight: 700; }
.grid-cell.empty-race { background: #fff; border-style: dashed; color: var(--ink-soft); }
.grid-cell.no-race { color: var(--rule); }
.grid-cell.selected { background: var(--hanko); color: #fff; border-color: var(--hanko); }

.grid-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 8px;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid var(--rule);
  margin-left: 10px;
}
.legend-swatch.has-entries { background: var(--paper-raised); border-color: var(--rule-strong); }
.legend-swatch.empty-race { background: #fff; border-style: dashed; }
.legend-swatch.no-race { background: #fff; }

.manual-race-area {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--rule);
}

.static-chip { cursor: default; }
.static-chip:hover { background: #fff; }

.manual-inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin-right: 14px; }
.manual-inline input { width: 70px; }

.preview-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.preview-combo-row:last-child { border-bottom: none; }
.preview-combo-amount { width: 90px; font-family: var(--font-mono); }

/* ---------- 馬券式別の払戻入力 ----------
   「式別バッジ・組番・金額入力」を1行にまとめ、行を複数段組み(CSS columns)で
   流し込んで縦スクロール量を減らす(モーダル幅に応じて自動で段数が変わる)。
   各行に式別バッジを付けて単独で意味が通るようにしている。
   注: <label>にはグローバルに display:flex; flex-direction:column が掛かっている
   ため、行は display:grid を明示して上書きする。 */
.payout-flat-rows {
  columns: 250px;
  column-gap: 24px;
  margin-top: 10px;
}

.payout-rate-row {
  display: grid;
  grid-template-columns: 56px 1fr 90px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 13px;
  break-inside: avoid;
}
/* 狭い画面用の .bet-badge { grid-area: badge } を打ち消す(この行のグリッドには
   名前付きエリアが無く、暗黙の列が増えて崩れるため)。 */
.payout-rate-row .bet-badge { padding: 3px 2px; font-size: 12px; grid-area: auto; justify-self: stretch; }
.payout-rate-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payout-rate-input { width: 90px; font-family: var(--font-mono); }

.payout-race-info { margin-top: -8px; margin-bottom: 14px; }

/* ---------- 購入履歴: 展開して金額修正・削除 ---------- */
.expand-arrow { color: var(--ink-soft); font-size: 11px; width: 12px; }

.group-detail { border-top: 1px dashed var(--rule); padding: 10px 18px 14px; background: var(--paper); }

.group-detail-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.group-detail-rows[hidden] { display: none; }

.group-detail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 8px 12px;
}

.amount-edit-input { width: 100px; font-family: var(--font-mono); }
.detail-payout { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); margin-left: auto; }

.group-detail-actions { display: flex; justify-content: flex-end; }

/* IPAT風コンパクト表示(2026-09-12追加。docs/design/screens.md参照)。box/ながし/
   フォーメーション等で生成された全組み合わせを展開する前に、入力した形(馬番一覧・
   着順ごとの馬番・軸馬/相手)を数行で見せる。 */
.group-compact-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.group-compact-line { display: flex; gap: 8px; }

.group-compact-label { color: var(--ink-soft); min-width: 32px; }

.group-compact-value { font-weight: 700; }

.group-compact-amount { color: var(--ink-soft); font-weight: 400; }

/* ---------- 購入方式グループのダイアログ(馬券風デザイン。2026-09-16追加) ---------- */
/* docs/design/screens.md「購入方式グループのダイアログ(馬券風デザイン)」参照。
   レース単位のアコーディオンを開いた後、式別の行(.group-card-head)をタップすると
   インライン展開の代わりにこのダイアログを開く(実際の馬券発売機で印字される馬券を
   イメージした専用デザイン。JRA英語表記(WIN/QUINELLA等)・式別を縦書きにした帯・
   3列レイアウトで構成する)。 */
.ticket-dialog-overlay { align-items: center; }

.ticket-dialog {
  position: relative;
  max-width: 420px;
  padding: 0;
  background: transparent;
  border: none;
  /* .modal の overflow-y:auto / max-height:90vh を活かす(以前ここで
     overflow:visible を指定していたため、金額変更パネルを開いて中身が
     画面高さを超えてもスクロールできず、下の方の行が操作できなかった。
     2026-09-17)。 */
}

.ticket-dialog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ticket-dialog-toolbar .dialog-close { width: 32px; height: 32px; font-size: 18px; border-radius: 50%; }

.ticket-amount-toggle-btn {
  font-size: 11px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  cursor: pointer;
}
.ticket-amount-toggle-btn:hover { background: rgba(28,27,24,0.06); }

/* 最初に参考にした馬券画像ジェネレーターの縦横比(750:520)に固定する。
   買い目の点数が多くても券面自体は広げず、収まらない分はticket-selection-area
   側の内部スクロールに任せる(2026-09-16)。 */
.ticket-face {
  position: relative;
  aspect-ratio: 750 / 520;
  display: flex;
  flex-direction: column;
  background: #eef5ea;
  background-image: repeating-linear-gradient(90deg, rgba(47,122,61,0.07) 0px, rgba(47,122,61,0.07) 1px, transparent 1px, transparent 6px);
  border: 2px solid #1c1b18;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  padding: 10px 12px 12px;
  color: #1c1b18;
  overflow: hidden;
}

.ticket-face-topbar {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 10.5px;
  color: var(--ink-soft);
  flex: 0 0 auto;
}

/* 上段(左情報・縦帯・買い目)をgrid化し、下段(合計欄)を縦帯・買い目の
   左端(=縦帯の左端)に揃えて配置する(2026-09-17。以前はflexで3列を
   並べて合計欄を買い目列の中に置いていたため、縦帯の右合わせになって
   実物の配置と違っていた)。縦帯の中心が券面中央よりやや左に来るよう、
   左列の幅は33%→28%にしている(2026-09-18。縦帯をさらに左へ寄せ、
   その分買い目列(単勝・複勝の馬名表示幅)を広げるため5ポイント縮小した)。 */
.ticket-face-main {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  /* 縦帯(中央列)は上下の英字表記(最長でQUINELLA/TRIFECTAの8文字)が
     潰れたり3行に増えたりしない範囲でできるだけ細くしている。56px→52px
     (2026-09-18。約7%縮小。合わせて.ticket-strip-labelのfont-size/padding も
     比例して詰め、8文字が1行に収まる余裕を維持している)。 */
  grid-template-columns: 28% 52px 1fr;
  /* 1frではなくminmax(0,1fr)にする(1frは行内の最小コンテンツサイズが
     autoのままになり、環境によって1行目の高さが縮まないことがあるため。
     Safari等でaspect-ratio+grid+flexを組み合わせた際に高さ計算が
     不安定になる既知の問題への対策。2026-09-17)。 */
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 8px;
}
.ticket-face-main > * { min-height: 0; }

/* 左列: 上側ブロック(年/場名/R番号)は通常のフローで配置する。下側ブロック
   (レース名/発売場/月日)は合計欄の下端に揃えるため.ticket-info-bottomで
   position:absolute配置にしている(下記コメント参照)。 */
.ticket-info-col {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ticket-info-top { display: flex; flex-direction: column; gap: 3px; }
.ticket-year-line { font-size: 23px; font-weight: 700; white-space: nowrap; }
.ticket-track-line { font-size: 34px; font-weight: 700; white-space: nowrap; line-height: 1.05; }
.ticket-race-line { display: flex; align-items: center; gap: 5px; }
.ticket-race-num-badge {
  display: inline-block;
  background: #1c1b18;
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  padding: 1px 9px;
  border-radius: 3px;
}
.ticket-race-num-suffix { font-size: 16px; }
/* 下段ブロック(レース名/JRA◯◯/月日)は合計欄(.ticket-face-footer)の下端と
   揃える(実物の馬券の配置に合わせた)。以前はgrid-rowを合計欄の行まで
   またがせてjustify-content:space-betweenで押し下げていたが、その方式だと
   下段ブロックの分だけ合計欄の行(auto)の必要高さが増え、フレックス行
   (grid-row:1。買い目列を含む)が圧迫されて縮み、単勝・複勝の馬名や金額の
   表示が崩れる不具合が出た(2026-09-18)。**グリッドの行サイズ計算に影響を
   与えないよう、position:absoluteで.ticket-face-main(position:relativeを追加)
   の下端に直接固定する方式に変更**。左列(28%。2026-09-18に33%から変更)の
   幅に合わせてwidthも28%にする。 */
.ticket-info-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ticket-face-race-name { font-size: 15px; color: var(--ink-soft); line-height: 1.3; overflow-wrap: anywhere; }
.ticket-jra-line { font-size: 14px; color: var(--ink-soft); }
.ticket-face-date { font-size: 15px; color: var(--ink-soft); }

/* 中央列: 式別を縦書きにした帯(英字ラベルの黒帯で上下を挟む) */
.ticket-strip {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid #1c1b18;
  background: #fff;
}
.ticket-strip-label {
  background: #1c1b18;
  color: #fff;
  /* 縦帯の幅を56px→52pxに詰めた(2026-09-18)ぶん、最長のQUINELLA/TRIFECTA
     (8文字)が1行に収まる余裕を保つため、font-size・letter-spacing・左右padding も
     比例して詰めている(8.5px→8px、0.1px→0、1px→0px)。 */
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: center;
  padding: 3px 0;
  overflow-wrap: break-word;
}
.ticket-strip-method {
  text-align: center;
  font-size: 10px;
  color: var(--ink-soft);
  padding-top: 4px;
}
.ticket-strip-kanji {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 実物の馬券は式別の文字数(2〜3文字)に関わらず帯の高さいっぱいに
     均等割り付けで配置されている。空いている高さで詰めて中央寄せする
     justify-content:centerではなく、文字間を均等に広げるspace-evenlyにする
     (2026-09-18)。 */
  justify-content: space-evenly;
  /* 実物の馬券は明朝体ではなく太いゴシック体で印字されているため、
     見出し用の明朝体(--font-display)ではなく本文用ゴシック(--font-body)を使う。 */
  font-family: var(--font-body), sans-serif;
  font-weight: 700;
  padding: 4px 0;
}
.ticket-vchar { font-size: 24px; line-height: 1.15; }

/* 右列: 方式ボックス・買い目(番号ボックス)。合計は別行の.ticket-face-footerへ。 */
.ticket-buy-col { grid-column: 3; grid-row: 1; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }

/* 方式ボックス(ボックス・ながし・フォーメーション等。1点のみの通常買いでは出さない) */
/* 買い目エリアの横幅いっぱいに広げる(実物の馬券は方式ラベルの黒枠が
   横幅いっぱいに伸び、和文ラベルが左・英文ラベルが右に離れて並ぶため。
   2026-09-17。以前は内容幅だけの左寄せだった)。 */
.ticket-method-box {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border: 2px solid #1c1b18;
  padding: 3px 10px;
  font-weight: 700;
  font-size: 17px;
  background: #fff;
}
.ticket-method-en { font-size: 11px; font-weight: 400; }

/* 買い目(馬番の四角囲み) */
.ticket-selection-area { font-family: var(--font-mono); flex: 1; min-height: 0; overflow-y: auto; }
.ticket-num-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 2px;
  border: 2px solid #1c1b18;
  background: #fff;
  font-weight: 700;
  font-size: 17px;
  margin: 0.5px;
}
.ticket-sep-arrow, .ticket-sep-dash { margin: 0 1px; font-weight: 700; font-size: 15px; }

.ticket-selection-line { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; font-size: 18px; }
.ticket-horse-name {
  margin-left: 6px;
  font-family: var(--font-body);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 複数点のうち点数が少ない場合、実物同様に1組み合わせ=1行で列挙する表示
   (docs/design/screens.md参照。TICKET_LIST_ROWS_MAX 以下のときだけ使う)。
   買い目エリアを左右均等(50%/50%)に分け、左=買い目番号・右=購入額とする。 */
.ticket-line-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 2px; }
.ticket-line-row .ticket-selection-line { flex: 1 1 50%; min-width: 0; font-size: 14px; }
.ticket-line-amount { flex: 1 1 50%; min-width: 0; text-align: right; white-space: nowrap; }

/* 実物の馬券の金額欄は桁数が固定で、空いている上位桁を星で埋めて印字される
   (ticketStarPad()参照)。星は本文よりわずかに小さくして数字を主役にする。 */
.ticket-star { font-size: 0.85em; letter-spacing: 0px; }

.ticket-box-row { display: flex; flex-wrap: wrap; }
.ticket-formation-row { display: flex; align-items: flex-start; flex-wrap: wrap; }
.ticket-formation-col { display: flex; flex-wrap: wrap; max-width: 68px; }

/* 軸/相手(ながし)。実物の三連単「軸1頭ながし」が軸列・2着相手列・3着相手列の
   3分割になっているのに合わせ、軸の頭数+相手の列数ぶんを横に均等分割する
   (2026-09-17。以前は軸グループ・相手グループを1列ずつ横並びにしていた)。 */
.ticket-axis-multi-row { display: flex; gap: 4px; }
.ticket-axis-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ticket-axis-label { font-size: 11px; color: var(--ink-soft); }
.ticket-num-col { display: flex; flex-wrap: wrap; justify-content: center; }

/* 単勝・複勝の金額は選択行(馬番+馬名)の真下・右揃えで表示する
   (2026-09-18に左揃えから右揃えへ変更)。 */
.ticket-single-amount {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
}

.ticket-combo-table { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.ticket-combo-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* マルチは「軸○頭ながし」表記自体は変えず、組合せ数・各組の行と同じ高さに
   黒背景のバッジで示す(2026-09-18。以前は買い目の番号ボックスの左に置いて
   いたため番号の並びが崩れて見えていた。組合せ数・各組の行の隣に移動した)。 */
.ticket-combo-table-row { display: flex; align-items: stretch; gap: 6px; }
.ticket-combo-table-row .ticket-combo-table { flex: 1; min-width: 0; }
.ticket-multi-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: #1c1b18;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 5px;
  white-space: nowrap;
}

/* 下段: 合計欄。縦帯・買い目列にまたがる形で下端に配置し、左端を縦帯の左端に
   揃える(grid-column: 2/4)。以前は買い目列の中に収めていて縦帯の右合わせに
   なっていたため、実物の「縦帯の左端から始まる」配置に合わせて分離した。 */
.ticket-face-footer {
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: end;
}
.ticket-totals { border-top: 1px dashed rgba(28,27,24,0.5); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.ticket-total-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
}
.ticket-total-row > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-body);
}
.ticket-total-values { display: flex; gap: 8px; white-space: nowrap; flex: 0 0 auto; }

.ticket-edit-rows { margin-top: 16px; }
.ticket-edit-rows[hidden] { display: none; }

.ticket-dialog .group-detail-actions { margin-top: 10px; }

@media (max-width: 420px) {
  .ticket-face-main { grid-template-columns: 28% 45px 1fr; }
  .ticket-year-line { font-size: 19px; }
  .ticket-track-line { font-size: 27px; }
  .ticket-vchar { font-size: 19px; }
  .ticket-num-box { min-width: 22px; height: 22px; font-size: 14px; }
}

/* ---------- 集計ページ: タブ ---------- */
.stats-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 4px;
}

.stats-tab {
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-bottom: none;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  top: 2px;
}
.stats-tab.active { background: var(--paper-raised); color: var(--ink); font-weight: 700; top: 0; padding-top: 11px; }
/* タブは1行に並べ、はみ出す分は横にスクロールする(2026-10-15。スマホでデータ検索の5つのタブが縦長に折り返されていた。
   管理画面のタブ〈.admin-tabs〉と同じ考え方)。集計画面のタブにも効く */
.stats-tabs { overflow-x: auto; scrollbar-width: none; padding-top: 2px; }
.stats-tabs::-webkit-scrollbar { display: none; }
.stats-tab { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) { .stats-tab { padding: 8px 12px; } .stats-tab.active { padding-top: 10px; } }

/* ---------- データ検索ページ ---------- */
.ds-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 18px;
}
.ds-filter { min-width: 150px; }
.ds-filter-label { font-size: 12px; color: var(--ink-soft); }
.ds-status { font-family: var(--font-body); color: var(--ink-soft); padding: 16px 0; }
#ds-results .stats-heading { margin-top: 26px; }
#ds-results .stats-heading:first-child { margin-top: 0; }

/* ---------- データ検索: 馬情報検索タブ ---------- */
.hi-result-list { list-style: none; margin: 10px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hi-result-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--rule-strong, rgba(0,0,0,.2));
  border-radius: 8px; background: var(--paper-raised, #fff); cursor: pointer;
  font-size: .95rem;
}
.hi-result-btn:hover { background: rgba(0, 0, 0, .04); }
.hi-result-name { font-weight: 700; }
.hi-result-count { font-size: .75rem; opacity: .7; }
/* 縦スクロールを減らすための詰め(2026-09-29)。馬名の右に馬齢・性別を並べ、
   見出し・段間のmarginも合わせて詰めている。 */
.hi-detail-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.hi-detail-title .stats-heading { margin: 0; }
.hi-detail-age { font-size: 13px; color: var(--ink-soft); }
#hi-detail .stats-heading { margin-top: 20px; }
#hi-detail .stats-subheading { margin-top: 12px; }
#hi-detail .stats-subheading:first-of-type { margin-top: 8px; }
/* 血統/調教師・馬主・生産牧場を別々の段に分けるぶん、カードの最小幅を広げて
   1段あたりの枚数を絞る(2026-09-29。父/母/母父・調教師/馬主/生産牧場でそれぞれ3枚)。
   カード自体もpadding・文字サイズを縮めて縦を約20%詰めている。 */
.hi-master-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 4px; }
.hi-master-grid .overall-card { padding: 11px 14px; gap: 4px; }
.hi-master-grid .overall-value { font-size: 16px; }
#hi-fetch-note { margin: 6px 0; }
.hi-admin-panel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.hi-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hi-edit-form { margin-top: 12px; }
.hi-edit-field {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  padding: 11px 14px; font-size: 12px; color: var(--ink-soft);
}
.hi-edit-field input { padding: 8px; font-size: 14px; font-family: var(--font-body); color: var(--ink); }
.hi-edit-form-actions { display: flex; gap: 10px; margin-top: 10px; }

/* ---------- データ検索: 重賞検索タブ(2026-10-02追加。docs/design/graded-race-search.md) ---------- */
.gr-grade-filter { margin: 10px 0 4px; }
.gr-list { margin-top: 8px; }
.gr-month { margin-bottom: 14px; }
.gr-month-label { font-family: var(--font-display); font-size: 14px; margin: 0 0 6px; color: var(--ink-soft); }
.gr-cand-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-cand-btn { text-align: left; }
.gr-grade {
  display: inline-block; min-width: 2.4em; padding: 1px 6px; margin-right: 4px;
  border-radius: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-align: center; color: #fff; background: var(--ink-soft); vertical-align: middle;
}
.gr-grade-G1 { background: #1c4e9c; }
.gr-grade-G2 { background: #b5231c; }
.gr-grade-G3 { background: #2f7a3d; }
.gr-grade-J { background: #7a5a2f; }
.gr-detail-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 8px; }
.gr-detail-head .stats-heading { margin: 0; }
.gr-detail-sub { font-size: 13px; color: var(--ink-soft); }
#gr-detail > .stats-heading { margin-top: 26px; }
.gr-unannounced { font-family: var(--font-display); font-size: 18px; padding: 14px 0; }
.gr-entry-table td, .gr-entry-table th { white-space: nowrap; }
.gr-entry-scratched td { color: var(--ink-soft); background: rgba(0, 0, 0, .04); }
.gr-horse-toggle {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--ink); text-decoration: underline dotted; cursor: pointer;
}
.gr-waku {
  display: inline-block; min-width: 1.6em; padding: 1px 4px; border: 1px solid rgba(0, 0, 0, .25);
  font-family: var(--font-mono); font-weight: 700; text-align: center;
}
.gr-waku.waku-1 { background: var(--waku-1); color: var(--waku-1-ink); }
.gr-waku.waku-2 { background: var(--waku-2); color: var(--waku-2-ink); }
.gr-waku.waku-3 { background: var(--waku-3); color: var(--waku-3-ink); }
.gr-waku.waku-4 { background: var(--waku-4); color: var(--waku-4-ink); }
.gr-waku.waku-5 { background: var(--waku-5); color: var(--waku-5-ink); }
.gr-waku.waku-6 { background: var(--waku-6); color: var(--waku-6-ink); }
.gr-waku.waku-7 { background: var(--waku-7); color: var(--waku-7-ink); }
.gr-waku.waku-8 { background: var(--waku-8); color: var(--waku-8-ink); }
.gr-cell-sub { font-size: 10px; color: var(--ink-soft); }
.gr-entry-detail > td { background: var(--paper); white-space: normal; text-align: left; }
.gr-horse-detail {
  /* 出走馬表は横スクロールするほど幅が広いため、詳細は表示中の枠幅に固定して左端に貼り付ける
     (--gr-wrap-w は graded-race-search.js が .table-wrap の表示幅から設定する) */
  position: sticky; left: 8px; padding: 6px 2px 10px;
  width: var(--gr-wrap-w, calc(100vw - 48px)); max-width: var(--gr-wrap-w, calc(100vw - 48px));
}
.gr-detail-heading { font-family: var(--font-display); font-size: 14px; margin: 14px 0 6px; }
.gr-detail-heading:first-child { margin-top: 2px; }
.gr-card-sub { font-size: 11px; color: var(--ink-soft); line-height: 1.4; }
.gr-hh-name { text-align: left; }
.gr-hh-note { text-align: left; white-space: normal; min-width: 8em; }
.gr-all-runs-btn { margin-top: 8px; }
.gr-counts-table td, .gr-counts-table th { white-space: nowrap; }
.gr-sub-heading { margin-top: 16px; }
.gr-year-card { background: var(--paper-raised); border: 1px solid var(--rule-strong); padding: 12px 14px; margin-bottom: 12px; }
.gr-year-card .table-wrap { margin-top: 8px; }
.gr-year-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.gr-year { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.gr-differs { font-size: 11px; padding: 1px 6px; border: 1px solid var(--hanko); color: var(--hanko); }
.gr-main-payout { font-family: var(--font-mono); font-size: 13px; margin: 8px 0 0; }
.gr-year-more { margin-top: 8px; }
.gr-year-more summary { cursor: pointer; font-size: 13px; }
.gr-result-table td, .gr-result-table th { white-space: nowrap; }
.gr-payout-cell { font-family: var(--font-mono); text-align: left; }
.gr-trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 22px; }
.gr-trend-grid .stats-subheading { margin-top: 0; }

/* ---------- 管理画面: 馬名エイリアスの登録馬一覧(50音行 + 検索) ---------- */
.horse-index { margin: 10px 0 4px; }
.horse-index-rows { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.horse-row-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border: 1px solid var(--rule-strong, rgba(0,0,0,.2));
  border-radius: 8px; background: var(--paper-raised, #fff); cursor: pointer;
  font-size: .95rem; font-weight: 700;
}
.horse-row-btn:hover { background: rgba(0, 0, 0, .04); }
.horse-row-btn.active { background: var(--ink, #222); color: #fff; border-color: var(--ink, #222); }
.horse-row-count { font-size: .75rem; font-weight: 500; opacity: .7; }
.horse-index-search-label { display: flex; flex-direction: column; gap: 4px; max-width: 280px; font-size: 12px; color: var(--ink-soft, #777); }
.horse-index-search-label input { padding: 8px; }
.horse-row-mismatch { background: rgba(200, 120, 0, .12); }
.horse-variant-chip {
  display: inline-block; margin: 1px 2px; padding: 2px 7px;
  border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px;
  background: var(--paper-raised, #fff); cursor: pointer; font-size: .82rem;
}
.horse-variant-chip:hover { background: rgba(0, 0, 0, .06); }

/* ---------- レース管理: 日付→競馬場→R の3階層アコーディオン ---------- */
.date-group { border: 1px solid var(--rule-strong); background: var(--paper-raised); }
.date-group + .date-group { margin-top: 14px; }

.date-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  background: repeating-linear-gradient(135deg, rgba(28,27,24,0.03) 0 8px, transparent 8px 16px);
}
.date-group-head:hover { background: rgba(28,27,24,0.06); }
.date-label { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.date-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }

.date-group-body { border-top: 1px solid var(--rule); padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.date-group-body[hidden] { display: none; }

.track-group { border: 1px solid var(--rule); background: #fff; }

.track-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  cursor: pointer;
}
.track-group-head:hover { background: rgba(28,27,24,0.04); }
.track-label { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.track-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-left: auto; }

.track-group-body { border-top: 1px dashed var(--rule); display: flex; flex-direction: column; }
.track-group-body[hidden] { display: none; }
.track-group-body .race-list-card { border: none; border-bottom: 1px solid var(--rule); background: transparent; }
.track-group-body .race-list-card:last-child { border-bottom: none; }

.entries-badge { font-size: 11px; padding: 2px 8px; border: 1px solid var(--rule-strong); color: var(--ink-soft); }
.entries-badge.done { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 出走馬・騎手(縦一列 + 予想印) ---------- */
.entries-vertical-list { display: flex; flex-direction: column; gap: 6px; }

.entries-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--rule);
}

.entries-row-name { font-weight: 700; font-size: 13.5px; min-width: 120px; }
.entries-row-jockey { font-size: 12px; color: var(--ink-soft); margin-right: auto; }

.mark-select {
  width: 56px;
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  padding: 4px 2px;
}


/* ---------- 予想画面 ---------- */
.prediction-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.prediction-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 24px;
}

.prediction-race-select {
  flex: 1;
  max-width: 680px;
}

.prediction-race-select select {
  width: 100%;
}

.prediction-back {
  text-decoration: none;
  white-space: nowrap;
}

.prediction-panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
}

.prediction-race-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 2026-08-20: 一覧の行の高さ削減とあわせて、ページ上部(日付・競馬場・
     レース番号等のヘッダー)の余白も同程度(4px)詰めた(旧18px→14px)。 */
  padding: 14px 18px;
  border-bottom: 2px solid var(--rule-strong);
  background: repeating-linear-gradient(135deg, rgba(28,27,24,0.03) 0 8px, transparent 8px 16px);
}

.prediction-race-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.prediction-select {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 6px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
/* 開催日セレクトは補助情報寄りの見た目にする(等幅・やや小さめ) */
#prediction-date-select {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
}
#prediction-date-select { min-width: 84px; }
#prediction-track-select { min-width: 90px; }
#prediction-racenum-select { min-width: 66px; }

/* ヘッダー2行目: レース名・頭数・条件バッジ(牝/H) */
.prediction-race-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.prediction-race-meta .race-name {
  color: var(--ink-soft);
  font-size: 14px;
}

.race-course {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.prediction-entry-count {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.race-cond-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.race-cond-filly {
  background: var(--hanko-soft);
  color: var(--hanko);
  border-color: var(--hanko);
}
.race-cond-handi {
  background: #fff;
  color: var(--ink);
}

/* 勝負レーストグル(2026-09-12追加)。.race-cond-badge をボタンにも流用するための
   リセット+ON/OFFの見た目。 */
.key-race-toggle {
  font-family: inherit;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}
.key-race-toggle.active {
  background: var(--hanko);
  color: #fff;
  border-color: var(--hanko);
}

.prediction-race-title .stamp-btn {
  margin-left: auto;
  white-space: nowrap;
}

.prediction-tickets {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prediction-tickets[hidden] { display: none; }

.prediction-tickets-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.prediction-tickets-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.prediction-horses {
  display: flex;
  flex-direction: column;
}

.prediction-horse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
}

.prediction-horse-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.prediction-horse-info .mini-waku {
  flex: 0 0 auto;
}

.prediction-horse-number {
  font-family: var(--font-mono);
  font-weight: 700;
  width: 24px;
  text-align: center;
}

/* 2026-09-08: 馬番の丸を枠色で塗る(枠番の独立バッジを廃止したため)。
   枠色は --waku-1..8。waku-0(枠未確定)は色を付けず輪郭のみの丸にする。 */
.prediction-horse-number.waku-tint {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  font-size: 12px;
}
.prediction-horse-number.waku-1 { background: var(--waku-1); color: var(--waku-1-ink); }
.prediction-horse-number.waku-2 { background: var(--waku-2); color: var(--waku-2-ink); }
.prediction-horse-number.waku-3 { background: var(--waku-3); color: var(--waku-3-ink); }
.prediction-horse-number.waku-4 { background: var(--waku-4); color: var(--waku-4-ink); }
.prediction-horse-number.waku-5 { background: var(--waku-5); color: var(--waku-5-ink); }
.prediction-horse-number.waku-6 { background: var(--waku-6); color: var(--waku-6-ink); }
.prediction-horse-number.waku-7 { background: var(--waku-7); color: var(--waku-7-ink); }
.prediction-horse-number.waku-8 { background: var(--waku-8); color: var(--waku-8-ink); }

.prediction-horse-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.prediction-horse-name strong {
  font-size: 14px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 性齢・負担重量・騎手は馬名の下段に小さく1行で表示(はみ出しは省略)。
   下段は行の高さを増やさないよう詰めたサイズにしている。 */
.prediction-horse-name small {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.2;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-mark-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.prediction-mark-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  padding: 0;
}

.prediction-mark-btn:hover {
  background: rgba(28,27,24,0.08);
}

.prediction-mark-btn.selected {
  background: var(--hanko);
  color: #fff;
  border-color: var(--hanko);
}

.prediction-mark-btn.clear-mark {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-soft);
}

.prediction-memo-label {
  padding: 18px;
  border-bottom: 1px solid var(--rule);
}

.prediction-memo-label textarea {
  width: 100%;
  min-height: 120px;
}

.prediction-no-entries {
  padding: 28px 18px;
  color: var(--ink-soft);
  text-align: center;
}

.prediction-race-btn {
  text-decoration: none;
  color: var(--ink);
}

.prediction-race-btn:hover {
  background: rgba(28,27,24,0.06);
}

@media (max-width: 600px) {

  .prediction-main {
    padding: 18px 12px 60px;
  }

  .prediction-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .prediction-race-select {
    max-width: none;
  }

  .prediction-back {
    text-align: center;
  }

  .prediction-horse {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .prediction-horse-info {
    width: 100%;
  }

  .prediction-mark-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .prediction-mark-btn {
    width: 42px;
    height: 42px;
  }
}


/* ---------- 馬券購入UI: ステップ式ダイアログ ---------- */
body.modal-open { overflow: hidden; }

/* ?race= 付きで直接来た場合、購入モーダルが開くまでレース選択UIを隠す
   (buy.js / buy-purchase-modal.js の deep-link-purchase クラス)。
   #purchase-modal は .buy-step の外(.buy-main 直下の兄弟)にあるため
   このセレクタの影響を受けない = モーダル自体は隠れない。 */
body.deep-link-purchase .buy-step { visibility: hidden; }

.purchase-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 18, 15, 0.58);
  backdrop-filter: blur(3px);
}
.purchase-modal[hidden] { display: none; }

.purchase-dialog {
  width: min(920px, 100%);
  max-height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  overflow: hidden;
}
.purchase-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
}
/* 見出し右上の「馬券かご」ボタン＋×(2026-09-30〜) */
.purchase-dialog-head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.purchase-kicker, .panel-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.purchase-dialog-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
}
.dialog-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.purchase-stepper {
  display: flex;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.purchase-step-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.purchase-step-dot span {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
}
.purchase-step-dot.active { color: var(--ink); font-weight: 700; }
.purchase-step-dot.active span { background: var(--ink); color: #fff; border-color: var(--ink); }
.purchase-step-dot.done { color: var(--hanko); }
.purchase-step-dot.done span { border-color: var(--hanko); color: var(--hanko); }
.purchase-stepper i { flex: 1; height: 1px; margin: 0 8px; background: var(--rule); }

.purchase-race-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 22px;
  border-bottom: 1px dashed var(--rule);
  font-size: 12px;
}
.purchase-race-summary strong { font-family: var(--font-display); font-size: 15px; }
.race-summary-date { color: var(--ink-soft); font-family: var(--font-mono); }

.purchase-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  min-height: 320px;
}
.purchase-panel h3 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 21px;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.choice-button {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .12s ease;
}
.choice-button:hover { transform: translateY(-1px); border-color: var(--ink); }
.choice-button.selected { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.method-help { margin: 16px 0 0; color: var(--ink-soft); font-size: 13px; }
.sr-only-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.entries-compact { margin-bottom: 16px; }
.entries-compact-list { display: flex; gap: 6px; flex-wrap: wrap; }
.entry-mini { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--rule); background: #fff; font-size: 11px; }
.entry-mini b { font-family: var(--font-mono); font-size: 13px; }

.amount-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}
.amount-toolbar label { margin: 0; }
.amount-toolbar input { max-width: 150px; }
.purchase-submit { width: 100%; margin-top: 14px; }

.purchase-dialog-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
}
.purchase-foot-spacer { flex: 1; }
.purchase-dialog-foot .stamp-btn { min-width: 170px; }

@media (max-width: 700px) {
  .purchase-modal { padding: 0; align-items: stretch; }
  .purchase-dialog { max-height: 100vh; height: 100dvh; width: 100%; border: 0; }
  .purchase-dialog-head { padding: 14px 16px 10px; }
  .purchase-dialog-head h2 { font-size: 18px; }
  .purchase-stepper { padding: 10px 12px; overflow-x: auto; }
  .purchase-step-dot { font-size: 10px; }
  .purchase-step-dot span { width: 22px; height: 22px; }
  .purchase-step-dot:not(.active) { max-width: 24px; overflow: hidden; }
  .purchase-step-dot:not(.active) { font-size: 0; }
  .purchase-stepper i { min-width: 10px; margin: 0 4px; }
  .purchase-race-summary { padding: 9px 14px; gap: 7px; }
  .purchase-dialog-body { padding: 18px 14px 24px; }
  .purchase-panel h3 { font-size: 19px; margin-bottom: 14px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .choice-button { min-height: 52px; font-size: 13px; }
  .purchase-dialog-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .purchase-dialog-foot .stamp-btn { min-width: 130px; }
  .purchase-dialog-foot .ghost-btn { min-width: 90px; }
  .horse-grid { gap: 7px; }
  .horse-chip { width: 100%; justify-content: flex-start; padding: 9px 10px; }
  .amount-toolbar { align-items: stretch; }
  .amount-toolbar label { flex: 1; }
  .amount-toolbar input { max-width: none; width: 100%; }
}


/* --- レース選択カラム / 予想画面の馬メモ行 / 購入チケット行 --- */
.race-columns{display:flex;gap:16px;overflow-x:auto;align-items:flex-start;padding:8px 2px 20px}.race-track-column{min-width:240px;flex:1;background:var(--paper,#fff);border:1px solid rgba(0,0,0,.12);border-radius:12px;overflow:hidden}.race-track-column h3{margin:0;padding:12px 14px;background:rgba(0,0,0,.04);font-size:1.05rem}.race-column-row{width:100%;min-height:54px;border:0;border-top:1px solid rgba(0,0,0,.08);background:transparent;display:grid;grid-template-columns:48px 1fr;gap:8px;text-align:left;padding:8px 12px;cursor:pointer}.race-column-row:hover{background:rgba(0,0,0,.04)}.race-column-row b{font-family:"Roboto Mono",monospace}.race-column-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.race-column-row.empty-race,.race-column-row.no-race{color:#999}.race-column-row.has-entries{font-weight:600}
.horse-note-card{display:block;padding:0;border:1px solid rgba(0,0,0,.1);border-radius:10px;overflow:hidden;background:#fff}
/* 2026-08-20: 行の高さをやや詰めるためpaddingを12px→9pxに削減。また、開閉
   トグル(＋/－)の隣にメモ有無を示す「▼」マーク(.note-toggle-tail内)を
   並べて表示できるよう、末尾列の幅を30px→42pxに広げた。 */
/* 2026-09-08: 枠番の独立バッジ(.mini-waku)を廃止し、馬番の丸を枠色で塗る方式へ
   変更。列は「馬番・馬名(下段に性齢/負担重量/騎手)・予想印・開閉」の4列。 */
.horse-note-toggle{width:100%;display:grid;grid-template-columns:38px minmax(120px,1fr) auto;align-items:center;gap:8px;padding:9px 12px;border:0;background:transparent;text-align:left;cursor:pointer}.horse-note-toggle:hover{background:rgba(0,0,0,.035)}
.note-toggle-tail{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}
.note-toggle-tail .memo-mark{margin-left:0}.current-horse-note{font-size:.82rem;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.horse-note-editor{padding:12px;border-top:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02)}.horse-note-editor textarea{width:100%;box-sizing:border-box;margin-top:8px}.horse-note-actions{display:flex;gap:10px;align-items:center;margin-top:8px}.horse-note-status{font-size:.85rem;color:#2c6e49}.prediction-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.prediction-actions a{text-decoration:none}.prediction-mark-btn.selected{font-weight:800;transform:translateY(-1px);box-shadow:0 0 0 2px currentColor inset}
.purchase-dialog-modern{max-width:980px}.purchase-dialog-modern .purchase-dialog-body{display:flex;flex-direction:column;gap:14px}.method-options{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.inline-options,.toggle-option{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.035)}.inline-options label,.toggle-option{cursor:pointer}.bet-horse-table-head{display:grid;grid-template-columns:40px 48px minmax(140px,1fr) minmax(100px,.8fr) minmax(220px,1fr);gap:8px;padding:8px 10px;font-size:.8rem;color:#777;border-bottom:1px solid rgba(0,0,0,.12)}.bet-horse-list{border:1px solid rgba(0,0,0,.1);border-radius:10px;overflow:hidden}.bet-horse-row{display:grid;grid-template-columns:40px 48px minmax(140px,1fr) minmax(100px,.8fr) minmax(220px,1fr);gap:8px;align-items:center;padding:10px;border-top:1px solid rgba(0,0,0,.07)}.bet-horse-row:first-child{border-top:0}.bet-horse-control{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.control-label{display:inline-flex;gap:5px;align-items:center;font-size:.86rem}.radio-inline,.check-inline{display:inline-flex;gap:4px;align-items:center}.preview-combo-row{display:grid;grid-template-columns:1fr 110px;gap:10px;align-items:center}.preview-combo-amount{width:100%;box-sizing:border-box}.purchase-dialog-modern .purchase-panel{margin:0}.purchase-dialog-modern .purchase-panel[hidden]{display:none}.date-picker-label{display:flex;flex-direction:column;gap:4px;max-width:220px}.date-picker-label input{padding:8px}.buy-main .buy-step{margin-bottom:20px}
@media(max-width:700px){.race-track-column{min-width:220px}.horse-note-toggle{grid-template-columns:34px minmax(90px,1fr) auto}.current-horse-note{display:none}.bet-horse-table-head{display:none}.bet-horse-row{grid-template-columns:30px 38px minmax(100px,1fr);gap:6px}.bet-horse-jockey{display:none}.bet-horse-control{grid-column:1/-1;padding-left:68px}.preview-combo-row{grid-template-columns:1fr 90px}.purchase-dialog-modern{width:calc(100vw - 16px);max-height:92vh;overflow:auto}}

/* ---------- カレンダー・購入履歴一覧 ---------- */
.race-calendar{
  background:var(--paper,#fff);
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:14px;
  margin:12px 0 20px;
}
.race-calendar-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
}
.race-calendar-toolbar strong{min-width:130px;text-align:center}
/* 馬券履歴: カレンダーの並びの右端の「CSVインポート」(2026-10-15 ヘッダーから移した)。月の移動ボタンと少し離す */
.history-csv-import-btn{margin-left:12px}
/* レース管理画面: 年月ラベルを押すと年・月を選んで移動できる(2026-10-08) */
.calendar-month-jump-btn{min-width:130px;text-align:center;font:inherit;font-weight:700;background:none;border:none;border-bottom:1px dashed currentColor;color:inherit;cursor:pointer;padding:2px 4px}
.race-calendar-jump{display:flex;gap:8px;justify-content:center;margin:0 0 10px}
.race-calendar-jump[hidden]{display:none}
/* 重賞検索タブ: 過去の年のレースをレース管理画面で開くリンク(管理者のみ。2026-10-08) */
.gr-edit-link{margin-left:auto;font-size:12px;white-space:nowrap}
/* 馬券購入画面: 選んだ日に開催される重賞(2026-10-08。buy.js の renderGradedDayList) */
.graded-day-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 12px}
.graded-day-list[hidden]{display:none}
.graded-day-title{font-size:13px;font-weight:700;margin-right:4px}
.graded-day-item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid currentColor;border-radius:999px;font-size:13px;text-decoration:none;color:inherit}
.graded-day-grade{font-weight:700;font-size:12px}
.graded-day-where{font-size:12px;opacity:.75}
/* 予想登録画面: 重賞の「過去のデータ」(データ検索「重賞検索」を別タブで開く) */
.graded-past-link{text-decoration:none;cursor:pointer}
/* 予想登録画面: 「重賞メモ」ボタン(2026-10-12)。メモがある重賞は馬メモと同じ強調 */
.graded-memo-btn{font-family:inherit;background:#fff;color:var(--ink-soft);cursor:pointer}
.graded-memo-btn.has-memo{border-color:var(--hanko);color:var(--hanko)}
.graded-memo-btn.has-memo::after{content:"●";font-size:8px;margin-left:3px}
/* 重賞メモの入力欄(graded-race-notes.js。予想登録画面のダイアログ・重賞検索タブで共用) */
.grn-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:6px}
.grn-text{width:100%;box-sizing:border-box;font-size:16px}
.grn-others-title{font-size:13px;font-weight:700;margin:14px 0 6px}
.grn-other{border-top:1px solid var(--rule-strong);padding:8px 0}
.grn-other-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grn-other-year{font-weight:700}
.grn-other-text{white-space:pre-wrap;word-break:break-word;margin-top:4px;font-size:14px}
.grn-edit-btn{padding:4px 12px;font-size:12px}
.gr-notes-card{background:var(--paper-raised);border:1px solid var(--rule-strong);padding:12px 14px;margin-bottom:12px}

/* 管理画面: D1の使用量(2026-10-08) */
.d1-meter{margin:6px 0 10px}
.d1-meter-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.d1-meter-bar{height:10px;border-radius:5px;background:rgba(127,127,127,.2);overflow:hidden}
.d1-meter-bar span{display:block;height:100%;background:#3a8a5c}
.d1-warn .d1-meter-bar span{background:#d39b1f}
.d1-danger .d1-meter-bar span{background:#c0392b}
.d1-danger .d1-meter-head b{color:#c0392b}
.d1-top-queries{margin-top:8px}
/* 重い機能の自動一時停止で止められたときのお知らせ(auth.js の showServiceGuardNotice) */
.service-guard-notice{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 14px;border-radius:8px;background:rgba(40,40,40,.92);color:#fff;font-size:13px;z-index:9999;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.d1-query-text{font-family:var(--font-mono);font-size:11px;word-break:break-all;min-width:240px}

/* レース管理画面: netkeibaのページの受け取り(2026-10-08。races-netkeiba-import.js) */
.nk-receive-panel{margin:0 16px 12px;padding:10px 12px;border:1px dashed currentColor;border-radius:8px}
.nk-receive-panel textarea{width:100%;box-sizing:border-box;margin:6px 0}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(34px,1fr));
  gap:4px;
}
.calendar-weekday{
  text-align:center;
  font-size:.78rem;
  color:#777;
  padding:4px 0;
}
.calendar-day{
  min-height:42px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  position:relative;
  font-weight:600;
}
.calendar-day:hover{background:rgba(0,0,0,.04)}
.calendar-day.selected{box-shadow:0 0 0 2px var(--hanko,#222) inset}
.calendar-day.has-race{font-weight:800}
.calendar-day.has-race i{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  left:50%;bottom:5px;transform:translateX(-50%);
  background:currentColor;
}
.calendar-day.empty{border:0;background:transparent;cursor:default}

.history-filter-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
}
.history-filter-label{
  display:block;
  flex:1;
  min-width:0;
  margin:0;
  font-size:.82rem;
  color:#777;
}
/* 「◯◯の履歴を表示中」の右に置く小さめの選択削除トグル */
.history-select-btn{
  flex:0 0 auto;
  padding:4px 10px;
  font-size:.78rem;
}
.history-select-btn.active{
  background:var(--hanko);
  color:#fff;
  border-color:var(--hanko);
}
.calendar-day.money-cell{
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.calendar-day-money{
  font-size:.6rem;
  font-weight:800;
  font-family:var(--font-mono);
  white-space:nowrap;
}
.calendar-day.has-race{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.calendar-day-count{
  font-size:.62rem;
  font-weight:700;
  color:#777;
  font-family:var(--font-mono);
}

/* 2026-08-17: PC(700px超)は以前「R番号(48px)・レース名(1fr)・コース情報等(auto)」の
   3カラム横並びだったが、コース情報側の幅に押されてレース名がほぼ潰れる不具合があった。
   モバイルと同じ「1行目: R番号+レース名 / 2行目: コース情報・頭数・メモマーク」の
   2行構成に統一する(docs/DESIGN.md「レース選択グリッド」参照)。 */
.race-column-row{
  grid-template-columns:44px minmax(0,1fr);
  position:relative;
}
.race-column-row small{
  grid-column:2;
  font-size:.7rem;
  color:#777;
  white-space:nowrap;
}
.race-column-row.has-entries{background:rgba(0,0,0,.012)}

/* ---------- 2026-08-10: 購入済みレースの表示をテキストバッジ→背景色に変更 ----------
   実機確認で「購入済み」テキストバッジ(.purchased-badge)が視認しづらいとの
   フィードバックを受けての対応。buy.js側もテキストバッジの生成をやめ、該当行に
   .purchased クラスを付与するだけに変更した。ここでは win(緑)系の薄いアクセント色で
   行全体の背景を塗り、一覧をざっと見ただけで購入済みかどうか分かるようにする。
   hover時は既存の .race-column-row:hover(グレー塗り)より視認性を保てるよう、
   同系色でわずかに濃くする。has-entries/empty-race等の既存クラスとは併用される
   前提のため、背景色以外のプロパティは指定しない。 */
.race-column-row.purchased {
  background: rgba(47, 122, 61, 0.14);
}
.race-column-row.purchased:hover {
  background: rgba(47, 122, 61, 0.22);
}

.bet-horse-table-head{
  grid-template-columns:40px 48px minmax(140px,1fr) minmax(100px,.8fr) 44px minmax(220px,1fr);
}
.bet-horse-row{
  grid-template-columns:40px 48px minmax(140px,1fr) minmax(100px,.8fr) 44px minmax(220px,1fr);
}
.bet-horse-mark{
  font-weight:800;
  text-align:center;
  font-size:1.1rem;
}
.bet-horse-row.has-prediction-mark{
  background:rgba(0,0,0,.025);
}
.option-heading{font-weight:700}
.horse-memo-label{display:block;margin-top:10px}
.horse-note-status.success{color:#2c6e49}
.horse-note-status.error{color:#a33}
@media(max-width:700px){
  .race-calendar{padding:10px}
  .calendar-day{min-height:38px}
  .bet-horse-table-head{display:none}
  .bet-horse-row{
    grid-template-columns:30px 38px minmax(100px,1fr) 44px;
  }
  .bet-horse-jockey{display:none}
  .bet-horse-mark{grid-column:4;grid-row:1}
  .bet-horse-control{grid-column:1/-1;padding-left:68px}
}


/* ---------- 馬券購入操作: コンパクト化 ---------- */
.bet-type-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.bet-type-tabs .choice-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 7px 12px;
  font-size: 13px;
}
.bet-horse-row {
  padding: 5px 10px;
}
.bet-horse-control {
  gap: 8px;
}
.bet-horse-control .check-inline,
.bet-horse-control .control-label {
  min-width: 28px;
  justify-content: center;
}
.bet-horse-control input[type="checkbox"],
.bet-horse-control input[type="radio"] {
  margin: 0;
}
.prediction-mark-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.prediction-mark-select {
  width: 76px;
  height: 32px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
}
.horse-note-toggle {
  cursor: pointer;
}
.horse-note-editor {
  padding: 8px 12px 10px;
}
.horse-note-status {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}
.horse-note-status.success { color: var(--win); }
.horse-note-status.error { color: var(--hanko); }

/* 予想登録画面: 馬の展開パネル内に出す「過去成績(出走履歴)」。race_results 由来の
   データを新しい順に全件表示する(2026-09-10)。列が多いので横スクロールで見せる。 */
.horse-history { margin: 0; }
.horse-note-editor { padding: 4px 8px 6px; }
.horse-history-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.horse-history-table { border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.horse-history-table th,
.horse-history-table td { padding: 3px 6px; border: 1px solid rgba(0, 0, 0, .12); text-align: center; }
.horse-history-table th { background: rgba(0, 0, 0, .05); font-weight: 600; color: #666; }
.horse-history-table .hh-place { font-weight: 700; }


/* ---------- 全画面共通 UI 調整 ---------- */

/* 共通ナビゲーションは全ページ同じ順序 */
.masthead-nav { display:flex; align-items:center; gap:6px; }

/* 枠番カラーを購入画面でも表示 */
.mini-waku.waku-1 { background:var(--waku-1); color:var(--waku-1-ink); }
.mini-waku.waku-2 { background:var(--waku-2); color:var(--waku-2-ink); }
.mini-waku.waku-3 { background:var(--waku-3); color:var(--waku-3-ink); }
.mini-waku.waku-4 { background:var(--waku-4); color:var(--waku-4-ink); }
.mini-waku.waku-5 { background:var(--waku-5); color:var(--waku-5-ink); }
.mini-waku.waku-6 { background:var(--waku-6); color:var(--waku-6-ink); }
.mini-waku.waku-7 { background:var(--waku-7); color:var(--waku-7-ink); }
.mini-waku.waku-8 { background:var(--waku-8); color:var(--waku-8-ink); }

/* STEP3は1頭1行をコンパクトに */
.bet-horse-table-head,
.bet-horse-row {
  grid-template-columns: 30px 38px minmax(130px,1fr) minmax(80px,.7fr) 42px minmax(70px,.45fr);
}
.bet-horse-row { padding: 5px 8px; min-height: 34px; }
.bet-horse-control { gap: 6px; }
.bet-horse-control .control-label,
.bet-horse-control .check-inline,
.bet-horse-control .radio-inline { min-width: 24px; justify-content:center; }

/* 通常・BOX・流し・フォーメーションの冗長な説明ラベルを非表示 */
.bet-horse-table-head > span:last-child { font-size:0; }
.bet-horse-table-head > span:last-child::after { content:""; }
.control-label { font-size:0; }
.control-label input { font-size:initial; }

/* クラスタJ-4: 馬メモ登録済みの馬行を、購入済みレースと同じwin系の薄い緑で表示。 */
.horse-note-card.has-horse-memo {
  background: rgba(47, 122, 61, 0.14);
}
.horse-note-card.has-horse-memo:hover {
  background: rgba(47, 122, 61, 0.22);
}

/* 予想画面:既存メモを馬名横に表示 */
.horse-note-preview {
  display:block;
  color:var(--ink-soft);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;
}

/* 予想画面: メモの有無を、アコーディオン(この馬のメモ欄)を開かなくても一目で
   分かるようにするバッジ。hankoの赤アクセントを使い、他の状態バッジ
   (.import-source-badge等)と同程度の視認性を持たせる。 */
.horse-note-badge {
  display:inline-block;
  flex:0 0 auto;
  font-size:10px;
  font-weight:700;
  line-height:1.6;
  color:var(--hanko);
  border:1px solid var(--hanko);
  border-radius:999px;
  padding:0 6px;
  white-space:nowrap;
}

/* 単勝・複勝は複数選択のチェックボックス */
.single-check { transform:scale(1.05); }

/* 式別タブはコンパクトに */
.bet-type-tabs .choice-button {
  min-height:36px;
  padding:5px 10px;
}

/* パネル見出しの余白を縮小 */
.purchase-panel h3 { margin-bottom:10px; font-size:18px; }
.method-options { margin-top:8px; gap:8px; }
.inline-options, .toggle-option { padding:7px 10px; gap:10px; }

/* 2頭軸の着順バリエーション */
.axis-placement-options { margin-top:8px; }

/* モバイル */
@media(max-width:700px){
  .masthead-nav { overflow-x:auto; white-space:nowrap; max-width:100%; }
  .bet-horse-table-head { display:none; }
  /* 操作列(最後の列)は固定幅ではなく中身の幅(auto)にし、折り返さず縮まない
     (2026-09-26。固定38pxだと、三連複/三連単の通常・フォーメーション(操作が3つ)が
     縦に折り返し、2頭軸は互いに重なった。iPhone SE3は、横にはみ出す要素があると
     Safariが表示を縮小して実効幅が430pxを超え、下の430px以下のルールが効かず
     このルールが使われるため、ここで壊れないようにしておく必要がある)。 */
  .bet-horse-row {
    grid-template-columns:28px 34px minmax(0,1fr) 38px auto;
    gap:5px;
    padding:4px 6px;
  }
  .bet-horse-jockey { display:none; }
  /* 印列は grid-column/grid-row とも auto にリセットする(旧ルールの残骸で
     馬番・馬名が1列ずつズレる事故を防ぐため)。 */
  .bet-horse-mark { grid-column:auto; grid-row:auto; }
  .bet-horse-control { grid-column:auto; padding-left:0; flex-wrap:nowrap; justify-content:flex-end; }
  .bet-horse-control .check-inline,
  .bet-horse-control .control-label,
  .bet-horse-control .radio-inline { flex:0 0 auto; }
  /* 2頭軸(軸1/軸2/相手)の行も同様に操作列を中身の幅にする(各項目の最小幅は
     基本ルールより後ろにある下の max-width:700px ブロックで指定)。 */
  .bet-horse-row.axis2-row { grid-template-columns:22px 26px minmax(0,1fr) 22px auto; }
  .horse-note-preview { max-width:150px; }
  /* CSVインポートはPC利用のみを想定し、スマホ幅では非表示(機能・APIは維持) */
  #csv-import-btn { display:none; }
}

/* iPhone SE3等の小型端末(430px以下)向け追加対応。
   700px以下のルールに重ねて適用し、430px超(PC含む)のレイアウトは変更しない。
   組み合わせ選択表(単勝〜三連単・2頭軸まで共通)のチェックボックスが
   縦に並んでしまう・馬名が折り返る、といった崩れをさらに詰めて解消する */
@media(max-width:430px){
  .bet-horse-row {
    grid-template-columns:18px 22px minmax(60px,1fr) 18px auto;
    gap:4px;
    padding:4px 4px;
  }
  .bet-horse-name {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .bet-horse-mark {
    font-size:.8rem;
    padding:0;
  }
  .bet-horse-control {
    flex-wrap:nowrap;
    gap:3px;
    justify-content:flex-end;
  }
  .bet-horse-control .check-inline,
  .bet-horse-control .control-label,
  .bet-horse-control .radio-inline {
    min-width:18px;
  }
  .mini-waku {
    width:15px;
    height:15px;
    font-size:7px;
  }
  /* 購入履歴カレンダー: 実数表示化に伴い、桁数増加分を縮小して収める */
  .calendar-day-money {
    font-size:.52rem;
  }
  /* クラスタJ-3 / 2026-09-08: 予想登録画面の馬行は4列(馬番・馬名・予想印・メモ展開)。
     馬名列は下段に性齢/負担重量/騎手を折り返さず表示。予想印を暗黙列へ押し出さず、
     小型画面でも印セレクトが画面右端から見切れないようにする。 */
  .horse-note-toggle {
    grid-template-columns:26px minmax(0,1fr) auto;
    gap:5px;
    padding:6px 8px;
  }
  .prediction-horse-number.waku-tint {
    width:24px;
    height:24px;
    font-size:11px;
  }
  .prediction-horse-name strong {
    font-size:13px;
  }
  .prediction-mark-inline {
    margin-left:0;
    min-width:0;
    justify-content:flex-end;
  }
  .prediction-mark-select {
    width:64px;
    min-width:0;
    padding-left:2px;
    padding-right:2px;
  }

  /* iPhone SE3(幅375px)でも「日付・競馬場・レース番号・購入ボタン」が
     ヘッダー1行目に収まるよう、幅・余白・フォントを詰める。
     レース名・頭数・条件バッジ(牝/H)は2行目(.prediction-race-meta)。 */
  .prediction-race-header { padding:10px 10px; }
  /* ボタン文言(投票/確定済/購入不可)の長さで折り返さないよう1行固定にし、
     はみ出す場合はセレクト側を縮める(2026-10-01) */
  .prediction-race-title { gap:4px; flex-wrap:nowrap; }
  .prediction-race-title .prediction-select { flex:0 1 auto; }
  .prediction-race-title .stamp-btn { flex:none; }
  .prediction-select {
    font-size:12px;
    padding:4px 3px;
  }
  #prediction-date-select { font-size:11px; min-width:0; }
  #prediction-track-select { min-width:0; }
  #prediction-racenum-select { min-width:0; }
  .prediction-race-title .stamp-btn {
    padding:5px 9px;
    font-size:11px;
    letter-spacing:0;
  }
  .prediction-race-meta { gap:6px; }
  .prediction-race-meta .race-name { font-size:12px; }
}

/* レース一覧の圧縮 + 購入ショートカット */
.race-list-card{min-height:38px;padding:5px 10px;gap:8px}
.race-list-card .card-actions{margin-left:auto;display:flex;align-items:center;gap:5px}
.compact-buy-btn{padding:4px 9px;font-size:.78rem;white-space:nowrap;text-decoration:none}
.race-list-card .r-num{min-width:34px}.race-list-card .meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.race-list-card{padding:4px 7px;gap:5px}.race-list-card .entries-badge,.race-list-card .settled-badge{font-size:.68rem}.compact-buy-btn{padding:3px 6px}}

/* 購入方式ボタンのコンパクト化 */
#method-buttons{display:flex;flex-wrap:wrap;gap:6px}
#method-buttons .choice-button{min-height:36px;padding:5px 10px;font-size:13px}

/* 2頭軸(JRA/netkeiba風)は1リストに「軸」「相手」チェックを並べる形式。
   最後の見出し列は通常フォントサイズ0(操作列に文字を出さないため)だが、
   このモードだけ2つの子ラベルとして復活させる。 */
.bet-horse-table-head > span:last-child .axis2-head-cols { font-size: .8rem; }
.axis2-head-cols { display:flex; gap:6px; }
.axis2-head-cols span { min-width:24px; text-align:center; }

/* 2頭軸(軸/相手チェック)の行専用レイアウト(2026-09-21)。
   `.bet-horse-row`/`.bet-horse-control`は全購入方式(通常・BOX・フォーメーション等)
   で共有しており、ブレークポイントごとに幾重にも上書きされてきた経緯があるため
   (このファイル内の同名セレクタの重複・上書きコメント参照)、この券種専用の
   見た目は汎用ルールに乗せず`.axis2-row`で独立させ、崩れを避ける。
   また表ヘッダー(`.bet-horse-table-head`)はモバイルで非表示になり見出しが消えるため、
   行ごとに小さなラベルを常設してチェック/ラジオの意味を示す
   (実機iPhone SE3で、見出し無しのチェックが縦に折り返って見える report があった)。

   三連単2頭軸は「1着軸」「2着軸」「相手」の3列(`.axis2-row-3col`。netkeiba/JRA実物の
   スクリーンショットで指摘を受け、2026-09-21に「軸(最大2頭)/相手」の2列設計から
   修正。軸馬をどちらの着順に置くかで舟券が変わるため2列では表現できなかった。
   三連複2頭軸は着順の概念が無いため`.axis2-row`のみ(2列)のまま)。 */
.bet-horse-row.axis2-row .bet-horse-control {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.bet-horse-row.axis2-row .check-inline {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.axis2-check-tag {
  font-size: 9px;
  line-height: 1;
  color: #888;
  white-space: nowrap;
}
/* PC幅では表ヘッダーの見出しが見えているため、行ごとのラベルは二重表示になり
   冗長なので隠す。 */
@media(min-width:701px) {
  .axis2-check-tag { display:none; }
}
/* 2頭軸の操作列は中身の幅(auto)、各項目は縮ませず最小幅を持たせる。430px超〜700pxでも
   (iPhone SE3で実効幅が430pxを超えることがあるため)適用する。基本ルール(上)より後ろに
   置いて同じ詳細度で上書きする。 */
@media(max-width:700px) {
  .bet-horse-row.axis2-row .bet-horse-control { gap: 6px; }
  .bet-horse-row.axis2-row .check-inline { flex: 0 0 auto; min-width: 30px; }
}
@media(max-width:430px) {
  .bet-horse-row.axis2-row {
    grid-template-columns: 16px 20px minmax(0,1fr) 16px auto;
  }
  /* 3列(1着軸/2着軸/相手)は2列よりcontrol列の幅を広めに確保する。
     馬名列はminmax(50px,1fr)で残り幅を吸収し、はみ出た分は
     .bet-horse-name の text-overflow:ellipsis(既存ルール)で省略する。 */
  .bet-horse-row.axis2-row-3col {
    grid-template-columns: 14px 18px minmax(0,1fr) 14px auto;
    gap: 3px;
  }
  /* 操作列は固定幅ではなく中身の幅(auto)にし、各項目は縮ませず最小幅を持たせる
     (2026-09-26。固定140px+min-width:0だと、実機iPhone SE3で3つのラジオ/チェックと
     「1着軸/2着軸/相手」の小ラベルが互いに重なった)。はみ出す分は馬名列が省略で吸収する。 */
  .bet-horse-row.axis2-row-3col .bet-horse-control {
    gap: 6px;
  }
  .bet-horse-row.axis2-row-3col .check-inline {
    flex: 0 0 auto;
    min-width: 30px;
  }
  .bet-horse-row.axis2-row-3col .axis2-check-tag {
    font-size: 8px;
  }
}

.import-source-badge{display:inline-block;padding:2px 6px;border-radius:4px;background:#eee;font-size:.72rem;color:#666}
.import-raw-selection{font-size:.78rem;color:#666}

.import-preview-list{max-height:320px;overflow:auto;margin:12px 0;border:1px solid #ddd;border-radius:8px}.import-preview-row{padding:8px 10px;border-bottom:1px solid #eee;font-size:.9em}.import-preview-row:last-child{border-bottom:0}.import-preview-row span{float:right;opacity:.75}

/* ---------- モバイル用ヘッダー(masthead)の高さ削減 ----------
   実機のアプリ内ブラウザで、ページによってブラウザのURLバーの表示/非表示が
   変わり、見かけの高さがばらつくという報告への対応。根本原因(ブラウザの
   ネイティブなアドレスバー表示/非表示の挙動)そのものはCSS/JSから制御できないため、
   ヘッダー自体の高さを削ってページ間の高さのばらつきを抑える緩和策(完全な
   解消を保証するものではない)。

   仕様:
     1. モバイルでは「馬券帳」のタイトル表記を完全に非表示にする(PCでは維持)
     2. モバイルでは、ナビ・ユーザー名・退場ボタン等をすべて1つの行にまとめる
     3. 1行が画面幅に収まりきらない場合は、行全体を横スクロールにする
        (ナビだけでなくユーザー名・退場ボタンも画面外に隠れることを許容する)

   実装方針: HTML(6画面共通のマークアップ)は変更せず、CSSのみで対応する。
   .masthead-inner(タイトル+ナビの入れ物)を display:contents にすることで、
   その子要素であるタイトル・ナビを .masthead 直下の実質的な子要素として扱い、
   .masthead-actions(ユーザー名+退場ボタン)と同じ1行に横並びさせる。
   .masthead 自体に overflow-x:auto を指定し、行全体が画面幅に収まらない場合は
   横スクロールになるようにする(要件3)。タイトルは display:none で非表示に
   する(要件1)。ナビ自身が個別に持っていた横スクロール(700px以下の
   .masthead-nav{overflow-x:auto;...})は、二重スクロール領域になって
   操作感が悪くなるのを避けるため、この幅では明示的に無効化し、
   親(.masthead)側のスクロールに一本化している。

   display:contents はiOS Safari 12.1以降で利用可能。 */
@media (max-width: 600px) {
  .masthead {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
    gap: 14px;
  }

  /* タイトル・ナビを.masthead直下の実質的な子要素として扱う(要件2の土台)。 */
  .masthead-inner {
    display: contents;
  }

  /* 要件1: モバイルでは「馬券帳」表記は不要。 */
  .masthead-title {
    display: none;
  }

  /* 要件2・3: ナビ自体は内容に応じた幅(縮まない)にし、個別の横スクロールは
     無効化する。折り返し(2行化)も起きないよう明示的にnowrapにしておく。 */
  .masthead-nav {
    flex: 0 0 auto;
    width: auto;
    overflow-x: visible;
    max-width: none;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .masthead-nav .nav-link {
    white-space: nowrap;
  }

  /* ユーザー名・退場ボタンも縮まない幅にする(横スクロールで隠れることは許容)。 */
  .masthead-actions {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ---------- 2026-08-16: 購入画面レース選択グリッドの改修 ----------
   ・モバイルでは競馬場をタブ切り替え式にする(#race-track-tabs)
   ・各レース行にコース情報(例: ダ1800m)を追加表示
   ・PCでは最低3競馬場が横スクロール無しで見えるよう、カラム最小幅を縮小
   ・出走馬に自分のメモ登録済みの馬が1頭でもいれば「▼」マークを表示
   いずれも public/buy.js の renderGrid() から出力されるDOMに対応する。
   races.html側のレース管理画面(.race-columns/.race-track-column)は
   同じCSSクラスを共有しているため、影響が及ばないよう #race-grid 配下に
   スコープしたセレクタのみを追加する。 */

/* モバイル用競馬場タブ。PCでは常に非表示(下記700px以下のmediaで表示に切り替える)。 */
.race-track-tabs {
  display: none;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.race-track-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.race-track-tab.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* 予想登録画面: 印セレクトの左の「メモ」ボタン(馬メモのダイアログを開く)。
   メモ登録済みの馬は色と「●」で強調する(2026-09-25。以前は行末の「▼」マーク)。 */
.horse-memo-btn {
  height: 32px;
  padding: 0 8px;
  margin-right: 4px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.horse-memo-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.horse-memo-btn.has-memo { border-color: var(--hanko); color: var(--hanko); font-weight: 700; }
.horse-memo-btn.has-memo::after { content: "●"; font-size: 8px; margin-left: 3px; }
.horse-history-empty { font-size: 12px; color: var(--ink-soft); margin: 0; }
/* 馬メモダイアログのtextarea。iOS Safariは16px未満の入力欄にフォーカスすると
   画面を自動拡大するため(グローバルのtextareaは14px)、16pxにして拡大を防ぐ。 */
#horse-memo-text { font-size: 16px; }

/* メモ登録済みの馬が出走している場合の「▼」マーク(購入画面のレース一覧で使用)。 */
.memo-mark {
  display: inline-block;
  margin-left: 4px;
  color: var(--hanko);
  font-size: 10px;
}

/* 勝負レース(自分の個人設定)の★/☆トグル。購入画面のレース一覧の行の右端に重ねる
   (2026-09-25。以前は勝負レースのレース名の後ろに表示のみの「★」を出していた)。 */
.race-row-wrap { position: relative; }
.race-row-wrap .race-column-row { padding-right: 44px; }
.key-race-mini {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #bbb;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.key-race-mini:hover { background: rgba(0, 0, 0, .06); }
.key-race-mini.active { color: var(--hanko); }
.key-race-mini:disabled { opacity: .5; cursor: default; }

/* PCで最低3競馬場が見切れずに収まるよう、購入画面のカラム最小幅を縮小する
   (buy.htmlの#race-gridにのみ適用し、races.htmlのレース管理画面のカラム幅には
   影響させない)。3カラム(200px×3+gap16px×2=632px)は.buy-main(max-width:720px、
   内側パディング20px×2)の最小content幅(700px幅の画面でも約660px)に収まる。 */
#race-grid .race-track-column {
  min-width: 200px;
}

@media (max-width: 700px) {
  /* モバイルでは競馬場タブを表示し、選択中の競馬場カラムだけを表示する
     (残りの競馬場はDOM上には存在するが display:none で隠す)。 */
  .race-track-tabs {
    display: flex;
  }
  #race-grid .race-columns {
    display: block;
  }
  #race-grid .race-track-column {
    display: none;
    min-width: 0;
  }
  #race-grid .race-track-column.tab-active {
    display: block;
  }
}

/* ---------- 2026-08-20: カレンダーツールバー(前月・次月・今日ボタン)の
   モバイル縮小 ----------
   購入画面(index.html)・購入履歴画面(history.html)・レース管理画面(races.html)の
   カレンダーはいずれも共通クラス(.race-calendar-toolbar)を使っているため、
   ここでの対応は3画面すべてのカレンダーに一律で適用される(ユーザー承認済み)。
   700px以下では、‹・›・今日ボタン(.ghost-btn)のpadding/font-sizeを縮小し、
   見た目のサイズをおおよそ半分程度にする。他画面で使われる.ghost-btn全般
   (CSVインポートボタン・退場ボタン等)には影響しないよう、
   .race-calendar-toolbar配下のみにスコープしている。 */
@media (max-width: 700px) {
  .race-calendar-toolbar {
    gap: 6px;
  }
  .race-calendar-toolbar .ghost-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* 管理画面: 登録済み一覧(騎手名エイリアス・馬名エイリアス・重賞)の開閉(2026-10-02)。
   初期状態は閉じる。見出しに件数(admin.js の setCollapsibleCount())。 */
.admin-collapsible { margin-top: 12px; }
.admin-collapsible > summary {
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: 13px;
  font-weight: 700;
  user-select: none;
}
.admin-collapsible[open] > summary { border-bottom-style: dashed; }
.admin-collapsible-count { font-family: var(--font-mono); font-weight: 500; color: var(--ink-soft); }
.admin-collapsible > .table-wrap { margin-top: 0; }

/* データ検索「騎手検索」タブ(2026-10-03)。年度・コース名の列は左寄せ・折り返さない */
.js-stats-table td, .js-stats-table th { white-space: nowrap; text-align: right; }
.js-stats-table .js-label-cell { text-align: left; }

/* ---------- 予想登録画面: 出馬表/馬柱タブと馬柱表示(近5走)。2026-10-03追加 ----------
   馬柱は左端の列(馬番・印・馬名・騎手)を position: sticky で固定し、5走ぶんを横スクロール。
   1〜3着のセルは薄く色付けする(netkeiba の馬柱と同じ考え方)。 */
.prediction-view-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
  border-bottom: 2px solid var(--rule-strong);
}
.prediction-view-tab {
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-bottom: none;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  position: relative;
  top: 2px;
}
.prediction-view-tab.active { background: var(--paper-raised); color: var(--ink); font-weight: 700; top: 0; padding-top: 9px; }

.prediction-umabashira { padding: 8px 0; }
.prediction-view-tab[hidden] { display: none; }
/* 結果タブ(2026-10-14) */
.prediction-result { padding: 8px 0; }
.prediction-result[hidden] { display: none; }
.result-table td, .result-table th { white-space: nowrap; }
.result-table .result-place { font-weight: 700; text-align: center; }
.result-table .result-horse { font-weight: 700; }
.result-table .result-mark { color: var(--hanko); font-weight: 700; text-align: center; }
.result-table tr.result-top-1 .result-place { color: var(--hanko); }
.result-heading { font-size: 15px; margin: 16px 0 8px; }
.result-payout-table { border-collapse: collapse; width: 100%; max-width: 480px; }
.result-payout-table th, .result-payout-table td { border-top: 1px solid var(--rule-strong); padding: 6px 8px; vertical-align: top; }
.result-payout-table th { width: 5em; text-align: left; white-space: nowrap; }
.result-payout-item { display: flex; justify-content: space-between; gap: 12px; font-family: "Roboto Mono", monospace; }
/* 展開・時計タブ(2026-10-12) */
.prediction-pace { padding: 8px 0; }
.prediction-pace[hidden] { display: none; }
.pace-heading { font-size: 15px; margin: 14px 0 8px; }
.pace-heading small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.pace-style-list { display: flex; flex-direction: column; gap: 6px; }
.pace-style-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule-strong); }
.pace-style-label { flex: none; width: 52px; font-weight: 700; }
.pace-style-label small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.pace-style-0 { color: var(--hanko); }
.pace-style-horses { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pace-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper-raised); font-size: 13px; }
.pace-chip .prediction-horse-number { flex: none; }
.pace-chip-sub { font-size: 11px; color: var(--ink-soft); font-family: var(--font-mono); }
.pace-none { color: var(--ink-soft); font-size: 13px; }
.pace-time-table { font-size: 13px; }
.pace-time-table td.pace-time-horse { text-align: left; }
.pace-time-horse .prediction-horse-number { margin-right: 4px; }
.pace-time-none { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.pace-time-none > span:first-child { font-weight: 700; color: var(--ink-soft); }
/* 推奨馬の3項目は縦に並べる(2026-10-12。横並びだとPCで見切れ・馬名が詰まった) */
.pace-reco { display: flex; flex-direction: column; gap: 10px; }
.pace-reco-block { background: var(--paper-raised); border: 1px solid var(--rule-strong); padding: 10px 12px; min-width: 0; }
.pace-reco-block h4 { margin: 0; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pace-reco-pace { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.pace-reco-high { color: var(--hanko); }
.pace-reco-slow { color: #2c5e8f; }
.pace-reco-middle { color: var(--ink-soft); }
.pace-reco-note { font-size: 11px; color: var(--ink-soft); margin: 4px 0 6px; }
.pace-top-list { list-style: none; margin: 0; padding: 0; }
.pace-top-list li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px dotted var(--rule-strong); font-size: 13px; }
.pace-top-list li:first-child { border-top: none; }
.pace-top-rank { flex: none; width: 1.6em; font-weight: 700; text-align: right; }
.pace-top-list .prediction-horse-number { flex: none; }
.pace-top-list .pace-horse-name { min-width: 0; overflow-wrap: anywhere; }
.pace-top-jockey { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.pace-top-value { margin-left: auto; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; }
.pace-top-value small { color: var(--ink-soft); margin-left: 2px; }
.pace-sort-btn { font: inherit; font-weight: 700; background: none; border: none; padding: 0; color: inherit; cursor: pointer; text-decoration: underline dotted; }
.pace-sort-btn.active { color: var(--hanko); text-decoration: none; }
.ub-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ub-table { border-collapse: separate; border-spacing: 0; font-size: 11px; background: #fff; }
.ub-table th, .ub-table td {
  border-right: 1px solid rgba(0, 0, 0, .12);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  vertical-align: top;
  text-align: left;
}
.ub-table thead th {
  background: #f1efe8;
  font-weight: 600;
  color: #666;
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
}
.ub-table .ub-horse {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fbfaf6;
  min-width: 112px;
  max-width: 132px;
  padding: 5px 6px;
  border-right: 2px solid var(--rule-strong);
}
.ub-table thead .ub-horse { z-index: 2; background: #f1efe8; }
.ub-horse-top { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.ub-horse-top .prediction-horse-number { flex: none; }
.ub-mark-select { min-width: 52px; padding: 2px 4px; font-size: 13px; }
.ub-horse-name { display: block; font-size: 12px; line-height: 1.3; word-break: break-all; }
.ub-horse-meta { display: block; color: var(--ink-soft); font-size: 10px; line-height: 1.3; }
.ub-run { min-width: 128px; max-width: 150px; padding: 4px 6px; line-height: 1.35; }
.ub-run-empty { background: repeating-linear-gradient(135deg, #fff, #fff 6px, #f6f5f0 6px, #f6f5f0 12px); }
.ub-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-run-head { color: var(--ink-soft); }
.ub-race-name { font-weight: 600; }
.ub-place { font-size: 15px; font-weight: 800; line-height: 1.2; margin: 1px 0; }
.ub-rival { color: var(--ink-soft); }
.ub-run.ub-place-1 { background: #fdf0ef; }
.ub-run.ub-place-1 .ub-place { color: #b5231c; }
.ub-run.ub-place-2 { background: #eef3fb; }
.ub-run.ub-place-2 .ub-place { color: #2b5aa8; }
.ub-run.ub-place-3 { background: #eef7ef; }
.ub-run.ub-place-3 .ub-place { color: var(--win); }
@media (max-width: 430px) {
  .ub-table .ub-horse { min-width: 100px; max-width: 112px; }
  .ub-run { min-width: 118px; }
}
/* タブで隠す側に hidden を付けても、.prediction-horses の display:flex が hidden 属性の
   display:none を上書きして出馬表が消えず、馬柱がその下に出ていた(2026-10-03)。明示的に打ち消す。 */
.prediction-horses[hidden],
.prediction-umabashira[hidden] { display: none; }

/* 馬柱表示の「持ちタイム」列(馬名と前走の間。同芝ダ・同距離の最速タイム/上がり。2026-10-03) */
.ub-table .ub-best-head small { font-weight: 500; }
.ub-best { min-width: 84px; padding: 4px 6px; line-height: 1.3; background: #fbfaf6; }
.ub-best-label { font-size: 9.5px; color: var(--ink-soft); }
.ub-best-value { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.ub-best-sub { font-size: 10px; color: var(--ink-soft); margin-bottom: 3px; }
.ub-best-muted { color: var(--ink-soft); font-size: 10.5px; text-align: center; vertical-align: middle !important; }
/* 持ちタイム列の「同場」「全場」2段(2026-10-03) */
.ub-best { min-width: 96px; }
.ub-best-block + .ub-best-block { border-top: 1px dashed rgba(0, 0, 0, .15); margin-top: 3px; padding-top: 3px; }
.ub-best-l3f { font-size: 11px; font-weight: 600; margin-left: 4px; color: var(--ink-soft); }
.ub-best-none { font-size: 10.5px; color: var(--ink-soft); }
/* 馬柱の馬の列の父・母(2026-10-03) */
.ub-horse-ped { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 10px; line-height: 1.3; }
.ub-horse-ped span { display: block; word-break: break-all; }

/* レース管理: netkeiba馬柱テキストの貼り付け取り込みの確認画面(2026-10-06) */
.umabashira-preview { margin-top: 10px; }
.ub-preview-table { font-size: 12px; }
.ub-preview-table td { vertical-align: top; }
.ub-preview-table tr.ub-status-conflict td { background: #fff6e5; }
.ub-preview-table tr.ub-status-new td:last-child,
.ub-preview-table tr.ub-status-fill td:last-child { color: var(--win); font-weight: 600; }
.ub-choice { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.ub-alias-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.ub-alias-form .ub-alias-input { width: 110px; padding: 3px 5px; font-size: 12px; }
.ub-alias-form .ub-alias-btn { padding: 3px 8px; font-size: 11px; }
.ub-unregistered { font-size: 10px; color: var(--hanko); }
.ub-preview-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* データ検索「競馬場傾向」タブ(2026-10-12) */
.tt-distance { display: inline-flex; margin: 8px 0; }
.tt-table th, .tt-table td { text-align: center; }
.tt-table .tt-cell { line-height: 1.25; min-width: 64px; }
.tt-avg { font-family: var(--font-mono); font-weight: 700; }
.tt-diff { font-family: var(--font-mono); font-size: 12px; }
.tt-diff.tt-fast { color: #2c5e8f; }
.tt-diff.tt-slow { color: var(--hanko); }
.tt-n { font-size: 11px; color: var(--ink-soft); }
.tt-few { opacity: .45; }
.tt-empty { color: var(--ink-soft); }
.tt-overall { background: rgba(0, 0, 0, .04); }

/* 予想登録画面: 総合推奨馬(2026-10-13) */
.pace-total-table td.pace-time-horse { min-width: 9em; }
.pace-total-top { background: rgba(176, 48, 40, .06); }
.pace-w-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; margin: 6px 0 8px; border: 1px dashed var(--rule-strong); }
.pace-w-admin-title { font-size: 12px; font-weight: 700; }
.pace-w-input { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.pace-w-input input { width: 4.2em; font-size: 16px; }
.pace-w-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.pace-w-btn { padding: 4px 12px; font-size: 12px; }
.pace-w-admin .pace-reco-note { width: 100%; margin: 0; }
.pace-w-cell { white-space: nowrap; }
.pace-w-cell .pace-w-input input { width: 3.6em; font-size: 14px; }
/* 取り込み直後の推奨馬の比率の計算の進み具合(2026-10-14。pace-runner.js) */
.pace-runner-status {
  position: fixed; right: 12px; bottom: 12px; z-index: 50;
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  padding: 8px 12px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
/* 展開・時計タブ: 総合推奨馬の軸・相手(2026-10-14) */
.pace-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.pace-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pace-pick-label { min-width: 4.2em; font-weight: 700; font-size: 13px; }
.pace-pick-axis { color: var(--hanko); }
.pace-total-mark { font-weight: 700; color: var(--hanko); text-align: center; }
/* 管理画面: タブ(2026-10-14)。スクロールしても上に残し、スマホでは横にスワイプ */
.admin-tabs {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper);
  overflow-x: auto; scrollbar-width: none;
  margin-bottom: 12px; padding-top: 6px;
}
.admin-tabs::-webkit-scrollbar { display: none; }
[data-admin-tab][hidden] { display: none; }
.admin-tabs .stats-tab { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) { .admin-tabs .stats-tab { padding: 8px 12px; } }
/* 管理画面: 重賞ごとの比率の一覧(1重賞1行の要約+タップで入力) */
.pace-w-list-title { font-size: 14px; margin: 16px 0 6px; }
.pace-w-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.pace-w-filter input[type="search"] { flex: 1 1 200px; font-size: 16px; }
.pace-w-item { border-bottom: 1px solid var(--rule); }
.pace-w-item > summary { cursor: pointer; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px; }
.pace-w-item-name { font-weight: 700; }
.pace-w-item-sub { font-size: 12px; color: var(--ink-soft); }
.pace-w-item-date { white-space: nowrap; margin-left: 4px; } /* 要約の行の最終更新日(2026-10-14) */
.pace-w-item-body { padding: 4px 4px 12px; }
.pace-w-item-body .pace-w-input input { width: 3.6em; font-size: 16px; }
/* 管理画面: 軸指数・相手指数の入力のかたまり(2026-10-14) */
.pace-w-kind { width: 100%; padding: 4px 0; }
.pace-w-kind + .pace-w-kind { border-top: 1px dashed var(--rule-strong); margin-top: 4px; }
/* 管理画面: 共通+ペース予想ごとの4段(2026-10-14) */
.pace-w-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; padding: 2px 0; }
.pace-w-line + .pace-w-line { border-top: 1px dotted var(--rule-strong); }
.pace-w-line-label { min-width: 3.2em; font-size: 12px; font-weight: 700; }
.pace-w-line-source { min-width: 2.5em; color: var(--ink-soft, inherit); }
.pace-w-line .ghost-btn { padding: 2px 10px; font-size: 12px; }

/* データ検索「重賞検索」: 総合推奨馬の検証(2026-10-13) */
.gr-picks-hits { font-weight: 700; color: var(--hanko); }
.gr-picks-table { font-size: 12px; }
.gr-picks-table td.gr-picks-horse { text-align: left; }
.gr-picks-hit { background: rgba(176, 48, 40, .08); font-weight: 700; }

/* ---------- ゲスト閲覧(2026-10-14。docs/design/guest.md) ---------- */
/* ゲストには「今週のレース」「データ検索」だけを出し、かご・退場・ユーザー名・重賞メモは隠す */
body.guest-mode .masthead-nav .nav-link:not([data-guest-ok]) { display: none; }
body.guest-mode #cart-badge-btn,
body.guest-mode #logout-btn,
body.guest-mode #current-username,
body.guest-mode .gr-notes-heading,
body.guest-mode #gr-notes { display: none; }
.guest-race-list { padding: 8px 12px 24px; }
.guest-race-list[hidden] { display: none; }
.guest-list-title { font-family: var(--font-display); font-size: 18px; margin: 8px 0 12px; }
.guest-day { margin-bottom: 18px; }
.guest-day-title { font-size: 16px; border-bottom: 2px solid var(--rule-strong); padding-bottom: 4px; margin: 0 0 8px; }
.guest-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.guest-track { background: var(--paper-raised); border: 1px solid var(--rule-strong); }
.guest-track-title { font-size: 14px; margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.guest-race-items { list-style: none; margin: 0; padding: 0; }
.guest-race-items li + li { border-top: 1px solid var(--rule); }
.guest-race-link { display: grid; grid-template-columns: 2.6em 1fr; gap: 0 8px; padding: 8px 10px; color: inherit; text-decoration: none; }
.guest-race-link:hover { background: rgba(28, 27, 24, 0.05); }
.guest-race-num { grid-row: span 2; font-weight: 700; font-family: var(--font-mono); }
.guest-race-name { font-weight: 700; }
.guest-race-sub { font-size: 12px; color: var(--ink-soft); }
/* 管理画面「ゲスト」タブ */
.guest-url { word-break: break-all; font-family: var(--font-mono); font-size: 13px; }
.guest-device-blocked td { color: var(--ink-soft); text-decoration: line-through; }