.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  box-shadow: var(--shadow);
}
.app-title { font-size: 17px; font-weight: 700; }
.header-meta { display: flex; gap: 12px; align-items: center; }

.banner {
  padding: 10px 20px;
  background: var(--accent);
  color: var(--primary-text);
  font-size: var(--font-sm);
}

.layout-3pane {
  display: grid;
  grid-template-columns: 360px 1fr 480px;
  grid-template-areas: "left map result";
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 56px);
  overflow: hidden;
}
#left-panel  { grid-area: left;   overflow-y: auto; }
#map-pane    { grid-area: map;    position: relative; min-height: 240px; }
#result-pane { grid-area: result; overflow-y: auto; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

#vmap {
  position: relative;     /* map-context-menu absolute 기준 */
  width: 100%; height: 100%; min-height: 280px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.map-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--surface-alt);
  color: var(--text-muted);
  border-radius: var(--radius);
  pointer-events: none;
  transition: opacity .25s ease;
}
.map-overlay.hide { opacity: 0; }

@media (max-width: 1100px) {
  .layout-3pane {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "map" "result";
    height: auto;
  }
  #map-pane { height: 360px; }
}