html { scroll-behavior: smooth; }
.leaflet-container :focus, .map:focus { outline: none !important; }

.map-container{ position:relative}
.map-wrapper { display: flex; gap: 1em; flex: 1}
.map-box { width: 50%; border: 1px solid #ccc; display: flex; flex-direction: column; position: relative; }
.map { flex: 1; width: 100%; background: #ffffff; aspect-ratio:1/1.05 }
.map-container .info-panel { padding: 1em; background: #f1f1f1; font-weight:500; color:#666; text-align: center}
.map-container .wait-msg{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; text-align: center; line-height: 1.6; pointer-events: none; z-index: 999;}
#detail-map { opacity: 0; transition: opacity 0.3s ease; }
#detail-map.show { opacity: 1; }
#map-result-tit { margin-top: 2em; padding: 1em; background: var(--siteC); color: #fff; font-size: 1.125em; font-weight: 700; text-align: center; border-radius:.5em .5em 0 0}

.leaflet-tooltip.custom-sgg-label { background: transparent !important; border: none !important; box-shadow: none !important; color: #111 !important; font-family:SUIT, sans-serit;  font-weight: 700 !important; font-size: 1em !important;text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff; }

#loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; transition:0.2s;}
.spinner { width: 3em; height: 3em; border: 5px solid #f3f3f3; border-top: 5px solid var(--sietC); border-radius: 50%; animation: spin 1s linear infinite;}
.loading-text { margin-top: 1em; font-weight: 700; color: var(--siteC);}
@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
}
#loading-overlay.hidden { opacity: 0; visibility: hidden; }

@media screen and (max-width:768px) {
.map-wrapper{ flex-wrap:wrap}
.map-box{ width:100%}
}