/* ============================================================
   SVMS 대상 검색 — Working Mockup
   Design tokens extracted from Figma GUI
   file  Tnihi6lixRR47N4RSAwUbF
   node  3668:49821 (객체검색_1차공유_260812)
   ============================================================ */
:root{
  /* --- Figma 원본 토큰 --- */
  --bg-0:#0d0e12;          /* color/bg/level-0 */
  --bg-1:#131418;          /* color/bg/level-1 */
  --bg-2:#1c1d23;          /* color/bg/level-2 */
  --bg-3:#24252c;          /* color/bg/level-3 */
  --ln-subtle:#2e2f38;     /* color/line/gray/subtle */
  --ln-border:#3e4049;     /* color/form-control/border/default */
  --tx-primary:#ecedf0;    /* color/text/title|body/primary */
  --tx-secondary:#b8babf;  /* color/text/title|body/secondary */
  --tx-tertiary:#8a8c96;   /* color/text/body/tertiary */
  --tx-helper:#55575f;     /* color/text/state/helper, placeholder */
  --ic-gray:#8a8c96;       /* color/icon/gray */
  --ic-gray-dark:#b8babf;  /* color/icon/gray-dark */
  --primary:#3070d8;       /* color/button/bg/primary--default */
  --st-high:#3fbe7e;       /* color/text/status/High */
  --st-mid:#e88038;        /* color/text/status/medium */
  --st-low:#e8c048;        /* color/text/status/low */
  --ai-line:#b59fe4;
  --ai-tx:#787fff;
  --overlay:rgba(0,0,0,.75); /* color/overlay #000000bf */

  /* --- 기존 클래스가 참조하는 이름을 새 팔레트로 재지정 --- */
  --bg:var(--bg-0);
  --panel:var(--bg-2);
  --tabbar:var(--bg-2);
  --card:var(--bg-3);
  --card-img:var(--bg-2);
  --ai-bg:var(--bg-2);

  --accent:var(--primary);
  --accent-2:var(--primary);
  --accent-3:var(--primary);
  --label-on:var(--primary);
  --muted:var(--tx-tertiary);

  --line:var(--ln-subtle);
  --line-2:var(--ln-border);
  --chip:var(--bg-2);
  --badge:var(--overlay);

  --sim-hi:var(--st-high);
  --sim-mid:var(--st-mid);
  --sim-low:var(--st-low);

  --danger:#e05260;

  --h-win:34px;  --h-gnb:36px;  --h-mb:36px;  --h-tb:36px;
  /* Tool Bar 실측 : 44px (padding 6 / gap 20 / Menu 32×32 · pad 4) */
  --w-side:360px; --w-preview:400px; --w-rail:44px;
  --r:4px; --r6:6px;

  --font:'Pretendard','Pretendard Variable','Noto Sans KR','Malgun Gothic',-apple-system,sans-serif;
  --mono:'Menlo','Consolas','D2Coding',monospace;
}

/* 아이콘 정의는 assets/css/icons.css (build-icons.js 로 생성) 에 있음 */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:#fff; font-family:var(--font); font-size:12px;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{cursor:pointer;text-decoration:none;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(74,101,117,.4);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}
.ic{width:16px;height:16px;display:block}
[hidden]{display:none !important}

.app{display:flex;flex-direction:column;height:100vh;min-width:1280px}

/* ===================== Window chrome (Header tab-full) ===================== */
.win{
  height:var(--h-win);flex:0 0 var(--h-win);display:flex;align-items:stretch;
  background:var(--bg-3);
}
.win-l,.win-r{display:flex;align-items:stretch}
.win-logo{
  width:40px;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--bg-0);
}
.win-logo img{width:15px;height:18px;object-fit:contain;display:block}
.win-btn{
  width:34px;display:flex;align-items:center;justify-content:center;
  color:var(--ic-gray-dark);border-right:1px solid var(--bg-0);
}
.win-r .win-btn{border-right:0}
.win-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.win-tabs{flex:1;min-width:0;display:flex;align-items:stretch}
.win-tab{
  display:flex;align-items:center;gap:4px;height:100%;padding:0 8px;
  width:256px;max-width:256px;min-width:34px;background:var(--bg-1);
  font-size:13px;font-weight:500;color:var(--tx-primary);cursor:default;
}
.win-tab .i{color:var(--ic-gray)}
.win-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.325px}
.win-tab.add{width:34px;justify-content:center;background:var(--bg-3);color:var(--ic-gray-dark);cursor:pointer}
.win-tab.add:hover{background:rgba(255,255,255,.07)}
.win-profile{
  width:20px;height:20px;align-self:center;margin:0 6px;border-radius:4px;
  background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--ic-gray-dark);
}

/* ===================== Top bar ===================== */
.menubar{
  height:var(--h-mb);flex:0 0 var(--h-mb);display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:var(--bg-2);border-bottom:1px solid var(--ln-subtle);
}
.mb-title{font-size:14px;font-weight:500;color:var(--tx-primary);letter-spacing:-.28px}
.mb-right{display:flex}
.mb-right a{
  width:124px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;color:var(--tx-tertiary);letter-spacing:-.28px;position:relative;
}
.mb-right a:hover{color:var(--tx-secondary)}
.mb-right a.on{color:var(--tx-primary)}
.mb-right a.on::after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--primary)}

/* ===================== Tab bar ===================== */
.tabbar{
  height:var(--h-tb);flex:0 0 var(--h-tb);display:flex;align-items:center;gap:12px;
  padding:0 16px;background:var(--bg-2);
}
.btn-ai{
  display:flex;align-items:center;gap:2px;padding:4px 8px;border-radius:9999px;
  border:1px solid var(--ai-line);font-size:12px;font-weight:500;color:var(--ai-tx);
}
.btn-ai:hover{background:rgba(181,159,228,.12)}
.btn-ai.on{background:rgba(181,159,228,.2)}
.btn-icon{
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r);color:var(--ic-gray);position:relative;flex:0 0 auto;
}
.btn-icon:hover{background:rgba(255,255,255,.08);color:var(--tx-primary)}
.tb-div{width:1px;height:16px;background:var(--ln-subtle);flex:0 0 1px}
.tabs{display:flex;align-items:center;gap:0;height:100%;overflow:hidden}
.tab{
  position:relative;display:flex;align-items:center;gap:4px;height:26px;
  padding:0 8px;max-width:200px;font-size:13px;font-weight:500;color:var(--tx-tertiary);
  border-radius:var(--r);cursor:pointer;
}
.tab::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--ln-subtle);
}
.tab:last-child::after{display:none}
.tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab.on{color:var(--tx-primary);background:var(--bg-0)}
.tab.on::after{display:none}
.tab .x{width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:11px;color:var(--tx-tertiary)}
.tab .x:hover{background:rgba(255,255,255,.14);color:#fff}

/* ===================== Workspace ===================== */
.workspace{flex:1;display:flex;gap:8px;min-height:0;position:relative;padding:8px;background:var(--bg-0)}

/* ===================== Side panel ===================== */
.side{
  width:var(--w-side);flex:0 0 var(--w-side);background:var(--bg-2);border-radius:var(--r);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.side.detached{
  position:fixed;z-index:60;left:120px;top:140px;height:640px;
  border:1px solid var(--ln-border);box-shadow:0 18px 48px rgba(0,0,0,.65);
}
.side.detached .side-head{cursor:move}
.side-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--ln-subtle);
}
.side-title{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:500;color:var(--tx-primary);letter-spacing:-.32px}
.side-title .ic{display:none}
.side-head-btns{display:flex;gap:16px;color:var(--ic-gray)}
.side-head-btns .btn-icon{width:20px;height:20px}
.side-body{flex:1;display:flex;min-height:0}

.mode-rail{
  width:var(--w-rail);flex:0 0 var(--w-rail);display:flex;flex-direction:column;gap:20px;
  padding:14px 6px;border-right:1px solid var(--ln-subtle);box-sizing:border-box;
}
.mode-rail button{
  width:32px;height:32px;flex:0 0 32px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  color:var(--ic-gray);position:relative;padding:4px;box-sizing:border-box;
}
.mode-rail button .i{width:24px;height:24px}
.mode-rail button:hover{background:rgba(255,255,255,.06);color:var(--ic-gray-dark)}
.mode-rail button.on{background:var(--primary);color:#fff}
.mode-rail button::after{
  content:attr(data-tip);position:absolute;left:40px;top:50%;transform:translateY(-50%);
  background:var(--bg-3);border:1px solid var(--ln-border);color:var(--tx-primary);font-size:11px;font-weight:500;
  padding:3px 7px;border-radius:var(--r);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:20;
}
.mode-rail button:hover::after{opacity:1}

.mode-panels{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden}
.mode-panel{display:none;padding:10px}
.mode-panel.on{display:block}
/* Title 블록 : 라벨 + 칩을 gap 8 로 좌측 정렬 (Figma Title gap-[8px]) */
.panel-top{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:12px;min-height:28px}
/* 인물 모드의 이름 검색 입력만 우측으로 */
.mode-panel[data-panel=person] .panel-top .input{margin-left:auto}
.panel-label{font-size:12px;font-weight:500}
.panel-label em{font-style:normal;color:var(--accent)}

/* --- textarea (Text Area : h80 / px12 py10 / r4) --- */
.textarea-wrap{position:relative}
.textarea-wrap textarea{
  width:100%;height:80px;resize:none;background:var(--bg-2);border:1px solid var(--ln-border);border-radius:var(--r);
  padding:10px 28px 10px 12px;font-size:14px;line-height:1.3;letter-spacing:-.28px;outline:none;color:var(--tx-primary);
}
.textarea-wrap textarea::placeholder{color:var(--tx-helper)}
.textarea-wrap textarea:focus{border-color:var(--primary)}
.clear-x{
  position:absolute;right:7px;top:7px;width:18px;height:18px;border-radius:3px;
  color:var(--ic-gray);font-size:11px;display:flex;align-items:center;justify-content:center;
}
.clear-x:hover{background:rgba(255,255,255,.1);color:#fff}
.input{
  height:28px;background:var(--bg-2);border:1px solid var(--ln-border);border-radius:var(--r);padding:0 10px;
  font-size:12px;outline:none;width:130px;color:var(--tx-primary);
}
.input::placeholder{color:var(--tx-helper)}
.input:focus{border-color:var(--primary)}

/* --- filters (Accordion / Side Nav_2 Depth h44 · px16) --- */
.filters{margin-top:24px}
.acc{border-top:1px solid var(--ln-border)}
.acc:last-child{border-bottom:1px solid var(--ln-border)}
.acc-head{
  width:100%;height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 4px;font-size:16px;font-weight:500;color:var(--tx-primary);letter-spacing:-.32px;
}
.acc-head:not(:disabled):hover{color:#fff}
.acc-head:disabled{color:var(--tx-helper);cursor:default}
.acc-head .caret{color:var(--ic-gray)}
.caret{width:20px;height:20px;transition:transform .16s}
.acc.open>.acc-head .caret{transform:rotate(-90deg)}
.acc-body{display:none;padding:0 4px 16px}
.acc.open>.acc-body{display:block}
.acc.disabled{opacity:.55;pointer-events:none}

/* slider */
.slider-row{padding:2px 0 10px}
.slider-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.slider-top span{font-size:12px;color:var(--tx-tertiary)}
.slider-top b{font-size:14px;font-weight:500;color:var(--primary)}
.slider{
  -webkit-appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;
  background:var(--ln-border);
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary);
  border:2px solid #fff;cursor:pointer;
}
.slider-scale{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.slider-scale b{color:var(--primary);font-weight:400}

/* check / radio (Checkbox 18px · r2 · bg level-2 · border #3e4049) */
.check,.radio{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--tx-secondary);cursor:pointer;padding:5px 0}
.check input,.radio input{display:none}
.check i,.radio i{
  width:18px;height:18px;flex:0 0 18px;border:1px solid var(--ln-border);border-radius:2px;
  background:var(--bg-2);display:inline-flex;align-items:center;justify-content:center;position:relative;
}
.radio i{border-radius:50%}
.check input:checked+i{background:var(--primary);border-color:var(--primary)}
.check input:checked+i::after{content:'';width:9px;height:5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.radio input:checked+i{border-color:var(--primary)}
.radio input:checked+i::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--primary)}
.check.sm,.radio.sm{font-size:12px}
.check.disabled,.radio.disabled{opacity:.45;pointer-events:none}
.cam-list{padding-left:0}
.cam-list .check{color:var(--tx-secondary)}
.cam-list .check.sub{padding-left:26px}

/* color palette */
.color-label{font-size:12px;color:rgba(255,255,255,.8);margin:8px 0 5px}
.color-row{display:flex;flex-wrap:wrap;gap:4px}
.sw{width:20px;height:20px;border-radius:3px;border:1px solid rgba(255,255,255,.12);cursor:pointer;position:relative}
.sw.on{outline:2px solid var(--accent);outline-offset:1px}
.sw.on::after{content:'';position:absolute;inset:0;border:1px solid #000;border-radius:2px}

/* date */
.date-row{display:flex;align-items:center;gap:6px;margin-top:6px;padding-left:14px}
.date-row .lb{font-size:12px;color:var(--muted);width:24px;flex:0 0 24px}
.date-fld{
  display:flex;align-items:center;gap:5px;height:24px;padding:0 7px;border:1px solid var(--line-2);
  border-radius:3px;background:#0b1220;font-size:13px;
}
.date-fld input{background:none;border:0;outline:none;width:74px;font-size:13px}
.date-fld input[type=time]{width:52px;font-size:13px}
.date-fld svg{width:11px;height:11px;color:var(--muted)}

/* select */
.select{position:relative}
.select-btn{
  display:flex;align-items:center;gap:6px;height:22px;padding:0 7px;border:1px solid var(--line-2);
  border-radius:3px;font-size:11px;font-weight:500;color:#fff;white-space:nowrap;
}
.select.sm .select-btn{height:24px}
.select-btn .caret{color:var(--muted)}
.select.open .select-btn{border-color:var(--accent);color:var(--accent)}
.select.open .select-btn .caret{color:var(--accent);transform:rotate(180deg)}
.select-menu{
  display:none;position:absolute;right:0;top:calc(100% + 3px);min-width:100%;z-index:40;
  background:#141a24;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.55);
}
.select.open .select-menu{display:block}
.select-menu div{padding:7px 12px;font-size:11px;font-weight:500;white-space:nowrap;color:#c7d2dc}
.select-menu div:hover{background:rgba(255,255,255,.07)}
.select-menu div.on{color:var(--accent)}
.select.disabled{opacity:.45;pointer-events:none}

/* ===================== 이미지 검색 패널 ===================== */
.upload-box{margin-bottom:4px}
.dropzone{
  border:1px dashed #24415f;border-radius:5px;background:#080f1c;padding:22px 12px 18px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:#0a1524}
.up-ic{width:22px;height:22px;margin:0 auto 8px;color:var(--muted)}
.dz-main{font-size:11px;color:rgba(255,255,255,.8)}
.dz-sub{font-size:10px;color:var(--muted);margin:3px 0 10px}
.uploaded-img{position:relative;border-radius:5px;overflow:hidden;background:#000;height:150px}
.uploaded-img img{width:100%;height:100%;object-fit:contain}
.ext-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:2px}
.ext-item{position:relative;border-radius:3px;overflow:hidden;cursor:pointer;border:1.5px solid transparent;background:#000;height:66px}
.ext-item img{width:100%;height:100%;object-fit:cover}
.ext-item.on{border-color:var(--accent)}
.ext-item .tag{
  position:absolute;left:3px;bottom:3px;font-size:9px;padding:1px 4px;border-radius:2px;
  background:rgba(0,0,0,.72);color:#dbe6ef;
}

/* ===================== 등록 인물 패널 ===================== */
.person-box{border:1px solid var(--line);border-radius:5px;padding:8px;background:#060b14}
.person-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.person-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.person-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:270px;overflow-y:auto}
.pcard{cursor:pointer;border-radius:3px;overflow:hidden}
.pcard .thumb{height:66px;background:#000;border:1.5px solid transparent;border-radius:3px;overflow:hidden}
.pcard img{width:100%;height:100%;object-fit:cover}
.pcard.on .thumb{border-color:var(--accent)}
.pcard .nm{font-size:11px;margin-top:3px;font-weight:500}
.pcard .ds{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-inline{padding:26px 10px;text-align:center;font-size:11px;color:var(--muted);line-height:1.7}
.empty-inline button{margin-top:12px}

/* ===================== 지능형 패널 ===================== */
.algo-box{border:1px solid var(--line);border-radius:5px;padding:8px;background:#060b14}
.algo-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}

/* ===================== 접힘 레일 ===================== */
.collapsed-rail{
  width:34px;flex:0 0 34px;background:var(--panel);border-right:1px solid var(--line);
  padding-top:6px;display:flex;justify-content:center;
}

/* ===================== 결과 영역 ===================== */
.results{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.results-head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 16px 0;
}
.rh-label{font-size:16px;font-weight:500;color:var(--tx-primary);letter-spacing:-.32px}
.badge{
  font-size:12px;font-weight:500;color:var(--tx-secondary);background:var(--bg-3);
  padding:2px 7px;border-radius:var(--r);
}
.chips{display:flex;gap:8px;flex-wrap:wrap;overflow:hidden}
.chip{
  display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 12px;border-radius:9999px;
  background:var(--bg-2);border:1px solid var(--ln-border);font-size:12px;font-weight:500;color:var(--tx-tertiary);
}
.chip button{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--ic-gray)}
.chip button:hover{color:var(--tx-primary)}
.chip button .i{width:18px;height:18px}
.rh-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.rh-right .check{font-size:12px;color:var(--tx-secondary)}

.results-body{flex:1;overflow-y:auto;padding:32px 16px 20px;min-height:0}
.empty{
  height:100%;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#6b7785;text-align:center;
}
.empty.wait::before{
  content:'';width:14px;height:14px;margin-right:9px;border-radius:50%;
  border:2px solid rgba(0,153,255,.25);border-top-color:var(--accent);animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- 카드 그리드 (Object Card 176×230 / 가로 8px · 세로 14px) --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,176px);gap:14px 8px;justify-content:start}
.card{
  width:176px;background:var(--bg-3);border-radius:var(--r6);overflow:hidden;cursor:pointer;
  border:1px solid var(--ln-subtle);position:relative;
}
.card:hover{border-color:var(--ln-border)}
.card.on{border-color:var(--primary)}
.card .thumb{height:176px;background:var(--bg-2);position:relative;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .sim{
  position:absolute;right:8px;top:8px;font-size:12px;font-weight:500;
  padding:2px 4px;border-radius:var(--r);background:var(--overlay);
}
.sim.hi{color:var(--st-high)} .sim.mid{color:var(--st-mid)} .sim.low{color:var(--st-low)}
.card .meta{padding:10px 4px 12px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
.card .loc{font-size:12px;font-weight:500;color:var(--tx-secondary);line-height:1.3}
.card.on .loc{color:var(--tx-primary)}
.card .tm{font-family:var(--mono);font-size:10px;color:var(--tx-helper);line-height:1.4;letter-spacing:.2px;margin-top:2px}
.card .more{
  width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;color:var(--ic-gray);
}
.card .more:hover{color:var(--tx-primary)}
.card .more .i{width:20px;height:20px}
.card .cmp{
  position:absolute;left:6px;top:6px;opacity:0;transition:opacity .12s;
  background:var(--overlay);border-radius:var(--r);padding:2px 6px 2px 5px;
}
.card:hover .cmp,.card .cmp.on{opacity:1}
.card .bm{position:absolute;right:8px;bottom:8px;color:var(--st-low);width:14px;height:14px}

/* --- 그룹 뷰 --- */
.group{margin-top:16px}
.group:first-child{margin-top:6px}
.group-head{display:flex;align-items:center;gap:8px;height:23px;margin-bottom:8px}
.group-head .caret{color:var(--muted);cursor:pointer;transition:transform .16s}
.group.closed .group-head .caret{transform:rotate(-90deg)}
.g-name{font-size:12px;font-weight:500}
.g-count{font-size:11px;color:var(--muted)}
.g-avg{font-size:10px;font-weight:500;color:var(--accent);background:var(--badge);padding:2px 6px;border-radius:3px}
.group-head .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-edit{height:23px;padding:0 11px;border-radius:3px;background:var(--accent-2);font-size:12px;font-weight:500;color:#fff}
.btn-edit:hover{background:#3f80e8}
.group.closed .group-body{display:none}
.group-sep{height:1px;background:var(--line);margin-top:16px}

/* 대표 카드(B안) */
.rep-row{display:flex;gap:11px;flex-wrap:wrap}
.rep{width:180px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--line-2)}
.rep-head{
  display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 8px;
  background:rgba(255,255,255,.04);font-size:11px;font-weight:500;cursor:pointer;
}
.rep-head .n{color:var(--accent);font-size:10px}
.rep .card{border:0;width:100%}

/* ===================== 경로 비교 바 ===================== */
.compare-bar{
  position:absolute;left:0;right:0;bottom:0;background:#0b111c;border-top:1px solid var(--line-2);
  display:flex;align-items:center;gap:14px;padding:12px 16px;z-index:20;
  box-shadow:0 -8px 24px rgba(0,0,0,.45);
}
.cb-title{font-size:13px;font-weight:500;flex:0 0 auto}
.cb-list{display:flex;gap:8px;flex:1;overflow-x:auto}
.cb-item{position:relative;width:64px;flex:0 0 64px}
.cb-item .th{height:56px;border-radius:3px;overflow:hidden;background:#000}
.cb-item img{width:100%;height:100%;object-fit:cover}
.cb-item .cap{font-size:9px;color:var(--muted);margin-top:3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-item .x{
  position:absolute;right:-4px;top:-4px;width:15px;height:15px;border-radius:50%;background:var(--sim-low);
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#111;font-weight:700;
}
.cb-actions{display:flex;gap:8px;flex:0 0 auto}

/* ===================== 원본 영상 ===================== */
.preview{
  width:var(--w-preview);flex:0 0 var(--w-preview);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.preview-head{height:36px;flex:0 0 36px;display:flex;align-items:center;padding:0 14px;font-size:14px;font-weight:500}
.preview-list{flex:1;overflow-y:auto;padding:0 14px 16px;display:flex;flex-direction:column;gap:10px}
.pv{background:var(--card);border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.pv.mini{display:flex;align-items:center;gap:9px;padding:6px;cursor:pointer}
.pv.mini:hover{border-color:rgba(0,153,255,.45)}
.pv-video{position:relative;background:#000;aspect-ratio:16/10}
.pv-video img{width:100%;height:100%;object-fit:cover}
.pv-video .x{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:3px;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;color:#dbe6ef}
.pv-video .x:hover{background:rgba(0,0,0,.85)}
.pv-video .bbox{position:absolute;border:1.5px solid var(--accent);border-radius:2px;box-shadow:0 0 0 9999px rgba(0,0,0,.05)}
.pv-video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;
}
.pv-video:hover .play{opacity:1}
.pv-info{padding:8px 10px 10px}
.pv-title{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;margin-bottom:7px}
.pv-title .bk{color:var(--muted);width:14px;height:14px}
.pv-title .bk.on{color:#ffd23f}
.pv-meta{display:flex;gap:18px}
.pv-meta dt{font-size:10px;color:var(--muted);margin-bottom:2px}
.pv-meta dd{font-size:11px;color:rgba(255,255,255,.55);font-family:var(--mono)}
.pv.mini .th{width:64px;height:40px;flex:0 0 64px;border-radius:3px;overflow:hidden;background:#000}
.pv.mini .th img{width:100%;height:100%;object-fit:cover}
.pv.mini .nm{font-size:12px;font-weight:500}
.pv.mini .tm{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pv-empty{padding:28px 0;text-align:center;font-size:12px;color:#3d4a58}

/* ===================== AI 에이전트 ===================== */
.ai-side{background:var(--panel)}
.ai-body{flex:1;display:flex;flex-direction:column;min-height:0}
.chat{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:14px}
.chat-hello{text-align:center;font-size:14px;font-weight:500;color:#c7d2dc;margin:24px 0 6px}
.bubble-user{align-self:flex-end;max-width:88%;background:var(--ai-bg);border:1px solid rgba(0,153,255,.25);
  border-radius:12px 12px 3px 12px;padding:8px 12px;font-size:12px;line-height:1.55}
.bubble-ai{font-size:12px;line-height:1.7;color:#dbe6ef}
.bubble-ai ul{margin:8px 0 0 16px}
.bubble-ai li{margin-bottom:4px}
.bubble-ai b{color:#fff;font-weight:600}
.sugg-title{font-size:11px;color:var(--muted);margin:12px 0 6px}
.sugg{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.sugg button{
  background:var(--ai-bg);border:1px solid rgba(0,153,255,.22);border-radius:14px;padding:7px 12px;
  font-size:11px;line-height:1.4;text-align:left;color:#cfe0f0;max-width:100%;
}
.sugg button:hover{border-color:var(--accent);color:#fff}
.typing{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-input{position:relative;margin:0 12px 12px}
.chat-input textarea{
  width:100%;height:62px;resize:none;background:#0b1220;border:1px solid #1c2f4a;border-radius:5px;
  padding:9px 30px 9px 10px;font-size:12px;line-height:1.5;outline:none;
}
.chat-input textarea::placeholder{color:var(--muted)}
.chat-input textarea:focus{border-color:var(--accent)}
.chat-input textarea:disabled{opacity:.5}
.chat-input .attach{position:absolute;right:6px;bottom:8px}
.menu{
  position:absolute;right:0;top:26px;background:#141a24;border:1px solid var(--line-2);border-radius:4px;
  overflow:hidden;z-index:50;min-width:110px;box-shadow:0 8px 20px rgba(0,0,0,.55);
}
.menu b{display:block;padding:8px 12px;font-size:11px;font-weight:500;color:#c7d2dc;text-align:left;white-space:nowrap}
.menu b:hover{background:rgba(255,255,255,.07)}
.ai-recent{position:absolute;inset:32px 0 0;background:var(--panel);display:flex;flex-direction:column}
.ai-recent-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px}
.recent-list{flex:1;overflow-y:auto;padding:0 12px 12px;display:flex;flex-direction:column;gap:6px}
.rc{position:relative;background:#080f1c;border:1px solid var(--line);border-radius:5px;padding:9px 10px;cursor:pointer}
.rc:hover{border-color:rgba(0,153,255,.35)}
.rc .t{font-size:12px;font-weight:500;padding-right:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc .d{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px}
.rc .acts{position:absolute;right:6px;top:6px;display:flex;gap:2px;opacity:0}
.rc:hover .acts,.rc.pinned .acts{opacity:1}
.rc.pinned .pin{color:var(--accent)}

/* ===================== 팝업 공통 ===================== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100}
.modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:110;
  background:#0d131d;border:1px solid var(--line-2);border-radius:7px;
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.7);max-height:86vh;
}
.md-lg{width:1000px}
.md-sm{width:460px}
.md-alert{width:340px}
.md-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px}
.md-head-l{display:flex;align-items:flex-start;gap:8px}
.md-head h3{font-size:16px;font-weight:600}
.md-head p{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.5}
.md-back{margin-top:1px}
.md-body{flex:1;overflow-y:auto;padding:0 18px}
.md-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px 16px}
.al-body{padding:22px 20px 6px;text-align:center}
.al-body h4{font-size:14px;font-weight:600;margin-bottom:8px}
.al-body p{font-size:12px;color:var(--muted);line-height:1.6}
.md-alert .md-foot{justify-content:center}

.btn-primary{
  height:28px;padding:0 15px;border-radius:4px;background:var(--accent-2);font-size:12px;font-weight:500;color:#fff;
}
.btn-primary:hover{background:#3f80e8}
.btn-primary:disabled{background:#1d2735;color:#4a5766;cursor:default}
.btn-primary.sm{height:24px;padding:0 12px;font-size:11px}
.btn-ghost{
  height:28px;padding:0 15px;border-radius:4px;font-size:12px;font-weight:500;color:#c7d2dc;border:1px solid var(--line-2);
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-ghost:disabled{opacity:.4;cursor:default}
.btn-ghost.sm{height:24px;padding:0 10px;font-size:11px}
.btn-danger{height:28px;padding:0 15px;border-radius:4px;background:var(--danger);font-size:12px;font-weight:500;color:#fff}
.seg{display:flex;gap:4px}
.seg button{height:22px;padding:0 10px;border-radius:11px;border:1px solid var(--line-2);font-size:11px;color:var(--muted)}
.seg button.on{background:rgba(0,153,255,.18);border-color:var(--accent);color:var(--accent)}
.seg button:disabled{opacity:.4;cursor:default}

/* 이미지 검색 팝업 */
.img-md{display:grid;grid-template-columns:400px 1fr;gap:18px;padding-bottom:4px}
.img-canvas{position:relative;background:#000;border-radius:5px;overflow:hidden;aspect-ratio:4/3}
.img-canvas img{width:100%;height:100%;object-fit:contain}
.bbox-layer{position:absolute;inset:0}
.bbox{position:absolute;border:1.5px solid var(--accent);border-radius:2px}
.bbox.face{border-color:#29cc6a}
.bbox span{position:absolute;left:0;top:-15px;font-size:9px;background:var(--accent);color:#001;padding:0 4px;border-radius:2px}
.bbox.face span{background:#29cc6a}
.img-stage-btns{display:flex;gap:8px;margin-top:10px}
.ie-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ie-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;min-height:120px}
.ie-loading{grid-column:1/-1;display:flex;align-items:center;justify-content:center;height:120px;font-size:12px;color:var(--muted)}
.ie-loading::before{content:'';width:13px;height:13px;margin-right:8px;border-radius:50%;border:2px solid rgba(0,153,255,.25);border-top-color:var(--accent);animation:spin .8s linear infinite}

/* 유사 객체 편집 팝업 */
.ed-wrap{display:grid;grid-template-columns:150px 1fr;gap:20px;padding-bottom:6px}
.ed-rep img{width:100%;height:130px;object-fit:cover;border-radius:4px;background:#000}
.ed-rep dl{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.ed-rep dt{font-size:10px;color:var(--muted)}
.ed-rep dd{font-size:11px;color:#c7d2dc;display:flex;align-items:center;gap:5px}
.ed-sec+.ed-sec{margin-top:18px}
.ed-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ed-total{font-size:13px;font-weight:500;margin-bottom:12px}
.pick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pick{position:relative;height:86px;border-radius:4px;overflow:hidden;border:2px solid transparent;background:#000;cursor:pointer}
.pick img{width:100%;height:100%;object-fit:cover;opacity:.55}
.pick.on{border-color:var(--accent)}
.pick.on img{opacity:1}
.dot-sw{width:9px;height:9px;border-radius:2px;display:inline-block;border:1px solid rgba(255,255,255,.2)}

/* 인물 관리 팝업 */
.pm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-bottom:6px}
.pm-card{background:#0a111c;border:1px solid var(--line);border-radius:5px;overflow:hidden;cursor:pointer;position:relative}
.pm-card:hover{border-color:rgba(0,153,255,.4)}
.pm-card .th{height:120px;background:#000}
.pm-card .th img{width:100%;height:100%;object-fit:cover}
.pm-card .bd{padding:8px 10px 10px}
.pm-card .nm{font-size:13px;font-weight:500}
.pm-card .gu{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:3px}
.pm-card .ds{font-size:11px;color:#8ea0b0;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-card .rg{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:5px}
.pm-card .cb{position:absolute;left:8px;top:8px;z-index:2}
.pm-card .imgn{position:absolute;right:8px;top:8px;font-size:10px;background:rgba(0,0,0,.7);padding:2px 6px;border-radius:9px;color:#c7d2dc}
.pm-tools{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pm-tools .sp{margin-left:auto;display:flex;align-items:center;gap:8px}
.form-row{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.form-row label{font-size:11px;color:var(--muted)}
.form-row label i{color:var(--danger);font-style:normal}
.form-row input,.form-row textarea{
  background:#0b1220;border:1px solid #1c2f4a;border-radius:4px;padding:8px 10px;font-size:12px;outline:none;
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent)}
.form-row input:disabled{color:var(--muted);background:#080d16}
.form-row textarea{height:64px;resize:none}
.pm-new{display:grid;grid-template-columns:1fr 300px;gap:22px;padding-bottom:6px}
.up-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}
.up-card{position:relative;height:96px;border-radius:4px;overflow:hidden;background:#000;border:1px solid var(--line)}
.up-card img{width:100%;height:100%;object-fit:cover}
.up-card .x{position:absolute;right:4px;top:4px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;font-size:9px}
.up-card .rep-chip{position:absolute;left:4px;top:4px;font-size:9px;background:var(--accent);color:#001;padding:1px 5px;border-radius:8px}
.up-card .ty-chip{position:absolute;left:4px;bottom:4px;font-size:9px;background:rgba(0,0,0,.7);padding:1px 5px;border-radius:8px;color:#c7d2dc}
.up-add{height:96px;border:1px dashed #24415f;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px;cursor:pointer}
.up-add:hover{border-color:var(--accent);color:var(--accent)}

/* 히스토리 */
.hs-day{margin-bottom:16px}
.hs-date{font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:7px}
.hs-item{background:#0a111c;border:1px solid var(--line);border-radius:5px;margin-bottom:6px;overflow:hidden}
.hs-main{display:flex;align-items:center;gap:8px;padding:9px 10px;cursor:pointer}
.hs-main:hover{background:rgba(255,255,255,.03)}
.hs-q{flex:1;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-n{font-size:10px;color:var(--accent);background:var(--badge);padding:2px 6px;border-radius:3px}
.hs-ai{font-size:9px;color:#001;background:var(--accent);padding:1px 5px;border-radius:8px;font-weight:600}
.hs-sub{border-top:1px solid var(--line);display:none}
.hs-item.open .hs-sub{display:block}
.hs-sub div{padding:8px 10px 8px 24px;font-size:11px;color:#8ea0b0;display:flex;gap:8px;align-items:center}
.hs-sub div:hover{background:rgba(255,255,255,.03);color:#fff}

/* ctx menu / toast */
.ctx-menu{
  position:fixed;z-index:200;background:#141a24;border:1px solid var(--line-2);border-radius:4px;
  overflow:hidden;min-width:118px;box-shadow:0 8px 20px rgba(0,0,0,.6);
}
.ctx-menu div{padding:8px 13px;font-size:11px;font-weight:500;color:#c7d2dc;cursor:pointer}
.ctx-menu div:hover{background:rgba(255,255,255,.07)}
.toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:300;
  background:#1b2431;border:1px solid var(--line-2);border-radius:5px;padding:10px 18px;font-size:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
}

/* ============================================================
   단일 객체 상세 (상세화면 WF_0805 / 3428:25691)
   ============================================================ */
.detail{flex:1;display:flex;min-width:0}
.dt-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 0 10px 20px;gap:10px}
.dt-video{position:relative;flex:1;min-height:0;background:#000;border-radius:4px;overflow:hidden}
.dt-video>img{width:100%;height:100%;object-fit:cover;display:block}
.dt-vhead{
  position:absolute;left:0;right:0;top:0;height:44px;display:flex;align-items:center;gap:16px;padding:0 16px;
  background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);
}
.dt-vhead b{font-size:14px;font-weight:600}
.dt-vhead span{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.62)}
.dt-box{position:absolute;border:1.5px solid var(--accent);background:rgba(0,153,255,.1)}
.dt-box i{
  position:absolute;left:-1.5px;top:-19px;font-style:normal;font-size:10px;font-weight:500;
  background:var(--accent);color:#fff;padding:1px 6px;border-radius:2px;white-space:nowrap;
}
.dt-box.sub{border-color:#e8b44a;background:rgba(232,180,74,.08)}
.dt-box.sub i{background:rgba(232,180,74,.9);color:#1a1200}
.dt-ctrl{
  position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;align-items:center;padding:0 12px;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
}
.dt-ctrl .grp{display:flex;align-items:center;gap:3px}
.dt-ctrl .grp.l{flex:0 0 auto}
.dt-ctrl .grp.c{flex:1;justify-content:center;gap:6px}
.dt-ctrl .grp.r{flex:0 0 auto;gap:4px}
.dt-ctrl .btn-icon{color:#dbe6ef}
.dt-ctrl .btn-icon.on{background:rgba(0,153,255,.35);color:#fff}
.dt-ctrl .btn-icon[data-tool=mask].on{background:var(--accent)}
.dt-sel .select-btn{height:22px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.22);font-size:10px}
.dt-sel .select-menu{bottom:calc(100% + 4px);top:auto}

/* --- 탐지 이력 --- */
.dt-hist{flex:0 0 auto;background:#080d16;border:1px solid var(--line);border-radius:4px;padding:10px 12px 12px}
.dt-hist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dt-hist-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500}
.dt-hist-title .ic{width:14px;height:14px;color:var(--accent)}
.dt-ruler{position:relative;height:26px;border-bottom:1px solid var(--line-2);margin-bottom:10px}
.dt-ruler .tick{position:absolute;bottom:0;width:1px;height:6px;background:rgba(74,101,117,.55)}
.dt-ruler .tick.maj{height:11px;background:rgba(74,101,117,.9)}
.dt-ruler .lb{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--muted)}
.dt-ruler .range{position:absolute;bottom:0;height:5px;background:var(--accent);border-radius:2px}
.dt-ruler .head{position:absolute;top:2px;bottom:0;width:2px;background:#fff;border-radius:1px}
.dt-ruler .head::before{content:'';position:absolute;left:-4px;top:-3px;width:10px;height:10px;border-radius:50%;background:#fff}
.dt-clips{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.dt-clip{position:relative;width:130px;flex:0 0 130px;border-radius:4px;overflow:hidden;border:2px solid transparent;background:#000;cursor:pointer}
.dt-clip img{width:100%;height:72px;object-fit:cover;display:block}
.dt-clip.on{border-color:var(--accent)}
.dt-clip .cap{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:5px;padding:4px 6px;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font-size:10px;font-weight:500;
}
.dt-clip .cap .n{display:flex;align-items:center;gap:3px;color:#c7d2dc}
.dt-clip .bk{position:absolute;right:5px;top:5px;width:16px;height:16px;color:#fff;opacity:.85}
.dt-clip .bk.on{color:#ffd23f;opacity:1}

/* --- 우측 상세 패널 --- */
.dt-side{
  width:534px;flex:0 0 534px;padding:14px 18px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
}
.dt-side-head{display:flex;align-items:center;justify-content:space-between}
.dt-side-title{font-size:14px;font-weight:600}
.btn-primary.sm{display:inline-flex;align-items:center;gap:5px}
.dt-sec-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;margin-bottom:10px}
.dt-sec-head>.ic{width:14px;height:14px;color:var(--accent)}
.dt-obj{display:flex;gap:12px}
.dt-obj-th{width:86px;height:82px;flex:0 0 86px;border-radius:4px;overflow:hidden;background:#000}
.dt-obj-th img{width:100%;height:100%;object-fit:cover}
.dt-obj-bd{flex:1;min-width:0}
.dt-obj-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dt-obj-top b{font-size:13px;font-weight:600}
.dt-obj-meta{display:flex;gap:20px}
.dt-obj-meta dt{font-size:10px;color:var(--muted);margin-bottom:4px}
.dt-obj-meta dd{font-size:11px;color:#c7d2dc;font-family:var(--mono)}
.dt-obj-meta dd.sw-row{display:flex;gap:10px;font-family:var(--font)}
.dt-obj-meta dd.sw-row span{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted)}
.dt-obj-meta .dot-sw{width:14px;height:14px;border-radius:2px}

.dt-map{position:relative;border-radius:4px;overflow:hidden;background:#e9eaec;height:300px}
.dt-map img{width:100%;height:100%;object-fit:cover}
.dt-floor{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:500;padding:3px 8px;border-radius:3px}
.dt-map-tools{position:absolute;right:8px;top:8px;display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.68);border-radius:4px;padding:2px 4px}
.dt-map-tools .btn-icon{width:20px;height:20px;color:#dbe6ef}
.sepv{width:1px;height:12px;background:rgba(255,255,255,.25);margin:0 2px}
.dt-marker{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px}
.dt-marker span{background:var(--accent-2);color:#fff;font-size:9px;font-weight:500;padding:2px 6px;border-radius:3px;white-space:nowrap}
.dt-marker i{width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,153,255,.3)}
.dt-zoom{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;background:#fff;border-radius:3px;overflow:hidden}
.dt-zoom button{width:22px;height:22px;color:#333;font-size:13px;line-height:1}
.dt-zoom button+button{border-top:1px solid #ddd}
.dt-legend{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:7px;font-size:10px;color:var(--muted)}
.dt-legend i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dt-legend em{font-style:normal}

.dt-search{position:relative;display:flex;align-items:center}
.dt-search input{width:170px;padding-right:24px}
.dt-search .ic{position:absolute;right:7px;width:12px;height:12px;color:var(--muted);pointer-events:none}
.dt-near-count{display:flex;align-items:center;font-size:11px;color:var(--muted);margin-bottom:8px}
.dt-near-count em{font-style:normal;color:#fff}
.dt-near{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dt-near-card{position:relative;border-radius:4px;overflow:hidden;background:var(--card);cursor:pointer;border:1.5px solid transparent}
.dt-near-card:hover{border-color:rgba(0,153,255,.45)}
.dt-near-card img{width:100%;height:96px;object-fit:cover;display:block}
.dt-near-card .bd{padding:5px 7px 7px}
.dt-near-card .nm{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500}
.dt-near-card .nm .n{font-size:10px;color:var(--accent)}
.dt-near-card .tm{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px}
.dt-near-card .bk{position:absolute;right:5px;top:5px;width:15px;height:15px;color:#fff;opacity:.8}
.dt-near-card .bk.on{color:#ffd23f;opacity:1}
.dt-near-card.sel{border-color:var(--accent)}

/* ============================================================
   상세화면 WF_0805 — 화면 변형 (히트맵 / 이동경로 / CCTV / 멀티뷰 / 영역검색)
   ============================================================ */
:root{
  --slot-a:#0099ff; --slot-b:#ff2ec4; --slot-c:#ffab00; --slot-d:#00d665;
}
.ov{position:absolute;inset:0;pointer-events:none}
/* 마스킹 */
.dt-box.masked{backdrop-filter:blur(11px);background:rgba(10,18,32,.35)}
.dt-box.masked i{opacity:.5}

/* ---- 히트맵 오버레이 ---- */
.ov-heat{
  mix-blend-mode:screen;opacity:.86;
  background:
    radial-gradient(ellipse 13% 17% at 46% 47%, #ff1500 0%, #ff5a00 24%, #ffd000 42%, #7bd914 60%, rgba(0,190,255,.6) 80%, transparent 100%),
    radial-gradient(ellipse 9% 12% at 30% 61%, #ff1500 0%, #ff8c00 30%, #ffe000 50%, rgba(120,220,20,.66) 72%, transparent 100%),
    radial-gradient(ellipse 8% 11% at 67% 16%, #ff1500 0%, #ff8c00 28%, #ffe000 50%, rgba(120,220,20,.6) 72%, transparent 100%),
    radial-gradient(ellipse 5% 7% at 20% 37%, #ff2200 0%, #ffb300 40%, rgba(160,220,40,.55) 70%, transparent 100%),
    radial-gradient(ellipse 6% 8% at 70% 39%, #ffd000 0%, #9bdc12 38%, rgba(0,200,255,.5) 72%, transparent 100%),
    radial-gradient(ellipse 5% 7% at 78% 22%, #ff6a00 0%, #ffdf00 42%, rgba(120,220,20,.5) 72%, transparent 100%),
    radial-gradient(ellipse 30% 34% at 58% 30%, rgba(60,215,120,.5) 0%, rgba(0,180,255,.46) 52%, transparent 100%),
    radial-gradient(ellipse 40% 42% at 42% 66%, rgba(0,200,255,.48) 0%, rgba(0,130,255,.3) 58%, transparent 100%),
    radial-gradient(ellipse 26% 30% at 82% 44%, rgba(40,210,140,.4) 0%, rgba(0,160,255,.34) 56%, transparent 100%),
    linear-gradient(180deg, rgba(0,130,255,.3), rgba(0,90,210,.4));
}

/* ---- 이동경로 오버레이 ---- */
.ov-path svg{width:100%;height:100%;display:block}
.ov-path path{fill:none;stroke-width:2.2;stroke-linecap:round}
.btn-flt{
  position:absolute;right:12px;top:12px;z-index:3;height:26px;padding:0 11px;border-radius:4px;
  display:inline-flex;align-items:center;gap:6px;background:rgba(8,14,24,.86);border:1px solid rgba(255,255,255,.16);
  font-size:11px;font-weight:500;color:#dbe6ef;
}
.btn-flt:hover{background:rgba(20,32,50,.94);border-color:var(--accent)}
.btn-flt.on{border-color:var(--accent);color:#8fd0ff}
.btn-flt .ic{width:13px;height:13px}

/* 객체별 동선 플로팅 패널 */
.flt-panel{
  position:absolute;right:12px;top:46px;z-index:4;width:250px;
  background:rgba(18,24,34,.93);border:1px solid rgba(255,255,255,.12);border-radius:5px;
  padding:11px 12px 12px;backdrop-filter:blur(3px);
}
.flt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.flt-head b{font-size:12px;font-weight:600}
.flt-list{display:flex;flex-direction:column;gap:7px;max-height:250px;overflow-y:auto}
.flt-row{display:flex;gap:9px;cursor:pointer;padding:2px;border-radius:3px}
.flt-row:hover{background:rgba(255,255,255,.06)}
.flt-row>img{width:56px;height:44px;flex:0 0 56px;object-fit:cover;border-radius:2px;background:#000}
.flt-row .bd{flex:1;min-width:0}
.flt-row .t1{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:500}
.flt-row .t1 .ic{width:11px;height:11px;color:var(--muted)}
.flt-row .t1 .ch{margin-left:auto;color:var(--muted)}
.flt-row .t2{font-family:var(--mono);font-size:9px;color:#8ea0b0;margin:3px 0 4px}
.flt-row .t3{display:flex;gap:9px}
.flt-row .t3 span{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--muted)}
.flt-row .t3 i{width:12px;height:12px;border-radius:2px;display:block}

/* ---- CCTV 마커 (영상 위) ---- */
.ov-cctv{pointer-events:auto}
.cctv-pin{
  position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.cctv-pin .ic{width:12px;height:12px}
.cctv-pin:hover{background:#33adff}
.cctv-pop{
  position:absolute;z-index:6;width:170px;border-radius:3px;overflow:hidden;
  background:#0b1220;border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 18px rgba(0,0,0,.6);
}
.cctv-pop img{width:100%;height:96px;object-fit:cover;display:block;background:#000}
.cctv-pop .cap{
  display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--accent);
  font-size:10px;font-weight:500;color:#fff;
}
.cctv-pop .cap .ic{width:11px;height:11px;margin-left:auto;opacity:.9}

/* ---- 맵뷰어 CCTV FOV 콘 ---- */
.map-cone{position:absolute;transform:translate(-50%,-50%);cursor:pointer}
.map-cone i{
  display:block;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-bottom:26px solid rgba(0,140,255,.42);
}
.map-cone b{
  position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:8px;height:8px;border-radius:2px;background:var(--accent-2);border:1px solid #fff;
}
.map-cone:hover i{border-bottom-color:rgba(0,170,255,.72)}

/* ---- 멀티뷰 2×2 ---- */
.dt-multi{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;background:#05080f}
.mv-tile{position:relative;background:#000;overflow:hidden;border-left:3px solid transparent}
.mv-tile>img{width:100%;height:100%;object-fit:cover;display:block}
.mv-tile.empty{display:flex;align-items:center;justify-content:center;background:#070b12}
.mv-head{
  position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:8px;
  padding:0 8px;background:rgba(0,0,0,.55);
}
.mv-head .nm{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600}
.mv-head .nm .caret{width:9px;height:6px;color:rgba(255,255,255,.6)}
.mv-head .tm{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.55)}
.mv-head .x{margin-left:auto;color:#fff;opacity:.75;width:16px;height:16px}
.mv-head .x:hover{opacity:1}
.mv-slot{
  position:absolute;left:0;top:0;width:30px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;z-index:2;
}
.mv-box{position:absolute;border:1.5px solid var(--accent);background:rgba(0,153,255,.08)}
.mv-box i{
  position:absolute;left:-1.5px;top:-15px;padding:1px 4px;font-size:9px;font-style:normal;
  background:var(--accent);color:#fff;white-space:nowrap;
}

/* ---- 영역 검색 (도형 · 선) ---- */
.ov-area{pointer-events:none}
.area-shape{
  position:absolute;border:2px dashed var(--accent);background:rgba(0,190,255,.24);
}
.area-shape span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);border:1.5px solid #fff}
.area-line{position:absolute;inset:0}
.area-line svg{width:100%;height:100%}
.area-end{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:12px;background:rgba(10,16,26,.92);border:1px solid rgba(255,255,255,.2);
  font-size:11px;font-weight:500;color:#fff;pointer-events:auto;
}
.area-end:hover{border-color:var(--accent)}
.area-end .ic{width:12px;height:12px;color:#9fb4c4}
.dt-ctrl.area-mode .grp.r .btn-icon,
.dt-ctrl.area-mode .grp.r .select{opacity:.35;pointer-events:none}

/* ---- 그룹 상세 / 비교 : 탐지 이력 멀티 레인 ---- */
.dt-lanes{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.dt-lane{display:flex;align-items:center;gap:7px}
.dt-lane .lb{
  display:flex;align-items:center;gap:4px;width:74px;flex:0 0 74px;font-size:11px;font-weight:500;cursor:pointer;
}
.dt-lane .lb .caret{width:9px;height:6px;color:var(--muted);transition:transform .15s}
.dt-lane.open .lb .caret{transform:rotate(180deg)}
.dt-lane .track{position:relative;flex:1;height:11px;background:rgba(74,101,117,.22);border-radius:2px}
.dt-lane .seg{
  position:absolute;top:0;bottom:0;border-radius:2px;display:flex;align-items:center;padding-left:4px;
  font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.9);cursor:pointer;
}
.dt-lane .seg:hover{filter:brightness(1.25)}
.dt-seg-row{position:relative;height:13px;margin-bottom:8px}
.dt-seg-row .seg{
  position:absolute;top:0;bottom:0;border-radius:2px;background:rgba(0,153,255,.42);
  display:flex;align-items:center;padding-left:4px;font-family:var(--mono);font-size:8px;cursor:pointer;
}
.dt-seg-row .seg.on{background:var(--accent)}
.seg-tip{
  position:absolute;bottom:calc(100% + 5px);transform:translateX(-50%);z-index:5;
  padding:3px 8px;border-radius:3px;background:#1b2431;border:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:10px;white-space:nowrap;pointer-events:none;
}
.vid-peek{
  position:absolute;z-index:5;width:170px;border:2px solid var(--accent);border-radius:2px;overflow:hidden;
  background:#000;box-shadow:0 6px 18px rgba(0,0,0,.6);pointer-events:none;
}
.vid-peek img{width:100%;height:92px;object-fit:cover;display:block}

/* 클립 편집 (타임라인 수정) */
.dt-clip .del{
  position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:3px;background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;color:#ff8a97;
}
.dt-clip .del:hover{background:var(--danger);color:#fff}
.dt-clip-add{
  width:130px;flex:0 0 130px;height:92px;border:1px dashed #24415f;border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:11px;cursor:pointer;
}
.dt-clip-add:hover{border-color:var(--accent);color:var(--accent)}
.dt-clip-add b{font-size:15px;font-weight:400;line-height:1}

/* ============================================================
   경로 비교 화면 (객체 2개 / 4개)
   ============================================================ */
.compare{flex:1;display:flex;min-width:0}
.cmp-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 0 10px 20px;gap:10px}
.cmp-stage{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#000;border-radius:4px;overflow:hidden;position:relative;
}
.cmp-grid{display:grid;gap:2px;background:#05080f;flex:0 0 auto}
.cmp-grid.n2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.cmp-grid.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cmp-tile{position:relative;background:#000;overflow:hidden;min-height:0}
.cmp-tile>img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-tile.empty{background:#070b12}
#cmpCtrl{position:static;width:100%;background:none;padding:6px 10px 2px}
.cmp-head{
  position:relative;height:30px;display:flex;align-items:center;gap:9px;padding:0 8px 0 38px;
  background:#0b1017;
}
.cmp-tile>.cmp-head{position:absolute;left:0;right:0;top:0;background:rgba(0,0,0,.55);z-index:2}
.cmp-badge{
  position:absolute;left:0;top:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
}
.cmp-head .slotn{
  width:18px;height:18px;border-radius:2px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;
}
.cmp-head .nm{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.cmp-head .nm .caret{width:9px;height:6px;color:rgba(255,255,255,.6)}
.cmp-head .tm{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5)}
.cmp-head .x{margin-left:auto;width:18px;height:18px;color:#fff;opacity:.7}
.cmp-head .x:hover{opacity:1}
.cmp-box{position:absolute;border:1.5px solid var(--accent);background:rgba(0,153,255,.07)}
.cmp-box i{position:absolute;left:-1.5px;top:-15px;padding:1px 4px;font-size:9px;font-style:normal;background:var(--accent);color:#fff;white-space:nowrap}

/* 우측 객체 탭 */
.cmp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px}
.cmp-tabs button{
  height:28px;padding:0 11px;display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;
}
.cmp-tabs button.on{color:#fff;border-bottom-color:var(--accent)}
.cmp-tabs button .x{width:9px;height:9px;display:flex;align-items:center;justify-content:center;opacity:.6}
.cmp-tabs button .x svg{width:8px;height:8px;display:block}
.cmp-tabs button .x:hover{opacity:1;color:var(--danger)}
.btn-add{
  height:22px;padding:0 10px;border-radius:11px;border:1px solid var(--accent);
  font-size:11px;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:3px;
}
.btn-add:hover{background:rgba(0,153,255,.14)}
.btn-add:disabled{opacity:.4;cursor:default}
.cmp-obj+.cmp-obj{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.badge.sub{background:rgba(74,101,117,.28);color:#a8bccb}

/* 맵뷰어 경로 마커 */
.map-wp{
  position:absolute;transform:translate(-50%,-50%);width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;font-weight:600;color:#fff;border:1.5px solid rgba(255,255,255,.9);
  cursor:pointer;z-index:2;
}
.map-wp:hover{transform:translate(-50%,-50%) scale(1.14)}
.map-path{position:absolute;inset:0;pointer-events:none;z-index:1}
.map-path svg{width:100%;height:100%}
.map-path path{fill:none;stroke-width:2.4;stroke-dasharray:5 5;stroke-linecap:round}
.dt-legend.multi{flex-wrap:wrap;gap:10px}
.dt-legend .lg{display:flex;align-items:center;gap:4px}
.dt-legend .lg i{width:6px;height:6px;border-radius:50%}

/* ============================================================
   팝업 — 맵뷰어 전체보기 / 영상 조회 / 관심인물 / 객체 추가 / 사건 / 북마크
   ============================================================ */
.md-xl{width:1300px}
.md-full{width:1600px}
.md-mid{width:700px}
.md-head.tight{padding-bottom:14px;border-bottom:1px solid var(--line)}
.md-head .hd-ic{display:flex;align-items:center;gap:7px}
.md-head .hd-ic .ic{width:15px;height:15px;color:#fff}
.md-body.flush{padding:0;overflow:hidden}

/* ---- 맵뷰어 전체보기 ---- */
.mvw{display:flex;height:600px}
.mvw.b{flex-direction:column;height:660px}
.mvw-map{position:relative;flex:1;min-width:0;min-height:0;background:#e9eaec;overflow:hidden}
.mvw-map>img{width:100%;height:100%;object-fit:contain;display:block}
.mvw-map .seg{position:absolute;left:12px;top:12px;z-index:3;background:rgba(0,0,0,.55);padding:3px;border-radius:5px}
.mvw-map .tools{
  position:absolute;right:12px;top:12px;z-index:3;display:flex;align-items:center;gap:2px;
  background:rgba(0,0,0,.68);border-radius:4px;padding:2px 4px;
}
.mvw-map .tools .btn-icon{width:20px;height:20px;color:#dbe6ef}
.mvw-map .dt-zoom{right:12px;bottom:12px}
.mvw-side{
  width:278px;flex:0 0 278px;background:#05080e;border-left:1px solid var(--line);
  padding:13px 14px;overflow-y:auto;
}
.mvw-side>b{display:block;font-size:12px;font-weight:600;margin-bottom:11px}
.mvw-heads{display:flex;gap:8px;margin-bottom:6px}
.mvw-heads span{flex:1;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500}
.mvw-heads i{width:7px;height:7px;border-radius:50%}
.mvw-time{position:relative;display:flex;gap:8px;padding-left:22px;min-height:500px}
.mvw-axis{position:absolute;left:0;top:0;bottom:0;width:20px}
.mvw-axis span{position:absolute;left:0;transform:translateY(-50%);font-family:var(--mono);font-size:9px;color:var(--muted)}
.mvw-col{position:relative;flex:1}
.mvw-wp{
  position:absolute;left:0;right:0;display:flex;gap:8px;padding:6px 8px;border-radius:4px;
  background:#0d1420;border:1px solid var(--line);cursor:pointer;
}
.mvw-wp:hover{border-color:rgba(0,153,255,.5)}
.mvw-wp.on{border-color:var(--accent);background:#101d2e}
.mvw-wp .n{font-family:var(--mono);font-size:11px;color:#c7d2dc;flex:0 0 12px}
.mvw-wp .nm{font-size:11px;font-weight:500}
.mvw-wp .mt{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px}
/* B안 : 썸네일 스트립 */
.mvw-strip{flex:0 0 auto;background:#05080e;border-top:1px solid var(--line);padding:11px 14px 14px}
.mvw-strip>b{display:block;font-size:12px;font-weight:600;margin-bottom:10px}
.mvw-strip>b em{font-style:normal;font-weight:400;font-size:11px;color:var(--muted);margin-left:5px}
.mvw-cards{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px}
.mvw-card{
  position:relative;width:210px;flex:0 0 210px;border-radius:4px;overflow:hidden;
  border:2px solid transparent;background:#0b1220;cursor:pointer;
}
.mvw-card.on{border-color:var(--accent)}
.mvw-card>img{width:100%;height:118px;object-fit:cover;display:block;background:#000}
.mvw-card .n{
  position:absolute;left:7px;top:7px;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:600;color:#fff;
}
.mvw-card .bd{padding:7px 9px 9px;position:relative}
.mvw-card .nm{font-size:11px;font-weight:500}
.mvw-card .tm{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:3px}
.mvw-card .go{position:absolute;right:8px;bottom:9px;width:14px;height:14px;color:#9fb4c4}
.mvw-card .go svg{width:14px;height:14px;display:block}
.mvw-card .go:hover{color:var(--accent)}

/* ---- 영상 조회 (전체보기) ---- */
.vw{position:relative;background:#000;height:820px;display:flex;flex-direction:column}
.vw-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.vw-stage>img{width:100%;height:100%;object-fit:cover;display:block}
.vw-head{
  position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:10px;
  padding:0 14px;background:rgba(0,0,0,.5);z-index:2;
}
.vw-head .nm{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.vw-head .nm .caret{width:9px;height:6px;color:rgba(255,255,255,.6)}
.vw-head .tm{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55)}
.vw-foot{flex:0 0 auto;padding:8px 14px 12px;background:#04070c}

/* ---- 관심인물 등록 ---- */
.wp-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px}
.wp-thumb{
  width:78px;height:98px;flex:0 0 78px;border-radius:3px;overflow:hidden;border:2px solid transparent;
  background:#000;cursor:pointer;
}
.wp-thumb.on{border-color:var(--accent)}
.wp-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.6}
.wp-thumb.on img{opacity:1}
.fm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.fm-lb{font-size:11px;color:#c7d2dc;margin-bottom:6px;display:block}
.fm-lb i{color:var(--danger);font-style:normal;margin-left:1px}
.fm-in{
  width:100%;height:30px;padding:0 10px;border-radius:4px;background:#0a1018;
  border:1px solid var(--line-2);font-size:12px;
}
.fm-in::placeholder{color:var(--muted)}
.fm-in:focus{border-color:var(--accent);outline:none}
.fm-row{margin-bottom:15px}
.pill-row{display:flex;gap:7px;flex-wrap:wrap}
.pill{
  height:26px;padding:0 13px;border-radius:13px;border:1px solid var(--line-2);
  font-size:11px;font-weight:500;color:#c7d2dc;
}
.pill.on{background:var(--accent-3);border-color:var(--accent-3);color:#fff}
.radio-row{display:flex;gap:20px}

/* ---- 객체 추가 (비교) ---- */
.oa-tools{display:flex;gap:8px;margin:0 0 12px}
.oa-count{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:9px}
.oa-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:430px;overflow-y:auto;padding-right:2px}
.oa-card{
  display:flex;gap:10px;padding:8px;border-radius:5px;background:#0a111c;border:1px solid var(--line);cursor:pointer;
}
.oa-card:hover{border-color:rgba(0,153,255,.45)}
.oa-card.on{border-color:var(--accent);background:#0e1a2a}
.oa-card>img{width:66px;height:62px;flex:0 0 66px;object-fit:cover;border-radius:3px;background:#000}
.oa-card .t1{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.oa-card .t1 .ic{width:12px;height:12px;color:var(--muted)}
.oa-card .t1 b{font-size:12px;font-weight:600}
.oa-card .t2{font-size:11px;color:#c7d2dc}
.oa-card .t3{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:3px}
.oa-group{grid-column:1/-1;display:flex;align-items:center;gap:6px;padding:9px 2px 3px;font-size:11px;font-weight:600;color:#c7d2dc;cursor:pointer}
.oa-group .caret{width:9px;height:6px;color:var(--muted);transform:rotate(180deg)}
.oa-group.closed .caret{transform:none}
.oa-group+.oa-card{border-top:0}

/* ---- 사건 등록 ---- */
.cs-row{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.cs-row:last-child{border-bottom:0}
.cs-row>.k{width:78px;flex:0 0 78px;font-size:11px;color:#c7d2dc;padding-top:8px}
.cs-row>.k i{color:var(--danger);font-style:normal}
.cs-row>.v{flex:1;min-width:0;display:flex;gap:10px;align-items:center}
.cs-obj{
  display:flex;gap:11px;padding:9px;border-radius:5px;background:#151b24;width:270px;
}
.cs-obj img{width:56px;height:70px;flex:0 0 56px;object-fit:cover;border-radius:3px;background:#000}
.cs-obj .bd{flex:1;display:flex;flex-direction:column;gap:6px}
.cs-obj .ln{display:flex;align-items:center;gap:6px;font-size:11px}
.cs-obj .ln .ic{width:12px;height:12px;color:var(--muted)}
.cs-obj .ed{align-self:flex-end;margin-top:auto;font-size:10px;color:#9fb4c4}
.cs-obj .ed:hover{color:var(--accent)}
.cs-dt{display:flex;align-items:center;gap:7px;flex:1;min-width:0;height:32px;padding:0 11px;border-radius:4px;background:#0a1018;border:1px solid var(--line-2)}
/* ICON.cal / ICON.clock 은 class·인라인 크기가 없는 SVG라 태그로 지정해야 한다 */
.cs-dt>svg{width:13px;height:13px;flex:0 0 13px;color:#9fb4c4}
.cs-dt input{background:none;border:0;outline:none;font-family:var(--mono);font-size:12px;width:100%}
.cs-dt input::-webkit-calendar-picker-indicator{display:none}
.cs-pick{display:flex;flex-direction:column;gap:9px;max-height:250px;overflow-y:auto;margin-top:2px}
.cs-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:5px;background:#0a111c;border:1px solid var(--line);cursor:pointer}
.cs-item:hover{border-color:rgba(0,153,255,.4)}
.cs-item.on{border-color:var(--accent);background:#0e1a2a}
.cs-item .bd{flex:1;min-width:0}
.cs-item .t1{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cs-item .t1 b{font-size:12px;font-weight:600}
.cs-item .t2{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted)}
.cs-item .t2 .ic{width:11px;height:11px}
.cs-item .t2 .dtx{font-family:var(--mono)}
.st{font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px}
.st.처리전{background:rgba(41,204,106,.16);color:#29cc6a}
.st.진행중{background:rgba(0,153,255,.16);color:#4db6ff}
.st.처리완료{background:rgba(74,101,117,.28);color:#a8bccb}
.st.보류{background:rgba(245,158,11,.16);color:#f59e0b}

/* ---- 영상 북마크 ---- */
.bm-vid{position:relative;border-radius:5px;overflow:hidden;background:#0a0f16;border:1px solid var(--line)}
.bm-vid>img{width:100%;height:270px;object-fit:cover;display:block;background:#000}
.bm-hash{
  position:absolute;right:10px;top:10px;height:22px;padding:0 10px;border-radius:11px;
  display:inline-flex;align-items:center;gap:5px;background:rgba(0,40,20,.6);border:1px solid #29cc6a;
  font-size:10px;font-weight:500;color:#5fe08f;
}
.bm-hash .ic{width:11px;height:11px}
.bm-bar{padding:10px 14px 12px}
.bm-ruler{position:relative;height:26px;margin-bottom:8px}
.bm-ruler .lb{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:9px;color:#8ea0b0}
.bm-ruler .tick{position:absolute;bottom:2px;width:1px;height:5px;background:rgba(74,101,117,.6)}
.bm-ruler .tick.maj{height:9px;background:rgba(74,101,117,.95)}
.bm-ruler .sel{
  position:absolute;bottom:0;height:14px;border-radius:2px;background:var(--accent);
  border-left:3px solid #fff;border-right:3px solid #fff;
}
.bm-ctrl{display:flex;align-items:center;justify-content:center;gap:6px}
.bm-ctrl .btn-icon{color:#dbe6ef}
.bm-field{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.bm-field:last-child{border-bottom:0}
.bm-field .k{width:78px;flex:0 0 78px;font-size:11px;color:var(--muted)}
.bm-field .v{flex:1;font-size:12px}

/* ============================================================
   GUI 정합 보정 — Figma 수치 반영
   ============================================================ */
/* Select Box : w140 · h28 · r4 */
#sortSelect .select-btn{width:140px;justify-content:space-between}
.select-btn{
  height:28px;background:var(--bg-2);border:1px solid var(--ln-border);border-radius:var(--r);
  color:var(--tx-secondary);font-size:12px;
}
.select-btn .caret{color:var(--ic-gray)}
.select.open .select-btn{border-color:var(--primary);color:var(--tx-primary)}
.select-menu{
  background:var(--bg-3);border:1px solid var(--ln-border);border-radius:var(--r);
}
.select-menu div{color:var(--tx-secondary)}
.select-menu div.on{color:var(--primary)}
/* Filter Chip : h28 · r999 (텍스트 검색 옵션) */
#textOptSelect .select-btn{height:28px;border-radius:9999px;padding:0 8px 0 12px}
/* 결과 영역 컨테이너 */
.results{background:var(--bg-2);border-radius:var(--r)}
.preview{background:var(--bg-2);border-radius:var(--r);border-left:0}
.side.ai-side{background:var(--bg-2)}
/* 모드 패널 여백 (Search block : px12 · gap12) */
.mode-panel{padding:16px 12px}
.panel-label{font-size:16px;font-weight:500;color:var(--tx-primary);letter-spacing:-.32px}
/* Tab bar : tab_add (px8 · icon 12) */
.tab-add{
  width:29px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r);color:var(--ic-gray);flex:0 0 auto;
}
.tab-add:hover{background:rgba(255,255,255,.08);color:var(--tx-primary)}

/* ============================================================
   GNB 아이콘 메뉴 + 메뉴 화면 (UI사양서_0807 확장분)
   ============================================================ */
.mb-right{display:flex;align-items:center;gap:2px}
.gnb-btn{
  position:relative;width:30px;height:var(--h-mb);display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--ic-gray);padding:0
}
.gnb-btn:hover{color:var(--ic-gray-dark)}
.gnb-btn.on{color:var(--tx-primary)}
.gnb-btn.on::after{content:'';position:absolute;left:5px;right:5px;bottom:0;height:2px;background:var(--primary)}
.gnb-btn .ic{width:16px;height:16px}

/* ---- 메뉴 화면 공통 ---- */
.menu-view{flex:1;display:flex;gap:8px;min-height:0;padding:8px;background:var(--bg-0)}
.mn-panel{background:var(--bg-2);border-radius:var(--r);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.mn-list{flex:1;min-width:0}
.mn-detail{width:800px;flex:0 0 800px}
.mn-narrow{width:260px;flex:0 0 260px}
.mn-head{
  height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 12px;border-bottom:1px solid var(--ln-subtle)
}
.mn-head h3{font-size:12px;font-weight:600;color:var(--tx-primary);display:flex;align-items:center;gap:6px}
.mn-head h3 .ic{width:14px;height:14px;color:var(--ic-gray)}
.mn-head-btns{display:flex;align-items:center;gap:6px}
.mn-body{flex:1;min-height:0;overflow:auto;padding:12px}
.mn-tools{padding:10px 12px 0;display:flex;flex-direction:column;gap:8px}
.mn-searchbox{position:relative}
.mn-searchbox .fm-in{width:100%;padding-right:30px}
.mn-searchbox .sic{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--ic-gray);pointer-events:none}
.mn-searchbox .sic .ic{width:14px;height:14px}
.mn-chips{display:flex;gap:6px}
.mn-chip{
  height:24px;padding:0 12px;border-radius:12px;border:1px solid var(--ln-border);background:transparent;
  color:var(--tx-tertiary);font-size:11px;cursor:pointer
}
.mn-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.mn-count{font-size:11px;color:var(--tx-tertiary);padding:2px 0 0}
.mn-count em{color:var(--tx-secondary);font-style:normal}
.mn-empty{
  flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px;
  font-size:12px;color:var(--tx-helper);text-align:center
}

/* ---- 북마크 목록 카드 ---- */
.bmk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bmk-card{
  display:flex;gap:10px;padding:8px;border-radius:6px;background:var(--bg-3);
  border:1px solid transparent;cursor:pointer;position:relative
}
.bmk-card:hover{border-color:var(--ln-border)}
.bmk-card.on{border-color:var(--primary);background:#1b2432}
.bmk-thumb{position:relative;width:132px;height:78px;flex:0 0 132px;border-radius:4px;overflow:hidden;background:var(--bg-2)}
.bmk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bmk-card.obj .bmk-thumb{width:64px;flex:0 0 64px;height:78px}
.bmk-dur{
  position:absolute;left:4px;bottom:4px;padding:1px 5px;border-radius:3px;
  background:var(--overlay);color:#fff;font-family:var(--mono);font-size:9px
}
.bmk-meta{flex:1;min-width:0;padding-top:2px}
.bmk-place{font-size:12px;font-weight:600;color:var(--tx-primary);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmk-sub{font-size:11px;color:var(--tx-tertiary);margin-bottom:2px}
.bmk-time{font-family:var(--mono);font-size:9.5px;color:var(--tx-helper);line-height:1.5}
.bmk-star{
  position:absolute;right:6px;top:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--primary);padding:0
}
.bmk-star .ic{width:13px;height:13px}
.bmk-star:hover{color:var(--tx-primary)}

/* ---- 북마크 상세 ---- */
.bmk-dt{padding:12px}
.bmk-imgs{display:flex;gap:8px;margin-bottom:12px}
.bmk-imgs .rep{width:150px;height:186px;border-radius:5px;overflow:hidden;background:var(--bg-2);flex:0 0 150px}
.bmk-imgs .rep img{width:100%;height:100%;object-fit:cover;display:block}
.bmk-imgs .thumbs{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.bmk-imgs .thumbs img{width:58px;height:58px;object-fit:cover;border-radius:4px;background:var(--bg-2);
  border:1px solid transparent;cursor:pointer}
.bmk-imgs .thumbs img.on{border-color:var(--primary)}
.bmk-swatch{display:inline-flex;align-items:center;gap:6px}
.bmk-swatch i{width:14px;height:14px;border-radius:3px;border:1px solid var(--ln-border);display:inline-block}
.bmk-tledit{position:relative}
.bmk-tledit .sel{cursor:ew-resize}
.bmk-memo{width:100%;min-height:56px;resize:vertical}

/* ---- 사건 관리 ---- */
.cs-card{padding:9px 10px;border-radius:6px;background:var(--bg-3);border:1px solid transparent;cursor:pointer;margin-bottom:8px}
.cs-card:hover{border-color:var(--ln-border)}
.cs-card.on{border-color:var(--primary);background:#1b2432}
.cs-card .nm{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tx-primary);margin-bottom:5px}
.cs-card .sub{font-family:var(--mono);font-size:9.5px;color:var(--tx-helper)}
.st-chip{padding:1px 7px;border-radius:9px;font-size:9.5px;font-weight:600;white-space:nowrap}
.st-ing{background:rgba(48,112,216,.18);color:#7fb0ff}
.st-pre{background:rgba(232,192,72,.16);color:#e8c048}
.st-done{background:rgba(63,190,126,.16);color:#3fbe7e}
.cs-dt-head{padding:12px 14px 10px;border-bottom:1px solid var(--ln-subtle)}
.cs-title{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cs-title h2{font-size:15px;font-weight:600;color:var(--tx-primary)}
.cs-title .dt{font-family:var(--mono);font-size:10px;color:var(--tx-helper)}
.cs-title .sp{flex:1}
.cs-metaline{display:flex;gap:18px;font-size:11px;color:var(--tx-tertiary);margin-bottom:4px}
.cs-metaline .mono{font-family:var(--mono);font-size:10px}
.cs-desc{font-size:11.5px;color:var(--tx-secondary);line-height:1.6}
.acc{border-bottom:1px solid var(--ln-subtle)}
.acc-h{display:flex;align-items:center;gap:7px;padding:11px 14px;cursor:pointer;user-select:none}
.acc-h .ic{width:13px;height:13px;color:var(--ic-gray)}
.acc-h .tt{font-size:12px;font-weight:600;color:var(--tx-primary)}
.acc-h .cv{margin-left:auto;color:var(--ic-gray);transition:transform .15s}
.acc.open .acc-h .cv{transform:rotate(90deg)}
.acc-b{display:none;padding:0 14px 14px}
.acc.open .acc-b{display:block}
.csrep{background:var(--bg-1);border:1px solid var(--ln-subtle);border-radius:6px;padding:13px 15px}
.csrep h4{font-size:12.5px;font-weight:600;color:var(--tx-primary);margin-bottom:3px}
.csrep .meta{font-size:10px;color:var(--tx-helper);margin-bottom:11px}
.csrep section{margin-bottom:10px}
.csrep section:last-child{margin-bottom:0}
.csrep section h5{font-size:11.5px;font-weight:600;color:var(--tx-secondary);margin-bottom:3px}
.csrep section p{font-size:11px;color:var(--tx-tertiary);line-height:1.65}
.tg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tg-card{display:flex;gap:8px;padding:8px;border-radius:6px;background:var(--bg-3)}
.tg-card img{width:44px;height:56px;object-fit:cover;border-radius:4px;flex:0 0 44px;background:var(--bg-2)}
.tg-card .info{min-width:0;flex:1}
.tg-card .nm{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;margin-bottom:4px}
.tg-card .nm .ic{width:11px;height:11px;color:var(--ic-gray)}
.tg-kv{display:flex;gap:8px;font-size:9px;color:var(--tx-helper);margin-bottom:2px}
.tg-kv b{font-weight:400;color:var(--tx-tertiary);font-family:var(--mono)}
.ev-card{display:flex;gap:10px;padding:9px;border-radius:6px;background:var(--bg-3);margin-bottom:8px}
.ev-card .th{position:relative;width:120px;height:70px;flex:0 0 120px;border-radius:4px;overflow:hidden;background:var(--bg-2)}
.ev-card .th img{width:100%;height:100%;object-fit:cover;display:block}
.ev-hash{position:absolute;left:4px;top:4px;display:flex;align-items:center;gap:3px;padding:1px 5px;border-radius:9px;
  background:rgba(10,20,14,.82);border:1px solid rgba(63,190,126,.5);color:#3fbe7e;font-size:8px;white-space:nowrap}
.ev-hash .ic{width:8px;height:8px}
.ev-card .info{flex:1;min-width:0}
.ev-card .pl{font-size:11.5px;font-weight:600;margin-bottom:4px}
.ev-btn{margin-left:auto;align-self:flex-end}
.pth-list{display:flex;flex-direction:column;gap:5px}
.pth-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:5px;background:var(--bg-3);font-size:11px}
.pth-row .t{font-family:var(--mono);font-size:10px;color:var(--tx-tertiary);width:56px;flex:0 0 56px}
.pth-row .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.pth-row .cm{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--tx-helper)}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px}
.legend span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--tx-tertiary)}
.legend i{width:7px;height:7px;border-radius:50%}
.mn-chips{flex-wrap:wrap}
.mn-chip{white-space:nowrap;padding:0 9px}
.tg-kv i{border-radius:2px!important}

/* ---- 맵 관리 ---- */
.mp-card{padding:10px 11px;border-radius:6px;background:var(--bg-3);border:1px solid transparent;cursor:pointer;margin-bottom:8px}
.mp-card:hover{border-color:var(--ln-border)}
.mp-card.on{border-color:var(--primary);background:#1b2432}
.mp-card .nm{font-size:12px;font-weight:600;color:var(--tx-primary);margin-bottom:4px}
.mp-card .sub{font-family:var(--mono);font-size:9.5px;color:var(--tx-helper)}
.mp-stage{position:relative;flex:1;min-height:0;border-radius:6px;overflow:hidden;background:var(--bg-1);border:1px solid var(--ln-subtle)}
.mp-stage>img{width:100%;height:100%;object-fit:contain;display:block;opacity:.9}
.mp-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:grab}
.mp-pin .dot{width:20px;height:20px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(0,0,0,.5)}
.mp-pin .dot .ic{width:12px;height:12px;color:#fff}
.mp-pin .lb{margin-top:3px;position:relative;padding:1px 6px;border-radius:9px;background:var(--overlay);color:#fff;font-size:9px;white-space:nowrap}
.mp-pin .lb .x{display:none;margin-left:4px;cursor:pointer;color:#ff9d9d}
.mp-pin:hover .lb .x{display:inline}
.mp-camrow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:5px;background:var(--bg-3);margin-bottom:6px;font-size:11.5px;cursor:grab}
.mp-camrow .plus{margin-left:auto;width:20px;height:20px;border-radius:4px;border:1px solid var(--ln-border);
  background:transparent;color:var(--tx-secondary);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.mp-camrow.placed .plus{background:var(--primary);border-color:var(--primary);color:#fff}
.mp-up{border:1px dashed var(--ln-border);border-radius:6px;padding:26px 16px;text-align:center;color:var(--tx-helper);font-size:11px}
.mp-up b{display:block;color:var(--tx-secondary);font-size:12px;margin-bottom:5px;font-weight:500}
.fm-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--ln-subtle)}
.fm-row>.k{width:80px;flex:0 0 80px;font-size:11px;color:var(--tx-tertiary);padding-top:5px}
.fm-row>.v{flex:1;min-width:0;font-size:12px}
.fm-row .req{color:var(--st-mid)}
.hintline{font-size:10.5px;color:var(--tx-helper);padding:6px 0}

/* ---- 알림 ---- */
.al-date{font-family:var(--mono);font-size:10px;color:var(--tx-tertiary);padding:9px 2px 6px}
.al-card{display:flex;gap:9px;padding:8px;border-radius:6px;background:var(--bg-3);border:1px solid transparent;cursor:pointer;margin-bottom:7px;position:relative}
.al-card:hover{border-color:var(--ln-border)}
.al-card.on{border-color:var(--primary);background:#1b2432}
.al-card.unread::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--primary)}
.al-card img{width:82px;height:52px;flex:0 0 82px;object-fit:cover;border-radius:4px;background:var(--bg-2)}
.al-card .tt{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;margin-bottom:3px}
.al-card .who{font-size:10.5px;color:var(--tx-secondary);margin-bottom:2px}
.al-card .lc{font-family:var(--mono);font-size:9px;color:var(--tx-helper)}
.wt-row{display:flex;align-items:center;gap:9px;padding:9px;border-radius:6px;background:var(--bg-3);margin-bottom:7px;cursor:pointer;font-size:11.5px}
.wt-row:hover{outline:1px solid var(--ln-border)}
.wt-row .cb{width:15px;height:15px;flex:0 0 15px}
.wt-row .nm{font-weight:600;width:74px;flex:0 0 74px}
.wt-row .cl{color:var(--tx-secondary);width:90px;flex:0 0 90px;font-size:10.5px}
.wt-row .md{color:var(--tx-tertiary);font-size:10.5px}
.wt-row .rg{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--tx-helper)}
.wt-bar{display:flex;align-items:center;gap:8px;padding:8px 0}
.wt-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.wt-imgs img{width:64px;height:64px;object-fit:cover;border-radius:5px;background:var(--bg-2);border:1px solid transparent;cursor:pointer}
.wt-imgs img.on{border-color:var(--primary)}
.wt-imgs .repbadge{position:absolute;left:3px;top:3px;padding:0 4px;border-radius:7px;background:var(--primary);color:#fff;font-size:8px}
.chipset{display:flex;gap:6px;flex-wrap:wrap}
.car-recent{display:flex;flex-direction:column;gap:4px}
.car-rc{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:5px;background:var(--bg-3);
  font-family:var(--mono);font-size:11px;color:var(--tx-secondary);cursor:pointer}
.car-rc:hover{background:#252732}
.car-rc .x{margin-left:auto;background:none;border:0;color:var(--tx-helper);cursor:pointer;font-size:10px;padding:0 2px}
.car-rc .x:hover{color:var(--tx-primary)}

/* ============================================================
   A타입 레이아웃 (GNB/LNB 개선 260824)
   윈도우 크롬(AI·알림) + 좌측 LNB + 검색 패널 + [탭바 + 결과]
   ============================================================ */
.menubar{display:none}
.win-ai{height:22px;padding:0 10px 0 8px;font-size:11px;gap:4px;margin-right:6px}
.win-ai .i-ai{width:13px;height:13px}

.shell{flex:1;display:flex;min-height:0;background:var(--bg-0)}
.shell-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

.lnb{
  width:57px;flex:0 0 57px;background:var(--bg-2);border-right:1px solid var(--ln-subtle);
  display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:4px
}
.lnb button{
  width:100%;background:none;border:0;cursor:pointer;padding:6px 0 5px;
  display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--tx-helper)
}
.lnb button:hover{color:var(--tx-secondary)}
.lnb .bx{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.lnb .bx .ic{width:17px;height:17px}
.lnb span{font-size:9.5px;letter-spacing:-.3px}
.lnb button.on{color:var(--tx-primary)}
.lnb button.on .bx{background:var(--primary);color:#fff}

/* 검색 패널이 shell 직속으로 이동 → 라운드/여백 조정 */
.shell > .side{border-radius:0;border-right:1px solid var(--ln-subtle);margin:0}
.shell > .side .side-head{padding-left:14px}
.workspace{padding:0 8px 8px}
.tabbar{background:var(--bg-0);border-bottom:1px solid var(--ln-subtle);padding-left:8px}

/* 모드 칩 (아이콘 레일 → 칩) */
.mode-chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 6px}
.mode-chips button{
  height:26px;padding:0 11px;border-radius:13px;border:1px solid var(--ln-border);
  background:transparent;color:var(--tx-tertiary);font-size:11px;cursor:pointer;white-space:nowrap
}
.mode-chips button:hover{color:var(--tx-secondary);border-color:var(--tx-helper)}
.mode-chips button.on{border-color:var(--primary);color:#7fb0ff;background:rgba(48,112,216,.1)}
.mode-chips button[data-mode="aim"].on{border-color:var(--ai-line);color:#c9b8f5;background:rgba(181,159,228,.12)}

/* 텍스트 모드 : 라벨/드롭다운 숨기고 입력창 안에 검색 버튼 */
.mode-panel[data-panel="text"] .panel-top,
.mode-panel[data-panel="car"] .panel-top{display:none}
.textarea-wrap{position:relative}
.ta-search{
  position:absolute;right:9px;bottom:9px;width:24px;height:24px;border-radius:50%;
  border:0;background:var(--bg-3);color:var(--tx-secondary);cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.ta-search:hover{background:var(--primary);color:#fff}
.ta-search .ic{width:13px;height:13px}

/* 최근 검색 pill */
.recent-wrap{padding:4px 14px 8px}
.recent-wrap .lb{font-size:11px;color:var(--tx-tertiary);margin:6px 0 7px}
.recent-pill{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:0 5px 6px 0;
  padding:5px 9px 5px 11px;border-radius:14px;background:var(--bg-3);
  font-size:11px;color:var(--tx-secondary);cursor:pointer
}
.recent-pill:hover{background:#252732;color:var(--tx-primary)}
.recent-pill .x{background:none;border:0;color:var(--tx-helper);cursor:pointer;font-size:10px;padding:0}
.recent-pill .x:hover{color:var(--tx-primary)}

/* AI 검색 모드 = 좌측 패널 대화형 */
.aim-body{display:flex;flex-direction:column;height:100%;min-height:0}
.aim-scroll{flex:1;min-height:0;overflow:auto;padding:6px 14px}
.aim-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--tx-primary);margin:6px 0 12px}
.aim-title .i-ai{width:14px;height:14px}
.aim-sugg{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.aim-sugg button{
  text-align:left;padding:8px 13px;border-radius:16px;font-size:11.5px;cursor:pointer;
  background:var(--bg-2);color:var(--tx-secondary);border:1px solid var(--ai-line)
}
.aim-sugg button:hover{color:var(--tx-primary);background:#22242c}
.aim-user{align-self:flex-end;margin:14px 0 0 auto;padding:8px 12px;border-radius:14px 14px 4px 14px;
  background:var(--bg-3);font-size:11.5px;color:var(--tx-primary);max-width:88%}
.aim-wait{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;color:var(--tx-tertiary)}
.aim-input{margin:0 14px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--bg-1);padding:10px 11px 8px}
.aim-input textarea{width:100%;min-height:44px;resize:none;background:none;border:0;outline:none;
  color:var(--tx-primary);font-size:11.5px;font-family:inherit}
.aim-input textarea::placeholder{color:var(--tx-helper)}
.aim-row{display:flex;align-items:center;margin-top:4px}
.aim-row .plus{width:22px;height:22px;border:0;background:none;color:var(--tx-tertiary);cursor:pointer;font-size:15px}
.aim-send{margin-left:auto;width:26px;height:26px;border-radius:50%;border:0;background:var(--primary);color:#fff;cursor:pointer}
.mode-panel[data-panel="aim"]{flex:1;min-height:0}
.mode-panel[data-panel="aim"].on{display:flex;flex-direction:column}
.mode-chips{align-content:flex-start;flex:0 0 auto}
.mode-chips{width:100%;box-sizing:border-box}
.aim-body{height:calc(100vh - 200px)}
/* A타입: side-body 를 세로 배치로 (구 아이콘 레일 → 상단 칩) */
.side-body{flex-direction:column}
.mode-panels{width:100%;flex:1 1 auto;min-height:0}

/* ============================================================
   탭 디자인 변경 + AI 그라디언트 + AI 오버레이 (B안 동작) 260824
   ============================================================ */
:root{
  --ai-grad: linear-gradient(90deg,#1690e8 30%,#c452ec 52%,#f52f67 70%,#f89303 90%);
}
/* --- 그라디언트 테두리 유틸 --- */
.gradb{position:relative;background:transparent;border:0}
.gradb::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}

/* --- 탭 (GNB Tab/2depth) --- */
.tabbar{gap:0;padding-left:6px;background:var(--bg-1)}
.tabs{display:flex;align-items:center;gap:0}
.tabs .tab{
  width:200px;flex:0 0 200px;height:28px;display:flex;align-items:center;gap:6px;
  padding:0 10px;border-radius:5px 5px 0 0;box-sizing:border-box;
  background:var(--bg-2);color:var(--tx-secondary);font-size:12px;font-weight:500;
  border:0;border-right:1px solid var(--ln-subtle);cursor:pointer;position:relative
}
.tabs .tab span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs .tab.on{background:var(--bg-3);color:var(--tx-primary);font-weight:400}
.tabs .tab .x{width:15px;height:15px;flex:0 0 15px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--tx-helper);cursor:pointer;font-size:10px;border-radius:3px}
.tabs .tab .x:hover{background:rgba(255,255,255,.1);color:var(--tx-primary)}
.tab-add{margin-left:6px}

/* --- 윈도우 크롬 AI 버튼 : 투명 + 그라디언트 테두리 --- */
.win-ai{
  width:50px;height:24px;border-radius:9999px;padding:0;gap:3px;
  background:transparent;color:var(--tx-primary);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center
}
.win-ai::before{
  content:'';position:absolute;inset:0;border-radius:9999px;padding:1px;background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}
.win-ai{position:relative;border:0}
.win-ai.on{background:rgba(196,82,236,.14)}

/* --- AI 검색 칩 / 추천 질문 : 그라디언트 --- */
.mode-chips button[data-mode="aim"]{position:relative;border:0;color:var(--tx-secondary)}
.mode-chips button[data-mode="aim"]::before{
  content:'';position:absolute;inset:0;border-radius:13px;padding:1px;background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}
.mode-chips button[data-mode="aim"].on{background:rgba(196,82,236,.13);color:var(--tx-primary)}
.aim-sugg button{position:relative;border:0;background:transparent;min-height:36px;border-radius:9999px}
.aim-sugg button::before{
  content:'';position:absolute;inset:0;border-radius:9999px;padding:1px;background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}
.aim-sugg button:hover{background:rgba(196,82,236,.10)}
.aim-input{position:relative;border:0;border-radius:10px}
.aim-input::before{
  content:'';position:absolute;inset:0;border-radius:10px;padding:1px;background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}

/* --- AI 에이전트 오버레이 (B타입 : 콘텐츠 축소 없이 레이어) --- */
.ai-float{
  position:fixed;right:10px;top:44px;width:345px;z-index:60;
  background:var(--bg-2);border:1px solid var(--ln-border);border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;max-height:calc(100vh - 120px)
}
.ai-float .afh{
  height:40px;flex:0 0 40px;display:flex;align-items:center;padding:0 8px 0 14px;
  border-bottom:1px solid var(--ln-subtle);font-size:12.5px;font-weight:600;color:var(--tx-primary)
}
.ai-float .afh .x{margin-left:auto;width:24px;height:24px;border:0;background:none;color:var(--ic-gray);cursor:pointer}
.ai-float .afh .x:hover{color:var(--tx-primary)}
.ai-float .aim-body{height:auto;flex:1;min-height:0}
.ai-float .aim-scroll{max-height:52vh}

/* ============================================================
   탭 디자인 GUI 정합 (GNB Tab/2depth) + B 시안 레이아웃 260825
   ============================================================ */
.tabbar{height:34px;flex:0 0 34px;padding-left:0;gap:0;align-items:flex-end}
.tabbar #btnHistory{width:34px;height:34px;flex:0 0 34px}
.tabs .tab{
  width:200px;flex:0 0 200px;height:28px;border-radius:0;padding:0 8px;gap:4px;
  border-right:0;background:var(--bg-2);color:var(--tx-secondary);font-size:12px;font-weight:500
}
.tabs .tab.on{background:var(--bg-3);color:var(--tx-primary);font-weight:400}
.tabs .tab .i-home{display:none}
.tabs .tab .x{width:20px;height:20px;flex:0 0 20px;border-radius:3px;opacity:0;transition:opacity .12s}
.tabs .tab:hover .x,.tabs .tab.on .x{opacity:1}
.tab-add{width:34px;height:34px;margin-left:0}

/* ---- 레이아웃 시안 전환 (A / B) ---- */
.layout-sw{display:flex;align-items:center;gap:0;margin-right:8px;border:1px solid var(--ln-border);border-radius:6px;overflow:hidden}
.layout-sw button{
  height:22px;padding:0 10px;border:0;background:transparent;color:var(--tx-tertiary);
  font-size:10.5px;font-weight:600;cursor:pointer
}
.layout-sw button.on{background:var(--primary);color:#fff}

/* ---- B 시안 : 패널 헤더 브레드크럼 ---- */
.side-crumb{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tx-secondary)}
.side-crumb .sep{color:var(--tx-helper);font-size:10px}
.side-crumb .mchip{
  display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 6px 0 8px;border-radius:4px;
  background:var(--bg-3);color:var(--tx-primary);font-size:11.5px
}
.side-crumb .mchip .x{width:20px;height:20px;border:0;background:none;color:var(--ic-gray);cursor:pointer;font-size:10px}
.side-crumb .mchip .x:hover{color:var(--tx-primary)}

/* ---- B 시안 : AI 검색 한 줄 입력 + 일반 검색 칩 ---- */
.bsec{padding:12px 14px 0}
.bsec .lb{font-size:12px;font-weight:600;color:var(--tx-primary);margin-bottom:8px}
.b-aibox{
  position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 8px 0 12px;
  border-radius:9999px;background:transparent;cursor:pointer
}
.b-aibox::before{
  content:'';position:absolute;inset:0;border-radius:9999px;padding:1px;background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}
.b-aibox .plus{color:var(--tx-tertiary);font-size:14px}
.b-aibox .ph{flex:1;font-size:12px;color:var(--tx-helper)}
.b-aibox .go{width:26px;height:26px;border-radius:50%;background:var(--bg-3);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.b-aibox .go .i-ai{width:14px;height:14px}
.b-chips{display:flex;flex-wrap:wrap;gap:6px}
/* 윈도우 크롬 우측 : 높이가 다른 요소 수직 중앙 정렬 */
.win-r{align-items:center}
.win-ai,.layout-sw{align-self:center}
/* 탭 스트립 : 콘텐츠 영역과 동일 배경 (GUI 는 스트립 fill 없음) */
.tabbar{background:var(--bg-0);border-bottom:0}
.tabs .tab{border-bottom:0}

/* ============================================================
   텍스트 검색 자동완성 (Search main_001_2) — 입력창 통합 드롭다운
   ============================================================ */
.mode-panel[data-panel="text"] .textarea-wrap{
  border:1px solid var(--ln-border);border-radius:8px;background:var(--bg-1);overflow:hidden
}
.mode-panel[data-panel="text"] .textarea-wrap.ac-open{border-color:var(--primary)}
.mode-panel[data-panel="text"] .textarea-wrap textarea{border:0;background:transparent}
#textRecent{display:none;border-top:1px solid var(--ln-subtle);padding:8px 0 4px}
.textarea-wrap.ac-open #textRecent{display:block}
#textRecent .lb{padding:0 11px 6px;font-size:10.5px;color:var(--tx-helper);margin:0}
.ac-row{
  display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:11.5px;
  color:var(--tx-secondary);cursor:pointer
}
.ac-row:hover{background:var(--bg-3);color:var(--tx-primary)}
.ac-row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-row .x{width:18px;height:18px;border:0;background:none;color:var(--tx-helper);cursor:pointer;font-size:10px;border-radius:3px}
.ac-row .x:hover{background:rgba(255,255,255,.08);color:var(--tx-primary)}
/* 자동완성 열림 상태에서는 입력창 내 검색 버튼 숨김 (GUI 001_2 기준) */
.textarea-wrap.ac-open .ta-search{display:none}

/* ============================================================
   인물 관리 팝업 — GUI 정합 (Search main_003_4 / 003_5)
   ============================================================ */
.pmg-tools{display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.pmg-r1{display:flex;align-items:center}
.pmg-r1 .lb{font-size:12px;font-weight:600;color:var(--tx-primary)}
.pmg-r1 .btn-ghost{margin-left:auto;border-color:var(--primary);color:#7fb0ff}
.pmg-search{position:relative}
.pmg-search input{width:100%;padding-right:32px}
.pmg-search .sic{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--ic-gray);pointer-events:none}
.pmg-search .sic .ic{width:15px;height:15px}
.pmg-r2{display:flex;align-items:center;gap:10px}
.pmg-r2 .div{color:var(--ln-border)}
.pmg-r2 .lk{background:none;border:0;color:var(--tx-tertiary);font-size:11.5px;cursor:pointer;padding:0}
.pmg-r2 .lk:disabled{color:var(--tx-helper);cursor:default}
.pmg-r2 .lk:not(:disabled):hover{color:var(--tx-primary)}
.pmg-r2 .sel{margin-left:auto}

/* 카드 : 2열, 좌 썸네일 + 우 정보 */
.pmg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pmg-card{display:flex;gap:0;background:var(--bg-3);border:1px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;position:relative}
.pmg-card:hover{border-color:var(--ln-border)}
.pmg-card.on{border-color:var(--primary)}
.pmg-card .th{width:130px;flex:0 0 130px;height:130px;background:var(--bg-2)}
.pmg-card .th img{width:100%;height:100%;object-fit:cover;display:block}
.pmg-card .bd{flex:1;min-width:0;padding:11px 12px;display:flex;flex-direction:column}
.pmg-card .nm{font-size:12.5px;font-weight:600;color:var(--tx-primary)}
.pmg-card .gu{font-family:var(--mono);font-size:10.5px;color:var(--tx-secondary);margin-top:3px}
.pmg-card .ds{font-size:11px;color:var(--tx-tertiary);margin-top:8px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pmg-card .rg{font-family:var(--mono);font-size:9.5px;color:var(--tx-helper);margin-top:auto}
.pmg-card .cb{position:absolute;right:8px;top:8px}

/* 등록·수정·상세 폼 */
.pmf-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pmf-head .lb{font-size:12px;font-weight:600;color:var(--tx-primary)}
.pmf-head .lb i{color:var(--st-mid);font-style:normal}
.pmf-head .btn-ghost{margin-left:auto;border-color:var(--primary);color:#7fb0ff}
.pmf-imgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  background:var(--bg-1);border:1px solid var(--ln-subtle);border-radius:6px;padding:10px;min-height:120px}
.pmf-img{position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--bg-2);border:1px solid transparent}
.pmf-img.is-rep{border-color:var(--primary)}
.pmf-img img{width:100%;height:100%;object-fit:cover;display:block}
.pmf-badges{position:absolute;left:4px;top:4px;display:flex;gap:3px}
.pmf-bd{padding:1px 5px;border-radius:3px;font-size:8.5px;font-weight:600;color:#fff}
.pmf-bd.b-rep{background:var(--primary)}
.pmf-bd.face{background:#2fa96b}
.pmf-bd.obj{background:#7b5bd6}
.pmf-img .x{position:absolute;right:4px;top:4px;width:16px;height:16px;border-radius:50%;border:0;
  background:rgba(0,0,0,.62);color:#fff;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pmf-drop{background:var(--bg-1);border:1px solid var(--ln-subtle);border-radius:6px;
  padding:44px 16px;text-align:center;cursor:pointer}
.pmf-drop .up-ic{width:26px;height:26px;color:var(--tx-tertiary);margin-bottom:10px}
.pmf-drop .m{font-size:12px;color:var(--tx-secondary)}
.pmf-drop .s{font-size:10.5px;color:var(--tx-helper);margin:4px 0 12px}
.pmf-row{margin-top:14px}
.pmf-row > label{display:block;font-size:11.5px;color:var(--tx-secondary);margin-bottom:6px}
.pmf-row > label i{color:var(--st-mid);font-style:normal}
.pmf-row input,.pmf-row textarea{width:100%}
.pmf-row textarea{min-height:54px;resize:vertical}
.pmf-row input:disabled,.pmf-row textarea:disabled{background:var(--bg-2);color:var(--tx-tertiary)}
.pmf-imgs{align-items:start;align-content:start}
/* 썸네일 비율 고정 (이미지가 셀을 밀어내지 않도록) */
.pmf-img{height:auto}
.pmf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* GUI 썸네일은 세로형(3:4) */
.pmf-img{aspect-ratio:3/4}

/* ============================================================
   GUI 정합 — 대시보드 공통 (Figma 4307:27222 / 4345:26657) 실측 반영
   2026-08-26 · 1단계 : 레이아웃 골격
   Side Panel 370(= Tool Bar 50 + Wrap 320) · Contents 1118 · Right 400 · 거터 8
   ============================================================ */

/* --- LNB (Tool Bar) : 50px, 아이템 pitch 65 --- */
.lnb{
  width:50px;flex:0 0 50px;padding:14px 0 0;gap:0;
  border-right:1px solid var(--ln-subtle);background:var(--bg-2)
}
.lnb button{padding:0;gap:2px;height:45px;margin-bottom:20px}
.lnb .bx{width:28px;height:28px;border-radius:6px}
.lnb .bx .ic{width:20px;height:20px}
.lnb span{font-size:10px;line-height:15px;letter-spacing:-.3px}

/* --- 검색 패널 Wrap : 320px --- */
:root{--w-side:320px}

/* --- 패널 헤더 : 44px, padding 12, 아이콘 20×20 gap 16 --- */
.shell > .side .side-head{height:44px;flex:0 0 44px;padding:0 12px;align-items:center}
.side-title{font-size:15px;line-height:18px}
.side-head-btns{gap:16px}
.side-head-btns .btn-icon{width:20px;height:20px}

/* --- 탭바 : 30px, 탭 200×28 gap 4, 히스토리 우측 --- */
.tabbar{height:30px;flex:0 0 30px;padding:0 4px;align-items:center;gap:0}
.tabs{gap:4px;height:28px}
.tabs .tab{width:200px;flex:0 0 200px;height:28px}
.tabs .tab::after{display:none}
.tb-history{
  margin-left:auto;height:28px;display:flex;align-items:center;gap:4px;
  padding:0 4px;background:none;border:0;cursor:pointer;color:var(--tx-secondary);
  font-size:12px;line-height:18px;white-space:nowrap
}
.tb-history .i{width:20px;height:20px}
.tb-history:hover{color:var(--tx-primary)}

/* --- 콘텐츠 행 : Contents(1118) + Right Pannel(400), 거터 8 --- */
.main-row{flex:1;display:flex;gap:8px;min-height:0;padding:8px 8px 8px 0}
.content-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.content-col > .tabbar{padding:0 4px;background:transparent;border-bottom:0}
.content-col > .workspace{flex:1;padding:0;gap:8px}
.content-col > .menu-view{flex:1;min-height:0}
.main-row > .preview{
  flex:0 0 400px;width:400px;align-self:stretch;
  background:var(--bg-2);border-radius:var(--r);border-left:0;margin:0
}
.main-row > .preview[hidden]{display:none}

/* --- 8px 거터 : Side Panel(370) + Contents(1118) + Right(400) = 1920 --- */
.shell{padding:8px;gap:8px;box-sizing:border-box}
.shell > .lnb{border-radius:var(--r) 0 0 var(--r)}
.shell > .side{border-radius:0 var(--r) var(--r) 0;border-right:0}
.main-row{padding:0}

/* --- 히스토리 버튼 : #btnHistory ID 규칙(1657줄)을 덮어써야 라벨이 산다 --- */
.tabbar #btnHistory{
  width:auto;height:28px;flex:0 0 auto;margin-left:auto;
  display:flex;align-items:center;gap:4px;padding:0 4px;
  background:none;border:0;border-radius:var(--r);cursor:pointer;
  color:var(--tx-secondary);font-size:12px;line-height:18px;white-space:nowrap
}
.tabbar #btnHistory .i{width:20px;height:20px;flex:0 0 20px}
.tabbar #btnHistory:hover{color:var(--tx-primary);background:rgba(255,255,255,.06)}

/* LNB+검색패널은 하나의 카드(Side Panel 370) → 사이 간격 0, 콘텐츠와만 8 띄운다 */
.shell{gap:0}
.shell > .shell-main{margin-left:8px}
.tabbar #btnHistory{width:80px;flex:0 0 80px;justify-content:flex-start;padding:0 0 0 4px}

/* --- AI 유무 시안 스위치 (윈도우 크롬, 레이아웃 스위치와 동일 폼) --- */
.ai-sw button.on{background:#7b5bd6}
body.ai-off #btnAI{display:none}
body.ai-off #aiFloat{display:none}

/* ============================================================
   GUI 정합 3단계 — 검색 패널 컴포넌트 (Figma 4307:27790 실측)
   Inner 320 · 좌우 padding 12 → 콘텐츠 폭 296
   ============================================================ */

/* --- 모드 칩 : h28 · gap 6 · padding 12 12 --- */
.mode-chips{padding:12px 12px 0;gap:6px}
.mode-chips button{
  height:28px;padding:0 12px;border-radius:14px;font-size:12px;line-height:18px
}

/* --- 입력창 : 296×102, 칩과 16px 간격, 하단에 + / 검색 --- */
.mode-panel[data-panel="text"] .textarea-wrap,
.mode-panel[data-panel="car"] .textarea-wrap{
  min-height:102px;box-sizing:border-box;
  border:1px solid var(--ln-border);border-radius:6px;background:var(--bg-1);position:relative
}
.mode-panel[data-panel="text"] .textarea-wrap textarea,
.mode-panel[data-panel="car"] .textarea-wrap textarea{
  border:0;background:transparent;padding:10px 12px 0;min-height:52px;
  font-size:12px;line-height:18px;resize:none
}
.ta-plus{
  position:absolute;left:12px;bottom:10px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--tx-tertiary)
}
.ta-plus:hover{color:var(--tx-secondary)}
.mode-panel .ta-search{
  position:absolute;right:12px;bottom:6px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-3);border:0;cursor:pointer;color:var(--tx-secondary)
}
.mode-panel .ta-search:hover{color:var(--tx-primary)}
.mode-panel .ta-search svg,.mode-panel .ta-search .i{width:16px;height:16px}

/* --- 상시 `최근 검색` 블록 : label 16 / gap 24 / li h32 pitch 38 --- */
.recent-blk .rb-lb{font-size:12px;line-height:16px;color:var(--tx-secondary);margin-bottom:8px}
.recent-blk .rb-list{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.recent-blk .rb-li{
  height:32px;display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:0 12px;border-radius:16px;background:var(--bg-3);cursor:pointer
}
.recent-blk .rb-li:hover{background:#2c2d35}
.recent-blk .rb-li .t{
  font-size:12px;line-height:16px;color:var(--tx-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.recent-blk .rb-li .x{
  width:12px;height:12px;flex:0 0 12px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--tx-helper)
}
.recent-blk .rb-li .x:hover{color:var(--tx-primary)}
.recent-blk .rb-li .x .i{width:12px;height:12px}

/* --- 유사도 슬라이더 : 값(파랑) 좌 · 100% 우, 슬라이더 아래 --- */
.slider-row .slider-top{display:none}
.slider-scale{
  display:flex;justify-content:space-between;align-items:center;margin-top:4px;
  font-size:11px;line-height:16px
}
.slider-scale b{color:var(--primary);font-weight:500}
.slider-scale span{color:var(--tx-helper)}

/* .mode-panel 의 기존 padding:16px 12px 이 곧 시안값(Inner padding 12 · 칩↔입력창 16)이다.
   컴포넌트에 좌우 마진을 또 주면 이중이 되므로 0으로 둔다. */
.mode-panel[data-panel="text"] .textarea-wrap,
.mode-panel[data-panel="car"] .textarea-wrap{margin:0}
.recent-blk{margin:16px 0 0}
.mode-panel .filters{margin-top:16px}

/* 현재값 라벨은 손잡이를 따라간다 (시안 : 80% 가 thumb 아래) */
.slider-scale{position:relative;display:block;height:16px}
.slider-scale b{
  position:absolute;left:calc(var(--p,80) * 1%);transform:translateX(-50%);
  color:var(--primary);font-weight:500;white-space:nowrap
}
.slider-scale span{position:absolute;right:0;color:var(--tx-helper)}

/* 필터칩 우측 `초기화` (사양서 Search main_002_1) */
.chips-reset{
  margin-left:4px;height:24px;padding:0 8px;border:0;background:none;cursor:pointer;
  color:var(--tx-helper);font-size:11.5px;text-decoration:underline;text-underline-offset:2px
}
.chips-reset:hover{color:var(--tx-secondary)}

/* ============================================================
   AI 로고 · 컬러 갱신 (Figma 4345:26680 `AI 에이전트` / ic_에스원AI심볼)
   · pill 테두리가 그라디언트 → **단색 #1690e8** 로 변경됨
   · 아이콘은 에스원 AI 심볼(스파클 3개, 각자 그라디언트) — icons.css `.i-ai`
   · 그라디언트 스톱 자체는 동일 : #1690e8 → #c452ec → #f52f67 → #f89303
   ============================================================ */
:root{--ai-border:#1690e8}

/* 윈도우 크롬 AI pill : 단색 테두리 · pl8 pr12 py4 · gap2 · radius full */
.win-ai::before{display:none}
.win-ai{
  border:1px solid var(--ai-border);border-radius:9999px;
  padding:4px 12px 4px 8px;gap:2px;height:24px;
  color:var(--tx-primary);font-size:12px;font-weight:500;background:transparent
}
.win-ai .i-ai{width:16px;height:16px}
.win-ai:hover{background:rgba(22,144,232,.12)}
.win-ai.on{background:rgba(22,144,232,.18)}

/* --- `AI 검색` 칩 : 비활성일 때 그라디언트 테두리를 걸지 않는다 ---
   (기존엔 무조건 그라디언트라 텍스트 칩과 동시에 선택된 것처럼 보였다) */
.mode-chips button[data-mode="aim"]{
  border:1px solid var(--ln-border);color:var(--tx-tertiary)
}
.mode-chips button[data-mode="aim"]::before{display:none}
.mode-chips button[data-mode="aim"]:hover{color:var(--tx-secondary);border-color:var(--tx-helper)}
.mode-chips button[data-mode="aim"].on{
  border:0;background:rgba(22,144,232,.13);color:var(--tx-primary)
}
.mode-chips button[data-mode="aim"].on::before{
  display:block;content:'';position:absolute;inset:0;border-radius:14px;padding:1px;
  background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}

/* --- 정정 : pill 테두리는 단색이 아니라 2스톱 세로 그라디언트다 ---
   (get_design_context 가 그라디언트 스트로크를 첫 스톱 #1690e8 하나로 평탄화해 준 것)
   실측(4345:26680) — 상단 #158fe7≈#1690E8 / 하단 #ce4acd≈#C452EC
   4스톱(#f52f67·#f89303)은 이제 에스원 심볼 내부 중간 스파클에만 남는다. */
:root{
  --ai-grad: linear-gradient(180deg,#1690e8,#c452ec);
  --ai-grad-symbol: linear-gradient(160deg,#1690e8 38%,#c452ec 55%,#f52f67 69%,#f89303 86%);
  --ai-line:#1690e8;
}
.win-ai{border:0}
.win-ai::before{
  display:block;content:'';position:absolute;inset:0;border-radius:9999px;padding:1px;
  background:var(--ai-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}

/* ============================================================
   탭 GUI 정합 (Figma 4307:27822 `Tab Bar` 실측)
   바 30 / 탭 200×28 / gap 4 → 탭을 바 **하단에 붙여** 콘텐츠와 이어지게 한다.
   활성 탭 = 콘텐츠와 같은 #1c1d23 (경계선 없이 연속)
   비활성 탭 = 바 배경과 같은 #0d0e12  ·  hover #131418
   인접한 비활성 탭 사이에만 1px #2e2f38 구분선
   ============================================================ */
.tabbar{align-items:flex-end}
.tabs{align-items:flex-end}

.tabs .tab{
  background:var(--bg-0);color:var(--tx-secondary);border-radius:0;
  border:0;box-shadow:none
}
.tabs .tab:hover{background:var(--bg-1)}
.tabs .tab.on{background:var(--bg-2);color:var(--tx-primary)}
/* 비활성 탭이 연달아 오면 그 사이에만 구분선 (배경색이 같아 구분이 안 되므로) */
.tabs .tab:not(.on) + .tab:not(.on){box-shadow:inset 1px 0 0 var(--ln-subtle)}

/* 탭 아래 콘텐츠는 활성 탭과 같은 면이어야 한다 — 사이에 어떤 선/여백도 두지 않는다 */
.content-col > .tabbar{border-bottom:0;margin-bottom:0}
.content-col > .workspace{margin-top:0}
.tabbar #btnHistory .hist-ic{width:20px;height:20px;flex:0 0 20px}

/* ============================================================
   시안 검토용 스위치 (AI 유무 / 레이아웃 A·B)
   윈도우 탭 옆으로 옮기고, 시안 판단에 방해되지 않도록 눈에 띄지 않게 둔다.
   평소엔 흐릿하고 hover 하면 또렷해진다. 목업 검토자 전용 컨트롤.
   ============================================================ */
.win-tabs .layout-sw{
  align-self:center;margin:0 0 0 10px;
  border:1px solid rgba(255,255,255,.09);border-radius:4px;
  opacity:.28;transition:opacity .15s
}
.win-tabs .layout-sw:hover{opacity:1}
.win-tabs .layout-sw button{
  height:18px;padding:0 6px;font-size:10px;font-weight:400;
  background:transparent;color:var(--tx-helper);border:0;cursor:pointer
}
.win-tabs .layout-sw button.on{background:rgba(255,255,255,.13);color:var(--tx-secondary)}
.win-tabs .ai-sw button.on{background:rgba(255,255,255,.13)}

/* 사양서 2-5) 다중 영상 view 중에는 검색·분석 도구 비활성 */
#dtTools .btn-icon:disabled,#dtAreaTools .btn-icon:disabled{opacity:.35;pointer-events:none}

/* 사양서 4-4)/3-1) 단일 대상에서 비활성인 버튼 */
.mapview .tools .btn-icon:disabled,#dtEdit:disabled{opacity:.35;pointer-events:none}

/* ============================================================
   영상 재생 설정 팝업 · 음량 컨트롤 (사양서 Detail_000_2 · 2-6 / 2-7)
   디자인은 GUI 토큰(bg-3 면 · radius · Pretendard)을 따른다.
   ============================================================ */
.set-menu{
  position:fixed;z-index:80;min-width:210px;padding:6px;
  background:#1a1b20;border:1px solid var(--ln-subtle);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.55)
}
.set-menu.sub{min-width:180px}
.set-menu .sm-row{
  width:100%;height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;
  background:none;border:0;border-radius:6px;cursor:pointer;
  color:var(--tx-secondary);font-size:12.5px;text-align:left
}
.set-menu button.sm-row:hover{background:rgba(255,255,255,.07);color:var(--tx-primary)}
.set-menu .sm-row .ic{width:16px;height:16px;flex:0 0 16px;color:var(--tx-tertiary)}
.set-menu .sm-row .t{flex:1;min-width:0}
.set-menu .sm-row .v{color:var(--tx-helper);font-size:12px;margin-right:2px}
.set-menu .sm-head{
  width:100%;height:36px;display:flex;align-items:center;gap:6px;padding:0 8px;margin-bottom:2px;
  background:none;border:0;border-bottom:1px solid var(--ln-subtle);border-radius:0;cursor:pointer;
  color:var(--tx-primary);font-size:12.5px
}
.set-menu .sm-head:hover{color:#fff}
.set-menu .sm-head .ic{width:16px;height:16px;flex:0 0 16px}
.set-menu .sm-opt{
  width:100%;height:34px;display:flex;align-items:center;gap:6px;padding:0 10px;
  background:none;border:0;border-radius:6px;cursor:pointer;
  color:var(--tx-secondary);font-size:12.5px;text-align:left
}
.set-menu .sm-opt:hover{background:rgba(255,255,255,.07);color:var(--tx-primary)}
.set-menu .sm-opt.on{background:rgba(255,255,255,.09);color:var(--tx-primary)}
.set-menu .sm-opt .ck{width:16px;height:16px;flex:0 0 16px;display:flex;align-items:center}
.set-menu .sm-opt .ck .ic{width:14px;height:14px;color:var(--tx-primary)}
/* 반복 재생 토글 */
.set-menu .sm-sw{
  width:34px;height:18px;border-radius:9px;border:0;cursor:pointer;position:relative;
  background:rgba(255,255,255,.22);flex:0 0 34px
}
.set-menu .sm-sw i{
  position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:left .15s
}
.set-menu .sm-sw.on{background:var(--primary)}
.set-menu .sm-sw.on i{left:18px}

/* 음량 : 평소 아이콘만, 호버 시 슬라이더가 펼쳐진다 */
.vol-wrap{display:inline-flex;align-items:center;gap:0}
.vol-wrap .vol-slider{
  width:0;opacity:0;margin:0;transition:width .15s,opacity .15s,margin .15s;
  pointer-events:none;accent-color:#fff;height:3px
}
.vol-wrap:hover .vol-slider,.vol-wrap:focus-within .vol-slider{
  width:64px;opacity:1;margin:0 8px 0 4px;pointer-events:auto
}
/* 주변 대상 카드 : 영상 내 바운딩 박스와 동일한 식별 색상 (사양서 4-5) */
.dt-near-card .near-sw{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;flex:0 0 8px}
.dt-near-card .nm{display:flex;align-items:center}
/* 사양서 2-4) 영상 1개일 때 이전/다음 비활성 */
.dt-ctrl .btn-icon:disabled{opacity:.35;pointer-events:none}

/* ============================================================
   알림 팝업 (사양서 Alarm_001) — 벨 아래 드롭다운
   ============================================================ */
body.alarm-dim::before{
  content:'';position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:70
}
.alarm-pop{
  position:fixed;z-index:75;width:330px;max-height:460px;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);overflow:hidden
}
.alarm-pop .ap-head{
  height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px 0 12px;border-bottom:1px solid var(--ln-subtle)
}
.alarm-pop .ap-tt{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--tx-primary)}
.alarm-pop .ap-acts{display:flex;align-items:center;gap:8px}
.alarm-pop .ap-read{background:none;border:0;cursor:pointer;color:var(--tx-helper);font-size:11.5px}
.alarm-pop .ap-read:hover:not(:disabled){color:var(--tx-secondary)}
.alarm-pop .ap-read:disabled{opacity:.4;cursor:default}
.alarm-pop .ap-sep{width:1px;height:11px;background:var(--ln-border)}
.alarm-pop .ap-link{background:none;border:0;cursor:pointer;color:#7fb0ff;font-size:11.5px}
.alarm-pop .ap-link:hover{color:#a9caff}
.alarm-pop .ap-x{background:none;border:0;cursor:pointer;color:var(--tx-tertiary);font-size:12px;padding:2px 2px 2px 4px}
.alarm-pop .ap-x:hover{color:var(--tx-primary)}
.alarm-pop .ap-body{flex:1;min-height:0;overflow-y:auto;padding:4px 0 8px}
.alarm-pop .ap-date{padding:8px 12px 4px;font-size:11px;color:var(--tx-helper)}
.alarm-pop .ap-card{
  width:100%;display:flex;gap:8px;padding:8px 12px;background:none;border:0;cursor:pointer;text-align:left
}
.alarm-pop .ap-card:hover{background:rgba(255,255,255,.05)}
.alarm-pop .ap-card.unread{background:rgba(48,112,216,.14)}
.alarm-pop .ap-card.unread:hover{background:rgba(48,112,216,.2)}
.alarm-pop .ap-card img{width:56px;height:42px;flex:0 0 56px;object-fit:cover;border-radius:4px}
.alarm-pop .ap-card .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.alarm-pop .ap-card .r1{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.alarm-pop .ap-card .r1 b{font-size:12px;font-weight:600;color:var(--tx-primary)}
.alarm-pop .ap-card .r1 em{font-style:normal;font-size:10px;color:var(--tx-helper);font-family:Menlo,monospace}
.alarm-pop .ap-card .who{font-size:11px;color:var(--tx-secondary)}
.alarm-pop .ap-card .cls{font-size:10.5px;color:var(--tx-helper)}
.alarm-pop .ap-card .lc{font-size:10.5px;color:var(--tx-helper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alarm-pop .ap-empty{padding:40px 12px;text-align:center;color:var(--tx-helper);font-size:12px}
#btnAlarmTop.on{background:var(--primary);color:#fff;border-radius:4px}

/* AI 검색 패널 상단 고정 버튼 (사양서 AI Agent_001_01 · 1-1) */
.aim-top{display:flex;flex-direction:column;gap:2px;padding:4px 0 10px;border-bottom:1px solid var(--ln-subtle);margin-bottom:12px}
.aim-tb{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;
  background:none;border:0;border-radius:6px;cursor:pointer;
  color:var(--tx-secondary);font-size:12.5px;text-align:left
}
.aim-tb:hover{background:rgba(255,255,255,.06);color:var(--tx-primary)}
.aim-tb .ic{width:16px;height:16px;flex:0 0 16px;color:var(--tx-tertiary)}

/* ============================================================
   `AI 검색` 칩 컬러 — GUI 4392:41970 실측 반영
   활성 : 그라디언트 테두리 + 글자 #4285e8 + 배경 없음(패널색 그대로)
   비활성 : AI 진입점임을 알 수 있게 글자만 AI 컬러를 유지하고,
            선택 표시(테두리/틴트)는 주지 않아 활성과 헷갈리지 않게 한다
   ============================================================ */
.mode-chips button[data-mode="aim"]{
  color:#4285e8;border:1px solid var(--ln-border);background:transparent
}
.mode-chips button[data-mode="aim"]:hover{border-color:var(--tx-helper)}
.mode-chips button[data-mode="aim"].on{
  border:0;background:transparent;color:#4285e8
}

/* ============================================================
   AI 로딩 애니메이션 — GUI 프로토타입(4392:41970 `Loading`) 재연
   스파클 3개가 각자 크기·투명도로 반짝인다. 6프레임 × 0.3s = 1.8s 루프, LINEAR.
   각 프레임 값은 Figma 변형(Property 1=1~6) 실측을 그대로 옮긴 것.
   ============================================================ */
.ai-load{width:14px;height:14px;flex:0 0 14px;display:inline-block;vertical-align:-2px}
.ai-load path{transform-box:fill-box;transform-origin:center;animation-duration:1.8s;
  animation-timing-function:linear;animation-iteration-count:infinite}

/* 큰 스파클(우하) : 100/0 → 75 → 100 → 63 → 100/0 */
.ai-load .sp-lg{animation-name:aiLoadLg}
@keyframes aiLoadLg{
  0%,100%{transform:scale(1);   opacity:1}
  16.7%  {transform:scale(1);   opacity:0}
  33.3%  {transform:scale(.75); opacity:1}
  50%    {transform:scale(1);   opacity:1}
  66.7%  {transform:scale(.63); opacity:1}
  83.3%  {transform:scale(1);   opacity:0}
}
/* 작은 스파클(좌) : 1 → .5 → 0 → .5 → 144% → 1 */
.ai-load .sp-sm{animation-name:aiLoadSm}
@keyframes aiLoadSm{
  0%,100%{transform:scale(1);    opacity:1}
  16.7%  {transform:scale(1);    opacity:.5}
  33.3%  {transform:scale(1);    opacity:0}
  50%    {transform:scale(1);    opacity:.5}
  66.7%  {transform:scale(1.44); opacity:1}
  83.3%  {transform:scale(1);    opacity:1}
}
/* 중간 스파클(상) : 100 → 82 → 100 → 0 → 0 → 136% */
.ai-load .sp-md{animation-name:aiLoadMd}
@keyframes aiLoadMd{
  0%,100%{transform:scale(1);    opacity:1}
  16.7%  {transform:scale(.82);  opacity:1}
  33.3%  {transform:scale(1);    opacity:1}
  50%    {transform:scale(1);    opacity:0}
  66.7%  {transform:scale(1);    opacity:0}
  83.3%  {transform:scale(1.36); opacity:1}
}
@media (prefers-reduced-motion:reduce){ .ai-load path{animation:none;opacity:1} }

.aim-wait{display:flex;align-items:center;gap:6px}

/* ============================================================
   하단 상태 표시줄 — 사양서 v0.6 (Search main_000_1 · 6) 하단 영역)
   실측(검색 뷰어 시안 1694:20963) : 높이 32 · 배경 #1c1d23 · 좌우 padding 16
   좌 : 날짜·시간(보조색) / 우 : `조치필요` pill 2종 + 목록 아이콘(빨간 점 배지)
   ============================================================ */
.app{padding-bottom:0}
.statusbar{
  height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:var(--bg-2);border-top:1px solid var(--ln-subtle);
  font-size:11.5px;color:var(--tx-tertiary)
}
.sb-time{letter-spacing:-.2px;color:var(--tx-tertiary)}
.sb-actions{display:flex;align-items:center;gap:8px}
.sb-pill{
  height:22px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;
  border:1px solid var(--ln-border);border-radius:11px;background:transparent;cursor:pointer;
  color:#ee5255;font-size:11.5px;font-weight:500;white-space:nowrap
}
.sb-pill .ic{width:13px;height:13px;color:var(--tx-secondary)}
.sb-pill:hover{border-color:var(--tx-helper);background:rgba(238,82,85,.08)}
.sb-icon{
  position:relative;width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ln-border);border-radius:11px;background:transparent;cursor:pointer;color:var(--tx-secondary)
}
.sb-icon .ic{width:13px;height:13px}
.sb-icon:hover{border-color:var(--tx-helper);color:var(--tx-primary)}
.sb-icon.has-dot::after{
  content:'';position:absolute;right:2px;top:1px;width:5px;height:5px;border-radius:50%;background:#ee5255
}

/* ============================================================
   AI 에이전트 우측 고정 패널 — 사양서 v0.6 (AI Agent_001_01)
   기존 본문 영역의 가로 폭이 축소되며 우측에 고정 노출. 메뉴 이동 시에도 위치 고정.
   패널 상단 버튼으로 기존 팝업(.ai-float) 형태로 복원.
   실측(4169:99004) : 폭 345 · 우측 8px 거터
   ============================================================ */
.ai-dock{
  position:static;flex:0 0 345px;width:345px;align-self:stretch;
  display:flex;flex-direction:column;min-height:0;
  background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:var(--r);
  box-shadow:none;z-index:auto
}
.ai-dock[hidden]{display:none}
.ai-dock .aim-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ai-dock .aim-scroll{flex:1;min-height:0;overflow-y:auto}

/* 고정 패널이 열리면 원본 영상 패널을 줄여 자리를 만든다 */
body.aidock-on .main-row > .preview{flex:0 0 300px;width:300px}

/* 패널 헤더 : ✦ AI 에이전트 · ⋮ · 팝업/고정 전환 · ✕ */
.afh{display:flex;align-items:center;gap:6px}
.afh-ic{width:14px;height:14px;flex:0 0 14px}
.afh-btns{margin-left:auto;display:flex;align-items:center;gap:2px}
.afh-btns .x{width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:4px;cursor:pointer;color:var(--tx-tertiary)}
.afh-btns .x:hover{background:rgba(255,255,255,.08);color:var(--tx-primary)}
.afh-btns .x .ic{width:14px;height:14px}

/* ============================================================
   AI 에이전트 배치 3타입 — GUI 4392:41963 실측
   A : 360×470 우측 상단 플로팅 카드 (레이아웃 영향 없음) + 좌하단 리사이즈 그립
   B : 440 × 전체높이 우측 레이어 오버레이 (레이아웃 영향 없음)
   C : 360 × 전체높이 우측 도킹 (본문 폭이 축소된다)
   공통 : 헤더 `✦ AI 에이전트` + ⋮ · 배치전환 · ✕
   ============================================================ */
#aiFloat{background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden}
#aiFloat[hidden]{display:none}
#aiFloat .aim-body{flex:1;min-height:0;display:flex;flex-direction:column}
#aiFloat .aim-scroll{flex:1;min-height:0;overflow-y:auto}

/* --- A타입 : 플로팅 카드 --- */
#aiFloat.ai-a{
  position:fixed;top:42px;right:178px;width:360px;height:470px;left:auto;bottom:auto;
  z-index:60;box-shadow:0 16px 44px rgba(0,0,0,.6)
}
/* 좌하단 리사이즈 그립 (A타입 시안에 추가된 요소) */
#aiFloat.ai-a .af-grip{
  position:absolute;left:5px;bottom:5px;width:12px;height:12px;cursor:nesw-resize;
  background:
    linear-gradient(45deg,transparent 45%,var(--tx-helper) 45%,var(--tx-helper) 55%,transparent 55%) no-repeat,
    linear-gradient(45deg,transparent 45%,var(--tx-helper) 45%,var(--tx-helper) 55%,transparent 55%) no-repeat;
  background-size:12px 12px,7px 7px;background-position:0 0,0 5px;opacity:.55
}
#aiFloat:not(.ai-a) .af-grip{display:none}

/* --- B타입 : 전체 높이 레이어 --- */
#aiFloat.ai-b{
  position:fixed;top:42px;right:8px;width:440px;height:calc(100vh - 42px - 40px);left:auto;bottom:auto;
  z-index:60;box-shadow:0 16px 44px rgba(0,0,0,.6)
}
/* --- C타입 : 도킹 (main-row 의 마지막 칼럼) --- */
#aiFloat.ai-c{
  position:static;flex:0 0 360px;width:360px;height:auto;align-self:stretch;
  z-index:auto;box-shadow:none
}
/* C타입일 때만 원본 영상 패널을 줄여 자리를 만든다 */
body.aidock-on .main-row > .preview{flex:0 0 300px;width:300px}

/* ============================================================
   팝업·모달 표면 색 정합
   GUI(인물 관리 팝업 3872:23757 등) 실측 : 모달 표면 #1c1d23(bg-2) · 내부 요소 #24252c(bg-3)
   기존 값들은 GUI 토큰 전환 이전의 **파란 기운 레거시 색**(#0d131d·#141a24·#1b2431·#0b1220 등)이라
   화면마다 팝업 배경이 달라 보였다. 아래에서 토큰으로 통일한다.
   ============================================================ */
/* 모달 본체 : 표면 bg-2 */
.modal{background:var(--bg-2);border-color:var(--ln-subtle);border-radius:8px}
/* 드롭다운·컨텍스트 메뉴 : bg-3 (select-menu 와 동일 레벨) */
.ctx-menu,.menu{background:var(--bg-3);border-color:var(--ln-border);border-radius:var(--r)}
/* 토스트·툴팁 : bg-3 */
.toast,.seg-tip{background:var(--bg-3);border-color:var(--ln-border)}
/* 영상 위 CCTV 미리보기 팝오버 : bg-2 */
.cctv-pop{background:var(--bg-2);border-color:var(--ln-border)}
/* 영상 재생 설정 팝업도 같은 레벨로 */
.set-menu{background:var(--bg-3);border-color:var(--ln-border)}

/* 모달 내부에서 쓰이던 레거시 파란 계열 면들 → 토큰 */
.pm-card,.hs-item,.oa-card,.cs-item{background:var(--bg-3)}
.bmk-card.on,.cs-card.on,.mp-card.on,.al-card.on{background:rgba(48,112,216,.16)}
.oa-card.on,.cs-item.on{background:rgba(48,112,216,.16)}
.date-fld,.chat-input textarea,.form-row input,.form-row textarea{background:var(--bg-1)}
.form-row input:disabled{background:var(--bg-2)}
.mvw-card,.mvw-wp{background:var(--bg-3)}
.mvw-wp.on{background:rgba(48,112,216,.16)}
.mvw-side,.mvw-strip,.vw-foot{background:var(--bg-1)}
.person-box,.algo-box,.dt-hist,.compare-bar,.cs-dt,.fm-in,.bm-vid,.cs-obj{background:var(--bg-1)}
.dropzone{background:var(--bg-1)}
.dropzone:hover,.dropzone.drag{background:rgba(48,112,216,.12)}
.rc{background:var(--bg-3)}
.cmp-head{background:var(--bg-1)}
.dt-multi,.cmp-grid{background:var(--bg-0)}
.mv-tile.empty,.cmp-tile.empty{background:var(--bg-1)}

/* ============================================================
   메뉴 화면(북마크·사건관리·맵관리) : 상단 탭바 제거
   사양서 Bookmark_001_01 / Map_001 목업에 탭바가 없다.
   탭은 검색 화면 전용(검색 탭 = 기본 탭, 상세 진입 시 새 탭)이라 메뉴 화면엔 해당 없음.
   ============================================================ */
.tabbar.menu-on{display:none}

/* --- 북마크 카드 : 시안(Bookmark_001_01) 실측 반영 ---
   목록 패널 1084 · 2열 → 카드 ≈529 · 썸네일 ≈240×135 (기존 132×78 로 절반이라 카드가 비어 보였다) */
.bmk-thumb{width:240px;height:135px;flex:0 0 240px;border-radius:4px}
.bmk-card{gap:12px;padding:10px}
.bmk-meta{padding-top:4px}
.bmk-place{font-size:13px;margin-bottom:5px}
.bmk-sub{font-size:12px;margin-bottom:6px}
.bmk-time{font-size:11px;line-height:1.6}
/* 영상 길이 태그는 썸네일 우하단 (시안) */
.bmk-dur{left:auto;right:6px;bottom:6px}

/* Figma 추출 아이콘 사이즈 보정 */
.tabbar #btnHistory .hist-ic{width:20px;height:20px;flex:0 0 20px}
.lnb .bx .i{width:20px;height:20px}
.mn-searchbox .sic .i,.mode-panel .ta-search .i{width:16px;height:16px}
#btnAlarmTop .i-bell{width:16px;height:16px}

/* 대상 카드 썸네일 — 시안 실측 : 영상 카드와 같은 높이(135), 폭만 좁다(160)
   (기존 64×78 이 남아 있어 대상 카드만 작고 카드 높이가 들쭉날쭉했다) */
.bmk-card.obj .bmk-thumb{width:160px;flex:0 0 160px;height:135px}

/* ============================================================
   AI 입력창 첨부파일 트레이 — 사양서 v0.5 (AI Agent_001_01 · 1-3)
   이미지 = 썸네일 미리보기 / 일반 파일 = 카드(파일명 말줄임 + 용량 + 확장자) + ✕
   ============================================================ */
.aim-files{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 0}
.aim-files .af-thumb{position:relative;width:44px;height:44px;border-radius:6px;overflow:hidden;
  border:1px solid var(--ln-border);flex:0 0 auto}
.aim-files .af-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.aim-files .af-file{
  position:relative;display:inline-flex;align-items:center;gap:6px;max-width:180px;
  height:44px;padding:0 22px 0 8px;border-radius:6px;
  background:var(--bg-3);border:1px solid var(--ln-border)
}
.aim-files .af-ext{
  font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.2px;
  padding:2px 4px;border-radius:3px;background:var(--primary);color:#fff;flex:0 0 auto
}
.aim-files .af-nm{font-size:11px;color:var(--tx-secondary);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.aim-files .af-sz{font-size:10px;color:var(--tx-helper);flex:0 0 auto}
.aim-files .x{
  position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.6);color:#fff;font-size:8px;line-height:1;display:flex;
  align-items:center;justify-content:center;padding:0
}
.aim-files .x:hover{background:var(--st-mid)}

/* ============================================================
   북마크 목록 — 시안(Bookmark_001_01) 1920 스케일 실측 재보정
   목록 패널 1084 / 상세 762 · 카드 532×161 · 썸네일 253×142
   텍스트가 시안 대비 작아 카드가 비어 보였다 (위치명 13 → 18)
   ============================================================ */
#menuView .mn-panel.mn-list:has(.bmk-grid){flex:0 0 1084px;width:1084px}
#menuView .mn-panel.mn-detail{flex:1;min-width:0}

.bmk-thumb{width:253px;height:142px;flex:0 0 253px}
.bmk-card.obj .bmk-thumb{width:168px;flex:0 0 168px;height:142px}
.bmk-card{gap:14px;padding:10px}
.bmk-place{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:7px}
.bmk-sub{font-size:13px;margin-bottom:8px}
.bmk-time{font-size:13px;line-height:1.5}
.bmk-star .ic{width:16px;height:16px}

/* 카드 높이 고정 — 영상 카드(일시 2줄)와 대상 카드(1줄)의 높이가 달라 그리드가 들쭉날쭉했다.
   시안은 두 타입 모두 161 로 동일하다. */
.bmk-card{height:162px;box-sizing:border-box;align-items:flex-start}
.bmk-meta{overflow:hidden}

/* AI 로딩 애니메이션 : 크기 2배(14→28), 주기 2배(1.8s→3.6s) */
.ai-load{width:28px;height:28px;flex:0 0 28px;vertical-align:-6px}
.ai-load path{animation-duration:3.6s}
.aim-wait{gap:8px}

/* ============================================================
   패널 좌우 리사이즈 핸들
   레이아웃 패널 경계에만 붙는다. LNB·탭바·상태표시줄·모달 내부는 제외.
   ============================================================ */
.rsz{position:absolute;top:0;bottom:0;width:8px;z-index:20;cursor:col-resize;
  background:transparent;transition:background .12s}
.rsz-right{right:-4px}
.rsz-left{left:-4px}
.rsz::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);background:transparent;transition:background .12s}
.rsz:hover::after{background:var(--primary)}
body.rsz-drag{cursor:col-resize;user-select:none}
body.rsz-drag .rsz::after{background:var(--primary)}
/* 핸들을 담으려면 패널이 기준 컨테이너여야 한다 */
#sidePanel,#preview,#aiFloat,.dt-side,.mn-detail{position:relative}
#aiFloat.ai-a,#aiFloat.ai-b{position:fixed}

/* ── 사양 §6-1 : 유사도·날짜 Chip (기본 적용 필터 · X 미제공) ───────────── */
.chip.chip-fixed{padding:0 12px}          /* X 자리가 없으므로 좌우 패딩 동일 */

/* ── 사양 §7-5 : 멀티뷰에서 이미 재생 중인 카메라는 선택 불가 ──────────── */
.ctx-menu div.off{color:var(--tx-disabled,#55575f);cursor:default;pointer-events:auto}
.ctx-menu div.off:hover{background:transparent}

/* ── 사양 §10-6 : 대상 4개 도달 시 미추가 인물의 북마크 영상 선택 불가 ──── */
.ev-card.off{opacity:.45}
.ev-card.off:hover{background:transparent}

/* ── 사양 §4 : 검색 히스토리 팝업 (그룹별 사건 등록 · 행별 북마크) ──────── */
.hs-main .hs-case{flex:0 0 auto;font-size:11px;padding:3px 8px;white-space:nowrap}
.hs-main .bk,.hs-sub .bk{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ic-gray)}
.hs-main .bk.on,.hs-sub .bk.on{color:var(--st-low)}
/* ICON.caret 는 기본이 '아래' 방향이라, 다른 아코디언(.acc)과 같은 규칙
   (닫힘=오른쪽 / 열림=아래)을 맞추려면 닫힘일 때 되돌려 세운다 */
.hs-cv{display:inline-flex;transition:transform .12s;transform:rotate(-90deg)}
.hs-item.open .hs-cv{transform:rotate(0)}

/* ── 사양 §7-3 : 영역/선 검색 컨트롤 바 (방향 지정 · 재실행 · 검색/종료) ── */
.area-bar{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:4px;pointer-events:auto}
.area-bar button{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
  border-radius:12px;background:rgba(10,16,26,.92);border:1px solid rgba(255,255,255,.2);
  font-size:11px;font-weight:500;color:#fff;white-space:nowrap;
}
.area-bar button:hover{border-color:var(--accent)}
.area-bar .ab-go{background:var(--primary);border-color:var(--primary)}
.area-bar .ab-dir{background:rgba(0,153,255,.18);border-color:rgba(0,153,255,.55)}

/* ── 사양 §12-2 : 관심인물 실시간 알림 스케줄 (요일 기본 미선택 · 필수) ──── */
.wf-sch{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.wf-sch-item{background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:6px;padding:9px 10px}
.wf-sch-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.wf-sch-h .nm{font-size:11.5px;font-weight:600;color:var(--tx-secondary)}
.wf-sch-h .btn-icon{margin-left:auto;width:20px;height:20px}
.wf-days{display:flex;gap:4px}
.wf-day{
  flex:1;height:26px;border-radius:4px;font-size:11px;font-weight:500;
  background:var(--bg-3);border:1px solid var(--ln-border);color:var(--tx-tertiary);
}
.wf-day:hover{border-color:var(--ln-strong,#3e4049)}
.wf-day.on{background:rgba(48,112,216,.18);border-color:var(--primary);color:var(--tx-primary)}

/* ── B안 AI 검색 입력 : 실제 입력 가능 (전송해야 화면 전환) ─────────────── */
.b-aibox{cursor:text}
.b-aibox input.ph{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  font-size:12px;color:var(--tx-primary);font-family:inherit
}
.b-aibox input.ph::placeholder{color:var(--tx-helper)}
.b-aibox .go{cursor:pointer}

/* ── 좌측 AI 검색 대화 : AI 답변 말풍선 ────────────────────────────────── */
.aim-ai{display:flex;gap:8px;margin:10px 0 2px}
.aim-ai-h{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.aim-ai-h .i-ai{width:16px;height:16px}
.aim-ai-b{
  flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--ln-subtle);
  border-radius:10px;padding:11px 12px;font-size:12px;line-height:1.55;color:var(--tx-secondary)
}
.aim-ai-b p{margin:0 0 8px}
.aim-ai-b b{color:var(--tx-primary);font-weight:600}
.aim-ai-b ul{margin:0;padding-left:14px;display:flex;flex-direction:column;gap:5px}
.aim-ai-b li{font-size:11.5px;color:var(--tx-tertiary)}
.aim-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.aim-acts button{
  height:26px;padding:0 10px;border-radius:13px;font-size:11px;font-weight:500;
  background:rgba(48,112,216,.16);border:1px solid rgba(48,112,216,.5);color:var(--tx-primary)
}
.aim-acts button:hover{background:rgba(48,112,216,.28)}
.aim-sugg-t{margin:12px 0 6px;font-size:10.5px;font-weight:600;color:var(--tx-helper)}
.aim-sugg.in button{width:100%;text-align:left}

/* ── 위치(카메라) 폴더 트리 — 수천 대 규모를 전제로 접어서 다룬다 ────────── */
.cam-tree{display:flex;flex-direction:column;gap:2px}
.ct-search{position:relative;margin-bottom:6px}
.ct-search input{
  width:100%;height:30px;padding:0 28px 0 10px;border-radius:5px;
  background:var(--bg-1);border:1px solid var(--ln-border);
  font-size:11.5px;color:var(--tx-primary);font-family:inherit;outline:0
}
.ct-search input::placeholder{color:var(--tx-helper)}
.ct-search input:focus{border-color:var(--primary)}
.ct-search .i{position:absolute;right:8px;top:7px;width:15px;height:15px;color:var(--ic-gray);pointer-events:none}
.ct-all{margin-bottom:4px}
.ct-row{
  display:flex;align-items:center;gap:6px;height:28px;padding:0 4px;border-radius:4px;
  font-size:11.5px;color:var(--tx-secondary);cursor:pointer
}
.ct-row:hover{background:rgba(255,255,255,.04)}
.ct-row .ic{width:14px;height:14px;color:var(--ic-gray);flex:0 0 14px}
.ct-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-n{font-size:10px;color:var(--tx-helper);font-family:var(--mono)}
.ct-cv{display:inline-flex;flex:0 0 12px;transition:transform .12s;transform:rotate(-90deg);color:var(--ic-gray)}
.ct-cv .i{width:12px;height:12px}
.ct-row.open .ct-cv{transform:rotate(0)}
.ct-b{font-weight:600;color:var(--tx-primary)}
.ct-kids{padding-left:14px}
.ct-c{cursor:pointer}
.ct-c .ct-nm{color:var(--tx-tertiary)}
.ct-empty{padding:10px 4px;font-size:11px;color:var(--tx-helper)}

/* ── 좌측 AI 검색 패널 : 입력창을 패널 바닥에 붙인다 ──────────────────────
   .aim-body 가 `calc(100vh - 200px)` 로 고정돼 있어 실제 가용 높이보다 짧았고,
   그만큼 입력창이 위로 떠 있었다. 부모를 채우도록 바꾼다.
   (오버레이 #aiFloat · 도킹 .ai-dock 은 각자 규칙이 따로 있어 건드리지 않는다) */
.mode-panel[data-panel="aim"].on{
  display:flex;flex-direction:column;height:100%;box-sizing:border-box
}
.mode-panel[data-panel="aim"] .aim-body{height:auto;flex:1 1 auto;min-height:0}

/* ── 원본 영상 미리보기 재생 (사양 §6-2 : 10초 내외 자동 반복) ────────────
   영상 파일이 없는 목업이라 스틸에 팬/줌과 박스 이동을 걸어 재생처럼 보인다. */
.pv-video{overflow:hidden}
.pv-video img{animation:pvPan 10s linear infinite;transform-origin:52% 42%}
.pv-video .bbox{animation:pvBox 10s linear infinite}
.pv-video.paused img,
.pv-video.paused .bbox{animation-play-state:paused}
@keyframes pvPan{
  0%{transform:scale(1.06) translate(1.2%,0.6%)}
  50%{transform:scale(1.12) translate(-1.4%,-0.8%)}
  100%{transform:scale(1.06) translate(1.2%,0.6%)}
}
@keyframes pvBox{
  0%{left:32%;top:18%}
  35%{left:38%;top:16%}
  70%{left:29%;top:21%}
  100%{left:32%;top:18%}
}
/* 타임코드 · 진행바 · 재생 버튼 */
.pv-hud{
  position:absolute;left:8px;top:8px;display:flex;align-items:baseline;gap:4px;
  padding:2px 7px;border-radius:3px;background:rgba(0,0,0,.6);
  font-family:var(--mono);font-size:10.5px;color:#e8eef6;pointer-events:none
}
.pv-hud .dur{color:#9aa7b4}
/* 재생 중에는 화면을 가리지 않도록 호버할 때만 노출 (일시정지 상태면 계속 보인다) */
.pv-video .play{opacity:0;cursor:pointer;border:0}
.pv-video:hover .play,
.pv-video.paused .play{opacity:1}
.pv-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.pv-bar i{display:block;height:100%;width:0;background:var(--primary);transition:width .1s linear}

/* ── 맵뷰어 전체보기 : 지도 위 오버레이 컨트롤 ─────────────────────────────
   지도는 밝고 오버레이는 어두워서, .seg 의 기본 회색 글자로는 읽히지 않았다.
   어두운 배경에 맞는 대비로 다시 잡는다. */
.mvw-map .seg button{
  border-color:rgba(255,255,255,.22);color:#c8d2dd;background:transparent
}
.mvw-map .seg button:hover{border-color:rgba(255,255,255,.45);color:#fff}
.mvw-map .seg button.on{
  background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600
}

/* 히스토리 : 행 본문은 재검색, 캐럿만 펼침/접힘 */
.hs-cv{cursor:pointer;padding:2px;margin:-2px}
.hs-sub div[data-hssub]{cursor:pointer}

/* ── 북마크 화면 GUI 정합 ────────────────────────────────────────────────
   좌:우 = 994:852 (GUI 시안 비율). 기존 1084 은 목록이 과하게 넓었다. */
#menuView .mn-panel.mn-list:has(.bmk-grid){flex:0 0 994px;width:994px}
/* 선택 카드는 파란 테두리만. 배경까지 물들이면 시안과 달라진다 */
.bmk-card.on{background:var(--bg-3)}
#menuView .bmk-card.on{background:var(--bg-3)}
/* 북마크 상세 : 시간 눈금 대신 단순 진행바 */
.bm-prog{height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:0 0 10px;overflow:hidden}
.bm-prog i{display:block;height:100%;background:var(--primary)}

/* ── 상세 탭바 GUI 정합 (Detail_000_09 실측) ─────────────────────────────
   Tab Bar 1280×33 @ x64 fill #1c1d23 · 탭 200×28
   고정탭 #131418 / 비활성 #1c1d23 / 활성 #24252c · History 는 28×28 아이콘만 */
/* 앞선 규칙(.content-col > .tabbar 1842 / .tabbar #btnHistory 1870)이
   더 구체적이라 같은 선택자로는 덮이지 않는다. 동일 구체성으로 맞춘다. */
.content-col > .tabbar{background:var(--bg-2);height:33px;flex:0 0 33px;align-items:flex-end}
.tabs .tab{background:var(--bg-2)}
.tabs .tab.fixed{background:var(--bg-1)}
.tabs .tab.on{background:var(--bg-3);color:var(--tx-primary)}
.tabbar #btnHistory{width:28px;flex:0 0 28px;height:28px;justify-content:center;padding:0}

/* ── 사건 수정 : 우측 패널이 넓어 폼·행이 과하게 늘어나던 문제 ───────────
   입력창이 1400px 넘게 늘어나고 증거 영상 행은 정보와 버튼 사이가
   1000px 가까이 비었다. 읽기 좋은 폭으로 묶는다. */
.mn-body.cs-edit{max-width:1180px}
/* 대상 카드 : 썸네일과 텍스트가 눌려 있었다 */
.cs-edit .tg-row{gap:10px}
.cs-edit .tg-row > div{min-width:0}
.cs-edit .tg-row .th,.cs-edit .tg-row img{width:56px;height:64px;object-fit:cover;border-radius:4px}
.cs-edit .tg-kv{font-size:11px}
/* 증거 영상 행 : 버튼을 정보 쪽으로 당겨 빈 공간을 줄인다 */
.cs-edit .ev-card{gap:12px}
.cs-edit .ev-card .info{flex:1;min-width:0}

/* ── 검색 패널 하단 고정 실행 영역 ──────────────────────────────────────
   카메라 선택이 필수라, 미선택 상태에서는 안내문구와 함께 비활성으로 둔다. */
.side-foot{
  flex:0 0 auto;border-top:1px solid var(--ln-subtle);background:var(--bg-1);
  padding:10px 12px;display:flex;flex-direction:column;gap:7px
}
.side-foot .sf-hint{margin:0;font-size:11px;color:var(--st-mid);line-height:1.4}
.side-foot .sf-hint[hidden]{display:none}
.side-foot .sf-go{width:100%;height:36px;font-size:13px;font-weight:600;border-radius:6px}
.side-foot .sf-go:disabled{opacity:.45;cursor:default}
/* 본문이 스크롤되고 실행 영역은 바닥에 붙는다 */
.side{display:flex;flex-direction:column}
.side .side-body{flex:1 1 auto;min-height:0;overflow-y:auto}
/* 카메라를 많이 고르면 소요 시간 안내 */
.ct-warn{margin:0 0 6px;font-size:10.5px;line-height:1.45;color:var(--st-mid)}
/* `+` 로 색상 필터를 열었을 때 잠깐 강조 */
.acc.flash{outline:1px solid var(--primary);outline-offset:2px;border-radius:4px;transition:outline-color .3s}

/* ── 차량번호 입력 : 값에 비해 박스가 커서 한 줄 높이로 줄인다 ─────────── */
.mode-panel[data-panel="car"] .textarea-wrap{min-height:0}
.ta-1line{height:44px;min-height:44px;resize:none;line-height:1.5}

/* ── 인물 검색 : 이미지 검출 / 등록 인물 방식 선택 ─────────────────────── */
.seg.pf-way{margin:2px 0 4px}
.seg.pf-way button{flex:1;height:28px;border-radius:5px}
.pf-pane[hidden]{display:none}

/* ── 결과 목록 : 보기 모드 · 썸네일 크기 ────────────────────────────────── */
.results-head .view-seg button{height:26px;padding:0 10px;font-size:11px;border-radius:5px}
.results-head .thumb-size{display:flex;align-items:center;width:96px}
.results-head .thumb-size input{width:100%;accent-color:var(--primary)}
/* 슬라이더 값으로 카드 폭을 잡는다 */
#resultsBody .grid{grid-template-columns:repeat(auto-fill,minmax(var(--thumb-w,200px),1fr))}
/* 원본 비율 보기 : 썸네일을 자르지 않는다 */
#resultsBody.view-raw .card .thumb{height:auto;aspect-ratio:16/10}
#resultsBody.view-raw .card .thumb img{object-fit:contain;background:var(--bg-0)}

/* ── RE-ID(동일 대상 선별) 팝업 — 최대 크기 ────────────────────────────── */
.modal.md-full{
  width:calc(100vw - 96px);max-width:1760px;height:calc(100vh - 96px);
  display:flex;flex-direction:column
}
.modal.md-full .md-body{flex:1;min-height:0;overflow-y:auto}
.md-tools{
  display:flex;align-items:center;gap:12px;padding:8px 16px;
  border-bottom:1px solid var(--ln-subtle);background:var(--bg-1)
}
.md-tools .rt-count{font-size:11.5px;color:var(--tx-tertiary)}
.md-tools .rt-count em{font-style:normal;color:var(--primary);font-weight:600}
.md-tools .rt-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.md-tools .seg button{height:26px;padding:0 10px;font-size:11px;border-radius:5px}
.reid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rw,160px),1fr));gap:10px;padding:14px 16px}
.reid-card{
  position:relative;background:var(--bg-2);border:1px solid var(--ln-subtle);
  border-radius:6px;overflow:hidden;cursor:pointer
}
.reid-card.on{border-color:var(--primary)}
.reid-card input{position:absolute;left:8px;top:8px;z-index:2;accent-color:var(--primary)}
.reid-card .rc-th{position:relative;aspect-ratio:3/4;background:var(--bg-0)}
.reid-card .rc-th img{width:100%;height:100%;object-fit:cover;display:block}
.reid-card .rc-th .sim{position:absolute;right:6px;top:6px;font-size:11px;font-weight:500;
  padding:1px 4px;border-radius:3px;background:var(--overlay)}
.reid-card .rc-meta{padding:7px 8px 9px}
.reid-card .rc-cam{font-size:11.5px;color:var(--tx-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reid-card .rc-t{font-size:10px;color:var(--tx-helper);font-family:var(--mono)}

/* ── 검색 패널 접기 핸들 ────────────────────────────────────────────────
   지도 서비스(네이버·카카오·구글) PC 뷰처럼 패널 바깥 가운데에 붙는 손잡이.
   접히면 이 핸들만 GNB 옆에 남는다. */
.side{position:relative}
.side-handle{
  position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:14px;height:56px;z-index:6;padding:0;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--ln-border);border-left:0;
  border-radius:0 7px 7px 0;display:flex;align-items:center;justify-content:center
}
.side-handle::before{
  content:'';width:6px;height:6px;border-left:1.4px solid var(--tx-tertiary);
  border-bottom:1.4px solid var(--tx-tertiary);transform:rotate(45deg);margin-left:2px
}
.side-handle:hover{background:var(--bg-3)}
.side-handle:hover::before{border-color:var(--tx-primary)}
/* 펼치기(접힌 상태) : 화살표 방향 반대 */
.side-handle.out{position:static;transform:none;border:1px solid var(--ln-border);border-radius:7px}
.side-handle.out::before{transform:rotate(-135deg);margin-left:-2px}
.collapsed-rail{display:flex;align-items:center;justify-content:center;padding:0 4px}
/* 분리 상태에서는 핸들을 감춘다 (패널이 떠 있어 붙일 가장자리가 없다) */
.side.detached .side-handle{display:none}
/* 핸들이 패널 밖으로 나오므로 가장자리를 자르지 않는다 (본문은 .side-body 가 스크롤) */
.side{overflow:visible}

/* ══ 타임라인 (2026-09-01 개편) ═════════════════════════════════════════
   트랙 수(1~4)에 따라 패널 높이가 변하고, 그만큼 위 영상 영역이 줄어든다.
   바는 얇게, 번호는 썸네일에. 썸네일은 상시 표시하고 커서가 지나가거나
   호버하면 주변 위로 크게 뜬다. */
.dt-hist-legacy{display:none}
.tl-host{
  --tl-tracks:1;
  flex:0 0 auto;
  /* .dt-hist 의 padding/border 를 상속받지 않도록 초기화한다 (높이 계산이 어긋난다) */
  padding:0;border:0;border-top:1px solid var(--ln-subtle);border-radius:0;
  box-sizing:border-box;
  height:calc(34px + var(--tl-tracks) * 112px + 32px);
  background:var(--bg-1);border-top:1px solid var(--ln-subtle);
  display:flex;flex-direction:column;min-height:0
}
.tl-top{
  flex:0 0 32px;display:flex;align-items:center;gap:10px;
  padding:0 12px;border-bottom:1px solid var(--ln-subtle)
}
.tl-zoom{display:flex;align-items:center;gap:2px}
.tl-zoom button{
  width:22px;height:22px;border-radius:4px;background:var(--bg-3);
  border:1px solid var(--ln-border);color:var(--tx-secondary);font-size:13px;line-height:1
}
.tl-zoom button:hover:not(:disabled){color:var(--tx-primary);border-color:var(--primary)}
.tl-zoom button:disabled{opacity:.35;cursor:default}
.tl-zv{font-family:var(--mono);font-size:10.5px;color:var(--tx-tertiary);min-width:22px;text-align:center}
.tl-top .side-head-btns,.tl-top .tl-right{margin-left:auto;display:flex;gap:6px}

.tl-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden}
.tl-inner{position:relative;height:100%;min-width:100%}

/* 눈금 · 날짜 */
/* 날짜와 시간이 겹치지 않게 2단으로 나눈다 (위=날짜 / 아래=시각) */
.tl-ruler{position:relative;height:32px;border-bottom:1px solid var(--ln-subtle)}
.tl-ruler .tk{position:absolute;top:25px;width:1px;height:6px;background:var(--ln-border)}
.tl-ruler .tl-lb{
  position:absolute;top:13px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;color:var(--tx-helper);white-space:nowrap
}
/* 날짜가 바뀌는 지점 */
.tl-ruler .tl-day{
  position:absolute;top:0;transform:translateX(2px);
  font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--primary);
  border-left:1px solid var(--primary);padding-left:4px;white-space:nowrap;z-index:2
}
.tl-ruler .tl-day.first{color:var(--tx-tertiary);border-left-color:var(--ln-border)}

.tl-rows{position:relative}
.tl-row{position:relative;height:112px;border-bottom:1px solid var(--ln-subtle)}
.tl-row:last-child{border-bottom:0}
.tl-name{
  position:absolute;left:8px;top:5px;z-index:3;display:flex;align-items:center;gap:5px;
  font-size:10.5px;color:var(--tx-tertiary);pointer-events:none
}
.tl-name i{width:7px;height:7px;border-radius:2px;display:inline-block}
.tl-lane{position:absolute;inset:20px 0 0 0}

/* 얇은 클립 바 */
.tl-bar{
  position:absolute;top:0;height:5px;border-radius:3px;
  background:var(--bc,var(--primary));opacity:.75;cursor:pointer
}
.tl-bar:hover,.tl-bar.on{opacity:1;box-shadow:0 0 0 1px var(--bg-0),0 0 0 2px var(--bc,var(--primary))}

/* 상시 표시 썸네일 — 폭은 바를 따른다 */
.tl-th{
  position:absolute;top:10px;height:56px;min-width:26px;
  border:1px solid var(--ln-border);border-radius:4px;overflow:hidden;
  background:var(--bg-0);cursor:pointer;transition:transform .12s,box-shadow .12s;
  transform-origin:top center
}
.tl-th img{width:100%;height:100%;object-fit:cover;display:block}
.tl-th .tl-n{
  position:absolute;left:3px;top:3px;min-width:14px;height:14px;padding:0 3px;
  border-radius:3px;background:rgba(0,0,0,.72);color:#fff;
  font-family:var(--mono);font-size:9.5px;line-height:14px;text-align:center
}
.tl-th .tl-more{
  position:absolute;right:3px;top:3px;height:14px;padding:0 4px;border-radius:3px;
  background:var(--primary);color:#fff;font-size:9.5px;line-height:14px;font-weight:600
}
.tl-th .tl-cam{
  position:absolute;left:0;right:0;bottom:0;padding:2px 4px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
  color:#e8eef6;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* 커서가 지나가거나 호버 → 주변 위로 크게 (트랙 높이 안에서만 커지도록 1.4배) */
.tl-th:hover,.tl-th.pass,.tl-th.on{
  transform:scale(1.4);z-index:9;
  box-shadow:0 6px 18px rgba(0,0,0,.6);border-color:var(--primary)
}
.tl-cursor{position:absolute;top:0;bottom:0;width:1.5px;background:#fff;opacity:.85;z-index:8;pointer-events:none}
.tl-cursor::before{
  content:'';position:absolute;left:50%;top:16px;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#fff
}

/* ── PIP : 같은 장소의 다른 카메라를 영상 우하단에 작게 재생 ───────────── */
.dt-pip{position:absolute;right:10px;bottom:52px;z-index:6;display:flex;gap:6px}
.dt-pip .pip-i{
  position:relative;width:112px;height:64px;padding:0;border-radius:5px;overflow:hidden;
  border:1px solid rgba(255,255,255,.35);background:#000;cursor:pointer
}
.dt-pip .pip-i:hover{border-color:var(--primary);box-shadow:0 0 0 2px rgba(48,112,216,.4)}
.dt-pip .pip-i img{width:100%;height:100%;object-fit:cover;display:block}
.dt-pip .pip-i span{
  position:absolute;left:0;right:0;bottom:0;padding:2px 4px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  color:#e8eef6;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* 설정 팝업의 음량 행 */
.set-menu .sm-vol input{flex:1;min-width:80px;margin:0 8px;accent-color:var(--primary)}
.set-menu .sm-vol .v{font-family:var(--mono);font-size:10.5px;color:var(--tx-tertiary);min-width:22px;text-align:right}

/* 타임라인 편집 모드 */
.tl-editing-lb{font-size:10.5px;color:var(--st-mid);margin-left:8px}
.tl-th .tl-del{
  position:absolute;right:3px;bottom:3px;width:18px;height:18px;padding:0;z-index:3;
  border-radius:4px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:flex;align-items:center;justify-content:center
}
.tl-th .tl-del:hover{background:var(--danger,#d64545);border-color:transparent}
.tl-th .tl-del .ic{width:11px;height:11px}
.tl-host.tl-editing .tl-th{border-color:var(--st-mid)}

/* ══ B타입 개선안 (4586:45748) 반영 ═════════════════════════════════════ */
/* 패널 헤더 : 타이틀 없이 분리 버튼만 */
.side-head.slim{justify-content:flex-end;min-height:30px;padding:6px 10px 0}
/* 하단 : 초기화 + 검색 */
.side-foot .sf-row{display:flex;gap:8px}
.side-foot .sf-reset{flex:0 0 88px;height:36px;border-radius:6px;font-size:13px}
.side-foot .sf-go{flex:1}
/* 유사도 : 값 말풍선 + 0% / N% 이상 / 100% */
.slider-row{position:relative;padding-top:22px}
.sim-bubble{
  position:absolute;top:0;transform:translateX(-50%);
  background:var(--primary);color:#fff;border-radius:4px;padding:1px 6px;
  font-size:10.5px;font-weight:600;white-space:nowrap;pointer-events:none
}
.sim-bubble::after{
  content:'';position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  border:3px solid transparent;border-top-color:var(--primary);border-bottom:0
}
.sim-scale{display:flex;justify-content:space-between;margin-top:5px;
  font-size:10px;color:var(--tx-helper)}
.sim-scale .mid{color:var(--primary);font-weight:600}
/* 색상 스와치 : 원형 */
.color-row .sw{width:19px;height:19px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.color-row .sw.on{box-shadow:0 0 0 2px var(--bg-1),0 0 0 3.5px var(--primary);border-color:transparent}

/* ══ A안 구조 : GNB 와 검색 패널을 완전히 분리 ═══════════════════════════
   기존에는 둘을 하나의 카드로 붙여 뒀다(.shell{gap:0} + 반쪽 라운드).
   개선안대로 각각 독립 카드로 띄우고 사이에 거터를 준다. */
.shell{gap:8px}
.shell > .lnb{
  border-radius:var(--r);
  background:var(--bg-1);border:1px solid var(--ln-subtle)
}
.shell > .side{
  border-radius:var(--r);
  border:1px solid var(--ln-subtle);border-right:1px solid var(--ln-subtle);
  background:var(--bg-2)
}
.shell > .shell-main{margin-left:0}
/* 분리된 뒤에는 핸들이 패널 테두리 바깥으로 조금 더 나가야 자연스럽다 */
.side-handle{right:-15px}

/* ── 검색 입력창 : 개선안 형태(한 줄 높이 + 우측 원형 검색) ─────────────── */
.mode-panel[data-panel="text"] .textarea-wrap,
.mode-panel[data-panel="car"]  .textarea-wrap{
  border:1px solid var(--ln-border);border-radius:8px;background:var(--bg-1);
  display:flex;align-items:center;padding:0 40px 0 12px;min-height:40px;overflow:visible
}
.mode-panel[data-panel="text"] .textarea-wrap:focus-within,
.mode-panel[data-panel="car"]  .textarea-wrap:focus-within{border-color:var(--primary)}
.mode-panel[data-panel="text"] textarea,
.mode-panel[data-panel="car"]  textarea{
  border:0;background:transparent;height:38px;min-height:38px;padding:10px 0;
  line-height:18px;resize:none;overflow:hidden;width:100%
}
/* 검색 버튼을 세로 가운데 원형으로 */
.mode-panel[data-panel="text"] .ta-search,
.mode-panel[data-panel="car"]  .ta-search{
  top:50%;bottom:auto;transform:translateY(-50%);right:7px;width:26px;height:26px
}
/* 지우기 ✕ 는 검색 버튼 왼쪽 */
.mode-panel[data-panel="text"] .clear-x,
.mode-panel[data-panel="car"]  .clear-x{top:50%;bottom:auto;transform:translateY(-50%);right:38px}

/* 우측 원본 영상 패널 : 타이틀을 없앤 만큼 목록을 위로 올린다 */
.preview .preview-list{padding-top:10px}

/* ══ 상세 화면 재구성 (2026-09-01 2차) ═══════════════════════════════════
   우측 '대상 상세' 패널을 없애고 상단을 1~3단 패널로, 타임라인을 하단 전체 폭으로. */
.detail{flex-direction:column}
.detail > .dt-side{display:none}
.dt-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

/* 상단 패널 영역 */
.dt-panes{flex:1;display:flex;min-height:0;min-width:0;gap:0}
.dt-panes > .dt-video,
.dt-panes > .dt-pane{flex:1;min-width:220px;position:relative}
.dt-pane{background:#000;overflow:hidden}
.pane-rsz{
  flex:0 0 6px;cursor:col-resize;background:var(--bg-0);
  border-left:1px solid var(--ln-subtle);border-right:1px solid var(--ln-subtle)
}
.pane-rsz:hover{background:var(--primary)}
.pn-vid,.pn-map{position:absolute;inset:0}
.pn-vid img,.pn-map img{width:100%;height:100%;object-fit:cover;display:block}
.pn-map{background:#e9eaec}
.pn-map img{object-fit:contain}
.pn-tag{
  position:absolute;left:8px;top:8px;padding:2px 7px;border-radius:3px;
  background:rgba(0,0,0,.6);color:#e8eef6;font-size:10.5px
}
/* 칸 종류 전환 (영상 / 맵뷰) */
.pn-switch{position:absolute;right:8px;top:8px;z-index:5;display:flex;gap:2px}
.pn-switch button{
  height:22px;padding:0 8px;border-radius:4px;font-size:10.5px;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.22);color:#cdd6e0
}
.pn-switch button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.dt-video.as-map > img,
.dt-video.as-map .ov,
.dt-video.as-map .dt-box,
.dt-video.as-map .dt-vhead{display:none}

/* 대상 정보 : 한 줄 축약 */
.dt-objbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:7px 12px;background:var(--bg-1);border-top:1px solid var(--ln-subtle);
  font-size:11.5px;color:var(--tx-secondary)
}
.dt-objbar .ob-th{width:30px;height:34px;object-fit:cover;border-radius:3px}
.dt-objbar .ob-nm{font-size:12.5px;color:var(--tx-primary)}
.dt-objbar .ob-kv b{color:var(--tx-primary);font-weight:500;font-family:var(--mono);font-size:11px}
.dt-objbar .ob-sw{display:flex;gap:3px}
.dt-objbar .ob-sw i{width:12px;height:12px;border-radius:3px;border:1px solid var(--ln-border)}
.dt-objbar .ob-right{margin-left:auto;display:flex;align-items:center;gap:4px}
.dt-objbar .ob-right button{height:24px;padding:0 9px;border-radius:4px;font-size:11px;
  background:var(--bg-3);border:1px solid var(--ln-border);color:var(--tx-secondary)}
.dt-objbar .ob-right button.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── 타임라인 편집 : iMovie 식 범위 조정 핸들 ──────────────────────────── */
.tl-grip{
  position:absolute;top:0;bottom:0;width:9px;z-index:4;cursor:ew-resize;
  background:var(--st-mid);opacity:.9;display:flex;align-items:center;justify-content:center
}
.tl-grip::before{content:'';width:2px;height:14px;border-radius:1px;background:rgba(0,0,0,.55)}
.tl-grip.s{left:0;border-radius:4px 0 0 4px}
.tl-grip.e{right:0;border-radius:0 4px 4px 0}
.tl-grip:hover{opacity:1}
.tl-host.tl-editing .tl-th{border-color:var(--st-mid);box-shadow:0 0 0 1px var(--st-mid) inset}

/* ══ 상세 화면 시안 A / B ════════════════════════════════════════════════
   기본(A) : 타임라인 하단 전체 폭 + 상단 1~3단 패널 + 대상정보 한 줄
   B안     : 기존 우측 패널 구조. 대상정보 최소화(4열) + 맵뷰 최대 */
.detail > .dt-side{display:none}
body.dt-b .detail{flex-direction:row}
body.dt-b .detail > .dt-side{display:flex}
/* B안도 상단 패널을 flex 로 유지한다.
   display:block 으로 두면 높이 제약이 풀려 영상이 원본 크기로 터진다.
   (몇 단을 쓸지는 PANE.n 이 정한다 — B안 기본 2단) */
body.dt-b .dt-panes{display:flex}
/* 대상 정보 바는 A·B 공통으로 타임라인 위에 둔다 (이름 + 출현 시각만) */

/* B안 : 대상 정보 — 썸네일 · 인물명 · 출현 일시만, 한 행 4개 */
body.dt-b .ob-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px
}
body.dt-b .ob-cell{
  background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:5px;
  overflow:hidden;padding-bottom:5px
}
body.dt-b .ob-cell.on{border-color:var(--primary)}
body.dt-b .ob-cell img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
body.dt-b .ob-nm2{
  padding:5px 6px 0;font-size:11px;color:var(--tx-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
body.dt-b .ob-tm{padding:0 6px;font-size:9.5px;color:var(--tx-helper);font-family:var(--mono)}

/* B안 : 맵뷰어가 남는 공간을 최대로 */
body.dt-b .dt-side{display:flex;flex-direction:column;min-height:0}
body.dt-b .dt-side > .dt-sec:nth-of-type(1){flex:0 0 auto}
body.dt-b .dt-side > .dt-sec:nth-of-type(2){flex:1;display:flex;flex-direction:column;min-height:0}
body.dt-b .dt-side > .dt-sec:nth-of-type(2) .dt-map{flex:1;min-height:0;height:auto}

/* ── B안 : 대상정보 카드를 낮게, 맵뷰를 최대로 ──────────────────────────
   비교 가능 대상이 4개뿐이라 한 행으로 끝난다. 카드 상하를 줄여
   남는 세로 공간을 전부 맵뷰어에 넘긴다. */
body.dt-b .ob-cell img{aspect-ratio:auto;height:52px}
body.dt-b .ob-nm2{padding:4px 5px 0;font-size:10.5px;line-height:1.2}
body.dt-b .ob-tm{padding:0 5px;font-size:9px;line-height:1.3}
body.dt-b .ob-cell{padding-bottom:4px}
body.dt-b .ob-grid{gap:5px}
/* 대상 정보 섹션은 내용 높이만, 나머지는 맵뷰어가 가져간다 */
body.dt-b .dt-side > .dt-sec:nth-of-type(1){flex:0 0 auto;padding-bottom:8px}
body.dt-b .dt-side > .dt-sec:nth-of-type(2){flex:1 1 auto;min-height:0}

/* ── B안 : 섹션 타이틀 제거, 라인으로만 영역 구분 ────────────────────────
   '대상 상세' · '대상 정보' · '맵뷰어' 라벨과 아이콘을 걷어내고
   구분선만 남긴다. 우측 버튼(사건 등록 · 지도/층별)은 그대로 쓴다. */
body.dt-b .dt-side-head .dt-side-title{display:none}
body.dt-b .dt-side-head{
  justify-content:flex-end;border-bottom:1px solid var(--ln-subtle);
  padding-bottom:8px;margin-bottom:2px
}
/* 섹션 헤더에서 아이콘과 글자만 숨기고, 우측 컨트롤은 남긴다 */
body.dt-b .dt-sec-head{
  font-size:0;border-bottom:0;min-height:0;padding:6px 0 0;
  display:flex;align-items:center;justify-content:flex-end
}
body.dt-b .dt-sec-head > .ic{display:none}
body.dt-b .dt-sec-head > .seg,
body.dt-b .dt-sec-head > .btn-add,
body.dt-b .dt-sec-head > .dt-search{font-size:11.5px;margin-left:auto}
/* 섹션 사이는 라인으로 구분 */
body.dt-b .dt-side > .dt-sec + .dt-sec{border-top:1px solid var(--ln-subtle);padding-top:8px}

/* PIP : 영상 패널 폭에 따라 크기가 반응한다 (최대 4개) */
.dt-pip .pip-i{width:var(--pip-w,112px);height:calc(var(--pip-w,112px) * 0.57)}
.dt-pip .pip-i span{font-size:calc(var(--pip-w,112px) * 0.08)}

/* 타임커서 : 눈금을 끌어 옮길 수 있게 */
.tl-ruler{cursor:ew-resize}
.tl-cursor{pointer-events:auto;cursor:ew-resize}
.tl-cursor::before{cursor:ew-resize}

/* ── 타임라인 : 인물별 탭 + 같이보기/하나씩 보기 ────────────────────────── */
.tl-tabs{display:flex;gap:3px;margin-left:10px}
.tl-tabs button{
  height:22px;padding:0 9px;border-radius:11px;font-size:10.5px;
  background:var(--bg-3);border:1px solid var(--ln-border);color:var(--tx-tertiary)
}
.tl-tabs button.on{background:var(--primary);border-color:var(--primary);color:#fff}
/* 트랙 이름 : 이름 + 출현 시각만 */
.tl-name em{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--tx-helper);margin-left:5px}

/* 경로 비교 : 타임라인이 화면 밖으로 밀리지 않도록 세로 배분을 잡는다 */
.cmp-main{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
.cmp-main > .cmp-stage{flex:1;min-height:0}

/* ── RE-ID : 기준 대상 정보 (어떤 인물을 기준으로 선별하는지) ───────────── */
.reid-seed{
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--bg-2);border-bottom:1px solid var(--ln-subtle)
}
.reid-seed .rs-th{width:44px;height:52px;object-fit:cover;border-radius:4px;border:1px solid var(--primary)}
.reid-seed .rs-bd{min-width:0}
.reid-seed .rs-top{display:flex;align-items:center;gap:7px}
.reid-seed .rs-top b{font-size:13px;color:var(--tx-primary)}
.reid-seed .rs-kv{margin-top:3px;font-size:11px;color:var(--tx-tertiary);font-family:var(--mono)}

/* 클립 선택 팝업 : RE-ID 팝업과 같은 폼 (기준 대상 · 툴바 · 스크롤 본문) */
/* (구) 클립 팝업 전용 크기 규칙 제거 — ID 선택자라 .md-pick 을 덮어
   두 팝업 크기가 달라졌다. 이제 .md-pick 하나로 통일한다. */

/* ── 패널 도구 (영상 / 맵뷰) ────────────────────────────────────────────── */
.pn-tools{position:absolute;right:8px;bottom:8px;z-index:6;display:flex;gap:2px;
  background:rgba(0,0,0,.62);border-radius:5px;padding:3px}
.pn-tools button{width:26px;height:26px;border-radius:4px;border:0;background:transparent;
  color:#cdd6e0;display:flex;align-items:center;justify-content:center}
.pn-tools button:hover{background:rgba(255,255,255,.12);color:#fff}
.pn-tools button.on{background:var(--primary);color:#fff}
/* 맵 패널 : 이동 경로 · CCTV · 범례 */
.pn-path,.pn-wps,.pn-cones{position:absolute;inset:0;pointer-events:none}
.pn-path svg{width:100%;height:100%}
.pn-wps .map-wp{
  position:absolute;transform:translate(-50%,-50%);width:17px;height:17px;border-radius:50%;
  color:#fff;font-size:9.5px;line-height:17px;text-align:center;border:1.5px solid #fff
}
.pn-legend{
  position:absolute;left:8px;bottom:8px;display:flex;gap:9px;flex-wrap:wrap;
  background:rgba(0,0,0,.55);border-radius:4px;padding:3px 7px
}
.pn-legend span{display:flex;align-items:center;gap:4px;font-size:9.5px;color:#e8eef6}
.pn-legend i{width:7px;height:7px;border-radius:2px}
/* 타임라인 인물 비교 */
.tl-cmp{display:flex;align-items:center;gap:5px;margin-left:10px}
.tl-cmpx{display:flex;align-items:center;gap:3px;cursor:pointer}
.tl-cmpx input{accent-color:var(--primary)}
.tl-cmpx i{width:8px;height:8px;border-radius:2px;display:inline-block}
.tl-cmp .btn-primary{height:22px;padding:0 10px;font-size:10.5px;border-radius:11px}

/* ── 타임라인 썸네일 : 늘어나면 같은 이미지가 옆으로 반복된다 ────────────
   기존에는 <img> 한 장이 늘어나며 확대돼 형태가 뭉개졌다.
   필름 스트립처럼 고정 폭 타일을 반복해 채운다. */
.tl-th .tl-film{
  position:absolute;inset:0;display:block;
  background-repeat:repeat-x;
  background-size:auto 100%;   /* 높이에 맞추고 가로는 반복 */
  background-position:left center
}

/* ── 결과 썸네일 크기 조절 ──────────────────────────────────────────────
   슬라이더가 열 폭만 바꾸고 .card{width:176px} · .thumb{height:176px} 가
   고정이라, 카드 크기는 그대로고 간격만 벌어지는 것처럼 보였다.
   카드 폭을 열에 맞추고 썸네일 높이는 비율로 따라가게 한다. */
#resultsBody .grid{
  grid-template-columns:repeat(auto-fill,minmax(var(--thumb-w,200px),1fr));
  gap:14px 10px            /* 최소 크기에서도 간격이 사라지지 않도록 고정 */
}
#resultsBody .card{width:auto}
#resultsBody .card .thumb{height:auto;aspect-ratio:1/1}
#resultsBody.view-raw .card .thumb{aspect-ratio:16/10}

/* ── 검색 패널 분리(디테치) ─────────────────────────────────────────────
   .side.detached{position:fixed} 가 뒤쪽 .side 규칙들에 밀려 적용되지 않아
   패널이 자리를 그대로 차지했고, 결과 패널도 넓어지지 않았다.
   .shell 자식으로 한정해 구체성을 올린다. */
/* 2465줄 `#sidePanel{position:relative}` 이 ID 선택자라 클래스보다 세다.
   같은 ID 로 받아 확실히 덮는다. */
#sidePanel.detached,
.shell > .side.detached{
  position:fixed;z-index:60;left:120px;top:140px;width:370px;height:640px;
  border:1px solid var(--ln-border);border-radius:var(--r);
  box-shadow:0 18px 48px rgba(0,0,0,.65)
}
/* 분리되면 흐름에서 빠지므로 남은 폭을 콘텐츠가 가져간다 */
.shell > .side.detached + .shell-main{flex:1}

/* ── 접힘 : 확장 핸들만 GNB 패널에 붙은 형태 ────────────────────────────
   별도 카드가 아니라 GNB 오른쪽 가장자리에 손잡이만 남는다. */
/* 접힘 레일은 자리를 차지하지 않는다 —
   결과 패널이 탭바와 같은 왼쪽 끝까지 당겨지고, 핸들은 그 위에 겹친다 */
.collapsed-rail{
  position:absolute;left:0;top:0;bottom:0;width:0;
  padding:0;background:transparent;border:0;
  z-index:30;overflow:visible;pointer-events:none
}
.collapsed-rail .side-handle.out{
  pointer-events:auto;
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:16px;height:48px;padding:0;
  background:var(--bg-2);border:1px solid var(--ln-border);border-left:0;
  border-radius:0 8px 8px 0;box-shadow:2px 0 6px rgba(0,0,0,.4)
}
/* 접힘 상태 : GNB 와 콘텐츠를 붙여 결과 패널이 왼쪽 끝까지 오게 한다 */
.shell:has(#collapsedRail:not([hidden])){gap:0}
.shell:has(#collapsedRail:not([hidden])) > .shell-main{margin-left:0}
/* (구) 접힘 핸들 크기·폭 규칙 제거 — 위의 절대배치 규칙을 되돌리고 있었다 */

/* 패널 도구 구분선 · 다중 영상(2x2) */
.pn-tools .pn-sep{width:1px;height:16px;background:rgba(255,255,255,.22);margin:0 3px;align-self:center}
.pn-quad .pq{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#000}
.pn-quad .pq span{position:relative;overflow:hidden}
.pn-quad .pq img{width:100%;height:100%;object-fit:cover;display:block}
.pn-quad .pq b{position:absolute;left:4px;top:4px;padding:1px 5px;border-radius:3px;
  background:rgba(0,0,0,.62);color:#e8eef6;font-size:9px;font-weight:400}


/* ── 검색 패널은 '검색홈' 탭에서만 ──────────────────────────────────────
   .side{display:flex} 가 [hidden] 의 display:none 을 덮어, 상세·비교 탭이나
   메뉴 화면에서도 패널이 남아 있었다. 분리 상태도 마찬가지였다. */
.side[hidden],
#sidePanel[hidden],
#sidePanel.detached[hidden],
.shell > .side[hidden]{display:none !important}

/* ── 타임라인 : 트랙 수에 따라 행·썸네일이 줄어든다 ──────────────────────
   4명 비교 시 높이가 과했다. 행 높이와 썸네일을 함께 낮춘다. */
.tl-host{height:calc(34px + var(--tl-tracks) * var(--tl-row,112px) + 32px)}
.tl-row{height:var(--tl-row,112px)}
.tl-th{height:var(--tl-th,70px);top:var(--tl-thtop,8px)}
.tl-lane{top:var(--tl-lane,20px)}
.tl-name{font-size:9.5px}
/* 3트랙 이상이면 캡션을 접고 번호만 남긴다 (썸네일 면적 확보) */
.tl-host.tl-compact .tl-cam{display:none}
.tl-host.tl-compact .tl-n{min-width:13px;height:13px;line-height:13px;font-size:9px}
.tl-host.tl-compact .tl-more{height:13px;line-height:13px;font-size:9px;padding:0 3px}
/* 확대 배율은 행 높이 계산과 같은 값을 쓴다 */
.tl-th:hover,.tl-th.pass,.tl-th.on{transform:scale(var(--tl-scale,1.4))}
/* 인물 탭 : 켜고 끄는 형태 */
.tl-tabs button i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:4px}
.tl-tabs button{display:flex;align-items:center}
.tl-tabs button:not(.on){opacity:.55}
.tl-tabs .tl-go{margin-left:6px;height:22px;padding:0 10px;border-radius:11px;font-size:10.5px}


/* 상단 패널 안전장치 : 이미지가 컨테이너를 넘지 않게 */
.dt-panes{overflow:hidden}
.dt-panes > .dt-video,
.dt-panes > .dt-pane{min-height:0;overflow:hidden}
.dt-panes > .dt-video > img,
.dt-panes .pn-vid > img,
.dt-panes .pn-map > img{max-width:100%;max-height:100%}

/* ── 설정 : LNB 하단 버튼 + 모달(좌 항목 / 우 세부) ─────────────────────── */
/* 설정은 사건관리 바로 아래에 둔다 (하단 고정 아님) */
.lnb{display:flex;flex-direction:column}
/* 콘텐츠 분량에 맞춘 크기 */
.modal.md-setting{width:640px;max-width:calc(100vw - 80px)}
.md-setting .st-wrap{display:flex;min-height:0;max-height:min(560px,70vh)}
.md-setting .st-nav{
  flex:0 0 148px;border-right:1px solid var(--ln-subtle);
  padding:10px 8px;display:flex;flex-direction:column;gap:2px
}
.md-setting .st-nav button{
  height:32px;padding:0 10px;border-radius:5px;text-align:left;font-size:12px;
  background:transparent;border:0;color:var(--tx-tertiary)
}
.md-setting .st-nav button:hover{background:var(--bg-3);color:var(--tx-primary)}
.md-setting .st-nav button.on{background:var(--primary);color:#fff;font-weight:500}
.md-setting .st-body{flex:1;min-width:0;padding:14px 16px;overflow-y:auto}
.st-row{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--ln-subtle)}
.st-row:last-child{border-bottom:0}
.st-row .st-k{flex:0 0 120px;font-size:12px;color:var(--tx-secondary);padding-top:5px}
.st-row .st-v{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.st-row .st-v .fm-in{width:110px}
.st-row .st-v input[type=range]{flex:1;min-width:120px;accent-color:var(--primary)}
.st-row .st-num{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--tx-tertiary)}
.st-row .hintline{flex:1 0 100%;margin:2px 0 0}
.st-row .seg button{height:26px;padding:0 10px;font-size:11px;border-radius:5px}

/* ══ 선택 팝업 공통 (동일 대상 선별 · 영상 클립 선택) ════════════════════
   좌: 안내 + 기준 대상(이름 편집) + 선택 수 / 우: 필터 + 구분자별 목록 */
.modal.md-pick{
  width:min(1320px,calc(100vw - 96px));height:min(900px,calc(100vh - 48px));
  display:flex;flex-direction:column
}
.md-pick .pk-wrap{flex:1;min-height:0;display:flex}
.md-pick .pk-side{
  flex:0 0 268px;border-right:1px solid var(--ln-subtle);
  padding:16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto
}
.pk-guide b{display:block;font-size:15px;color:var(--tx-primary);margin-bottom:6px}
.pk-guide p{margin:0;font-size:12px;line-height:1.6;color:var(--tx-tertiary)}
.pk-guide p b{display:inline;font-size:inherit;color:var(--primary)}
.pk-seed{background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:6px;padding:12px}
.pk-seed > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
.pk-name{display:block;margin:10px 0 8px}
.pk-name span{display:block;font-size:10.5px;color:var(--tx-helper);margin-bottom:4px}
.pk-name input{
  width:100%;height:32px;padding:0 10px;border-radius:5px;
  background:var(--bg-1);border:1px solid var(--primary);color:var(--tx-primary);
  font-size:13px;font-weight:600;outline:0
}
.pk-meta{margin:0;font-size:11px}
.pk-meta > div{display:flex;gap:8px;padding:3px 0}
.pk-meta dt{flex:0 0 42px;color:var(--tx-helper)}
.pk-meta dd{margin:0;color:var(--tx-secondary);font-family:var(--mono);font-size:10.5px}
.pk-count{margin-top:auto;font-size:12px;color:var(--tx-tertiary)}
.pk-count em{font-style:normal;color:var(--primary);font-weight:700;font-size:15px}

.md-pick .pk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.md-pick .pk-tools{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--ln-subtle);background:var(--bg-1)
}
.pk-tools .pk-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.md-pick .pk-body{flex:1;min-height:0;overflow-y:auto;padding:4px 0 14px}
/* 그룹 구분자 */
.pk-group + .pk-group{border-top:1px solid var(--ln-subtle)}
.pk-div{
  /* sticky 를 걷어냈다 — 맨 위 구분자가 계속 붙어 있어 목록을 가렸다 */
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;
  padding:9px 16px 7px;background:var(--bg-1)
}
.pk-div span{font-size:12px;font-weight:600;color:var(--tx-primary)}
.pk-div em{font-style:normal;font-size:10.5px;color:var(--tx-helper)}
/* 카드 : 필터에 따라 앞세우는 정보가 달라진다 */
.reid-card .rc-lead{font-size:12px;font-weight:600;color:var(--tx-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reid-card .rc-lead.hi{color:var(--st-high)}
.reid-card .rc-lead.mid{color:var(--st-mid)}
.reid-card .rc-lead.low{color:var(--st-low)}
.reid-card .rc-sub{font-size:10px;color:var(--tx-helper);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 클립 선택 : 더보기 */
.pk-more{padding:14px 16px 4px;text-align:center}
.pk-more button{width:100%}
.pk-more .hintline{margin:6px 0 0}


/* ── 선택 팝업 구분자 강조 ──────────────────────────────────────────────
   sticky 구분자가 더보기 영역과 겹쳐 흐려 보였다. 대비를 올리고 층을 분리한다. */
.pk-div{
  padding:10px 16px;background:var(--bg-2);
  border-top:1px solid var(--ln-border);border-bottom:1px solid var(--ln-border);
  box-shadow:0 1px 0 rgba(0,0,0,.35)
}
.pk-group:first-child .pk-div{border-top:0}
.pk-div::before{
  content:'';width:3px;height:13px;border-radius:2px;background:var(--primary);flex:0 0 3px
}
.pk-div span{font-size:12.5px;font-weight:700;letter-spacing:-.2px}
.pk-div em{
  font-style:normal;font-size:10.5px;color:var(--tx-secondary);
  background:var(--bg-3);border-radius:9px;padding:1px 7px
}
/* 더보기는 구분자 아래 층에 두어 겹치지 않게 */
.pk-more{position:relative;z-index:1;margin-top:8px;border-top:1px solid var(--ln-subtle)}
/* 구분자별 전체 선택 버튼 */
.pk-div .pk-gall{
  margin-left:auto;height:24px;padding:0 10px;border-radius:12px;font-size:10.5px;
  background:var(--bg-3);border:1px solid var(--ln-border);color:var(--tx-secondary)
}
.pk-div .pk-gall:hover{border-color:var(--primary);color:var(--tx-primary)}
.pk-div .pk-gall.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── 클립 선택 : 하단 이동 경로 미리보기 (시간 눈금 위에 배치) ───────────
   클립 수가 많으면 안쪽 폭이 늘어나 가로 스크롤이 생긴다. */
.pk-preview{
  flex:0 0 auto;border-top:1px solid var(--ln-border);background:var(--bg-1);
  padding:10px 0 12px
}
.cp-head{display:flex;align-items:baseline;gap:10px;padding:0 16px 8px}
.cp-head b{font-size:12px;color:var(--tx-primary)}
.cp-sum{font-size:10.5px;color:var(--tx-helper);font-family:var(--mono)}
.cp-empty{
  margin:0 16px;height:96px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--ln-border);border-radius:6px;font-size:11.5px;color:var(--tx-helper)
}
.cp-scroll{overflow-x:auto;overflow-y:hidden;padding:0 0 4px}
.cp-inner{position:relative;height:126px}
/* 눈금 */
.cp-ruler{position:absolute;left:0;right:0;top:0;height:26px}
.cp-tick{position:absolute;top:16px;width:1px;height:8px;background:var(--ln-border)}
.cp-time{
  position:absolute;top:2px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;color:var(--tx-helper);white-space:nowrap
}
.cp-day{
  position:absolute;top:2px;transform:translateX(3px);
  font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--primary);
  border-left:1px solid var(--primary);padding-left:4px;white-space:nowrap
}
.cp-axis{
  position:absolute;left:0;right:0;top:26px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--primary),rgba(48,112,216,.3))
}
/* 노드 : 썸네일을 키우고 시각을 함께 */
.cp-node{position:absolute;top:34px;transform:translateX(-50%);width:76px;text-align:center}
.cp-node img{
  width:76px;height:52px;object-fit:cover;border-radius:4px;display:block;
  border:1.5px solid var(--primary);background:#000
}
.cp-n{
  position:absolute;left:-6px;top:-8px;min-width:17px;height:17px;padding:0 4px;z-index:2;
  border-radius:9px;background:var(--primary);color:#fff;
  font-family:var(--mono);font-size:10px;line-height:17px
}
.cp-cam{
  display:block;margin-top:4px;font-size:9.5px;color:var(--tx-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.cp-t{display:block;font-family:var(--mono);font-size:9px;color:var(--tx-helper)}


/* ── 크기 조절 슬라이더 : 양끝 산 모양 아이콘 + 원형 핸들 ────────────────── */
.size-slider{display:flex;align-items:center;gap:7px}
/* 작은 산 / 큰 산 — 크기의 대소를 나타낸다 */
.size-slider i{
  display:block;width:0;height:0;flex:0 0 auto;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:6px solid var(--tx-helper)
}
.size-slider i.ss-max{border-left-width:8px;border-right-width:8px;border-bottom-width:11px}
.size-slider input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:96px;height:14px;background:transparent;cursor:pointer;margin:0
}
.size-slider input[type=range]::-webkit-slider-runnable-track{
  height:2px;border-radius:1px;background:var(--tx-helper)
}
.size-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-5px;border-radius:50%;
  background:var(--bg-0);border:2px solid var(--tx-secondary);
  box-shadow:0 1px 2px rgba(0,0,0,.5)
}
.size-slider input[type=range]:hover::-webkit-slider-thumb{border-color:var(--primary)}
.size-slider input[type=range]:active::-webkit-slider-thumb{background:var(--primary);border-color:var(--primary)}
.size-slider input[type=range]::-moz-range-track{height:2px;background:var(--tx-helper);border-radius:1px}
.size-slider input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:var(--bg-0);border:2px solid var(--tx-secondary)
}

/* ── 선택 팝업 : 좌측 안내에 단계 표시를 함께 묶는다 ────────────────────
   3단계(이동 경로 확인)는 화면이 전환되므로 넣지 않는다. */
/* 단계 + 안내(좌) · 기준 대상 + 선택 수(우) */
.pk-top{
  flex:0 0 auto;display:flex;align-items:center;gap:24px;
  padding:14px 16px 16px;
  background:var(--bg-2);border-bottom:1px solid var(--ln-border)
}
.pk-top-l{flex:1;min-width:0}
.pk-top-r{
  flex:0 0 auto;display:flex;align-items:center;gap:18px;
  padding-left:24px;border-left:1px solid var(--ln-border)
}
.pk-seed-row{display:flex;align-items:center;gap:12px}
.pk-seed-row > img{width:64px;height:74px;object-fit:cover;border-radius:5px;border:1px solid var(--ln-border)}
.pk-seed-row .ps-bd{min-width:0}
.pk-seed-row .pk-name{display:block;margin:0 0 6px}
.pk-seed-row .pk-name input{width:180px}
.ps-meta{font-size:10.5px;color:var(--tx-tertiary);font-family:var(--mono)}
.pk-top-r .pk-count{margin:0;white-space:nowrap}
.pk-guide b{font-size:16px}
.pk-guide p{font-size:12.5px}
.pk-step-list{
  display:flex;align-items:center;gap:7px;margin:0 0 9px;padding:0;
  list-style:none
}
.pk-step-list li{display:flex;align-items:center;gap:5px}
.pk-step-list .sp-arrow{color:var(--tx-helper);font-size:13px}
.pk-step-list .sp-n{
  flex:0 0 19px;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  background:var(--bg-3);border:1px solid var(--ln-border);color:var(--tx-helper)
}
.pk-step-list b{font-size:11.5px;font-weight:500;color:var(--tx-helper)}
.pk-step-list li.done .sp-n{background:rgba(63,190,126,.18);border-color:var(--st-high);color:var(--st-high)}
.pk-step-list li.done b{color:var(--tx-tertiary)}
.pk-step-list li.now .sp-n{background:var(--primary);border-color:var(--primary);color:#fff}
.pk-step-list li.now b{color:var(--tx-primary);font-weight:700}
.pk-step-list li.next{opacity:.55}


/* 접힘 핸들이 결과 패널 위에 겹치도록 기준을 잡는다 */
.workspace{position:relative}

/* ── 텍스트 검색 : 포커스 시 입력창이 아래로 확장되며 최근 검색이 붙는다 ──
   아래 필터(유사도·위치…)를 밀어내지 않고 그 위로 덮는다. */
.mode-panel[data-panel="text"] .textarea-wrap{position:relative}
.mode-panel[data-panel="text"] .textarea-wrap.rc-open{
  border-color:var(--primary);border-bottom-left-radius:0;border-bottom-right-radius:0
}
#recentBlk{
  margin:0;                       /* .recent-blk 의 상단 마진 상쇄 */
  position:absolute;left:-1px;right:-1px;top:100%;z-index:40;
  background:var(--bg-1);
  border:1px solid var(--primary);border-top:1px solid var(--ln-subtle);
  border-radius:0 0 8px 8px;
  padding:10px 12px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.55)
}
#recentBlk[hidden]{display:none}
#recentBlk .rb-lb{font-size:10.5px;color:var(--tx-helper);margin:0 0 6px}
#recentBlk .rb-list{display:flex;flex-direction:column;gap:0;align-items:stretch}
#recentBlk .rb-li{
  display:flex;align-items:center;gap:8px;height:30px;padding:0 4px;border-radius:4px;
  font-size:12px;color:var(--tx-secondary);cursor:pointer;background:transparent;border:0
}
#recentBlk .rb-li:hover{background:var(--bg-3);color:var(--tx-primary)}
#recentBlk .rb-li .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
#recentBlk .rb-li .x{
  width:18px;height:18px;flex:0 0 18px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--tx-helper);border-radius:3px
}
#recentBlk .rb-li .x:hover{background:rgba(255,255,255,.1);color:var(--tx-primary)}


/* 좌측 패널 제거 — 목록이 전체 폭을 쓴다 */
.md-pick .pk-side{display:none}


/* ── 클립 팝업 세로 배분 ────────────────────────────────────────────────
   미리보기와 상단 안내가 목록을 눌러 카드가 잘리던 것을 바로잡는다. */
.pk-top{padding:11px 16px 12px;gap:20px}
.pk-guide b{font-size:15px;line-height:1.3}
.pk-guide p{font-size:12px;line-height:1.55;margin-top:3px}
.pk-step-list{margin-bottom:7px}
.pk-seed-row > img{width:56px;height:66px}

.md-pick .pk-body{min-height:180px}
.pk-preview{padding:7px 0 8px}
.cp-head{padding:0 16px 5px}
.cp-scroll{padding:0}
.cp-inner{height:104px}
.cp-ruler{height:22px}
.cp-tick{top:14px;height:7px}
.cp-axis{top:22px}
.cp-node{top:28px;width:72px}
.cp-node img{width:72px;height:46px}
.cp-cam{margin-top:3px}
.cp-empty{height:70px}

/* 트랙 이름이 첫 클립과 겹쳐 읽히지 않던 문제 —
   이름에 배경 칩을 줘 클립 위에서도 또렷하게 남는다. */
.tl-name{
  background:rgba(13,14,18,.82);border:1px solid var(--ln-subtle);
  border-radius:4px;padding:1px 6px;backdrop-filter:blur(2px)
}

/* 검출 박스 라벨이 영상 헤더의 카메라명·시각 위로 올라와 안 읽히던 문제 —
   헤더를 박스보다 위에 두고, 글자가 묻히지 않게 상단 스크림을 준다. */
.dt-vhead{
  z-index:5;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.34) 62%,transparent)
}
.dt-box{z-index:2}

/* 미리보기 : 눈금 대신 각 클립에 시각을 달고, 축은 첫~마지막 클립을 잇는다 */
.cp-note{font-size:10px;color:var(--tx-helper);margin-left:auto;padding-right:16px}
.cp-head{display:flex;align-items:baseline;gap:10px}
.cp-inner{height:112px}
.cp-axis{top:10px;height:2px}
.cp-node{top:16px}
.cp-node .cp-t{
  font-family:var(--mono);font-size:10px;color:var(--tx-secondary);
  display:block;margin-top:1px
}
.cp-node::before{
  content:'';position:absolute;left:50%;top:-8px;width:1px;height:8px;
  background:var(--ln-border);transform:translateX(-50%)
}

/* ── 타임라인 : GUI 참고안(검색상세 시안_260903) 맞춤 ─────────────────────
   하루 전체 위에 클립을 얹고, 커서에 시각 배지를 단다. */
.tl-zoom{display:flex;align-items:center;gap:7px}
.tl-zoom .tl-zr{
  width:88px;height:3px;-webkit-appearance:none;appearance:none;
  background:var(--ln-border);border-radius:2px;outline:none
}
.tl-zoom .tl-zr::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--tx-primary);border:0;cursor:pointer
}
.tl-zoom .tl-zv{font-family:var(--mono);font-size:10px;color:var(--tx-helper);min-width:20px}

/* 커서 시각 배지 — 눈금 줄 위에 올려 가려지지 않게 */
.tl-cursor .tl-cur-t{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  background:var(--bg-0);border:1px solid var(--ln-border);border-radius:3px;
  padding:1px 5px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:var(--tx-primary);white-space:nowrap;z-index:6
}

/* ── 맵뷰 : GUI 참고안(검색상세 시안_260903) ──────────────────────────────
   공간 이름 라벨 · 외부 이동(점선) · 공간 전환지점 · 범례 · 인접 동 이동 */
:root{ --exit:#e050b0 }

/* 경유 지점의 공간 이름 */
.map-sp{
  position:absolute;transform:translate(-50%,-160%);
  background:var(--bg-0);border:1px solid var(--ln-border);border-radius:3px;
  padding:1px 5px;font-size:9.5px;line-height:14px;color:var(--tx-primary);
  white-space:nowrap;pointer-events:none;z-index:4
}
/* 공간 전환지점 */
.map-sw{
  position:absolute;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;
  background:transparent;border:2.5px solid var(--exit);z-index:5;
  box-shadow:0 0 0 2px rgba(224,80,176,.22)
}
/* 외부로 이동 라벨 */
.map-exit{
  position:absolute;left:10px;bottom:44px;z-index:6;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  background:var(--bg-1);border:1px solid var(--exit);border-radius:4px;
  padding:5px 22px 6px 8px;text-align:left;cursor:pointer
}
.map-exit b{font-size:10.5px;color:var(--tx-primary)}
.map-exit span{font-size:9.5px;color:var(--tx-tertiary)}
.map-exit .i{position:absolute;right:6px;top:50%;transform:translateY(-50%);opacity:.6}

/* 범례 */
.pn-legend .lg-sep{width:1px;height:11px;background:var(--ln-border);margin:0 2px}
.pn-legend .lg-in{width:13px;height:2px;background:var(--primary);border-radius:0}
.pn-legend .lg-out{
  width:13px;height:0;border-top:2px dashed var(--exit);background:none;border-radius:0
}
.pn-legend .lg-sw{
  width:9px;height:9px;border-radius:50%;background:none;border:2px solid var(--exit)
}

/* 인접 동 이동 */
.pn-bldg{
  position:absolute;right:10px;bottom:44px;z-index:6;display:flex;flex-direction:column;gap:5px
}
.pn-bldg button{
  background:var(--bg-1);border:1px solid var(--ln-border);border-radius:12px;
  padding:3px 10px;font-size:10px;color:var(--tx-secondary);cursor:pointer;white-space:nowrap
}
.pn-bldg button:hover{border-color:var(--primary);color:var(--tx-primary)}

/* ── 영상 패널 : GUI 참고안 타일 머리말 · 주변 카메라 ────────────────────── */
.pn-vid{position:relative}
.pv-head{
  position:absolute;left:0;right:0;top:0;z-index:4;
  display:flex;align-items:center;gap:7px;padding:6px 9px;
  background:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.3) 66%,transparent);
  font-size:10.5px;color:#fff;pointer-events:none
}
.pv-head .dot{width:7px;height:7px;border-radius:2px;flex:0 0 7px}
.pv-head b{font-weight:600}
.pv-head em{font-style:normal;color:rgba(255,255,255,.86)}
.pv-head .rg{
  font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pv-head .ic{margin-left:auto;opacity:.75;display:flex}
.pn-quad .pq > span{position:relative;overflow:hidden}
.pn-quad .pv-head{padding:4px 7px;font-size:9.5px;gap:5px}
.pn-quad .pv-head .rg{display:none}

/* 주변 카메라 */
.pn-near{position:absolute;right:9px;bottom:9px;z-index:5}
.pn-near button{
  display:flex;align-items:center;gap:5px;
  background:rgba(19,20,24,.9);border:1px solid var(--ln-border);border-radius:4px;
  padding:4px 8px;font-size:10.5px;color:var(--tx-secondary);cursor:pointer
}
.pn-near button:hover{border-color:var(--primary);color:var(--tx-primary)}

/* 메인 영상 머리말의 대상 칩 */
.dt-vhead .vh-obj{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.dt-vhead .vh-obj i{width:7px;height:7px;border-radius:2px;background:var(--primary)}
.dt-vhead .vh-obj b{font-size:11.5px;font-weight:600;color:#fff}

/* 큰 맵(우측)에서의 참고안 요소 배치 */
.dt-map{position:relative}
.dt-map .map-exit{left:12px;bottom:52px}
.dt-map .pn-bldg{right:12px;bottom:52px}
.dt-legend .lg-out{
  width:13px;height:0;border-top:2px dashed var(--exit);background:none;border-radius:0
}
.dt-legend .lg-sw{
  width:9px;height:9px;border-radius:50%;background:none;border:2px solid var(--exit)
}

/* 공간 라벨을 위/아래 번갈아 놓아 서로 겹치지 않게 */
.map-sp.below{transform:translate(-50%,60%)}

/* 참고안 : 커서 지점 프레임 미리보기 */
.tl-cur-pv{
  position:absolute;left:50%;top:22px;transform:translateX(-50%);
  width:104px;height:60px;border-radius:3px;
  border:1.5px solid var(--primary);background:#000 center/cover no-repeat;
  box-shadow:0 6px 18px rgba(0,0,0,.55);z-index:7;pointer-events:none
}
.tl-cur-pv[hidden]{display:none}

/* ＋ 추가 */
.tl-add{
  background:none;border:1px dashed var(--ln-border);border-radius:12px;
  padding:2px 9px;font-size:10.5px;color:var(--tx-tertiary);cursor:pointer
}
.tl-add:hover{border-color:var(--primary);color:var(--tx-primary)}

/* ＋추가를 넣으며 툴바가 넘쳐 버튼 글자가 세로로 깨졌다 —
   줄바꿈 없이 가로로 두고, 좁으면 가로 스크롤로 넘긴다. */
.tl-top{flex-wrap:nowrap;min-width:0}
.tl-tabs{
  display:flex;flex-wrap:nowrap;align-items:center;gap:5px;
  min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none
}
.tl-tabs::-webkit-scrollbar{height:0}
.tl-tabs > button{flex:0 0 auto;white-space:nowrap}
.tl-zoom{flex:0 0 auto}
.tl-top > button,
.tl-top > .btn-ghost{flex:0 0 auto;white-space:nowrap}

/* 공간 이름 라벨 : 촘촘한 구간에서도 서로 비키도록 축소 + 좌우 엇갈림 */
.map-sp{font-size:9px;padding:1px 4px;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.map-sp.below{transform:translate(-50%,60%)}
.map-sp.lft{transform:translate(-92%,-160%)}
.map-sp.below.lft{transform:translate(-92%,60%)}

/* ── 화면별 점검 (2026-09-05) ────────────────────────────────────────────
   B 안에서 각 영역이 좁아지며 툴바가 줄바꿈돼 글자가 세로로 깨지던 것들. */

/* 1) 결과 헤더 : '썸 네 일' '원 본 비 율' '검색 결과 (30/건)' 로 깨졌다.
   줄바꿈을 막았더니 이번엔 칩이 '위' 처럼 잘렸다 —
   낱말은 절대 쪼개지 않고, 자리가 모자라면 **묶음 단위로** 다음 줄에 내린다. */
.results-head{flex-wrap:wrap;min-width:0;row-gap:8px}
.rh-label{flex:0 0 auto;white-space:nowrap}
.results-head .chips{flex-wrap:wrap;min-width:0}
.results-head .chips > *{flex:0 0 auto;white-space:nowrap}
.rh-right{flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap;margin-left:auto}
.view-seg{flex:0 0 auto;flex-wrap:nowrap}
.view-seg button{white-space:nowrap;flex:0 0 auto}

/* 2) 상세 재생바 : 도구가 겹치고 'Multi View' 라벨이 삐져나옴 */
.dt-bar .grp.r{flex-wrap:nowrap;min-width:0;gap:5px}
.dt-bar .grp.r > *{flex:0 0 auto}
/* 좁은 패널에서는 보기 모드 셀렉트를 아이콘 버튼들에 양보한다 */
body.dt-b #dtViewSel{display:none}

/* 3) 설정 모달 : 항목이 하나뿐인 탭에서도 280px 를 강제해 아래가 텅 비었다.
   내용 높이에 맞추되, 탭을 옮길 때 창이 튀지 않게 좌측 메뉴 높이만 확보한다. */
.md-setting .st-nav{min-height:200px}
.md-setting .st-body{padding-bottom:18px}

/* 4) 결과가 없을 때 정렬·보기·크기 도구는 눌러도 소용없다 — 흐리게 두고 막는다 */
.rh-right.off{opacity:.4;pointer-events:none}

/* ── 타임라인 ↔ 지도 연동 ────────────────────────────────────────────────
   아직 지나지 않은 지점은 흐리게, 지금 있는 지점은 또렷하게. */
.map-wp{transition:opacity .12s, transform .12s, box-shadow .12s; cursor:pointer}
.map-wp:not(.past){opacity:.34}
.map-wp.past{opacity:.75}
.map-wp.now{
  opacity:1;transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 3px rgba(255,255,255,.28), 0 2px 8px rgba(0,0,0,.5);
  z-index:6
}
.map-wp:hover{opacity:1}

/* 지점 사이를 지나는 '현재 위치' */
.map-now{
  position:absolute;transform:translate(-50%,-50%);z-index:7;pointer-events:none;
  width:13px;height:13px;border-radius:50%;
  background:#fff;border:2.5px solid var(--now, var(--primary));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--now, #3070d8) 28%, transparent), 0 2px 8px rgba(0,0,0,.55);
  transition:left .12s linear, top .12s linear
}
.map-now[hidden]{display:none}

/* ── 층별 3D 적층 뷰 (GUI 참고안 검색상세 시안_260903) ─────────────────── */
.map-3d{
  position:absolute;inset:0;z-index:3;
  perspective:1400px;perspective-origin:50% 40%;
  pointer-events:none
}
.map-3d[hidden]{display:none}
.m3-floor{
  position:absolute;left:8%;right:8%;
  top:calc(12% + var(--i) * 26%);
  height:34%;
  transform:rotateX(56deg) rotateZ(-42deg) scale(1.16);
  transform-style:preserve-3d;
  pointer-events:auto
}
.m3-floor img{
  width:100%;height:100%;object-fit:fill;display:block;
  border-radius:2px;
  box-shadow:0 14px 24px rgba(0,0,0,.45);
  background:#fff
}
/* 층 배지 — 기울기를 되돌려 똑바로 읽히게 */
.m3-lb{
  position:absolute;left:-6%;top:-4%;
  transform:rotateZ(42deg) rotateX(-56deg);
  background:var(--bg-0);border:1px solid var(--ln-border);border-radius:3px;
  padding:1px 6px;font-size:10px;color:var(--tx-primary);white-space:nowrap
}
/* 지점·라벨도 평면으로 세운다 */
.m3-floor .map-wp{transform:translate(-50%,-50%) rotateZ(42deg) rotateX(-56deg)}
.m3-floor .map-wp.now{transform:translate(-50%,-50%) rotateZ(42deg) rotateX(-56deg) scale(1.18)}
.m3-sp{
  position:absolute;transform:translate(-50%,-190%) rotateZ(42deg) rotateX(-56deg);
  background:var(--bg-0);border:1px solid var(--ln-border);border-radius:3px;
  padding:1px 5px;font-size:9px;line-height:13px;color:var(--tx-primary);
  white-space:nowrap;pointer-events:none
}
/* 층을 관통하는 이동선 */
.m3-riser{
  position:absolute;left:46%;top:16%;width:2px;height:56%;
  background:linear-gradient(180deg,var(--primary),rgba(48,112,216,.35));
  border-radius:1px;z-index:2
}

/* ── 참고안 추가 요소 ────────────────────────────────────────────────── */
/* 타일 우측 아이콘 3종 */
.pv-head .ic{display:flex;align-items:center;gap:6px;pointer-events:auto}
.pv-head .ic .tb{
  background:none;border:0;padding:0;display:flex;align-items:center;
  color:rgba(255,255,255,.85);cursor:pointer
}
.pv-head .ic .tb:hover{color:#fff}

/* 주변 카메라 : 참고안처럼 강조 + 개수 */
.pn-near button{background:var(--primary);border-color:var(--primary);color:#fff}
.pn-near button:hover{filter:brightness(1.08);color:#fff}
.pn-near em{
  font-style:normal;font-family:var(--mono);font-size:9.5px;
  background:rgba(255,255,255,.24);border-radius:8px;padding:0 5px;margin-left:1px
}

/* 인접 동 칩 : 참고안은 4개 */
.pn-bldg{display:grid;grid-template-columns:auto auto;gap:5px}

/* 재생바 아래 편집 도구 줄 */
.dt-editbar{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:8px;padding:5px 12px;
  background:rgba(13,14,18,.72);border-top:1px solid rgba(255,255,255,.08)
}
.dt-editbar .eb-sp{flex:1}
.eb-zoom{display:flex;align-items:center;gap:7px}
.eb-zoom input[type=range]{
  width:96px;height:3px;-webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.24);border-radius:2px;outline:none
}
.eb-zoom input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:#fff;border:0;cursor:pointer
}

/* 4분할 타일 머리말 : 대상 칩 · 카메라 · 기간 · 아이콘 3종 (참고안) */
.mv-head{display:flex;align-items:center;gap:6px}
.mv-dot{width:7px;height:7px;border-radius:2px;flex:0 0 7px}
.mv-obj{font-size:10.5px;font-weight:600;color:#fff;flex:0 0 auto}
.mv-head .tm{
  font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.mv-ic{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.mv-ic .tb{
  background:none;border:0;padding:0;display:flex;align-items:center;
  color:rgba(255,255,255,.85);cursor:pointer
}
.mv-ic .tb:hover{color:#fff}

/* 편집줄 확대 라벨 (없는 아이콘 대신 기호) */
.eb-zoom .zl{font-size:12px;color:rgba(255,255,255,.7);line-height:1}

/* 3D 적층 : 맵 영역을 넘지 않도록 크기·간격 조정 */
.m3-floor{
  left:12%;right:12%;
  top:calc(8% + var(--i) * 24%);
  height:30%;
  transform:rotateX(56deg) rotateZ(-42deg) scale(.86)
}
.m3-riser{left:47%;top:14%;height:52%}

/* 4분할 타일 머리말이 좁은 폭에서 세로로 깨지던 문제 */
.mv-head{flex-wrap:nowrap;min-width:0;white-space:nowrap}
.mv-head .nm{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.mv-head .tm{flex:0 1 auto;min-width:0}
.mv-obj{white-space:nowrap}
/* 아주 좁으면 기간을 접는다 — 대상과 카메라가 먼저다 */
@container (max-width: 320px){ .mv-head .tm{display:none} }
.mv-tile{container-type:inline-size}

/* ── 시안 비율 맞춤 (검색상세 시안_260903) ───────────────────────────────
   좌 : 영상(2x2) → 재생바 → 편집줄 → 타임라인
   우 : 대상정보(얇게) → 맵(크게) → 인접 동 → 사건 등록
   시안 실측 비율 : 좌 67% / 우 29%, 영상이 세로의 약 3/4 */
body.dt-b .dt-side{width:452px;flex:0 0 452px}

/* 영상이 세로를 크게 차지하고 타임라인은 낮게 */
body.dt-b .dt-panes{flex:1 1 auto;min-height:0}
body.dt-b .dt-hist{flex:0 0 auto}

/* 대상정보는 한 줄로 얇게 — 맵에 세로를 내준다 */
body.dt-b .dt-side > .dt-sec:nth-of-type(1){flex:0 0 auto}
body.dt-b .dt-objbar{gap:8px}
body.dt-b .dt-objbar .ob-card img,
body.dt-b .dt-objbar .ob-card > img{height:66px}

/* 맵이 남은 세로를 모두 쓴다 */
body.dt-b .dt-side > .dt-sec:nth-of-type(2){flex:1 1 auto;min-height:0}
body.dt-b .dt-side .dt-map{flex:1;min-height:280px}

/* ── 시안 구조 : 재생바·편집줄을 영상 '아래' 별도 줄로 ────────────────────
   지금은 영상 위에 겹쳐 있어 하단 두 타일을 가린다. */
body.dt-b .dt-video{display:flex;flex-direction:column}
body.dt-b .dt-video > img,
body.dt-b #dtMulti{flex:1;min-height:0}
body.dt-b .dt-ctrl{
  position:static;flex:0 0 44px;height:44px;
  background:var(--bg-1);border-top:1px solid var(--ln-border)
}
body.dt-b .dt-editbar{
  position:static;flex:0 0 34px;
  background:var(--bg-1);border-top:1px solid var(--ln-subtle)
}
/* 영상 위 오버레이(박스·PIP)는 영상 영역 안에서만 */
body.dt-b .dt-video > .ov,
body.dt-b .dt-video > .dt-box,
body.dt-b .dt-video > .dt-pip{pointer-events:none}

/* 4분할이 절대배치라 재생바 아래로 흐르지 않고 겹쳤다 — 흐름 안으로 */
body.dt-b .dt-multi{position:static;inset:auto;flex:1;min-height:0}
/* 4분할일 때 배경 단일 영상은 자리를 차지하지 않는다 */
body.dt-b .dt-video.has-multi > img{display:none}
/* 단일 영상 오버레이(박스·PIP)는 4분할에서 감춘다 */
body.dt-b .dt-video.has-multi > .dt-box,
body.dt-b .dt-video.has-multi > #ovPath,
body.dt-b .dt-video.has-multi > #ovCctv{display:none}

/* ── 검색 패널 : 시안 1-1안(Solid/요청사항 반영) ─────────────────────────
   위치 → 기간 → 유사도 순, 색상 없음. */

/* 유사도 : 라벨과 값을 한 줄에, 아래 슬라이더만 */
.sim-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--tx-secondary);margin-bottom:9px
}
.sim-head b{color:var(--primary);font-size:12px;font-weight:600}
.slider-row.plain{padding:0 0 2px}
.slider-row.plain .sim-bubble,
.slider-row.plain .sim-scale{display:none}

/* 기간 : 시작일·종료일이 늘 보이고 라벨이 위에 */
.date-grp{margin-top:11px}
.date-grp .lb{display:block;font-size:11.5px;color:var(--tx-secondary);margin-bottom:6px}
.date-grp .date-row{display:flex;gap:8px}
.date-grp .date-fld{flex:1;min-width:0}

/* ── 원본 영상 패널 : 시안 1-1안 ────────────────────────────────────────
   펼친 항목은 제목+북마크 아래 3열 메타, 접힌 항목은 좌 썸네일 + 우 정보 나열 */
.pv-meta.cols3{display:flex;gap:0;margin-top:10px}
.pv-meta.cols3 > div{
  flex:1;min-width:0;padding:0 12px;
  border-left:1px solid var(--ln-subtle)
}
.pv-meta.cols3 > div:first-child{padding-left:0;border-left:0}
.pv-meta.cols3 dt{font-size:10.5px;color:var(--tx-helper);margin-bottom:4px}
.pv-meta.cols3 dd{
  margin:0;font-size:11.5px;color:var(--tx-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* 접힌 항목 */
.pv.mini{
  display:flex;gap:0;align-items:stretch;position:relative;
  background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:6px;
  overflow:hidden;cursor:pointer;padding:0
}
.pv.mini:hover{border-color:var(--primary)}
.pv.mini .th{flex:0 0 46%;aspect-ratio:16/9;background:#000}
.pv.mini .th img{width:100%;height:100%;object-fit:cover;display:block}
.pv.mini .bd{flex:1;min-width:0;padding:11px 12px;display:flex;flex-direction:column;gap:5px}
.pv.mini .bd .nm{
  font-size:13px;font-weight:600;color:var(--tx-primary);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pv.mini .bd .ln{
  font-size:11px;color:var(--tx-tertiary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pv.mini .btn-icon.x{position:absolute;right:6px;top:6px;opacity:0;transition:opacity .12s}
.pv.mini:hover .btn-icon.x{opacity:.8}

/* ── 결과 영역 : 와이어프레임(기본/최소화) ──────────────────────────────
   헤더는 `검색 결과 N건` · 정렬 · 그룹별 보기 · 크기 · 레이아웃. 칩은 없다. */
.results-head #chips{display:none}
.rc-badge{
  font-style:normal;margin-left:7px;padding:1px 7px;border-radius:4px;
  border:1px solid var(--primary);color:var(--primary);
  font-size:11.5px;font-family:var(--mono)
}
.rh-sep{width:1px;height:15px;background:var(--ln-border);margin:0 2px}
#groupSelect .select-btn{display:flex;align-items:center;gap:6px}

/* 카드 그리드 : 폭은 슬라이더가 정한다 (고정 열 수 제거) */

/* ── 검색 패널 머리말 : 시안 1-1안 ──────────────────────────────────────
   좌측 `검색` 타이틀 + 우측 왼쪽접기 버튼. 분리(디테치)는 시안에서 빠졌다. */
.side-head{display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.side-title{font-size:13px;font-weight:600;color:var(--tx-primary)}
.side-head .side-head-btns{display:flex;align-items:center;gap:4px}
#btnDetach[hidden]{display:none}

/* 접힌 아코디언의 선택값 요약 (시안 공통LNB_2~4) */
.acc-head{display:flex;align-items:center;gap:8px}
.acc-sum{
  margin-left:auto;font-style:normal;font-size:11.5px;color:var(--primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56%
}
/* 펼친 상태에서도 **카메라(위치)** 는 고른 개수를 계속 보여준다
   (트리가 길어 아래로 스크롤하면 몇 개 골랐는지 잊는다) */
.acc.open > .acc-head .acc-sum{display:none}
.acc.open[data-acc="cam"] > .acc-head .acc-sum{display:inline-block}
.acc.disabled .acc-sum{color:var(--tx-helper)}

/* ── 접힘 펼침 버튼 : 검색홈 탭 오른쪽 ───────────────────────────────────
   가장자리 핸들 대신 탭 줄 안에 둔다. */
.tab-expand{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin:0 2px 0 6px;
  background:var(--bg-2);border:1px solid var(--ln-border);border-radius:5px;
  color:var(--tx-secondary);cursor:pointer
}
.tab-expand:hover{border-color:var(--primary);color:var(--tx-primary)}
.tab-expand[hidden]{display:none}
/* 접힘 레일(구 핸들)은 더 쓰지 않는다 */
.collapsed-rail{display:none}

/* 패널에 붙어 있던 접기 핸들 삭제 — 접기는 머리말 버튼이 맡는다 */
#btnCollapse{display:none !important}

/* ── 타임라인 : 시안 `비교-대상4개` (4978:65095) ─────────────────────────
   트랙 라벨은 색 점이 아니라 **썸네일 카드 + 이름**. 시안 실측 80x65. */
.tl-row{display:flex;align-items:stretch}
.tl-obj{
  position:absolute;left:6px;top:4px;z-index:4;
  width:80px;height:calc(var(--tl-row,66px) - 8px);
  border:1.5px solid var(--slot,var(--primary));border-radius:4px;
  overflow:hidden;background:#000;pointer-events:auto
}
.tl-obj img{width:100%;height:calc(100% - 18px);object-fit:cover;display:block}
.tl-obj .nm{
  display:block;height:18px;line-height:18px;padding:0 5px;
  background:var(--slot,var(--primary));color:#fff;
  font-size:10px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.tl-obj .rm{
  position:absolute;right:2px;top:2px;width:15px;height:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);border:0;border-radius:50%;
  color:#fff;cursor:pointer;opacity:0;transition:opacity .12s
}
.tl-obj:hover .rm{opacity:1}
/* 레인은 라벨 폭만큼 비켜 시작한다 */
.tl-lane{margin-left:92px}

/* 하단 컨트롤 */
.tl-foot{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;border-top:1px solid var(--ln-subtle)
}
.tl-foot .tf-l{display:flex;align-items:center;gap:4px}
.tl-foot .tf-zoom{display:flex;align-items:center;gap:8px;margin:0 auto}
.tl-foot .tf-zoom .zl{font-size:13px;color:var(--tx-tertiary);line-height:1}
.tl-foot .tf-zoom .tl-zr{
  width:120px;height:3px;-webkit-appearance:none;appearance:none;
  background:var(--ln-border);border-radius:2px;outline:none
}
.tl-foot .tf-zoom .tl-zr::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--tx-primary);border:0;cursor:pointer
}
.tl-foot .tf-r{display:flex;align-items:center;gap:8px}

/* ── 우측 패널 : 시안은 **맵 전용** (대상정보 카드 없음) ────────────────
   대상 정보는 타임라인 트랙 라벨(썸네일+이름)이 대신한다. */
body.dt-b .dt-side > .dt-sec:nth-of-type(1){display:none}
body.dt-b .dt-side > .dt-sec:nth-of-type(2){flex:1;min-height:0}
body.dt-b .dt-side .dt-map{flex:1;min-height:0}
/* 상단 사건 등록 버튼은 타임라인 하단으로 옮겼다 */
body.dt-b .dt-side .dt-side-head .btn-primary{display:none}

/* ── 상세 : 시안에 없는 상단 바 정리 ────────────────────────────────────
   시안은 탭바 → 영상 → 재생바 → 편집줄 → 타임라인 으로 바로 이어진다.
   대상 요약과 단 수 전환은 트랙 라벨·영상 분할이 대신하므로 감춘다. */
body.dt-b .dt-objbar{display:none}
/* 타임라인 상단 탭(전체·인물A~D·인물비교·편집)도 시안에 없다 —
   트랙 라벨의 ✕ 와 하단 `인물 추가` 가 같은 일을 한다 */
body.dt-b #dtTl .tl-top{display:none}

/* 트랙이 늘어도 하단 컨트롤을 덮지 않게 세로를 나눈다 */
body.dt-b #dtTl{display:flex;flex-direction:column;min-height:0}
body.dt-b #dtTl .tl-scroll{flex:0 0 auto;min-height:0;overflow-y:visible}
body.dt-b #dtTl .tl-foot{flex:0 0 auto}

/* 비교 인원에 따른 영상 분할 (기본 1 · 최대 4) */
.dt-multi[data-n="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.dt-multi[data-n="2"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.dt-multi[data-n="3"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.dt-multi[data-n="3"] .mv-tile:first-child{grid-column:1 / -1}
.dt-multi[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

/* 고정 탭의 홈 아이콘 */
.tab-home{width:13px;height:13px;flex:0 0 13px;color:var(--tx-secondary);margin-right:2px}
.tab.on .tab-home{color:var(--tx-primary)}

/* 우측 미리보기 목록 : 한 줄 행 (와이어프레임) */
.pv.row{
  display:flex;align-items:center;gap:10px;padding:0 10px;height:32px;
  border-radius:4px;cursor:pointer;background:transparent;border:0
}
.pv.row:hover{background:var(--bg-2)}
.pv.row.on,
.pv.row[aria-selected="true"]{background:var(--primary)}
.pv.row .nm{
  font-size:12.5px;font-weight:600;color:var(--tx-primary);flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%
}
.pv.row .tm{
  flex:1;min-width:0;font-family:var(--mono);font-size:11px;color:var(--tx-tertiary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pv.row .bk,
.pv.row .x{
  flex:0 0 auto;background:none;border:0;padding:0;display:flex;align-items:center;
  color:var(--tx-tertiary);cursor:pointer
}
.pv.row .bk.on{color:var(--primary)}
.pv.row:hover .bk,
.pv.row:hover .x{color:var(--tx-primary)}

/* 카드 하단 북마크 (와이어프레임) */
.card .meta .cbk{
  flex:0 0 auto;background:none;border:0;padding:0;display:flex;align-items:center;
  color:var(--tx-helper);cursor:pointer;margin-right:2px
}
.card .meta .cbk:hover{color:var(--tx-primary)}
.card .meta .cbk.on{color:var(--primary)}

/* ── 인물 검색 서브탭 (와이어프레임 검색/인물) ─────────────────────────── */
.subtabs{display:flex;gap:18px;border-bottom:1px solid var(--ln-subtle);margin-bottom:12px}
.subtabs button{
  background:none;border:0;padding:8px 2px;cursor:pointer;
  font-size:13px;color:var(--tx-tertiary);border-bottom:2px solid transparent;margin-bottom:-1px
}
.subtabs button.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.subtabs button:hover{color:var(--tx-primary)}

/* 접힌 아코디언 요약을 배지로 (와이어프레임) */
.acc-sum{
  background:rgba(48,112,216,.16);border:1px solid rgba(48,112,216,.42);
  border-radius:4px;padding:1px 7px;font-size:11px
}
.acc.disabled .acc-sum{background:none;border-color:var(--ln-subtle)}

/* 등록 인물 빈 상태 (와이어프레임) */
.person-box .empty-dashed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:180px;border:1px dashed var(--ln-border);border-radius:6px;
  font-size:12px;color:var(--tx-helper);text-align:center;line-height:1.7
}

/* ── 이미지 검색 모달 ──────────────────────────────────────────────────── */
.modal.md-img{width:720px;max-width:calc(100vw - 80px);display:flex;flex-direction:column}
.md-img .md-head{align-items:flex-start}
.md-sub{margin:4px 0 0;font-size:11.5px;color:var(--tx-helper)}
.md-img .md-body{padding:0 20px 16px;overflow-y:auto}
.ims-head{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px}
.ims-head .lb{font-size:12.5px;font-weight:600;color:var(--tx-primary)}
.ims-pic{
  border-radius:6px;overflow:hidden;background:#000;
  aspect-ratio:16/9;border:1px solid var(--ln-border)
}
.ims-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ims-filters{display:flex;gap:7px;margin-bottom:10px}
.ims-filters button{
  background:none;border:1px solid var(--ln-border);border-radius:13px;
  padding:3px 12px;font-size:11.5px;color:var(--tx-tertiary);cursor:pointer
}
.ims-filters button.on{border-color:var(--primary);color:var(--primary)}
.ims-all{display:block;margin-bottom:10px}
.ims-grid{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:10px}
.ims-card{
  position:relative;aspect-ratio:3/4;border-radius:5px;overflow:hidden;
  border:1.5px solid var(--ln-border);background:#000;cursor:pointer
}
.ims-card.on{border-color:var(--primary)}
.ims-card img{width:100%;height:100%;object-fit:cover;display:block}
.ims-card .kd{
  position:absolute;left:5px;top:5px;padding:1px 6px;border-radius:3px;
  font-size:10px;color:#fff
}
.ims-card .kd.face{background:var(--primary)}
.ims-card .kd.body{background:rgba(255,255,255,.24)}
.ims-card .pick{
  position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);
  color:#fff;font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.ims-card.on .pick{background:var(--primary);border-color:var(--primary)}
.ims-loading{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:48px 0;font-size:12px;color:var(--tx-helper)
}
.ims-loading .spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--ln-border);border-top-color:var(--primary);
  animation:imspin .8s linear infinite
}
@keyframes imspin{to{transform:rotate(360deg)}}

/* 지능형 알고리즘 : 2열 체크박스 (와이어프레임) */
.algo-grid.cols2{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:4px 0 6px
}
.algo-grid.cols2 .check{margin:0}

/* 히스토리 항목 : 썸네일 + 검색어/일시 + 삭제 (와이어프레임) */
.hs-th{
  width:40px;height:30px;flex:0 0 40px;object-fit:cover;border-radius:4px;
  background:#000;border:1px solid var(--ln-subtle)
}
.hs-bd{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hs-bd .hs-q{font-size:12.5px;font-weight:600;color:var(--tx-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-bd .hs-t{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--tx-helper)}
.hs-x{color:var(--tx-helper)}
.hs-x:hover{color:var(--tx-primary)}

/* ══ 오늘 시안(2026-09-09) 기준 정리 ═══════════════════════════════════
   1-1안(GUI) · 검색 메인(와이어) · 비교-대상4개(상세) 에 없는 것을 걷어낸다.
   기능 코드는 남기고 표시만 끈다 — 되살릴 때 이 블록만 지우면 된다. */

/* 상세 재생바 : 시안은 중앙 재생 컨트롤 + 우측 설정(톱니) 뿐이다.
   히트맵·경로·주변카메라·단일/다중·전체보기는 타일 아이콘과 맵 도구가 맡는다 */
body.dt-b #dtTools > [data-tool],
body.dt-b #dtTools > #dtFull,
body.dt-b #dtViewSel{display:none}
/* 영역/선 검색은 타임라인 하단 편집도구와 겹친다 */
body.dt-b #dtAreaTools{display:none}
/* 재생바 아래 편집줄도 중복 — 시안은 타임라인 하단 한 곳에만 둔다 */
body.dt-b #dtEditBar{display:none}
/* 영상/맵뷰 전환 : 좌측은 영상 전용, 맵은 우측 칼럼이라 필요 없다 */
body.dt-b .dt-video .seg,
body.dt-b .pn-seg{display:none}

/* 경로 비교 바 : 상세의 `인물 추가` 로 대체됐다 */
#compareBar{display:none !important}

/* 상단 패널의 분석 도구(pn-tools)와 영상/맵뷰 전환(pn-switch) :
   시안은 좌측이 영상 전용이고, 분석은 타일 아이콘·맵 도구가 맡는다 */
body.dt-b .pn-tools,
body.dt-b .pn-switch{display:none}
/* 맵 상단 `지도 / 층별` 세그 : 시안은 `A동 (1건)` 동 선택으로 대체 */
body.dt-b #dtMapSeg{display:none}

/* 타임라인 높이는 **트랙 수를 따라간다** (시안 : 1~4명에 따라 달라진다).
   고정하면 1명일 때도 4명 자리를 차지해 영상이 그만큼 작아진다. */
body.dt-b #dtTl{flex:0 0 auto;min-height:0}
body.dt-b .dt-panes{flex:1 1 auto;min-height:0}

/* 타일 우하단 `주변 카메라 (N)` (시안) */
.mv-near{
  position:absolute;right:8px;bottom:8px;z-index:4;
  display:flex;align-items:center;gap:5px;
  background:rgba(13,14,18,.72);border:0;border-radius:4px;
  padding:3px 8px;font-size:10.5px;color:rgba(255,255,255,.9);cursor:pointer
}
.mv-near:hover{background:rgba(48,112,216,.85)}

/* 맵 상단 : 레이아웃 토글 + 바꾸기 (시안) */
.dt-sec-head .map-lay{margin-right:6px}
.dt-sec-head .map-lay button{display:flex;align-items:center;justify-content:center;width:28px;height:24px}
.dt-sec-head .map-swap{margin-right:auto}

/* 상시 노출 PIP 제거 — 시안은 `주변 카메라` 를 눌렀을 때만 뜬다 */
body.dt-b #dtVideo > .dt-pip,
body.dt-b .dt-video > .pip-row{display:none}

/* 주변 카메라 팝오버 (시안) */
.mv-pop{
  position:absolute;right:8px;bottom:34px;z-index:8;width:min(420px,84%);
  background:rgba(19,20,24,.96);border:1px solid var(--ln-border);border-radius:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.55);overflow:hidden
}
.mv-pop .mp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 10px;border-bottom:1px solid var(--ln-subtle);font-size:11.5px;color:var(--tx-primary)
}
.mv-pop .mp-x{background:none;border:0;color:var(--tx-tertiary);cursor:pointer;font-size:12px}
.mv-pop .mp-x:hover{color:var(--tx-primary)}
.mv-pop .mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}
.mv-pop .mp-grid span{position:relative;display:block;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#000}
.mv-pop .mp-grid img{width:100%;height:100%;object-fit:cover;display:block}
.mv-pop .mp-grid em{
  position:absolute;left:0;right:0;bottom:0;padding:2px 5px;font-style:normal;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);
  font-size:9.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.m3-sp[hidden]{display:none}

/* ══ 타임라인 : 시안 `비교-대상4개` 실측 맞춤 ═══════════════════════════ */

/* 행 사이 구분선 제거 — 시안은 선이 없고 배경만 미묘하게 다르다 */
body.dt-b #dtTl .tl-row{border:0;border-bottom:0}
body.dt-b #dtTl .tl-rows > .tl-row + .tl-row{border-top:0}
/* 짝수 행에만 아주 옅은 바탕 (시안의 행 구분) */
body.dt-b #dtTl .tl-row:nth-child(even){background:rgba(255,255,255,.018)}

/* 클립 : 시안은 여러 썸네일이 하나의 테두리 블록 안에 붙어 있다 */
body.dt-b #dtTl .tl-th{border-radius:0;border-width:1.5px}
body.dt-b #dtTl .tl-bar{height:5px;border-radius:2px 2px 0 0;opacity:1}

/* 자정 구분선 */
.tl-midnight{
  position:absolute;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.14);pointer-events:none;z-index:1
}

/* 커서 : 흰 선 + 상단 삼각형 마커 (시안). 시각 배지는 끌 때만 */
.tl-cursor{background:rgba(255,255,255,.9)}
.tl-cur-mk{
  position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid #fff;z-index:6
}
.tl-cursor .tl-cur-t{opacity:0;transition:opacity .12s}
.tl-cursor:hover .tl-cur-t,
body.tl-seeking .tl-cursor .tl-cur-t{opacity:1}

/* 트랙 라벨 : ✕ 상시 (시안) */
.tl-obj .rm{opacity:.85}
.tl-obj:hover .rm{opacity:1}

/* ── 상세 우측 맵 : 의미 없는 구분선 · 버튼 · 버블 칩 ─────────────────────
   맵 전용 칼럼이라 섹션 구분선이 나눌 것이 없다. */
body.dt-b .dt-side .dt-sec{border-top:0}
body.dt-b .dt-side .dt-sec-head{border-bottom:0}
body.dt-b .dt-side > .dt-sec[hidden]{display:none}

/* 상단 도구를 시안처럼 한 줄 세그먼트로 (파란 원형 → 사각 토글) */
.dt-sec-head .map-lay{display:flex;gap:0;border:1px solid var(--ln-border);border-radius:5px;overflow:hidden}
.dt-sec-head .map-lay button{
  width:30px;height:26px;border:0;border-radius:0;background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--tx-tertiary);cursor:pointer
}
.dt-sec-head .map-lay button + button{border-left:1px solid var(--ln-border)}
.dt-sec-head .map-lay button.on{background:var(--primary);color:#fff}
.dt-sec-head .map-swap{margin:0 auto 0 8px;color:var(--tx-tertiary)}
.dt-sec-head .map-swap:hover{color:var(--tx-primary)}

/* 맵 안 배지·칩이 우상단 도구에 가리던 문제 —
   도구는 오른쪽 위, 층 배지는 왼쪽 위로 떼어놓고 칩을 도구 위로 올린다 */
.dt-map .dt-map-tools{z-index:6}
.dt-map .dt-floor{z-index:7}
.dt-map .dt-marker{z-index:8}
.dt-map .map-wp,
.dt-map .map-sp,
.dt-map .map-sw{z-index:9}
/* 도구와 겹치는 우상단 영역에는 칩이 오지 않게 여백 */
.dt-map .pn-wps{position:absolute;inset:0;padding:34px 96px 0 0;pointer-events:none}

/* 맵 칼럼 상단의 의미 없는 선 두 줄 —
   ① 내용이 비어 9px 껍데기만 남은 .dt-side-head 의 아래 테두리
   ② 맵 섹션의 위 테두리. 맵 하나뿐이라 나눌 것이 없다. */
body.dt-b .dt-side > .dt-side-head{display:none}
/* 앞 섹션(대상정보)을 감춘 뒤로는 나눌 짝이 없다 —
   .dt-sec + .dt-sec 규칙을 같은 형태로 되돌린다 (특이도를 맞춰야 이긴다) */
body.dt-b .dt-side > .dt-sec + .dt-sec{border-top:0;padding-top:0}
body.dt-b .dt-side > .dt-sec{border-top:0}

/* ── 상세 맵 : 시안(비교-대상4개) 정밀 대조 ─────────────────────────────
   시안은 흰 카드 안에 3D 적층, 층 배지 없이 공간 라벨만.
   동 선택은 카드 **안** 좌상단, 도구는 카드 **안** 우측 세로 스택. */

/* 층 배지 제거 */
.m3-lb{display:none}

/* 층을 더 크고 완만하게 (시안 기울기) */
.m3-floor{
  left:6%;right:6%;
  top:calc(14% + var(--i) * 22%);
  height:34%;
  transform:rotateX(60deg) rotateZ(-45deg) scale(1.02)
}
.m3-floor .map-wp{transform:translate(-50%,-50%) rotateZ(45deg) rotateX(-60deg)}
.m3-floor .map-wp.now{transform:translate(-50%,-50%) rotateZ(45deg) rotateX(-60deg) scale(1.18)}
.m3-sp{transform:translate(-50%,-190%) rotateZ(45deg) rotateX(-60deg)}
.m3-riser{left:38%;top:20%;height:52%;background:none;border-left:2px dashed var(--primary);width:0}

/* 시안(맵뷰어) : 상단 한 줄 — 좌측 동 선택, 우측 레이아웃 토글 + 바꾸기 */
body.dt-b .dt-sec{position:relative}

/* 맵 도구를 우측 세로 스택으로 (시안) */
body.dt-b .dt-map .dt-map-tools{
  right:10px;top:10px;left:auto;
  flex-direction:column;gap:4px;padding:4px;border-radius:6px;
  background:rgba(0,0,0,.06)
}
body.dt-b .dt-map .dt-map-tools .sepv{width:18px;height:1px;margin:2px 0}
body.dt-b .dt-map .dt-map-tools .btn-icon{
  width:30px;height:30px;border-radius:5px;background:rgba(255,255,255,.9);
  color:#2b2f36;border:1px solid rgba(0,0,0,.08)
}
body.dt-b .dt-map .dt-map-tools .btn-icon.on{background:var(--primary);color:#fff;border-color:var(--primary)}
/* 확대/축소도 같은 스택 아래에 */
body.dt-b .dt-map .dt-zoom{
  right:10px;top:auto;bottom:auto;left:auto;
  position:absolute;top:132px;display:flex;flex-direction:column;gap:0;
  border-radius:5px;overflow:hidden;border:1px solid rgba(0,0,0,.08)
}
body.dt-b .dt-map .dt-zoom button{
  width:30px;height:28px;background:rgba(255,255,255,.9);color:#2b2f36;border:0
}
body.dt-b .dt-map .dt-zoom button + button{border-top:1px solid rgba(0,0,0,.08)}

/* ── 와이어(기본 상세 4656:32031) 실측 반영 ─────────────────────────────
   Container 1386 : 우측패널 534 = 72% : 28% */
body.dt-b .dt-side{width:534px;flex:0 0 534px}

/* 타임라인 : 와이어는 154px (하단 컨트롤 32) — 지금보다 훨씬 얇다 */
/* 행 높이는 JS(ROW)가 정한다 — CSS 로 덮어쓰면 썸네일 계산과 어긋나 잘린다 */
body.dt-b #dtTl .tl-foot{padding:5px 12px}
body.dt-b #dtTl .tl-obj{width:64px}

/* 맵 기본은 평면도 한 장 — 3D 층은 층별을 골랐을 때만 */
body.dt-b .dt-map .map-3d[hidden]{display:none}

/* ── 맵뷰 상단 줄 : 시안(맵뷰어 4481:27552) 배치 ─────────────────────────
   좌측 `A동 (5) ▾` · 우측 레이아웃 토글 2개 + 자리 바꾸기 */
body.dt-b .dt-side .dt-sec-head{
  display:flex;align-items:center;gap:8px;padding:0 2px 10px
}
/* `맵뷰어` 라벨과 아이콘은 시안에 없다 */
body.dt-b .dt-side .dt-sec-head > svg.ic,
body.dt-b .dt-side .dt-sec-head > .ic{display:none}
body.dt-b .dt-side .dt-sec-head{font-size:0}          /* 라벨 텍스트 숨김 */
body.dt-b .dt-side .dt-sec-head > *{font-size:12px}   /* 자식은 원래 크기로 */

body.dt-b .dt-sec-head .dt-bldg{order:1;margin:0 auto 0 0;position:static}
body.dt-b .dt-sec-head .map-lay{order:2;margin:0}
body.dt-b .dt-sec-head .map-swap{order:3;margin:0}

/* ── 타임라인 좌표계 통일 ────────────────────────────────────────────────
   눈금·클립·커서가 서로 다른 기준을 쓰면 위치가 어긋난다.
   트랙 라벨 자리를 .tl-inner 의 padding 으로 잡으면
   절대배치(눈금·커서)와 레인(클립)이 같은 시작점을 공유한다. */
body.dt-b #dtTl .tl-inner{box-sizing:border-box;padding-left:74px}
body.dt-b #dtTl .tl-lane{margin-left:0}
/* 라벨은 그 padding 자리에 놓는다 */
body.dt-b #dtTl .tl-obj{left:-70px}

/* 커서가 레인과 같은 기준을 쓰도록 gutter 폭을 변수로 공유 */
body.dt-b #dtTl .tl-inner{--tl-gut:74px}

/* ══ 커서 미리보기 정리 (2026-09-09) ═══════════════════════════════════
   커서가 지나는 클립이 **확대**되는 것과 커서 위 **큰 미리보기**가
   같은 정보를 두 번 보여주며 서로 겹쳤다.
   시안(기본 상세>썸네일)은 커서 위 미리보기 하나만 쓴다. */

/* 1) 커서 통과 시 클립 확대 없앰 — 호버·선택 때만 살짝 강조 */
body.dt-b #dtTl .tl-th.pass{transform:none;box-shadow:none;z-index:auto}
body.dt-b #dtTl .tl-th.pass{border-color:var(--primary)}
body.dt-b #dtTl .tl-th:hover,
body.dt-b #dtTl .tl-th.on{transform:none;box-shadow:0 2px 10px rgba(0,0,0,.5)}

/* 2) 미리보기를 타임라인 **위쪽**으로 빼서 클립을 가리지 않게
      (시안 실측 199x112 + 아래 시각 배지) */
body.dt-b #dtTl .tl-cur-pv{
  top:auto;bottom:calc(100% - 26px);
  width:180px;height:101px;border-radius:4px;
  border:1.5px solid var(--primary);
  box-shadow:0 10px 26px rgba(0,0,0,.6);z-index:12
}
/* 시각 배지는 미리보기 바로 아래 */
body.dt-b #dtTl .tl-cursor .tl-cur-t{
  top:auto;bottom:calc(100% - 26px);transform:translate(-50%, 100%);
  opacity:1;z-index:12
}
/* 미리보기가 없을 때는 배지도 눈금 줄에 붙인다 */
body.dt-b #dtTl .tl-cursor:has(.tl-cur-pv[hidden]) .tl-cur-t{
  bottom:auto;top:0;transform:translateX(-50%)
}

/* 미리보기가 눈금 줄을 덮던 문제 —
   시안처럼 타임라인 **밖(영상 영역 위)** 으로 띄운다. */
body.dt-b #dtTl{overflow:visible}
body.dt-b #dtTl .tl-scroll{overflow-x:auto;overflow-y:visible}
body.dt-b #dtTl .tl-inner{overflow:visible}
body.dt-b #dtTl .tl-cur-pv{
  bottom:calc(100% + 8px);          /* 눈금 위로 완전히 올린다 */
  width:190px;height:107px
}
body.dt-b #dtTl .tl-cursor .tl-cur-t{
  bottom:calc(100% + 8px);transform:translate(-50%, 100%)
}

/* 미리보기가 재생바 뒤로 숨던 문제 — 층위를 올리고 조상의 자르기를 푼다 */
body.dt-b .dt-hist{overflow:visible;position:relative;z-index:40}
body.dt-b #dtTl .tl-cur-pv{z-index:60}
/* 시각 배지를 미리보기 **안 하단**으로 (눈금·날짜와 겹치지 않게) */
body.dt-b #dtTl .tl-cursor .tl-cur-t{
  bottom:calc(100% + 12px);transform:translateX(-50%);
  z-index:61;background:rgba(0,0,0,.78);border-color:transparent;color:#fff
}

/* 밖으로 띄우면 상위 스택에 가려 아예 사라진다 —
   타임라인 **안**, 눈금 바로 아래에 둔다. 클립 확대를 없앴으므로
   겹치는 것은 미리보기 하나뿐이다. */
body.dt-b .dt-hist{overflow:hidden;z-index:auto}
body.dt-b #dtTl{overflow:hidden}
body.dt-b #dtTl .tl-cur-pv{
  bottom:auto;top:34px;
  width:170px;height:96px;z-index:60
}
body.dt-b #dtTl .tl-cursor .tl-cur-t{
  bottom:auto;top:34px;transform:translate(-50%,-100%);
  z-index:61;background:rgba(0,0,0,.82);border-color:transparent;color:#fff
}

/* 확대 보기 : 카드 최소 폭을 키운다 (열 수는 남은 폭이 정한다) */
.results-body.zoomed .grid{--thumb-w:320px}

/* 맵 위아래 2분할 */
.dt-map.split .map-3d{height:50%}
.dt-map.split::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ln-border);z-index:5
}
/* 영상 ↔ 맵 자리 바꾸기 */
body.dt-swap .detail{flex-direction:row-reverse}

/* ══ 타임라인 세부 : 시안(비교 대상 N개) 실측 ═══════════════════════════ */

/* 구간 막대를 썸네일 위 **별도 줄**로 얇게 */
body.dt-b #dtTl .tl-bar{height:4px;border-radius:2px;top:2px;opacity:1}

/* 캡션(위치명)을 썸네일 **아래**로 빼고 한 줄로 */
body.dt-b #dtTl .tl-th{overflow:visible}
body.dt-b #dtTl .tl-film{border-radius:3px;overflow:hidden}
body.dt-b #dtTl .tl-cam{
  position:absolute;left:0;right:0;bottom:-15px;
  font-size:9.5px;line-height:14px;color:var(--tx-tertiary);
  background:none;padding:0;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* 클립 수 배지는 캡션 줄 오른쪽 끝에 */
body.dt-b #dtTl .tl-more{
  top:auto;bottom:-15px;right:-2px;
  background:none;color:var(--primary);font-size:9.5px;padding:0
}

/* 커서 : 상단 원형 핸들 (시안) */
body.dt-b #dtTl .tl-cur-mk{
  border:0;width:9px;height:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35);
  top:24px;left:50%;transform:translate(-50%,-50%)
}

/* 맵 하단 이동 칩 (시안 맵뷰어) — 외부 이동 / 실내 이동 */
body.dt-b .dt-map .pn-bldg{
  left:12px;right:auto;bottom:12px;display:flex;flex-direction:column;gap:6px
}
.pn-bldg .mv-out,
.pn-bldg .mv-in{
  display:flex;align-items:center;gap:8px;text-align:left;
  background:rgba(255,255,255,.94);border:1px solid var(--exit);border-radius:5px;
  padding:5px 10px;cursor:pointer;color:#2b2f36
}
.pn-bldg .mv-in{border-color:var(--primary)}
.pn-bldg .mv-out i,
.pn-bldg .mv-in i{font-style:normal;font-size:13px;color:var(--exit)}
.pn-bldg .mv-in i{color:var(--primary)}
.pn-bldg b{display:block;font-size:11px;font-weight:600}
.pn-bldg em{display:block;font-style:normal;font-size:9.5px;color:#6b7280}
/* 기존 `외부로 이동` 라벨은 칩으로 대체 */
.dt-map .map-exit{display:none}

/* ── 2026-09-10 사양 ────────────────────────────────────────────────────
   초기화 / 검색 버튼 폭을 같게 (기존엔 검색이 더 넓었다) */
.side-foot,
.panel-foot{display:flex;gap:8px}
#btnSearchReset,
#btnSearchGo{flex:1 1 0;min-width:0}

/* ── 2026-09-10 사양 (2차) ─────────────────────────────────────────────
   1) 미리보기 목록 행에 썸네일 */
.pv.row{gap:9px;height:auto;padding:5px 8px}
.pv.row .rw-th{
  flex:0 0 58px;width:58px;aspect-ratio:16/9;object-fit:cover;
  border-radius:3px;background:#000;border:1px solid var(--ln-subtle)
}
.pv.row.on .rw-th{border-color:rgba(255,255,255,.6)}

/* 2) 카드 폭은 **슬라이더(--thumb-w)** 가 정하고, 열 수는 남은 폭이 정한다.
      우측 패널이 열리면 폭이 줄어 4열 → 3열로 자연히 바뀐다.
      (열 수를 고정하면 슬라이더가 무력해진다) */
.results-body .grid{
  grid-template-columns:repeat(auto-fill, minmax(var(--thumb-w,200px), 1fr));
  gap:12px
}

/* 3) 원본 비율 보기 : 잘라내지 않고 영상 비율 그대로
      (클래스는 #resultsBody 에 붙는 .view-raw 다) */
.view-raw .card .thumb{aspect-ratio:16/9}
.view-raw .card .thumb img{object-fit:contain;background:#000}

/* 4) 검색어 입력창 높이를 줄인다 (80px → 56px) */
.textarea-wrap textarea{height:56px}

/* ── 검색 결과 그리드·날짜 필드 마무리 (2026-09-10) ──────────────────────
   1) 기본 카드 폭 — 200px 이면 넓은 화면에서 7열까지 벌어져 너무 잘다 */
#resultsBody{--thumb-w:264px}
#resultsBody.zoomed{--thumb-w:360px}

/* 2) 원본 비율 보기 : 잘라내지 않고 **영상 비율(16:9)** 그대로.
      기존 규칙이 16/10 · 1/1 로 잡고 있어 특이도를 맞춰 덮는다 */
#resultsBody.view-raw .card .thumb{height:auto;aspect-ratio:16/9}
#resultsBody.view-raw .card .thumb img{object-fit:contain;background:#000}

/* 3) 날짜·시간 입력 : 시안은 아이콘이 **오른쪽**, 글자는 왼쪽 정렬 */
.date-fld{justify-content:space-between;height:30px;padding:0 9px}
.date-fld input{flex:1;min-width:0;width:auto}
.date-fld input[type=time]{width:auto}
.date-fld > svg,
.date-fld > .ic{
  flex:0 0 14px;width:14px;height:14px;order:9;
  color:var(--tx-helper);opacity:.85
}
.date-fld input{order:1}
.date-fld input::placeholder{color:var(--tx-helper)}

/* 브라우저 기본 달력·시계 아이콘을 숨기고 우리 아이콘만 남긴다
   (둘 다 보여 아이콘이 두 개로 겹쳐 보였다) */
.date-fld input[type=date]::-webkit-calendar-picker-indicator,
.date-fld input[type=time]::-webkit-calendar-picker-indicator{
  opacity:0;position:absolute;right:0;width:26px;height:100%;cursor:pointer
}
.date-fld{position:relative}
.date-fld input[type=date]::-webkit-inner-spin-button,
.date-fld input[type=time]::-webkit-inner-spin-button{display:none}

/* 텍스트 검색 입력창 : 시안은 **한 줄 둥근 필드**(약 40px)
   56px 사각형이라 여전히 넓어 보였다. */
.mode-panel[data-panel="text"] .textarea-wrap textarea{
  height:40px;border-radius:20px;
  padding:10px 34px 10px 16px;line-height:20px;overflow:hidden
}
.mode-panel[data-panel="text"] .textarea-wrap.rc-open textarea{
  border-radius:20px 20px 0 0
}
.mode-panel[data-panel="text"] .textarea-wrap .clear-x{top:12px}

/* 텍스트 검색 입력창 : min-height:52px 가 height:40px 를 눌러
   높이가 안 줄고 있었다 — 같은 자리에서 함께 낮춘다. */
.mode-panel[data-panel="text"] .textarea-wrap textarea{
  min-height:0;height:40px;
  padding:11px 34px 11px 12px;line-height:18px
}
/* 감싸는 상자도 함께 (기존 min-height 가 상자를 벌린다) */
.mode-panel[data-panel="text"] .textarea-wrap{
  min-height:0;border-radius:20px
}
.mode-panel[data-panel="text"] .textarea-wrap.rc-open{border-radius:20px 20px 0 0}

/* 결과 그리드 : 재렌더로 새로 만들어진 .grid 에도 폭 규칙이 걸리도록
   (기존엔 첫 렌더에만 걸려 슬라이더가 '먹었다 안 먹었다' 했다) */
#resultsBody .grid,
#resultsBody .group-body .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--thumb-w,264px), 1fr));
  gap:12px;justify-content:stretch
}

/* ── 2026-09-10 4차 ────────────────────────────────────────────────────
   1) 입력창 라운드를 아래 `카메라 검색`(.input, 4px) 과 같은 수준으로.
      20px 은 알약 모양이라 다른 필드와 따로 놀았다. */
.mode-panel[data-panel="text"] .textarea-wrap textarea{border-radius:var(--r6)}
.mode-panel[data-panel="text"] .textarea-wrap{border-radius:var(--r6)}
.mode-panel[data-panel="text"] .textarea-wrap.rc-open,
.mode-panel[data-panel="text"] .textarea-wrap.rc-open textarea{
  border-radius:var(--r6) var(--r6) 0 0
}

/* 2) 전체 삭제(✕) : 40px 한 줄 입력창에서 세로 가운데로 */
.mode-panel[data-panel="text"] .textarea-wrap .clear-x{
  top:50%;transform:translateY(-50%);right:10px
}

/* 3) 미리보기 목록 : 항목마다 상자로 나누고 썸네일을 키운다 */
#previewList{display:flex;flex-direction:column;gap:8px}
.pv.row{
  gap:10px;padding:8px;height:auto;
  background:var(--bg-2);border:1px solid var(--ln-subtle);border-radius:6px
}
.pv.row:hover{background:var(--bg-3);border-color:var(--primary)}
.pv.row.on{background:var(--primary);border-color:var(--primary)}
.pv.row .rw-th{
  flex:0 0 92px;width:92px;aspect-ratio:16/9;border-radius:4px
}
.pv.row .nm{max-width:none;font-size:12.5px}
.pv.row .tm{font-size:10.5px}

/* ── 첫 화면 깜빡임 방지 ────────────────────────────────────────────────
   마크업에 예시 값이 박혀 있어 JS 가 그리기 전 잠깐 스쳐 보였다.
   준비가 끝나면 booting 클래스를 떼고 드러낸다. */
body.booting #app{visibility:hidden}
body.booting::after{
  content:'';position:fixed;inset:0;background:var(--bg-0);z-index:9999
}

/* ── 접힘/펼침 : 시안 4965:32320 ────────────────────────────────────────
   접으면 패널이 통째로 사라지고, 탭바 첫 자리에 `검색` 탭이 선다.
   그 탭 우측 버튼으로 되돌린다. */
.tab.tab-search{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:0 10px 0 13px;cursor:default   /* 패널 1px 테두리만큼 보정 */
}
/* 펼침 상태 머리말(.side-title)과 글자·위치를 같게 맞춘다 —
   접었다 펼 때 라벨이 흔들려 보였다 */
.tab.tab-search > span{
  color:var(--tx-primary);font-size:13px;font-weight:600;line-height:1;
  position:relative;top:1px        /* 펼침 머리말과 세로를 맞춘다 */
}
.tab.tab-search .tx{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;background:none;border:0;border-radius:3px;
  color:var(--tx-tertiary);cursor:pointer
}
.tab.tab-search .tx:hover{background:rgba(255,255,255,.1);color:var(--tx-primary)}
.tab.tab-search .ic{width:15px;height:15px}

/* ══ 영상 선택 : 시안 4656:44120 ═══════════════════════════════════════
   좌 기준 대상 / 우 날짜별 그리드 / 하 선택 미리보기 */
.modal.md-vsel{
  width:min(1138px, calc(100vw - 96px));
  height:min(953px, calc(100vh - 60px));
  display:flex;flex-direction:column
}
.md-vsel .md-head{align-items:flex-start}
.md-vsel .vs-wrap{flex:1;min-height:0;display:flex;gap:0;padding:0 16px}

/* 좌측 : 기준 대상 */
.vs-side{
  flex:0 0 150px;padding:14px 16px 14px 0;border-right:1px solid var(--ln-subtle);
  display:flex;flex-direction:column;gap:10px
}
.vs-obj{position:relative;aspect-ratio:3/4;border-radius:5px;overflow:hidden;background:#000}
.vs-obj img{width:100%;height:100%;object-fit:cover;display:block}
.vs-add{
  position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.5);color:#fff;
  font-size:13px;line-height:1;cursor:pointer
}
.vs-name{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx-secondary)}
.vs-name .q{
  display:inline-flex;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--ln-border);align-items:center;justify-content:center;
  font-size:9px;font-style:normal;color:var(--tx-helper)
}
.vs-name input{
  flex:1;min-width:0;height:28px;background:var(--bg-2);
  border:1px solid var(--ln-border);border-radius:4px;padding:0 8px;
  font-size:12px;color:var(--tx-primary);outline:none
}
.vs-hint{margin:0;font-size:10.5px;color:var(--tx-helper);line-height:1.5}

/* 우측 : 도구 + 그리드 */
.vs-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:14px 0 14px 16px}
.vs-tools{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vs-count{
  padding:2px 8px;border-radius:4px;border:1px solid var(--primary);
  color:var(--primary);font-family:var(--mono);font-size:11px
}
.vs-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.vs-sep{width:1px;height:15px;background:var(--ln-border)}
.vs-seg button{display:flex;align-items:center;justify-content:center;width:28px;height:24px}
.vs-body{flex:1;min-height:0;overflow-y:auto;padding-right:4px}

/* 하단 : 선택 미리보기 */
.vs-preview{
  flex:0 0 auto;border-top:1px solid var(--ln-border);
  padding:10px 16px 12px;background:var(--bg-1)
}

/* ── GNB : 시안 4999:38312 (LNB 노드 4999:38315 실측) ────────────────────
   컨테이너 padding 20/6 · gap 24, 메뉴 48px · radius 6 · padding 4/2,
   아이콘 24px, 라벨 12px/1.3. 활성 항목은 아이콘+라벨을 함께 감싼다. */
.lnb{width:60px;flex:0 0 60px;padding:20px 6px;gap:24px;align-items:center}
/* 활성 배경을 항목 전체로 (아이콘만 감싸던 것을 라벨까지) */
.lnb button > .bx{background:none !important;border-radius:0;width:auto;height:auto}
.lnb button{
  width:48px;border-radius:6px;padding:4px 2px;gap:0;
  height:auto;margin-bottom:0;
  transition:background .12s
}
.lnb button:hover{background:rgba(255,255,255,.06)}
.lnb button.on{background:var(--primary);color:#fff}
.lnb button.on .bx{color:#fff}
.lnb button.on span{color:#fff}
.lnb .bx .ic,
.lnb .bx .i{width:24px;height:24px}
.lnb span{font-size:12px;line-height:1.3;letter-spacing:-.2px}

/* `설정` 위 구분선 : 시안은 24px 짜리 가운데 정렬 라인 (gap 24 안에 놓인다) */
.lnb #lnbSetting{position:relative;margin:0}
.lnb #lnbSetting::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:24px;top:-12.5px;height:1px;
  background:var(--ln-border)
}
.lnb .lnb-foot{margin-top:0}

/* ── 입력 글자 위치 · 결과 수 정렬 (2026-09-10 5차) ──────────────────────
   1) 검색어가 안쪽으로 치우치고 위로 붙어 있었다.
      textarea 라 line-height 로 세로를 잡아야 한다. */
.mode-panel[data-panel="text"] .textarea-wrap textarea{
  padding:0 34px 0 12px;line-height:40px;height:40px
}
.mode-panel[data-panel="text"] .textarea-wrap textarea::placeholder{line-height:40px}

/* 2) `총 N 건` 의 글자와 배지가 세로로 어긋났다 — 기준선을 맞춘다 */
.rh-label{display:inline-flex;align-items:center;gap:0}
.rc-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:20px;padding:0 8px;margin:0 7px;line-height:1;vertical-align:middle
}

/* 검색어가 안쪽으로 밀려 있던 진짜 원인 —
   감싸는 .textarea-wrap 에도 padding-left 12px 가 있어 12+12=24px 이 됐다.
   여백은 입력 한 곳에서만 준다. */
.mode-panel[data-panel="text"] .textarea-wrap{padding:0}

/* 입력 상자 범위를 시안에 맞춘다 —
   테두리를 포함해 **40px** 이어야 하는데 42px 이었고(내부 40 + 테두리 2),
   탭과의 간격도 시안(24px)보다 좁았다. */
.mode-panel[data-panel="text"] .textarea-wrap{
  box-sizing:border-box;height:40px;margin-top:8px
}
.mode-panel[data-panel="text"] .textarea-wrap textarea{
  height:38px;line-height:38px
}

/* ── 패널 디자인 기준은 **검색결과 패널** ────────────────────────────────
   앞서 흔들림을 잡느라 검색결과 패널을 목록에 맞춰 평면으로 눌렀는데
   방향이 반대다. 검색결과 패널의 카드(4px 라운드 + 1px 테두리)가 기준이고
   검색 목록·미리보기가 여기에 맞춘다. LNB 도 이미 같은 카드다. */
#sidePanel,
#results,
#preview{
  border:1px solid var(--ln-subtle);border-radius:var(--r);
  background:var(--bg-2)
}
.workspace{padding:0}
/* 탭은 시안(4999:38743)에서 카드 **위**에 놓인다 — 탭바는 바탕이 없어야
   아래 목록 카드의 모서리가 드러난다 */
.content-col > .tabbar{padding-left:0;background:transparent}

/* ── 이동 경로 미리보기 : 노드에서 바로 빼기 ────────────────────────────
   목록으로 돌아가 체크를 푸는 대신 미리보기에서 바로 제외한다. */
/* 항상 보이되 흐리게 — hover 에서만 나오면 지울 수 있는지 알 수 없다 */
.cp-node{ --cp-rm-op:.6 }
.cp-node:hover,
.cp-node:focus-within{ --cp-rm-op:1 }
.cp-rm{
  position:absolute;right:-7px;top:-8px;z-index:3;
  width:18px;height:18px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ln-border);background:var(--bg-3);color:var(--tx-secondary);
  cursor:pointer;opacity:var(--cp-rm-op);transition:opacity .12s,background .12s,color .12s
}
.cp-rm .i{width:11px;height:11px}
.cp-rm:hover{background:var(--exit);border-color:var(--exit);color:#fff}
.cp-rm:focus-visible{opacity:1;outline:2px solid var(--primary);outline-offset:1px}
/* 터치·좁은 화면에서는 hover 가 없으니 항상 보인다 */

/* 크기 슬라이더 양 끝 아이콘 : 한 단계씩 조절하는 버튼이다 */
.size-slider i{cursor:pointer;transition:border-bottom-color .12s}
.size-slider i:hover{border-bottom-color:var(--tx-primary)}
.size-slider i:active{border-bottom-color:var(--primary)}

/* ── 결과 목록 : 정렬 기준별 묶음 (최신순=날짜 / 위치순=카메라) ──────────
   유사도순은 연속값이라 묶지 않는다. */
.res-group + .res-group{margin-top:20px;border-top:1px solid var(--ln-border);padding-top:16px}
.res-gh{display:flex;align-items:baseline;gap:8px;padding:0 2px 10px}
.res-gh b{font-size:12.5px;font-weight:600;color:var(--tx-primary);letter-spacing:-.2px}
.res-gh .n{font-size:11px;color:var(--tx-helper);font-family:var(--mono)}

/* ============================================================
   상세 탭바 — 시안 5126:58065 (Search Tab bar) 실측
   바 h30 / 탭 200×30 / gap 4 / 상단만 6px 라운드
   비활성 : bg level-0 · 12px Medium · 우측 1×16 구분선
   활성   : surface raised · 12px Regular · 구분선 없음
   ============================================================ */
.content-col > .tabbar{height:30px;flex:0 0 30px;padding:0 4px 0 0;gap:20px;align-items:stretch}
.content-col > .tabbar > .tabs{gap:4px;height:30px;flex:1 1 auto;min-width:0}
.content-col > .tabbar .tab{
  width:200px;flex:0 0 200px;height:30px;box-sizing:border-box;
  padding:0 8px;gap:8px;
  border-radius:var(--r6) var(--r6) 0 0;
  background:var(--bg-0);
  font-size:12px;font-weight:500;line-height:1.3;color:var(--tx-tertiary)
}
/* 구분선은 탭 **안쪽 오른쪽 끝**에 붙는다 (시안 divider 1×16) */
.content-col > .tabbar .tab::after{
  content:'';display:block;position:static;transform:none;flex:0 0 1px;
  width:1px;height:16px;background:var(--ln-subtle)
}
.content-col > .tabbar .tab.on,
.content-col > .tabbar .tab:last-child,
.content-col > .tabbar .tab.tab-search{}
.content-col > .tabbar .tab.on::after,
.content-col > .tabbar .tab:last-of-type::after,
.content-col > .tabbar .tab.tab-search::after{display:none}
.content-col > .tabbar .tab.on{
  background:var(--bg-2);color:var(--tx-primary);font-weight:400
}
.content-col > .tabbar .tab > span{flex:1 1 auto;min-width:0}

/* 히스토리 : 아이콘 20 + 라벨 14px Medium (시안) */
.content-col > .tabbar #btnHistory{
  width:auto;flex:0 0 auto;height:28px;align-self:center;margin-left:0;
  gap:4px;padding:4px;font-size:14px;font-weight:500;letter-spacing:-.28px;
  line-height:1.3;color:var(--tx-secondary)
}
/* 검색 결과 탭도 다른 탭과 같은 규격 — 눌러서 목록으로 돌아간다 */
.content-col > .tabbar .tab.tab-search{cursor:pointer;padding:0 8px}
.content-col > .tabbar .tab.tab-search > span{
  color:inherit;font-size:12px;font-weight:500;line-height:1.3;top:0;position:static
}
.content-col > .tabbar .tab.tab-search.on > span{color:var(--tx-primary);font-weight:400}
.content-col > .tabbar #btnHistory span{font:inherit;letter-spacing:inherit}
/* 시안에서 구분선은 **비활성 탭이 연달아 놓일 때만** 그린다 —
   활성 탭 왼쪽과 줄 끝에는 없다 */
.content-col > .tabbar .tab:has(+ .tab.on)::after{display:none}

/* ── 타임라인 이동 시 확대 표시 삭제 (사양 변경) ────────────────────────
   커서가 지나는 클립이 커지거나 커서 위에 큰 미리보기가 뜨지 않는다.
   커서가 어느 구간에 있는지는 테두리 강조로만 알린다. */
.tl-cur-pv{display:none !important}
.tl-th.pass{transform:none !important}
body.dt-b #dtTl .tl-th.pass{transform:none !important;box-shadow:none}
.tl-th:hover,.tl-th.on{transform:none}

/* ============================================================
   상세 타임라인 — 시안 5126:58116 실측
   눈금 48 = 날짜 20 + 시각 28 / 트랙 행 65 = 막대 8 + 썸네일 57
   ============================================================ */
body.dt-b #dtTl .tl-ruler{height:48px}
body.dt-b #dtTl .tl-ruler .tl-day{
  top:2px;font-size:11px;font-weight:400;font-family:inherit;
  color:var(--tx-secondary);border-left:0;padding-left:0;transform:translateX(-50%)
}
body.dt-b #dtTl .tl-ruler .tl-day.first{color:var(--tx-secondary)}
body.dt-b #dtTl .tl-ruler .tl-lb{top:24px;font-size:11px;font-family:inherit;color:var(--tx-helper)}
body.dt-b #dtTl .tl-ruler .tk{top:42px;height:6px}

/* 구간 막대 : 썸네일 바로 위 8px (시안 line) */
body.dt-b #dtTl .tl-bar{top:0;height:8px;border-radius:2px 2px 0 0;opacity:1}

/* 시안에는 썸네일 아래 카메라 캡션이 없다 — 정보는 호버 툴팁이 맡는다 */
body.dt-b #dtTl .tl-cam{display:none}
/* 번호 16×16 · 카메라 수 배지는 시안처럼 썸네일 안 오른쪽 위 */
body.dt-b #dtTl .tl-n{
  left:4px;top:4px;min-width:16px;height:16px;line-height:16px;font-size:10px;border-radius:3px
}
body.dt-b #dtTl .tl-more{
  top:4px;right:4px;bottom:auto;left:auto;height:13px;line-height:13px;font-size:9.5px;
  padding:0 4px;border-radius:3px;background:rgba(0,0,0,.62);color:#fff
}

/* 시각 배지는 시안 눈금에 없다 — 끌거나 커서에 올렸을 때만 눈금 **아래**로 */
body.dt-b #dtTl .tl-cursor .tl-cur-t{
  top:52px;bottom:auto;transform:translateX(-50%);
  opacity:0;transition:opacity .12s
}
body.dt-b #dtTl .tl-cursor:hover .tl-cur-t,
body.tl-seeking #dtTl .tl-cursor .tl-cur-t{opacity:1}

/* 좁은 구간에서 배지가 창 밖으로 삐져나오지 않게 —
   시안의 8px 조각처럼 잘려 보이는 게 맞다 */
body.dt-b #dtTl .tl-th{overflow:hidden}
/* 카메라 수 배지는 시안처럼 **첫 썸네일** 오른쪽 위에 */
body.dt-b #dtTl .tl-more{left:78px;right:auto}

/* ============================================================
   맵 컨트롤 — 시안 5126:58131 실측
   h34 · 좌 동 선택(140×34) · 우 뷰전환 + 바꾸기(gap 10)
   ============================================================ */
body.dt-b .dt-sec-head.map-ctl{
  display:flex;align-items:center;justify-content:space-between;
  height:34px;gap:10px;padding:0;border:0;background:none
}
body.dt-b .dt-sec-head.map-ctl .mc-right{display:flex;align-items:center;gap:10px}

/* 동 선택 : 140×34 · 좌 16 / 우 8 · 14px */
body.dt-b .dt-sec-head.map-ctl #dtBldg{width:140px;flex:0 0 140px;height:34px;margin:0}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-btn{
  width:100%;height:34px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 16px;border:1px solid var(--ln-border);border-radius:var(--r);
  background:var(--bg-2);color:var(--tx-primary);
  font-size:14px;font-weight:400;letter-spacing:-.28px;line-height:1.3
}
body.dt-b .dt-sec-head.map-ctl #dtBldg .caret{width:24px;height:24px;flex:0 0 24px}

/* 뷰 전환 : 두 칸이 맞닿은 세그먼트, 각 h34 · 좌우 10 · 아이콘 20 */
body.dt-b .dt-sec-head.map-ctl #mapLay{display:flex;height:34px;gap:0;background:none;padding:0;border:0}
body.dt-b .dt-sec-head.map-ctl #mapLay button{
  height:34px;box-sizing:border-box;padding:0 10px;border-radius:0;
  border:1px solid var(--ln-border);background:var(--bg-2);color:var(--tx-secondary)
}
body.dt-b .dt-sec-head.map-ctl #mapLay button:first-child{border-radius:var(--r) 0 0 var(--r)}
body.dt-b .dt-sec-head.map-ctl #mapLay button:last-child{border-radius:0 var(--r) var(--r) 0;border-left:0}
body.dt-b .dt-sec-head.map-ctl #mapLay button.on{
  background:var(--primary);border-color:var(--primary);color:#fff
}
body.dt-b .dt-sec-head.map-ctl #mapLay button .i{width:20px;height:20px}

/* 바꾸기 : 34×34 테두리 버튼 */
body.dt-b .dt-sec-head.map-ctl #mapSwap{
  width:34px;height:34px;flex:0 0 34px;box-sizing:border-box;
  border:1px solid var(--ln-border);border-radius:var(--r);
  background:var(--bg-2);color:var(--tx-secondary)
}
body.dt-b .dt-sec-head.map-ctl #mapSwap .ic{width:20px;height:20px}
body.dt-b .dt-sec-head.map-ctl #mapSwap:hover,
body.dt-b .dt-sec-head.map-ctl #mapLay button:not(.on):hover{color:var(--tx-primary);background:var(--bg-3)}

/* 기존 order/margin 규칙(4446~4448, 4278~4280, 4355)을 무력화 —
   순서와 정렬은 시안 구조(좌 셀렉트 / 우 그룹)가 정한다 */
body.dt-b .dt-sec-head.map-ctl > *{order:0;margin:0}
body.dt-b .dt-sec-head.map-ctl .map-lay{margin:0}
body.dt-b .dt-sec-head.map-ctl .map-swap{margin:0}
body.dt-b .dt-sec-head.map-ctl [hidden]{display:none}

/* 층별 3D : 지점을 잇는 경로선 (시안의 파란 연결선) */
#dtMap3d .m3-floor .m3-path{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;overflow:visible
}
#dtMap3d .m3-floor .map-wp,
#dtMap3d .m3-floor .m3-sp{z-index:2}

/* 층이 4개(B1 포함)로 늘어 스택이 컨테이너를 넘쳤다 — 간격·높이를 다시 잡는다.
   0~3층 : top 6 / 25 / 44 / 63 %, 높이 31% → 마지막 층 바닥이 94% */
#dtMap3d .m3-floor{
  left:8%;right:8%;
  top:calc(6% + var(--i) * 19%);
  height:31%
}

/* 라벨을 지점 바로 위에 붙인다 — 190% 나 띄워 두니 어느 점의 이름인지
   알 수 없고 다른 층 라벨과 뭉쳐 보였다 */
#dtMap3d .m3-sp{transform:translate(-50%,-160%) rotateZ(45deg) rotateX(-60deg)}

/* 층 라벨은 층 위 **평면 레이어**에 — 층 안에 두면 위층 평면에 가려진다 */
#dtMap3d .m3-labels{position:absolute;inset:0;pointer-events:none;z-index:20}
#dtMap3d .m3-labels .m3-sp{position:absolute;left:0;top:0;transform:none;white-space:nowrap}

/* 지나지 않은 지점이 0.34 라 거의 보이지 않았다 — 지점은 늘 읽히고
   지나온 지점만 또렷해지도록 대비를 조정한다 */
#dtMap3d .map-wp:not(.past){opacity:.62}
#dtMap3d .map-wp.past{opacity:1}
#dtMap3d .map-wp:hover{opacity:1}

/* 층 배지 : 쌓인 층이 몇 층인지 알려 준다 (오버레이에 올려 가려지지 않게) */
#dtMap3d .m3-labels .m3-fl{
  position:absolute;left:0;top:0;
  padding:2px 7px;border-radius:3px;
  background:rgba(20,21,26,.86);color:#fff;
  font-size:10.5px;font-weight:600;line-height:14px;white-space:nowrap
}

/* ============================================================
   상세 재생바 — 최신 시안 5126:58070 (Video Control) 기준 복원
   좌 : 도형 검색 · 선 검색
   우 : 히트맵 · 주변카메라 | 단일 영상(활성) · 동시 포착 ∨ | 설정
   (경로 확인 · 다중 영상 버튼 · 전체보기는 시안에 없다)
   ============================================================ */
body.dt-b #dtAreaTools{display:flex}
body.dt-b #dtTools > [data-tool="heat"],
body.dt-b #dtTools > [data-tool="cctv"],
body.dt-b #dtTools > [data-tool="single"],
body.dt-b #dtTools > .tb-div,
body.dt-b #dtViewSel{display:flex}
body.dt-b #dtTools > [data-tool="path"],
body.dt-b #dtTools > [data-tool="multi"],
body.dt-b #dtTools > #dtFull{display:none}
body.dt-b #dtTools > .tb-div{width:1px;height:16px;background:var(--ln-subtle);margin:0 4px;flex:0 0 1px}
/* 활성 단일 영상 뷰 : 시안은 파란 사각 버튼 */
body.dt-b #dtTools > [data-tool="single"].on{
  background:var(--primary);color:#fff;border-radius:var(--r)
}
/* 동시 포착 : 아이콘 + 라벨 + 화살표 */
body.dt-b #dtViewSel{width:auto;flex:0 0 auto}
body.dt-b #dtViewSel .select-btn{
  display:flex;align-items:center;gap:3px;height:24px;padding:0 4px;
  background:none;border:0;color:var(--tx-secondary);font-size:12px;white-space:nowrap
}
body.dt-b #dtViewSel .select-btn:hover{color:var(--tx-primary)}

/* 층간 이동선 : 층이 바뀌는 두 지점을 잇는 점선 (시안 비교-대상4개) */
#dtMap3d .m3-labels .m3-riser{
  position:absolute;left:0;top:0;pointer-events:none;overflow:visible
}
#dtMap3d .m3-labels .m3-riser line{
  stroke:var(--primary);stroke-width:2;stroke-dasharray:2 4;stroke-linecap:round
}

/* ── 구역 이동 안내 : 현재 위치에 점선으로 매달린다 (시안 5126:58130) ──── */
.map-zone{
  position:absolute;z-index:8;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  transform:translateX(-50%)
}
.map-zone[hidden]{display:none}
.map-zone .mz-line{
  display:block;width:0;height:46px;
  border-left:2px dashed var(--exit)
}
.map-zone .mz-box{
  display:block;padding:5px 10px;border-radius:var(--r);
  background:var(--bg-2);border:1px solid var(--ln-border);
  box-shadow:0 4px 14px rgba(0,0,0,.45);white-space:nowrap
}
.map-zone .mz-box b{display:block;font-size:11px;font-weight:600;color:var(--tx-primary);line-height:15px}
.map-zone .mz-box em{display:block;font-size:10.5px;font-style:normal;color:var(--tx-tertiary);line-height:14px}

/* 시안에는 하단 고정 칩(외부/실내 이동) 대신 위 안내만 있다 */
body.dt-b .dt-map .pn-bldg{display:none}

/* ============================================================
   타임라인 시안 규격을 **상세·비교 양쪽**에 (#dtTl · #cmpTl)
   높이 = 눈금 48 + 트랙수 x 행 + 하단 41.
   34px 기준의 옛 계산식 탓에 비교 4명일 때 마지막 트랙이 잘렸다.
   ============================================================ */
body.dt-b .tl-host{height:calc(48px + var(--tl-tracks) * var(--tl-row,65px) + 41px)}
body.dt-b .tl-host .tl-ruler{height:48px}
body.dt-b .tl-host .tl-ruler .tl-day{
  top:2px;font-size:11px;font-weight:400;font-family:inherit;
  color:var(--tx-secondary);border-left:0;padding-left:0;transform:translateX(-50%)
}
body.dt-b .tl-host .tl-ruler .tl-day.first{color:var(--tx-secondary)}
body.dt-b .tl-host .tl-ruler .tl-lb{top:24px;font-size:11px;font-family:inherit;color:var(--tx-helper)}
body.dt-b .tl-host .tl-ruler .tk{top:42px;height:6px}
body.dt-b .tl-host .tl-bar{top:0;height:8px;border-radius:2px 2px 0 0;opacity:1}
body.dt-b .tl-host .tl-cam{display:none}
body.dt-b .tl-host .tl-th{overflow:hidden}
body.dt-b .tl-host .tl-n{
  left:4px;top:4px;min-width:16px;height:16px;line-height:16px;font-size:10px;border-radius:3px
}
body.dt-b .tl-host .tl-more{
  top:4px;left:78px;right:auto;bottom:auto;height:13px;line-height:13px;font-size:9.5px;
  padding:0 4px;border-radius:3px;background:rgba(0,0,0,.62);color:#fff
}
body.dt-b .tl-host .tl-th.pass{transform:none !important;box-shadow:none}
body.dt-b .tl-host .tl-cursor .tl-cur-t{
  top:52px;bottom:auto;transform:translateX(-50%);opacity:0;transition:opacity .12s
}
body.dt-b .tl-host .tl-cursor:hover .tl-cur-t,
body.tl-seeking .tl-host .tl-cursor .tl-cur-t{opacity:1}
/* 인물 탭 줄까지 포함한 높이 */
body.dt-b .tl-host{
  height:calc(var(--tl-toph,0px) + 48px + var(--tl-tracks) * var(--tl-row,65px) + 41px)
}
/* 비교 타임라인도 세로로 자르지 않는다 (#dtTl 에만 걸려 있었다) */
body.dt-b .tl-host .tl-scroll{overflow-x:auto;overflow-y:visible}
body.dt-b .tl-host{
  height:calc(var(--tl-toph,0px) + 48px + var(--tl-tracks) * var(--tl-row,65px) + 49px)
}

/* 비교 타일 머리말 — 시안 5126:59281 : ■ 인물 A · 위치 · 일시 … ⋯ */
.cmp-head .cmp-dot{
  width:8px;height:8px;border-radius:2px;flex:0 0 8px;display:inline-block
}
.cmp-head .who{
  font-size:12px;font-weight:600;color:#fff;line-height:1.3;white-space:nowrap;flex:0 0 auto
}
.cmp-head .more{margin-left:auto;color:rgba(255,255,255,.72)}
.cmp-head .more:hover{color:#fff}

/* ============================================================
   다층 뷰(3D) — three.js (시안 5184:100653 · 사양 PTS_DTL_MAP_000_1)
   ============================================================ */
.dt-map .map-gl{position:absolute;inset:0;z-index:1;overflow:hidden;background:#e8e9ec;user-select:none;touch-action:none}
.dt-map .map-gl[hidden]{display:none}
.dt-map .map-gl .m3g-cv{display:block}
.dt-map .map-gl.can-rotate{cursor:grab}
.dt-map .map-gl.can-rotate.grabbing{cursor:grabbing}
.dt-map .map-gl .m3g-ov{position:absolute;inset:0;pointer-events:none;z-index:3}
.dt-map .map-gl .map-wp{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;font-weight:600;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)
}
.dt-map .map-gl .map-wp:not(.past){opacity:.62}
.dt-map .map-gl .map-wp.past,.dt-map .map-gl .map-wp:hover{opacity:1}
.dt-map .map-gl .map-wp.now{transform:translate(-50%,-50%) scale(1.18)}
/* 층 태그 : 각 층의 우측 (사양 1) */
.dt-map .map-gl .m3g-tag{
  position:absolute;transform:translate(-100%,-50%);
  padding:2px 7px;border-radius:3px;background:rgba(20,21,26,.86);color:#fff;
  font-size:10.5px;font-weight:600;line-height:14px;white-space:nowrap
}
/* 공간 라벨·층간 선 레이어 (hideOverlappedLabels 가 만든다) */
.dt-map .map-gl .m3-labels{position:absolute;inset:0;pointer-events:none;z-index:4}
.dt-map .map-gl .m3-labels .m3-sp{position:absolute;left:0;top:0;transform:none;white-space:nowrap}
/* 안내 1 : 호버 툴팁 (3초 후 사라짐) */
.dt-map .map-gl .m3g-tip{
  position:absolute;z-index:6;width:162px;box-sizing:border-box;padding:9px 11px;border-radius:6px;
  background:rgba(24,25,31,.94);color:#fff;font-size:11.5px;line-height:16px;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.35);transition:opacity .2s
}
.dt-map .map-gl .m3g-tip.out{opacity:0}
.dt-map .map-gl .m3g-tip[hidden]{display:none}
/* 안내 2 : 중앙 하단 상시 */
.dt-map .map-gl .m3g-hint{
  position:absolute;z-index:6;left:50%;bottom:16px;transform:translateX(-50%);
  padding:8px 16px;border-radius:18px;background:rgba(24,25,31,.9);color:#fff;
  font-size:12px;line-height:16px;white-space:nowrap;pointer-events:none
}
.dt-map .map-gl .m3g-hint[hidden]{display:none}
/* 안내 3 : 우측 하단 3D 조작 버튼 — 켜면 grab 포인터로 회전 */
.dt-map .map-gl .m3g-3d{
  position:absolute;z-index:6;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.1);
  background:#fff;color:#2b2f36;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)
}
.dt-map .map-gl .m3g-3d svg{width:22px;height:22px}
.dt-map .map-gl .m3g-3d.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.dt-map .map-gl .m3g-3d[hidden]{display:none}
/* 도구·확대축소는 3D 위에 */
body.dt-b .dt-map .dt-map-tools,body.dt-b .dt-map .dt-zoom{z-index:30}
body.dt-b .dt-map .dt-map-tools .btn-icon .ic{width:16px;height:16px}
/* 위층 판에 가려진 지점 */
.dt-map .map-gl .map-wp.occ{opacity:.28 !important}

/* ============================================================
   2단계 — 영상 영역 · 타임라인 하단 (시안 5184:98960 · 사양 2·3)
   ============================================================ */
/* 영상 머리말 : 위치명 · 일시 (인물 칩 없음 — 시안) */
body.dt-b #dtVhObj{display:none}
/* 설정 팝오버 : 값은 파랑, 음소거 아이콘 버튼 */
.set-menu .sm-row .v.on{color:var(--primary)}
.set-menu .sm-mute{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.set-menu .sm-mute .ic{width:16px;height:16px}
.set-menu #setVol{accent-color:var(--primary)}
/* 동시 포착 PIP : 카메라명은 썸네일 안 좌하단 (시안) */
.dt-pip .pip-i{position:relative}
.dt-pip .pip-i span{
  position:absolute;left:6px;bottom:4px;right:6px;
  color:#fff;font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.8);
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;padding:0
}
/* 배속 배지 */
.dt-ctrl .btn-icon[data-rate]::after{
  content:attr(data-rate);position:absolute;right:-7px;top:-6px;
  padding:0 3px;border-radius:6px;background:var(--primary);color:#fff;
  font-size:9px;font-weight:700;line-height:12px
}
.dt-ctrl .btn-icon:disabled{opacity:.35;pointer-events:none}
/* 타임라인 하단 : − 슬라이더 + · 경로 비교(외곽선 파랑) */
.tl-foot .tf-zoom{display:flex;align-items:center;gap:6px;margin:0 auto}
.tl-foot .tf-zoom .zb{width:24px;height:24px}
.tl-foot .tf-zoom .zb .ic{width:16px;height:16px}
.tl-foot .tf-l .btn-icon .ic{width:16px;height:16px}
.tl-foot .tf-l .btn-icon.on{background:var(--primary);color:#fff}
.tl-foot .tf-cmp{border:1px solid var(--primary);color:var(--primary);background:transparent}
.tl-foot .tf-cmp:hover:not(:disabled){background:rgba(48,112,216,.12)}
/* 탐지 구간 호버 미리보기 (시안 Hover) */
.tl-tip{
  position:fixed;z-index:120;display:flex;gap:12px;align-items:center;
  padding:11px;border-radius:8px;background:var(--bg-3);border:1px solid var(--ln-border);
  box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none;max-width:280px
}
.tl-tip[hidden]{display:none}
.tl-tip img{width:80px;height:80px;border-radius:50%;object-fit:cover;flex:0 0 80px}
.tl-tip .tt-i{display:flex;flex-direction:column;gap:4px;min-width:0}
.tl-tip .tt-i b{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tx-primary)}
.tl-tip .tt-i b i{width:8px;height:8px;border-radius:2px;display:inline-block}
.tl-tip .tt-i em{font-style:normal;font-size:11px;line-height:14px;color:var(--tx-tertiary);font-family:var(--mono)}
.tl-tip .tt-cam{font-size:11px;color:var(--tx-secondary)}

/* 영상 비율 설정 팝오버 (시안 팝오버-영상비율설정) */
.v-ratio-pop{
  position:fixed;z-index:130;display:flex;flex-direction:column;min-width:140px;padding:4px 0;
  border-radius:6px;background:var(--bg-3);border:1px solid var(--ln-border);box-shadow:0 8px 24px rgba(0,0,0,.45)
}
.v-ratio-pop[hidden]{display:none}
.v-ratio-pop button{height:28px;padding:0 12px;text-align:left;border:0;background:none;color:var(--tx-secondary);font-size:12px;cursor:pointer}
.v-ratio-pop button:hover{background:rgba(255,255,255,.06);color:var(--tx-primary)}
.v-ratio-pop button.on{color:var(--primary)}
img.v-zoomed{transition:transform .08s linear;user-select:none;-webkit-user-drag:none}
[data-vbm].on{color:var(--primary)}

/* 단일 영상 머리말 : 위치명 · 일시 … 우측 북마크 · 비율 · 전체보기 */
body.dt-b .dt-vhead{display:flex;align-items:center;gap:8px}
.dt-vhead .vh-ic{margin-left:auto;display:flex;align-items:center;gap:4px;pointer-events:auto}
.dt-vhead .vh-ic .tb,.mv-head .mv-more,.pv-head .mv-more{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;
  border:0;border-radius:4px;background:none;color:rgba(255,255,255,.86);cursor:pointer
}
.dt-vhead .vh-ic .tb:hover,.mv-head .mv-more:hover{background:rgba(255,255,255,.14);color:#fff}
.dt-vhead .vh-ic .tb.on{color:var(--primary)}
.dt-vhead .vh-ic .ic,.mv-head .mv-more .ic{width:16px;height:16px}
.mv-head .mv-ic{margin-left:auto}
/* ⋯ 메뉴 */
.v-more-menu{
  position:absolute;right:8px;top:34px;z-index:40;display:flex;flex-direction:column;min-width:120px;padding:4px 0;
  border-radius:6px;background:var(--bg-3);border:1px solid var(--ln-border);box-shadow:0 8px 24px rgba(0,0,0,.45)
}
.v-more-menu button{height:28px;padding:0 12px;text-align:left;border:0;background:none;color:var(--tx-secondary);font-size:12px;cursor:pointer}
.v-more-menu button:hover{background:rgba(255,255,255,.06);color:var(--tx-primary)}
.v-more-menu button.on{color:var(--primary)}
/* 다중 뷰일 때 `동시 포착` 활성 (시안 멀티뷰) */
body.dt-b #dtViewSel.on .select-btn{color:var(--primary)}

/* 비교 타일 : 우상단 도구 · 동시 포착 칩/팝오버 (시안 경로비교 2명 / 4명) */
.cmp-head .vh-ic,.vw-head .vh-ic{margin-left:auto;display:flex;align-items:center;gap:2px}
.cmp-head .vh-ic .tb,.vw-head .vh-ic .tb{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;
  background:none;color:rgba(255,255,255,.86);cursor:pointer
}
.cmp-head .vh-ic .tb:hover,.vw-head .vh-ic .tb:hover{background:rgba(255,255,255,.14);color:#fff}
.cmp-head .vh-ic .tb.on,.vw-head .vh-ic .tb.on{color:var(--primary)}
.cmp-head .vh-ic .ic,.vw-head .vh-ic .ic{width:16px;height:16px}
.cmp-tile{position:relative}
.cmp-sim{
  position:absolute;right:8px;bottom:8px;z-index:6;display:flex;align-items:center;gap:4px;
  height:24px;padding:0 8px;border:0;border-radius:4px;background:rgba(0,0,0,.66);color:#fff;font-size:11px;cursor:pointer
}
.cmp-sim svg{width:11px;height:11px}
.cmp-sim-pop{
  position:absolute;right:8px;bottom:38px;z-index:8;width:min(340px,calc(100% - 16px));
  border-radius:6px;background:rgba(24,25,31,.94);border:1px solid var(--ln-border);box-shadow:0 8px 24px rgba(0,0,0,.45)
}
.cmp-sim-pop .cs-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:11.5px;color:#fff}
.cmp-sim-pop .cs-x{border:0;background:none;color:rgba(255,255,255,.7);cursor:pointer}
.cmp-sim-pop .cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 6px 6px}
.cmp-sim-pop .cs-grid button{position:relative;padding:0;border:0;background:#000;border-radius:3px;overflow:hidden;cursor:pointer;aspect-ratio:16/9}
.cmp-sim-pop .cs-grid img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-sim-pop .cs-grid em{position:absolute;left:4px;bottom:2px;font-style:normal;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}
.cmp-tile .v-more-menu{top:36px}

/* 이동 경로 리스트 (사양 4) */
#pnlMovePath .mpl-list{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto;padding-right:2px}
#pnlMovePath .mvw-wp{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid transparent;border-radius:5px;
  background:rgba(255,255,255,.03);color:inherit;text-align:left;cursor:pointer}
#pnlMovePath .mvw-wp:hover{background:rgba(255,255,255,.07)}
#pnlMovePath .mvw-wp.on{border-color:var(--primary);background:rgba(48,112,216,.12)}
#pnlMovePath .mvw-wp .n{flex:0 0 18px;width:18px;height:18px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
#pnlMovePath .mvw-wp .bd{display:flex;flex-direction:column;min-width:0}
#pnlMovePath .mvw-wp .nm{font-size:12px;color:var(--tx-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pnlMovePath .mvw-wp .mt{font-size:10.5px;color:var(--tx-helper);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pnlMovePath .mpl-sep{display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:10.5px;color:var(--exit)}
#pnlMovePath .mpl-sep::before,#pnlMovePath .mpl-sep::after{content:'';flex:1;height:1px;border-top:1px dashed currentColor;opacity:.6}
/* 인물 선택 팝업 (시안 5184:99800) */
.md-person-pick{width:400px}
.md-person-pick .pp-list{display:flex;flex-direction:column;gap:8px;padding:14px 18px}
.md-person-pick .pp-row{display:flex;align-items:center;gap:10px;height:58px;padding:0 6px 0 12px;border:1px solid var(--ln-border);border-radius:6px;cursor:pointer}
.md-person-pick .pp-row.on{border-color:var(--primary)}
.md-person-pick .pp-row input{position:absolute;opacity:0;pointer-events:none}
.md-person-pick .pp-row .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--tx-helper);flex:0 0 16px;position:relative}
.md-person-pick .pp-row.on .rd{border-color:var(--primary)}
.md-person-pick .pp-row.on .rd::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--primary)}
.md-person-pick .pp-row .nm{flex:1;font-size:13px;color:var(--tx-primary)}
.md-person-pick .pp-row img{width:46px;height:46px;border-radius:4px;object-fit:cover}

/* 영역 검색 · 가상펜스 검색 팝업 */
.md-area{width:560px;max-width:calc(100vw - 40px)}
.md-area.fence{width:760px}
.md-area .md-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 220px);overflow-y:auto}
.md-area .as-pic{position:relative;border-radius:4px;overflow:hidden;background:#000}
.md-area .as-pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.md-area .as-box{position:absolute;border:1.5px solid var(--primary);background:rgba(48,112,216,.08)}
.md-area .as-filters{display:flex;gap:6px}
.md-area .as-filters button{height:26px;padding:0 12px;border-radius:13px;border:1px solid var(--ln-border);background:none;color:var(--tx-secondary);font-size:11.5px;cursor:pointer}
.md-area .as-filters button.on{border-color:var(--primary);color:var(--primary)}
.md-area .as-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.md-area.fence .as-grid{grid-template-columns:repeat(6,1fr)}
.md-area .as-card{display:flex;flex-direction:column;padding:0;border:1px solid var(--ln-border);border-radius:5px;overflow:hidden;background:var(--bg-2);cursor:pointer;text-align:left}
.md-area .as-card.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.md-area .as-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.md-area .as-card span{padding:5px 8px;font-size:11px;color:var(--tx-helper)}
.md-area .as-card span b{color:var(--tx-primary);font-weight:500}
.md-area .as-empty{min-height:200px;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--tx-tertiary)}


/* 상세 : 영상·타임라인이 탭바와 같은 왼쪽 기준선(8px)에서 시작 — 시안 5184:98960.
   LNB 가 사라진 뒤 #dtMain 의 왼쪽 여백 20px 이 남아 영상만 28px 에서 시작했다. */
body.dt-b .dt-main{padding-left:0}

/* ============================================================
   구역 모델 — 외곽 지도 · 멀티 뷰 · 영역 전환
   ============================================================ */
#dtMapSec .map-panes{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
#dtMapSec .map-panes > .dt-map{flex:1;min-height:0;position:relative}
#dtMapSec .map-panes > .dt-map[hidden]{display:none}
.dt-map.split::after{display:none}
/* 외곽 지도 */
.dt-map .zone-map{position:absolute;inset:0;z-index:2;overflow:hidden;background:#24262c}
.dt-map .zone-map[hidden]{display:none}
.dt-map .zone-map.zoomed{cursor:grab}
.dt-map .zone-map.grabbing{cursor:grabbing}
.zone-map .zm-stage{position:absolute}
.zone-map .zm-stage img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.zone-map .zm-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.zone-map .zm-pt{
  position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer
}
.zone-map .zm-pt:not(.past){opacity:.7}
.zone-map .zm-pt.in-cl{visibility:hidden}
.zone-map .zm-cls{position:absolute;inset:0;pointer-events:none}
.zone-map .zm-cl{
  position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--primary);border:0;box-shadow:0 0 0 6px rgba(48,112,216,.28),0 2px 8px rgba(0,0,0,.35)
}
.zone-map .zm-cl:hover{box-shadow:0 0 0 8px rgba(48,112,216,.36),0 2px 8px rgba(0,0,0,.35)}
/* 구역 이동 칩 : 눌러서 다음 구역 지도로 */
.map-zone .mz-box{pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;position:relative;padding-right:24px;text-align:left;font:inherit}
.map-zone .mz-box .mz-go{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--tx-secondary);font-size:14px}
.select-menu div.disabled{opacity:.38;pointer-events:none}
#mapLay button:disabled{opacity:.4;cursor:not-allowed}
#dtMapTools .btn-icon:disabled{opacity:.4;pointer-events:none}
/* 멀티 뷰 둘째 창 */
.zone-pane{border-radius:6px;overflow:hidden;background:#24262c}
.zone-pane .zp-head{position:absolute;left:10px;top:10px;z-index:31}
.zone-pane .zp-head .select-btn{height:30px;padding:0 8px 0 12px;border:1px solid var(--ln-border);border-radius:var(--r);background:var(--bg-2);color:var(--tx-primary);font-size:13px;display:flex;align-items:center;gap:6px}
.zone-pane .zp-zoom{position:absolute;right:10px;top:10px;z-index:31;display:flex;flex-direction:column;border-radius:5px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.zone-pane .zp-zoom[hidden]{display:none}
.zone-pane .zp-zoom button{width:30px;height:28px;border:0;background:rgba(255,255,255,.9);color:#2b2f36;cursor:pointer}
.zone-pane .zp-zoom button + button{border-top:1px solid rgba(0,0,0,.08)}
.zone-pane .zp-floor{position:absolute;inset:0;z-index:1}
.zone-pane .zp-floor[hidden]{display:none}
.zone-pane .zp-floor img{width:100%;height:100%;object-fit:cover;display:block}
.zone-pane .zp-floor .dt-floor{position:absolute;right:10px;bottom:10px;left:auto;top:auto}
.zone-pane .zp-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zone-pane .zp-floor .map-wp{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;border:2px solid #fff}
/* 영역 전환 : 맵 섹션이 넓은 왼쪽, 영상이 오른쪽 칸 */
body.dt-swap .detail{flex-direction:row}
body.dt-swap #dtPanes > #dtMapSec{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:0}
body.dt-swap #dtMapSec.split-on .map-panes{flex-direction:row}
body.dt-swap .dt-side > #dtVideo{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9;position:relative;align-self:stretch}
/* 영역 전환 보정 — 오른쪽 칼럼 전용 높이 규칙이 빠지면서 지도가 원래 고정 높이로 줄었다.
   지도 두 칸이 왼쪽 영역을 꽉 채우고, 영상은 시안처럼 위아래 여백을 두고 전체가 보이게 */
#dtMapSec .map-panes > .dt-map{height:auto;align-self:stretch}
body.dt-swap #dtPanes{align-items:stretch}
body.dt-swap .dt-side > #dtVideo{flex:1 1 auto;min-height:0;height:auto;aspect-ratio:auto;background:#0b0c10}
body.dt-swap .dt-side > #dtVideo #dtVideoImg{object-fit:contain}
body.dt-swap .dt-side > #dtVideo .dt-box{display:none}

/* 영상 선택 팝업 : 이동 경로 미리보기 확대/축소 (시안 경로 편집) */
#clipsPreview .cp-zoom{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 0 4px}
#clipsPreview .cp-zoom .btn-icon{width:24px;height:24px}
#clipsPreview .cp-zoom .ic{width:16px;height:16px}
#clipsPreview .cp-zr{width:120px;accent-color:var(--primary)}

/* ============================================================
   결과 카드 크기 = 슬라이더 값 그대로
   - 우측 미리보기 패널이 생겨도 카드 크기는 그대로, **한 줄 개수만** 바뀐다
     (minmax(…,1fr) 로 남는 폭만큼 늘어나 284 → 345px 로 커지던 문제)
   - 기본·원본 보기의 이미지 칸을 같게 — 원본은 그 칸 안에 원본 비율로 (시안 Object Card 215×176)
   ============================================================ */
#resultsBody .grid,
#resultsBody .group-body .grid{grid-template-columns:repeat(auto-fill, var(--thumb-w,264px));justify-content:start}
#resultsBody .card{width:var(--thumb-w,264px);min-width:0}
#resultsBody .card .thumb,
#resultsBody.view-raw .card .thumb{height:auto;aspect-ratio:215/176}
#resultsBody .card .thumb img{object-fit:cover}
#resultsBody.view-raw .card .thumb img{object-fit:contain;background:#000}

/* 타임라인 트랙 : 컬러바 4px (전 8px 로 두꺼웠다) */
body.dt-b .tl-host .tl-bar,
body.dt-b #dtTl .tl-bar{height:4px;border-radius:2px}
/* 평면 도면 확대 판 */
#dtMap > .flat-stage{position:absolute;inset:0;transform-origin:center center;z-index:0}
#dtMap > .flat-stage.zoomed{cursor:grab}
#dtMap > .flat-stage.grabbing{cursor:grabbing}
#dtMap > .flat-stage > img{width:100%;height:100%;object-fit:cover;display:block}
/* ± 버튼을 위 도구 아이콘과 같은 세로선에 (3px 어긋났다) */
body.dt-b .dt-map .dt-zoom{right:13px}

/* 경로 비교 추가 팝업 */
.md-cmp-add{width:380px;max-width:calc(100vw - 40px)}
.md-cmp-add .ca-list{max-height:420px;overflow-y:auto;padding:8px 16px 12px;display:flex;flex-direction:column;gap:4px}
.md-cmp-add .ca-date{font-size:11.5px;color:var(--tx-helper);padding:8px 2px 4px;font-family:var(--mono)}
.md-cmp-add .ca-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:5px;cursor:pointer;position:relative}
.md-cmp-add .ca-row:hover{background:rgba(255,255,255,.04)}
.md-cmp-add .ca-row input{position:absolute;opacity:0;pointer-events:none}
.md-cmp-add .ca-row .ck{width:16px;height:16px;flex:0 0 16px;border-radius:3px;border:1.5px solid var(--tx-helper);position:relative}
.md-cmp-add .ca-row.on .ck{background:var(--primary);border-color:var(--primary)}
.md-cmp-add .ca-row.on .ck::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.md-cmp-add .ca-row.locked{cursor:default}
.md-cmp-add .ca-row.locked .ck{opacity:.55}
.md-cmp-add .ca-row.dis{opacity:.4;cursor:not-allowed}
.md-cmp-add .ca-row img{width:34px;height:34px;border-radius:4px;object-fit:cover;flex:0 0 34px}
.md-cmp-add .ca-row .bd{display:flex;flex-direction:column;min-width:0}
.md-cmp-add .ca-row .nm{font-size:12.5px;color:var(--tx-primary);display:flex;align-items:center;gap:6px}
.md-cmp-add .ca-row .cnt{font-style:normal;font-size:10px;padding:0 5px;border-radius:3px;background:rgba(48,112,216,.18);color:var(--primary)}
.md-cmp-add .ca-row .sub{font-size:10.5px;color:var(--tx-helper);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ════════════════════════════════════════════════════════════════════
   2026-09-11 시안 5184:77047 정밀 맞춤 — 타임라인 · 툴바 · 영상 영역
   (상세 #dtTl · 비교 #cmpTl 공통. 옛 #dtTl 규칙을 이기도록 :is(#id) 사용)
   ════════════════════════════════════════════════════════════════════ */
/* 타임라인 틀 (5184:99014 · 100218) : 높이는 JS 가 인원수로 계산 */
body.dt-b :is(#dtTl,#cmpTl){border-top:2px solid var(--ln-subtle);display:flex;flex-direction:column}
body.dt-b :is(#dtTl,#cmpTl) .tl-top{flex:0 0 36px}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll{flex:1 1 auto;min-height:0;overflow:hidden}
body.dt-b :is(#dtTl,#cmpTl).tl-zoomed .tl-scroll{overflow-x:auto;overflow-y:hidden}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll::-webkit-scrollbar{height:6px}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
body.dt-b :is(#dtTl,#cmpTl) .tl-inner{box-sizing:border-box;height:100%;padding-left:90px;--tl-gut:90px}
/* 눈금 48 = 날짜 20 + 시각 28(윗선 · 12px 라벨 · 6px 눈금) */
body.dt-b :is(#dtTl,#cmpTl) .tl-ruler{height:48px;border-bottom:0;overflow:visible}
body.dt-b :is(#dtTl,#cmpTl) .tl-ruler::before{content:'';position:absolute;left:-90px;right:0;top:20px;border-top:1px solid var(--ln-subtle)}
body.dt-b :is(#dtTl,#cmpTl) .tl-ruler .tl-day,
body.dt-b :is(#dtTl,#cmpTl) .tl-ruler .tl-day.first{
  top:2px;font-size:12px;line-height:16px;font-weight:400;font-family:inherit;
  color:var(--tx-tertiary);border:0;padding:0;transform:translateX(-16px)
}
body.dt-b :is(#dtTl,#cmpTl) .tl-ruler .tl-lb{top:24px;font-size:12px;line-height:16px;font-family:inherit;color:var(--tx-secondary);transform:translateX(-50%)}
body.dt-b :is(#dtTl,#cmpTl) .tl-ruler .tk{top:42px;width:1px;height:6px;background:var(--ln-border)}
body.dt-b :is(#dtTl,#cmpTl) .tl-midnight{position:absolute;top:0;bottom:0;width:1px;background:var(--ln-subtle);z-index:1;pointer-events:none}
/* 트랙 행 65 · 간격 2 · 행 배경은 칩 자리까지 */
body.dt-b :is(#dtTl,#cmpTl) .tl-rows{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:8px}
body.dt-b :is(#dtTl,#cmpTl) .tl-row,
body.dt-b :is(#dtTl,#cmpTl) .tl-row:nth-child(even){flex:0 0 65px;height:65px;border:0;background:none;overflow:visible}
body.dt-b :is(#dtTl,#cmpTl) .tl-row::before{content:'';position:absolute;top:0;bottom:0;left:-90px;right:0;background:rgba(255,255,255,.035);pointer-events:none}
body.dt-b :is(#dtTl,#cmpTl) .tl-lane{position:absolute;inset:0;margin:0}
/* 인물 칩 80×65 : 사진 + (■ 이름) */
body.dt-b :is(#dtTl,#cmpTl) .tl-obj{
  left:-86px;top:0;width:80px;height:65px;box-sizing:border-box;
  border:1px solid var(--slot,var(--primary));border-radius:4px;background:var(--bg-2);
  display:flex;flex-direction:column;overflow:hidden
}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj img{flex:1 1 auto;width:100%;height:auto;min-height:0;object-fit:cover}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .nm{
  flex:0 0 auto;height:auto;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:2px 4px;background:var(--bg-2);color:var(--tx-secondary);
  font-size:12px;font-weight:500;line-height:1.3
}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .nm i{width:8px;height:8px;flex:0 0 8px;border-radius:2px;background:var(--slot,var(--primary))}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .rm{opacity:0;top:3px;right:3px;width:16px;height:16px}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj:hover .rm{opacity:1}
/* 구간 = 막대 8 + 테두리 1px 창(좌·우·아래) 안에 100×56 프레임이 1px 간격으로 */
body.dt-b :is(#dtTl,#cmpTl) .tl-bar,
body.dt-b :is(#dtTl,#cmpTl) .tl-bar:hover,
body.dt-b :is(#dtTl,#cmpTl) .tl-bar.on{top:0;height:8px;border-radius:2px 2px 0 0;opacity:1;box-shadow:none}
body.dt-b :is(#dtTl,#cmpTl) .tl-th,
body.dt-b :is(#dtTl,#cmpTl) .tl-th:hover,
body.dt-b :is(#dtTl,#cmpTl) .tl-th.on,
body.dt-b :is(#dtTl,#cmpTl) .tl-th.pass{
  top:8px;height:57px;min-width:8px;box-sizing:border-box;
  border:1px solid var(--bc,var(--primary));border-top:0;border-radius:0 0 2px 2px;
  background:var(--bc,var(--primary));overflow:hidden;transform:none !important;box-shadow:none
}
body.dt-b :is(#dtTl,#cmpTl) .tl-th .tl-film{
  position:absolute;inset:0;border-radius:0;background-color:#000;
  background-repeat:repeat-x;background-size:101px 56px;background-position:0 0
}
body.dt-b :is(#dtTl,#cmpTl) .tl-th .tl-film::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 100px,var(--bg-1) 100px 101px)
}
body.dt-b :is(#dtTl,#cmpTl) .tl-n{
  left:4px;top:4px;width:16px;min-width:16px;height:16px;box-sizing:border-box;padding:0;
  border:1px solid #fff;border-radius:50%;background:var(--bc,var(--primary));color:#fff;
  font-family:inherit;font-size:10px;font-weight:500;line-height:14px;text-align:center;z-index:2
}
body.dt-b :is(#dtTl,#cmpTl) .tl-more{
  left:78px;right:auto;top:4px;bottom:auto;height:13px;line-height:13px;padding:0 4px;
  border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:400;z-index:2
}
body.dt-b :is(#dtTl,#cmpTl) .tl-cam{display:none}
/* 커서 : 시각 줄 윗선에서 시작하는 흰 1px 선 + 아래 향한 삼각형 */
body.dt-b :is(#dtTl,#cmpTl) .tl-cursor{top:20px;bottom:0;width:1px;background:#fff;opacity:1}
body.dt-b :is(#dtTl,#cmpTl) .tl-cursor::before{display:none}
body.dt-b :is(#dtTl,#cmpTl) .tl-cur-mk{
  top:0;left:50%;transform:translateX(-50%);width:0;height:0;border-radius:0;background:none;box-shadow:none;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff
}
body.dt-b :is(#dtTl,#cmpTl) .tl-cursor .tl-cur-t{top:32px}
/* 하단 컨트롤 51 : 좌 편집 2(28) · 가운데 − 슬라이더 96 + · 우 버튼 34 */
body.dt-b :is(#dtTl,#cmpTl) .tl-foot{
  flex:0 0 51px;height:51px;box-sizing:border-box;margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:0;
  padding:8px 10px;border-top:1px solid var(--ln-subtle)
}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-l{width:142px;gap:16px}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-l .btn-icon{width:28px;height:28px;padding:2px}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-l .btn-icon .ic{width:22px;height:22px}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-zoom{gap:2px;margin:0}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-zoom .zb{width:24px;height:24px;padding:0}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-zoom .zb .ic{width:20px;height:20px}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-zoom .tl-zr{width:96px;height:2px;background:var(--ln-border)}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-zoom .tl-zr::-webkit-slider-thumb{
  width:10px;height:10px;background:#c4c4c4;border:1px solid #fff;box-shadow:4px 4px 5px rgba(0,0,0,.25)
}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-r{width:142px;justify-content:flex-end;gap:8px}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-r button{
  height:34px;min-width:64px;padding:0 8px;border-radius:4px;
  font-size:14px;font-weight:500;letter-spacing:-.28px
}

/* 비교 화면 툴바 (5184:100217) : 흐린 도구는 20% · 누를 수 없음 */
body.dt-b #cmpCtrl{height:42px;box-sizing:border-box;padding:0 10px;display:flex;align-items:center;background:var(--bg-1)}
.dt-ctrl .dim{opacity:.2;pointer-events:none}
.dt-ctrl .grp.r .tg{display:inline-flex;align-items:center;gap:8px}

/* 상세 영상 머리말 (5184:98967) : 80 dim · 16 여백 · 위치 12M + 일시 12R · 아이콘 24 간격 16 */
body.dt-b #dtVhead{height:80px;align-items:flex-start;gap:8px;padding:16px 16px 0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
body.dt-b #dtVhead .vh-obj{display:none}
body.dt-b #dtVhead #dtCam{font-size:12px;font-weight:500;line-height:16px;color:var(--tx-primary)}
body.dt-b #dtVhead #dtRange{font-family:inherit;font-size:12px;line-height:16px;color:var(--tx-secondary)}
body.dt-b #dtVhead .vh-ic{gap:16px}
body.dt-b #dtVhead .vh-ic .tb{width:24px;height:24px;border-radius:4px}
body.dt-b #dtVhead .vh-ic .ic{width:20px;height:20px}

/* 경로 비교 영상 (100188 · 100209 · 100230) */
.cmp-grid.n3{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}
body.dt-b .cmp-grid{gap:4px;background:var(--bg-1)}
body.dt-b .cmp-tile{background:var(--bg-2)}
.cmp-tile>.cmp-vid{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:16/9;max-height:100%}
.cmp-tile>.cmp-vid>img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-grid.n4 .cmp-tile>.cmp-vid{inset:0;transform:none;aspect-ratio:auto;max-height:none}
body.dt-b .cmp-tile>.cmp-head{
  height:80px;align-items:flex-start;gap:4px;padding:12px 12px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))
}
.cmp-head .cmp-lb{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:4px 6px;border-radius:4px;
  background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:500;line-height:16px;white-space:nowrap
}
.cmp-head .cmp-lb i{width:8px;height:8px;border-radius:2px;display:inline-block}
body.dt-b .cmp-head .nm{font-size:12px;font-weight:500;line-height:24px;color:var(--tx-primary);white-space:nowrap}
body.dt-b .cmp-head .tm{font-family:inherit;font-size:12px;line-height:24px;color:var(--tx-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.dt-b .cmp-head .vh-ic{gap:16px}
body.dt-b .cmp-head .vh-ic .tb{width:24px;height:24px}
body.dt-b .cmp-head .vh-ic .ic{width:20px;height:20px}
.cmp-strip{position:absolute;left:8px;right:8px;bottom:20px;display:flex;gap:8px;z-index:3;pointer-events:none}
.cmp-strip.r{justify-content:flex-end}
.cmp-strip button{
  position:relative;flex:0 1 128px;min-width:0;aspect-ratio:16/9;padding:0;pointer-events:auto;
  border:1px solid var(--ln-subtle);border-radius:4px;overflow:hidden;background:#000;
  box-shadow:0 4px 8px rgba(0,0,0,.25);cursor:pointer
}
.cmp-strip button:hover{border-color:var(--primary)}
.cmp-strip img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-strip em{
  position:absolute;left:0;right:0;bottom:0;height:20px;box-sizing:border-box;padding:4px 4px 0;
  background:linear-gradient(0deg,#000 72.5%,transparent);color:#fff;text-align:left;font-style:normal;
  font-size:10px;font-weight:500;letter-spacing:.2px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* 하단 우측 버튼이 두 줄로 꺾이던 문제 — 고정 폭 대신 최소 폭 */
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-l,
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-r{flex:1 1 0;width:auto;min-width:142px}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-zoom{flex:0 0 auto}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-r button{white-space:nowrap;flex:0 0 auto}
/* 타임라인 확대 시 가로 스크롤바 : 트랙 아래 10px 자리에 (트랙을 가리지 않게) */
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll{scrollbar-width:thin}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll::-webkit-scrollbar{height:10px}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll::-webkit-scrollbar-track{background:transparent}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border:2px solid transparent;background-clip:padding-box;border-radius:5px}

/* ── 영상 조작 바 : 설정 삭제 후 재배치 — 좌·우 도구가 같은 폭을 나눠 가져
   재생 조작은 항상 가운데, 오른쪽 도구는 우측 끝에 붙는다 ── */
body.dt-b :is(#dtCtrl,#cmpCtrl) .grp.l,
body.dt-b :is(#dtCtrl,#cmpCtrl) .grp.r{flex:1 1 0;min-width:0}
body.dt-b :is(#dtCtrl,#cmpCtrl) .grp.r{justify-content:flex-end;gap:8px}
body.dt-b :is(#dtCtrl,#cmpCtrl) .grp.c{flex:0 0 auto}

/* ── 영상 전체 보기 팝업 (시안 5223:57487) : 헤더 36 · 16:9 영상 · 재생 막대 6 · 조작 42 ── */
#mdVideo.modal.md-full{
  width:min(1440px,calc(100vw - 96px));height:auto;max-height:calc(100vh - 48px);
  border-radius:8px;overflow:hidden;padding:0;background:#1c1d23
}
#mdVideo .md-head{
  height:36px;box-sizing:border-box;padding:0 12px;align-items:center;
  background:var(--bg-2);border-bottom:1px solid var(--ln-subtle)
}
#mdVideo .md-head .hd-ic > .ic{display:none}
#mdVideo .md-head h3{font-size:14px;font-weight:500;letter-spacing:-.28px;line-height:1.3}
#mdVideo .md-head .md-x{width:20px;height:20px;padding:0}
#mdVideo .md-body,#mdVideo #vwBody{padding:0;overflow:hidden}
#mdVideo .vw{height:auto;background:#1c1d23}
#mdVideo .vw-stage{flex:0 0 auto;aspect-ratio:16/9;max-height:calc(100vh - 48px - 36px - 48px);background:#000}
#mdVideo .vw-stage > img{object-fit:contain}
#mdVideo .vw-head{
  position:absolute;left:0;right:0;top:0;height:80px;box-sizing:border-box;
  display:flex;align-items:flex-start;gap:8px;padding:16px 16px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))
}
#mdVideo .vw-head .nm{font-size:12px;font-weight:500;line-height:16px;color:var(--tx-primary)}
#mdVideo .vw-head .tm{font-family:inherit;font-size:12px;line-height:16px;color:var(--tx-secondary)}
#mdVideo .vw-head .vh-ic{gap:16px}
#mdVideo .vw-head .vh-ic .tb{width:24px;height:24px}
#mdVideo .vw-head .vh-ic .ic{width:20px;height:20px}
#mdVideo .vw-prog{position:relative;flex:0 0 6px;height:6px;background:var(--bg-2);cursor:pointer}
#mdVideo .vw-prog i{position:absolute;left:0;top:0;bottom:0}
#mdVideo .vw-prog .buf{background:var(--ln-subtle)}
#mdVideo .vw-prog .cur{background:var(--primary)}
#mdVideo .vw-ctrl{position:static;height:42px;box-sizing:border-box;padding:0 10px;display:flex;align-items:center;background:var(--bg-1)}
#mdVideo .vw-ctrl .grp.l,#mdVideo .vw-ctrl .grp.r{flex:1 1 0}
#mdVideo .vw-ctrl .grp.c{flex:0 0 auto}

/* 재생 시점 커서는 모든 트랙(썸네일·배지·호버된 클립)보다 위 */
body.dt-b :is(#dtTl,#cmpTl) .tl-cursor{z-index:30}
body.dt-b :is(#dtTl,#cmpTl) .tl-th,
body.dt-b :is(#dtTl,#cmpTl) .tl-th:hover,
body.dt-b :is(#dtTl,#cmpTl) .tl-th.on,
body.dt-b :is(#dtTl,#cmpTl) .tl-th.pass{z-index:auto}
/* 인물 칩 툴팁의 `인물등록 ›` */
.tl-tip .tt-reg{
  display:inline-flex;align-items:center;gap:2px;align-self:flex-start;margin-top:4px;padding:0;
  border:0;background:none;color:var(--tx-secondary);font-size:12px;font-weight:500;cursor:pointer
}
.tl-tip .tt-reg svg{width:14px;height:14px}
.tl-tip .tt-reg:hover{color:var(--tx-primary)}
/* 인물 칩 툴팁 글자 : 시안 12M 이름 · 12R 구간 (고정폭 글꼴 아님) */
.tl-tip .tt-i b{font-size:12px;font-weight:500;line-height:1.3}
.tl-tip .tt-i em{font-family:inherit;font-size:12px;line-height:1.3;color:var(--tx-tertiary)}

/* ── 커서 호버 미리보기 (시안 5223:57371) : 160×90 썸네일(2px 트랙색 테두리) + 시각 배지 ── */
.tl-cur-pop{position:fixed;z-index:120;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.tl-cur-pop[hidden]{display:none}
.tl-cur-pop .cp-img{
  display:block;width:160px;height:90px;border:2px solid var(--primary);border-radius:4px;overflow:hidden;
  background:rgba(0,0,0,.5);box-shadow:0 6px 16px rgba(0,0,0,.45)
}
.tl-cur-pop .cp-img img{width:100%;height:100%;object-fit:cover;display:block}
.tl-cur-pop .cp-t{
  display:flex;align-items:center;height:24px;box-sizing:border-box;padding:1px 4px;border-radius:4px;
  background:var(--bg-3);border:1px solid var(--ln-subtle);backdrop-filter:blur(1px);
  color:#fff;font-size:14px;font-weight:500;letter-spacing:-.28px;line-height:1.3;white-space:nowrap
}
/* 시각은 미리보기가 보여주므로 커서 옆 배지는 숨김 · 1px 선이라 잡기 쉽게 좌우 5px 여유 */
body.dt-b :is(#dtTl,#cmpTl) .tl-cursor .tl-cur-t{display:none}
body.dt-b :is(#dtTl,#cmpTl) .tl-cursor::after{content:'';position:absolute;top:-2px;bottom:0;left:-5px;right:-5px;cursor:ew-resize}
/* 이미지 160×90 은 테두리 안쪽 크기 (바깥 164×94) */
.tl-cur-pop .cp-img{box-sizing:content-box;width:160px;height:90px}
/* 편집 상태 취소·저장 등 하단 우측 버튼 글자 가운데 정렬 (저장이 왼쪽으로 쏠렸다) */
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-r button{display:inline-flex;align-items:center;justify-content:center;text-align:center}

/* ── 타임라인 가로 스크롤바 : 브라우저 막대 숨김 → 반투명 오버레이 막대 (자리 차지 없음) ── */
body.dt-b :is(#dtTl,#cmpTl){position:relative}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll{scrollbar-width:none}
body.dt-b :is(#dtTl,#cmpTl) .tl-scroll::-webkit-scrollbar{display:none;width:0;height:0}
body.dt-b :is(#dtTl,#cmpTl) > .tl-sb{
  position:absolute;left:90px;right:4px;bottom:53px;height:8px;z-index:35;cursor:pointer;
  opacity:.45;transition:opacity .2s
}
body.dt-b :is(#dtTl,#cmpTl) > .tl-sb[hidden]{display:none}
body.dt-b :is(#dtTl,#cmpTl):hover > .tl-sb,
body.dt-b :is(#dtTl,#cmpTl) > .tl-sb.act,
body.dt-b :is(#dtTl,#cmpTl) > .tl-sb.drag{opacity:1}
body.dt-b :is(#dtTl,#cmpTl) > .tl-sb > i{
  position:absolute;left:0;top:3px;height:3px;border-radius:3px;
  background:rgba(255,255,255,.28);transition:height .12s,top .12s,background .12s
}
body.dt-b :is(#dtTl,#cmpTl) > .tl-sb:hover > i,
body.dt-b :is(#dtTl,#cmpTl) > .tl-sb.drag > i{top:1px;height:6px;background:rgba(255,255,255,.45)}

/* ── 멀티 뷰 (사양 PTS_DTL_004_1) : 한 인물 · 2×2 · 칸 머리말(카메라명·일시·아이콘) ── */
body.dt-b #dtTools > [data-tool="multi"]{display:flex}
body.dt-b #dtTools > [data-tool="multi"].on{background:var(--primary);color:#fff;border-radius:4px}
body.dt-b #dtViewSel .select-menu > div.on::before{content:'✓';margin-right:6px}
body.dt-b #dtMulti{gap:2px;background:var(--bg-1)}
body.dt-b #dtMulti .mv-tile{position:relative;border:0;background:#000;overflow:hidden}
body.dt-b #dtMulti .mv-tile.empty{background:var(--bg-2)}
body.dt-b #dtMulti .mv-tile > img{width:100%;height:100%;object-fit:cover;display:block}
body.dt-b #dtMulti .mv-tile.now{box-shadow:inset 0 0 0 2px var(--primary)}
body.dt-b #dtMulti[data-type="이동 경로"] .mv-tile[data-ci]{cursor:pointer}
body.dt-b #dtMulti .mv-tile > .mv-head{
  position:absolute;left:0;right:0;top:0;height:56px;box-sizing:border-box;z-index:2;
  display:flex;align-items:flex-start;gap:8px;padding:10px 12px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))
}
body.dt-b #dtMulti .mv-head .nm{font-size:12px;font-weight:500;line-height:20px;color:var(--tx-primary);white-space:nowrap}
body.dt-b #dtMulti .mv-head .tm{font-family:inherit;font-size:12px;line-height:20px;color:var(--tx-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.dt-b #dtMulti .mv-head .mv-ic{margin-left:auto;display:flex;align-items:center;gap:10px}
body.dt-b #dtMulti .mv-head .mv-ic .tb{width:20px;height:20px;padding:0;border:0;background:none;color:rgba(255,255,255,.86);cursor:pointer;display:flex;align-items:center;justify-content:center}
body.dt-b #dtMulti .mv-head .mv-ic .tb:hover{color:#fff}
body.dt-b #dtMulti .mv-head .mv-ic .ic{width:16px;height:16px}
body.dt-b #dtMulti .mv-no{
  position:absolute;left:10px;bottom:10px;z-index:2;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;
  border:1px solid #fff;border-radius:10px;color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center
}
body.dt-b #dtMulti .mv-near,body.dt-b #dtMulti .mv-pop{display:none}
/* 전체보기 팝업의 2×2 (멀티 뷰에서 연 경우) */
#mdVideo .vw-stage.vw-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#000}
#mdVideo .vg-tile{position:relative;overflow:hidden;background:#000}
#mdVideo .vg-tile.empty{background:var(--bg-2)}
#mdVideo .vg-tile > img{width:100%;height:100%;object-fit:cover;display:block}

/* ── View Mode (시안 5223:57284 · 57527) : [1Viewer] [4Viewer = 아이콘 · 영상 유형 · ▾] ──
   선택된 쪽 = 살짝 떠 있는 어두운 바탕 + 파란 아이콘(·글자). 안 고른 쪽은 회색 */
body.dt-b .dt-ctrl .vm1{width:28px;height:28px;padding:2px;border-radius:4px;background:none;color:var(--tx-secondary)}
body.dt-b .dt-ctrl .vm1.on,
body.dt-b #dtTools > [data-tool="single"].on{background:var(--bg-3);color:var(--primary);border-radius:4px}
body.dt-b #dtTools > [data-tool="single"]:not(.on){background:none;color:var(--tx-secondary)}
body.dt-b .dt-ctrl .vm4{position:relative;display:flex;align-items:center;gap:2px;height:28px;padding:0 4px;border-radius:4px;flex:0 0 auto;width:auto}
body.dt-b .dt-ctrl .vm4.on{background:var(--bg-3)}
body.dt-b .dt-ctrl .vm4 .vm4-go{
  display:flex;align-items:center;gap:2px;height:28px;padding:0;border:0;background:none;
  color:var(--tx-secondary);font-size:12px;line-height:1.3;white-space:nowrap;cursor:pointer
}
body.dt-b .dt-ctrl .vm4 .vm4-go:hover{color:var(--tx-primary)}
body.dt-b .dt-ctrl .vm4.on .vm4-go,
body.dt-b .dt-ctrl .vm4 .vm4-go.on{color:var(--primary)}
body.dt-b .dt-ctrl .vm4 .vm4-dd{
  display:flex;align-items:center;justify-content:center;width:16px;height:28px;padding:0;border:0;background:none;
  color:var(--tx-secondary);cursor:pointer
}
body.dt-b .dt-ctrl .vm4 .vm4-dd:hover{color:var(--tx-primary)}
body.dt-b .dt-ctrl .vm4 .vm4-menu{
  position:absolute;right:0;bottom:calc(100% + 6px);z-index:60;min-width:124px;padding:4px 0;
  background:var(--bg-2);border:1px solid var(--ln-border);border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.45)
}
body.dt-b .dt-ctrl .vm4 .vm4-menu[hidden]{display:none}
body.dt-b .dt-ctrl .vm4 .vm4-menu > div{
  display:flex;align-items:center;height:30px;padding:0 12px 0 8px;font-size:12px;color:var(--tx-secondary);cursor:pointer;white-space:nowrap
}
body.dt-b .dt-ctrl .vm4 .vm4-menu > div::before{content:'';display:inline-block;width:18px}
body.dt-b .dt-ctrl .vm4 .vm4-menu > div.on{color:var(--tx-primary);background:rgba(255,255,255,.05)}
body.dt-b .dt-ctrl .vm4 .vm4-menu > div.on::before{content:'✓'}
body.dt-b .dt-ctrl .vm4 .vm4-menu > div:hover{background:rgba(255,255,255,.08)}
/* 멀티 뷰 칸 머리말 : ⋯ 하나 (시안 57527) */
body.dt-b #dtMulti .mv-head .mv-ic .mv-more{width:24px;height:20px}
body.dt-b #dtMulti .mv-tile .v-more-menu{top:34px;right:8px}
/* View Mode 아이콘 : 선택 = 채움 · 미선택 = 윤곽 (시안 1Viewer / 4Viewer) */
body.dt-b .dt-ctrl .vmi{width:24px;height:24px;display:block;flex:0 0 24px}
body.dt-b .dt-ctrl .vmi .f{display:none}
body.dt-b .dt-ctrl .vm1.on .vmi .f,
body.dt-b .dt-ctrl .vm4.on .vmi .f{display:inline}
body.dt-b .dt-ctrl .vm1.on .vmi .o,
body.dt-b .dt-ctrl .vm4.on .vmi .o{display:none}
body.dt-b .dt-ctrl .vmi .cut{fill:var(--bg-1)}
body.dt-b .dt-ctrl .vm1.on .vmi .cut,
body.dt-b .dt-ctrl .vm4.on .vmi .cut{fill:var(--bg-3)}
body.dt-b .dt-ctrl .vm1.on .vmi text,
body.dt-b .dt-ctrl .vm4.on .vmi text{fill:currentColor}

/* ── 경로 비교 인물 활성/비활성 (사양 4759:35111 · 시안 5223:58528) ── */
body.dt-b :is(#dtTl,#cmpTl) .tl-obj[title]{cursor:pointer}
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-obj{border-color:var(--ln-border)}
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-obj img{opacity:.35;filter:grayscale(.7)}
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-obj .nm{color:var(--tx-helper)}
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-obj .nm i{opacity:.35}
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-bar,
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-th{opacity:.25}
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-grip,
body.dt-b :is(#dtTl,#cmpTl) .tl-row.off .tl-del{display:none}
.cmp-tile.off::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.62);z-index:6;pointer-events:none}

/* ── 동시 포착 PIP (시안 5223:57285 · 58374 · 57679) ── */
#dtPipc{position:absolute;left:0;right:0;top:0;bottom:44px;pointer-events:none;z-index:7}
body.dt-b .dt-video.has-multi > #dtPipc{display:none}
.pipc{position:absolute;right:0;bottom:4px;z-index:5;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}
.pipc .pip-box{display:flex;flex-direction:column;gap:4px;padding:6px 10px;border:1px solid transparent;border-radius:4px;transition:background .15s,border-color .15s}
.pipc .pip-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;height:16px;opacity:0;transition:opacity .15s}
.pipc .pip-hd b{font-size:12px;font-weight:500;line-height:16px;color:#b8babf;white-space:nowrap}
.pipc .pip-x{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;background:none;color:#b8babf;cursor:pointer}
.pipc .pip-x:hover{color:#fff}
.pipc .pip-x svg{width:12px;height:12px}
.pipc:hover .pip-box,.pipc.hov .pip-box{background:rgba(0,0,0,.75);border-color:rgba(255,255,255,.16)}
.pipc:hover .pip-hd,.pipc.hov .pip-hd{opacity:1}
.pipc .pip-cams{display:flex;gap:8px}
.pipc .pip-cam{
  position:relative;flex:0 0 auto;width:128px;height:72px;box-sizing:content-box;padding:0;cursor:pointer;
  border:1px solid var(--ln-subtle);border-radius:4px;overflow:hidden;background:#000;box-shadow:0 4px 8px rgba(0,0,0,.25)
}
.pipc .pip-cam:hover{border-color:var(--primary)}
.pipc .pip-cam img{width:100%;height:100%;object-fit:cover;display:block}
.pipc .pip-cam em{
  position:absolute;left:0;right:0;bottom:0;height:20px;box-sizing:border-box;padding:4px 4px 0;
  background:linear-gradient(0deg,#000 72.5%,transparent);color:#fff;font-style:normal;text-align:left;
  font-size:10px;font-weight:500;letter-spacing:.2px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.pipc .pip-open{display:none}
.pipc.col{bottom:0}
.pipc.col .pip-box{display:none}
.pipc.col .pip-open{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:4px 0 0 0;cursor:pointer;
  background:rgba(0,0,0,.5);color:#b8babf;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap
}
.pipc.col .pip-open:hover{color:#fff;background:rgba(0,0,0,.7)}
.pipc.col .pip-open svg{width:12px;height:12px}

/* ── 영역 전환 : 오른쪽 좁은 칸의 영상 (사양 4759:35134 · 시안 5223:57627) ── */
/* 영상 검색·분석 도구 미제공 → 재생 조작만 가운데. 좁은 폭에서 도구가 겹치던 문제 */
body.dt-swap .dt-side .dt-ctrl .grp.l,
body.dt-swap .dt-side .dt-ctrl .grp.r{display:none}
body.dt-swap .dt-side .dt-ctrl .grp.c{flex:1 1 auto;min-width:0;justify-content:center}
/* 멀티 뷰 : 위에서 아래로 1×4 */
body.dt-swap .dt-side #dtMulti{grid-template-columns:1fr !important;grid-template-rows:repeat(4,1fr) !important}
body.dt-swap .dt-side #dtMulti .mv-tile:first-child{grid-column:auto}
/* 경로 비교 : 영상 묶음(칸 + 조작 바)이 오른쪽, 지도가 왼쪽 넓은 자리 */
body.dt-swap .dt-side > .cmp-stage{
  flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;background:var(--bg-1);border-radius:0
}
body.dt-swap #cmpMain > #dtMapSec{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:0}
body.dt-swap .dt-side .cmp-grid.n2{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr)}
body.dt-swap .dt-side .cmp-grid.n3{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
body.dt-swap .dt-side .cmp-grid.n4{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}
/* 3·4명은 칸이 낮아 영상이 칸을 채운다 (2명은 원본 비율) */
body.dt-swap .dt-side .cmp-grid:is(.n3,.n4) .cmp-tile > .cmp-vid{inset:0;top:0;transform:none;aspect-ratio:auto;max-height:none}
/* 영역 검색 도구는 id 규칙(#dtAreaTools)이 켜 두므로 id 로 끈다 */
body.dt-swap .dt-side #dtAreaTools,
body.dt-swap .dt-side #dtTools{display:none !important}
/* PIP 스위칭 직후 칸 테두리를 잠깐 강조 — 어느 칸이 바뀌었는지 */
.cmp-tile.pip-flash::before,.mv-tile.pip-flash::before{
  content:'';position:absolute;inset:0;z-index:8;pointer-events:none;border:2px solid var(--primary);
  animation:pipFlash .7s ease-out forwards
}
@keyframes pipFlash{from{opacity:1}to{opacity:0}}

/* 클립 길이 편집 : 잘려 나간 원래 구간 (흐린 썸네일 · 점선) */
body.dt-b :is(#dtTl,#cmpTl) .tl-ghost{
  position:absolute;top:8px;height:57px;box-sizing:border-box;overflow:hidden;pointer-events:none;
  border:1px dashed var(--bc,var(--primary));border-top:0;border-radius:0 0 2px 2px;opacity:.35
}
body.dt-b :is(#dtTl,#cmpTl) .tl-ghost .tl-film{position:absolute;inset:0;background-color:#000;background-repeat:repeat-x;background-size:101px 56px}
/* 3D · 적층 뷰 : 인물이 검출되지 않은 층은 50% */
.m3-floor.dim{opacity:.5}
.m3g-tag.dim{opacity:.5}

/* ── 이동경로 리스트 팝업 (시안 5223:58721) ── */
#pnlMovePath{width:auto !important;padding:11px 9px 9px;border-radius:4px;background:var(--bg-2);border:1px solid var(--ln-border);box-shadow:0 8px 20px rgba(0,0,0,.45)}
#pnlMovePath .flt-head{height:16px;margin-bottom:10px;padding:0}
#pnlMovePath .flt-head b{font-size:12px;font-weight:500;line-height:16px;color:var(--tx-primary)}
#pnlMovePath .flt-head .btn-icon{width:16px;height:16px;padding:0}
#pnlMovePath .flt-head .btn-icon .ic{width:14px;height:14px}
#pnlMovePath .mpl-cols{display:flex;align-items:flex-start;gap:20px;max-height:min(70vh,560px);overflow-y:auto}
#pnlMovePath .mpl-col{display:flex;flex-direction:column;width:160px;flex:0 0 160px}
#pnlMovePath .mpl-who{
  display:flex;align-items:center;gap:4px;height:27px;box-sizing:border-box;padding:0 4px 9px;margin-bottom:4px;
  border-bottom:1px solid var(--ln-subtle);font-size:12px;font-weight:500;line-height:16px;color:var(--tx-primary)
}
#pnlMovePath .mpl-who i{width:8px;height:8px;flex:0 0 8px;border-radius:2px}
#pnlMovePath .mpl-list{display:flex;flex-direction:column;gap:0;max-height:none;overflow:visible;padding:0}
#pnlMovePath .mpl-row{
  position:relative;display:flex;align-items:flex-start;gap:4px;width:100%;height:48px;box-sizing:border-box;
  padding:8px 4px;border:0;border-radius:4px;background:none;color:inherit;text-align:left;cursor:pointer
}
#pnlMovePath .mpl-row:hover{background:rgba(255,255,255,.05)}
#pnlMovePath .mpl-row.on{background:rgba(48,112,216,.16)}
#pnlMovePath .mpl-row .n{flex:0 0 16px;width:16px;height:16px;border-radius:50%;color:#fff;font-size:10px;font-weight:500;line-height:16px;text-align:center}
#pnlMovePath .mpl-row .bd{display:flex;flex-direction:column;gap:2px;min-width:0}
#pnlMovePath .mpl-row .nm{font-size:12px;font-weight:500;line-height:16px;color:var(--tx-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pnlMovePath .mpl-row .mt{display:flex;align-items:center;gap:4px;font-size:11px;line-height:14px;color:var(--tx-helper);white-space:nowrap}
#pnlMovePath .mpl-row .mt i{width:2px;height:2px;border-radius:50%;background:currentColor;flex:0 0 2px}
#pnlMovePath .mpl-sep{display:flex;align-items:center;height:14px;padding:0 4px;border-radius:2px;background:rgba(255,255,255,.07);font-size:10px;line-height:14px;color:var(--tx-helper)}
#pnlMovePath .mpl-sep::before,#pnlMovePath .mpl-sep::after{content:none}

/* ── 영역 전환 : 맵뷰 자리(오른쪽 칸) 영상 조작 바 — 재생 조작 정가운데 · 오른쪽 단일/멀티 뷰 전환 (2026-09-14 구두) ── */
body.dt-swap .dt-side :is(#dtCtrl,#cmpCtrl){display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:6px}
body.dt-swap .dt-side :is(#dtCtrl,#cmpCtrl) > .grp.c{grid-column:2;flex:none;justify-content:center}
body.dt-swap .dt-side #dtCtrl > #dtTools,
body.dt-swap .dt-side #cmpCtrl > .grp.r{grid-column:3;justify-self:end;display:flex !important;align-items:center;gap:4px;min-width:0}
body.dt-swap .dt-side #dtCtrl > #dtTools > :is([data-tool="heat"],[data-tool="path"],[data-tool="cctv"],.tb-div,#dtFull){display:none !important}
body.dt-swap .dt-side #cmpCtrl > .grp.r > .tb-div,
body.dt-swap .dt-side #cmpCtrl > .grp.r > .tg:first-child{display:none !important}
body.dt-swap .dt-side :is(#dtCtrl,#cmpCtrl) .vm4 .vm4-lb{display:none}

/* ── 검색 홈 와이어프레임 반영 (2026-09-14) ── */
/* 카메라 배지 ✕ · 많이 선택 안내 */
.acc-sum .acc-x{display:inline-block;margin-left:4px;font-style:normal;font-size:10px;line-height:1;opacity:.75;cursor:pointer}
.acc-sum .acc-x:hover{opacity:1}
.acc-sum .acc-warn{
  display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;margin-left:5px;border-radius:50%;
  border:1px solid currentColor;font-style:normal;font-size:8px;font-weight:700;line-height:1;vertical-align:middle;cursor:help
}
/* 등록 인물 : 머리말 대신 카드 ⋮ */
.person-box .person-head{display:none}
.pcard .thumb{position:relative}
.pcard .pc-more{
  position:absolute;right:3px;top:3px;width:18px;height:18px;padding:0;border:0;border-radius:3px;
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:18px;cursor:pointer;opacity:.85
}
.pcard .pc-more:hover{opacity:1;background:rgba(0,0,0,.75)}
/* 검출된 인물 : 개수 배지 · + */
#extCount{margin-left:6px}
.ext-item{position:relative}
.ext-item .ext-add{
  position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:11px;line-height:16px;text-align:center
}
.ext-item.on .ext-add{background:var(--primary)}

/* ── 검색 결과 (와이어프레임 4862:108451) ── */
.rh-more{
  display:inline-flex;align-items:center;gap:5px;height:22px;margin-left:10px;padding:0 8px;border-radius:4px;
  border:1px solid var(--primary);background:transparent;color:var(--primary);font-size:11.5px;cursor:pointer;vertical-align:middle
}
.rh-more:hover:not(:disabled){background:rgba(48,112,216,.12)}
.rh-more:disabled{opacity:.4;cursor:default}
.rh-info{
  position:relative;display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;
  border:1px solid currentColor;font-style:normal;font-size:8px;font-weight:700;line-height:1;cursor:help
}
.rh-info:hover::after{
  content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);z-index:50;
  padding:6px 10px;border-radius:4px;background:#000;color:#fff;font-size:11px;font-weight:400;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none
}
.res-gh{cursor:pointer;user-select:none}
.res-gh .rg-cv{font-style:normal;font-size:9px;color:var(--tx-helper);width:10px}
.res-group.closed > .grid{display:none}
.card .meta .tm .tm-cam{margin-right:8px;color:var(--tx-secondary)}

/* ── 히스토리 팝업 (와이어프레임 4862:108625) ── */
#historyBody .hs-row{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-bottom:4px;border:0;border-radius:4px;background:none;cursor:pointer}
#historyBody .hs-row:hover{background:rgba(255,255,255,.05)}
#historyBody .hs-row .hs-th{width:48px;height:48px;flex:0 0 48px;border-radius:4px;object-fit:cover}
#historyBody .hs-row .hs-bd{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
#historyBody .hs-row .hs-l1{display:flex;align-items:center;gap:8px;min-width:0}
#historyBody .hs-row .hs-q{flex:0 0 auto;font-size:13px;font-weight:600}
#historyBody .hs-row .hs-cam{font-size:12px;color:var(--tx-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#historyBody .hs-row .hs-pin{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;padding:1px 5px;border-radius:3px;background:rgba(48,112,216,.16);color:var(--primary);font-size:11px}
#historyBody .hs-row .hs-pin svg{width:11px;height:11px}
#historyBody .hs-row .hs-x{flex:0 0 auto}
#historyBody .hs-day + .hs-day{border-top:1px solid var(--ln-subtle);margin-top:8px;padding-top:10px}

/* ── 영상 선택 팝업 좌측 조건 (와이어프레임 4862:108462) ── */
.vs-filter{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:12px;border-radius:4px;background:rgba(255,255,255,.04)}
.vs-filter .vf-lb{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--tx-secondary)}
.vs-filter .vf-badge{font-style:normal;font-size:10.5px;padding:0 5px;border-radius:3px;border:1px solid var(--primary);color:var(--primary)}
.vs-filter .vf-go{margin-top:8px;width:100%;justify-content:center}
#extractedAcc #extCount:not([hidden]){display:inline-block}

/* ── 사양 v0.8 청크 A ── */
/* 전체보기는 조작 바 오른쪽 끝(2-6), 머리말은 북마크 · 비율 · 확대 */
body.dt-b #dtTools > #dtFull{display:inline-flex}
/* 배속 표시 : 영상 상단 중앙 */
.v-rate-badge{
  position:absolute;left:50%;top:52px;transform:translateX(-50%);z-index:8;display:inline-flex;align-items:center;gap:4px;
  height:24px;padding:0 8px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;pointer-events:none
}
.v-rate-badge[hidden]{display:none}
.v-rate-badge i{font-style:normal;font-size:9px;letter-spacing:-2px}
/* 인접 카메라 → 이전 영상 */
.vh-back{
  display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 8px 0 4px;margin-right:4px;border:1px solid rgba(255,255,255,.28);
  border-radius:4px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;cursor:pointer;pointer-events:auto
}
.vh-back[hidden]{display:none}
.vh-back svg{width:14px;height:14px}
.vh-back:hover{border-color:var(--primary)}
/* 확대 모드 : 좌측 하단 전체 썸네일 */
.v-zoom-mini{
  position:absolute;left:12px;bottom:56px;z-index:9;width:160px;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.5);
  border-radius:3px;overflow:hidden;background:#000;box-shadow:0 4px 12px rgba(0,0,0,.45);cursor:move
}
.v-zoom-mini img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;pointer-events:none}
.v-zoom-mini .vzm-view{position:absolute;border:2px solid var(--primary);background:rgba(48,112,216,.18);box-sizing:border-box;pointer-events:none}
.cmp-tile .v-zoom-mini,.mv-tile .v-zoom-mini{bottom:12px;width:110px}
[data-vzoom].on{color:var(--primary)}
.dt-ctrl.zoom-mode #dtAreaTools{opacity:.35;pointer-events:none}
/* 토스트 : 체크 아이콘 + 닫기 */
.toast{display:flex;align-items:center;gap:10px;min-width:320px;padding:10px 12px 10px 14px;font-size:13px}
.toast[hidden]{display:none}
.toast .tt-ok{display:inline-flex;width:18px;height:18px;color:var(--primary)}
.toast .tt-ok svg{width:18px;height:18px}
.toast span{flex:1}
.toast .tt-x{border:0;background:none;color:var(--tx-helper);font-size:12px;cursor:pointer;padding:0 2px}
.toast .tt-x:hover{color:var(--tx-primary)}
/* 탭 닫기 alert : 다시 묻지 않기 */
#alDesc .al-noask{display:inline-flex;margin-top:14px;font-size:12px;color:var(--tx-secondary)}

/* ── 사양 v0.8 청크 B : 멀티 뷰 드롭다운 · 분할 ── */
body.dt-b .dt-ctrl .vm4 .vm4-menu{min-width:176px;overflow:visible}
body.dt-b .dt-ctrl .vm4 .vm4-menu > .vm4-row{position:relative;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 12px}
body.dt-b .dt-ctrl .vm4 .vm4-menu > .vm4-row::before{content:none}
body.dt-b .dt-ctrl .vm4 .vm4-row .k{color:var(--tx-secondary)}
body.dt-b .dt-ctrl .vm4 .vm4-row b{margin-left:auto;font-weight:400;color:var(--tx-primary)}
body.dt-b .dt-ctrl .vm4 .vm4-row .ar{font-style:normal;color:var(--tx-helper)}
body.dt-b .dt-ctrl .vm4 .vm4-row:hover,body.dt-b .dt-ctrl .vm4 .vm4-row.open{background:rgba(255,255,255,.07)}
.vm4-sub{
  display:none;position:absolute;left:calc(100% + 4px);bottom:0;min-width:120px;padding:4px 0;border-radius:4px;
  background:var(--bg-2);border:1px solid var(--ln-border);box-shadow:0 8px 20px rgba(0,0,0,.45)
}
.vm4-row:hover > .vm4-sub,.vm4-row.open > .vm4-sub{display:block}
.vm4-sub > div{display:flex;align-items:center;height:30px;padding:0 12px 0 8px;font-size:12px;color:var(--tx-secondary);cursor:pointer;white-space:nowrap}
.vm4-sub > div::before{content:'';display:inline-block;width:18px}
.vm4-sub > div.on{color:var(--tx-primary)}
.vm4-sub > div.on::before{content:'✓'}
.vm4-sub > div:hover{background:rgba(255,255,255,.08)}
/* 분할 : 2 = 좌우 · 3 = 3열 · 4 = 2×2 */
.dt-multi[data-n="3"]{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}
.dt-multi[data-n="3"] .mv-tile:first-child{grid-column:auto}
/* 영역 전환(좁은 칸) : 분할 수만큼 위아래 */
body.dt-swap .dt-side #dtMulti[data-n="2"]{grid-template-rows:repeat(2,1fr) !important}
body.dt-swap .dt-side #dtMulti[data-n="3"]{grid-template-rows:repeat(3,1fr) !important}
body.dt-swap .dt-side #dtMulti[data-n="4"]{grid-template-rows:repeat(4,1fr) !important}

/* ── 사양 v0.8 청크 C : 타임라인 ── */
/* 클립 카드 위치명 (3-4) */
body.dt-b :is(#dtTl,#cmpTl) .tl-th .tl-loc{
  position:absolute;left:0;right:0;bottom:0;z-index:2;height:18px;box-sizing:border-box;padding:3px 4px 0 22px;
  background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff;font-size:10px;line-height:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none
}
body.dt-b :is(#dtTl,#cmpTl) .tl-th.narrow .tl-loc,
body.dt-b :is(#dtTl,#cmpTl) .tl-th.narrow .tl-more{display:none}
/* 이미지까지 생략하는 건 표기 자체가 불가능한 아주 좁은 구간만 (썸네일 유지 지시) */
body.dt-b :is(#dtTl,#cmpTl) .tl-th.tiny .tl-film{background-image:none !important;background:var(--bc,var(--primary));opacity:.55}
body.dt-b :is(#dtTl,#cmpTl) .tl-th.tiny .tl-film::after{display:none}
body.dt-b :is(#dtTl,#cmpTl) .tl-th.tiny .tl-n{display:none}
/* 칩 : 이름 영역 호버 시 ✕ */
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .nm{position:relative}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .nm em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .nm .rm,
body.dt-b :is(#dtTl,#cmpTl) .tl-obj:hover .nm .rm{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);width:14px;height:14px;padding:0;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;opacity:0;cursor:pointer
}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .nm:hover .rm{opacity:1}
body.dt-b :is(#dtTl,#cmpTl) .tl-obj .nm:hover em{padding-right:14px}
body.dt-b :is(#dtTl,#cmpTl) .tl-foot .tf-r button:disabled{opacity:.4;cursor:default}

/* ── 사양 v0.8 청크 D : 경로 비교 칸 — 현재 시점에 영상이 없는 인물 ── */
.cmp-tile.noclip{background:#000}
.cmp-tile.noclip > .cmp-vid > img,.cmp-tile.noclip > .cmp-vid > .cmp-box,.cmp-tile.noclip .pipc{visibility:hidden}
/* 멀티 뷰 칸 기본 = 원본 비율(레터박스) — 자르기(cover)로 들어가던 문제 */
body.dt-b #dtMulti .mv-tile > img{object-fit:contain;background:#000}

/* ── 사양 v0.8 청크 E : 지도 ── */
body.dt-b .dt-sec-head .dt-bldg .select-btn{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zone-nav{order:1;display:inline-flex;gap:4px;margin-right:auto;margin-left:6px}
body.dt-b .dt-sec-head .dt-bldg{margin:0}
.zone-nav .zn-btn{
  width:28px;height:28px;padding:0;border:1px solid var(--ln-border);border-radius:4px;background:var(--bg-2);
  color:var(--tx-primary);font-size:14px;cursor:pointer
}
.zone-nav .zn-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.zone-nav .zn-btn:disabled{opacity:.35;cursor:default}
.zone-menu{position:fixed;z-index:140;display:flex;flex-direction:column;padding:4px 0;min-width:190px;border-radius:4px;background:var(--bg-2);border:1px solid var(--ln-border);box-shadow:0 8px 20px rgba(0,0,0,.45)}
.zone-menu button{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;background:none;color:var(--tx-primary);font-size:12px;cursor:pointer;text-align:left}
.zone-menu button i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.zone-menu button em{font-style:normal;color:var(--primary);margin-left:4px}
.zone-menu button:disabled{opacity:.4;cursor:default}
.zone-menu button:hover:not(:disabled){background:rgba(255,255,255,.07)}
.dt-map .map-zone{display:none !important}
/* 카메라 아이콘 3유형 */
.map-cone.play b{background:var(--primary);width:10px;height:10px}
.map-cone.play i{border-bottom-color:rgba(0,140,255,.62)}
.map-cone.hit b{background:#6b7280}
.map-cone.miss b{background:#9ca3af}
.map-cone.miss i{border-bottom-color:rgba(0,140,255,.2)}
.zm-cl{min-width:26px;width:auto !important;padding:0 6px;white-space:nowrap}

/* ── 사양 v0.8 청크 F : 영역 검색 · 가상펜스 ── */
.area-obj{position:absolute;border:2px solid var(--primary);background:rgba(48,112,216,.1);pointer-events:none;z-index:4}
#ovArea .fence-pt{display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;width:18px !important;height:18px !important}
.area-arrow{
  position:absolute;z-index:6;width:40px;height:20px;padding:0;border:0;border-radius:10px;background:rgba(0,0,0,.55);
  color:#39a0ff;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center
}
.area-arrow svg{width:26px;height:13px}
.area-bar .ab-dir.on{background:var(--primary);border-color:var(--primary);color:#fff}
.md-area .as-card{position:relative}
.md-area .as-card .as-tag{position:absolute;left:4px;top:4px;padding:0 5px;border-radius:3px;background:var(--primary);color:#fff;font-style:normal;font-size:10px;line-height:16px}
.md-area .as-empty{padding:40px 0;text-align:center;color:var(--tx-helper);font-size:12px}
.md-area.fence .fs-tools{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--tx-secondary)}
.md-area.fence .fs-tools .fs-dir{margin-left:auto;color:var(--tx-helper)}
.md-area.fence .fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.md-area.fence .fs-card{position:relative;display:flex;flex-direction:column;padding:0;border:1px solid var(--ln-border);border-radius:4px;background:var(--bg-2);overflow:hidden;cursor:pointer;text-align:left;color:inherit}
.md-area.fence .fs-card.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.md-area.fence .fs-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.md-area.fence .fs-card .sim{position:absolute;right:4px;top:4px}
.md-area.fence .fs-card .fs-meta{display:flex;flex-direction:column;gap:1px;padding:5px 7px;font-size:11px}
.md-area.fence .fs-card .fs-meta b{font-weight:500;color:var(--tx-primary)}
.md-area.fence .fs-card .fs-meta em,.md-area.fence .fs-card .fs-meta i{font-style:normal;color:var(--tx-helper);font-size:10.5px}

/* ── 영상 레이어 (2026-09-14) ── */
img.has-vid{opacity:0 !important}
video.vid-layer{position:absolute;display:block;pointer-events:none;background:#000;margin:0;padding:0}
#dtVideo > video.vid-layer{z-index:0}
/* 영상에서 잘라낸 인물 썸네일 : 가로 카드에서도 머리가 잘리지 않게 위쪽 기준 */
img[src*="video/p/"]{object-position:50% 18%}
/* 경로 비교 : 커서 시각에 구간이 없는 칸은 영상 레이어(미리 보이던 썸네일)까지 숨긴다 */
.cmp-tile.noclip video.vid-layer{visibility:hidden !important}
/* 경로 비교 : 인물별 현재 위치 마커 — 칩으로 끈 인물은 흐리게 */
.map-now.off{opacity:.3}
/* 경로 비교 멀티 뷰 : 비교 칸 자리에 기준 인물의 멀티 뷰를 채운다 */
.cmp-stage > #dtMulti.in-cmp{position:relative;inset:auto;flex:1 1 auto;min-height:0;width:100%}

/* ── 맵 뷰 층 이동 드롭다운 (사양 v0.8 PTS_DTL_001_5 4-1 · 4876:149741) ──
   메뉴가 동 선택 버튼이 아니라 지도 영역 기준으로 잡혀 화면 아래쪽에 넓게 열리던 문제 수정 */
body.dt-b .dt-sec-head.map-ctl #dtBldg{position:relative}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-btn{gap:4px;justify-content:flex-start}
#dtBldg .select-btn .bl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dtBldg .select-btn .bl-n{font-style:normal;color:var(--tx-secondary);flex:0 0 auto;font-size:13px}
#dtBldg .select-btn .caret{margin-left:auto;transition:transform .15s}
body.dt-b .dt-sec-head.map-ctl #dtBldg.open .select-btn{border-color:var(--ln-border);color:var(--tx-primary)}
body.dt-b .dt-sec-head.map-ctl #dtBldg.open .select-btn .caret{transform:rotate(-90deg);color:var(--tx-primary)}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu{
  left:0;right:auto;top:calc(100% + 4px);min-width:150px;width:max-content;max-width:280px;
  padding:4px;box-sizing:border-box;background:var(--bg-2, #1c222d);border:1px solid var(--ln-border);border-radius:4px;z-index:60
}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu div{
  position:relative;display:flex;align-items:center;gap:4px;height:28px;padding:0 10px 0 28px;margin:0 0 8px;
  border-radius:3px;font-size:14px;font-weight:400;letter-spacing:-.28px;color:var(--tx-primary);cursor:pointer
}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu div:last-child{margin-bottom:0}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu div:hover{background:rgba(255,255,255,.06)}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu div.on{background:rgba(255,255,255,.1);color:var(--tx-primary)}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu div.on::before{
  content:'';position:absolute;left:8px;top:6px;width:16px;height:16px;
  background:center/16px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu div em{font-style:normal;color:var(--tx-secondary)}
body.dt-b .dt-sec-head.map-ctl #dtBldg .select-menu div.disabled{opacity:.4;pointer-events:none}
/* 구역 이동 버튼 툴팁 : `이전/다음 구역 (구역명)` 파란 말풍선 */
.zone-nav .zn-btn{position:relative}
.zone-nav .zn-btn[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:0;top:calc(100% + 4px);z-index:61;pointer-events:none;
  padding:4px;border-radius:3px;background:var(--primary, #2f7de1);color:#fff;font-size:11px;line-height:13px;white-space:nowrap
}