/* ============================================
   AIたけしの競馬予想 — Design System v2
   Dark Premium × Racing Intelligence
   ============================================ */

/* --- Google Fonts: Rajdhani for AI badge --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&display=swap');

/* ============================================
   AI たけしの大予想! Design Tokens (X 風 白基調)
   ============================================ */
:root {
  /* === ベース面 (グレースケール) === */
  --c-bg:            #ffffff;
  --c-surface:       #ffffff;
  --c-surface-alt:   #f7f9fa;
  --c-hover:         #f0f3f5;
  --c-border:        #e8edf1;
  --c-border-strong: #cfd9e0;

  /* === テキスト === */
  --c-text:           #0f172a;
  --c-text-secondary: #475569;
  --c-text-muted:     #94a3b8;
  --c-text-on-brand:  #ffffff;

  /* === ブランド (sky 系・ロゴと統一) === */
  --c-brand:        #0ea5e9;
  --c-brand-hover:  #0284c7;
  --c-brand-active: #0369a1;
  --c-brand-light:  #e0f2fe;
  --c-brand-bg:     #f0f9ff;

  /* === セマンティック === */
  --c-success:        #10b981;
  --c-success-text:   #047857;
  --c-success-bg:     #ecfdf5;
  --c-success-border: #6ee7b7;

  --c-warning:        #f59e0b;
  --c-warning-text:   #b45309;
  --c-warning-bg:     #fffbeb;

  --c-danger:         #dc2626;
  --c-danger-text:    #991b1b;
  --c-danger-bg:      #fef2f2;

  --c-gold:           #ca8a04;
  --c-gold-bg:        #fefce8;

  /* === 印 (馬券文化) === */
  --c-mark-honmei: #dc2626;
  --c-mark-taikou: #2563eb;
  --c-mark-tanana: #059669;
  --c-mark-renka:  #6b7280;
  --c-mark-hoshi:  #ea580c;
  --c-mark-chui:   #7c3aed;

  /* === 後方互換 alias (旧クラスから参照) === */
  --c-primary:       var(--c-brand);
  --c-primary-light: var(--c-brand-hover);
  --c-primary-dark:  var(--c-brand-active);
  --c-primary-bg:    var(--c-brand-bg);
  --c-ai:            var(--c-brand);
  --c-ai-glow:       rgba(14, 165, 233, 0.35);
  --c-gold-light:    #facc15;
  --c-nav:           var(--c-bg);
  --c-nav-border:    var(--c-border);
  --c-card:          var(--c-surface);
  --c-card-solid:    var(--c-surface);
  --c-border-light:  var(--c-border);
  --c-text-sub:      var(--c-text-secondary);
  --c-text-muted-x:  var(--c-text-muted);

  /* === タイポ (8 段階 — Tailwind 系列 整合 + 可読性 向上) === */
  --font-2xs:   11px;   /* 補助・キャプション・人気バッジ等 (これより小さくしない) */
  --font-xs:    12px;   /* メタ情報・タグ */
  --font-sm:    14px;   /* セカンダリ本文・テーブル */
  --font-base:  16px;   /* 本文標準 (15→16 に底上げ) */
  --font-lg:    18px;   /* 強調本文・カード見出し */
  --font-xl:    20px;   /* セクション小見出し */
  --font-h3:    22px;
  --font-h2:    26px;
  --font-h1:    32px;

  /* === 行間 === */
  --leading-tight:  1.35;
  --leading-snug:   1.5;
  --leading-base:   1.65;
  --leading-loose:  1.8;

  /* === ウェイト (CJK 整合 — 細すぎないよう 500/700/800) === */
  --weight-normal: 500;
  --weight-bold:   700;
  --weight-black:  800;

  /* === レイアウト === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* === グラデ・シャドウ alias === */
  --grad-header:    linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%);
  --grad-gold:      linear-gradient(135deg, #ca8a04 0%, #facc15 50%, #ca8a04 100%);
  --grad-cta:       linear-gradient(135deg, var(--c-brand-hover), var(--c-brand-active));
  --grad-chat-user: linear-gradient(135deg, var(--c-brand), var(--c-brand-hover));
  --shadow-card:        var(--shadow-sm);
  --shadow-card-hover:  var(--shadow-md);
  --shadow-gold:        0 2px 12px rgba(202, 138, 4, 0.25);
  --shadow-nav:         0 1px 0 var(--c-border), 0 2px 12px rgba(0,0,0,0.04);

  --z-nav:     100;
  --z-modal:   200;
  --z-tooltip: 300;
}

/* ============================================
   再利用 コンポーネントクラス
   ============================================ */

/* --- カード --- */
.ui-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ui-card.is-clickable { cursor: pointer; }
.ui-card.is-clickable:hover {
  background: var(--c-hover);
  box-shadow: var(--shadow-sm);
}
.ui-card-flat { /* hover 効果なし */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

/* --- ボタン --- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, transform 0.06s;
  text-decoration: none;
  white-space: nowrap;
}
.ui-btn:active { transform: translateY(1px); }
.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ui-btn-primary {
  background: var(--c-brand);
  color: var(--c-text-on-brand);
}
.ui-btn-primary:hover { background: var(--c-brand-hover); }

.ui-btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.ui-btn-secondary:hover { background: var(--c-hover); }

.ui-btn-danger {
  background: var(--c-danger);
  color: #fff;
}
.ui-btn-danger:hover { background: #b91c1c; }

.ui-btn-ghost {
  background: transparent;
  color: var(--c-text-secondary);
}
.ui-btn-ghost:hover { background: var(--c-hover); color: var(--c-text); }

.ui-btn-sm { padding: 6px 12px; font-size: var(--font-xs); }
.ui-btn-lg { padding: 12px 24px; font-size: var(--font-base); }

/* --- 入力欄 --- */
.ui-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.ui-input::placeholder { color: var(--c-text-muted); }
.ui-input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.ui-label {
  display: block;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--c-text-secondary);
  margin-bottom: 4px;
}

/* --- バッジ --- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.ui-badge-success { background: var(--c-success-bg); color: var(--c-success-text); border: 1px solid var(--c-success-border); }
.ui-badge-warning { background: var(--c-warning-bg); color: var(--c-warning-text); border: 1px solid #fde68a; }
.ui-badge-danger  { background: var(--c-danger-bg);  color: var(--c-danger-text);  border: 1px solid #fecaca; }
.ui-badge-gold    { background: var(--c-gold-bg);    color: var(--c-gold);          border: 1px solid #fef08a; }
.ui-badge-brand   { background: var(--c-brand-light); color: var(--c-brand-active); border: 1px solid #bae6fd; }
.ui-badge-muted   { background: var(--c-hover); color: var(--c-text-secondary); border: 1px solid var(--c-border); }

/* --- 印 (馬券記号) --- */
.mark-honmei { color: var(--c-mark-honmei); font-weight: 900; }
.mark-taikou { color: var(--c-mark-taikou); font-weight: 900; }
.mark-tanana { color: var(--c-mark-tanana); font-weight: 900; }
.mark-renka  { color: var(--c-mark-renka);  font-weight: 700; }
.mark-hoshi  { color: var(--c-mark-hoshi);  font-weight: 900; }
.mark-chui   { color: var(--c-mark-chui);   font-weight: 900; }

/* --- テーブル --- */
.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}
.ui-table th {
  background: var(--c-surface-alt);
  color: var(--c-text-secondary);
  font-weight: 700;
  font-size: var(--font-xs);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ui-table td {
  padding: 12px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.ui-table tr:hover td { background: var(--c-hover); }
.ui-table tr:last-child td { border-bottom: 0; }

/* --- 統計 (KPI) カード --- */
.ui-stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.ui-stat-label {
  font-size: var(--font-xs);
  color: var(--c-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.ui-stat-value {
  font-size: var(--font-xl);
  font-weight: 900;
  color: var(--c-text);
  line-height: 1.2;
}
.ui-stat-value.is-positive { color: var(--c-success-text); }
.ui-stat-value.is-negative { color: var(--c-danger-text); }

/* --- セクションヘッダー --- */
.ui-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.ui-section-header h2,
.ui-section-header h3 {
  font-size: var(--font-lg);
  font-weight: 800;
  color: var(--c-text);
  margin: 0;
}

/* --- 区切り線 --- */
.ui-divider { height: 1px; background: var(--c-border); margin: 12px 0; }

/* ============================================
   Base
   ============================================ */
html, body {
  overflow-x: hidden;        /* 横スクロール 防止 */
  max-width: 100vw;
}
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-size: var(--font-base);
  line-height: var(--leading-base);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   Navigation — Dark Premium
   ============================================ */
.nav-bar {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* AI + title */
.nav-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
}

.nav-ai {
  font-family: 'Rajdhani', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-ai);
  text-shadow: 0 0 10px var(--c-ai-glow), 0 0 20px rgba(14,165,233,0.2);
  letter-spacing: 0.04em;
  margin-right: 4px;
  position: relative;
}

.nav-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(15,23,42,1);
  letter-spacing: 0.01em;
}

.nav-brand:hover .nav-name {
  color: #fff;
}

.nav-brand:hover .nav-ai {
  text-shadow: 0 0 14px var(--c-ai-glow), 0 0 28px rgba(14,165,233,0.35);
}

/* Horse icon */
.nav-horse-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ai);
  flex-shrink: 0;
  transition: all 0.2s;
}
.nav-brand:hover .nav-horse-icon {
  background: rgba(14, 165, 233, 0.20);
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 0 12px rgba(14,165,233,0.25);
}

/* Nav links */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.nav-link:hover {
  color: #0c4a6e;
  background: #e0f2fe;
  border-color: #38bdf8;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.18);
  transform: translateY(-1px);
}
.nav-link:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15,23,42,0.08) inset;
}

/* Mobile menu */
.nav-mobile-menu {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.nav-mobile-link {
  display: block;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  margin-bottom: 0.4rem;
  transition: all 0.15s;
}
.nav-mobile-link:hover, .nav-mobile-link:active {
  color: #0c4a6e;
  background: #e0f2fe;
  border-color: #38bdf8;
}

/* ============================================
   Cards
   ============================================ */
.stat-card {
  background: rgba(15,23,42,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15,23,42,0.08);
  border-top: 3px solid var(--c-primary);
  border-radius: 0.875rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: all 0.2s;
}
.stat-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.prediction-card {
  display: block;
  background: rgba(15,23,42,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 0.875rem;
  padding: 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
  animation: card-fade-in 0.4s ease-out both;
}
.prediction-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prediction-card:nth-child(1) { animation-delay: 0s; }
.prediction-card:nth-child(2) { animation-delay: 0.06s; }
.prediction-card:nth-child(3) { animation-delay: 0.12s; }

/* ============================================
   Pick Marks
   ============================================ */
.pick-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; font-size: 0.875rem; font-weight: 900;
  border-radius: 0.375rem; flex-shrink: 0;
}
.pick-mark-lg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; font-size: 1.25rem; font-weight: 900;
  border-radius: 0.5rem; flex-shrink: 0;
}
.mark-honmei { background: #e6f7ef; color: #00864a; }
.mark-taikou { background: #dbeafe; color: #2563eb; }
.mark-tanana { background: var(--c-gold-bg); color: var(--c-gold); }
.mark-renka  { background: #f4f4f5; color: #71717a; }
.mark-hoshi  { background: #f5f3ff; color: #7c3aed; }
.mark-chui   { background: #fff7ed; color: #ea580c; }

/* Pick rows */
.pick-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 1rem; border-radius: 0.75rem;
  border-left: 3px solid transparent; background: rgba(15,23,42,0.04);
  transition: background 0.2s;
}
.pick-row:hover { background: var(--c-hover); }
.pick-honmei-row { border-left-color: var(--c-primary); }
.pick-taikou-row { border-left-color: #3b82f6; }
.pick-tanana-row { border-left-color: var(--c-gold); }
.pick-renka-row  { border-left-color: #d4d4d8; }
.pick-hoshi-row  { border-left-color: #7c3aed; }
.pick-chui-row   { border-left-color: #ea580c; }

/* ============================================
   Grade Badges
   ============================================ */
.grade-badge {
  display: inline-block; font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.06em; padding: 0.125rem 0.5rem;
  border-radius: 0.25rem; text-transform: uppercase;
}
.grade-g1, .grade-gi {
  background: var(--grad-gold);
  color: #3a2800;
  box-shadow: 0 1px 6px rgba(212, 160, 23, 0.4);
  animation: grade-g1-pulse 3s ease-in-out infinite;
}
@keyframes grade-g1-pulse {
  0%, 100% { box-shadow: 0 1px 6px rgba(212, 160, 23, 0.4); }
  50%       { box-shadow: 0 1px 14px rgba(212, 160, 23, 0.7); }
}
.grade-g2, .grade-gii  { background: linear-gradient(135deg, #b8b8b8, #e0e0e0); color: #3a3a3a; }
.grade-g3, .grade-giii { background: linear-gradient(135deg, #bf6e2a, #d9944e); color: #fff; }
.grade-listed, .grade-l { background: #ede9fe; color: #7c3aed; }
.grade-op, .grade-open  { background: #dbeafe; color: #2563eb; }
.grade-default           { background: var(--c-surface-alt); color: var(--c-text-secondary); }

/* (旧 .race-row 削除済 — Phase 6 末尾で再定義) */

/* ============================================
   Hit Badge
   ============================================ */
.hit-badge {
  display: inline-block;
  background: var(--grad-gold);
  color: #3a2800;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.1875rem 0.625rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-gold);
  animation: hit-shine 2.5s ease-in-out infinite;
}
@keyframes hit-shine {
  0%, 100% { box-shadow: 0 2px 8px rgba(212, 160, 23, 0.35); }
  50%       { box-shadow: 0 2px 18px rgba(212, 160, 23, 0.65); }
}

/* Confidence stars */
.confidence-stars { display: inline-flex; gap: 1px; letter-spacing: 2px; line-height: 1; }

/* ============================================
   Chat Widget (FAB) — 白テーマ
   ============================================ */
.chat-fab {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 999;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35), 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: all 0.2s ease;
}
.chat-fab:hover {
  background: var(--c-brand-hover);
  transform: scale(1.06);
  box-shadow: 0 8px 28px rgba(14, 165, 233, 0.45);
}
.chat-fab:active { transform: scale(0.95); }

.chat-panel {
  position: fixed; bottom: 5.5rem; right: 1.25rem; z-index: 999;
  width: 400px; max-height: 580px;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden; animation: chat-slide-up 0.25s ease-out;
}
@keyframes chat-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
}
.chat-header .chat-avatar {
  background: var(--c-brand-light);
  color: var(--c-brand-active);
  border: 1.5px solid var(--c-brand);
}

.chat-messages {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  max-height: 380px; min-height: 200px;
  background: var(--c-surface-alt);
}

.chat-msg { display: flex; max-width: 88%; }
.chat-msg.ai   { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }

.chat-bubble {
  padding: 0.625rem 0.875rem; border-radius: 0.875rem;
  font-size: 0.8125rem; line-height: 1.65; word-break: break-word;
}
.chat-bubble.ai {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-bottom-left-radius: 0.25rem;
}
.chat-bubble.user {
  background: var(--c-brand);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

.chat-context-divider {
  text-align: center; font-size: 0.6875rem; color: var(--c-text-muted);
  padding: 0.5rem 1rem; margin: 0.25rem 0;
  border-top: 1px dashed var(--c-border);
  font-weight: 600;
}

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 1rem 0.5rem; }

.chat-suggest-btn {
  padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 600;
  color: var(--c-brand-active); background: var(--c-brand-bg);
  border: 1px solid var(--c-brand-light);
  border-radius: 1rem; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.chat-suggest-btn:hover {
  background: var(--c-brand-light);
  border-color: var(--c-brand);
}

.chat-input-area {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

.chat-input {
  flex: 1; background: var(--c-surface);
  border: 1.5px solid var(--c-border-strong);
  border-radius: 0.625rem; padding: 0.625rem 0.875rem;
  font-size: 16px; color: var(--c-text); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.chat-input::placeholder { color: var(--c-text-muted); }

/* 個別レースページのインラインチャット入力 */
#prediction-chat-input {
  background: var(--c-surface) !important;
  border: 1.5px solid var(--c-border-strong) !important;
  color: var(--c-text) !important;
}
#prediction-chat-input:focus {
  border-color: var(--c-brand) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18) !important;
  outline: none !important;
}
#prediction-chat-input::placeholder { color: var(--c-text-muted) !important; }

.chat-send-btn {
  width: 2.5rem; height: 2.5rem; border-radius: 0.625rem;
  background: var(--c-brand); color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s;
}
.chat-send-btn:hover  { background: var(--c-brand-hover); }
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-loading { display: inline-flex; gap: 4px; padding: 0.5rem 0; }
.chat-loading span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-brand); animation: chat-dot 1.2s infinite;
}
.chat-loading span:nth-child(2) { animation-delay: 0.2s; }
.chat-loading span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1); }
}
}

@media (max-width: 480px) {
  .chat-panel { bottom: 0; right: 0; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .chat-messages { max-height: none; flex: 1; }
}

/* ============================================
   Inline Chat (home page desktop right column)
   ============================================ */
#chat-inline .chat-messages-scroll {
  max-height: none; flex: 1;
  background: transparent;
}
#chat-inline .chat-messages-scroll::-webkit-scrollbar { width: 4px; }
#chat-inline .chat-messages-scroll::-webkit-scrollbar-track { background: transparent; }
#chat-inline .chat-messages-scroll::-webkit-scrollbar-thumb { background: #d4d4d0; border-radius: 2px; }

@media (max-width: 1023px) {
  #chat-column { height: 60vh !important; min-height: 400px; }
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #d4d4d0; border-radius: 2px; }

/* ============================================
   Result Accordion
   ============================================ */
.result-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.result-accordion.open .result-detail { max-height: 400px; }
.result-chevron { transition: transform 0.2s ease; }
.result-accordion.open .result-chevron { transform: rotate(90deg); }

/* ============================================
   Mobile App Layout
   ============================================ */
.mobile-app {
  display: flex;
  flex-direction: column;
  /* body は min-h-screen + flex flex-col で nav の下に main(flex-1) を持つ.
     mobile-app は main 内に flex:1 で 残り空間を fill する.
     これにより iOS Safari の URL バー 開閉や リロード で 上下スペース が出ない. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mobile-tab-bar {
  display: flex;
  background: var(--c-nav);
  flex-shrink: 0;
  border-top: 1px solid rgba(15,23,42,0.04);
}
.mobile-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0.625rem 0;
  font-size: 0.75rem; font-weight: 600;
  color: var(--c-text-muted);
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.mobile-tab.active {
  color: var(--c-ai);
  border-bottom-color: var(--c-ai);
}
.mobile-tab svg { stroke: currentColor; }

.mobile-tab-content {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch; min-height: 0;
}

.mobile-fixed-bottom {
  flex-shrink: 0; border-top: 1px solid var(--c-border);
  background: var(--c-card);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--vh-offset, 0px), 16px);
}
@media (display-mode: standalone) {
  .mobile-fixed-bottom { padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px); }
}

@media (max-width: 1023px) {
  .mobile-app ~ footer { display: none; }
}

/* ============================================
   Table
   ============================================ */
table th, table td { white-space: nowrap; }
table th { background: rgba(15,23,42,0.04); color: rgba(71,85,105,1); }
table td { color: rgba(30,41,59,1); }

/* ============================================
   Betting Strategy Cards
   ============================================ */
.bet-card-hit {
  border: 2px solid var(--c-primary);
  background: var(--c-primary-bg);
}
.bet-card-miss {
  border: 1px solid var(--c-border);
  background: var(--c-card);
}
.bet-highlight {
  background: rgba(0, 168, 79, 0.08);
  font-weight: 700;
}

/* ============================================
   Utilities
   ============================================ */
.text-primary  { color: var(--c-primary); }
.text-gold     { color: var(--c-gold); }
.text-danger   { color: var(--c-danger); }
.bg-primary    { background: var(--c-primary); }
.border-primary { border-color: var(--c-primary); }

::selection { background: rgba(14, 165, 233, 0.25); color: var(--c-text); }

/* ============================================
   Dark Theme Overrides — 撤去 (Phase 7 で 白テーマ統一)
   ============================================ */


/* ============================================
   Phase 6: 枠 / カード 強化
   ============================================ */

/* レース行 (index.html / race-row) */
.race-row {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--c-text);
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.race-row:hover {
  background: var(--c-hover);
  border-color: var(--c-brand-light);
  box-shadow: var(--shadow-sm);
}
.race-row.race-row-has-pred {
  border-color: var(--c-brand-light);
}
.race-row.race-row-w6-hit {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fde68a;
  /* outline = 4辺ぐるり (border-left の track-color に干渉しない) */
  outline: 2px solid #f59e0b;
  outline-offset: -1px;
}
.race-row.race-row-w6-hit:hover {
  outline-color: #d97706;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

/* スキップ (見送り) — グレーアウト */
.race-row[data-w6-skip="1"] {
  opacity: 0.7;
}

/* date-section (日別グルーピング) — 上部に余白 */
.date-section-pc, .date-section-mob {
  margin-top: 8px;
}

/* セクション コンテナ — index.html のメインカラム */
.lg\:block section.border-b {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

/* グレード ボタン */
.grade-filter-btn {
  transition: all 0.12s;
}
.grade-filter-btn:not(.active):hover {
  background: var(--c-hover);
  border-color: var(--c-brand-light);
}

/* 直近予想結果 — accordion */
.result-accordion {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.result-accordion:hover {
  border-color: var(--c-brand-light);
  box-shadow: var(--shadow-sm);
}
.result-toggle {
  background: var(--c-surface);
}
.result-toggle:hover { background: var(--c-hover); }
.result-detail {
  display: none;
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-border);
}
.result-accordion.open .result-detail { display: block; }
.result-accordion.open .result-chevron { transform: rotate(90deg); }

/* グレード badge — 見栄え改善 */
.grade-badge {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--c-surface-alt);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border);
}
.grade-badge.grade-g1 { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.grade-badge.grade-g2 { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.grade-badge.grade-g3 { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.grade-badge.grade-listed { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.grade-badge.grade-op { background: var(--c-success-bg); color: var(--c-success-text); border-color: var(--c-success-border); }

/* pick-mark (印 表示) */
.pick-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 的中バッジ */
.badge-teki {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid #f59e0b;
  white-space: nowrap;
}

/* チャットウィジェット (右カラム) — index.html */
.lg\:block .lg\:flex-row > .lg\:w-\[400px\] {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

/* 統計バー (上部 検証実績...) — section に既に border-b あるが フォロー */
section.border-b.border-slate-200.bg-white {
  background: var(--c-surface);
}

/* ボタン (一覧の filter / today / 重賞 等) — まだ Tailwind class 直のもの */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ============================================
   GLOBAL TYPOGRAPHY RULES (2026-05-07)
   全体の文字サイズ・可読性を統一.

   方針:
   - 最小サイズ 11px (text-[8px], text-[9px], text-[10px] を底上げ)
   - 本文標準 16px (Tailwind text-base)
   - 行間 1.65 (CJK 用)
   - 細字 (slate-500) も font-weight:500 で読みやすく
   - モバイル (<768px) で 一段階 上げ
   ============================================ */

/* --- 最小サイズの底上げ (text-[8px] 〜 text-[10px] を一律 11px に) --- */
.text-\[8px\],
.text-\[9px\],
.text-\[10px\] {
  font-size: 11px !important;
  line-height: var(--leading-snug);
}

/* --- text-[11px] / text-xs (12px) は 行間だけ広く --- */
.text-\[11px\],
.text-xs {
  line-height: var(--leading-snug);
}

/* --- text-sm (14px) 標準行間 --- */
.text-sm { line-height: var(--leading-base); }

/* --- text-base (16px) — 本文 --- */
.text-base { line-height: var(--leading-base); }

/* --- 見出し階層 (Tailwind h1〜h3 + 独自 ui-h クラス) --- */
h1, .ui-h1 {
  font-size: var(--font-h1);
  line-height: var(--leading-tight);
  font-weight: var(--weight-black);
  letter-spacing: -0.01em;
}
h2, .ui-h2 {
  font-size: var(--font-h2);
  line-height: var(--leading-tight);
  font-weight: var(--weight-black);
  letter-spacing: -0.005em;
}
h3, .ui-h3 {
  font-size: var(--font-h3);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
}

/* --- text-2xl / 3xl (Tailwind の見出し) — 行間タイト --- */
.text-2xl { line-height: var(--leading-tight); letter-spacing: -0.005em; }
.text-3xl { line-height: var(--leading-tight); letter-spacing: -0.01em; }
.text-4xl { line-height: var(--leading-tight); letter-spacing: -0.015em; }

/* --- 細字 (text-slate-500/600) のウェイトを上げて 視認性 確保 --- */
.text-slate-500,
.text-gray-500 {
  font-weight: 500;
}

/* --- font-bold が CJK で 細く見えがちなので 700 --- */
.font-bold { font-weight: 700; }
.font-black { font-weight: 800; }

/* --- テーブル — 行間 + パディング 統一 --- */
table {
  font-size: var(--font-sm);
  line-height: var(--leading-snug);
}
table th {
  font-weight: 700;
  letter-spacing: 0.02em;
}
table td, table th {
  padding: 8px 12px;
  vertical-align: middle;
}

/* --- ボタン — 最小タップ領域 (アクセシビリティ) --- */
button, .btn, [role="button"] {
  min-height: 32px;
  line-height: var(--leading-snug);
}
.text-\[10px\] button,
button.text-\[10px\],
button.text-\[11px\] {
  min-height: 28px;  /* チップ系は 28px まで OK */
}

/* --- input / select / textarea — 最低 16px (iOS の自動ズーム回避) --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  font-size: 16px;
  line-height: var(--leading-snug);
}

/* --- リンク — 下線を意識的に出す (本文中) --- */
a:not(.no-underline):not(.btn):not([class*="rounded"]):not(.race-row):not(.prediction-card):not(.result-toggle):not([class*="text-emerald"]):not([class*="text-sky"]):not(nav a):hover {
  text-decoration: underline;
}

/* --- truncate されるテキスト の min-width 確保 --- */
.truncate { min-width: 0; }

/* --- カード本文 (race-row 内など) の text-xs を sm 寄りに底上げ --- */
.race-row .font-bold.text-sm,
.race-row > div .text-sm {
  font-size: var(--font-sm);  /* 14px (Tailwind と同等) */
}

/* --- モバイル (<768px) で 一段階 上げ + line-height 広め --- */
@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.7; }
  .text-xs { font-size: 12.5px; line-height: 1.6; }
  .text-\[10px\],
  .text-\[9px\],
  .text-\[8px\] { font-size: 11.5px !important; }
  /* 主要な見出しを モバイルで 控えめに */
  h1, .ui-h1 { font-size: 26px; }
  h2, .ui-h2 { font-size: 22px; }
  h3, .ui-h3 { font-size: 18px; }
  .text-2xl { font-size: 22px; }
  .text-3xl { font-size: 26px; }
  /* テーブル を モバイルで タップしやすく */
  table th, table td { padding: 10px 12px; }
  button, .btn, [role="button"] { min-height: 36px; }
}

/* --- 大画面 (1280px+) で h1 等を ややゆったりと --- */
@media (min-width: 1280px) {
  h1, .ui-h1 { font-size: 36px; }
  .text-3xl { font-size: 32px; }
}

/* --- 印 (馬券記号 ◎○▲△☆注) — フォント とサイズの統一 --- */
.pick-mark {
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-feature-settings: "palt" 0;
  letter-spacing: 0;
}

/* --- 円額 / ROI 等 数字専用 — 等幅で右寄せが揃う --- */
.font-mono,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- 説明テキスト (xs/sm の段落 連続) の余白 --- */
p + p { margin-top: 0.5em; }
ul, ol { line-height: var(--leading-snug); }
ul li + li, ol li + li { margin-top: 0.25em; }

/* --- 強調 b/strong のウェイトを CJK 用に 700 --- */
b, strong { font-weight: 700; }

/* --- セクション見出しの下マージン (連続する文章のリズム) --- */
h1 + p, h2 + p, h3 + p { margin-top: 0.5em; }

/* --- ::selection (テキスト選択時) の白テーマ統一 (Phase 7 で青に修正済 — 確認のみ) --- */
::selection { background: rgba(14, 165, 233, 0.25); color: var(--c-text); }

/* ============================================
   BACKGROUND HORSE — 全ページ共通の うっすら 背景馬
   - 固定位置 (スクロール追従なし)
   - 右下寄せ
   - opacity 低め で コンテンツ視認性 を維持
   ============================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/static/images/bg_horse.webp');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;      /* PC: 全体表示・中心ぞろえ */
  /* background-attachment: fixed は iOS Safari で バグる ので 不使用.
     ::before 自体が position: fixed なので 同等効果. */
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

/* モバイル: 縦長 viewport なので 横幅フィット で 高さは auto.
   contain だと 上下に 大きな 余白 が 生まれて 寂しいので 横幅 100% で 表示 */
@media (max-width: 767px) {
  body::before {
    background-size: 130% auto;
    background-position: center 30vh;  /* 縦中央やや下 */
  }
}

/* z-index フォールバック: body 自体には背景色が必要 (::before が後ろにいくため) */
body { background-color: var(--c-bg); position: relative; }

/* ============================================
   GLASS EFFECT — frosted glass cards (背景馬 透け対応)
   - 白カードを 半透明 + backdrop-blur で ガラス風 に
   - 背景馬が うっすら 透けて見える
   - 視認性を保つため saturate で 色を 際立たせる
   ============================================ */

/* メインコンテンツコンテナ (max-w-* 系) は 何もしない (背景馬 を そのまま透過) */

/* 主要白カード — 半透明 + ぼかし */
section.border-b.bg-white,
.race-row,
.result-accordion,
.prediction-card,
.lg\:block .lg\:flex-row > .lg\:w-\[400px\],
[class*="rounded-xl"][class*="bg-white"]:not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-sky"]):not([class*="bg-rose"]):not([class*="bg-cyan"]):not([class*="bg-purple"]):not([class*="bg-yellow"]):not([class*="bg-red"]),
[class*="rounded-2xl"][class*="bg-white"],
[class*="rounded-lg"][class*="bg-white"][class*="border"] {
  background-color: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}

/* グラデ系カード (from-amber-100 等) も 軽くガラス化 */
.bg-gradient-to-br.from-sky-100,
.bg-gradient-to-br.from-amber-100,
.bg-gradient-to-br.from-emerald-100,
.bg-gradient-to-br.from-slate-100,
.bg-gradient-to-r.from-white {
  background-color: rgba(255, 255, 255, 0.45) !important;
  background-image: none !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

/* race-row hit (★ 的中) は 金縁 + 金 ハイライト を 維持 */
.race-row.race-row-w6-hit {
  background-color: rgba(255, 251, 235, 0.65) !important;
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
}

/* テーブル — 透けすぎないよう 少し濃く */
table.bg-white,
.overflow-x-auto.bg-white {
  background-color: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* テーブルヘッダー — 視認性のため 少し濃く */
thead.bg-slate-50, thead .bg-slate-50,
tr.bg-slate-50 {
  background-color: rgba(248, 250, 252, 0.78) !important;
}

/* 入力フォーム / select も 少し透過 */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
select, textarea {
  background-color: rgba(255, 255, 255, 0.65) !important;
}

/* ナビゲーション (上部) — 不透明 で 重要情報 維持 */
.nav-bar, nav.nav-bar {
  background-color: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}

/* 大穴戦略 採用バナー — 強調維持で 透過控えめ */
#anaana_strike_banner {
  background-color: rgba(240, 249, 255, 0.65) !important;
  background-image: none !important;
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
}

/* チャットウィジェット (浮遊) — 強めの ガラス効果 (背景馬 透けて見える) */
#chat-panel,
#chat-inline {
  background-color: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

/* チャットの 内部要素 (header / messages / input-area) も 背景透過 */
#chat-panel .chat-header,
#chat-inline .chat-header,
#chat-panel .chat-messages,
#chat-inline #inline-chat-messages,
#chat-panel .chat-input-area,
#chat-inline > div:last-child {
  background-color: transparent !important;
}

/* AI メッセージバブル — 視認性 確保 (薄白) */
.chat-bubble.ai {
  background-color: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ユーザーメッセージバブル — シアン色 そのまま (透けない) */
.chat-bubble.user {
  background-color: var(--c-brand) !important;
}

/* チャット入力欄 — 視認性のため 少し 濃い */
#chat-input, #inline-chat-input, #prediction-chat-input {
  background-color: rgba(255, 255, 255, 0.65) !important;
}

/* FAB (浮遊ボタン) は シアン そのまま */
#chat-fab {
  background-color: var(--c-brand) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ガラス効果 が 効かない 古い ブラウザ 用 fallback */
@supports not (backdrop-filter: blur(1px)) {
  section.border-b.bg-white,
  .race-row,
  [class*="rounded-xl"][class*="bg-white"] {
    background-color: rgba(255, 255, 255, 0.85) !important;
  }
}

/* ============================================
   MOBILE OVERFLOW FIX (2026-05-08)
   - 横幅固定 / オーバーフロー の防止
   ============================================ */
@media (max-width: 767px) {
  /* テーブル を 横スクロール (内部) — body 自体は scroll しない */
  .overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* 大きい table を内包する 親 wrapper の はみ出し防止 */
  table {
    max-width: 100%;
    table-layout: auto;
  }

  /* 固定幅セル (td/th min-w-[XXpx]) を モバイルで 緩和 */
  td.min-w-\[140px\], th.min-w-\[140px\] { min-width: 100px !important; }
  td.max-w-\[140px\], th.max-w-\[140px\] { max-width: 100px !important; }
  td.min-w-\[68px\], th.min-w-\[68px\] { min-width: 50px !important; }

  /* 巨大カード (KPI 等) の 横スクロール 親 */
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* グリッド 子要素 の minmax 安全策 */
  .grid > * { min-width: 0; }

  /* 投資/回収 等 数字並び の 行 が 横はみ出すのを防ぐ */
  .flex.items-center.gap-6 { gap: 1rem; flex-wrap: wrap; }
  .flex.items-center.gap-4 { flex-wrap: wrap; }

  /* PC 専用 sticky 等 で width 固定が モバイルで漏れないか 確認 */
  .lg\:sticky { position: static !important; }
}

/* PC でも overflow-x を抑える カード 内部要素 */
.race-row, .prediction-card, .ui-card,
[class*="rounded-xl"][class*="bg-white"] {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================
   KPI ふわっとアニメーション (2026-05-08)
   ============================================ */

/* 初回ロード: opacity 0→1 + translateY 10px→0 */
@keyframes kpiReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 値更新時: soft pulse + 金色グロー */
@keyframes kpiPulse {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
  30%  { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
}

/* カウントアップ中の subtle なグロー */
@keyframes kpiCountingGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 6px rgba(245, 158, 11, 0.35); }
}

/* data-stat-key を持つ要素 = 初期状態 透明 */
[data-stat-key] {
  opacity: 0;
  transform: translateY(10px);
  display: inline-block;
  transform-origin: center;
  transition: filter 0.3s ease;
}

/* 「reveal」クラスがついた瞬間に kpiReveal アニメ実行 */
[data-stat-key].kpi-reveal {
  animation: kpiReveal 0.5s ease-out forwards;
  animation-delay: var(--kpi-delay, 0ms);
}

/* カウントアップ進行中 はグロー */
[data-stat-key].kpi-counting {
  animation: kpiCountingGlow 0.6s ease-in-out infinite;
}

/* 値が変化した瞬間 に pulse */
[data-stat-key].kpi-pulse {
  animation: kpiPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* JS 無効時 fallback: 2 秒後に 強制 fade-in (JS 動作時 は kpi-reveal が 先に 当たって 再生されない) */
@keyframes kpiFallbackReveal {
  to { opacity: 1; transform: translateY(0); }
}
[data-stat-key]:not(.kpi-reveal) {
  animation: kpiFallbackReveal 0.4s ease-out 2s forwards;
}

/* モーション削減 設定 を尊重 */
@media (prefers-reduced-motion: reduce) {
  [data-stat-key], [data-stat-key].kpi-reveal, [data-stat-key].kpi-pulse {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}