/* 1366×768 無スクロール 固定レイアウト（機能ロジック非変更） */
:root{
  --bg:#e8f1e6;
  --panel:#f7fbf6;
  --border:#d7e7d3;
  --text:#0b1f13;
  --shadow:0 1px 3px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "YuGothic", Meiryo, sans-serif;
  line-height:1.35;
  overflow:hidden; /* スクロール禁止 */
}

/* outer page fits to 1366x768 */
.page{
  width:1366px;
  height:768px;
  margin:0 auto;
  display:grid;
  grid-template-rows: 136px 360px 200px 26px; /* adjusted for no header */ /* =768 */
  grid-template-areas:
    "metrics"
    "charts"
    "bottom"
    "ft";
  gap:10px;
  padding:10px;
}

/* header (title removed) */
.hdr{ grid-area:hdr; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); }

/* metrics row: brand | V | × | I | ＝ | P | start-buttons | connect */
.metrics{
  grid-area:metrics;
  display:grid;
  grid-template-columns: 140px 160px 1fr 32px 1fr 32px 1fr 220px;
  align-items:center; gap:10px;
}
.brand-slot{ display:flex; align-items:center; justify-content:center; }
.logo{height:54px; width:auto; object-fit:contain;}

.metric{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 14px; text-align:center; box-shadow:var(--shadow);}
.metric .label{font-size:14px; opacity:.85;}
.metric .value{font-size:36px; font-weight:700;}
.times,.equals{font-size:28px; text-align:center; opacity:.8;}

.actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.connect-slot{display:flex; justify-content:flex-end;}
.btn{appearance:none; border:0; border-radius:10px; padding:10px 16px; font-size:16px; cursor:pointer; box-shadow:var(--shadow);}
.btn.small{padding:8px 14px; font-size:14px;}
.btn.wide{min-width:140px; text-align:center;}
.btn-blue{background:#2a80ff; color:#fff;}
.btn-green{background:#2e7d32; color:#fff;}
.btn-gray{background:#8ea09b; color:#fff;}

/* charts row */
.charts{grid-area:charts; display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow);}
.ptitle{font-size:16px; margin:0 0 8px 0; font-weight:600; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.ptitle .time{margin-left:6px; font-weight:500;}
#powCanvas,#whCanvas{width:100%; height:300px; display:block; background:#fff; border:1px solid var(--border); border-radius:6px;}

/* bottom row */
.bottom{grid-area:bottom; display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.prev{font-size:16px;}
.results-sum .sumhead{display:flex; gap:10px; margin-bottom:8px;}
.wh-list{font-size:15px; line-height:1.4; max-height:150px; overflow:auto; padding-right:6px;}

/* footer */
.ft{grid-area:ft; font-size:12px; color:#4d6a5c; text-align:center;}

#outWhSum::after{ content:' mWh'; }