@charset "UTF-8";

/* ============================================================
   style2026.css  -  たられ馬.com  Modern Redesign
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=M+PLUS+1p:wght@400;500;700&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --color-primary:    #2e7d32;
  --color-primary-dk: #1b5e20;
  --color-primary-lt: #4caf50;
  --color-accent:     #ff9800;
  --color-accent-dk:  #e65100;
  --color-bg:         #f5f5f5;
  --color-surface:    #ffffff;
  --color-text:       #212121;
  --color-text-sub:   #757575;
  --color-border:     #e0e0e0;
  --color-crimson:    #d32f2f;
  --color-navy:       #1a237e;
  --font-main:        'Noto Sans JP', 'M PLUS 1p', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --radius:           8px;
  --shadow-sm:        0 1px 3px rgba(0,0,0,.12);
  --shadow-md:        0 4px 12px rgba(0,0,0,.10);
  --max-width:        960px;
  --transition:       .2s ease;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  letter-spacing: .03em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-primary-dk);
  text-decoration: underline;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

/* ---------- Layout Container ---------- */
#top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0;
  background: none;
}

/* ---------- Header ---------- */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--color-primary-dk), var(--color-primary));
  color: #fff;
}

#header img {
  max-height: 60px;
  width: auto;
}

#header table { border: none !important; width: 100%; table-layout: fixed; }
#header td    { border: none !important; padding: 4px; vertical-align: middle; }
#header td:first-child { width: 240px; min-width: 240px; }

/* -- Header login block (未ログイン時) -- */
.header-login {
  text-align: right;
}
.header-login-msg {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
}
.header-login-msg a {
  color: #ffd54f;
  font-weight: 700;
}
.header-login-msg a:hover {
  color: #ffecb3;
}
.header-login form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.header-login label {
  font-size: 12px;
  color: #ffd54f;
  white-space: nowrap;
}

#header form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

#header input[type="text"],
#header input[type="password"] {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-family: var(--font-main);
  background: rgba(255,255,255,.9);
  color: var(--color-text);
  outline: none;
  transition: box-shadow var(--transition);
}
#header input[type="text"]:focus,
#header input[type="password"]:focus {
  box-shadow: 0 0 0 2px var(--color-accent);
}

#header input[type="submit"] {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
#header input[type="submit"]:hover {
  background: var(--color-accent-dk);
  transform: translateY(-1px);
}

/* Login-state badge */
.view_login {
  display: inline-block;
  background: rgba(255,255,255,.15);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}
.view_login b { color: var(--color-accent); }

/* ---------- Navigation ---------- */
#menu {
  width: 100%;
  background: var(--color-primary-dk);
  margin-top: 0;
  float: none;
  position: relative;
}

/* Hamburger button (mobile only) */
.hamburger-btn {
  display: none;           /* hidden on PC */
  background: none;
  border: none;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-main);
  align-items: center;
  gap: 8px;
}
.hamburger-btn .hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
}
.hamburger-icon span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.9);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
/* Animate to X when open */
.hamburger-btn.is-open .hamburger-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger-btn.is-open .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-open .hamburger-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

#menu ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

#menu li a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
#menu li a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
}

#menu .active {
  background: var(--color-surface);
  border-radius: var(--radius) var(--radius) 0 0;
}
#menu .active a {
  color: var(--color-primary-dk);
  font-weight: 700;
}
#menu .active a:hover {
  color: var(--color-primary-dk);
  text-decoration: none;
}

/* ---------- Contents Area ---------- */
#contents {
  float: none;
  width: 100%;
  padding: 20px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* ---------- Buttons (generic) ---------- */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  display: inline-block;
  padding: 8px 18px;
  margin: 4px 4px 4px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* 「最近のレース」ボタン：薄い緑で少し目立たせる */
input.btn-recent {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #2e7d32;
}

/* Period form selects */
form[name="raceForm"] select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  background: #fff;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition);
}
form[name="raceForm"] select:focus {
  border-color: var(--color-primary);
}

/* Styled button for history link */
input[type="button"][style*="background-color:#ddddff"] {
  background: #e8eaf6 !important;
  color: var(--color-navy) !important;
  border: 1px solid #c5cae9 !important;
  border-radius: var(--radius) !important;
}
input[type="button"][style*="background-color:#ddddff"]:hover {
  background: #c5cae9 !important;
}

/* ---------- Race List Table ---------- */
table[cellspacing="0"][cellpadding="1"][border="0"] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table header row */
td.datatitle2 {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
}
td.datatitle2:first-child {
  border-radius: var(--radius) 0 0 0;
}
td.datatitle2:last-child {
  border-radius: 0 var(--radius) 0 0;
}

/* Alternating row colors */
td.value1 {
  background: #fafaf5 !important;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
td.value2 {
  background: #f0f0f8 !important;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

/* Race name */
.top_race_name {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-main);
  color: var(--color-navy);
  display: inline;
  line-height: 1.4;
}

/* Race memo (date, time) */
.top_race_memo_xs {
  font-size: 12px;
  font-family: var(--font-main);
  color: var(--color-text-sub);
  display: inline;
}

.top_race_memo_s {
  font-size: 13px;
  font-family: var(--font-main);
  color: var(--color-text-sub);
  display: inline;
}

/* 投票人数の数字（奇数・偶数行でサイズを統一） */
p.top_race_memo_s font[color="crimson"] b {
  font-size: 15px !important;
}

/* Race icon buttons */
td.value1 img,
td.value2 img {
  border-radius: 4px;
  transition: transform var(--transition), box-shadow var(--transition);
}
td.value1 img:hover,
td.value2 img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

/* ---------- Main Content Area ---------- */
#main {
  float: none;
  width: 100%;
}

#main h2 {
  margin: 24px 0 12px;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-dk), var(--color-primary));
  border-radius: var(--radius);
  line-height: 1.5;
}

.special {
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
  margin-left: 0;
  color: #fff;
}

#main h3 {
  margin: 16px 0 8px;
  padding-left: 8px;
  font-size: 16px;
  font-weight: 500;
  border-left: 4px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

#main p {
  margin: 0 0 1em;
  line-height: 1.8;
}

#main dt {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--color-primary-dk);
}

#main dd {
  margin: 0 0 12px 0;
  padding: 10px 14px;
  background: #f9fbe7;
  border-radius: var(--radius);
  border-left: 3px solid var(--color-primary-lt);
}

#main a {
  color: var(--color-primary);
}
#main a:hover {
  color: var(--color-primary-dk);
}

#main table {
  width: 100%;
  border-collapse: collapse;
}
#main table th {
  padding: 8px 10px;
  font-size: 13px;
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-border);
}
#main table td {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--color-border);
}

/* ---------- Sub / Sidebar ---------- */
#sub {
  float: none;
  width: 100%;
}

/* ---------- Page Top Link ---------- */
#pageTop {
  clear: both;
  text-align: right;
  padding: 12px 0;
  font-size: 13px;
}
#pageTop a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-sub);
}
#pageTop a:hover { color: var(--color-primary); }

/* ---------- Footer ---------- */
#footMenu {
  float: none;
  width: 100%;
}

#footer {
  clear: both;
  width: 100%;
  padding: 16px 20px;
  text-align: center;
}

.copyright {
  font-size: 13px;
  color: var(--color-text-sub);
  letter-spacing: .05em;
}

/* ---------- Summary Table (BEST3) ---------- */
td.value1 table,
td.value2 table {
  border-collapse: collapse;
  width: auto;
}
td.value1 table td,
td.value2 table td {
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
}
td.value1 table td[bgcolor="#eeeeee"],
td.value2 table td[bgcolor="#eeeeee"] {
  background: #f5f5f5 !important;
  font-weight: 500;
  color: var(--color-text-sub);
}
td.value1 table td[bgcolor="#ffffff"],
td.value2 table td[bgcolor="#ffffff"] {
  background: #fff !important;
}
td.value1 table td[bgcolor="#cccccc"],
td.value2 table td[bgcolor="#cccccc"] {
  background: transparent !important;
  border: none;
  padding: 4px 0;
}

/* ---------- Legacy Font Overrides ---------- */
font[color="white"]  { color: rgba(255,255,255,.9) !important; }
font[color="yellow"] { color: #ffeb3b !important; }
font[color="red"]    { color: var(--color-crimson) !important; }
font[color="crimson"]{ color: var(--color-crimson) !important; }
font[color="darkblue"] { color: var(--color-navy) !important; }
font[color="orange"] { color: var(--color-accent) !important; }
font[color="#666666"] { color: var(--color-text-sub) !important; }

font[size="1"] { font-size: 12px !important; }
font[size="2"] { font-size: 14px !important; }
font[size="3"] { font-size: 16px !important; }

/* ---------- Form styling (other pages compat) ---------- */
td.datatitle,
td.datatitle3,
td.datatitle4,
td.datatitle5 {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
}

/* datatitle（無印・濃緑ヘッダ） */
td.datatitle {
  background: #1b5e20 !important;
  color: #fff !important;
}

/* datatitle4（紅色ヘッダ） */
td.datatitle4 {
  background: #a52a2a !important;
  color: #fff !important;
}

td.value3        { background: #fff3e0 !important; padding: 10px 12px; }
td.value_data    { background: #fff8e1 !important; padding: 10px 12px; }
td.value0        { background: #e8f5e9 !important; padding: 10px 12px; }
span.view_user_name { background: #eeeeee; padding: 2px 8px; border-radius: 4px; }
span.view_select_mode { background: #fce4ec; padding: 2px 8px; border-radius: 4px; }
span.view_admin { background: #ffcdd2; padding: 2px 8px; border-radius: 4px; }
span.akasen { border-bottom: 2px solid var(--color-crimson); }

/* Waku colors (keep as-is for visual correctness) */
td.wakucolor1 { color: #000; background: #fff; }
td.wakucolor2 { color: #fff; background: #222; }
td.wakucolor3 { color: #fff; background: #e53935; }
td.wakucolor4 { color: #fff; background: #1e88e5; }
td.wakucolor5 { color: #000; background: #fdd835; }
td.wakucolor6 { color: #fff; background: #43a047; }
td.wakucolor7 { color: #000; background: #fb8c00; }
td.wakucolor8 { color: #000; background: #f06292; }

/* Yosou / Bet page compat */
p.yosou_mark { font-family: var(--font-main); font-size: 13px; }
p.yosou_comment {
  width: 200px;
  margin: 2px 0;
  padding: 4px 8px;
  font-size: 12px;
  background: #f5f5f5;
  border-radius: 4px;
}
p.yosou_comment_ichiran { margin: 2px 0; padding: 4px 0; font-size: 13px; }
p.wakuban { font-size: 14px; font-family: var(--font-main); }
p.bamei   { margin-left: 5px; font-size: 14px; color: var(--color-text); font-family: var(--font-main); }
p.yosouka_mei { font-size: 13px; font-family: var(--font-main); }

/* ---------- Admin pages compat ---------- */
td.admin_datatitle,
td.admin_title {
  font-size: 13px;
  color: #fff;
  background: #b71c1c;
  padding: 8px 10px;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 768px) {
  body { font-size: 14px; }

  #top {
    padding: 0;
  }

  #header {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 0;
  }
  #header table { width: 100%; table-layout: auto; }
  #header td:first-child { width: auto; min-width: auto; }
  #header table,
  #header table tbody,
  #header table tr,
  #header table td {
    display: block;
    width: 100% !important;
    text-align: left;
  }
  #header td:last-child { margin-top: 8px; }
  .view_login { white-space: normal; }

  /* Hamburger button visible on mobile */
  .hamburger-btn {
    display: flex;
  }

  /* Menu hidden by default on mobile */
  #menu ul {
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  #menu ul.is-open {
    max-height: 500px;  /* enough for all items */
  }
  #menu li a {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  #menu .active {
    border-radius: 0;
  }

  #contents {
    padding: 12px;
    border-radius: 0;
  }


  /* Race list → cards */
  table[cellspacing="0"][cellpadding="1"][border="0"],
  table[cellspacing="0"][cellpadding="1"][border="0"] > tbody,
  table[cellspacing="0"][cellpadding="1"][border="0"] > tbody > tr,
  table[cellspacing="0"][cellpadding="1"][border="0"] > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  /* Hide table header on mobile */
  table[cellspacing="0"][cellpadding="1"][border="0"] > tbody > tr:first-child {
    display: none;
  }

  /* Race row: 2-column grid so ranking links sit beside race info */
  tr.race-row {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 0;
  }
  tr.race-row > td.race-info,
  tr.race-row > td.race-links {
    width: auto !important;
  }
  tr.race-row > td.race-links {
    padding-top: 4px;
    white-space: nowrap;
  }
  tr.race-row > td.race-links img {
    display: inline-block;
    vertical-align: middle;
  }

  td.value1, td.value2 {
    padding: 8px 12px;
  }

  .top_race_name { font-size: 15px; }

  /* Buttons wrap */
  input[type="button"] {
    font-size: 13px;
    padding: 8px 14px;
  }

  form[name="raceForm"] select {
    width: auto;
    margin-bottom: 8px;
  }

  #main h2 { font-size: 16px; padding: 10px 14px; }

  /* Summary table on mobile */
  td.value1 table,
  td.value2 table {
    width: 100%;
  }
  td.value1 table td,
  td.value2 table td {
    display: block;
    width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  #header img { max-height: 36px; }

  #header input[type="text"],
  #header input[type="password"] {
    width: 100%;
    margin-bottom: 4px;
  }

  input[type="button"] {
    width: 100%;
    margin: 4px 0;
  }

  .top_race_name { font-size: 14px; }
  .top_race_memo_xs { font-size: 11px; }

  #main dd { padding: 8px 10px; }
}

/* ============================================================
   BachuListAct.cgi  -  My新聞（馬柱）ページ固有スタイル
   ============================================================ */

/* 外枠コンテナ（グレー背景の td[bgcolor="#999999"] を上書き） */
td[bgcolor="#999999"] {
  background: #f0f0f0 !important;
  border-radius: var(--radius);
  padding: 12px !important;
}

/* My新聞タイトル行 */
td[bgcolor="#999999"] > b {
  font-size: 15px;
  color: var(--color-primary-dk);
}

td[bgcolor="#999999"] > font[color="#ffffff"] {
  color: var(--color-text-sub) !important;
  font-size: 13px;
  line-height: 1.6;
}

/* スクロール領域 */
#data {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 馬柱テーブル（cellspacing="1" のグレー背景テーブル） */
table[bgcolor="#8c8c8c"],
table[bordercolor="#8c8c8c"] {
  border-collapse: separate;
  border-spacing: 2px;
  background: var(--color-border) !important;
  border-radius: var(--radius);
  overflow: hidden;
  table-layout: fixed; /* 各列を固定幅で均等に */
}

/* 枠番・馬番列（1・2列目） */
table[bgcolor="#8c8c8c"] > tbody > tr > td:nth-child(1),
table[bgcolor="#8c8c8c"] > tbody > tr > td:nth-child(2) {
  width: 28px;
  min-width: 28px;
  text-align: center;
}

/* 馬名列（3列目） */
table[bgcolor="#8c8c8c"] > tbody > tr > td:nth-child(3) {
  width: 130px;
  min-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 予想家6列（4列目以降）を均等幅に */
table[bgcolor="#8c8c8c"] > tbody > tr > td:nth-child(n+4) {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  overflow: hidden;
  word-break: break-all;
  text-align: center;
}

/* 馬名セル */
td.value1[nowrap],
td.value1[align="left"] {
  white-space: nowrap;
}

/* 印（◎○▲△☆など）セル
   ※ BachuListAct の馬柱テーブル内のみ対象
      （rankingテーブルへの誤適用を防ぐため table[bgcolor="#8c8c8c"] 配下に限定） */
table[bgcolor="#8c8c8c"] td.value1[align="center"],
table[bgcolor="#8c8c8c"] td.value2[align="center"] {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  min-width: 36px;
}

/* 着順バッジ（[1着][2着][3着]）
   ※ <font size="1" color="..."> の形式のみ対象
      （size="1" がない今回Ptの <font color="blue"> には適用しない） */
td.value1 font[color="red"][size="1"],
td.value1 font[color="blue"][size="1"],
td.value1 font[color="green"][size="1"],
td.value2 font[color="red"][size="1"],
td.value2 font[color="blue"][size="1"],
td.value2 font[color="green"][size="1"] {
  font-size: 11px !important;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
}
td.value1 font[color="red"][size="1"],
td.value2 font[color="red"][size="1"]   { background: #ffebee; }
td.value1 font[color="blue"][size="1"],
td.value2 font[color="blue"][size="1"]  { background: #e3f2fd; }
td.value1 font[color="green"][size="1"],
td.value2 font[color="green"][size="1"] { background: #e8f5e9; }

/* 予想家コメント欄 */
p.yosou_comment {
  width: 100%;
  max-width: 220px;
  margin: 0 0 10px 0;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary-lt);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
}

p.yosou_comment b {
  color: var(--color-primary-dk);
  font-size: 14px;
}

/* 閉じるリンク */
td[valign="top"] > a > img[src*="folder"] {
  border-radius: 4px;
  transition: opacity var(--transition);
}
td[valign="top"] > a > img[src*="folder"]:hover {
  opacity: .7;
}

/* ダミー画像スペーサー非表示 */
img[src*="dummy.gif"] {
  display: none;
}

/* AJAX差し込みエリア（mjax_area）を含む td は目立たせない */
td:has(div[id^="mjax_area"]) {
  padding: 0 !important;
  background: var(--color-surface) !important;  /* transparent だと #menu の緑が透けるので白固定 */
  border-bottom: none !important;
}

/* mjax_area に注入された外枠テーブルを全幅に（右側余白に色が残らないよう） */
div[id^="mjax_area"] > table {
  width: 100%;
}

/* index.cgi サマリ行（BEST3）: summary=off 時は table なし → 行を潰す */
tr:has(> td[colspan="4"]:not(:has(table))) td {
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  border-bottom: none !important;
}

/* 予想家列ヘッダー（4列目以降）のフォントを小さく → 長い名前も折り返し */
table[bgcolor="#8c8c8c"] > tbody > tr > td.datatitle2:nth-child(n+4) {
  font-size: 11px;
  padding: 6px 2px;
  line-height: 1.4;
}

/* 本紙（黄色）ヘッダセル */
td.datatitle2 font[color="yellow"] {
  color: var(--color-accent) !important;
  font-weight: 700;
}

/* ---------- My新聞 レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  td[bgcolor="#999999"] {
    padding: 8px !important;
  }

  #data {
    margin: 0 -8px;
    padding: 0 8px;
  }

  td.datatitle2[width="40"],
  td.datatitle2[align="left"] {
    min-width: 44px;
    font-size: 12px;
    padding: 6px 4px;
  }

  p.yosou_comment {
    max-width: 100%;
  }

  /* 馬柱テーブルは横スクロールで対応 */
  table[bgcolor="#8c8c8c"] {
    font-size: 13px;
  }
}

/* ============================================================
   BetListAct.cgi  -  投票データ一覧ページ固有スタイル
   ============================================================ */

/* 投票テーブル：セル間の線を薄い点線に */
td[bgcolor="#999999"] table.normal[bgcolor="#8c8c8c"] {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
}
td[bgcolor="#999999"] table.normal[bgcolor="#8c8c8c"] td.value1 {
  border: none !important;
  border-bottom: 1px dotted rgba(0,0,0,0.15) !important;
  border-right: 1px dotted rgba(0,0,0,0.15) !important;
}
/* 馬名セル：折り返し禁止 */
td[bgcolor="#999999"] table.normal[bgcolor="#8c8c8c"] td.value1[width="140"] {
  white-space: nowrap !important;
}

/* ユーザ名行：少し濃い背景 */
tr.bet-user-row td.value1 {
  background: #f0efe8 !important;
}

/* ユーザ名（teal → primary色） */
td.value1 font[color="teal"] {
  color: var(--color-primary-dk) !important;
  font-weight: 700;
}

/* コメント（#ff6600 → accent色） */
td.value1 font[color="#ff6600"] {
  color: var(--color-accent-dk) !important;
}

/* 投票一覧テーブル列幅最適化 */
table.bet-list {
  table-layout: auto;
}
/* 全セル：折り返し禁止をデフォルトに */
table.bet-list td.value1 {
  white-space: nowrap !important;
}
/* ラベル列（本命◎：など） */
table.bet-list .bet-label-cell {
  font-size: 13px;
}
/* 馬番列 */
table.bet-list .bet-num-cell {
  text-align: right !important;
  padding-right: 4px !important;
}
table.bet-list .bet-num-cell font[color="crimson"] b {
  font-size: 13px !important;
}
/* コメントセル（rowspan）だけ折り返しOK・左寄せ */
table.bet-list .bet-comment-cell {
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-all;
  min-width: 100px;
}

/* 本命◎ / 対抗○ / 単穴▲ ラベル行 */
td.value1[align="right"],
td.value2[align="right"] {
  font-size: 13px;
  color: var(--color-text-sub);
  white-space: nowrap;
  text-align: right !important;
}

/* crimson bold（投票人数の数字など） — 奇数・偶数行ともに同サイズ */
td.value1 font[color="crimson"] b,
td.value2 font[color="crimson"] b {
  font-size: 15px;
}

/* 区切り線（line_dot.gif テーブルを CSS ボーダーで代替） */
td[colspan="4"] > table[background*="line_dot"],
td[colspan=4]  > table[background*="line_dot"] {
  display: none;
}
td[colspan="4"][align="left"],
td[colspan=4][align="left"] {
  border-top: 1px dashed var(--color-border);
  padding-top: 4px;
}

/* 投票一覧タイトル行 */
td[bgcolor="#999999"] > b {
  font-size: 15px;
  color: var(--color-primary-dk);
}

/* 自信度表示 */
td.value1[width="180"] > b,
td.value1[align="left"] > b,
td.value2[width="180"] > b,
td.value2[align="left"] > b {
  font-size: 13px;
  background: #fff8e1;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--color-accent-dk);
}

/* ---------- 投票一覧 レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  /* 投票テーブル・AI予想・馬柱：テーブルレイアウトを維持して横スクロールで対応
     （#data が overflow-x: auto のため、はみ出す分はスクロール可能） */
  table[bgcolor="#8c8c8c"] {
    display: table !important;
    width: auto !important;
    table-layout: auto !important;
    white-space: nowrap;
  }
  table[bgcolor="#8c8c8c"] > tbody {
    display: table-row-group !important;
  }
  table[bgcolor="#8c8c8c"] tr {
    display: table-row !important;
  }
  table[bgcolor="#8c8c8c"] td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
  }

  /* コメント列（rowspan あり）は折り返しを許可 */
  table[bgcolor="#8c8c8c"] td[rowspan] {
    white-space: normal;
    min-width: 100px;
    max-width: 180px;
    font-size: 12px;
  }

  /* セルをコンパクトに */
  table[bgcolor="#8c8c8c"] td.datatitle2,
  table[bgcolor="#8c8c8c"] td.value1,
  table[bgcolor="#8c8c8c"] td.value2 {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* ============================================================
   RaceResultListAct.cgi  -  レース結果ページ固有スタイル
   ============================================================ */

/* レース結果ヘッダ (datatitle3) */
td.datatitle3 {
  background: var(--color-primary) !important;
  color: #fff !important;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* 的中ランキングヘッダ (datatitle5) */
td.datatitle5 {
  background: #1565c0 !important;
  color: #fff !important;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* border1 / border2：横スクロール可能なコンテナとして機能させる */
td.border1,
td.border2 {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding: 0;
}

/* border1 / border2 内テーブルは折り返さない（横スクロール前提） */
td.border1 table,
td.border2 table {
  white-space: nowrap;
}

/* ---------- レース結果 レスポンシブ ---------- */
@media screen and (max-width: 768px) {

  /* 外枠の2列テーブル（折りたたみリンク ＋ コンテンツ）を縦積みに */
  td[bgcolor="#8c8c8c"] {
    display: block;
    width: 100% !important;
  }

  /* テーブルレイアウトを強制維持（display:block 化を防ぐ） */
  td.border1 table,
  td.border2 table {
    display: table !important;
    width: auto !important;
  }
  td.border1 table > tbody,
  td.border2 table > tbody {
    display: table-row-group !important;
  }
  td.border1 table > tbody > tr,
  td.border2 table > tbody > tr {
    display: table-row !important;
    width: auto !important;
  }
  td.border1 table > tbody > tr > td,
  td.border2 table > tbody > tr > td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
  }

  /* セルのパディング・フォントをコンパクトに */
  td.datatitle3,
  td.datatitle5 {
    padding: 6px 8px;
    font-size: 12px;
  }

  td.border1 table td.value1,
  td.border2 table td.value1,
  td.border1 table td.value2,
  td.border2 table td.value2 {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* 枠色セル */
  td[class^="wakucolor"] {
    padding: 6px 6px !important;
    min-width: 28px;
    white-space: nowrap;
  }

  /* お知らせ列（rowspan=3）- 折り返しあり・最小幅確保 */
  td.value1[rowspan],
  td.value2[rowspan] {
    white-space: normal !important;
    min-width: 110px;
    max-width: 160px;
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* ============================================================
   ai.cgi  -  AI予想ページ固有スタイル
   ============================================================ */

/* AI予想タイトル（h4 + .special） */
h4 {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-dk), var(--color-primary));
  border-radius: var(--radius);
}

h4 .special {
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
  color: #fff;
}

/* 予想結論行（鉄板 / 順当 / 波乱 など） */
td.value2[align="left"][valign="top"] {
  padding: 10px 12px;
  vertical-align: middle;
}

/* AI判定テキスト */
td.value2[valign="top"] > b {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-dk);
  margin-left: 8px;
  vertical-align: middle;
}

/* AI画像 */
td.value2 img[src*="ai_image"] {
  vertical-align: middle;
  border-radius: 4px;
}

/* 赤線コメント行（レース一覧のコメント行のみ対象） */
td.value1[colspan="6"],
td.value2[colspan="6"] {
  font-size: 13px;
  color: var(--color-text-sub);
}

/* 馬番セル（width="20"）- 的中Pt強調ルール(20px)が当たるので上書き */
table[bgcolor="#8c8c8c"] td.value1[width="20"] font[color="crimson"] b,
table[bgcolor="#8c8c8c"] td.value2[width="20"] font[color="crimson"] b {
  font-size: 15px !important;
  font-weight: 700;
}

/* 管理者用デバッグテーブル（border=1） */
table[border="1"] {
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
table[border="1"] th {
  padding: 6px 10px;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-border);
}
table[border="1"] td {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
}

/* 外枠コンテナ（#999999）の背景を透明に */
td[bgcolor="#999999"] {
  background: transparent !important;
  padding: 0 !important;
}

/* 上下の区切り線行（line_dot.gif）を常時非表示
   ※ cellspacing="0" cellpadding="0" で ai.cgi テーブルのみに限定
     （BachuListAct は cellspacing="1" cellpadding="1" なので影響しない） */
td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"]:not(.bet-list) tr:first-child,
td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"]:not(.bet-list) tr:nth-last-child(2) {
  display: none !important;
}

/* 赤線コメント行: 空の場合は折りたたむ */
td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"] tr:last-child td.value2 {
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0;
  background: transparent !important;
}
/* コメントあり（span.akasen を含む）の場合は表示を戻す */
td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"] tr:last-child td.value2:has(span.akasen) {
  padding: 8px 10px !important;
  font-size: 13px !important;
  line-height: 1.6;
  background: #f0f0f8 !important;
}

/* ---------- AI予想 レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  td.value2[valign="top"] > b {
    font-size: 16px;
  }

  table[border="1"] {
    width: 100%;
  }

  /* 予想テーブルをコンパクトに（ai.cgi限定） */
  td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"]:not(.bet-list) {
    width: 100% !important;
    table-layout: fixed !important;
    white-space: normal !important;
  }
  td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"]:not(.bet-list) td.value1 {
    white-space: normal !important;
    padding: 6px 8px !important;
    overflow: hidden;
  }
  /* ラベル列：25% 右寄せ */
  td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"]:not(.bet-list) td.value1[width="100"] {
    width: 25% !important;
    text-align: right !important;
  }
  /* 馬番列：15% */
  td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"]:not(.bet-list) td.value1[width="20"] {
    width: 15% !important;
    text-align: center !important;
  }
  /* 馬名列：60% */
  td[bgcolor="#999999"] table.normal[cellspacing="0"][cellpadding="0"]:not(.bet-list) td.value1[width="140"] {
    width: 60% !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   RaceResultListAct.cgi  -  レース結果・的中ランキングページ固有スタイル
   ============================================================ */

/* border1 / border2 — format.css からの移植＆モダン化 */
td.border1 {
  background: transparent !important;
  padding: 2px !important;
  border-radius: var(--radius);
}
td.border2 {
  background: #9e9e9e !important;
  padding: 2px !important;
  border-radius: var(--radius);
}

/* TGPRaceSummary: 的中者テーブル横並び */
.tgp-hitbox-pair {
  width: 100%;
  table-layout: fixed;
  border-spacing: 8px 0;
}
.tgp-hitbox-pair > tbody > tr > td.border2 {
  display: table-cell !important;
  width: 50%;
  vertical-align: top;
  overflow-x: auto;
  background: transparent !important;
  padding: 0 !important;
}
/* 的中者テーブル内部：角丸は上だけ＋行間に薄い境界線 */
.tgp-hitbox-pair td.border2 > table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  overflow: visible;
}
/* 左テーブル（3連単）：上の両角を丸く */
.tgp-hitbox-pair > tbody > tr > td.border2:first-child > table tr:first-child td:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}
/* 右テーブル（単勝）：上の両角を丸く */
.tgp-hitbox-pair > tbody > tr > td.border2:last-child > table tr:first-child td:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}
/* 2段目以降のヘッダ・データセルは角丸なし */
.tgp-hitbox-pair td.border2 > table tr:nth-child(n+2) td {
  border-radius: 0 !important;
}
.tgp-hitbox-pair > tbody > tr > td.border2 {
  border-radius: 0 !important;
}
.tgp-hitbox-pair td.border2 > table td {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
.tgp-hitbox-pair td.border2 > table tr:last-child td {
  border-bottom: none !important;
}
/* 的中者テーブル：3連単・単勝ヘッダを結果欄と同じ黒系に統一 */
.tgp-hitbox-pair td.datatitle2,
.tgp-hitbox-pair td.datatitle4 {
  background: #424242 !important;
}

/* 濃いグレーコンテナ（レース結果エリア） */
td[bgcolor="#8c8c8c"] {
  background: #eeeeee !important;
  border-radius: var(--radius);
  padding: 14px !important;
}

/* datatitle3（黒系ヘッダ） */
td.datatitle3 {
  background: #424242 !important;
  color: #fff !important;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
}

/* datatitle5（紺系ヘッダ） */
td.datatitle5 {
  background: var(--color-navy) !important;
  color: #fff !important;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
}

/* 上位3名：青色強調
   ※ <font color="blue"><b>VALUE</b></font> の形（top3の今回Pt）のみ太字にする
      <b> タグなしの <font color="blue"> には font-weight を付けない（今回Pt全行への誤適用防止） */
td font[color="blue"] {
  color: var(--color-navy) !important;
}
td font[color="blue"] b {
  color: var(--color-navy) !important;
  font-weight: 700;
}

/* 上位3名：順位の赤 */
td b font[color="red"] {
  color: var(--color-crimson) !important;
  font-weight: 700;
}

/* 3連単的中ポイント強調（レース結果テーブル内のみ） */
table[bgcolor="#8c8c8c"] td.value1 font[color="crimson"] b,
table[bgcolor="#8c8c8c"] td.value2 font[color="crimson"] b {
  font-size: 20px;
  color: var(--color-crimson) !important;
}

/* コメントセル（rowspan=3） */
td[rowspan="3"].value1 {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.8;
}

/* ランキングテーブルの的中状況・JSAレベル */
td.value1[align="left"],
td.value2[align="left"] {
  font-size: 13px;
}

/* ---------- レース結果 レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  td[bgcolor="#8c8c8c"] {
    padding: 8px !important;
  }

  /* レース結果テーブル横スクロール */
  td.border1,
  td.border2 {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  /* 的中ランキング横スクロール */
  #data {
    overflow-x: auto;
  }

  td.datatitle3,
  td.datatitle5 {
    font-size: 12px;
    padding: 6px 6px;
  }

  td.value1[align="center"],
  td.value2[align="center"] {
    font-size: 12px;
    padding: 6px 6px;
  }
}

/* ============================================================
   BetAct.cgi  -  投票フォーム（AJAXフラグメント）固有スタイル
   ============================================================ */

/* 投票フォーム外枠 */
.bet-wrap {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 8px 0;
}

.bet-close {
  flex-shrink: 0;
}

.bet-panel {
  flex: 1;
  background: #fff8f0;
  border: 1px solid var(--color-accent);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.bet-greeting {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-text-sub);
}

.bet-title {
  margin: 0 0 14px;
  padding: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dk);
  border: none;
  border-bottom: 2px solid var(--color-primary-lt);
}

/* 馬選択グリッド */
.bet-selects {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bet-col {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bet-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bet-label {
  display: inline-block;
  min-width: 48px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-dk);
  text-align: right;
}

.bet-row select {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  background: #fff;
  color: var(--color-text);
  transition: border-color var(--transition);
}

.bet-row select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* コメント欄 */
.bet-comment-area {
  margin-bottom: 12px;
}

.bet-comment-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.bet-note {
  font-size: 12px;
  color: var(--color-text-sub);
}

.bet-comment-input {
  width: 100%;
  max-width: 420px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  transition: border-color var(--transition);
}

.bet-comment-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 自信度・送信エリア */
.bet-footer-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.bet-footer-area label {
  font-size: 14px;
  font-weight: 700;
}

.bet-footer-area select {
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 14px;
  margin-left: 4px;
}

.btn-bet {
  background: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
}

.btn-bet:hover {
  background: var(--color-accent-dk) !important;
  transform: translateY(-1px) !important;
}

/* 投票完了・シェア */
.bet-done {
  margin: 4px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dk);
}

.bet-share {
  padding: 12px 16px;
  background: #fff0f0;
  border-left: 4px solid var(--color-crimson);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.8;
  margin-top: 8px;
}

/* ---------- 投票フォーム レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  .bet-wrap {
    flex-direction: column;
    gap: 8px;
  }

  .bet-selects { gap: 8px; }

  .bet-col { min-width: 140px; }

  .bet-comment-input { max-width: 100%; }

  .bet-footer-area {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-bet { width: 100% !important; }
}

/* ============================================================
   RaceListAct.cgi  -  レース一覧ページ固有スタイル
   ============================================================ */

/* 横スクロール可能なテーブルラッパー */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}

/* レース紹介ブロック */
.race-list-intro {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.8;
}

.race-list-intro table {
  border-collapse: collapse;
  width: auto;
}

.race-list-intro table td {
  border: none;
  padding: 4px 8px;
  vertical-align: top;
  font-size: 14px;
}

/* ---------- RaceListAct レスポンシブ ---------- */
@media screen and (max-width: 768px) {
  .table-scroll {
    margin: 0 -12px;
    padding: 0 12px;
  }

  /* .table-scroll 内テーブルはテーブルレイアウトを強制維持
     （グローバルの block 化ルールを上書き） */
  .table-scroll table {
    display: table !important;
    width: auto !important;
    white-space: nowrap;
  }
  .table-scroll table > tbody {
    display: table-row-group !important;
  }
  .table-scroll table > tbody > tr {
    display: table-row !important;
    width: auto !important;
  }
  .table-scroll table > tbody > tr > td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
  }

  /* ヘッダー行は非表示にせず維持 */
  .table-scroll table > tbody > tr:first-child {
    display: table-row !important;
  }

  /* セルコンパクト化 */
  .table-scroll td.datatitle2 {
    font-size: 12px;
    padding: 6px 8px;
  }
  .table-scroll td.value1,
  .table-scroll td.value2 {
    font-size: 12px;
    padding: 6px 8px;
  }

  /* イントロ部分（ロゴ＋テキスト）は縦積みでOK */
  .race-list-intro table td {
    display: block;
    width: 100%;
  }
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ---------- Text Color Utilities ---------- */
.text-red    { color: var(--color-crimson); }
.text-blue   { color: #1565c0; }
.text-green  { color: var(--color-primary); }
.text-purple { color: #7b1fa2; }
.text-gray   { color: var(--color-text-sub); }

/* ---------- Alignment Utilities ---------- */
.center { text-align: center; }
.right  { text-align: right; }

/* ---------- Data Table ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: 14px;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.data-table thead th {
  background: var(--color-primary-dk);
  color: #fff;
  font-weight: 500;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
}

.data-table tbody th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

.data-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.data-table:not(.no-stripe) tbody tr:nth-child(even) {
  background: #f0f4f0;
}

.data-table:not(.no-stripe) tbody tr:hover {
  background: #e8f5e9;
}

@media (max-width: 600px) {
  .data-table {
    font-size: 13px;
  }
  .data-table thead th,
  .data-table tbody td {
    padding: 6px 8px;
  }
}

/* 歴代優勝者テーブル：ヘッダーセンタリング */
.rekidai-table thead th {
  text-align: center;
}

/* ---------- TGP Rule Notes ---------- */
.tgp-rule-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 4px;
  font-size: 12px;
  color: #666;
}
.tgp-rule-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tgp-rule-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #e8f0e8;
  color: #666;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tgp-rule-desc {
  color: #555;
  line-height: 1.4;
}

/* ---------- Message Boxes ---------- */
.msg-success {
  background: #e8f5e9;
  border-left: 4px solid var(--color-primary);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: var(--radius);
  color: var(--color-primary-dk);
}

.msg-error {
  background: #ffebee;
  border-left: 4px solid var(--color-crimson);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: var(--radius);
  color: var(--color-crimson);
}

/* ============================================================
   Ranking Dropdown  -  ランキングリンクドロップダウン
   ============================================================ */

.ranking-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.ranking-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-main);
  color: #fff;
  background: #607D8B;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}
.ranking-dropdown-trigger:hover {
  background: #455A64;
}

/* ドロップダウンメニュー（初期非表示） */
.ranking-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 80px;
  margin-top: 4px;
  padding: 6px 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  flex-direction: column;
  gap: 2px;
}

/* PC：hover で開く */
.ranking-dropdown:hover .ranking-dropdown-menu,
/* モバイル：JS で .open を付与 */
.ranking-dropdown.open .ranking-dropdown-menu {
  display: flex;
}

/* メニュー内の各リンク */
.ranking-dropdown-menu a {
  display: block;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background var(--transition);
  line-height: 1;
}
.ranking-dropdown-menu a:hover {
  background: #e8f5e9;
}
.ranking-dropdown-menu a img {
  display: block;
  max-width: none;
}

/* ============================================================
   Rule Section Cards  -  ルール説明カードスタイル
   ============================================================ */

/* セクション見出しカード */
.rule-section {
  position: relative;
  background: var(--color-surface);
  border: 1px solid #d6e4d6;
  border-radius: 12px;
  padding: 28px 20px 20px;
  margin: 32px 0 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.rule-section:hover {
  box-shadow: var(--shadow-md);
}

/* オレンジ丸バッジ（番号） */
.rule-section-badge {
  position: absolute;
  top: -16px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(255,152,0,.35);
}

/* セクションタイトル */
.rule-section-title {
  display: inline-block;
  margin: 0 0 8px 0;
  padding-left: 46px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

/* セクション内のコンテンツ */
.rule-section .note {
  margin-top: 8px;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

/* 「その他」セクション（番号なし） */
.rule-section--plain {
  position: relative;
  background: var(--color-surface);
  border: 1px solid #d6e4d6;
  border-radius: 12px;
  padding: 20px;
  margin: 32px 0 16px;
  box-shadow: var(--shadow-sm);
}
.rule-section--plain .rule-section-title {
  padding-left: 0;
  font-size: 17px;
  color: var(--color-primary-dk);
  border-bottom: 2px solid var(--color-primary-lt);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

/* レスポンシブ */
@media screen and (max-width: 600px) {
  .rule-section {
    padding: 24px 14px 16px;
    margin: 28px 0 12px;
  }
  .rule-section-badge {
    width: 30px;
    height: 30px;
    font-size: 14px;
    top: -14px;
    left: 14px;
  }
  .rule-section-title {
    padding-left: 38px;
    font-size: 15px;
  }
}