/* =====================================================
   layout.css — 헤더·사이드바·지도·우측패널 구조 스타일
   ===================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #1a1a2e; color: #e0e0e0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── 헤더 ── */
#header { background: linear-gradient(90deg, #0f3460, #16213e); padding: 8px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #0a84ff55; flex-shrink: 0; z-index: 100; }
#header h1 { font-size: 15px; color: #4fc3f7; font-weight: 700; white-space: nowrap; }
.badge { background: #0a84ff33; border: 1px solid #0a84ff66; color: #4fc3f7; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
#status-bar { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 11px; color: #aaa; }
#route-mode-indicator { display: none; background: #ff4444; color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.header-upload-btn { background: #0a84ff33; border: 1px solid #0a84ff66; color: #4fc3f7; padding: 3px 10px; border-radius: 12px; font-size: 11px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.header-upload-btn:hover { background: #0a84ff66; color: #fff; }
.header-upload-sep { width: 1px; height: 18px; background: #0a84ff44; flex-shrink: 0; }

/* ── 재해지도 아코디언 ── */
#disaster-zone { border-bottom: 1px solid #ff600033; flex-shrink: 0; }
#disaster-zone-header { padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: #ff600011; border-top: 1px solid #ff600033; user-select: none; }
#disaster-zone-header:hover { background: #ff600022; }
#disaster-zone-title { font-size: 11px; font-weight: 700; color: #ff8040; }
#disaster-zone-toggle { background: none; border: none; color: #ff8040; font-size: 11px; cursor: pointer; padding: 0; }
#disaster-zone-body { display: none; padding: 6px 10px 8px; }
#disaster-zone-body.open { display: block; }
.disaster-layer-row { display: flex; align-items: center; gap: 7px; padding: 4px 2px; cursor: pointer; border-radius: 4px; }
.disaster-layer-nodata { cursor: not-allowed; }
.disaster-layer-row:hover { background: #ffffff0a; }
.disaster-layer-row input[type=checkbox] { cursor: pointer; accent-color: #ff8040; width: 14px; height: 14px; flex-shrink: 0; }
.disaster-layer-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.disaster-layer-name { font-size: 11px; color: #ddd; flex: 1; }
.disaster-layer-loading { font-size: 10px; color: #888; display: none; }

/* ── 재해지도 범례 (지도 우하단) ── */
#disaster-legend { position: absolute; bottom: 40px; right: 16px; z-index: 200; background: rgba(0,0,0,0.72); border: 1px solid #ff600044; border-radius: 8px; padding: 8px 12px; pointer-events: none; font-size: 11px; line-height: 1.9; min-width: 130px; display: none; }
#disaster-legend-title { font-size: 10px; color: #ff8040; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 4px; }
.dl-legend-row { display: flex; align-items: center; gap: 7px; color: #e0e0e0; }
.dl-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#disaster-active-label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 200; background: rgba(0,0,0,0.68); border: 1px solid #ff600066; border-radius: 20px; padding: 5px 16px; font-size: 12px; color: #ff9f5a; font-weight: 700; pointer-events: none; display: none; white-space: nowrap; letter-spacing: 0.3px; }

/* ── 산림/환경 아코디언 ── */
#forest-zone { background:#1c1c1e; border-bottom:1px solid #3a3a3c; }
#forest-zone-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; cursor:pointer; user-select:none; }
#forest-zone-header:hover { background:rgba(255,255,255,0.06); }
#forest-zone-title { font-size:13px; font-weight:600; color:#e8e8ed; }
#forest-zone-toggle { background:none; border:none; color:#8e8e93; font-size:11px; cursor:pointer; padding:2px 6px; }
#forest-zone-body { max-height:0; overflow:hidden; transition:max-height .25s ease; }
#forest-zone-body.open { max-height:300px; padding:4px 8px 8px; }

/* ── 드론 영상 아코디언 ── */
#drone-zone { background:#1c1c1e; border-bottom:1px solid #00d4ff22; flex-shrink:0; }
#drone-zone-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; cursor:pointer; user-select:none; background:#00d4ff08; border-top:1px solid #00d4ff22; }
#drone-zone-header:hover { background:#00d4ff14; }
#drone-zone-title { font-size:11px; font-weight:700; color:#00d4ff; }
#drone-zone-toggle { background:none; border:none; color:#00d4ff; font-size:11px; cursor:pointer; padding:0; }
#drone-zone-body { display:none; padding:6px 10px 8px; }
#drone-zone-body.open { display:block; }
#drone-hover-panel { position:fixed; z-index:9000; background:rgba(8,15,30,0.95); border:1px solid #00d4ff55; border-radius:8px; padding:8px 10px; pointer-events:none; font-size:11px; color:#ccc; max-width:250px; box-shadow:0 4px 20px rgba(0,212,255,0.2); }
#drone-hover-title { color:#00d4ff; font-weight:bold; margin-bottom:5px; font-size:12px; }
#drone-preview-video { width:228px; height:128px; border-radius:4px; background:#000; display:block; margin-bottom:5px; object-fit:contain; }
#drone-hover-info div { margin-bottom:2px; }

/* ── 메인 레이아웃 ── */
#main { display: flex; flex: 1; overflow: hidden; }

/* ── 리사이즈 핸들 ── */
.resize-h { width: 5px; cursor: col-resize; background: transparent; flex-shrink: 0; transition: background .15s; z-index: 50; }
.resize-h:hover, .resize-h.dragging { background: #0a84ff88; }
.resize-v { height: 5px; cursor: row-resize; background: transparent; flex-shrink: 0; transition: background .15s; z-index: 50; }
.resize-v:hover, .resize-v.dragging { background: #0a84ff88; }

/* ── 사이드바 ── */
#sidebar { width: 280px; min-width: 160px; max-width: 520px; background: #16213e; border-right: 1px solid #0a84ff33; display: flex; flex-direction: column; overflow: hidden; z-index: 10; }
.sidebar-tabs { display: flex; border-bottom: 1px solid #0a84ff33; flex-shrink: 0; }
.sidebar-tab { flex: 1; padding: 8px 4px; text-align: center; font-size: 11px; cursor: pointer; color: #888; border: none; background: none; transition: all .2s; }
.sidebar-tab.active { color: #4fc3f7; border-bottom: 2px solid #4fc3f7; }
.sidebar-tab:hover { color: #ccc; background: #ffffff0a; }
.tab-content { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.tab-content.active { display: flex; }

/* ── 등산로 탭 ── */
#upload-zone { padding: 8px 10px; border-bottom: 1px solid #0a84ff22; flex-shrink: 0; }
.upload-btn { width: 100%; padding: 8px; background: linear-gradient(135deg,#0a84ff,#0060cc); border: none; color: white; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.upload-btn:hover { filter: brightness(1.2); }
#trail-search-wrap { padding: 6px 10px; border-bottom: 1px solid #0a84ff22; flex-shrink: 0; position: relative; }
#trail-search-input { width: 100%; box-sizing: border-box; background: #0d1b2a; border: 1px solid #0a84ff33; color: #e0e0e0; padding: 5px 28px 5px 8px; border-radius: 5px; font-size: 11px; outline: none; }
#trail-search-input:focus { border-color: #0a84ff88; }
.trail-search-clear { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #888; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; display: none; }
#layer-collapse-row { padding: 5px 10px; border-bottom: 1px solid #0a84ff11; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
#layer-collapse-btn { background: none; border: none; color: #4fc3f7; cursor: pointer; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
#layer-collapse-btn:hover { background: #0a84ff22; }
#trail-list-wrap { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
#trail-list-wrap::-webkit-scrollbar { width: 5px; }
#trail-list-wrap::-webkit-scrollbar-track { background: #0d1b2a; }
#trail-list-wrap::-webkit-scrollbar-thumb { background: #0a84ff88; border-radius: 3px; }
#trail-list-wrap::-webkit-scrollbar-thumb:hover { background: #0a84ffcc; }
#trail-list { flex: 1; padding: 4px; }
.trail-section-title { padding: 5px 10px 4px; font-size: 10px; font-weight: 700; color: #4fc3f7; letter-spacing: 0.5px; text-transform: uppercase; flex-shrink: 0; }
.route-section-divider { padding: 6px 10px; font-size: 11px; font-weight: 700; color: #ff8040; background: #ff600011; border-top: 1px solid #ff600033; border-bottom: 1px solid #ff600033; flex-shrink: 0; }
.trail-group { margin-bottom: 4px; }
.trail-group-header { padding: 8px 10px; font-size: 16px; font-weight: 700; color: #4fc3f7; background: #0a84ff11; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; }
.trail-group-header:hover { background: #0a84ff22; }
.trail-group-label { flex: 1; cursor: pointer; display: flex; align-items: center; gap: 4px; overflow: hidden; }
.trail-group-acts { display: flex; gap: 3px; flex-shrink: 0; }
.trail-group-items { padding-left: 8px; }
.trail-item { padding: 6px 8px; font-size: 11px; cursor: pointer; border-radius: 4px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; border-left: 3px solid transparent; }
.trail-item:hover { background: #ffffff0d; }
.trail-item.selected { background: #0a84ff22; border-left-color: #0a84ff; color: #4fc3f7; }
.trail-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.trail-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trail-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.trail-item:hover .trail-actions { opacity: 1; }
.action-btn { padding: 2px 5px; border: none; background: #ffffff22; color: #ccc; border-radius: 3px; cursor: pointer; font-size: 10px; }

/* ── 스타일 탭 ── */
#style-panel { padding: 10px; flex: 1; overflow-y: auto; }
#style-panel h3 { font-size: 12px; color: #4fc3f7; margin-bottom: 10px; }
.style-group { margin-bottom: 14px; }
.style-group label { font-size: 11px; color: #aaa; display: block; margin-bottom: 4px; }
.style-group input[type=range] { width: 100%; accent-color: #0a84ff; }
.style-group select { width: 100%; background: #0d1b2a; border: 1px solid #0a84ff33; color: #e0e0e0; padding: 4px 6px; border-radius: 4px; font-size: 11px; }
.color-mode-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.color-mode-btn { padding: 4px 8px; border: 1px solid #0a84ff44; background: none; color: #aaa; border-radius: 4px; cursor: pointer; font-size: 10px; }
.color-mode-btn.active { background: #0a84ff33; color: #4fc3f7; border-color: #0a84ff; }
.val-disp { float: right; color: #4fc3f7; font-size: 10px; }

/* ── 경로 탭 ── */
#route-panel { padding: 10px; flex: 1; overflow-y: auto; }
#route-panel h3 { font-size: 12px; color: #4fc3f7; margin-bottom: 8px; }
.route-instruction { font-size: 11px; color: #aaa; line-height: 1.7; }
#route-search-box { background:#0d1b2a; border:1px solid #0a84ff44; border-radius:8px; padding:8px; margin-bottom:10px; flex-shrink: 0; }
.rsb-row { display:flex; align-items:center; gap:6px; padding:2px 0; }
.rsb-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.rsb-dot-start { background:#00c73c; }
.rsb-dot-end   { background:#e53935; }
.rsb-divider { border-left:1px dashed #0a84ff44; height:10px; margin:2px 0 2px 4px; }
.rsb-input-wrap { flex:1; display:flex; align-items:center; gap:4px; }
.rsb-input-wrap input { flex:1; background:#1a2a3a; border:1px solid #0a84ff33; color:#e0e0e0; padding:5px 8px; border-radius:5px; font-size:11px; outline:none; min-width:0; }
.rsb-input-wrap input:focus { border-color:#0a84ff88; }
.rsb-map-btn { background:none; border:1px solid #0a84ff33; color:#4fc3f7; border-radius:4px; cursor:pointer; font-size:13px; padding:3px 5px; flex-shrink:0; }
.rsb-map-btn:hover { background:#0a84ff22; }
.rsb-search-btn { background:linear-gradient(135deg,#0a84ff,#0060cc); border:none; color:#fff; border-radius:4px; cursor:pointer; font-size:12px; padding:3px 7px; flex-shrink:0; font-weight:700; }
.rsb-search-btn:hover { filter:brightness(1.2); }
.rsb-suggest { position:relative; z-index:200; }
.rsb-suggest-list { position:absolute; top:2px; left:0; right:0; background:#16213e; border:1px solid #0a84ff44; border-radius:6px; max-height:180px; overflow-y:auto; box-shadow:0 4px 16px #000a; }
.rsb-suggest-item { padding:7px 10px; font-size:11px; cursor:pointer; border-bottom:1px solid #0a84ff11; line-height:1.4; }
.rsb-suggest-item:hover { background:#0a84ff22; color:#4fc3f7; }
.rsb-suggest-item .rsb-si-name { font-weight:600; color:#e0e0e0; }
.rsb-suggest-item .rsb-si-addr { font-size:10px; color:#888; margin-top:1px; }
.rsb-pick-banner { position:absolute; top:56px; left:50%; transform:translateX(-50%); background:#ff8c00ee; color:#fff; padding:7px 18px; border-radius:20px; font-size:12px; font-weight:700; z-index:999; pointer-events:none; white-space:nowrap; box-shadow:0 2px 8px #0008; }
.route-step { padding: 6px 8px; border-left: 2px solid #0a84ff44; margin-bottom: 4px; font-size: 11px; color: #ccc; cursor: pointer; border-radius: 0 4px 4px 0; transition: background 0.15s; }
.route-step:hover { background: #ffffff0d; }
.route-step.hl { border-left-color: #0a84ff; color: #4fc3f7; background: #0a84ff11; }
.route-step.flash { background: #FFD70033; border-left-color: #FFD700; }
.rtag { display:inline-block; padding:1px 5px; border-radius:3px; font-size:10px; font-weight:700; margin-right:5px; vertical-align:middle; }
.rtag-car  { background:#FFD700; color:#1a1a1a; border:1px solid #b8a000; }
.rtag-walk { background:#FF8C00; color:#fff; border:1px solid #cc6e00; }
.rtag-trail{ background:#1e90ff; color:#fff; border:1px solid #1265b8; }
.rtag-mix  { background:linear-gradient(90deg,#FFD700 50%,#1e90ff 50%); color:#fff; border:1px solid #888; }
#route-stats { background: #0a84ff11; border: 1px solid #0a84ff33; border-radius: 6px; padding: 8px; margin-bottom: 10px; }
.stat { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 3px; }
.stat .val { color: #4fc3f7; font-weight: 700; }
.cancel-btn { width: 100%; padding: 7px; background: #ff444433; border: 1px solid #ff4444; color: #ff8888; border-radius: 6px; cursor: pointer; font-size: 11px; margin-bottom: 8px; }
.cancel-btn:hover { background: #ff444455; }

/* ── 지도 영역 ── */
#map-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
#cesiumContainer { flex: 1; min-height: 0; }
#map-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 20; }
.map-btn { width: 36px; height: 36px; border-radius: 6px; background: #16213ecc; border: 1px solid #0a84ff44; color: #4fc3f7; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .2s; backdrop-filter: blur(4px); }
.map-btn:hover { background: #0a84ff33; border-color: #0a84ff; }
.map-btn.active { background: #0a84ff55; border-color: #0a84ff; }
#coord-display { position: absolute; bottom: 30px; left: 10px; background: #16213ecc; border: 1px solid #0a84ff33; color: #aaa; font-size: 10px; padding: 4px 8px; border-radius: 4px; backdrop-filter: blur(4px); pointer-events: none; z-index: 20; }

/* ── 우측 패널 ── */
#right-panel { width: 320px; min-width: 220px; max-width: 600px; background: #16213e; border-left: 1px solid #0a84ff33; display: flex; flex-direction: column; overflow: hidden; }
#elev-section { height: 200px; min-height: 80px; max-height: 450px; flex-shrink: 0; border-bottom: 1px solid #0a84ff33; padding: 8px; display: flex; flex-direction: column; }
#elev-section h3, #minimap-section h3 { font-size: 11px; color: #4fc3f7; margin-bottom: 6px; flex-shrink: 0; }
#elev-chart-wrap { flex: 1; position: relative; min-height: 0; cursor: crosshair; }
#elev-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#elev-hint { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #4fc3f788; pointer-events: none; white-space: nowrap; }
#minimap-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 8px; }
#minimap-container { flex: 1; background: #0d1b2a; border-radius: 6px; border: 1px solid #0a84ff22; overflow: hidden; position: relative; min-height: 0; }
#minimap-leaflet { width: 100%; height: 100%; }
#minimap-info { position: absolute; top: 4px; right: 4px; font-size: 11px; color: #e8e8ed; background: #00000088; padding: 3px 8px; border-radius: 4px; pointer-events: none; z-index: 1000; font-weight: 600; letter-spacing: 0.2px; }
.leaflet-container { font-size: 10px; }
.leaflet-tile-pane { filter: brightness(0.9) saturate(1.1); }

/* ── 팝업/메뉴/오버레이 ── */
#facility-popup { display: none; position: fixed; z-index: 1000; background: #16213e; border: 1px solid #0a84ff55; border-radius: 8px; padding: 12px; box-shadow: 0 8px 32px #00000088; max-width: 280px; }
#facility-popup h4 { font-size: 13px; color: #4fc3f7; margin-bottom: 8px; }
#facility-popup p { font-size: 11px; color: #aaa; line-height: 1.5; }
.close-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #888; cursor: pointer; font-size: 14px; }
#ctx-menu { display: none; position: fixed; z-index: 1500; background: #16213e; border: 1px solid #0a84ff55; border-radius: 6px; padding: 4px 0; box-shadow: 0 8px 24px #00000088; min-width: 160px; }
.ctx-item { padding: 7px 14px; font-size: 12px; color: #ccc; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ctx-item:hover { background: #0a84ff22; color: #4fc3f7; }
.ctx-sep { height: 1px; background: #0a84ff22; margin: 3px 0; }
#loading-overlay { display: none; position: fixed; inset: 0; background: #00000088; z-index: 2000; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
#loading-overlay.active { display: flex; }
.spinner { width: 40px; height: 40px; border: 3px solid #0a84ff33; border-top-color: #0a84ff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading-overlay p { color: #4fc3f7; font-size: 13px; }
#toast { position: fixed; bottom: 20px; right: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.tmsg { background: #16213e; border: 1px solid #0a84ff55; color: #e0e0e0; padding: 8px 14px; border-radius: 6px; font-size: 12px; animation: sli .3s ease; box-shadow: 0 4px 16px #00000066; }
.tmsg.error { border-color: #ff444488; color: #ff8888; }
.tmsg.success { border-color: #44ff8888; color: #88ff88; }
@keyframes sli { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Cesium 내장 UI 숨기기 ── */
.cesium-viewer-toolbar, .cesium-viewer-animationContainer,
.cesium-viewer-timelineContainer, .cesium-viewer-bottom,
.cesium-widget-credits { display: none !important; }

/* ── 모바일 전용 요소 (데스크탑에서는 숨김) ── */
#mobile-menu-btn { display: none; }
#mobile-bottom-nav { display: none; }
#sidebar-close-btn { display: none !important; }
#mobile-overlay { display: none; position: fixed; inset: 0; background: #00000066; z-index: 200; backdrop-filter: blur(2px); transition: opacity .3s; opacity: 0; pointer-events: none; }
#mobile-overlay.active { opacity: 1; pointer-events: auto; }

/* ── 탐방로 GPS 추적 버튼 ── */
.trail-track-btn { color: #00ff88 !important; font-weight: 700; }
.trail-track-btn:hover { background: rgba(0,255,136,0.15) !important; }

/* ── 탐방로 이탈 경고 배너 ── */
@keyframes pulse {
  0%,100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.85; transform: translateX(-50%) scale(1.04); }
}