#ktgMapProviderSelector{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:1200;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 7px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  font:600 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#222;
  backdrop-filter:blur(5px);
}

#ktgMapProviderSelector .ktg-map-provider-label{
  white-space:nowrap;
}

#ktgMapProviderSelect{
  min-width:96px;
  height:30px;
  padding:0 26px 0 9px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:7px;
  background:#fff;
  color:#111;
  font:600 12px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}


/* STEP30_75 · Kakao iframe isolation
   Kakao SDK is loaded inside a same-origin isolated page so the main App.php CSP
   and the stable Leaflet marker/POI styles remain untouched. */
#ktgKakaoMapFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:150;
  pointer-events:none;
  background:#f5f2ea;
}

#ktgKakaoMapFrame[hidden]{
  display:none !important;
}

/* Kakao 선택 시 Leaflet의 배경 타일만 숨기고,
   GPS/POI/경로/마커/컨트롤은 기존 Leaflet 레이어를 그대로 사용합니다. */
#map.ktg-provider-kakao .leaflet-tile-pane{
  opacity:0 !important;
  visibility:hidden !important;
}

#map.ktg-provider-kakao .leaflet-overlay-pane,
#map.ktg-provider-kakao .leaflet-marker-pane,
#map.ktg-provider-kakao .leaflet-tooltip-pane,
#map.ktg-provider-kakao .leaflet-popup-pane,
#map.ktg-provider-kakao .leaflet-control-container{
  position:relative;
  z-index:400;
}


/* STEP30_76 · Kakao POI coordinate alignment
   Kakao 선택 때만 기존 Leaflet POI 마커를 숨깁니다.
   사용자 위치/차량/보행자/경로 등 다른 Leaflet 레이어는 그대로 유지합니다. */
#map.ktg-provider-kakao .poi-marker-wrapper,
#map.ktg-provider-kakao .ktg-poi-photo-icon{
  display:none !important;
}


/* STEP30_80 · NAVER iframe isolation — same safe pattern as Kakao. */
#ktgNaverMapFrame{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  z-index:150; pointer-events:none; background:#eef2f7;
}
#ktgNaverMapFrame[hidden]{display:none !important;}
#map.ktg-provider-naver .leaflet-tile-pane{opacity:0 !important;visibility:hidden !important;}
#map.ktg-provider-naver .leaflet-overlay-pane,
#map.ktg-provider-naver .leaflet-marker-pane,
#map.ktg-provider-naver .leaflet-tooltip-pane,
#map.ktg-provider-naver .leaflet-popup-pane,
#map.ktg-provider-naver .leaflet-control-container{position:relative;z-index:400;}
#map.ktg-provider-naver .poi-marker-wrapper,
#map.ktg-provider-naver .ktg-poi-photo-icon{display:none !important;}

/* STEP31_12 - move provider selector to the right so it no longer covers
   the vehicle/person size sliders on Android/mobile. */
#ktgMapProviderSelector{
  left:auto!important;
  right:104px!important;
  transform:none!important;
}
@media (min-width:700px){
  #ktgMapProviderSelector{right:190px!important;}
}


/* STEP31_13 - external providers render their own current-position marker and
   accuracy circle inside the same map engine. Hide only the duplicate Leaflet
   user marker/circle. Route and other overlays remain unchanged. */
#map.ktg-provider-kakao .current-location-marker-wrapper,
#map.ktg-provider-naver .current-location-marker-wrapper,
#map.ktg-provider-kakao .ktg-current-accuracy-circle,
#map.ktg-provider-naver .ktg-current-accuracy-circle{
  display:none!important;
}

/* Selector: keep it to the right and vertically centered in the compact
   two-row size-control area, without covering either slider. */
#ktgMapProviderSelector{
  left:auto!important;
  right:8px!important;
  top:7px!important;
  transform:none!important;
  z-index:900!important;
}
@media (min-width:700px){
  #ktgMapProviderSelector{right:12px!important;top:8px!important;}
}

/* STEP31_14 - external maps are now directly pannable/zoomable like the basic map.
   Their view is mirrored back to Leaflet so route/overlay geometry remains aligned. */
#map.ktg-provider-kakao #ktgKakaoMapFrame,
#map.ktg-provider-naver #ktgNaverMapFrame{
  pointer-events:auto!important;
}

/* Keep selector clear of the smaller Android native exit button. */
#ktgMapProviderSelector{
  right:78px!important;
  top:7px!important;
}
@media (min-width:700px){
  #ktgMapProviderSelector{right:82px!important;top:8px!important;}
}

/* STEP31_16 - external maps own their walking footprints.
   Never leave Leaflet footprints floating over an independently panned iframe. */
#map.ktg-provider-kakao .ktg-walking-footprint-wrapper,
#map.ktg-provider-naver .ktg-walking-footprint-wrapper{
  display:none!important;
}


/* STEP31_38 - DRIVE route is rendered natively inside Kakao/NAVER iframe.
   Hide the Leaflet copy so finger pan/pinch cannot create a one-frame geometry mismatch. */
/* STEP35_34 WALKING GHOST ROOT FIX
   External maps render BOTH DRIVE and WALKING routes natively inside their iframe.
   The old CSS hid only the parent Leaflet DRIVE route. The parent Leaflet WALKING
   route (.ktg-walking-route-path) remained in leaflet-overlay-pane (z-index:400),
   ABOVE the Kakao/NAVER iframe (z-index:150), producing the detached gray dotted
   "ghost" seen on both providers. Hide both parent route copies externally. */
#map.ktg-provider-kakao .ktg-drive-route-path,
#map.ktg-provider-naver .ktg-drive-route-path,
#map.ktg-provider-kakao .ktg-walking-route-path,
#map.ktg-provider-naver .ktg-walking-route-path{
  display:none!important;
}


/* STEP35_09 · Provider selector lives in the toolbar above the map. */
#ktgMapToolbarActions #ktgMapProviderSelector{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  transform:none!important;
  z-index:1300!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  gap:5px!important;
}
#ktgMapToolbarActions #ktgMapProviderSelect{
  height:36px!important;
  min-width:96px!important;
  border-radius:10px!important;
  border:1px solid #d7e0ea!important;
  box-shadow:0 2px 8px rgba(15,23,42,.08)!important;
}
@media(max-width:640px){
  #ktgMapToolbarActions #ktgMapProviderSelector .ktg-map-provider-label{display:none!important;}
  #ktgMapToolbarActions #ktgMapProviderSelect{height:34px!important;min-width:78px!important;font-size:10px!important;}
}

/* STEP36_42: provider + direction test belong to the map toolbar, never to the
   navigation/header area.  These final rules intentionally override legacy
   Android absolute-position rules from map-direction-test.css. */
#ktgMapToolbarActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
}
#ktgMapToolbarActions #ktgMapProviderSelector,
.map-is-fullscreen #ktgMapToolbarActions #ktgMapProviderSelector{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
}
#ktgMapToolbarActions #ktgMapProviderSelector .ktg-map-provider-label{display:none!important;}
#ktgMapToolbarActions #ktgDirectionTestToggle,
.map-is-fullscreen #ktgMapToolbarActions #ktgDirectionTestToggle{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  order:1!important;
  width:78px!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
}
#ktgMapToolbarActions #ktgMapProviderSelect{
  position:static!important;
  order:2!important;
  width:112px!important;
  min-width:112px!important;
  height:38px!important;
  margin:0!important;
}
#ktgMapToolbarActions #ktgTopFullscreenButton{order:3!important;margin:0!important;}
@media(max-width:560px){
  #ktgMapToolbarActions{gap:5px!important;}
  #ktgMapToolbarActions #ktgDirectionTestToggle{width:78px!important;height:38px!important;}
  #ktgMapToolbarActions #ktgMapProviderSelect{width:112px!important;min-width:112px!important;height:38px!important;}
}