.spm-wrapper {
  display: grid;
  gap: 12px;
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
  --spm-height: 520px;
}

.spm-list-left  { grid-template-columns: 1fr 2fr; }
.spm-list-right { grid-template-columns: 2fr 1fr; }

.spm-map { height: var(--spm-height); min-height: 320px; border-radius: 10px; overflow: hidden; }
.spm-list { max-height: var(--spm-height); overflow: auto; border: 1px solid #eee; border-radius: 10px; background: #fff; }
.spm-list ul { list-style: none; margin: 0; padding: 0; }
.spm-list li { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; cursor: pointer; display: grid; gap: 4px; }
.spm-list li:last-child { border-bottom: 0; }
.spm-list li strong { font-size: 14px; line-height: 1.2; }
.spm-list li span { font-size: 12px; color: #666; }
.spm-list li:hover { background: #64C7B7; }
.spm-list li.active { background: #64C7B7; }

.spm-popup .spm-title { margin: 0 0 6px; font-size: 16px; }
.spm-popup .spm-line { margin: 0 0 6px; }
.spm-popup .spm-details { margin-top: 8px; }
.spm-map {z-index: 9;}

@media (max-width: 900px) {
  .spm-wrapper { grid-template-columns: 1fr; }
  .spm-list { order: 2; }
}