.spots-page { min-height: 100vh; background: var(--ov-bg); }
.spots-header {
  background: var(--ov-white);
  border-bottom: 1px solid var(--ov-line);
  padding: var(--ov-space-12) var(--ov-space-8) var(--ov-space-10);
  text-align: center;
}
.spots-title {
  font-family: var(--ov-font-display);
  font-size: var(--ov-fs-h1);
  font-weight: 800;
  color: var(--ov-navy);
  margin: 0 0 var(--ov-space-3);
  letter-spacing: var(--ov-track-tight);
}
.spots-subtitle {
  font-family: var(--ov-font-sans);
  font-size: var(--ov-fs-lg);
  color: var(--ov-slate);
  margin: 0 0 var(--ov-space-6);
}
.spots-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-2);
  background: var(--ov-blue);
  color: var(--ov-white);
  padding: var(--ov-space-3) var(--ov-space-6);
  border-radius: var(--ov-radius-pill);
  font-family: var(--ov-font-sans);
  font-weight: 600;
  font-size: var(--ov-fs-sm);
  text-decoration: none;
  transition: opacity var(--ov-dur-fast) var(--ov-ease);
  cursor: pointer;
}
.spots-submit-btn:hover { opacity: 0.88; }
.spots-content {
  max-width: 1380px;
  margin: 0 auto;
  padding: var(--ov-space-6) var(--ov-space-6) var(--ov-space-10);
}

/* ── SpotsMapList (split-view) ── */
.sml-root { width: 100%; }

.sml-mobile-toggle {
  display: none;
  gap: var(--ov-space-2);
  padding: var(--ov-space-3) var(--ov-space-4);
  background: var(--ov-white);
  border-bottom: 1px solid var(--ov-line);
  position: sticky;
  top: 64px;
  z-index: 20;
}
.sml-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: var(--ov-radius-pill);
  border: 1.5px solid var(--ov-line);
  background: var(--ov-white);
  font-family: var(--ov-font-sans);
  font-size: var(--ov-fs-sm);
  font-weight: 600;
  color: var(--ov-slate);
  cursor: pointer;
  transition: all var(--ov-dur-fast) var(--ov-ease);
}
.sml-toggle-btn.active,
.sml-toggle-btn:hover {
  background: var(--ov-navy);
  border-color: var(--ov-navy);
  color: var(--ov-white);
}

.sml-layout {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--ov-space-6);
  align-items: start;
}

.sml-list {
  min-width: 0;
  overflow-y: auto;
  max-height: calc(100vh - 130px);
  padding-right: var(--ov-space-2);
  scrollbar-width: thin;
}
.sml-list::-webkit-scrollbar { width: 4px; }
.sml-list::-webkit-scrollbar-track { background: transparent; }
.sml-list::-webkit-scrollbar-thumb { background: var(--ov-line); border-radius: 2px; }

.sml-count {
  font-family: var(--ov-font-sans);
  font-size: var(--ov-fs-sm);
  color: var(--ov-slate);
  margin: 0 0 var(--ov-space-4);
  font-weight: 500;
}

.sml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ov-space-4);
}

.sml-card-wrap {
  border-radius: var(--ov-radius-lg);
  transition: box-shadow var(--ov-dur-fast) var(--ov-ease), transform var(--ov-dur-fast) var(--ov-ease);
  cursor: pointer;
}
.sml-card-wrap:hover,
.sml-card-active {
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.sml-map-col { min-width: 0; }
.sml-map-sticky { position: sticky; top: 80px; }
.sml-map {
  width: 100%;
  height: calc(100vh - 160px);
  min-height: 400px;
  border-radius: var(--ov-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ov-line);
}

@media (max-width: 900px) {
  .sml-mobile-toggle { display: flex; }
  .sml-layout { display: block; }
  .sml-list { max-height: none; overflow-y: visible; padding-right: 0; }
  .sml-map-col { margin-top: 0; }
  .sml-map { height: 60vh; border-radius: var(--ov-radius-md); }
  .sml-hidden-mobile { display: none !important; }
  .sml-map-sticky { position: static; }
}