@charset "UTF-8";
/*
 * 今日うま 新UI版 race-ai（レース一覧・レース詳細・開催カレンダー）。kyouma-ui.css の上に読み込む。クラスは kr- で始める。
 * 表示内容・判定は既存 race-ai と同じ。見た目だけ共通ダークデザイン（緑アクセント #3fcf86・グレー枠）。
 * 枠番の色・着順の1〜3着・カレンダーの色分け（緑＝予測あり／AI＝今後・AI予想あり／黄の点線＝準備中）は既存の意味を保つ。
 */

/* ---------- 競馬場・開催日ピッカー ---------- */
.kr-select { padding: 14px; }
.kr-pickers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
.kr-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 60px;
  padding: 9px 12px;
  border: 1px solid #49525f;
  border-radius: 11px;
  background: #20262e;
  color: #fff;
  font-family: var(--kui-font);
  text-align: left;
}
.kr-picker-label { font-size: 13px; color: #a7b6c3; }
.kr-picker select {
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: 0 22px 0 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23cbd3dd' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 2px center;
  color: #fff;
  font: 700 17px var(--kui-font);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.kr-picker select option { background: #20262e; color: #fff; }
.kr-picker--date { cursor: pointer; padding-right: 40px; }
.kr-picker--date b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-picker-cal { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; }
.kr-picker:hover, .kr-picker:focus-within { border-color: var(--kui-accent); }
.kr-picker:disabled { opacity: .7; cursor: progress; }
.kr-day-cond { margin: 8px 0 0; color: var(--kui-muted); font-size: 13px; }
.kr-day-cond[hidden] { display: none; }

/* ---------- レース番号グリッド（発走時刻・発走後グレー） ---------- */
.kr-rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.kr-rgrid:empty { display: none; }
@media (min-width: 700px) { .kr-rgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 359px) { .kr-rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kr-rbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 58px;
  padding: 6px 4px;
  border: 1px solid #4c5761;
  border-radius: 9px;
  background: #222830;
  color: #f9fafb;
  text-decoration: none;
  font-family: var(--kui-font);
}
.kr-rbtn strong { font-size: 18px; line-height: 1.2; }
.kr-rbtn strong small { font-size: 12px; margin-left: 1px; }
.kr-rbtn span { font-size: 13px; color: #b5c1cf; font-variant-numeric: tabular-nums; }
.kr-rbtn:hover { border-color: var(--kui-accent); }
.kr-rbtn.is-past { background: #171c22; border-color: #303943; color: #7e8996; }
.kr-rbtn.is-past span { color: #7e8996; }
.kr-rbtn.is-current { border-color: var(--kui-accent); background: var(--kui-accent-tint); color: #fff; box-shadow: inset 0 -3px 0 var(--kui-accent); }
.kr-rbtn.is-cancelled strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.kr-rgrid--strip .kr-rbtn { min-height: 50px; }

/* ---------- 注記・読み込み中・エラー ---------- */
.kr-notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #303842; border-radius: 12px; background: var(--kui-paper); color: #d7dce5; font-size: 14px; line-height: 1.6; }
.kr-notice b { color: #fff; font-size: 16px; }
.kr-times, .kr-notes { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--kui-muted); font-size: 13px; }
.kr-time strong { font-weight: 600; color: #c9d1dd; }
.kr-notice-top { color: var(--kui-muted); font-size: 13px; }
.kr-notice.is-sample { border-color: #6b5a33; background: #221d12; color: var(--kui-warn); }
.kr-loading { margin: 0; padding: 22px 4px; color: var(--kui-muted); font-size: 15px; text-align: center; }
.kr-loading-slow { display: block; margin-top: 6px; font-size: 13px; opacity: 0; animation: kr-slow 0s linear 8s forwards; }
@keyframes kr-slow { to { opacity: 1; } }
html:not(.kui-js) .kr-loading { display: none; }
.kr-error { margin: 0 0 12px; padding: 14px; border: 1px solid #7a3f3a; border-radius: 12px; background: #2a1715; color: #f3c2bc; font-size: 15px; line-height: 1.7; }
.kr-error small { color: #e0a8a1; font-size: 13px; }
.kr-dev { word-break: break-all; }

/* ---------- バッジ ---------- */
.kr-mark { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 34px; height: 30px; padding: 0 4px; border: 1px solid #4a5563; border-radius: 7px; background: #303943; color: #f0f3f6; font-size: 15px; font-weight: 800; line-height: 1; }
.kr-mark small { font-size: 10px; font-weight: 600; margin-left: 1px; }
.kr-mark-none { visibility: hidden; }
/* AI指数1位（◎）の印・1位の馬のカード・本命欄・指数はテーマカラーに連動（No.012-011-B。TAKE 指示） */
.kr-rank.is-1, .kr-mark.mark-honmei { border-color: var(--kui-accent); background: var(--kui-accent-badge-bg); color: var(--kui-accent-badge-text); }
.kr-mark-lg { min-width: 42px; height: 38px; font-size: 18px; }
.kr-umaban { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 800; }
.waku-1 { background: #fff; color: #222; border-color: #b8c0cc; }
.waku-2 { background: #222; color: #fff; border-color: #6b7480; }
.waku-3 { background: #e53935; color: #fff; }
.waku-4 { background: #1e63d6; color: #fff; }
.waku-5 { background: #fdd835; color: #222; }
.waku-6 { background: #2e9b47; color: #fff; }
.waku-7 { background: #f57c00; color: #fff; }
.waku-8 { background: #f06292; color: #fff; }
.kr-result { display: inline-flex; align-items: baseline; gap: 1px; flex-shrink: 0; padding: 2px 7px; border: 1px solid #4a5563; border-radius: 999px; background: #222830; color: #e9edf2; font-size: 13px; font-weight: 700; white-space: nowrap; }
.kr-result small { font-size: 10px; }
.kr-result.pos-1 { border-color: #c9a64b; background: #3a3016; color: #ffe08a; }
.kr-result.pos-2 { border-color: #9aa5b3; background: #2a3038; color: #e3e8ee; }
.kr-result.pos-3 { border-color: #c08a5c; background: #33251a; color: #f2c79f; }
.kr-result.is-status { border-style: dashed; color: #c9d1dd; }
.kr-medal { margin-left: 2px; font-size: 12px; }
.kr-tag-na { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid #6b5a33; border-radius: 4px; color: var(--kui-warn); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.kr-state { flex-shrink: 0; align-self: flex-start; padding: 2px 8px; border: 1px solid var(--kui-ok-line); border-radius: 999px; background: var(--kui-ok-soft); color: var(--kui-ok-hover); font-size: 12px; font-weight: 700; white-space: nowrap; }
.kr-state.is-cancelled { border-color: #7a3f3a; background: #2a1715; color: #f0a59c; }
.kr-excluded { margin: 2px 0 0; color: #fff; font-size: 12px; }   /* 「指数算出対象外：〇頭」は白（2026-10-26 TAKE 指示。一覧・詳細とも） */
.kr-cancel-note { margin: 8px 0 0; color: #f0a59c; font-size: 14px; }

/* ---------- 予想カード（指数上位5頭） ---------- */
.kr-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .kr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kr-card { scroll-margin-top: calc(var(--kui-header-h) + 12px); }
.kr-card-link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px; border: 1px solid #303842; border-radius: var(--kui-radius); background: var(--kui-paper); color: var(--kui-text); text-decoration: none; }
.kr-card-link:hover { border-color: var(--kui-accent); }
.kr-card-head { display: flex; align-items: flex-start; gap: 10px; }
.kr-no { display: inline-flex; align-items: baseline; flex-shrink: 0; padding: 3px 8px; border-radius: 8px; background: #2b323b; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.2; }
.kr-no small { font-size: 12px; margin-left: 1px; }
.kr-card-title { flex: 1 1 auto; min-width: 0; }
.kr-card-title h2 { margin: 0; color: #fff; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.kr-card-title p { margin: 2px 0 0; color: var(--kui-muted); font-size: 13px; }
.kr-honmei { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(var(--kui-accent-rgb), .35); border-radius: 10px; background: var(--kui-accent-tint); }
.kr-honmei-name { flex: 1 1 auto; min-width: 0; color: #fff; font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.kr-honmei-sub { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; font-size: 12px; font-weight: 400; }
.kr-honmei-index { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; color: var(--kui-accent); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kr-honmei-index small { color: var(--kui-muted); font-size: 11px; font-weight: 600; }
.kr-pick-list { margin: 0; padding: 0; list-style: none; }
.kr-pick-list li { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #262d36; }
.kr-pick-list li:last-child { border-bottom: 0; }
.kr-pick-name { flex: 1 1 auto; min-width: 0; color: #e9edf2; font-size: 15px; overflow-wrap: anywhere; }
.kr-pick-index { flex-shrink: 0; min-width: 52px; color: #f3f5f7; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.kr-card-more { margin-top: auto; color: var(--kui-accent-hover); font-size: 14px; font-weight: 700; text-align: right; }

/* ---------- レース詳細 ---------- */
.kr-back-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.kr-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #4a5662; border-radius: 9px; background: #212831; color: #f7f8fa; font-weight: 700; font-size: 15px; text-decoration: none; }
.kr-back:hover { border-color: var(--kui-accent); }
.kr-back-label { color: var(--kui-muted); font-size: 14px; text-align: right; }
.kr-select--compact { margin-bottom: 12px; }
.kr-head { display: flex; align-items: flex-start; gap: 12px; }
.kr-no-lg { font-size: 26px; padding: 4px 10px; }
.kr-head-body { flex: 1 1 auto; min-width: 0; }
.kr-head h1 { margin: 0; color: #fff; font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.kr-head p { margin: 4px 0 0; color: var(--kui-muted); font-size: 14px; }.kr-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; }
.kr-toolbar[hidden] { display: none; }
.kr-toolbar h2 { margin: 0; color: #fff; font-size: 19px; }
.kr-sort { display: inline-flex; border: 1px solid #4a5662; border-radius: 9px; overflow: hidden; }
.kr-sort button { min-height: 40px; padding: 0 12px; border: 0; border-right: 1px solid #4a5662; background: #212831; color: #cbd3dd; font: 700 14px var(--kui-font); cursor: pointer; }
.kr-sort button:last-child { border-right: 0; }
.kr-sort button[hidden] { display: none; }
.kr-sort button[aria-pressed="true"] { background: var(--kui-accent-tint); color: #fff; box-shadow: inset 0 -2px 0 var(--kui-accent); }
.kr-horses { display: grid; gap: 8px; }
.kr-horse { padding: 12px; border: 1px solid #303842; border-radius: 12px; background: var(--kui-paper); }
.kr-horse.is-honmei { border-color: rgba(var(--kui-accent-rgb), .5); }
.kr-horse.is-scratched { opacity: .6; }
.kr-horse-main { display: flex; align-items: center; gap: 8px; }
.kr-horse-name { flex: 1 1 auto; min-width: 0; }
.kr-horse-name strong { display: block; color: #fff; font-size: 16px; overflow-wrap: anywhere; }
.kr-horse-name span { color: var(--kui-muted); font-size: 13px; }
.kr-horse-index { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kr-horse-rank { color: var(--kui-muted); font-size: 11px; }
.kr-final { color: var(--kui-accent); font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kr-horse:not(.is-honmei) .kr-final { color: #f3f5f7; }
.kr-horse-result { display: inline-flex; align-items: center; gap: 4px; color: var(--kui-muted); font-size: 11px; }
.kr-factors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #262d36; }
.kr-factor { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 4.2em; align-items: center; gap: 8px; font-size: 13px; }
.kr-factor-label { color: #c9d1dd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-factor-val { color: #f3f5f7; text-align: right; font-variant-numeric: tabular-nums; }
.kr-fbar { position: relative; display: block; height: 6px; border-radius: 3px; background: #2b323b; overflow: hidden; }
.kr-fbar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: #6e9fc0; }
.kr-fbar.is-center::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 50%; width: 1px; background: #5d6875; }
.kr-fbar.is-center i { left: auto; }
.kr-fbar.is-center i:not(.is-neg) { background: var(--kui-ok); }
.kr-fbar i.is-neg { background: #c97a6d; }
.kr-fbar.is-none { background: transparent; }
.kr-pager { display: flex; justify-content: space-between; gap: 10px; margin: 14px 0 0; }
.kr-pager:empty { display: none; }

/* 免責の一文（一覧・詳細の下部。旧 race-ai のフッターの文言。2026-10-29 No.005-②） */
.kr-disclaimer { margin: 18px 0 4px; color: var(--kui-muted); font-size: 12px; line-height: 1.6; text-align: center; }

/* ---------- レース詳細の縦幅圧縮（2026-10-26。body.kr-detail だけ。一覧・TOP は変えない） ----------
   情報は削らず、余白・間隔・配置で低くする。固定の高さで切り詰めない。押せる部品は 44px 以上 */
/* ① 競馬場・開催日・レース番号の選択 */
.kr-detail .kr-select { padding: 10px; }
.kr-detail .kr-pickers { gap: 8px; }
.kr-detail .kr-picker { min-height: 46px; gap: 0; padding: 4px 10px; }
.kr-detail .kr-picker-label { font-size: 11px; line-height: 1.25; }
.kr-detail .kr-picker select { min-height: 24px; font-size: 16px; line-height: 1.25; }
.kr-detail .kr-picker--date { padding-right: 32px; }
.kr-detail .kr-picker--date b { font-size: 16px; line-height: 1.25; }
.kr-detail .kr-picker-cal { right: 9px; font-size: 16px; }
.kr-detail .kr-day-cond { margin-top: 6px; }
.kr-detail .kr-rgrid { gap: 6px; margin-top: 8px; }
.kr-detail .kr-rgrid--strip .kr-rbtn { min-height: 44px; padding: 3px 2px; gap: 0; }
.kr-detail .kr-rbtn strong { font-size: 17px; line-height: 1.15; }
.kr-detail .kr-rbtn span { font-size: 12px; line-height: 1.2; }
/* ② レース情報の見出し：番号とレース名を近づけ、補助情報・札は1つの行に並べる（入らなければ折り返す） */
.kr-detail .kr-head { gap: 10px; padding: 10px 12px; align-items: flex-start; }
.kr-detail .kr-no-lg { padding: 2px 8px; font-size: 22px; }
.kr-detail .kr-head-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.kr-detail .kr-head h1 { flex: 1 0 100%; font-size: 20px; line-height: 1.35; }
.kr-detail .kr-head p { margin: 0; font-size: 13px; line-height: 1.45; }
.kr-detail .kr-head .kr-excluded { margin: 0; color: #fff; font-size: 12px; line-height: 1.45; }   /* .kr-head p（グレー）より優先して白 */
.kr-detail .kr-head .kr-cancel-note { flex: 1 0 100%; margin: 2px 0 0; font-size: 13px; }
.kr-detail .kr-head .kr-state { align-self: center; padding: 0 8px; font-size: 12px; line-height: 1.6; }
/* ③ 各馬：上段＝印・枠番・馬名・騎手／右に「最終指数 値」と着順。下段＝要素指数（2列。360px 未満は1列、PC は3列。項目名は省略しない） */
.kr-detail .kr-horses { gap: 6px; }
.kr-detail .kr-horse { padding: 8px 10px; }
.kr-detail .kr-horse-main { gap: 7px; }
.kr-detail .kr-horse-name strong { font-size: 16px; line-height: 1.3; }
.kr-detail .kr-horse-name span { display: block; font-size: 12px; line-height: 1.35; }
.kr-detail .kr-horse-index { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-items: end; column-gap: 5px; row-gap: 1px; }
.kr-detail .kr-horse-rank { line-height: 1.2; }
.kr-detail .kr-final { line-height: 1.1; }
.kr-detail .kr-horse-result { grid-column: 1 / -1; }
.kr-detail .kr-factors {
  display: grid;
  grid-template-columns: repeat(2, max-content minmax(14px, 1fr) max-content);
  align-items: center;
  gap: 2px 8px;
  margin-top: 6px;
  padding-top: 6px;
}
.kr-detail .kr-factor { display: contents; }   /* 項目名・バー・値の列を全行でそろえる */
.kr-detail .kr-factor-label { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: visible; }
.kr-detail .kr-factor-val { font-size: 12px; line-height: 1.3; white-space: nowrap; }
.kr-detail .kr-fbar { height: 5px; }
@media (max-width: 359px) {
  .kr-detail .kr-factors { grid-template-columns: max-content minmax(14px, 1fr) max-content; }
  /* 320px 端末：開催日（例 10月16日(金)）が欠けないよう、ピッカーの文字を1px小さく・カレンダーの余白を詰める */
  .kr-detail .kr-picker select, .kr-detail .kr-picker--date b { font-size: 15px; }
  .kr-detail .kr-picker--date { padding-right: 26px; }
  .kr-detail .kr-picker-cal { right: 6px; font-size: 14px; }
  /* 馬名を途中で折らないよう、「最終指数」は値の上に置いて右の列を細くする（PC・375px は横並びのまま） */
  .kr-detail .kr-horse-index { grid-template-columns: auto; }
}
/* 〈 レース一覧へ は1行のまま（長い場名・日付のときは右のラベルの方を折り返す） */
.kr-detail .kr-back { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 700px) {
  .kr-detail .kr-factors { grid-template-columns: repeat(3, max-content minmax(24px, 1fr) max-content); column-gap: 10px; }
}

/* ---------- レース一覧の縦幅圧縮（2026-10-26。body.kr-list だけ。レース詳細・TOP は変えない） ----------
   レース詳細のコンパクト表示と同じ方向。情報は削らず、余白・間隔・配置で低くする。固定の高さで切り詰めない */
/* ① 競馬場・開催日・レース番号の選択（レース詳細と同じ高さ・余白・間隔） */
.kr-list .kr-select { padding: 10px; }
.kr-list .kr-pickers { gap: 8px; }
.kr-list .kr-picker { min-height: 46px; gap: 0; padding: 4px 10px; }
.kr-list .kr-picker-label { font-size: 11px; line-height: 1.25; }
.kr-list .kr-picker select { min-height: 24px; font-size: 16px; line-height: 1.25; }
.kr-list .kr-picker--date { padding-right: 32px; }
.kr-list .kr-picker--date b { font-size: 16px; line-height: 1.25; }
.kr-list .kr-picker-cal { right: 9px; font-size: 16px; }
.kr-list .kr-day-cond { margin-top: 6px; }
.kr-list .kr-rgrid { gap: 6px; margin-top: 8px; }
.kr-list .kr-rbtn { min-height: 44px; padding: 3px 2px; gap: 0; }
.kr-list .kr-rbtn strong { font-size: 17px; line-height: 1.15; }
.kr-list .kr-rbtn span { font-size: 12px; line-height: 1.2; }
/* ② 各レースの見出し：補助情報と札を1つの行に（入らなければ折り返す）。レース名は全文 */
.kr-list .kr-cards { gap: 10px; }
.kr-list .kr-card-link { gap: 6px; padding: 10px 12px; }
.kr-list .kr-card-head { gap: 9px; }
.kr-list .kr-no { padding: 2px 7px; font-size: 19px; }
.kr-list .kr-card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; }
.kr-list .kr-card-title h2 { flex: 1 0 100%; font-size: 17px; line-height: 1.35; }
.kr-list .kr-card-title p { margin: 0; font-size: 13px; line-height: 1.45; }
.kr-list .kr-card-title .kr-excluded { margin: 0; color: #fff; font-size: 12px; line-height: 1.45; }   /* .kr-card-title p（グレー）より優先して白 */
.kr-list .kr-card-title .kr-state { align-self: center; padding: 0 8px; font-size: 12px; line-height: 1.6; }
.kr-list .kr-cancel-note { margin: 0; font-size: 13px; }
/* ③ AI指数上位5頭：本命は着順を馬名の後ろに続けて並べる。2〜5位は一覧向けに小さめのバッジ・少ない余白 */
.kr-list .kr-honmei { gap: 7px; padding: 6px 8px; }
.kr-list .kr-mark-lg { min-width: 38px; height: 32px; font-size: 17px; }
.kr-list .kr-honmei-name { line-height: 1.35; }
.kr-list .kr-honmei-sub { display: inline-flex; vertical-align: 1px; margin: 0 0 0 6px; }
.kr-list .kr-honmei-index { line-height: 1.05; }
.kr-list .kr-pick-list li { gap: 7px; padding: 3px 2px; }
.kr-list .kr-pick-list .kr-mark { min-width: 30px; height: 26px; font-size: 14px; }
.kr-list .kr-pick-list .kr-umaban { width: 25px; height: 25px; font-size: 13px; }
.kr-list .kr-pick-name { line-height: 1.35; }
.kr-list .kr-pick-list .kr-result { padding: 1px 6px; font-size: 12px; }
.kr-list .kr-card-more { font-size: 13px; line-height: 1.4; }
@media (max-width: 359px) {
  /* 320px 端末：開催日（例 10月26日(月)）が欠けないよう、ピッカーの文字を1px小さく・カレンダーの余白を詰める（レース詳細と同じ） */
  .kr-list .kr-picker select, .kr-list .kr-picker--date b { font-size: 15px; }
  .kr-list .kr-picker--date { padding-right: 26px; }
  .kr-list .kr-picker-cal { right: 6px; font-size: 14px; }
  /* 2〜5位：馬名を途中で折らないよう、着順は馬名の下の行に置く（印・枠番・指数は2行にまたがって中央） */
  .kr-list .kr-pick-list li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 7px; row-gap: 1px; }
  .kr-list .kr-pick-list li > .kr-mark, .kr-list .kr-pick-list li > .kr-umaban { grid-row: 1 / span 2; }
  .kr-list .kr-pick-list li > .kr-pick-name { grid-column: 3; grid-row: 1; }
  .kr-list .kr-pick-list li > .kr-result { grid-column: 3; grid-row: 2; justify-self: start; }
  .kr-list .kr-pick-list li > .kr-pick-index { grid-column: 4; grid-row: 1 / span 2; }
}

/* ---------- 開催カレンダー（モーダル。下部ナビ・ヘッダーより手前、☰・お知らせパネルより奥） ---------- */
.kr-cal-backdrop { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 12px; background: #000b; }
.kr-cal-backdrop[hidden] { display: none; }
.kr-cal { width: min(420px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; padding: 14px; border: 1px solid #3d4652; border-radius: 14px; background: #181d24; color: #f0f2f5; font-family: var(--kui-font); box-shadow: 0 12px 40px #000a; }
.kr-cal-head { display: flex; align-items: center; gap: 6px; }
.kr-cal-head h2 { flex: 1 1 auto; margin: 0; font-size: 18px; text-align: center; }
.kr-cal-nav, .kr-cal-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #4a5662; border-radius: 9px; background: #212831; color: #fff; font-size: 20px; cursor: pointer; }
.kr-cal-nav:disabled { opacity: .35; cursor: default; }
.kr-cal-track { margin: 8px 0; color: var(--kui-muted); font-size: 13px; text-align: center; }
.kr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kr-cal-wd { padding: 4px 0; color: var(--kui-muted); font-size: 12px; text-align: center; }
.kr-cal-wd.sun, .kr-cal-day.sun { color: #f0a59c; }
.kr-cal-wd.sat, .kr-cal-day.sat { color: #9cc2f0; }
.kr-cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 44px; border: 1px solid transparent; border-radius: 8px; color: #6f7a87; font-size: 15px; text-decoration: none; line-height: 1; }
.kr-cal-day.is-race { border: 2px dashed #5d6875; color: #aab4c0; }
.kr-cal-day.is-pred { border: 1px solid var(--kui-ok); background: #10241a; color: #fff; font-weight: 700; }
.kr-cal-day.is-pred:hover { background: #163a27; }
.kr-cal-day.is-future.is-pred:not(.is-current) { border-color: var(--kui-ok); background: #163a27; color: #c9f7dc; }
.kr-cal-day.is-future.is-race { border: 2px dashed #d9ad2b; background: #221d12; color: var(--kui-warn); }
.kr-cal-day.is-current { border: 2px solid #fff; background: #2b323b; color: #fff; }
.kr-cal-tag { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.kr-cal-day.is-future.is-pred .kr-cal-tag { color: var(--kui-ok); }
.kr-cal-day.is-future.is-race .kr-cal-tag { color: var(--kui-warn); }
.kr-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #c9a64b; }
.kr-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0; padding: 0; list-style: none; color: #c9d1dd; font-size: 12px; }
.kr-cal-legend li { display: inline-flex; align-items: center; gap: 5px; }
.kr-sw { display: inline-grid; place-items: center; width: 22px; height: 16px; border-radius: 4px; font-size: 8px; font-weight: 800; }
.kr-sw.sw-current { border: 2px solid #fff; background: #2b323b; }
.kr-sw.sw-pred { border: 1px solid var(--kui-ok); background: #10241a; }
.kr-sw.sw-race { border: 2px dashed #5d6875; }
.kr-sw.sw-future-pred { border: 1px solid var(--kui-ok); background: #163a27; color: var(--kui-ok); }
.kr-sw.sw-future-race { border: 2px dashed #d9ad2b; background: #221d12; }
.kr-sw.sw-none { border: 1px solid #353d48; }
.kr-cal-legend .kr-dot { position: static; }
.kr-cal-note { margin: 10px 0 0; color: var(--kui-muted); font-size: 12px; line-height: 1.6; }
.kr-cal-note:empty { display: none; }

/* 埋め込み表示（KJ記事の iframe）：ヘッダー等は kyouma-ui.css が消す。ここでは余白だけ詰める */
.kui-embed .kr-page .kui-wrap { padding-top: 8px; }
/* 埋め込みのレース詳細だけ：更新バー・競馬場／開催日の選択・レース番号を出さない（記事の中では指数の表を先に見せる。2026-10-29 No.005-③）。
   場・日付・レースは「〈 レース一覧へ」の右の表示（高知 ／ 10/24(土) ／ 12R）とレース名の欄に残る。通常の詳細画面は変えない */
.kui-embed .kr-detail [data-kui-update],
.kui-embed .kr-detail .kr-select { display: none; }