/* TDR GO — 統計ページ */
.stats-main { max-width:var(--content-width); margin:0 auto; padding:16px var(--page-gutter) 56px; }
.period-bar { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); margin-bottom:var(--section-gap); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.period-bar .label { font-size:12px; color:var(--text-sub); font-weight:600; margin-right:4px; }
.period-chip { background:var(--primary-ultra); border:1px solid var(--border); padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600; color:var(--primary); cursor:pointer; transition:.15s; }
.period-chip:hover  { background:var(--primary-pale); }
.period-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.section    { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:var(--card-pad); box-shadow:var(--shadow); margin-bottom:var(--section-gap); scroll-margin-top:150px; }
/* 見出しは content.css に集約 */
.section .sub { font-size:14.5px; line-height:1.85; color:var(--text-sub); margin-bottom:20px; }
@media (max-width:600px){ .section .sub { font-size:14px; line-height:1.8; } }
.bar-chart  { display:flex; align-items:flex-end; gap:6px; height:184px; padding:8px 4px 0; border-bottom:1px solid var(--border); }
.bar-col    { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%; min-width:0; cursor:pointer; }
.bar        { width:100%; border-radius:4px 4px 0 0; min-height:2px; transition:.2s; }
.bar-col.wait-level-low .bar       { background:linear-gradient(to top,var(--green),#7fe2b3); }
.bar-col.wait-level-mid .bar       { background:linear-gradient(to top,var(--yellow),#f3c757); }
.bar-col.wait-level-high .bar      { background:linear-gradient(to top,var(--red),#f27c7c); }
.bar-col.wait-level-veryhigh .bar  { background:linear-gradient(to top,#e85b5b,#f08888); }
.bar-col.wait-level-extreme .bar   { background:linear-gradient(to top,#741010,#981b1b); }
.bar-col.wait-level-none .bar      { background:var(--border); opacity:.65; }
.bar-col.wait-level-low .bar-value       { color:var(--green); }
.bar-col.wait-level-mid .bar-value       { color:var(--yellow); }
.bar-col.wait-level-high .bar-value      { color:var(--red); }
.bar-col.wait-level-veryhigh .bar-value  { color:#e85b5b; }
.bar-col.wait-level-extreme .bar-value   { color:#981b1b; }
.bar-col.wait-level-none .bar-value      { color:var(--text-muted); }
.bar:hover  { filter:brightness(.96); }
.bar-value  { font-family:'Nunito',sans-serif; font-size:10px; font-weight:700; color:var(--text-sub); }
.bar-label  { font-size:10px; color:var(--text-sub); margin-top:6px; }
/* 月別・曜日別バー: 混雑(最大)/狙い目(最小)の強調 */
.bar-badge  { font-size:9px; font-weight:800; line-height:1; padding:3px 6px; border-radius:99px; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.bar-badge--peak { background:var(--red);   color:#fff; }
.bar-badge--low  { background:var(--green); color:#fff; }
.bar-col.is-peak .bar       { outline:2px solid var(--red);   outline-offset:1px; }
.bar-col.is-low  .bar       { outline:2px solid var(--green); outline-offset:1px; }
.bar-col.is-peak .bar-value,
.bar-col.is-low  .bar-value { font-size:12px; }
.bar-col.is-peak .bar-label,
.bar-col.is-low  .bar-label { font-weight:800; color:var(--text-main); }
.bar-caption { display:flex; flex-wrap:wrap; gap:6px 18px; margin:12px 0 2px; font-size:13px; color:var(--text-sub); }
.bar-caption-item b { color:var(--text-main); }
.hour-heatmap { overflow-x:auto; }
.hour-heatmap table { border-collapse:collapse; min-width:100%; }
.hour-heatmap th, .hour-heatmap td { padding:0; text-align:center; }
.hour-heatmap thead th { font-size:10px; color:var(--text-sub); font-weight:600; padding:4px 0; min-width:26px; }
.hour-heatmap thead .row-label { min-width:60px; text-align:left; padding-left:8px; }
.hour-heatmap tbody td { width:26px; height:24px; font-size:10px; font-family:'Nunito',sans-serif; font-weight:700; color:rgba(0,0,0,.55); transition:.1s; cursor:pointer; }
.hour-heatmap tbody td.wait-level-low      { background:var(--wc-green);  color:#1e6a4a; }
.hour-heatmap tbody td.wait-level-mid      { background:var(--wc-yellow); color:#6a4f10; }
.hour-heatmap tbody td.wait-level-high     { background:var(--wc-red);    color:#8d2424; }
.hour-heatmap tbody td.wait-level-veryhigh { background:var(--wc-red2);   color:#fff; }
.hour-heatmap tbody td.wait-level-extreme  { background:var(--wc-red3);   color:#fff; }
.hour-heatmap tbody td.wait-level-none     { background:var(--primary-ultra); color:var(--text-muted); }
.hour-heatmap tbody td:hover { outline:2px solid var(--primary); outline-offset:-2px; }
.hour-heatmap tbody .row-label { text-align:left; padding-left:8px; font-size:11px; font-weight:500; color:var(--text-main); }
@media(max-width:640px){
  #monthChart .bar-chart {
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding-left:2px;
    padding-right:2px;
  }
  #monthChart .bar-chart::-webkit-scrollbar { display:none; }
  #monthChart .bar-col {
    flex:0 0 30px;
    min-width:30px;
  }
  #monthChart .bar-label {
    width:30px;
    text-align:center;
    white-space:nowrap;
  }
  .hour-heatmap {
    position:relative;
  }
  .hour-heatmap thead .row-label,
  .hour-heatmap tbody .row-label {
    position:sticky;
    left:0;
    background:#fff;
    box-shadow:1px 0 0 var(--border);
  }
  .hour-heatmap thead .row-label {
    z-index:4;
    background:var(--primary-ultra);
  }
  .hour-heatmap tbody .row-label {
    z-index:3;
  }
}
.rank-group-title { margin:18px 0 8px; font-size:14px; font-weight:800; color:var(--text-main); }
.rank-list { display:flex; flex-direction:column; gap:8px; }
.rank-row  { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--primary-ultra); border:1px solid transparent; border-radius:var(--radius-sm); font-size:13px; }
.rank-row.wait-level-low      { background:#f0fbf5; border-color:#c7eed8; }
.rank-row.wait-level-mid      { background:#fff9e6; border-color:#f7d76c; }
.rank-row.wait-level-high     { background:#fff3f3; border-color:#f5b3b3; }
.rank-row.wait-level-veryhigh { background:#fff0f0; border-color:#e85b5b; }
.rank-row.wait-level-extreme  { background:#fbecec; border-color:#981b1b; }
.rank-row.wait-level-none     { background:var(--primary-ultra); border-color:var(--border); }
.rank-row .num  { font-family:'Nunito',sans-serif; font-weight:800; color:var(--primary); width:24px; text-align:center; font-size:15px; }
.rank-row.wait-level-low .num       { color:var(--green); }
.rank-row.wait-level-mid .num       { color:var(--yellow); }
.rank-row.wait-level-high .num      { color:var(--red); }
.rank-row.wait-level-veryhigh .num  { color:#e85b5b; }
.rank-row.wait-level-extreme .num   { color:#981b1b; }
.rank-row .name { flex:1; font-weight:500; }
.rank-row .rank-area { display:block; margin-top:2px; font-size:10px; color:var(--text-sub); font-weight:600; }
.rank-row .bar-wrap { flex:0 0 140px; background:#fff; height:8px; border-radius:999px; overflow:hidden; }
.rank-row .bar-fill { height:100%; }
.rank-row.wait-level-low .bar-fill       { background:linear-gradient(90deg,var(--green),#7fe2b3); }
.rank-row.wait-level-mid .bar-fill       { background:linear-gradient(90deg,var(--yellow),#f3c757); }
.rank-row.wait-level-high .bar-fill      { background:linear-gradient(90deg,var(--red),#f27c7c); }
.rank-row.wait-level-veryhigh .bar-fill  { background:linear-gradient(90deg,#e85b5b,#f08888); }
.rank-row.wait-level-extreme .bar-fill   { background:linear-gradient(90deg,#981b1b,#741010); }
.rank-row .val  { font-family:'Nunito',sans-serif; font-weight:800; min-width:50px; text-align:right; }
.rank-row.wait-level-low .val       { color:var(--green); }
.rank-row.wait-level-mid .val       { color:var(--yellow); }
.rank-row.wait-level-high .val      { color:var(--red); }
.rank-row.wait-level-veryhigh .val  { color:#e85b5b; }
.rank-row.wait-level-extreme .val   { color:#981b1b; }
.rank-row .val span { font-size:10px; color:var(--text-muted); font-weight:500; }
@media(max-width:640px){
  .rank-list { gap:6px; }
  .rank-row { gap:8px; padding:7px 9px; font-size:12px; line-height:1.35; }
  .rank-row .num { width:20px; font-size:13px; }
  .rank-row .rank-area { margin-top:0; font-size:9.5px; line-height:1.25; }
  .rank-row .bar-wrap { flex-basis:72px; height:6px; }
  .rank-row .val { min-width:42px; font-size:12px; }
  .rank-row .val span { font-size:9px; }
}
.compare-pickers { display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.compare-pickers > div { flex:1; min-width:180px; }
.compare-pickers label { display:block; font-size:11px; color:var(--text-sub); font-weight:600; margin-bottom:4px; }
.compare-pickers input { width:100%; border:1px solid var(--border); border-radius:6px; padding:6px 10px; font:inherit; font-size:13px; }
.compare-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.compare-card { min-width:0; overflow:hidden; }
@media(max-width:640px){ .compare-grid { grid-template-columns:1fr; } }
.compare-card     { background:var(--primary-ultra); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; }
.compare-card.wait-level-low      { background:#f0fbf5; border-color:#c7eed8; }
.compare-card.wait-level-mid      { background:#fff9e6; border-color:#f7d76c; }
.compare-card.wait-level-high     { background:#fff3f3; border-color:#f5b3b3; }
.compare-card.wait-level-veryhigh { background:#fff0f0; border-color:#e85b5b; }
.compare-card.wait-level-extreme  { background:#fbecec; border-color:#981b1b; }
.compare-card.wait-level-none     { background:var(--primary-ultra); border-color:var(--border); }
.compare-card .day  { font-weight:700; color:var(--primary); font-size:13px; margin-bottom:6px; }
.compare-card.wait-level-low .day       { color:var(--green); }
.compare-card.wait-level-mid .day       { color:var(--yellow); }
.compare-card.wait-level-high .day      { color:var(--red); }
.compare-card.wait-level-veryhigh .day  { color:#e85b5b; }
.compare-card.wait-level-extreme .day   { color:#981b1b; }
.compare-card .stat { display:flex; justify-content:space-between; padding:4px 0; font-size:12px; }
.compare-card .stat span:last-child:not(.stat-value) { font-family:'Nunito',sans-serif; font-weight:800; color:var(--text-main); }
.compare-card .stat-value { font-family:'Nunito',sans-serif; font-weight:800; }
.compare-card .stat-value { display:inline-flex; align-items:center; justify-content:flex-end; min-width:56px; padding:1px 7px; border-radius:999px; background:#fff; }
.compare-card .stat-value.wait-level-low      { background:var(--wc-green);  color:#1e6a4a; border:1px solid #c7eed8; }
.compare-card .stat-value.wait-level-mid      { background:var(--wc-yellow); color:#6a4f10; border:1px solid #f7d76c; }
.compare-card .stat-value.wait-level-high     { background:var(--wc-red);    color:#8d2424; border:1px solid #f5b3b3; }
.compare-card .stat-value.wait-level-veryhigh { background:var(--wc-red2);   color:#fff;    border:1px solid var(--wc-red2); }
.compare-card .stat-value.wait-level-extreme  { background:var(--wc-red3);   color:#fff;    border:1px solid var(--wc-red3); }
.compare-card .stat-value.wait-level-none     { background:#fff; color:var(--text-muted); border:1px solid var(--border); }
/* 2日比較の待ち時間TOP3リスト */
.compare-top { margin-top:8px; }
/* 人気ゾーンと一般ゾーンの間にだけ区切り線を1本 */
.compare-divider { margin:12px 0; border-top:1px dashed var(--border); }
.compare-top-title { font-size:11px; font-weight:800; color:var(--text-sub); margin:6px 0 4px; }
.compare-top ol { margin:0; padding-left:0; padding-right:2px; list-style:none; display:grid; gap:4px; }
.compare-top li { display:flex; align-items:center; gap:6px; line-height:1.4; min-width:0; }
.compare-top li .rk { flex:none; width:16px; height:16px; border-radius:50%; background:var(--primary-ultra); color:var(--primary); font-family:'Nunito',sans-serif; font-weight:900; font-size:9px; display:inline-flex; align-items:center; justify-content:center; }
.compare-top li .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-main); font-size:10px; }
/* 分数は凡例に合わせた色付きピル。右側に余白を確保し、必ず表示されるよう固定幅。 */
.compare-top li .vl { flex:none; margin-left:4px; min-width:42px; text-align:center; padding:1px 7px; border-radius:999px; border:1px solid var(--border); background:#fff; font-family:'Nunito',sans-serif; font-weight:800; font-size:10.5px; color:var(--text-sub); }
.compare-top li .vl.wait-level-low      { background:var(--wc-green);  color:#1e6a4a; border-color:#c7eed8; }
.compare-top li .vl.wait-level-mid      { background:var(--wc-yellow); color:#6a4f10; border-color:#f7d76c; }
.compare-top li .vl.wait-level-high     { background:var(--wc-red);    color:#8d2424; border-color:#f5b3b3; }
.compare-top li .vl.wait-level-veryhigh { background:var(--wc-red2);   color:#fff;    border-color:var(--wc-red2); }
.compare-top li .vl.wait-level-extreme  { background:var(--wc-red3);   color:#fff;    border-color:var(--wc-red3); }
@media(max-width:640px){
  .compare-card { padding:10px; }
  .compare-top { margin-top:6px; }
  .compare-divider { margin:9px 0; }
  .compare-top-title { margin:5px 0 3px; }
  .compare-top ol { gap:2px; }
  .compare-top li { gap:5px; line-height:1.25; }
  .compare-top li .rk { width:15px; height:15px; font-size:8.5px; }
  .compare-top li .nm { font-size:9.5px; }
  .compare-top li .vl { min-width:39px; padding:0 6px; font-size:10px; }
}
.season-grid, .weather-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
/* 季節カードはスマホで2列に折り返す。天気カード（4種）はスマホでも1行表示を維持する。 */
@media(max-width:640px){
  .season-grid { grid-template-columns:repeat(2,1fr); }
}
/* 季節/天気カードも他コンテンツ（バー/ヒートマップ/ランキング）と同じ淡色トーンに統一 */
.season-card, .weather-card { padding:12px; border-radius:var(--radius-sm); text-align:center; background:#fff; border:1px solid var(--border); }
.season-card.wait-level-low, .weather-card.wait-level-low           { background:#f0fbf5; border-color:#c7eed8; }
.season-card.wait-level-mid, .weather-card.wait-level-mid           { background:#fff9e6; border-color:#f7d76c; }
.season-card.wait-level-high, .weather-card.wait-level-high         { background:#fff3f3; border-color:#f5b3b3; }
.season-card.wait-level-veryhigh, .weather-card.wait-level-veryhigh { background:#fff0f0; border-color:#e85b5b; }
.season-card.wait-level-extreme, .weather-card.wait-level-extreme   { background:#fbecec; border-color:#981b1b; }
.season-card.wait-level-none, .weather-card.wait-level-none         { background:var(--primary-ultra); border-color:var(--border); }
.season-card .emoji, .weather-card .emoji { font-size:24px; }
.season-card .name, .weather-card .name  { font-size:12px; font-weight:700; margin:4px 0; color:var(--text-main); }
.season-card .val, .weather-card .val   { font-family:'Nunito',sans-serif; font-size:24px; font-weight:900; color:var(--text-main); }
.season-card.wait-level-low .val, .weather-card.wait-level-low .val           { color:var(--green); }
.season-card.wait-level-mid .val, .weather-card.wait-level-mid .val           { color:var(--yellow); }
.season-card.wait-level-high .val, .weather-card.wait-level-high .val         { color:var(--red); }
.season-card.wait-level-veryhigh .val, .weather-card.wait-level-veryhigh .val { color:#e85b5b; }
.season-card.wait-level-extreme .val, .weather-card.wait-level-extreme .val   { color:#981b1b; }
.season-card .unit, .weather-card .unit  { font-size:10px; color:var(--text-muted); }
/* 天気カードは数値に関わらず天気イメージの色で固定（晴れ:橙 / 曇り:灰 / 雨:水色 / 強風:青） */
.weather-card--sunny  { background:#fff6e6; border-color:#f6c976; }
.weather-card--sunny  .val { color:#e8951c; }
.weather-card--cloudy { background:#f1f4f7; border-color:#c7cfd8; }
.weather-card--cloudy .val { color:#7d8893; }
.weather-card--rainy  { background:#e8f7fc; border-color:#9fdcec; }
.weather-card--rainy  .val { color:#2ba6c9; }
.weather-card--windy  { background:#eaf2fc; border-color:#aecdf2; }
.weather-card--windy  .val { color:#3f7fd6; }
.weather-card.is-empty .val { color:var(--text-muted); }

/* 各セクションを「ランド→シー」の2段表示にするレイアウト */
.stats-dual { display:flex; flex-direction:column; gap:20px; }
/* 枠は白背景。色味はタイトル帯だけパーク色（切替ボタンと同系）にする */
/* min-width:0 で、内側の横スクロール表（時間帯ヒートマップ）が flex 項目を押し広げ、
   ページ全体が横にあふれるのを防ぐ（見出し・棒グラフ・天気カードの右切れ対策） */
.stats-park { min-width:0; padding:14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }
.stats-park-title { margin:0 0 12px; font-size:14px; font-weight:800; color:var(--text-main); display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:var(--radius-sm); background:var(--primary-ultra); }
.stats-park--land .stats-park-title { background:var(--land-soft); color:var(--land); }
.stats-park--sea  .stats-park-title { background:var(--sea-soft);  color:var(--sea); }
/* 2日比較カードは白背景（待ち時間の色は数値ピルで表現） */
.compare-card { background:#fff; }
.tooltip { position:fixed; background:var(--text-main); color:#fff; padding:6px 10px; border-radius:6px; font-size:12px; pointer-events:none; z-index:1000; white-space:nowrap; opacity:0; transition:opacity .1s; }
.tooltip.show { opacity:1; }
.stats-empty { width:100%; padding:18px; color:var(--text-muted); font-size:13px; text-align:center; border:1px dashed var(--border); border-radius:var(--radius-sm); background:var(--primary-ultra); }

/* 天気ごとの平均待ち時間: スマホでも4枚を1行で表示する。
   基本の .weather-card 系ルールより後・高詳細度(.stats-dual 子孫)で確実に上書きする。 */
@media (max-width:640px){
  .stats-dual .weather-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .stats-dual .weather-card { min-width:0; padding:9px 3px; }
  .stats-dual .weather-card .emoji { font-size:18px; }
  .stats-dual .weather-card .name { font-size:10px; }
  .stats-dual .weather-card .val { font-size:17px; }
  .stats-dual .weather-card .unit { font-size:9px; }
}