:root {
  --bg:#0e1117; --panel:#171c26; --panel2:#1f2632; --line:#2a3240; --text:#e8ecf3;
  --muted:#93a0b4; --primary:#2f6bff; --ok:#2ec26b; --danger:#e23744; --warn:#f5a623;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Pretendard',system-ui,'Malgun Gothic',sans-serif; background:var(--bg); color:var(--text); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { font-size:22px; font-weight:800; }
.conn { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.conn .dot { width:10px; height:10px; border-radius:50%; background:#666; }
.conn.ok .dot { background:var(--ok); }
main { padding:24px; max-width:1100px; margin:0 auto; }
.summary { font-size:16px; color:var(--muted); margin-bottom:16px; }
.summary b { color:var(--text); font-size:20px; }
.empty { color:var(--muted); text-align:center; padding:60px 20px; font-size:15px; }

.clients { display:flex; flex-direction:column; gap:16px; }
.client { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; }
.client-head { display:flex; align-items:center; gap:12px; }
.state-dot { width:12px; height:12px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.state-dot.stale { background:var(--warn); }
.client-name { font-size:19px; font-weight:800; }
.client-sub { color:var(--muted); font-size:13px; }
.client-id { margin-left:auto; font-family:monospace; color:var(--muted); font-size:12px; background:var(--bg); padding:4px 8px; border-radius:6px; }

.stats { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.stat { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; }
.stat b { font-weight:800; }
.stat.mode-emergency { border-color:var(--danger); color:#ff9aa2; }
.stat.mode-schedule { border-color:var(--ok); }

.actions { display:flex; flex-wrap:wrap; gap:8px; }
.btn { padding:10px 16px; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; }
.btn:hover { background:#263041; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-danger { background:var(--danger); border-color:var(--danger); }
.btn-outline { background:transparent; }

.ctrl-panel { margin-top:14px; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; display:none; }
.ctrl-panel.open { display:block; }
.ctrl-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.ctrl-row label { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.ctrl-row select, .ctrl-row input { padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--text); }

.output { margin-top:12px; background:#0a0d13; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:monospace; font-size:12px; color:#9fe6b8; max-height:180px; overflow:auto; white-space:pre-wrap; display:none; }
.output.show { display:block; }

/* 모달 */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; width:min(640px,94vw); max-height:90vh; overflow:auto; }
.modal h2 { margin-bottom:12px; }
.hint { color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:14px; }
.hint code { background:var(--bg); padding:2px 6px; border-radius:5px; }
.file-rows { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.file-row { display:flex; gap:8px; align-items:center; }
.file-row .fname { flex:0 0 190px; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row input { flex:1; padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-family:monospace; font-size:13px; }
.chk { display:flex; align-items:center; gap:8px; font-size:14px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }

/* 원격 스케줄 편성 */
.modal-wide { width:min(760px,96vw); }
.sm-head { display:flex; align-items:center; justify-content:space-between; }
.sm-client { font-size:14px; color:var(--muted); font-weight:600; }
.sm-section { border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:14px; }
.sm-row-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sm-list { display:flex; flex-direction:column; gap:8px; }
.sm-list .empty { color:var(--muted); padding:16px; text-align:center; }
.sm-sched { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.sm-sched.off { opacity:.5; }
.sm-sched .m { flex:1; }
.sm-sched .m b { font-size:15px; }
.sm-sched .m small { display:block; color:var(--muted); margin-top:2px; }
.f { display:block; margin-bottom:12px; }
.f > span { display:block; margin-bottom:6px; font-weight:700; font-size:14px; }
.f input[type=text] { width:100%; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.time-row { display:flex; gap:16px; align-items:center; margin-bottom:12px; }
.time-row input[type=time] { padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); margin-left:6px; }
.days { display:flex; gap:6px; }
.day-btn { width:42px; height:42px; border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-weight:800; cursor:pointer; }
.day-btn.on { background:var(--primary); border-color:var(--primary); }
.sm-playlist { display:flex; flex-direction:column; gap:6px; min-height:44px; border:1px dashed var(--line); border-radius:8px; padding:8px; }
.sm-playlist .empty { color:var(--muted); text-align:center; padding:10px; font-size:13px; }
.pl { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:8px 10px; }
.pl .num { width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pl .nm { flex:1; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl .mv { background:transparent; border:1px solid var(--line); color:var(--text); width:26px; height:26px; border-radius:6px; cursor:pointer; }
.pl .rm { background:transparent; border:none; color:#ff8a8a; font-size:16px; cursor:pointer; }
.sm-library { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; max-height:160px; overflow:auto; }
.lib { border:1px solid var(--line); border-radius:7px; padding:8px; cursor:pointer; background:var(--bg); font-size:13px; display:flex; gap:6px; align-items:center; }
.lib:hover { border-color:var(--primary); }
.lib .cnt { width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; font-size:11px; display:none; align-items:center; justify-content:center; font-weight:800; }
.lib.on .cnt { display:flex; }
.lib .lnm { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-yt { display:flex; gap:8px; }
.sm-yt input { flex:1; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.sm-apply { display:flex; gap:12px; align-items:stretch; margin-top:6px; }
.sm-apply-btn { flex:0 0 auto; font-size:15px; }
/* 서브탭 (스케줄 / 포스터) */
.sm-subtabs { display:flex; gap:6px; margin-bottom:14px; }
.sm-subtab { padding:10px 18px; border:1px solid var(--line); background:var(--bg); color:var(--muted); border-radius:10px; font-weight:800; cursor:pointer; }
.sm-subtab.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.box-priority { background:#2a2410; border:1px solid #5c4f1e; color:#ffe08a; border-radius:10px; padding:11px 14px; font-size:13.5px; margin-bottom:14px; }
/* 포스터 시간대 */
.slot-list { display:flex; flex-direction:column; gap:8px; }
.slot-row { display:flex; align-items:center; gap:10px; }
.slot-row input[type=time] { padding:9px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.slot-row .tilde { color:var(--muted); }
.slot-row .slot-del { background:transparent; border:none; color:#ff8a8a; font-size:18px; cursor:pointer; }