:root{--bg:#0d1117;--bg2:#151b23;--bg3:#1c2430;--line:#2a3541;--fg:#e6edf3;--fg2:#9aa7b4;--fg3:#6b7987;--accent:#3b82f6;--accent2:#60a5fa;--rec:#dc2626;--ok:#22c55e;--warn:#f59e0b;--c51:#ef4444;--c52:#3b82f6;--c53:#8b5cf6;--c54:#f59e0b;--c55:#10b981;--cem1:#ef4444;--cem2:#f97316;--cem3:#eab308;--cem4:#22c55e;--cem5:#14b8a6;--cem6:#3b82f6;--cem7:#8b5cf6;--cem8:#ec4899}.app.theme-em .topbar{background:#1a1526;border-bottom-color:#3b2f52}.app.theme-em .topbar .title{color:#c4b5fd}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font:13px/1.45 Pretendard,Malgun Gothic,Apple SD Gothic Neo,system-ui,sans-serif;overflow:hidden}button{font:inherit;color:inherit;background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer}button:hover:not(:disabled){background:#26313f;border-color:#3a4757}button:disabled{opacity:.4;cursor:not-allowed}button.on{background:var(--accent);border-color:var(--accent);color:#fff}input,select{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 8px}input:focus,select:focus{outline:1px solid var(--accent);border-color:var(--accent)}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}.topbar .title{font-weight:700;letter-spacing:.3px;margin-right:6px;white-space:nowrap}.topbar .spacer{flex:1}.main{flex:1;display:flex;min-height:0}.stage{flex:1 1 70%;min-width:0;display:flex;flex-direction:column;background:#000}.side{flex:0 0 442px;max-width:49%;border-left:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;min-height:0}.timeline-bar{flex:0 0 96px;display:flex;align-items:stretch;gap:10px;padding:8px 12px;background:var(--bg2);border-top:1px solid var(--line)}@media (max-width:1100px){.side{flex-basis:377px}}.grid{flex:1;display:grid;gap:2px;padding:2px;min-height:0;background:#05070a}.grid[data-split="9"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.grid[data-split="6"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.grid[data-split="4"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.grid[data-split="1"]{grid-template-columns:1fr;grid-template-rows:1fr}.tile{position:relative;background:#000;border:1px solid #1b2430;overflow:hidden;min-height:0;cursor:pointer}.tile.focused{border-color:var(--accent)}.tile .host{position:absolute;top:0;right:0;bottom:0;left:0}.tile .label{position:absolute;left:6px;top:6px;z-index:3;display:flex;align-items:center;gap:6px;background:#0009;padding:2px 8px;border-radius:5px;font-size:12px;pointer-events:none}.tile .badge{display:inline-block;width:22px;text-align:center;border-radius:4px;font-weight:700;font-size:11px;color:#fff;padding:1px 0}.tile .tstamp{position:absolute;right:6px;top:6px;z-index:3;background:#0009;padding:2px 8px;border-radius:5px;font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;color:var(--fg2)}.tile .state{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:var(--fg3);font-size:12px;z-index:2;pointer-events:none}.tile.empty{background:var(--bg2);cursor:default;display:flex;align-items:center;justify-content:center;padding:10px}.statusbox{width:100%;height:100%;display:flex;flex-direction:column;gap:6px;justify-content:center;font-size:12px;color:var(--fg2)}.statusbox b{color:var(--fg)}.statusbox .row{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:3px}.clock{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;min-width:150px}.clock .t{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}.clock .d{color:var(--fg2);font-size:12px}.tl-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}.tl-meta{display:flex;justify-content:space-between;color:var(--fg3);font-size:11px}.tl{position:relative;height:44px;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:crosshair;-webkit-user-select:none;user-select:none}.tl-seg{position:absolute;top:14px;height:14px;background:var(--rec);opacity:.85;border-radius:2px;pointer-events:none}.tl-ev{position:absolute;top:32px;width:3px;height:8px;border-radius:1px;pointer-events:none}.tl-tick{position:absolute;top:0;bottom:0;border-left:1px solid #222c38;pointer-events:none}.tl-tick span{position:absolute;top:1px;left:3px;font-size:10px;color:var(--fg3);white-space:nowrap}.tl-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--accent2);box-shadow:0 0 6px var(--accent);pointer-events:none;z-index:4}.tl-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:5px}.tl-ctrl .grp{display:flex;gap:4px}.side .filters{padding:8px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;flex:0 0 auto}.side .filters .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.side .filters input[type=date]{width:132px}.side .filters input[type=time]{width:96px}.side .filters .q{flex:1;min-width:120px}.chk{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--fg2);cursor:pointer;white-space:nowrap}.chk input{margin:0}.evcount{color:var(--fg3);font-size:11px}.evlist{flex:1;overflow-y:auto;min-height:0}.ev{display:flex;gap:8px;padding:7px 9px;border-bottom:1px solid #1a222c;cursor:pointer;align-items:center}.ev:hover{background:#19212b}.ev.sel{background:#1d2c44;box-shadow:inset 3px 0 0 var(--accent)}.ev .n{width:26px;flex:0 0 auto;color:var(--fg3);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}.ev .thumb{width:83px;height:57px;flex:0 0 auto;border-radius:4px;object-fit:cover;background:#0a0e13;border:1px solid var(--line)}.ev .thumb.ph{display:flex;align-items:center;justify-content:center;color:var(--fg3);font-size:16px}.ev .body{flex:1;min-width:0}.ev .l1{display:flex;align-items:center;gap:4px 5px;flex-wrap:wrap}.ev .l1 .t{font-weight:600;white-space:nowrap;flex:0 0 auto}.ev .l2{color:var(--fg2);font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ev .l2.desc{display:inline-block;max-width:100%;vertical-align:top;cursor:text;border-bottom:1px dashed transparent;border-radius:2px}.ev .l2.desc:hover{color:var(--fg);border-bottom-color:var(--line);background:#182131}.ev .l2.desc.ph{color:var(--fg3);font-style:italic;font-weight:400}.ev .l2.desc-edit{display:flex;align-items:center;gap:6px;white-space:normal}.ev .desc-input{flex:1;min-width:0;font-size:11.5px;padding:2px 5px;background:#0a0e13;color:var(--fg);border:1px solid var(--accent);border-radius:3px;outline:none}.ev .desc-saving{flex:0 0 auto;font-size:10px;color:var(--fg3)}.ev .l3{color:var(--fg3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ev .time{flex:0 0 auto;color:var(--fg2);font-size:11.5px;font-variant-numeric:tabular-nums}.cam{display:inline-block;min-width:20px;text-align:center;border-radius:3px;font-size:10px;font-weight:700;color:#fff;padding:1px 4px}.cam51{background:var(--c51)}.ev .cam51,.cs-row .cam51{background:#4b5563}.cam52{background:var(--c52)}.cam53{background:var(--c53)}.cam54{background:var(--c54)}.cam55{background:var(--c55)}.camem1{background:var(--cem1)}.camem2{background:var(--cem2)}.camem3{background:var(--cem3)}.camem4{background:var(--cem4)}.camem5{background:var(--cem5)}.camem6{background:var(--cem6)}.camem7{background:var(--cem7)}.camem8{background:var(--cem8)}.tag{font-size:10px;color:var(--fg3);border:1px solid var(--line);border-radius:3px;padding:0 3px}.more{padding:10px;text-align:center}.pin{height:100%;display:flex;align-items:center;justify-content:center}.pin form{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:26px 30px;display:flex;flex-direction:column;gap:12px;align-items:center;width:280px}.pin h1{font-size:16px;margin:0}.pin input{width:100%;text-align:center;font-size:22px;letter-spacing:8px;padding:9px}.pin .err{color:#f87171;font-size:12px;min-height:16px}.toasts{position:fixed;right:14px;bottom:110px;z-index:50;display:flex;flex-direction:column;gap:6px}.toast{background:#2b1d1d;border:1px solid #6b2b2b;color:#fecaca;padding:7px 12px;border-radius:7px;font-size:12px;max-width:380px}.toast.info{background:#16242f;border-color:#2b4a63;color:#bae6fd}.foot{font-size:11px;color:var(--fg3);white-space:nowrap}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--fg3);margin-right:4px}.dot.ok{background:var(--ok)}.dot.live{background:var(--rec)}.dot.warn{background:var(--warn)}.tile.norec{background:#0b0f14}.tile.norec .label{opacity:.45}.norec-box{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:10px;background:#080b0fb8}.norec-box .t1{color:var(--fg2);font-size:13px;font-weight:600}.norec-box .back-10m{margin-top:6px}.norec-box .t2{color:var(--fg3);font-size:11px;line-height:1.35;max-width:230px}.norec-box .t3{color:var(--fg2);font-size:12px;margin-top:2px}.norec-box .t3 b{color:var(--accent2);font-variant-numeric:tabular-nums}.norec-box .next-rec{margin-top:4px;padding:4px 10px;font-size:12px;background:var(--accent);border-color:var(--accent);color:#fff}.norec-box .next-rec:hover{background:#2f6fd8}.tile.off{display:none!important}.nvr-alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 12px;background:#3a1d1d;border-bottom:1px solid #7f2d2d;color:#fecaca;font-size:12px;flex:0 0 auto}.nvr-alert b{color:#fff;white-space:nowrap}.nvr-alert span{color:#fca5a5;flex:1;min-width:200px}.nvr-alert a{color:#fde68a;text-decoration:underline;white-space:nowrap}.nvr-alert button{padding:2px 8px;font-size:11px;background:#4a2323;border-color:#7f2d2d}.grid-pager{display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--bg2);border-bottom:1px solid var(--line);flex:0 0 auto}.grid-pager button{padding:2px 10px;font-size:12px}.grid-pager .hint{color:var(--fg3);font-size:11px}.ev .l1 .tag.dup{color:var(--accent2);border-color:#2f4a72;background:#16223a}.ev .l1 .dup-range{font-size:10.5px;color:var(--fg3);font-variant-numeric:tabular-nums;white-space:nowrap}.tile.empty.search{padding:0;align-items:stretch;justify-content:stretch;cursor:default}.carsearch{width:100%;height:100%;display:flex;flex-direction:column;min-height:0;background:var(--bg2)}.cs-head{display:flex;gap:6px;padding:8px 8px 4px;flex:0 0 auto}.cs-q{flex:1;min-width:0;font-size:13px;padding:6px 9px}.cs-range{flex:0 0 auto;padding:4px 6px;font-size:12px}.cs-meta{padding:0 10px 5px;color:var(--fg3);font-size:11px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-meta .cs-err{color:#f87171}.cs-list{flex:1;min-height:0;overflow-y:auto;border-top:1px solid var(--line)}.cs-row{display:flex;gap:8px;padding:6px 9px;border-bottom:1px solid #1a222c;cursor:pointer;align-items:center}.cs-row:hover{background:#19212b}.cs-row.sel{background:#1d2c44;box-shadow:inset 3px 0 0 var(--accent)}.cs-thumb{width:83px;height:57px;flex:0 0 auto;border-radius:4px;object-fit:cover;background:#0a0e13;border:1px solid var(--line)}.cs-thumb.ph{display:flex;align-items:center;justify-content:center;color:var(--fg3);font-size:18px}.cs-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.cs-plate{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-plate b{font-size:13.5px;letter-spacing:.2px}.cs-desc{color:var(--fg2);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-desc.ph{color:var(--fg3);font-style:italic;font-weight:400}.cs-when{color:var(--fg3);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}.cs-when .cs-range-t{color:var(--fg3)}.cs-empty{padding:14px;text-align:center;color:var(--fg3);font-size:12px}.cs-status{flex:0 0 auto;padding:4px 10px;border-top:1px solid var(--line);color:var(--fg3);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-status b{color:var(--fg2)}.cs-status .cs-chs{font-variant-numeric:tabular-nums}.viewer-shell{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}.app.theme-tvt,.app.theme-em{display:block;overflow-y:auto;overflow-x:hidden}.app.theme-tvt>.viewer-shell,.app.theme-em>.viewer-shell{height:100%;min-height:100%;flex:none}.vehicle-review{background:var(--bg2);border-top:1px solid var(--line);padding:12px;width:100%;box-sizing:border-box}.review-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.review-toolbar strong{margin-right:auto}.review-toolbar input{width:200px;max-width:100%}.review-nav{display:flex;align-items:center;gap:8px;color:var(--fg2);font-size:12px}.review-nav button{font-size:18px;padding:0 12px}.review-hint{display:block;color:var(--fg2);font-size:12px;margin:5px 0 8px}.review-error{color:#fca5a5}.review-content{display:flex;flex-direction:column;gap:16px}.contact-sheet{display:grid;width:100%;height:calc(100vh - 100px);min-height:440px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px}.review-frame{position:relative;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;border-radius:5px;background:#080d13;min-width:0;min-height:0}.review-frame:disabled{opacity:1;cursor:default;color:var(--fg3)}.review-frame img{width:100%;height:100%;object-fit:contain}.review-frame:not(:disabled):hover{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}.review-frame time{position:absolute;bottom:0;left:0;right:0;background:#000b;font-size:13px;font-variant-numeric:tabular-nums;padding:2px 6px;text-align:left;color:#fff}.review-frame>span{font-size:13px}.capture-picker{display:flex;flex-direction:column;gap:5px;min-width:0;padding:8px 0}.capture-list{display:flex;flex-wrap:wrap;gap:8px}.capture-choice{width:140px;padding:3px;display:flex;flex-direction:column;gap:2px;align-items:center;min-width:0}.capture-choice:disabled{opacity:1}.capture-choice img{width:100%;aspect-ratio:1;object-fit:contain;background:#080d13}.capture-choice time,.capture-choice small{font-size:12px}.capture-choice.on{box-shadow:0 0 0 2px var(--accent2)}#save-vehicle-photo{align-self:flex-start;min-width:180px}
