/* [DVIGO NVR] 라이브·재생·녹화/저장·사용자·규칙·마법사 화면 */
body:not([data-role=admin]) .adm-only{display:none!important}
#hchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid #223652;background:#0f1c30;color:#b8c7db;font-size:11px;white-space:nowrap;cursor:default}
.chip.ok{border-color:#1b4d46;background:#0f2a2e;color:#5ee3d3}.chip.warn{border-color:#6b5320;background:#3a2e12;color:#f2b134}.chip.bad{border-color:#7a2a2e;background:#3a1416;color:#ff7b7f}
.chip i.rec{width:7px;height:7px;border-radius:50%;background:#ff5a5f;display:inline-block;box-shadow:0 0 5px #ff5a5f}
nav#menu .lk{margin-top:4px}
/* ---- 라이브 ---- */
.lv{display:grid;grid-template-columns:210px 1fr 250px;gap:10px;min-height:0}
.lv.nosel{grid-template-columns:210px 1fr}.lv.nosel>aside:last-child{display:none!important}   /* [v1.3.0] 선택 없으면 오른쪽 칸 접음 */
.lv .tree{display:flex;flex-direction:column;gap:2px;font-size:12px;overflow:auto;max-height:calc(100vh - 180px)}
.lv .tree .g{color:var(--mut);font-size:11px;letter-spacing:.04em;margin-top:6px;display:flex;align-items:center;gap:6px}
.lv .tree .c{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:6px;cursor:pointer}.lv .tree .c:hover{background:#142640}.lv .tree .c.on{background:#13c7b41a;color:#5ee3d3}
.lv .tree .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}.lv .tree .dot.bad{background:var(--warn)}.lv .tree .dot.off{background:#55637a}
.lvbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.lvbar button.act{background:var(--acc);color:#04211d;border-color:var(--acc)}
#lvgrid{display:grid;gap:5px;grid-template-columns:repeat(var(--c,2),1fr);grid-auto-rows:1fr;background:#05090f;border:1px solid var(--line);border-radius:6px;padding:5px}
.lt{position:relative;background:#0a1322;border:1px solid #182942;border-radius:4px;overflow:hidden;aspect-ratio:16/9;cursor:pointer}
.lt.sel{outline:2px solid var(--acc);outline-offset:-2px}.lt video,.lt img{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.lt .nm{position:absolute;left:7px;top:5px;font-size:12px;display:flex;gap:6px;align-items:center;text-shadow:0 1px 2px #000;z-index:2}
.lt .nm .rec{width:8px;height:8px;border-radius:50%;background:#ff5a5f;box-shadow:0 0 6px #ff5a5f}.lt .nm .rec.off{background:#55637a;box-shadow:none}
.lt .ft{position:absolute;left:0;right:0;bottom:0;padding:3px 7px;background:linear-gradient(transparent,rgba(6,14,28,.85));font-size:11px;color:#b8c7db;display:flex;gap:10px;z-index:2}
.lt .off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f2b134;font-weight:bold;background:rgba(6,14,28,.45);z-index:3;text-align:center;font-size:12px}
.lt .bx{position:absolute;border:2px solid var(--acc);border-radius:2px;z-index:2;pointer-events:none}.lt .bx.v{border-color:#f2b134}
.lt .tools{position:absolute;right:5px;top:4px;display:none;gap:3px;z-index:3}.lt:hover .tools{display:flex}.lt .tools button{padding:1px 6px;font-size:11px}
.lt.empty{cursor:default;border-style:dashed}
#lvgrid.full{position:fixed;inset:0;z-index:40;border-radius:0;padding:0}
.ptz{display:grid;grid-template-columns:repeat(3,34px);gap:4px}.ptz button{width:34px;height:34px;border-radius:8px;padding:0;font-size:14px}
.ev{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:6px;background:#0a1322;border:1px solid #182942;font-size:11px;cursor:pointer}.ev:hover{border-color:var(--acc)}
.ev b{color:var(--txt)}.ev .t{color:var(--mut);margin-left:auto;white-space:nowrap}.ev .dot{width:7px;height:7px;border-radius:50%;flex:none}
.ticker{display:flex;gap:8px;align-items:center;margin-top:8px;padding:5px 10px;background:#0f1c30;border:1px solid var(--line);border-radius:6px;font-size:12px;overflow:hidden;white-space:nowrap}
.ticker .it{color:#b8c7db}.ticker .it b{color:var(--acc)}
.nk{color:var(--mut);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.card{background:#0f1c30;border:1px solid #182942;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
/* ---- 재생 ---- */
.pb{display:grid;grid-template-columns:1fr 270px;gap:10px}
#pbgrid{display:grid;gap:5px;grid-template-columns:repeat(var(--c,2),1fr);background:#05090f;border:1px solid var(--line);border-radius:6px;padding:5px}
#pbgrid.one{grid-template-columns:1fr}
.pt{position:relative;background:#000;border:1px solid #182942;border-radius:4px;overflow:hidden;aspect-ratio:16/9}.pt video{width:100%;height:100%;object-fit:contain;display:block}
.pt .nm{position:absolute;left:7px;top:5px;font-size:12px;text-shadow:0 1px 2px #000;z-index:2;display:flex;gap:6px;align-items:center}.pt .nm .x{cursor:pointer;color:var(--mut)}
.pt .off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f2b134;background:rgba(6,14,28,.6);font-size:12px;text-align:center;z-index:2}
.pbctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0}.pbctl button.act{background:var(--acc);color:#04211d;border-color:var(--acc)}
.pbctl .big{width:46px;height:34px;font-size:16px}
#pbtl{width:100%;height:auto;display:block;background:#0a1322;border:1px solid var(--line);border-radius:6px;cursor:crosshair;touch-action:none}
.lg{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin-top:4px}.lg i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:11px;text-align:center}.cal span{padding:4px 0;border-radius:4px;color:#b8c7db;cursor:pointer}.cal .h{color:var(--mut);cursor:default}.cal .r{background:#13c7b41a;color:#5ee3d3}.cal .on{background:var(--acc);color:#06221f;font-weight:bold}.cal .no{opacity:.35}
/* ---- 녹화·저장 ---- */
.disks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-bottom:10px}
.bigv{font-size:22px;font-weight:bold;color:#fff;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:#182942;overflow:hidden;width:100%}.bar i{display:block;height:100%;background:var(--acc)}.bar i.w{background:var(--warn)}.bar i.b{background:var(--bad)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:11px;color:var(--mut)}.kv b{color:var(--txt);font-weight:normal}
.seg{display:inline-flex;border:1px solid #223652;border-radius:6px;overflow:hidden}.seg span{padding:2px 8px;font-size:11px;color:var(--mut);cursor:pointer;user-select:none}.seg span.on{background:var(--acc);color:#06221f;font-weight:bold}
.d24{display:flex;height:10px;border-radius:3px;overflow:hidden;width:130px;background:repeating-linear-gradient(135deg,#3a2e12 0 3px,#0a1322 3px 6px);position:relative}.d24 i{position:absolute;top:0;bottom:0;background:#2b3a52}
/* ---- 규칙 그리기 ---- */
.rulecv{position:relative;display:inline-block;max-width:100%}.rulecv img{display:block;max-width:100%;max-height:60vh}.rulecv canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
/* ---- 마법사 ---- */
#wiz{position:fixed;inset:0;z-index:60;background:#0b1424;display:grid;grid-template-columns:300px 1fr;color:var(--txt)}
#wiz aside{background:#0b1a30;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:14px}
#wiz main{padding:26px 30px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.steps{display:flex;flex-direction:column;gap:4px}.steps .s{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:10px;color:var(--mut);font-size:13px}
.steps .s .n{width:28px;height:28px;border-radius:50%;border:1px solid #223652;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:12px;flex:none}
.steps .s.done{color:#5ee3d3}.steps .s.done .n{background:var(--acc);color:#06221f;border-color:var(--acc)}.steps .s.on{background:#0f1c30;color:#fff;font-weight:bold}.steps .s.on .n{border-color:var(--acc);color:var(--acc)}
.steps .s small{display:block;font-weight:normal;color:var(--mut);font-size:11px}
.wcam{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #182942;border-radius:8px;background:#0a1322;font-size:12px}.wcam .ip{color:var(--mut);font-size:11px}
.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#b8c7db}
.tabs2{display:flex;gap:4px;margin-bottom:8px}.tabs2 button.act{background:var(--acc);color:#04211d;border-color:var(--acc)}
.pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;background:#223;color:var(--mut)}.pill.admin{background:#13c7b433;color:#5ee3d3}.pill.operator{background:#3a2e12;color:#f2b134}

.lt.drag{opacity:.5}.lt.over{outline:2px dashed var(--acc);outline-offset:-2px}.lt video{transition:transform .05s;transform-origin:50% 50%}
.lt[data-zoom="1"]{cursor:grab}
#st_tbl td,#st_tbl th{white-space:nowrap}

/* ---- [v1.4.0] 오른쪽 클릭 메뉴 · 입력 창 · 타임시프트 띠 ---- */
.ctx{position:fixed;z-index:120;min-width:230px;background:#121d33;border:1px solid #33456a;border-radius:10px;padding:5px;box-shadow:0 14px 40px #000b;display:none;font-size:12.5px;color:var(--txt);user-select:none}
.ctx.open{display:block}
.ctx .hd{padding:4px 10px 6px;color:var(--mut);font-size:11px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;justify-content:space-between;gap:12px}.ctx .hd b{color:var(--txt);font-weight:600;white-space:nowrap}
.ctx .i{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.ctx .i:hover{background:#13c7b42a}.ctx .i.bad{color:#ff7b7f}.ctx .i.dis{color:var(--mut);cursor:default}.ctx .i.dis:hover{background:transparent}
.ctx .i .ic{width:18px;text-align:center;flex:none;opacity:.85;color:var(--acc)}.ctx .i.bad .ic{color:#ff7b7f}.ctx .i .t{flex:1}
.ctx .i .nt{color:var(--mut);font-size:10.5px}.ctx .i kbd{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--mut);background:#0f1c30;border:1px solid var(--line);border-radius:4px;padding:0 5px}.ctx .i .ar{color:var(--mut);font-size:10px}
.ctx .d{height:1px;background:var(--line);margin:4px 6px}
.ctx.sub{position:absolute;left:100%;top:-6px;min-width:190px;display:none}.ctx.sub.open{display:block}
.ctxask{position:fixed;inset:0;z-index:130;background:#0008;display:flex;align-items:center;justify-content:center}
.ctxask .box{background:#121d33;border:1px solid #33456a;border-radius:10px;padding:14px 16px;min-width:320px;display:flex;flex-direction:column;gap:8px;box-shadow:0 14px 40px #000b}
.ctxask input{width:100%;box-sizing:border-box}.ctxask .row{display:flex;gap:6px;justify-content:flex-end}
.ctxask .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px}.ctxask .kv span{color:var(--mut)}.ctxask .kv b{font-weight:normal;word-break:break-all}
.lt .tsbar{position:absolute;left:0;right:0;top:24px;display:flex;gap:4px;align-items:center;padding:3px 7px;background:linear-gradient(#0b1424e6,#0b1424b0);color:#f2b134;font-size:11px;z-index:4}.lt .tsbar span{flex:1}.lt .tsbar button{padding:0 6px;font-size:10px}
.lt .bx{pointer-events:auto;cursor:context-menu}

/* ---- [v1.6.0] 주차관제 ---- */
.pkhead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.pkapp{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--warn);background:#3a2e12;border-radius:8px;margin-bottom:8px;animation:acflash 1.6s ease-out}
.plate{font-family:Consolas,"Malgun Gothic",monospace;font-weight:700;letter-spacing:.03em}
.pklots{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.pklot{background:#0f1c30;border:1px solid #182942;border-radius:10px;padding:10px 12px}
.pklot-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}.pklot-h b{font-size:14px}
.pklanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px}
.pklane{display:grid;grid-template-columns:150px 1fr;gap:10px;background:#0a1322;border:1px solid #182942;border-radius:8px;padding:8px;min-width:0}
.pklane.off{border-color:#6b5320}.pklane-cam{position:relative;aspect-ratio:16/9;background:#000;border-radius:5px;overflow:hidden;cursor:pointer}.pklane-cam img{width:100%;height:100%;object-fit:cover;display:block}
.pklane-cam .dir{position:absolute;left:5px;top:4px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;background:#13c7b4;color:#06221f}.pklane-cam .dir.out{background:#f2b134;color:#2a1a00}.pklane-cam .dir.both{background:#5aa9ff;color:#06221f}
.pklane-cam .camoff{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0008;color:var(--warn);font-size:11px;font-weight:700}
.pklane-b{min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12px}.pklast{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pklast .plate{font-size:17px}
.pkflow{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:10px;min-height:0}
.pkrows{display:flex;flex-direction:column;gap:3px;max-height:60vh;overflow:auto;margin-top:6px}
.pkrow{display:grid;grid-template-columns:44px 84px 1fr auto 90px;gap:8px;align-items:center;padding:5px 8px;border:1px solid #182942;border-radius:7px;background:#0a1322;cursor:pointer;user-select:none}
.pkrow:hover{border-color:var(--acc)}.pkrow.sel{background:#13263a;border-color:var(--acc)}.pkrow.deny{border-left:3px solid #ff5a5f}
.pkrow .dir{font-size:11px;font-weight:700;padding:2px 0;border-radius:4px;text-align:center;background:#13c7b433;color:#5ee3d3}.pkrow .dir.out{background:#f2b13433;color:#f2b134}
.pkrow img{width:84px;height:32px;object-fit:cover;border-radius:4px;background:#000;cursor:zoom-in}.pkrow .noimg{width:84px;height:32px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--mut);border:1px dashed #223652;border-radius:4px}
.pkrow .tx{min-width:0;display:flex;flex-direction:column}.pkrow .tx .plate{font-size:15px}.pkrow .tx .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkrow .tm{font-family:Consolas,monospace;font-size:11.5px;color:var(--mut);text-align:right}
.pkday{color:var(--mut);font-size:11px;padding:6px 4px 2px;letter-spacing:.04em}
.pkdet{min-width:0}.pkdet .kv{display:grid;grid-template-columns:52px minmax(0,1fr);gap:3px 10px;font-size:12px;margin-top:6px}.pkdet .kv span{color:var(--mut)}.pkdet .kv b{font-weight:normal;word-break:break-all}
.pkacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.pktbl{width:100%;border-collapse:collapse;font-size:12px}.pktbl th{text-align:left;color:var(--mut);font-weight:normal;padding:4px 8px;border-bottom:1px solid var(--line);font-size:11px}.pktbl td{padding:5px 8px;border-bottom:1px solid #182942;vertical-align:middle}.pktbl tr:hover td{background:#101a28}
.pkset{display:flex;flex-direction:column;gap:10px}.pkset .card .row{margin-bottom:6px}
.tag.member{background:#13c7b426;color:#5ee3d3}.tag.staff{background:#5aa9ff26;color:#5aa9ff}.tag.visitor{background:#5f6f8a33;color:var(--mut)}.tag.blacklist{background:#ff5a5f2e;color:#ff7b7f}
@media(max-width:1100px){.pkflow{grid-template-columns:1fr}.pkdet{display:none}}

/* [1.7.0] 객체 수 · 계수 구역 */
.lt .cnt{position:absolute;right:4px;top:4px;z-index:3;font-size:11px;line-height:1.45;background:rgba(0,0,0,.62);color:#fff;padding:2px 7px;border-radius:3px;pointer-events:none;text-align:right;white-space:nowrap}.lt .cnt b{color:#13c7b4}.lt .cnt .ov{color:#ff6b6b;font-weight:bold}
.lt .zn{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}