:root { color-scheme: light; --bg:#f4f2ec; --fg:#1b1b1a; --dim:#6d6a63; --line:#d9d5cb; --mark:#1b1b1a;
        --card:#fff; --track:#eeeae2; --rec:#b3261e; --out:#4a7fb0; }
/* 어두운 화면. 무대(왼쪽 큰 화면)의 색은 stage.js 가 정하므로 여기서 바꾸지 않는다 */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg:#141413; --fg:#ecebe6; --dim:#a19d94; --line:#34322e; --mark:#ecebe6;
          --card:#1e1d1b; --track:#2d2b28; --rec:#e5534b; --out:#9fc8ff; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--fg);
       font-family: system-ui, -apple-system, "Pretendard", sans-serif; font-size:14px; }
.app { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:16px; padding:16px; min-height:100%; }
.left { display:flex; flex-direction:column; min-width:0; position:sticky; top:16px; height:calc(100vh - 32px); }
#stage { flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
#out { display:block; width:100%; height:100%; border-radius:10px; background:#0c0f14; }
#preview { width:100%; aspect-ratio:4/3; border-radius:8px; background:#0c0f14; display:block; margin-bottom:8px; }
#phase { font-size:15px; margin:2px 0 8px; }

.bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.bar .fps { color:var(--dim); font-variant-numeric:tabular-nums; margin-left:auto; }
aside { display:flex; flex-direction:column; gap:12px; min-width:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
h2 { font-size:13px; color:var(--dim); margin:0 0 8px; font-weight:600; }
#status { color:var(--dim); font-size:12.5px; margin-top:8px; line-height:1.45; }
select, button { font:inherit; }
select { width:100%; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); }
button { padding:7px 14px; border-radius:999px; border:1px solid var(--mark); background:var(--card); color:var(--mark); cursor:pointer; }
button.on { background:var(--rec); border-color:var(--rec); color:#fff; }
.param { display:grid; grid-template-columns: 136px 1fr 40px; align-items:center; gap:8px; margin:7px 0; }
.param span { color:var(--dim); font-size:12.5px; }
.param input[type=range] { width:100%; accent-color:var(--mark); }
.param output { text-align:right; font-variant-numeric:tabular-nums; font-size:12px; color:var(--dim); }
.meter { display:grid; grid-template-columns: 84px 1fr 44px; align-items:center; gap:8px; margin:4px 0; font-size:12.5px; }
.meter span { color:var(--dim); }
.meter i { height:6px; background:var(--track); border-radius:999px; overflow:hidden; }
.meter b { display:block; height:100%; width:0; background:var(--mark); }
.meter output { text-align:right; font-variant-numeric:tabular-nums; color:var(--dim); }
.meter.out i { background: rgba(74,127,176,0.18); }
.meter.out b { background: var(--out); }
.hint { color:var(--dim); font-size:11.5px; margin-top:8px; line-height:1.5; }
.keys { color:var(--dim); font-size:12px; line-height:1.6; }

/* 무대만 보기. 전시용 화면 */
body.display { background:#000; }
body.display .app { display:block; padding:0; height:100vh; }
body.display aside, body.display .bar { display:none; }
body.display .left { height:100vh; position:static; }
body.display #stage canvas { border-radius:0; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .left { position:static; height:58vh; }
}