/* 司令室 v1 ─ スマホファースト（仕様書§12）・信号色以外は抑制 */
:root {
  --accent: #00B4D8;
  --sidebar: #1c2733;
  --ink: #1e2530;
  --sub: #667085;
  --line: #e4e7ec;
  --bg: #f5f6f8;
  --green: #1e8e3e;
  --yellow: #b8860b;
  --red: #c5221f;
  --grey: #8a94a6;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.65;
}

/* ── モバイルヘッダー ── */
.mobilebar {
  display:flex; align-items:center; gap:12px;
  background:var(--sidebar); color:#fff; padding:0 14px; height:52px;
  position:sticky; top:0; z-index:30;
}
.mobilebar .mtitle { font-weight:700; }
.mobilebar .mmode { font-size:11px; opacity:.7; margin-left:auto; }
#burger {
  background:none; border:1px solid rgba(255,255,255,.35); color:#fff;
  font-size:18px; border-radius:8px; width:44px; height:38px; cursor:pointer;
}

.frame { display:flex; max-width:1100px; margin:0 auto; min-height:100vh; }

/* ── サイドメニュー ── */
aside {
  width:225px; flex-shrink:0; background:var(--sidebar); color:#fff;
  padding:18px 0 24px;
}
aside .logo { font-weight:700; font-size:16px; padding:0 18px 14px; border-bottom:1px solid rgba(255,255,255,.12); }
aside .logonote { font-size:10px; font-weight:400; opacity:.6; }
aside nav a {
  display:flex; align-items:center; min-height:44px; padding:8px 18px;
  color:rgba(255,255,255,.85); text-decoration:none; font-size:14px;
  border-left:3px solid transparent;
}
aside nav a:hover { background:rgba(255,255,255,.06); }
aside nav a.current { background:rgba(0,180,216,.14); border-left-color:var(--accent); color:#fff; font-weight:700; }
aside .divider { font-size:11px; color:rgba(255,255,255,.45); padding:14px 18px 4px; }
aside nav a.ext::after { content:"↗"; margin-left:auto; font-size:11px; opacity:.6; }
aside nav a.ext.disabled { opacity:.45; pointer-events:none; }

main { flex:1; min-width:0; padding:18px 16px 40px; }

/* ── 鮮度警告バナー（§14） ── */
.stale-banner {
  background:#fff7e0; border:1px solid #e6c15a; color:#7a5b00;
  border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:14px;
}
.stale-banner a { color:#7a5b00; }

/* ── 箱 ── */
.box {
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; margin-bottom:14px;
}
.box h2 { font-size:12px; color:var(--sub); font-weight:600; letter-spacing:.02em; margin-bottom:8px; }
.goalbox { border-left:4px solid var(--accent); }
.goal { font-size:17px; font-weight:700; }
.sub { font-size:12.5px; color:var(--sub); }
.note { font-size:11px; color:var(--grey); font-weight:400; }
.badge {
  display:inline-block; font-size:10.5px; font-weight:600; color:#8a6d00;
  background:#fff3cd; border:1px solid #e6c15a; border-radius:999px;
  padding:1px 9px; margin-left:6px; vertical-align:middle;
}

.num { font-size:30px; font-weight:800; letter-spacing:-.01em; }
.gauge { height:14px; background:#edf0f3; border-radius:999px; margin:8px 0 6px; overflow:hidden; }
.gauge .fill { height:100%; background:var(--accent); border-radius:999px; }
.gauge .fill.over { background:var(--green); }

/* ── 信号カード ── */
.cards { display:grid; grid-template-columns:1fr; gap:10px; }
.card {
  border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  min-height:44px; background:#fcfcfd;
}
.card .pillar { font-size:13.5px; font-weight:700; }
.card .signal {
  display:inline-block; font-size:12px; font-weight:700; border-radius:999px;
  padding:1px 10px; margin:6px 0 4px; color:#fff;
}
.signal.green { background:var(--green); }
.signal.yellow { background:var(--yellow); }
.signal.red { background:var(--red); }
.signal.untranscribed { background:var(--grey); }
.card .vs { font-size:12.5px; color:var(--sub); }

/* ── テーブル ── */
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:13.5px; }
th, td { border-bottom:1px solid var(--line); padding:9px 10px; text-align:left; white-space:nowrap; }
th { color:var(--sub); font-weight:600; font-size:12px; }
td.warn { color:var(--red); font-weight:700; }

select {
  font-size:15px; padding:9px 12px; min-height:44px;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}

.board-sec { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:12px; }
.board-sec h3 { font-size:14px; margin-bottom:6px; }
.board-sec p { font-size:13.5px; color:#333; margin:2px 0; }

.errorbox {
  background:#fdecea; border:1px solid #f5b9b5; color:#8a1f1b;
  border-radius:10px; padding:12px 14px; font-size:13px;
}

.foot { font-size:11px; color:var(--grey); padding-top:8px; border-top:1px solid var(--line); }

/* ── PC（701px〜）── */
@media (min-width:701px) {
  .mobilebar { display:none; }
  .cards { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
  main { padding:24px 28px 48px; }
}

/* ── スマホ（〜700px）：メニューはドロワー ── */
@media (max-width:700px) {
  aside {
    position:fixed; top:52px; left:0; bottom:0; z-index:20;
    transform:translateX(-100%); transition:transform .18s ease;
    overflow-y:auto; box-shadow:2px 0 14px rgba(0,0,0,.25);
  }
  aside.open { transform:translateX(0); }
  .num { font-size:26px; }
}