/* ══ CCTV 배치도 (관리 › CCTV) ══════════════════════════════════════════════
   원본: claude.ai "하나링크 4층 CCTV 배치도" v7 (docs/cctv-migration/reference.html, 로컬 전용).
   색은 index.html 변수(--g50~800 · --blue · --bg-card)를 따르고, 녹화기 4색만 원본 그대로.
   index.html 의 공용 클래스(.chip · .item · .tag …)와 섞이지 않게 모든 클래스에 cc- 를 붙인다. */
.cctv{
  --cc-paper:#fff; --cc-panel:#fff; --cc-ink:var(--g800); --cc-muted:var(--g500);
  --cc-line:var(--g700); --cc-furn:var(--g200); --cc-furn-ink:var(--g600); --cc-rule:var(--g200);
  --cc-hi:var(--blue);
  --cc-n1:#d23c33; --cc-n2:#2563d6; --cc-n3:#15935a; --cc-caps:#d9800b;
  --cc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cc-ink); font-size:13px; line-height:1.5;
}
body[data-theme="dark"] .cctv{
  --cc-paper:var(--bg-card); --cc-panel:var(--bg-card);
  --cc-n1:#ff6b61; --cc-n2:#5f95ff; --cc-n3:#3cc98a; --cc-caps:#ffaa3b;
}
.cctv [hidden]{display:none!important}
.cc-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:8px}
.cc-head{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;min-width:0}
.cc-sub{color:var(--cc-muted);font-size:12px}
.cc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--cc-muted)}
.cc-legend span{display:inline-flex;align-items:center;gap:6px}
.cc-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.cc-legend .cc-zone-i{border-radius:50%;border:1.5px dashed var(--cc-muted);background:transparent;width:14px;height:10px}
/* 3칸: [왼쪽 상세] [가운데 도면] [오른쪽 검색 · 번호 목록]
   양옆 칸은 폭을 고정하고, 도면 칸이 남는 폭을 전부 쓴다 — 확대해서 볼 일이 많아 넓을수록 좋다(그림은 칸 가운데) */
.cc-wrap{display:flex;gap:10px;height:calc(100vh - var(--th) - 62px);min-height:560px}
.cc-mapbox{position:relative;background:var(--cc-paper);border:.5px solid var(--cc-rule);border-radius:var(--rl);overflow:hidden;
  flex:1 1 auto;min-width:320px;height:100%;order:2}
.cc-map{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none}
.cc-map.cc-panning{cursor:grabbing}
.cc-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:2}
.cc-tools button,.cc-btn{font-size:12px;border:.5px solid var(--cc-rule);background:var(--cc-panel);color:var(--cc-ink);border-radius:var(--r);padding:5px 10px;cursor:pointer;font-weight:600}
.cc-tools button{width:34px;height:34px;padding:0;font-size:16px}
.cc-tools button.cc-wide{width:auto;padding:0 10px;font-size:12px}
.cc-btn:hover,.cc-tools button:hover{border-color:var(--cc-hi)}
.cctv button:focus-visible,.cctv input:focus-visible{outline:2px solid var(--cc-hi);outline-offset:2px}
.cc-aside{background:var(--cc-panel);border:.5px solid var(--cc-rule);border-radius:var(--rl);display:flex;flex-direction:column;min-height:0;min-width:0}
.cc-right{flex:0 0 500px;order:3}   /* 번호(54px)가 한 줄에 8개 들어가는 가장 좁은 폭 — 남는 폭은 도면 칸으로 */
/* 상세 카드 · 장소 검색 결과 — 도면 왼쪽 위에 떠 있는 창. 비어 있으면(선택 전) 안 보인다 */
.cc-float{position:absolute;left:10px;top:10px;z-index:3;width:330px;max-width:calc(100% - 20px);max-height:calc(100% - 20px);overflow:auto;
  border-radius:9px;box-shadow:0 8px 24px rgba(15,23,42,.18)}
.cc-float:empty{display:none}
.cc-float .cc-detail,.cc-float .cc-pcard{background:var(--cc-panel)}
.cc-x{margin-left:auto;width:26px;height:26px;border:.5px solid var(--cc-rule);border-radius:6px;background:var(--cc-panel);color:var(--cc-muted);font-size:16px;line-height:1;cursor:pointer;flex:none}
.cc-x:hover{color:var(--cc-ink);border-color:var(--cc-hi)}
.cc-ptop{padding:12px;border-bottom:.5px solid var(--cc-rule);display:grid;gap:10px}
.cc-q{width:100%;font-size:14px;padding:8px 12px;border:.5px solid var(--g300);border-radius:var(--r);background:var(--cc-paper);color:var(--cc-ink)}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px}
.cc-chip{font-size:12px;border:1.5px solid var(--c,var(--cc-rule));color:var(--cc-ink);background:transparent;border-radius:999px;padding:3px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cc-chip b{font-family:var(--cc-mono);font-size:11px;color:var(--cc-muted);font-weight:500}
.cc-chip[aria-pressed="true"]{background:var(--c);color:#fff}
.cc-chip[aria-pressed="true"] b{color:#fff;opacity:.85}
.cc-chip.cc-all{--c:var(--cc-ink);font-weight:600}
.cc-chip.cc-all[aria-pressed="true"]{background:var(--cc-ink);color:var(--cc-paper)}
.cc-chip.cc-all[aria-pressed="true"] b{color:var(--cc-paper)}
.cc-toggles{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--cc-muted)}
.cc-toggles label{display:inline-flex;gap:5px;align-items:center;cursor:pointer}
.cc-pbody{overflow:auto;padding:12px;display:grid;gap:12px;align-content:start;min-width:0}
.cc-groups{display:grid;gap:12px;align-content:start;min-width:0}
#cctv-detail:empty{display:none}
.cc-detail{border:1.5px solid var(--c,var(--cc-rule));border-radius:9px;padding:12px;display:grid;gap:8px}
.cc-row1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-camno{font-family:var(--cc-mono);font-size:24px;font-weight:700;color:var(--c)}
.cc-tag{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:5px;background:var(--c);color:#fff}
.cc-tag.cc-ghost{background:transparent;color:var(--cc-muted);border:.5px solid var(--cc-rule)}
.cc-dl{margin:0;display:grid;grid-template-columns:64px 1fr;gap:4px 10px;font-size:12.5px}
.cc-dl dt{color:var(--cc-muted)}
.cc-dl dd{margin:0;min-width:0}
.cc-warn{font-size:12px;color:var(--cc-caps);font-weight:500}
.cc-sample{font-size:11.5px;color:var(--cc-muted)}
/* 녹화기 바로가기 · 시간 맞추기 주의사항 */
.cc-nvrbar{display:grid;gap:8px}
.cc-nvrlinks{display:flex;flex-wrap:wrap;gap:6px}
.cc-nvrlink{font-size:12px;font-weight:600;text-decoration:none;color:var(--cc-ink);border:1.5px solid var(--c);border-radius:var(--r);padding:3px 9px;background:var(--cc-panel)}
.cc-nvrlink:hover{background:var(--c);color:#fff}
a.cc-btn.cc-nvrbtn{display:inline-flex;text-decoration:none;border-color:var(--c);color:var(--cc-ink)}
a.cc-btn.cc-nvrbtn:hover{background:var(--c);color:#fff}
.cc-notice{font-size:11.5px;line-height:1.6;color:var(--g700);background:var(--amber-l);border:.5px solid var(--amber);border-radius:var(--r);padding:7px 10px}
.cc-notice > b:first-child{display:block;color:var(--amber);font-size:12px;margin-bottom:2px}
.cc-empty{color:var(--cc-muted);font-size:12.5px;border:1px dashed var(--cc-rule);border-radius:9px;padding:12px}
.cc-grp h3{font-size:12px;letter-spacing:.06em;color:var(--cc-muted);margin:0 0 6px;display:flex;align-items:center;gap:6px;font-weight:600}
.cc-grp h3 i{width:9px;height:9px;border-radius:50%}
.cc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px}
.cc-item{font-family:var(--cc-mono);font-size:12.5px;font-weight:700;padding:6px 0;text-align:center;border-radius:6px;border:.5px solid var(--cc-rule);background:var(--cc-paper);color:var(--cc-ink);cursor:pointer;position:relative}
.cc-item.cc-zone{border-style:dashed}
.cc-item:hover{border-color:var(--c)}
.cc-item[aria-current="true"]{background:var(--c);color:#fff;border-color:var(--c)}
.cc-item .cc-qm{position:absolute;top:1px;right:4px;font-size:9px;color:var(--cc-caps)}
.cc-item .cc-pi{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}
.cc-item .cc-fx{position:absolute;top:0;left:4px;font-size:9px;color:var(--cc-muted)}
.cc-item.cc-broken{text-decoration:line-through;color:var(--cc-muted)}
/* 화면 사진 */
.cc-shot{position:relative;border-radius:7px;overflow:hidden;background:var(--cc-furn);aspect-ratio:16/9;display:grid;place-items:center;color:var(--cc-muted);font-size:12px;cursor:zoom-in;border:0;padding:0;width:100%}
.cc-shot img{width:100%;height:100%;object-fit:cover;display:block}
.cc-shot.cc-none{cursor:default;border:1px dashed var(--cc-rule);background:transparent}
.cc-shot small{position:absolute;right:6px;bottom:5px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;padding:1px 6px;border-radius:4px}
.cc-nm{font-size:14px;font-weight:600;margin:0}
.cc-peek{position:fixed;z-index:8000;width:280px;background:var(--cc-panel);border:.5px solid var(--cc-rule);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px;pointer-events:none;display:grid;gap:6px}
.cc-peek .cc-ph{aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--cc-furn);display:grid;place-items:center;color:var(--cc-muted);font-size:12px}
.cc-peek .cc-ph img{width:100%;height:100%;object-fit:cover}
.cc-peek .cc-t{display:flex;gap:8px;align-items:baseline;font-size:12px}
.cc-peek .cc-t b{font-family:var(--cc-mono);font-size:14px}
.cc-lightbox{position:fixed;inset:0;z-index:9000;background:rgba(10,14,20,.86);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.cc-lightbox figure{margin:0;display:grid;gap:8px;max-width:min(1100px,100%)}
.cc-lightbox img{max-width:100%;max-height:80vh;border-radius:8px;display:block}
.cc-lightbox figcaption{color:#fff;font-size:14px}
/* 장소 검색 결과 */
.cc-pcard{border:1.5px solid var(--cc-hi);border-radius:9px;padding:12px;display:grid;gap:10px}
.cc-pcard h4{margin:0;font-size:14px}
.cc-pcard h4 b{color:var(--cc-hi);font-family:var(--cc-mono)}
.cc-pcard .cc-sub2{font-size:12px;color:var(--cc-muted);margin:-4px 0 0}
.cc-pcard .cc-lab{font-size:12px;font-weight:600;color:var(--cc-muted);margin-bottom:4px}
.cc-pchips{display:flex;flex-wrap:wrap;gap:5px}
.cc-pchip{font-size:12px;border:.5px solid var(--cc-rule);background:var(--cc-paper);color:var(--cc-ink);border-radius:999px;padding:2px 9px;cursor:pointer}
.cc-pchip[aria-pressed="true"]{background:var(--cc-hi);border-color:var(--cc-hi);color:#fff}
/* SVG 도면 */
.cc-seat rect{fill:var(--cc-paper);stroke:var(--cc-muted);stroke-width:.6}
.cc-seat text{font-family:var(--cc-mono);font-size:6px;fill:var(--cc-muted);text-anchor:middle;dominant-baseline:middle}
.cc-offcam{cursor:pointer}
.cc-offcam rect{fill:var(--cc-paper);stroke:var(--cc-caps);stroke-width:.9}
.cc-offcam circle{fill:var(--cc-caps)}
.cc-offcam text{font-size:8px;font-weight:600;fill:var(--cc-ink)}
.cc-offcam:hover rect,.cc-offcam.cc-sel rect{fill:color-mix(in srgb,var(--cc-caps) 18%,var(--cc-paper));stroke-width:1.4}
.cc-wall{fill:none;stroke:var(--cc-line);stroke-width:2.4;stroke-linecap:square}
.cc-wall.cc-thin{stroke-width:1.2}
.cc-f{fill:var(--cc-furn);stroke:var(--cc-furn-ink);stroke-width:.7}
.cc-f.cc-shelf{fill:color-mix(in srgb,var(--cc-furn) 70%,var(--cc-furn-ink) 12%)}
.cc-flabel{font-size:7px;fill:var(--cc-furn-ink);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.cc-flabel.cc-big{font-size:9px;font-weight:600}
.cc-room{font-size:9px;fill:var(--cc-muted);font-weight:600;text-anchor:middle;pointer-events:none}
.cc-fov{opacity:.16;transition:opacity .2s}
.cc-cam{cursor:pointer}
.cc-cam .cc-dot{stroke:var(--cc-paper);stroke-width:1.4}
.cc-cam .cc-lbl{font-family:var(--cc-mono);font-size:8.4px;font-weight:700;paint-order:stroke;stroke:var(--cc-paper);stroke-width:2.4px;stroke-linejoin:round;pointer-events:none}
.cc-zonecam ellipse.cc-z{fill-opacity:.07;stroke-dasharray:3 2.2;stroke-width:1.3}
.cc-zonecam .cc-zl{font-family:var(--cc-mono);font-size:9px;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:var(--cc-paper);stroke-width:2.6px}
svg.cc-has-sel .cc-cam:not(.cc-sel),svg.cc-has-sel .cc-zonecam:not(.cc-sel){opacity:.22}
svg .cc-cam.cc-out,svg .cc-zonecam.cc-out{opacity:.07!important}
svg .cc-cam.cc-out .cc-fov{display:none}
.cc-place-hi{fill:var(--cc-hi);fill-opacity:.16;stroke:var(--cc-hi);stroke-width:1.6;stroke-dasharray:4 2}
.cc-place-lbl{font-size:8px;font-weight:700;fill:var(--cc-hi);text-anchor:middle;paint-order:stroke;stroke:var(--cc-paper);stroke-width:2.4px}
.cc-cam.cc-sel .cc-fov{opacity:.38}
.cc-zonecam.cc-sel ellipse.cc-z{fill-opacity:.22;stroke-dasharray:none;stroke-width:2}
.cc-pulse{fill:none;stroke-width:1.6;animation:ccPulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ccPulse{from{transform:scale(.6);opacity:.9}to{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.cc-pulse{animation:none;opacity:.6}}
.cc-hide-fov .cc-fov{display:none}
.cc-hide-lbl .cc-lbl{display:none}
.cc-msg{padding:28px;text-align:center;color:var(--cc-muted);font-size:13px;line-height:1.8}
/* 탭 · 열람 기록 (P4) */
.cc-tabs{display:flex;gap:6px}
.cc-tab{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;border:.5px solid var(--g200);background:var(--cc-panel);color:var(--g600);cursor:pointer}
.cc-tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
body[data-theme="dark"] .cc-tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue)}
.cc-logcard{margin-bottom:0}
.cc-logcard .ch .cc-sub{margin-left:8px}
.cc-mono{font-family:var(--cc-mono);font-size:11.5px}
/* 관리자 편집 (P3) */
.cc-editflag{position:absolute;left:10px;bottom:10px;background:var(--cc-caps);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;z-index:2}
svg.cc-editing .cc-cam{cursor:move}
.cc-uprow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cc-uprow label.cc-btn{display:inline-flex;align-items:center}
.cc-busy{color:var(--cc-muted);font-size:12px}
.cctv details summary{cursor:pointer;font-size:12px;color:var(--cc-muted);font-weight:600}
.cc-editbox{display:grid;gap:8px;margin-top:8px;font-size:12px}
.cc-editbox .cc-btns{display:flex;flex-wrap:wrap;gap:6px}
.cc-editbox input[type=range]{width:100%}
.cc-btn:disabled{opacity:.45;cursor:default}
/* 서버 확인 (미수금 서버 확인 화면과 같은 모양) */
.cc-gate{max-width:560px;margin:24px auto;padding:22px 24px}
.cc-gate-t{font-size:15px;font-weight:800;margin-bottom:6px;color:var(--g800)}
.cc-gate-d{font-size:12px;line-height:1.7;color:var(--g600)}
.cc-gate-err{margin-top:8px;font-size:12px;color:var(--red);min-height:1em}
.cc-gate-note{margin-top:10px;font-size:11.5px;font-weight:700;color:var(--amber)}
/* 화면이 좁아 3칸이 안 들어가면: 도면 + 오른쪽(검색 · 번호)을 위에, 상세 칸을 그 아래 한 줄로 */
/* 노트북 화면(1500px 이하)은 오른쪽 칸을 줄여 도면 칸 폭을 지킨다 */
@media (max-width:1500px){
  .cc-right{flex-basis:360px}
  .cc-float{width:300px}
}
@media (max-width:860px){
  .cc-wrap{flex-direction:column;height:auto}
  .cc-mapbox{height:78vh;min-height:480px;width:100%;flex:none}
  .cc-right{min-width:0;flex:none}   /* 세로로 쌓일 때 flex-basis 를 쓰면 높이가 접힌다 */
  .cc-float{max-height:60%}
}