@charset "UTF-8";

/* ============================================================
   ui2026.css — たられ馬.com UI基盤（2026-08 新設）

   【このファイルの方針】
   収録するのは「デザイントークン」と「共通部品」のみ。

   - body / html などのベーススタイルは置かない。
     移行期は style2026.css と併読されるため、ベースを上書きすると
     既存ページ全体にデグレが波及する。トークンは参照されない限り
     無害なので、併読しても安全。
   - Google Fonts の @import はしない。
     style2026.css 側で既に読み込み済み。二重読み込みを避ける。
   - クラス名は .tb- プレフィックスで統一。
     style2026.css には .tb- 系の定義が存在しないため衝突しない。

   トークンの出自: design/20260425_refresh-v3/assets/colors_and_type.css
   ============================================================ */

:root {
  /* ---------- Brand Greens (primary) ---------- */
  --tb-green-900: #1b5e20;
  --tb-green-700: #2e7d32;   /* ブランドの基準色 */
  --tb-green-500: #4caf50;
  --tb-green-300: #8bc34a;
  --tb-green-050: #e8f5e9;
  --tb-green-legacy: #316900; /* 2006年代からのメニュー緑 */

  /* ---------- Accents ---------- */
  --tb-orange-700: #e65100;
  --tb-orange-500: #ff9800;   /* 投票 / CTA */
  --tb-yellow-500: #ffd54f;
  --tb-yellow-050: #fff8e1;

  /* ---------- Data Colors (waku / marks / ranks) ---------- */
  --tb-crimson:  #d32f2f;     /* ◎ / 1位 */
  --tb-navy:     #1a237e;     /* ○ / レース名 */
  --tb-darkblue: #1565c0;     /* 的中ランキング見出し */
  --tb-purple:   #7b1fa2;     /* JSA */
  --tb-brown:    #a52a2a;
  --tb-dark:     #424242;

  /* ---------- Neutrals ---------- */
  --tb-bg:       #f5f5f5;
  --tb-surface:  #ffffff;
  --tb-ink:      #212121;
  --tb-ink-2:    #757575;
  --tb-line:        #e0e0e0;  /* 区切り線（面の上）*/
  --tb-line-strong: #bdbdbd;  /* 枠線（白背景の上で視認できる濃さ）*/
  --tb-alt-1:    #fafaf5;     /* 奇数行 */
  --tb-alt-2:    #f0f0f8;     /* 偶数行 */
  --tb-tint-lemon: #f9fbe7;

  /* ---------- Waku (枠番) colors — 競馬標準 ---------- */
  --tb-waku-1-bg: #ffffff; --tb-waku-1-fg: #000000;
  --tb-waku-2-bg: #222222; --tb-waku-2-fg: #ffffff;
  --tb-waku-3-bg: #e53935; --tb-waku-3-fg: #ffffff;
  --tb-waku-4-bg: #1e88e5; --tb-waku-4-fg: #ffffff;
  --tb-waku-5-bg: #fdd835; --tb-waku-5-fg: #000000;
  --tb-waku-6-bg: #43a047; --tb-waku-6-fg: #ffffff;
  --tb-waku-7-bg: #fb8c00; --tb-waku-7-fg: #000000;
  --tb-waku-8-bg: #f06292; --tb-waku-8-fg: #000000;

  /* ---------- Semantic tokens ---------- */
  --tb-fg-1: var(--tb-ink);
  --tb-fg-2: var(--tb-ink-2);
  --tb-fg-on-brand: #ffffff;
  --tb-link: var(--tb-green-700);
  --tb-link-hover: var(--tb-green-900);

  /* ---------- Typography ---------- */
  --tb-font-jp: 'Noto Sans JP', 'M PLUS 1p', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --tb-font-legacy: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', sans-serif;
  --tb-font-mono: 'Menlo', 'Consolas', monospace;

  --tb-fs-xs:   12px;
  --tb-fs-sm:   13px;
  --tb-fs-md:   14px;
  --tb-fs-base: 15px;
  --tb-fs-lg:   16px;
  --tb-fs-xl:   18px;
  --tb-fs-2xl:  22px;
  --tb-fs-3xl:  28px;

  --tb-lh-tight: 1.4;
  --tb-lh-body:  1.8;

  --tb-letter-tight: .02em;
  --tb-letter-body:  .03em;

  --tb-weight-regular: 400;
  --tb-weight-medium:  500;
  --tb-weight-bold:    700;

  /* ---------- Spacing / radii / shadow / motion ---------- */
  --tb-radius-sm: 4px;
  --tb-radius:    8px;
  --tb-radius-lg: 12px;
  --tb-radius-pill: 20px;

  --tb-shadow-sm: 0 1px 3px rgba(0,0,0,.12);
  --tb-shadow-md: 0 4px 12px rgba(0,0,0,.10);

  --tb-transition: .2s ease;
  --tb-maxw: 960px;

  --tb-space-1: 4px;
  --tb-space-2: 8px;
  --tb-space-3: 12px;
  --tb-space-4: 16px;
  --tb-space-5: 20px;
  --tb-space-6: 24px;
  --tb-space-8: 32px;

  /* ---------- Signature gradient ---------- */
  --tb-grad-brand: linear-gradient(135deg, var(--tb-green-900), var(--tb-green-700));
}

/* ============================================================
   共通部品: 大会モード切替タブ
   （黒3連単 / GP3連単 / GP単勝）

   見た目は 2026-08-11 の改修前にトップページ「あなたの総合順位」欄で
   使っていた kt-chip をそのまま引き継いだもの。旧定義は style2026.css
   （`.you-now-hero .col h4 .kt-chip` 等）にスコープ付きで現存する。
   選択中は大会に関わらず黒地・黄文字で統一する。

   幅は3つ合計で183pxに収まるため、✕ボタンが並ぶ埋め込み時でも
   320px 幅の端末で1行に入る（折り返し対策が不要な寸法）。
   ============================================================ */

/* flex + gap で組む。行方向の余白も gap で効かせておく
   （将来ラベルが伸びて折り返した場合に行同士が接触しないように）。 */
.tb-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: var(--tb-space-2) 0 var(--tb-space-3);
}

/* 既に余白を持つ親（.ab-topbar など）の中に置くとき用 */
.tb-tabs--flush {
  margin: 0;
}

/* 非選択 = グレー地。選択中の黒地・黄文字を際立たせるため色を主張しない。
   寸法・配色は旧 kt-chip の実値をそのまま踏襲する（トークン化しない）。 */
.tb-tab {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 10px;
  background: #999;
  color: #fff;
  font-size: 11px;
  font-weight: var(--tb-weight-bold);
  letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--tb-transition);
}

.tb-tab:hover {
  background: #6b6b6b;
  color: #fff;
  text-decoration: none;
}

.tb-tab.is-active {
  background: #1a1a1a;
  color: #ffd54a;
}

/* ---------- 大会識別クラス（配色なし） ----------
   .tb-tab--kuro / --gp3 / --gptan には配色を持たせない。
   選択中は大会に関わらず黒地・黄文字に統一する方針のため。
   クラス自体はマークアップ側に「どの大会のタブか」の手掛かりとして残してある
   （大会別に色を分けたくなったとき、ここに定義を足すだけで戻せる）。 */

/* ---------- モバイル幅 ----------
   デスクトップは旧デザインどおり19px高のまま維持し、指で押す端末でだけ
   縦paddingを広げて31pxにする。横幅は変わらないので1行のまま収まる。 */
@media (max-width: 480px) {
  .tb-tab {
    padding: 8px 9px;
  }
}

/* ============================================================
   共通部品: 結果系チップの色替え（.chip のモディファイア）

   トップページのレース行に並ぶチップは役割が2種類ある。
     ・レース前の情報 … AI予想 / My新聞 / 予想一覧 → 既存のオレンジのまま
     ・確定した結果   … 結果 / 総合順位           → こちらを水色にする
   暖色=これから / 寒色=確定済み という対応で読み分けられるようにする。

   .chip 本体の定義は style2026.css:3413（.home-races スコープ）にあり、
   そちらには書き足さない方針のため、ここで色だけ上書きする。
   詳細度は .home-races .chip (0,2,0) に対して (0,3,0) なので確実に勝つ。
   明度・彩度はオレンジ側と対になるよう Material の同じ段を選んでいる。
   ============================================================ */

.home-races .chip.tb-chip--result {
  color: #01579b;
  background: #cfe9fb;
  border-color: #4fc3f7;
}

.home-races .chip.tb-chip--result:hover {
  background: #bfe1f8;
}

/* ============================================================
   ランキング表の幅を見出しに揃える

   外側 table.total-rank-table に幅指定が無く、内側テーブルの width="100%"
   と循環して shrink-to-fit に落ちていた。実測で見出しバー901px に対し
   テーブル447px となり、右半分が空いていた。

   対象は .total-rank-table を使う4ページのみ（RaceResultListAct /
   TotalResultListAct / TGPTotalRank / TgpWinTotalRank）。
   入れ子テーブル自体は解体しない。外側の td.border2 が
   `display:block; overflow-x:auto`（style2026.css:1357）として
   狭い画面での横スクロール容器を担っており、剥がすとそれが壊れるため。
   ============================================================ */

.total-rank-table {
  width: 100%;
}

/* ============================================================
   #data の入れ子スクロールを直リンク時だけ解除

   `#data` には `max-height:680px; overflow-y:auto`（style2026.css:990）が
   付いており、ページ全体もスクロールするのに枠の中でもスクロールする
   状態になっていた。実測で中身964〜1322px に対し枠680px。

   ただし上限を一律で外すのは誤り。これらのページはレース行の下に
   埋め込まれて開くため、上限が「次のレース行までの距離」を一定に
   保つ役割を果たしている。長い予想一覧を全部スクロールしないと
   次のレースに進めなくなってしまう。

   そこで下にフッタしか無い直リンク表示のときだけ解除する。
   クラスは embed=1 でないときにCGI側が付ける。
   詳細度は #data (1,0,0) に対し #data.tb-data-full (1,1,0) で勝つ。
   横方向の overflow-x は狭い画面用に必要なので触らない。
   ============================================================ */

#data.tb-data-full {
  max-height: none;
}

/* overflow-y は指定しない。overflow-x が auto のとき overflow-y:visible は
   CSS の規定で auto に強制されるため、書いても宣言どおりにはならない。
   高さ上限が無ければスクロールするものが無く、実測でもバーは出ない。 */

/* ============================================================
   共通部品: レース結果の上位3頭（podium）

   トップページ「前回の結果」の見た目を部品化したもの。
   元の定義は style2026.css:3840- にあるが `.you-now-hero .podium ...` と
   完全にスコープされていて他ページから使えなかったため、ここに起こす。

   列は 着順 / 馬番 / 馬名 / オッズ（+ 任意で基礎ポイント）。
   pt 列の有無で列数が変わるので、grid ではなく行ごとの指定にしている。

   index.cgi 側はまだ移行していない（一番目立つブロックなので、この部品が
   実地で問題ないと確認できてから載せ替える）。それまで同じ見た目の定義が
   style2026.css と2箇所に存在する。
   ============================================================ */

/* 基底は行の並びだけを持つ。カードの装飾は .tb-podium--card に分けてある。
   トップページの「前回の結果」は既にヒーロー枠の中にあり、装飾を被せると
   枠が二重になるため、あちらは基底のまま使う。 */
.tb-podium {
  display: flex;
  flex-direction: column;
}

/* 単独で置くとき用のカード装飾（レース別結果の2ページで使用）。
   max-width が無いと、中央寄せの器を持たない TGPRaceSummary で画面幅いっぱいに
   伸び、馬名とオッズが左右に離れて読みづらくなる。 */
.tb-podium--card {
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  padding: 8px 12px;
  max-width: 640px;
}

.tb-podium .row {
  display: grid;
  grid-template-columns: 32px 32px 1fr auto;
  gap: 8px;
  font-size: var(--tb-fs-sm);
  line-height: var(--tb-lh-tight);
  align-items: center;
  padding: 3px 0;
}

.tb-podium .row .pos {
  font-family: var(--tb-font-mono);
  font-weight: var(--tb-weight-bold);
  text-align: center;
}

.tb-podium .row.r1 .pos { color: var(--tb-crimson); font-size: var(--tb-fs-base); }
.tb-podium .row.r2 .pos { color: var(--tb-navy); }
.tb-podium .row.r3 .pos { color: var(--tb-brown); }

.tb-podium .row .nm { font-weight: var(--tb-weight-medium); }

.tb-podium .row .od {
  font-family: var(--tb-font-mono);
  color: var(--tb-ink-2);
  font-size: var(--tb-fs-xs);
}

/* 馬番。枠色が不明なときの既定（白地・グレー枠） */
.tb-podium .row .waku {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 18px;
  font-family: var(--tb-font-mono);
  font-size: 11px;
  font-weight: var(--tb-weight-bold);
  color: #333;
  background: #fff;
  border: 1px solid #999;
  border-radius: 2px;
  line-height: 1;
}

/* 枠色（1〜8）。競馬標準の配色トークンを当てる */
.tb-podium .row .waku.waku-1 { background: var(--tb-waku-1-bg); color: var(--tb-waku-1-fg); border-color: #999; }
.tb-podium .row .waku.waku-2 { background: var(--tb-waku-2-bg); color: var(--tb-waku-2-fg); border-color: var(--tb-waku-2-bg); }
.tb-podium .row .waku.waku-3 { background: var(--tb-waku-3-bg); color: var(--tb-waku-3-fg); border-color: var(--tb-waku-3-bg); }
.tb-podium .row .waku.waku-4 { background: var(--tb-waku-4-bg); color: var(--tb-waku-4-fg); border-color: var(--tb-waku-4-bg); }
.tb-podium .row .waku.waku-5 { background: var(--tb-waku-5-bg); color: var(--tb-waku-5-fg); border-color: #c9a300; }
.tb-podium .row .waku.waku-6 { background: var(--tb-waku-6-bg); color: var(--tb-waku-6-fg); border-color: var(--tb-waku-6-bg); }
.tb-podium .row .waku.waku-7 { background: var(--tb-waku-7-bg); color: var(--tb-waku-7-fg); border-color: var(--tb-waku-7-bg); }
.tb-podium .row .waku.waku-8 { background: var(--tb-waku-8-bg); color: var(--tb-waku-8-fg); border-color: var(--tb-waku-8-bg); }

/* 払戻（単勝 / 三連単）。上位3頭の下に置く */
.tb-podium-pay {
  margin-top: 6px;
  font-size: var(--tb-fs-xs);
  color: var(--tb-ink-2);
  display: flex;
  gap: var(--tb-space-3);
  flex-wrap: wrap;
}

/* 区切り線はカード装飾の一部。トップページ側には元々無いので基底には持たせない */
.tb-podium--card .tb-podium-pay {
  padding-top: 6px;
  border-top: 1px solid var(--tb-line);
}

.tb-podium-pay b {
  color: var(--tb-crimson);
  font-family: var(--tb-font-mono);
}

/* ============================================================
   共通部品: 軽量テーブルヘッダ

   TGPRaceSummary の的中者テーブルは、セクション見出しと列見出しの2段が
   どちらも濃いグレー(#424242)地・白文字で、情報量のわりに黒い帯が
   2本続いて重かった。同じページのレース結果カード（白地・薄い区切り線）や
   RaceResultListAct の的中ランキング軽量版に合わせて薄くする。

   既存の .datatitle2 / .datatitle4 は `background:#424242 !important`
   （style2026.css:1637-）を持つため、上書きすると !important 合戦になる。
   そこでマークアップ側のクラスを差し替え、こちらが当たらないようにした。
   既存クラスは他ページで現役なので定義はそのまま残してある。
   ============================================================ */

.tb-th {
  background: #f5f5f5;
  color: var(--tb-ink);
  font-size: var(--tb-fs-xs);
  font-weight: var(--tb-weight-medium);
  padding: 6px 8px;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 「3連単」「単勝」のようなセクション見出し行。1段だけ濃さを足して区別する */
.tb-th--section {
  background: #eeeeee;
  font-weight: var(--tb-weight-bold);
  font-size: var(--tb-fs-sm);
}

/* ============================================================
   TGPRaceSummary の的中者テーブルをカード化

   「3連単」「単勝」の2つの表に外枠が無く、どこまでが1つの表なのか
   分かりにくかった。上のレース結果カード（.tb-podium）と同じ
   「白地・薄い枠線・角丸」で、それぞれを1枚のカードにする。

   角丸は overflow:hidden でクリップする方式にしている。
   下端の角を border-radius で個別指定する手もあるが、
   `.tgp-hitbox-pair td.border2 > table tr:nth-child(n+2) td` が
   `border-radius:0 !important`（style2026.css:1627）を持っていて
   詳細度では勝てず、!important を使わない方針のため。

   セル間の区切り線（rgba(0,0,0,.1) の下罫線）は既存のまま活かす。
   ============================================================ */

.tgp-hitbox-pair td.border2 > table {
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  overflow: hidden;
}

/* ============================================================
   未ログイン向けのサイト紹介（トップの最上部）

   常連には不要なので、CGI 側で $user_id <= 0 のときだけ出力している。
   ページ下部の #site-intro（予想大会の詳しい説明）とは役割が別で、
   こちらは「何のサイトか」を数行で伝えるだけ。
   下に続く「大会をえらぶ」「レース絞込」と同じ枠のテイストに揃えつつ、
   読みものだと分かるように左に緑のラインを立てている。
   ============================================================ */

.tb-lead {
  border: 1px solid #e0d6c2;
  border-left: 4px solid var(--tb-green-700);
  border-radius: var(--tb-radius);
  background: var(--tb-surface);
  padding: 12px 14px;
  margin: 14px 0 8px;
}

.tb-lead p {
  margin: 0 0 4px;
  font-size: var(--tb-fs-sm);
  line-height: var(--tb-lh-body);
  color: var(--tb-ink);
}

.tb-lead p:last-child {
  margin-bottom: 0;
}

.tb-lead b {
  font-weight: var(--tb-weight-bold);
  color: var(--tb-green-900);
}

/* 最終行は登録への導線。少しだけ弱めて、本文と役割を分ける */
.tb-lead-cta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--tb-line);
  color: var(--tb-ink-2);
}

.tb-lead-cta a {
  margin-left: 6px;
  font-weight: var(--tb-weight-bold);
  color: var(--tb-link);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .tb-lead {
    padding: 10px 12px;
  }
  .tb-lead-cta a {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ============================================================
   共通部品: 大会えらびボックス

   トップページの大会切替タブに「何をする場所か」と「いま何を見ているか」を
   添えるための枠。すぐ下にある「レース絞込」（style2026.css:3105-）と
   同じ見た目（白地・薄茶枠・角丸8px・浮き出し見出し）に揃えてある。

   タブを押すと切り替わるのは成績まわりだけ
   （総合ランキングTOP5 / ランキング全体→ / もっと詳しく→ /
     各レース行の「結果」「総合順位」の遷移先）。
   予想一覧・My新聞・AI予想は大会に関係なく共通なので、
   文言では「成績」と限定して言い切らないようにしている。
   ============================================================ */

.tb-modebox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tb-space-2);
  padding: 12px 10px 8px;
  border: 1px solid #e0d6c2;
  border-radius: var(--tb-radius);
  background: var(--tb-surface);
  margin: 14px 0 8px;
}

/* 枠線に重ねる見出し（fieldset の legend 相当） */
.tb-modebox-label {
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--tb-surface);
  padding: 0 6px;
  font-size: var(--tb-fs-xs);
  color: var(--tb-ink);
  line-height: 1;
  white-space: nowrap;
}

/* 「◯◯の成績を表示中」。右寄せにして、タブとの役割の違いを見た目でも分ける */
.tb-modebox-status {
  margin-left: auto;
  font-size: var(--tb-fs-xs);
  color: var(--tb-ink-2);
}

.tb-modebox-status b {
  color: var(--tb-ink);
  font-weight: var(--tb-weight-bold);
}

/* 狭い画面では右寄せをやめて、タブの下に回り込ませる */
@media (max-width: 480px) {
  .tb-modebox {
    padding: 12px 8px 8px;
  }
  .tb-modebox-status {
    margin-left: 0;
    width: 100%;
  }
}

/* ============================================================
   旧レイアウト用の外枠テーブルを「親の幅で決まる」ようにする

   古いページは本文全体を <table><tr><td> 1セルで包んでいる。テーブルは
   内容にあわせて広がるため、中の #data の width:100% が決まらず
   overflow-x:auto が働かない。結果、横に長い表があるとページ全体が
   溢れる（My新聞は 375px 幅の端末でページが 546px になっていた）。

   width:100% + table-layout:fixed でセル幅を親基準に固定すると、
   #data が横スクロール容器として機能し、表の中だけがスクロールする。

   外枠の td[bgcolor="#999999"] 自体は style2026.css で約20ルールの
   フックになっている（My新聞・AI予想の罫線や余白を支えている）ため、
   div へ置き換えてはいけない。置き換えたら罫線が 0px→2px に太くなった。
   ============================================================ */

.tb-fluid-frame {
  width: 100%;
  table-layout: fixed;
}

/* #data の先頭に来る見出しの上余白を殺す。
   .h2bar は margin-top:18px を持つ（style2026.css:4032）。#data の直後に
   置かれると、その18pxぶんカードとの間隔が他ページより広くなる。
   TGPRaceSummary 側の見出し（h4・margin-top:0）に揃える。
   #data の外に置かれている .h2bar（総合ランキング系）には当たらない。 */
#data > .h2bar:first-child {
  margin-top: 0;
}

/* 同着など、払戻の補足。滅多に出ないので控えめに。 */
.tb-podium-note {
  margin-top: 4px;
  font-size: var(--tb-fs-xs);
  color: var(--tb-ink-2);
}

.tb-podium-pay .mini-tag {
  display: inline-block;
  padding: 1px 8px;
  background: var(--tb-tint-lemon);
  border-radius: 3px;
  letter-spacing: .05em;
  color: var(--tb-ink-2);
}