:root{
  --bg:#0d1117; --panel:#161b22; --card:#0f141b; --raised:#1b222c; --input-bg:#0d1117; --btn2:#21262d;
  --border:#2b3340; --fg:#e6edf3; --muted:#8b949e; --hover:rgba(255,255,255,.08); --shadow:rgba(0,0,0,.5);
  --accent:#3b82f6; --green:#22c55e; --red:#ef4444; --gray:#6b7280; --amber:#f59e0b;
  --purple:#8b5cf6; --teal:#14b8a6;
}
:root[data-theme="light"]{
  --bg:#eef1f5; --panel:#ffffff; --card:#ffffff; --raised:#f5f7fa; --input-bg:#ffffff; --btn2:#eceff3;
  --border:#e1e5ec; --fg:#1f2937; --muted:#6b7280; --hover:rgba(0,0,0,.045); --shadow:rgba(0,0,0,.10);
}
html,body{transition:background .2s,color .2s}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic",sans-serif;
  background:var(--bg);color:var(--fg)}
body{display:flex;flex-direction:column;overflow:hidden}
#topbar{display:flex;align-items:center;gap:20px;height:52px;flex:0 0 auto;padding:0 16px;
  background:var(--panel);border-bottom:1px solid var(--border);position:relative;z-index:1000}
.brand{font-weight:700;font-size:16px;white-space:nowrap}
.group-switch{display:flex;gap:6px}
.group-switch button{background:var(--btn2);color:var(--muted);border:1px solid var(--border);
  padding:6px 14px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600}
.group-switch button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.status{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.status b{color:var(--fg)}
.status .sep{color:var(--border)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.dot.poll{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.dot.off{background:var(--red)}
#clock{font-variant-numeric:tabular-nums}

#main{display:flex;flex:1 1 auto;min-height:0}
#sidebar{width:310px;min-width:310px;background:var(--panel);border-right:1px solid var(--border);
  overflow-y:auto;padding:12px}
.panel{margin-bottom:16px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px}
.panel h3{margin:0 0 10px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.badge{background:var(--accent);color:#fff;border-radius:10px;padding:1px 8px;font-size:12px}

#device-list,#offline-list,#nogps-list{list-style:none;margin:0;padding:0}
#device-list li,#offline-list li,#nogps-list li{padding:8px;border-radius:8px;cursor:pointer;margin-bottom:6px;background:var(--raised);
  border:1px solid transparent}
#device-list li:hover,#offline-list li:hover,#nogps-list li:hover{border-color:var(--border)}
#device-list li.sel,#offline-list li.sel,#nogps-list li.sel{border-color:var(--accent)}
#offline-list li.offline{border-left:3px solid var(--red);opacity:.85}
.badge.off{background:var(--red)}
.badge.nog{background:var(--purple)}
#nogps-list li.nogps{border-left:3px solid var(--purple)}
.dev-top{display:flex;justify-content:space-between;align-items:center}
.dev-id{font-weight:700}
.dev-spd{font-size:12px;color:var(--muted)}
.dev-sub{font-size:11px;color:var(--muted);margin-top:3px;display:flex;justify-content:space-between}
.pill{font-size:10px;padding:1px 6px;border-radius:8px;font-weight:700}
.pill.mv{background:rgba(59,130,246,.18);color:#3b82f6}
.pill.st{background:rgba(107,114,128,.2);color:var(--muted)}
.pill.ov{background:rgba(239,68,68,.18);color:#ef4444}
.pill.off{background:rgba(239,68,68,.2);color:#ef4444}
.pill.nogps{background:rgba(139,92,246,.2);color:#8b5cf6}

label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
/* 모든 텍스트/숫자/셀렉트 입력 = 모서리 둥근 다크 박스로 통일 */
input[type=text],input[type=number],input[type=datetime-local],input[type=date],
input[type=time],input[type=search],input:not([type]),select,textarea{
  background:var(--input-bg);color:var(--fg);border:1px solid var(--border);border-radius:9px;
  padding:9px 11px;font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
input::placeholder{color:#5b6470}
#sidebar select,#sidebar input[type=datetime-local]{width:100%;margin-top:4px}
/* 숫자 입력칸 스피너 제거 → 입력칸 모양 통일 */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* 경로 검색: 일간/기간 모드 + 날짜(전체폭) + 시/분 드롭다운 */
.mode-row{display:flex;gap:6px;margin-bottom:10px}
.mode-row button{flex:1;background:var(--btn2);color:var(--muted);border:1px solid var(--border);
  border-radius:8px;padding:7px;font-size:13px;font-weight:600;cursor:pointer}
.mode-row button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.mode-pane{margin-bottom:6px}
.mode-pane[hidden]{display:none}
#sidebar .full-date{width:100%;margin-top:4px}
.dt-field{margin-bottom:10px}
.dt-lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.dt-row{display:flex;align-items:center;gap:5px;margin-top:6px}
#sidebar .dt-row .dt-sel{flex:1;min-width:0;margin-top:0;padding:8px 6px}
.dt-colon{font-size:11px;color:var(--muted)}

.btn-row{display:flex;gap:6px}
button{cursor:pointer}
.btn-row button,.quick button{flex:1;background:var(--accent);color:#fff;border:none;border-radius:7px;
  padding:8px;font-size:13px;font-weight:600}
.btn-row button.ghost{background:var(--btn2);color:var(--muted)}
.btn-row button.live{background:var(--btn2);color:var(--fg)}
.btn-row button.live.active{background:var(--red);color:#fff;animation:livePulse 1.2s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.55}}
.quick{display:flex;gap:6px;margin-top:8px}
.quick button{background:var(--btn2);color:var(--muted);font-weight:500;font-size:12px;padding:6px}
.track-info{margin-top:10px;font-size:12px;color:var(--muted);min-height:16px}
.track-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.track-player #play-range{flex:1;min-width:0}
.track-player #play-btn{background:var(--accent);border:none;color:#fff;border-radius:6px;width:34px;height:30px}
.track-player #play-time{font-size:11px;color:var(--muted);flex:1 0 100%;margin-top:2px}

.legend div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:5px}
.legend .lg{width:14px;height:14px;border-radius:3px;display:inline-block}
.lg.mv{background:var(--accent)} .lg.st{background:var(--amber)} .lg.ov{background:var(--red)}
.lg.iv{background:transparent;border:1px dashed var(--muted)}
.lg.cont{background:rgba(239,68,68,.25);border:1px solid var(--red)}
.lg.allow{background:transparent;border:1px solid var(--green)}
.lg.cust{background:transparent;border:2px dashed #00e5ff}

#map-area{flex:1;display:flex;flex-direction:column;min-width:0}
#map{flex:1;background:#000}

/* 컨테이너 블록 라벨(8-A 등) */
.cell-label{transform:translate(-50%,-50%);display:inline-block;font-size:12px;font-weight:800;color:#fff;
  text-shadow:0 0 2px #000,0 0 3px #000,0 1px 2px #000;white-space:nowrap;pointer-events:none;letter-spacing:.3px}

/* 통계 뷰 */
#stats-view{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px}
#stats-view[hidden]{display:none}
.stats-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.stats-head h2{margin:0;font-size:20px}
.stats-range{display:flex;gap:6px;align-items:center}
.stats-range button{background:var(--btn2);color:var(--muted);border:1px solid var(--border);
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.stats-range button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#stats-range-label{font-size:13px;color:var(--muted);margin-left:6px}
/* 통계 사용자지정 기간 */
.stats-custom{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:-4px 0 18px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.stats-custom[hidden]{display:none}
.stats-custom label{margin:0;font-size:12px;color:var(--muted)}
.stats-custom input{margin-top:4px;width:170px}
.stats-custom button{background:var(--accent);color:#fff;border:none;border-radius:8px;
  height:36px;padding:0 20px;font-weight:600;cursor:pointer}
.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.stat-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:18px 18px 18px 22px;box-shadow:0 1px 4px var(--shadow);overflow:hidden}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ac,var(--accent))}
.sc-label{font-size:12.5px;color:var(--muted);margin-bottom:10px;font-weight:600}
.sc-val{font-size:28px;font-weight:800;line-height:1;color:var(--fg)}
.sc-unit{font-size:13px;color:var(--muted);font-weight:600;margin-left:5px}
.sc-sub{font-size:11.5px;color:var(--muted);margin-top:9px}
.ratio-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:700;
  background:rgba(239,68,68,.15);color:var(--red)}
.ratio-badge.zero{background:var(--hover);color:var(--muted)}
#stats-table tbody tr:hover{background:var(--hover)}
.theme-btn{background:var(--btn2);border:1px solid var(--border);border-radius:8px;padding:4px 9px;
  font-size:14px;cursor:pointer;line-height:1;margin-left:4px}
.stats-table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:4px 14px 12px}
#stats-table{width:100%;border-collapse:collapse;font-size:13px}
#stats-table th,#stats-table td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
#stats-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
#stats-table tr:last-child td{border-bottom:none}
#stats-table tr.no-data{opacity:.45}
#stats-table td small{color:var(--muted)}

/* 통신 장애 대기소(지도 좌측하단 오버레이) */
.offline-stage{background:rgba(13,17,23,.92);border:1px solid var(--border);border-radius:10px;
  padding:8px 8px 6px;min-width:150px;max-width:220px;max-height:42vh;overflow-y:auto;
  box-shadow:0 4px 16px rgba(0,0,0,.6)}
.offline-stage .stage-title{font-size:11px;font-weight:700;color:#fca5a5;margin:6px 0;
  text-transform:uppercase;letter-spacing:.03em}
.offline-stage .stage-title:first-child{margin-top:0}
.offline-stage .stage-title.nog{color:#c4b5fd}
.stage-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;cursor:pointer}
.stage-item:hover{background:var(--hover)}
.stage-pin{width:13px;height:13px;border-radius:50%;border:2px solid #fff;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.stage-name{font-size:12px;font-weight:700;color:#fff}
.stage-last{font-size:10px;color:#8b949e;margin-left:auto;white-space:nowrap}

/* 상단 관리 버튼 */
.admin-btn{margin-left:auto;background:var(--btn2);color:var(--fg);border:1px solid var(--border);
  padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600}
.admin-btn+.status{margin-left:16px}

/* 관리 오버레이 */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.overlay[hidden]{display:none}
.admin-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  width:min(1120px,100%);padding:20px;box-sizing:border-box;max-height:90vh;overflow-y:auto}
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.admin-head h2{margin:0;font-size:18px}
.admin-head .ghost{background:var(--btn2);color:var(--muted);border:1px solid var(--border);
  border-radius:7px;padding:7px 12px}
.admin-sec{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:14px}
.admin-sec h3{margin:0 0 10px;font-size:13px;color:var(--muted);text-transform:uppercase}
.admin-sec h3 small{text-transform:none;color:#5b6470}
.grow{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px 12px;align-items:end}
/* 전역 파라미터: 숫자가 짧으니 작은 입력칸 + 작은 버튼으로 */
.grow.compact{display:flex;flex-wrap:wrap;gap:16px;align-items:end}
.grow.compact label{min-width:0}
.grow.compact input{width:96px}
.grow button.sm{height:36px;padding:0 18px}
.grow label{margin:0;min-width:0}
.grow input,.grow select{margin-top:4px;width:100%;box-sizing:border-box}
.grow button{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:0 16px;
  font-weight:600;height:36px;white-space:nowrap;align-self:end}
.table-wrap{overflow-x:auto}
#reg-table{width:100%;border-collapse:collapse;font-size:13px}
#reg-table th,#reg-table td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left}
#reg-table th{color:var(--muted);font-size:11px;text-transform:uppercase}
#reg-table input,#reg-table select{width:100%;min-width:50px;box-sizing:border-box;background:var(--input-bg);color:var(--fg);
  border:1px solid var(--border);border-radius:7px;padding:6px 9px;margin:0;font-size:13px}
#reg-table td:last-child{white-space:nowrap;width:1%}
#reg-table .row-act{display:flex;gap:4px;flex-wrap:nowrap}
#reg-table .row-act button{border:none;border-radius:5px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap}
#reg-table .save{background:var(--green);color:#04210f}
#reg-table .del{background:var(--red);color:#2a0808}
.admin-msg{margin-top:10px;font-size:13px;color:var(--green);min-height:16px}
#reg-table .tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;white-space:nowrap}
#reg-table .tag.reg{background:rgba(34,197,94,.2);color:#86efac}
#reg-table .tag.auto{background:rgba(245,158,11,.22);color:#fcd34d}

/* 토스트 알림 */
#toast-wrap{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:3000;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#161b22;border:1px solid var(--amber);color:var(--fg);padding:10px 18px;
  border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.5);
  animation:toastin .3s ease}
.toast .t-sub{font-size:11px;color:var(--muted);font-weight:400}
@keyframes toastin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* 마커 */
.veh{position:relative;width:0;height:0}
.veh .pin{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;
  border:3px solid #fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.75);transition:transform .3s}
.veh .pin svg{display:block;transition:transform .3s}
.veh .lbl{position:absolute;left:24px;top:-12px;background:rgba(13,17,23,.92);color:#fff;
  font-size:12px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.veh .lbl .temp{margin-left:6px;padding:0 5px;border-radius:5px;background:rgba(59,130,246,.28);
  color:#bfdbfe;font-weight:700}
.veh .lbl .temp.hot{background:rgba(239,68,68,.35);color:#fecaca}
.veh.invalid .pin{opacity:.5;border-style:dashed}
.veh.moving .pin{animation:vehpulse 1.6s infinite}
@keyframes vehpulse{
  0%{box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 0 rgba(59,130,246,.55)}
  70%{box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 14px rgba(59,130,246,0)}
  100%{box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 0 rgba(59,130,246,0)}}
.leaflet-popup-content-wrapper{background:#161b22;color:var(--fg);border-radius:10px}
.leaflet-popup-tip{background:#161b22}
.popup h4{margin:0 0 6px;font-size:14px}
.popup table{font-size:12px;border-collapse:collapse}
.popup td{padding:2px 6px 2px 0}
.popup td.k{color:var(--muted)}

/* ===== 모바일 반응형 ===== */
@media (max-width: 820px){
  #topbar{height:auto;min-height:0;flex-wrap:wrap;gap:8px 10px;padding:8px 10px}
  .brand{font-size:14px}
  .group-switch{flex:1 1 auto}
  .group-switch button{padding:6px 10px;font-size:12px}
  .admin-btn{margin-left:0;padding:6px 10px;font-size:12px}
  .status{margin-left:auto;font-size:11px;gap:6px;flex-wrap:wrap;justify-content:flex-end}

  #main{flex-direction:column}
  #map{order:1;flex:1 1 auto;min-height:46vh}
  #sidebar{order:2;width:100%;min-width:0;max-height:42vh;flex:0 0 auto;
    border-right:none;border-top:1px solid var(--border)}

  #stats-view{padding:14px}
  .stats-head h2{font-size:17px}
  .stats-cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .stat-card{padding:14px 14px 14px 18px}
  .sc-val{font-size:22px}

  .overlay{padding:14px 8px}
  .admin-box{padding:14px}
  .admin-head h2{font-size:16px}
}
@media (max-width: 480px){
  .brand{font-size:13px}
  .status{width:100%;justify-content:flex-start;margin-left:0}
  .stats-cards{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
  .sc-val{font-size:20px}
}