/* detail.css — 共通スタイル (tools/frontend/css_extract.cjs で index.html, c/ranking.html, local/ranking.html, pref/ranking.html から抽出)。
   ページ固有の上書きは各ページの <style> に残っている。見た目を変えるときは cascade の順 (この file → ページの <style>) に注意 */
.method-tabs {
  display: flex; gap: 4px; margin: 12px 0;
  background: #ffffff; padding: 4px; border-radius: 8px;
  border: 1px solid #e5e7eb; overflow-x: auto;
}
.method-tab {
  padding: 8px 14px; cursor: pointer; border-radius: 6px;
  font-size: 13px; color: #6b7280; transition: all 0.1s;
  user-select: none; white-space: nowrap;
}
.method-tab:hover { color: #374151; background: #f3f4f6; }
.method-tab.active { background: #dc2626; color: #fff; }
.method-tab .tab-desc { display: block; font-size: 10px; opacity: 0.7; margin-top: 2px; }
.controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0;
}
input[type="search"] { min-width: 280px; }
/* 表示の切り替え (海外・計測中・サブ)。目立たせない */
.view-opt {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #9ca3af;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.view-opt input { margin: 0; width: 12px; height: 12px; accent-color: #9ca3af; }
.view-opt:hover { color: #6b7280; }
/* 全国ランキングの Top N ボタン (と読み込み状況) は検索・表示の切り替えの次の行に */
.jump-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; flex-basis: 100%; }
.sub-tag {
  display: inline-block; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 8px;
  background: #f3f4f6; color: #6b7280; vertical-align: 1px;
}
.detail-section { margin-bottom: 20px; }
.detail-section h4 {
  margin: 0 0 8px; color: #dc2626; font-size: 13px; font-weight: 600;
}
.detail-section h5 {
  margin: 0 0 6px; color: #374151; font-size: 12px; font-weight: 600;
}
.detail-tabs {
  display: flex; gap: 4px; margin: 4px 0 10px;
  border-bottom: 1px solid #e5e7eb;
}
.detail-tab {
  padding: 7px 14px; cursor: pointer; user-select: none;
  font-size: 13px; color: #6b7280; font-weight: 500;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0; transition: color .12s, background .12s, border-color .12s;
}
.detail-tab:hover {
  color: #dc2626; background: #fef2f2; border-bottom-color: #fca5a5;
}
.detail-tab.active {
  color: #dc2626; border-bottom-color: #dc2626; font-weight: 600;
}
.h2h-section { display: flex; flex-direction: column; gap: 16px; }
.h2h-col { min-width: 0; }
.h2h-list { display: flex; flex-direction: column; gap: 6px; }
.h2h-opp.h2h-win  { border-left: 3px solid #16a34a; }
.h2h-opp.h2h-loss { border-left: 3px solid #2563eb; }
.h2h-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.h2h-opp-name {
  color: #dc2626; font-weight: 600; text-decoration: none; font-size: 13px;
  word-break: break-word; min-width: 0;
}
.h2h-opp.h2h-win .h2h-opp-name { color: #16a34a; }
.h2h-opp.h2h-loss .h2h-opp-name { color: #2563eb; }
.h2h-opp-name:hover { text-decoration: underline; }
.h2h-rank { color: #9ca3af; font-size: 11px; font-variant-numeric: tabular-nums; }
.h2h-count { color: #6b7280; font-size: 11px; margin-left: auto; flex-shrink: 0; }
.h2h-match {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11px; color: #6b7280;
  padding: 3px 0;
}
.h2h-match .h2h-date { color: #9ca3af; font-size: 10px; flex-shrink: 0; }
.h2h-match .h2h-tname { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.h2h-match .h2h-tname a { color: #6b7280; text-decoration: none; }
.h2h-match .h2h-tname a:hover { color: #dc2626; text-decoration: underline; }
.h2h-match .h2h-delta {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: #9ca3af; font-size: 12px; flex-shrink: 0;
}
.h2h-match .h2h-delta.pos { color: #16a34a; }
.h2h-match .h2h-delta.neg { color: #2563eb; }
.tour-table, .breakdown-table { font-size: 12px; width: 100%; border-collapse: collapse; }
.tour-table th, .breakdown-table th {
  background: #f9fafb; position: static; padding: 6px 8px;
  border-bottom: 1px solid #f3f4f6; cursor: default; font-weight: 600;
}
.tour-table th::after, .breakdown-table th::after { content: ""; }
.tour-table td, .breakdown-table td { padding: 4px 8px; border-bottom: 1px solid #ffffff; }
.tour-table tr.counted, .breakdown-table tr.counted { background: rgba(220, 38, 38, 0.04); }
.tour-table tr.weekday { color: #6b7280; }
.tour-table tr.weekend { color: #374151; }
.h2h-opp:hover { background: #f0f0f0; border-color: #d1d5db; }
.tag-wk { color: #dc2626; font-size: 10px; padding: 1px 5px; background: rgba(220, 38, 38, 0.08); border-radius: 8px; }
.tag-wd { color: #6b7280; font-size: 10px; padding: 1px 5px; background: rgba(107, 114, 128, 0.08); border-radius: 8px; }
.tag-sm { color: #d97706; font-size: 10px; padding: 1px 5px; background: rgba(217, 119, 6, 0.10); border-radius: 8px; margin-left: 4px; }
.tag-pre { color: #6b21a8; font-size: 10px; padding: 1px 5px; background: rgba(168, 85, 247, 0.12); border-radius: 8px; margin-left: 4px; }
.tag-res { color: #be123c; font-size: 10px; padding: 1px 5px; background: rgba(225, 29, 72, 0.10); border-radius: 8px; margin-left: 4px; }
.tag-lc  { color: #0369a1; font-size: 10px; padding: 1px 5px; background: rgba(2, 132, 199, 0.10); border-radius: 8px; margin-left: 4px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.pos { color: #16a34a; }
.neg { color: #2563eb; }
@media (min-width:800px) {
  .h2h-section { flex-direction: row; gap: 20px; }
  .h2h-col { flex: 1 1 50%; }
}
@media (max-width:720px) {
  .method-tab { padding: 6px 8px; font-size: 11px; }
  .method-tab .tab-desc { display: none; }
  .controls, .jump-row { gap: 6px; }
  input[type="search"] { min-width: 0; flex: 1 1 100%; font-size: 14px; padding: 8px 10px; }
  .status { width: 100%; font-size: 10px; }
}