/* ===========================================================================
 * WIN5 ダッシュボード スタイル
 *  - 本体仕様 §9.3 5段階カラーパレット
 *  - §9.4 3列/2列/1列 レスポンシブ
 *  - 外部フレームワーク不要のバニラ CSS
 * =========================================================================== */

/* ---------- CSS変数（カラーパレット） ---------- */
:root {
  /* 5段階：調子・体重シグナル */
  --color-rising-strong: #16a34a;   /* Green 600 - 絶好調 */
  --color-rising:        #0d9488;   /* Teal 600 - 上り調子 */
  --color-stable:        #6b7280;   /* Gray 500 - 横ばい */
  --color-declining:     #ea580c;   /* Orange 600 - 下り調子 */
  --color-declining-strong: #dc2626; /* Red 600 - 不調 */

  /* v12.2 関連色 */
  --color-watch:         #9333ea;   /* Purple 600 - 注意リスト・所感 */
  --color-underrated:    #d97706;   /* Amber 600 - 過小評価 */
  --color-draw-required: #2563eb;   /* Blue 600 - 描出必須 */
  --color-warn:          #f59e0b;   /* Amber 500 - 警告 */
  --color-alert:         #dc2626;   /* Red 600 - 強警告 */

  /* 基本色 */
  --bg-page:    #f6f7f9;
  --bg-card:    #ffffff;
  --bg-subtle:  #f1f5f9;
  --fg-main:    #111827;
  --fg-muted:   #6b7280;
  --fg-meta:    #9ca3af;
  --border:     #e5e7eb;
  --border-strong: #cbd5e1;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* JRA枠色（読みやすい組み合わせ） */
  --frame-1-bg: #ffffff; --frame-1-fg: #111;
  --frame-2-bg: #1f2937; --frame-2-fg: #fff;
  --frame-3-bg: #dc2626; --frame-3-fg: #fff;
  --frame-4-bg: #2563eb; --frame-4-fg: #fff;
  --frame-5-bg: #fde047; --frame-5-fg: #111;
  --frame-6-bg: #16a34a; --frame-6-fg: #fff;
  --frame-7-bg: #f97316; --frame-7-fg: #fff;
  --frame-8-bg: #f9a8d4; --frame-8-fg: #111;
}

/* ---------- リセット & 基本タイポ ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; }
body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--fg-main);
  background: var(--bg-page);
  line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

dl, dt, dd { margin: 0; padding: 0; }

/* ---------- ヘッダー ---------- */
.dashboard-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-card);
}
.dashboard-header h1 {
  font-size: 1.25rem;
  color: var(--fg-main);
}
.dashboard-meta {
  margin: 0.25rem 0 0;
  color: var(--fg-muted);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dashboard-meta .date { color: var(--fg-main); font-weight: 600; }
.dashboard-meta .rule-version {
  color: var(--color-watch);
  font-weight: 600;
}

/* ---------- フッター ---------- */
.dashboard-footer {
  padding: 1rem 1.25rem 3rem;
  color: var(--fg-meta);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------- レースセクション ---------- */
main {
  padding: 1rem 0.75rem;
  max-width: 1400px;
  margin: 0 auto;
}
.race-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.race-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
  cursor: pointer;
  user-select: none;
}
.race-header h2 {
  font-size: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.race-number {
  color: var(--color-watch);
  font-weight: 700;
  font-size: 1rem;
}
.race-name { color: var(--fg-main); }
.race-meta {
  margin: 0.3rem 0 0;
  color: var(--fg-muted);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* セクション折りたたみ */
.race-section.is-collapsed .race-structure-card,
.race-section.is-collapsed .horse-grid {
  display: none;
}
.race-header::after {
  content: '▼';
  float: right;
  color: var(--fg-meta);
  font-size: 0.8rem;
  margin-left: auto;
  transition: transform 0.15s;
}
.race-section.is-collapsed .race-header::after {
  transform: rotate(-90deg);
}

/* ---------- レース構造予測カード ---------- */
.race-structure-card {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.rs-title {
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-bottom: 0.4rem;
}
.rs-summary {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--fg-main);
  font-size: 0.95rem;
}
.rs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 1rem;
}
.rs-cell {
  display: flex;
  flex-direction: column;
}
.rs-cell dt {
  font-size: 0.75rem;
  color: var(--fg-meta);
}
.rs-cell dd {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg-main);
}
.rs-confidence {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: normal;
}
.rs-lead-list {
  font-size: 0.8rem;
  color: var(--fg-muted);
  font-weight: normal;
}

/* ペース・馬場・性質バッジ色 */
.rs-pace.pace-high  { color: var(--color-declining-strong); font-weight: 700; }
.rs-pace.pace-middle { color: var(--color-stable); font-weight: 600; }
.rs-pace.pace-slow  { color: var(--color-rising); font-weight: 700; }
.rs-bias.bias-front   { color: var(--color-watch); }
.rs-bias.bias-closer  { color: var(--color-rising); }
.rs-bias.bias-balanced { color: var(--color-stable); }
.rs-bias.bias-unknown { color: var(--fg-meta); }
.rs-type {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  background: var(--color-stable);
  color: #fff;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------- 馬カードグリッド ---------- */
.horse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 0.85rem;
}
/* タブレット 768-1023px：2列 */
@media (min-width: 768px) {
  .horse-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    padding: 1rem;
  }
}
/* デスクトップ 1024px以上：3列 */
@media (min-width: 1024px) {
  .horse-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 馬カード本体 ---------- */
.horse-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.9rem;
  transition: box-shadow 0.15s, transform 0.15s;
}
.horse-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 要素1: ヘッダー */
.hc-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}
.hc-header-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hc-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid var(--border-strong);
}
.hc-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg-main);
}
.hc-header-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
  align-items: baseline;
}
.hc-popularity {
  color: var(--color-watch);
  font-weight: 600;
}
.hc-odds {
  color: var(--fg-main);
  font-weight: 600;
}

/* JRA 枠色 */
.frame-1 { background: var(--frame-1-bg); color: var(--frame-1-fg); }
.frame-2 { background: var(--frame-2-bg); color: var(--frame-2-fg); border-color: #000; }
.frame-3 { background: var(--frame-3-bg); color: var(--frame-3-fg); border-color: #b91c1c; }
.frame-4 { background: var(--frame-4-bg); color: var(--frame-4-fg); border-color: #1d4ed8; }
.frame-5 { background: var(--frame-5-bg); color: var(--frame-5-fg); border-color: #ca8a04; }
.frame-6 { background: var(--frame-6-bg); color: var(--frame-6-fg); border-color: #15803d; }
.frame-7 { background: var(--frame-7-bg); color: var(--frame-7-fg); border-color: #c2410c; }
.frame-8 { background: var(--frame-8-bg); color: var(--frame-8-fg); border-color: #db2777; }

/* 要素2: 調子バナー（5段階色） */
.hc-condition-banner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
.cond-rising_strong  { background: var(--color-rising-strong); }
.cond-rising         { background: var(--color-rising); }
.cond-stable         { background: var(--color-stable); }
.cond-declining      { background: var(--color-declining); }
.cond-declining_strong { background: var(--color-declining-strong); }
.cond-score { font-size: 0.78rem; opacity: 0.85; }

/* 要素3: レーダーチャート */
.hc-radar {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
}
.radar-chart {
  max-width: 100%;
  height: auto;
}
.radar-outer { fill: var(--bg-subtle); stroke: var(--border); stroke-width: 1; }
.radar-mid   { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3,2; }
.radar-axis  { stroke: var(--border-strong); stroke-width: 1; }
.radar-data {
  fill: rgba(37, 99, 235, 0.25);
  stroke: var(--color-draw-required);
  stroke-width: 1.5;
}
.radar-label {
  fill: var(--fg-main);
  font-family: inherit;
}

/* v12.2 描出必須エリア（常に領域確保で位置揃え） */
.hc-draw-area {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.7rem;          /* バッジ無しでも1行分の高さを常に確保 */
  padding: 0.35rem 0;
  border-top: 1px dashed var(--border);
  overflow: hidden;
}
.hc-draw-required {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  background: var(--color-draw-required);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: help;
  white-space: nowrap;
}
.hc-draw-reasons {
  font-size: 0.72rem;
  color: var(--fg-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* 長い根拠テキストは省略（フル文言はホバーで） */
  cursor: help;
}
/* Step 7 で動的に挿入されるスロット */
.hc-impression-slot,
.hc-judgment-slot,
.hc-scenario-body { min-width: 0; }
/* 最終判定スロット（独立した行） */
.hc-judgment-slot {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
  min-height: 2.4rem;          /* フォーム1行分を予約 */
}
.hc-judgment-radios { flex-wrap: nowrap; }

/* 要素7: 1着シナリオ */
.hc-scenario {
  background: var(--bg-subtle);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
}
.hc-scenario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}
.hc-scenario-title { color: var(--fg-muted); font-weight: 600; }
.hc-scenario-status {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.hc-scenario-undrawn {
  background: var(--bg-card);
  color: var(--color-warn);
  border: 1px solid var(--color-warn);
}
.hc-scenario-drawn {
  background: var(--color-rising);
  color: #fff;
}
.hc-scenario-body:empty { display: none; }

/* 要素4: 適性アイコン 4個 */
.hc-aptitude {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  text-align: center;
  background: var(--bg-subtle);
  border-radius: 4px;
  padding: 0.35rem;
}
.apt-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: var(--fg-muted);
}
.apt-mark {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}
.apt-good .apt-mark    { color: var(--color-rising-strong); }
.apt-fair .apt-mark    { color: var(--color-rising); }
.apt-poor .apt-mark    { color: var(--color-declining); }
.apt-unknown .apt-mark { color: var(--fg-meta); }
.apt-rank .apt-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-size: 0.85rem;
  color: #fff;
  background: var(--color-stable);
}
.apt-rank-A .apt-mark { background: var(--color-rising-strong); }
.apt-rank-B .apt-mark { background: var(--color-stable); }
.apt-rank-C .apt-mark { background: var(--color-declining); }
.apt-rank-unknown .apt-mark { background: var(--fg-meta); color: #fff; }

/* 要素5: 直近5走折れ線 */
.hc-recent-line {
  display: flex;
  justify-content: center;
  padding: 0.2rem 0;
}
.recent-line-chart { max-width: 100%; height: auto; }
.line-grid-top { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2,2; }
.line-path     { stroke: var(--color-draw-required); stroke-width: 1.5; fill: none; }
.line-marker   { fill: var(--color-draw-required); stroke: #fff; stroke-width: 1; }
.line-label    { fill: var(--fg-main); font-family: inherit; }
.line-point-missing .line-label { fill: var(--fg-meta); }

/* 要素6: 数値ステータス */
.hc-numeric-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
}
.ns-weight, .ns-fastest, .ns-same-course {
  white-space: nowrap;
}
.ns-weight-missing { color: var(--color-declining); }

/* 要素8: 特記事項 */
.hc-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.hc-note {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: rgba(147, 51, 234, 0.1);
  color: var(--color-watch);
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
}

/* =============================================================
 * v12.2 UI（所感入力 / 構成サマリー / 最終判定 / モーダル）
 * ============================================================= */

/* ---------- 用語ヘルプ（折りたたみ） ---------- */
.glossary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 1rem;
  max-width: 1400px;
  margin: 0.75rem auto;
  font-size: 0.85rem;
  box-shadow: var(--shadow-card);
}
.glossary > summary {
  padding: 0.55rem 0;
  cursor: pointer;
  color: var(--color-watch);
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.glossary > summary::-webkit-details-marker { display: none; }
.glossary > summary::before {
  content: '▶ ';
  display: inline-block;
  margin-right: 0.2rem;
  transition: transform 0.15s;
  color: var(--fg-meta);
}
.glossary[open] > summary::before {
  transform: rotate(90deg);
}
.glossary-body {
  padding: 0.25rem 0 0.85rem;
  border-top: 1px dashed var(--border);
}
.glossary-body dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 0.6rem 0 0.4rem;
}
.glossary-body dt {
  font-weight: 700;
  color: var(--fg-main);
  margin-bottom: 0.15rem;
}
.glossary-body dd {
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.55;
}
.glossary-body dd strong {
  color: var(--fg-main);
}
.glossary-body code {
  background: var(--bg-subtle);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.92em;
}
.glossary-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--fg-meta);
}
.glossary-radar-axes {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.82rem;
}
.glossary-radar-axes li { margin-bottom: 0.15rem; }
@media (min-width: 768px) {
  .glossary-body dl {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
  }
}

/* ---------- 所感入力エリア ---------- */
.impression-input-area {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--color-watch);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 1rem 0.75rem;
  max-width: 1400px;
  margin: 1rem auto;
  box-shadow: var(--shadow-card);
}
.impression-input-area h2 {
  font-size: 1rem;
  color: var(--color-watch);
  margin-bottom: 0.3rem;
}
.ii-help {
  margin: 0 0 0.7rem;
  color: var(--fg-muted);
  font-size: 0.78rem;
}
.impression-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.impression-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ii-race-label {
  display: inline-block;
  min-width: 2.5rem;
  font-weight: 600;
  color: var(--color-watch);
}
.impression-text {
  flex: 1;
  min-width: 180px;
  padding: 0.35rem 0.55rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.impression-text:focus {
  outline: none;
  border-color: var(--color-watch);
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.15);
}
.impression-save {
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--color-watch);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.impression-save:hover { opacity: 0.9; }
.impression-applied {
  font-size: 0.8rem;
  color: var(--fg-meta);
  min-width: 9rem;
}
.impression-applied.is-applied {
  color: var(--color-watch);
  font-weight: 600;
}

/* ---------- 所感バッジ（馬カードへ動的注入） ---------- */
.hc-impression-badge {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.15rem 0.45rem;
  background: var(--color-watch);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: help;
}
.hc-impression-badge.hc-impression-double {
  background: linear-gradient(135deg, var(--color-watch) 0%, var(--color-underrated) 100%);
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25);
}
.hc-impression-slot { position: absolute; top: 0; right: 0; }

/* ---------- 最終判定フォーム ---------- */
.hc-judgment-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hc-judgment-radios {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hc-judgment-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  background: var(--bg-card);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hc-judgment-radio input { margin: 0; }
.hc-judgment-radio.jr-honsen { color: var(--color-rising-strong); }
.hc-judgment-radio.jr-keikai { color: var(--color-watch); }
.hc-judgment-radio.jr-exclude { color: var(--color-declining); }
.hc-judgment-radio.jr-undetermined { color: var(--fg-muted); }

.hc-judgment-form.judgment-honsen { box-shadow: inset 4px 0 0 var(--color-rising-strong); padding-left: 0.4rem; }
.hc-judgment-form.judgment-keikai { box-shadow: inset 4px 0 0 var(--color-watch); padding-left: 0.4rem; }
.hc-judgment-form.judgment-exclude { box-shadow: inset 4px 0 0 var(--color-declining); padding-left: 0.4rem; }

.hc-exclude-reason-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
/* hidden 属性が display:flex に上書きされないように明示 */
.hc-exclude-reason-wrap[hidden] {
  display: none;
}
.hc-exclude-reason-label {
  font-size: 0.72rem;
  color: var(--color-declining);
  font-weight: 600;
}
.hc-exclude-reason {
  width: 100%;
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
  font-family: inherit;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  resize: vertical;
}
.hc-exclude-reason:focus {
  outline: none;
  border-color: var(--color-declining);
}
.hc-exclude-reason.is-empty {
  border-color: var(--color-declining);
  background: rgba(234, 88, 12, 0.05);
}
.hc-warning-overridden {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.4rem;
  background: var(--color-warn);
  color: #fff;
  font-size: 0.72rem;
  border-radius: 4px;
  font-weight: 600;
}

/* ---------- 構成サマリー ---------- */
.composition-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--color-draw-required);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  max-width: 1400px;
  margin: 0 auto 1rem;
  box-shadow: var(--shadow-card);
}
.composition-summary h2 {
  font-size: 1rem;
  color: var(--color-draw-required);
  margin-bottom: 0.4rem;
}
.cs-realtime {
  font-size: 0.7rem;
  color: var(--fg-muted);
  font-weight: normal;
}
.cs-empty {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.cs-race-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.cs-race {
  font-size: 0.88rem;
  padding: 0.2rem 0;
  border-bottom: 1px dotted var(--border);
}
.cs-warn {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  color: #fff;
}
.cs-warn-few { background: var(--color-warn); }
.cs-warn-many { background: var(--color-declining); }
.cs-totals {
  font-size: 0.95rem;
  margin: 0.4rem 0 0.2rem;
  color: var(--fg-main);
}
.cs-frame {
  font-size: 0.95rem;
  margin: 0.1rem 0 0.4rem;
  color: var(--fg-main);
}
.cs-frame-standard { color: var(--color-rising-strong); font-weight: 600; }
.cs-frame-mark { color: var(--color-rising-strong); }

.cs-warning-box {
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin-top: 0.6rem;
  border: 1px solid;
}
.cs-warning-hotta {
  background: rgba(147, 51, 234, 0.06);
  border-color: var(--color-watch);
}
.cs-warning-skip {
  background: rgba(220, 38, 38, 0.06);
  border-color: var(--color-declining-strong);
}
.cs-warning-title {
  margin: 0 0 0.3rem;
  font-weight: 700;
}
.cs-warning-hotta .cs-warning-title { color: var(--color-watch); }
.cs-warning-skip  .cs-warning-title { color: var(--color-declining-strong); }
.cs-warning-box ul {
  margin: 0.2rem 0;
  padding-left: 1.4rem;
  font-size: 0.85rem;
}
.cs-warning-note {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--fg-muted);
}

/* ---------- 警告モーダル ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.modal-dialog {
  position: relative;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 540px;
  width: calc(100% - 2rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-top: 4px solid var(--color-declining-strong);
}
.modal-dialog h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--color-declining-strong);
}
.modal-dialog p {
  font-size: 0.88rem;
  margin: 0 0 0.55rem;
}
.ue-detected {
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid var(--color-declining-strong);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}
.modal-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
}
.modal-actions button {
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-secondary {
  background: var(--bg-subtle);
  color: var(--fg-main);
  border: 1px solid var(--border-strong) !important;
}
.btn-danger {
  background: var(--color-declining-strong);
  color: #fff;
}
.ue-footnote {
  font-size: 0.75rem !important;
  color: var(--fg-muted);
  margin: 0.6rem 0 0 !important;
}
.ue-footnote code {
  background: var(--bg-subtle);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.9em;
}

/* ---------- スマホ調整 (~767px) ---------- */
@media (max-width: 767px) {
  html { font-size: 14px; }
  main { padding: 0.5rem 0.4rem; }
  .race-section { border-radius: 6px; margin-bottom: 0.85rem; }
  .race-header { padding: 0.7rem 0.85rem; }
  .horse-card { padding: 0.6rem; }
  .hc-header-sub { font-size: 0.72rem; }
  .radar-chart { width: 160px; height: 160px; }
  .impression-input-area, .composition-summary { margin: 0.5rem 0.4rem; }
  .modal-dialog { padding: 1rem 1rem; }
}