html, body, #map { height: 100%; margin: 0; }

.legend {
  position: fixed;         /* ← absolute → fixed 로 변경 */
  bottom: 14px;
  left: 14px;
  background: white;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  z-index: 2000;           /* ← Leaflet 내부보다 위에 */
}

.legend .item { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #3333; }
.dot.gray{background:#9e9e9e} .dot.lightgray{background:#cfd8dc}
.dot.yellow{background:#ffeb3b} .dot.orange{background:#ff9800} .dot.red{background:#e53935}

.popup-imgwrap{
  position: relative;
  width: 100%;
  max-width: 640px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.popup-imgwrap img{ display:block; width: 100%; height: auto; }
.popup-canvas{ position:absolute; top:0; left:0; }
.popup-meta{ font: 12px/1.4 system-ui; margin:6px 2px 0; color:#455a64 }