@charset "utf-8";
.satomura-stats{
  --bg:#ffffff;
  --bg-soft:#fdfaf2;
  --surface:#ffffff;
  --surface-soft:#fbf6ea;
  --text-muted: #554f44;
  --border:#ece4d2;
  --border-strong:#d9cdb0;
  --brand:#f8b600;
  --brand-deep:#d99c00;
  --brand-soft:#fff5d6;
  --accent:#c8533c;
  --chart-color: var(--text);
  --chart-tick-color: var(--text-muted);
  --chart-grid-color: var(--border);
  --chart-tick-font-size: 11px;
  --chart-axis-font-size: 12px;
  --chart-legend-font-size: 12px;
  --chart-datalabel-font-size: 13px;
  --chart-bar-datalabel-font-size: 11px;
  --chart-tooltip-bg: #2c2820;
  --chart-tooltip-font-size: 13px;
  --chart-bar-color: var(--brand);
  --chart-bar-hover-color: var(--brand-deep);
  --chart-palette-1: #f8b600;
  --chart-palette-2: #e89230;
  --chart-palette-3: #d56d3c;
  --chart-palette-4: #b85040;
  --chart-palette-5: #8a4565;
  --chart-palette-6: #5c5680;
  --chart-palette-7: #4a7a8c;
  --chart-palette-8: #6e8a5e;
  --chart-palette-9: #9c9082;
  --chart-palette-10: #bf8a4a;
--chart-palette-11: #7a8a3e;
--chart-palette-12: #3e6a8a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ----- タブ ----- */
.satomura-stats .tabs{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:40px; border-bottom:1px solid var(--border); justify-content:center; }
.satomura-stats .tab-button{ background:transparent; border:none; padding:18px 28px; font-size:15px; font-weight:500; color:var(--text-muted); cursor:pointer; position:relative; transition:color .25s ease; }
.satomura-stats .tab-button:hover{color:var(--text)}
.satomura-stats .tab-button::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:center; transition:transform .3s cubic-bezier(.4,0,.2,1); border-radius:2px 2px 0 0; }
.satomura-stats .tab-button.is-active{color:var(--text);font-weight:700;}
.satomura-stats .tab-button.is-active::after{transform:scaleX(1)}

/* ----- パネル ----- */
.satomura-stats .panel{display:none; animation:satomura-fade .35s ease both}
.satomura-stats .panel.is-active{display:block}
@keyframes satomura-fade{
from{opacity:0; transform:translateY(8px)}
to{opacity:1; transform:translateY(0)}
}

/* ----- 統計カード ----- */
.satomura-stats .stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:3em; }
.satomura-stats .stat-grid.all{ margin-bottom:0em; }
.satomura-stats .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:24px 22px; position:relative; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.satomura-stats .stat-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--brand); }
.satomura-stats .stat-card:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(248,182,0,.12); }
.satomura-stats .stat-label{color:var(--text-muted);font-weight:500;}
.satomura-stats .stat-value{ font-size:34px; font-weight:700; color:var(--text); margin:0; line-height:1; }
.satomura-stats .stat-unit{ font-size:14px; font-weight:500; color:var(--text-muted); margin-left:5px; }

/* ----- セクション ----- */
.satomura-stats .section{margin-bottom:64px}
.satomura-stats .section:last-child{margin-bottom:0}

/* ----- 2カラムレイアウト ----- */
.satomura-stats .split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.satomura-stats .split.flip{grid-template-columns:5fr 6fr}
.satomura-stats .split.wide-chart{grid-template-columns:4fr 7fr}

/* ----- チャート枠 ----- */
.satomura-stats .chart-wrap{padding: 20px;position:relative;padding: 0 0 1.5em;}
.satomura-stats .chart-wrap.wide {border-radius:.5em .5em 0 0;border: none;}
.satomura-stats .chart-wrap.wide + .table-wrap {border-radius: 0 0 .5em .5em; }
.satomura-stats .chart-canvas{position:relative;width:100%; height:380px;}
.satomura-stats .chart-canvas.tall{height:420px}
.satomura-stats .chart-canvas.x-tall{height:480px}

/* ----- テーブル ----- */
.satomura-stats .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius: .5em;overflow:hidden;}
.satomura-stats table{width:100%;border-collapse:collapse;}
.satomura-stats th,
.satomura-stats td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);}
.satomura-stats th{background:var(--surface-soft);font-weight:700;border-bottom:2px solid var(--brand);}
.satomura-stats td.num,
.satomura-stats th.num{text-align:right;font-variant-numeric:tabular-nums;}
.satomura-stats td.num{font-weight:500;}
.satomura-stats tbody tr:last-child td{border-bottom:none}
.satomura-stats tbody tr:hover{background:rgba(248,182,0,.04)}
.satomura-stats .row-total td{font-weight:700;background:var(--surface-soft);border-top:2px solid var(--brand);}

.satomura-stats .color-dot{display:inline-block;width:1em; height:1em; border-radius:.1em;margin-right:.5em;vertical-align:middle;transform:translateY(-.1em);}
.satomura-stats .subgroup{margin-top: 1.5em;padding: 1rem 1.4rem;background:var(--bg-soft);border-radius: .5em;border:1px solid var(--border);border-left:4px solid var(--brand);}
.satomura-stats .subgroup .midashi_llin.mini{ border:none; padding:0;} 
.satomura-stats .subgroup-list{display:flex;flex-wrap:wrap;gap: .5em;}
.satomura-stats .subgroup-list li{ border:1px solid #eee; background:#FFF; border-radius:999px; padding:.4em 1em;}
.satomura-stats .subgroup-list b{font-weight:500;margin-left:.4em;}
.satomura-stats .note-row td{color:var(--text-muted);}


@media (max-width: 880px){
.satomura-stats .report{padding:40px 18px 64px}
.satomura-stats .stat-grid{grid-template-columns:repeat(2,1fr)}
.satomura-stats .split,
.satomura-stats .split.flip,
.satomura-stats .split.wide-chart{grid-template-columns:1fr; gap:20px}
.satomura-stats .tab-button{padding:14px 16px; font-size:14px}
.satomura-stats .chart-canvas{height:320px}
.satomura-stats .chart-canvas.tall{height:360px}
.satomura-stats .chart-canvas.x-tall{height:420px}
.satomura-stats th,
.satomura-stats td{padding:10px 12px; font-size:13px}
}
@media (max-width: 480px){
.satomura-stats .stat-grid{grid-template-columns:1fr 1fr; gap:10px}
.satomura-stats .stat-card{padding:18px 16px}
.satomura-stats .stat-value{font-size:26px}
.satomura-stats .chart-wrap{padding:16px 12px}
.satomura-stats .tab-button{padding:12px 12px; font-size:13px}
}