.korehane-map-frame {
  --map-filter: grayscale(.62) saturate(.42) brightness(1.12) contrast(.82);
  --map-vector-filter: saturate(.82) brightness(1.01) contrast(.98);
  position: relative;
  touch-action: none;
  overflow: hidden;
  border: 1px solid var(--line-strong, #d4dddd);
  border-radius: 8px;
  background: #f8fbfb;
  box-shadow: none;
}

.korehane-map-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #f8fbfb;
}

.korehane-map-surface .leaflet-tile {
  opacity: .8 !important;
  filter: var(--map-filter);
}

.korehane-map-surface .leaflet-tile.korehane-neutral-raster-tile {
  -webkit-filter: none !important;
  filter: none !important;
  opacity: .96 !important;
}

.korehane-map-surface.color-hunt-white-map {
  color-scheme: only light;
  forced-color-adjust: none;
  background: #f3f3f3;
}

.korehane-map-surface.color-hunt-white-map .leaflet-tile:not(.korehane-neutral-raster-tile) {
  -webkit-filter: grayscale(1) saturate(0) brightness(1.02) contrast(.92) !important;
  filter: grayscale(1) saturate(0) brightness(1.02) contrast(.92) !important;
  opacity: .92 !important;
}

.korehane-map-surface.has-vector-basemap.vector-basemap-ready .leaflet-tile-pane { display: none; }
.korehane-map-surface .maplibre-basemap canvas { filter: var(--map-vector-filter); }

.korehane-map-surface .maplibre-basemap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.leaflet-container .korehane-map-surface .maplibre-basemap.maplibregl-map,
.korehane-map-surface .maplibre-basemap.maplibregl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.korehane-map-surface.has-vector-basemap .leaflet-pane { z-index: 3; }
.korehane-map-surface.has-vector-basemap .leaflet-control-container { position: relative; z-index: 5; }

.korehane-map-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 24%, transparent 74%, rgba(255,255,255,.12)),
    radial-gradient(circle at center, transparent 0 54%, rgba(225,234,235,.34) 100%);
  pointer-events: none;
}

.korehane-map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 800;
  display: flex;
  gap: 6px;
}

.korehane-map-control {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line, #e1e7e7);
  border-radius: 8px;
  color: var(--text, var(--navy, #0e2340));
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 16px rgba(14,35,64,.08);
  font: inherit;
  font-size: 15px;
  font-weight: 680;
}

.korehane-map-control.is-reset {
  width: auto;
  padding: 0 9px;
  font-size: 11px;
}

.korehane-map-caption {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--text, var(--navy, #0e2340));
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px rgba(31,39,50,.06);
  font-size: 11.5px;
  font-weight: 650;
}

.korehane-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green, #5ca987);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green, #5ca987) 16%, transparent);
}

.korehane-map-control:active { transform: scale(.95); }

.korehane-post-map-picker {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.korehane-post-map-target {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 700;
  pointer-events: none;
  transform: translate(-50%, -100%);
}

.korehane-post-map-target span {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid color-mix(in srgb, var(--brand, #00c2c7) 54%, var(--line, #e1e7e7));
  border-radius: 999px 999px 999px 9px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 24px rgba(14,35,64,.18);
  transform: rotate(-10deg);
}

.korehane-post-map-target span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 18px;
  background: url("./assets/korehane-feather-mark.svg") center / contain no-repeat;
  content: "";
  transform: translate(-50%, -50%) rotate(8deg);
}

.korehane-confirmed-post-pin {
  border: 0 !important;
  background: transparent !important;
}

.korehane-confirmed-post-pin span {
  position: absolute;
  left: 3px;
  bottom: 3px;
  display: block;
  width: 38px;
  height: 38px;
  border: 3px solid var(--brand, #00c2c7);
  border-radius: 999px 999px 999px 9px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 24px rgba(14,35,64,.2);
  transform: rotate(-10deg);
  animation: korehane-pin-land 420ms cubic-bezier(.18,.76,.24,1);
}

.korehane-confirmed-post-pin span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 17px;
  background: url("./assets/korehane-feather-mark.svg") center / contain no-repeat;
  content: "";
  transform: translate(-50%, -50%) rotate(8deg);
}

.korehane-post-map-picker.has-confirmed-pin .korehane-post-map-target {
  opacity: 0;
  transform: translate(-50%, -92%) scale(.86);
}

.korehane-post-map-actions {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 720;
  display: flex;
  gap: 6px;
}

.korehane-post-map-actions button {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line, #e1e7e7);
  border-radius: 8px;
  color: var(--text, var(--navy, #0e2340));
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 16px rgba(14,35,64,.08);
  font-size: 10px;
  font-weight: 720;
}

.korehane-post-map-actions button:first-child {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-color: color-mix(in srgb, var(--brand, #00c2c7) 42%, var(--line, #e1e7e7));
  color: var(--brand-contrast, #fff);
  background: var(--brand, #00c2c7);
}

.korehane-post-map-actions button.is-confirmed { animation: korehane-pin-confirm 480ms cubic-bezier(.18,.72,.24,1); }

.korehane-post-map-guide {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  z-index: 710;
  width: max-content;
  max-width: calc(100% - 18px);
  margin: 0 auto;
  padding: 6px 9px;
  overflow: hidden;
  border-radius: 999px;
  color: var(--text, var(--navy, #0e2340));
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 14px rgba(14,35,64,.08);
  font-size: 9px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes korehane-pin-confirm {
  0%, 100% { transform: scale(1); }
  46% { transform: scale(.88); }
  72% { transform: scale(1.06); }
}

@keyframes korehane-pin-land {
  0% { opacity: 0; transform: translateY(-14px) rotate(-10deg) scale(.8); }
  72% { opacity: 1; transform: translateY(2px) rotate(-10deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotate(-10deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .korehane-map-control { transition: none; }
  .korehane-confirmed-post-pin span { animation: none; }
}