:root {
  --font-pretendard: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

html, body {
  overflow-x: clip;
  max-width: 100vw;
}

@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden;
  }
}

body {
  font-family: var(--font-pretendard);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

.pulse-relaxed {
  /* Kept static / calm */
  opacity: 1;
}

/* Map custom pin markers - 10% reduced size (30px) & calm interaction */
.custom-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  border: 2px solid white;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  position: relative;
}

.custom-pin:hover {
  transform: scale(1.08);
  z-index: 999 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.pin-relaxed {
  background: linear-gradient(135deg, #10b981, #059669);
}
.pin-normal {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.pin-slightly-busy {
  background: linear-gradient(135deg, #f97316, #ea580c);
}
.pin-busy {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.pin-unavailable {
  background: linear-gradient(135deg, #64748b, #475569);
}
.pin-rally {
  background: linear-gradient(135deg, #f43f5e, #be123c);
  border-color: #ffe4e6;
}
.pin-traffic {
  background: linear-gradient(135deg, #f97316, #c2410c);
  border-color: #ffedd5;
}
.pin-culture {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: #ede9fe;
}

/* Dark mode: keep marker categories clear without overpowering the map. */
.dark .custom-pin {
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.32);
}
.dark .custom-pin:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dark .pin-relaxed {
  background: linear-gradient(135deg, #059669, #047857);
}
.dark .pin-normal {
  background: linear-gradient(135deg, #d97706, #b45309);
}
.dark .pin-slightly-busy {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}
.dark .pin-busy {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.dark .pin-unavailable {
  background: linear-gradient(135deg, #475569, #334155);
}
.dark .pin-rally {
  background: linear-gradient(135deg, #be123c, #9f1239);
}
.dark .pin-traffic {
  background: linear-gradient(135deg, #c2410c, #9a3412);
}
.dark .pin-culture {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
}

/* Leaflet container adjustments */
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.dark .leaflet-popup-content-wrapper {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid #334155;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}
.dark .leaflet-popup-tip {
  background: #1e293b;
}
.leaflet-popup-content {
  margin: 12px 14px;
  font-family: var(--font-pretendard);
}

/* Card hover animation */
.spot-card {
  transition: all 0.2s ease-in-out;
}
.spot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04);
}

/* Highlighted spot card */
.spot-card.active-spot {
  border-color: #10b981;
  background-color: #f0fdf4;
  box-shadow: 0 0 0 2px #10b981;
}
.dark .spot-card.active-spot {
  border-color: #10b981;
  background-color: rgba(6, 78, 59, 0.28);
  box-shadow: 0 0 0 2px #059669;
}

/* Shimmer effect for loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.dark .skeleton-shimmer {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* Soft muted tiles for standard OSM fallback */
.osm-muted-tiles {
  filter: brightness(103%) contrast(90%) saturate(65%);
}

/* MapLibre canvas smoothing */
.maplibregl-canvas {
  outline: none;
}

/* PC Sticky Map Column */
@media (min-width: 1024px) {
  #map-column {
    position: sticky !important;
    top: 5rem !important;
    align-self: flex-start !important;
    z-index: 30 !important;
  }
}

/* Hide scrollbar for carousel */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}