/* IKCTA tour/map.html — B2C 관광 지도 전용 */
.mapPage {
  --map-side-w: min(340px, 100%);
}

.mapPage .pageInner {
  max-width: 1400px;
}

.mapLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: calc(100dvh - 120px);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

@media (min-width: 900px) {
  .mapLayout {
    grid-template-columns: 1fr var(--map-side-w);
    min-height: calc(100dvh - 140px);
  }
}

.mapMain {
  position: relative;
  min-height: 280px;
  height: 52vh;
  height: var(--ikcta-map-h, 52vh);
  background: #e2e8f0;
  touch-action: none;
  overflow: visible;
}

@media (min-width: 900px) {
  .mapMain {
    height: calc(100dvh - 140px);
    min-height: 420px;
  }
}

#map {
  position: relative;
  display: block;
  width: 100%;
  height: 52vh;
  height: var(--ikcta-map-h, 52vh);
  min-height: 280px;
  z-index: 2;
  background: #e2e8f0;
  overflow: hidden;
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

@media (max-width: 899px) {
  .mapLayout {
    min-height: 0;
  }

  .mapMain,
  #map {
    min-height: 280px;
  }

  #map .leaflet-tile-pane {
    -webkit-transform: translate3d(0, 0, 0);
  }

  /* Mobile WebKit/Blink: Leaflet hides tiles until loaded; plus-lighter blanks on some GPUs */
  #map img.leaflet-tile,
  #map .leaflet-tile,
  #map.leaflet-container img.leaflet-tile {
    mix-blend-mode: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
  }

  #map.leaflet-fade-anim .leaflet-tile,
  #map.leaflet-container.leaflet-fade-anim .leaflet-tile {
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #map.leaflet-container .leaflet-tile-pane {
    opacity: 1 !important;
    z-index: 200 !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  html.ikcta-map-touch #map img.leaflet-tile,
  html.ikcta-map-touch #map .leaflet-tile {
    visibility: visible !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  html.ikcta-map-android #map.leaflet-container .leaflet-map-pane,
  html.ikcta-map-android #map.leaflet-container .leaflet-tile-pane {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  html.ikcta-map-android #map {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    isolation: auto;
  }
}

/* #map becomes .leaflet-container after boot — height/pane rules must cover both */
#map.leaflet-container {
  position: relative !important;
  width: 100% !important;
  height: var(--ikcta-map-h, 52vh) !important;
  min-height: 280px !important;
  overflow: hidden;
  z-index: 2;
  /* Override Leaflet default #aad3df (sky-blue empty look when tiles fail) */
  background: #e2e8f0 !important;
}

#map.leaflet-container .leaflet-tile-pane,
#map.leaflet-container .leaflet-map-pane {
  width: 100%;
  height: 100%;
}

#map img.leaflet-tile {
  mix-blend-mode: normal;
}

.mapMain:not(.mapMain--3d) #map {
  z-index: 2;
}

.mapMain:not(.mapMain--3d) #map3d {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: 0 !important;
}

#map.mapCanvas--booting {
  background: #e2e8f0;
}

#map.mapCanvas--ready {
  animation: none;
}

#map.mapCanvas--ready:has(.leaflet-tile-loaded) {
  background: transparent;
}

#map.mapCanvas--ready:has(.leaflet-tile-loaded) .leaflet-container {
  background: transparent;
}

#map .leaflet-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;
  touch-action: none;
  z-index: 1;
  background: transparent;
}

#map.mapCanvas--booting .leaflet-container {
  background: #e2e8f0;
}

@keyframes mapCanvasShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.mapMain--ready .mapHint--copy {
  opacity: 0.65;
}

#map3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 420px !important;
  z-index: 1;
  background: #0b1220;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#map3d.map3d--sharp {
  position: absolute;
  inset: 0;
  height: 100% !important;
  min-height: 100% !important;
}

#map3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

.mapMain--3d #map {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mapMain--3d #map3d {
  display: block !important;
  visibility: visible !important;
  z-index: 3 !important;
}

.mapMain--3d {
  min-height: 58vh;
  contain: none;
}

@media (min-width: 900px) {
  .mapMain--3d {
    min-height: calc(100dvh - 140px);
  }
}

#map[hidden],
#map3d[hidden] {
  display: none;
}

.mapViewToggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 900;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

/* 우측 상단 — 2D/3D 토글 · 내 위치 세로 스택 (겹침 방지) */
.mapTopRightStack {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: 910;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(220px, calc(100vw - 20px));
  pointer-events: none;
  isolation: isolate;
}

.mapTopRightStack > * {
  pointer-events: auto;
}

.mapTopRightStack .mapViewToggle {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  flex-shrink: 0;
  pointer-events: auto;
}

.mapViewToggle .mapViewBtn {
  pointer-events: auto;
  cursor: pointer;
}

.mapTopRightStack .mapLocateFab {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  flex-shrink: 0;
}

.mapTopRightStack .mapLocateFab__toast {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  margin: 0;
  max-width: min(280px, calc(100vw - 24px));
}

.mapViewBtn {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}

.mapViewBtn.active {
  background: #0ea5e9;
  color: #fff;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.4);
}

.mapViewBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#mapPoiLeaflet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  pointer-events: none;
  background: transparent;
}

#mapPoiLeaflet .leaflet-container {
  background: transparent !important;
  width: 100%;
  height: 100%;
}

#mapPoiLeaflet .leaflet-pane path,
#mapPoiLeaflet .leaflet-interactive {
  pointer-events: auto;
  cursor: pointer;
}

#mapPoiLeaflet .leaflet-tooltip,
#mapPoiLeaflet .leaflet-popup {
  pointer-events: auto;
}

.mapPoiOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  pointer-events: none;
  padding: 10px 10px 0;
}

.mapPoiOverlayInner {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 8px 10px;
  max-width: 100%;
}

.mapPoiCats--onMap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.mapPoiCatBtn--map {
  border: 2px solid #e2e8f0;
  background: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mapPoiCatBtn--map.active,
.mapPoiCatBtn--legend.active {
  border-color: var(--poi-color, #0f766e);
  background: var(--poi-color, #0f766e);
  color: #fff;
}

.mapPoiCatBtn--legend {
  cursor: pointer;
  opacity: 1;
}

.mapPoiAllNote {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: #0f766e;
}

.mapPoiTooltip {
  font-size: 10px;
  max-width: 280px;
  white-space: normal;
  line-height: 1.35;
}

.mapPoiDivIcon {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}

.mapPoiPin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: auto;
}

.mapPoiPinDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pin-color, #0f766e);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.mapPoiPinLabel {
  display: block;
  max-width: 140px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--pin-color, #94a3b8);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapPoiTools--onMap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mapPoiRadiusSelect {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

.mapPoiStatusOnMap {
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
}

.mapHint--copy {
  bottom: 8px;
  font-size: 10px;
  opacity: 0.85;
}

#mapLegend {
  bottom: 32px;
  max-width: min(420px, 92vw);
  font-weight: 600;
}

/* IKCTA 실시간 호출·렌트카 하단 시트 — navHub에서는 차량 네비 패널로 대체 */
#mapTaxiLive,
#mapRentcarLive {
  display: block;
}

/* navHub 기본 숨김 — 단 app=taxi|rentcar 전용 모드는 독·시트 표시 */
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) #mapTaxiLive,
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) #mapRentcarLive,
.mapPage--navHub:not(.mapPage--driverMobility):not(.mapPage--taxiApp):not(.mapPage--rentcarApp) .mobilityDock,
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) .taxiRoleDock,
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) .rentcarRoleDock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mapPage--navHub .mapMain--dualMobility #mapTaxiLive,
.mapPage--navHub .mapMain--dualMobility #mapRentcarLive {
  display: none !important;
}

.mobilityPanelRoots {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.mapPage--rideMobility .mapTaxiSlot {
  display: none !important;
}

.mapMain--dualMobility #mapTaxiLive.mobilityRideSheet--idle {
  z-index: 878;
}

.mapMain--dualMobility #mapRentcarLive.mobilityRideSheet--idle {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 879;
  max-height: min(36vh, 300px);
}

.mapMain--dualMobility #mapTaxiLive.mobilityRideSheet--active,
.mapMain--dualMobility #mapRentcarLive.mobilityRideSheet--active {
  bottom: 0;
  z-index: 882;
}

.mobilityRideSheet--idle,
.mobilityRideSheet--idle {
  max-height: min(38vh, 320px);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
}

/* #mapLegend 는 bottom 고정 + top 추가 시 세로로 늘어나 검정 반투명 덮개가 됨 */
.mapPage--taxiApp .mapHint,
.mapPage--rentcarApp .mapHint,
.mapPage--taxiApp #mapLegend,
.mapPage--rentcarApp #mapLegend {
  top: auto !important;
  bottom: max(100px, calc(88px + env(safe-area-inset-bottom, 0px))) !important;
  left: 12px !important;
  right: auto !important;
  height: auto !important;
  max-height: none !important;
  max-width: min(300px, 68vw) !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  z-index: 520 !important;
}

.mobilityRideSheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  pointer-events: none;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.1);
}

.mobilityRideSheet > * {
  pointer-events: auto;
}

.mobilityRideSheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.2);
}

.mobilityRideSheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mobilityRideSheet__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.mobilityRideBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #e2e8f0;
  color: #334155;
  flex-shrink: 0;
}

.mobilityRideBadge--wait {
  background: #fef3c7;
  color: #92400e;
}

.mobilityRideBadge--ok,
.mobilityRideBadge--ride {
  background: #d1fae5;
  color: #065f46;
}

.mobilityRidePickup {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
}

.mobilityRidePickup__dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  flex-shrink: 0;
}

.mobilityRidePickup__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
}

.mobilityRidePickup__addr {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  word-break: keep-all;
}

.mobilityRideMetrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.mobilityRideMetric {
  background: #fff;
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
}

.mobilityRideMetric__k {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}

.mobilityRideMetric__v {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.mobilityRideRouteBar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.mobilityRideRouteBar__fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.mobilityRideStatus {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.45;
  padding: 0 4px;
}

.mobilityRideActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobilityRideBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mobilityRideBtn--primary {
  color: #1f2937;
  background: linear-gradient(135deg, #fde047, #fbbf24);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.45);
}

.mobilityRideBtn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
}

.mobilityRideBtn--primary:disabled {
  opacity: 0.55;
  cursor: progress;
}

.mobilityRideBtn--ghost {
  color: #64748b;
  background: #f1f5f9;
  min-height: 44px;
  font-size: 14px;
}

.mobilityRideBtn--driver {
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  min-height: 44px;
  font-size: 14px;
}

.mobilityRideSheet--active .mobilityRideBtn--primary {
  display: none;
}

.mobilityRideSheet {
  background: #f8fafc;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.mobilityRideSheet:not(.mobilityRideSheet--active) .mobilityRideBtn--driver {
  display: none;
}

.mobilityRideSheet:not(.mobilityRideSheet--active) .mobilityRideStatus {
  margin-bottom: 8px;
  font-size: 11px;
}

.mobilityRideSheet--active {
  max-height: min(48vh, 420px);
}

@media (max-width: 420px) {
  .mobilityRideMetrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 택시·렌트 앱 — 잡음 UI 제거 · 지도 높이 고정(떨림 방지) */
html.ikcta-app-taxi [data-ikcta-portal-nav],
html.ikcta-app-rentcar [data-ikcta-portal-nav],
html.ikcta-app-taxi .ikctaSelfieEntryBar,
html.ikcta-app-rentcar .ikctaSelfieEntryBar,
html.ikcta-app-taxi .ikctaBilchatEntryBar,
html.ikcta-app-rentcar .ikctaBilchatEntryBar,
.mapPage--taxiApp [data-ikcta-portal-nav],
.mapPage--rentcarApp [data-ikcta-portal-nav],
.mapPage--taxiApp .ikctaSelfieEntryBar,
.mapPage--rentcarApp .ikctaSelfieEntryBar {
  display: none !important;
}

.mapPage--taxiApp .page,
.mapPage--taxiApp .pageInner,
.mapPage--rentcarApp .page,
.mapPage--rentcarApp .pageInner {
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.mapPage--taxiApp .mapLayout,
.mapPage--rentcarApp .mapLayout {
  grid-template-columns: 1fr;
  min-height: 100dvh;
  height: 100dvh;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.mapPage--taxiApp .mapSide,
.mapPage--taxiApp .pageTop,
.mapPage--rentcarApp .mapSide,
.mapPage--rentcarApp .pageTop {
  display: none !important;
}

.mapPage--taxiApp .mapMain,
.mapPage--rentcarApp .mapMain {
  position: relative;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

.mapPage--taxiApp #map,
.mapPage--rentcarApp #map,
.mapPage--taxiApp #map.leaflet-container,
.mapPage--rentcarApp #map.leaflet-container {
  /* 고정 뷰포트 높이 — % 체인은 빈 회색 지도·떨림을 만듦 */
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
}

.mapPage--taxiApp .mapMobileStrip,
.mapPage--rentcarApp .mapMobileStrip,
.mapPage--taxiApp .mapHint--copy,
.mapPage--rentcarApp .mapHint--copy,
.mapPage--taxiApp #mapGuideLegend,
.mapPage--rentcarApp #mapGuideLegend {
  display: none !important;
}

.mapPage--taxiApp .mapViewToggle,
.mapPage--rentcarApp .mapViewToggle {
  top: max(10px, env(safe-area-inset-top, 0px));
}

/*
 * 택시·렌트 앱: #mapTaxiLive 시트가 지도 아래 절반을 덮어 "양분"처럼 보임.
 * 호출 UI는 mobilityPanel(하단 독)만 사용.
 */
.mapPage--taxiApp #mapTaxiLive,
.mapPage--taxiApp #mapRentcarLive,
.mapPage--rentcarApp #mapTaxiLive,
.mapPage--rentcarApp #mapRentcarLive {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* 호출 패널: 지도 대부분 보이게 낮은 하단 시트 */
.mapPage--taxiApp .mapMain > .mobilityPanel,
.mapPage--rentcarApp .mapMain > .mobilityPanel {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  max-height: min(46vh, 420px) !important;
  height: auto !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.22) !important;
  z-index: 960 !important;
}

/* 택시·렌트 앱: 호출·예약 독을 지도 좌하단 한켠에 자그맣게 */
.mapPage--taxiApp .mobilityDock,
.mapPage--rentcarApp .mobilityDock {
  position: fixed !important;
  left: max(8px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  transform: none !important;
  top: max(120px, calc(100px + env(safe-area-inset-top, 0px))) !important;
  bottom: auto !important;
  z-index: 970 !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: 64px !important;
  padding: 6px 5px !important;
  border-radius: 16px !important;
  overflow: visible !important;
}

.mapPage--taxiApp .mobilityDock--dim,
.mapPage--rentcarApp .mobilityDock--dim {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mapPage--taxiApp .mobilityDock,
.mapPage--rentcarApp .mobilityDock,
.mapPage--taxiApp .mobilityDockIcon,
.mapPage--rentcarApp .mobilityDockIcon,
.mapPage--taxiApp .mobilityDockIcon[data-dock-go],
.mapPage--rentcarApp .mobilityDockIcon[data-dock-go] {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
  visibility: visible !important;
}

.mapPage--taxiApp .mobilityDockIcon,
.mapPage--rentcarApp .mobilityDockIcon {
  min-width: 48px !important;
  padding: 2px !important;
  cursor: pointer !important;
}

.mapPage--taxiApp .mobilityDockIcon.is-dock-active,
.mapPage--rentcarApp .mobilityDockIcon.is-dock-active {
  background: rgba(254, 243, 199, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55);
}

.mapPage--taxiApp .mobilityDockIcon.is-dock-active .mobilityDockIcon__img,
.mapPage--rentcarApp .mobilityDockIcon.is-dock-active .mobilityDockIcon__img {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.7), 0 4px 12px rgba(15, 23, 42, 0.18) !important;
  transform: scale(1.06);
}

.mapPage--taxiApp .mobilityDockIcon.is-dock-active .mobilityDockIcon__lbl,
.mapPage--rentcarApp .mobilityDockIcon.is-dock-active .mobilityDockIcon__lbl {
  color: #b45309 !important;
}

.mapPage--taxiApp .mobilityDockIcon--go.is-dock-ready .mobilityDockIcon__go,
.mapPage--rentcarApp .mobilityDockIcon--go.is-dock-ready .mobilityDockIcon__go {
  animation: ikctaDockGoPulse 1.6s ease-in-out 2;
}

@keyframes ikctaDockGoPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.mapPage--taxiApp .mobilityDockIcon__img,
.mapPage--rentcarApp .mobilityDockIcon__img {
  width: 36px !important;
  height: 36px !important;
}

.mapPage--taxiApp .mobilityDockIcon__lbl,
.mapPage--rentcarApp .mobilityDockIcon__lbl {
  font-size: 8px !important;
  line-height: 1.1 !important;
}

.mapPage--taxiApp .mobilityDockActions,
.mapPage--rentcarApp .mobilityDockActions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid #e2e8f0;
  width: 100%;
}

.mapPage--taxiApp .mobilityDockIcon--go .mobilityDockIcon__go,
.mapPage--rentcarApp .mobilityDockIcon--go .mobilityDockIcon__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fde047, #f59e0b);
  color: #1f2937;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
}

.mapPage--taxiApp .mobilityDockIcon--gpsMini .mobilityDockIcon__go,
.mapPage--rentcarApp .mobilityDockIcon--gpsMini .mobilityDockIcon__go {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #334155;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  font-size: 10px;
}

/* 큰 「호출하기」는 독 GO로 대체 */
.mapPage--taxiApp .mobilityCustomerActions,
.mapPage--rentcarApp .mobilityCustomerActions,
.mapPage--taxiApp .mobilityPanel__actions,
.mapPage--rentcarApp .mobilityPanel__actions {
  display: none !important;
}

.mapPage--taxiApp .mobilityCustomerBtn--primary,
.mapPage--rentcarApp .mobilityCustomerBtn--primary,
.mapPage--taxiApp .mobilityPanel__btn--primary,
.mapPage--rentcarApp .mobilityPanel__btn--primary {
  /* legacy override 무력화 — 독 아이콘 사용 */
  display: none !important;
}

/* 택시·렌트 앱: SOS는 호출 독/패널에 가리지 않게 우측 고정 */
.mapPage--taxiApp .emergencySosDock,
.mapPage--rentcarApp .emergencySosDock {
  position: fixed !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  top: max(188px, calc(172px + env(safe-area-inset-top, 0px))) !important;
  bottom: auto !important;
  z-index: 985 !important;
  max-height: calc(100dvh - 160px);
  overflow: auto;
}

.mapPage--taxiApp .emergencySosPanel,
.mapPage--rentcarApp .emergencySosPanel {
  position: fixed !important;
  z-index: 990 !important;
  inset: auto 12px max(88px, env(safe-area-inset-bottom, 0px)) 12px !important;
  max-height: min(70vh, 520px) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(127, 29, 29, 0.28) !important;
}

.taxiDriverApp {
  position: relative;
  min-height: calc(100dvh - 60px);
  padding: 0 !important;
}

.taxiDriverApp .pageTop,
.taxiDriverApp [data-ikcta-portal-nav] {
  display: none;
}

.taxiDriverApp .driverMap {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 100dvh;
  border: none;
  border-radius: 0;
  z-index: 1;
}

.taxiDriverSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  max-width: 520px;
  margin: 0 auto;
  background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.95) 12%, #f8fafc 100%);
  padding-top: 20px;
}

.taxiDriverSheet .mobilityRideBtn--accept {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}

.taxiDriverSheet .mobilityRideBtn--gps {
  color: #0c4a6e;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  min-height: 44px;
  font-size: 14px;
}

.rentcarDriverApp {
  position: relative;
  min-height: 100dvh;
  padding: 0 !important;
}

.rentcarDriverApp .driverMap {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 100dvh;
  border: none;
  border-radius: 0;
  z-index: 1;
}

.rentcarDriverSheet,
.mobilityDriverSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.96) 10%, #f8fafc 100%);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.12);
}

.mobilityDriverSheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #cbd5e1;
}

/* 카카오택시 기사 — 콜 카드 */
.mobilityDriverCallCard {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.mobilityDriverCallCard.is-incoming {
  border-color: #fbbf24;
  background: linear-gradient(180deg, #fffbeb, #fff);
  animation: mobilityDriverIncoming 1.5s ease-in-out infinite;
}

.mobilityDriverPanel--rentcar .mobilityDriverCallCard.is-incoming {
  border-color: #38bdf8;
  background: linear-gradient(180deg, #f0f9ff, #fff);
}

@keyframes mobilityDriverIncoming {
  0%,
  100% {
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.15);
  }
  50% {
    box-shadow: 0 8px 28px rgba(251, 191, 36, 0.35);
  }
}

.mobilityDriverCallCard.is-accepted,
.mobilityDriverCallCard.is-enroute {
  border-color: #86efac;
}

.mobilityDriverPanel--rentcar .mobilityDriverCallCard.is-accepted,
.mobilityDriverPanel--rentcar .mobilityDriverCallCard.is-enroute {
  border-color: #7dd3fc;
}

.mobilityDriverCallCard__badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #111827;
  color: #fff;
}

.mobilityDriverCallCard.is-incoming .mobilityDriverCallCard__badge {
  background: #f59e0b;
}

.mobilityDriverPanel--rentcar .mobilityDriverCallCard.is-incoming .mobilityDriverCallCard__badge {
  background: #0284c7;
}

.mobilityDriverCallCard__title {
  margin: 10px 0 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.mobilityDriverCallCard__pickup {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: #334155;
}

.mobilityDriverVehicleForm {
  margin: 0 0 10px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.mobilityDriverVehicleForm__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
}

.mobilityDriverVehicleForm__field {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.mobilityDriverVehicleForm__field input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 15px;
}

.mobilityDriverActions {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.mobilityDriverBtn {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  background: #fff;
  color: #0f172a;
}

.mobilityDriverBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mobilityDriverBtn--accept {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #16a34a;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
  font-size: 17px;
  min-height: 54px;
}

.mobilityDriverPanel--rentcar .mobilityDriverBtn--accept {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border-color: #0284c7;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
}

.mobilityDriverBtn--gps {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}

.mobilityDriverPanel--rentcar .mobilityDriverBtn--gps {
  background: #f0f9ff;
  border-color: #7dd3fc;
  color: #0c4a6e;
}

.mobilityDriverBtn--call {
  background: #f1f5f9;
}

.mobilityDriverBtn--nav {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.mobilityDriverPanel--rentcar .mobilityDriverBtn--nav {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

.mobilityDriverBtn--load {
  font-size: 13px;
  min-height: 40px;
}

.mobilityDriverPin span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.mobilityDriverPin--pickup span {
  background: #f59e0b;
}

.mobilityDriverPin--me span {
  background: #16a34a;
}

.mobilityPanel--driverMode .mobilityDriverPanel {
  padding: 0;
}

.taxi-map-marker-leaflet,
.taxi-pickup-marker-leaflet {
  background: transparent !important;
  border: none !important;
}

.taxi-map-marker {
  transform: rotate(var(--taxi-h, 0deg));
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  width: 48px;
  height: 48px;
}

.taxi-map-marker--run,
.rentcar-map-marker--run,
.mobilityCarPin--run {
  animation: taxi-drive-pulse 1.2s ease-in-out infinite;
}

.mobilityCarPin {
  position: relative;
  width: 52px;
  height: 52px;
}

.mobilityCarPin__ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.45);
  animation: mobilityCarRing 1.6s ease-out infinite;
  pointer-events: none;
}

.rentcar-map-marker .mobilityCarPin__ring {
  border-color: rgba(2, 132, 199, 0.45);
}

@keyframes mobilityCarRing {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.mobilityPickupPin {
  position: relative;
}

.mobilityPickupPin__pulse {
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.25);
  animation: mobilityPickupPulse 1.8s ease-out infinite;
}

@keyframes mobilityPickupPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.mobility-eta-marker-leaflet {
  background: transparent !important;
  border: none !important;
}

.mobilityEtaChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
  white-space: nowrap;
}

.rentcar-map-marker-leaflet {
  background: transparent !important;
  border: none !important;
}

.rentcar-map-marker {
  transform: rotate(var(--rentcar-h, 0deg));
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  width: 48px;
  height: 48px;
}

@keyframes taxi-drive-pulse {
  0%,
  100% {
    transform: rotate(var(--taxi-h, 0deg)) scale(1);
  }
  50% {
    transform: rotate(var(--taxi-h, 0deg)) scale(1.06);
  }
}

.taxiMapCarSvg {
  width: 48px;
  height: 48px;
  display: block;
}

.taxi-pickup-marker {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.taxi-pickup-marker__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2563eb;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5);
}

.taxi-pickup-marker__lbl {
  font-size: 10px;
  font-weight: 800;
  color: #1e40af;
  background: rgba(255, 255, 255, 0.95);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #93c5fd;
}

.taxiBtn--sm {
  font-size: 10px;
  padding: 5px 10px;
}

.mapTaxiSlot--primary {
  border: 2px solid #fdba74;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
}

.character-wrap {
  min-height: 280px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.map3d-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 18px;
  text-align: center;
}

.map3d-static__face {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.18));
}

.map3d-static__label {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.map3d-static__note {
  margin: 0;
  max-width: 220px;
}

.map3d-loading {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 10px;
  border-radius: 8px;
  pointer-events: none;
}

.taxiProgramLinks {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#map .leaflet-tile-pane {
  opacity: 1;
  z-index: 2;
}

/* Leaflet 기본(로드 전 hidden) 유지 — 모바일 Safari에서 loaded 클래스 지연 시 빈 지도 방지 */
#map .leaflet-tile-loaded {
  visibility: visible !important;
  opacity: 1 !important;
}

.mapHint {
  position: absolute;
  left: 12px;
  bottom: 36px;
  z-index: 500;
  background: rgba(15, 23, 42, 0.82);
  color: #e2e8f0;
  font-size: 11px;
  padding: 8px 11px;
  border-radius: 10px;
  max-width: min(360px, 88vw);
  pointer-events: none;
  line-height: 1.45;
}

.mapLoadErrLine {
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.35;
}

#mapLoadErr {
  display: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  max-height: 120px;
  overflow-y: auto;
}

#mapLoadErr[aria-hidden="false"] {
  display: block;
}

.mapSide {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow-y: auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
  max-height: 72vh;
}

@media (min-width: 900px) {
  .mapSide {
    border-top: none;
    border-left: 1px solid #e2e8f0;
    max-height: none;
    align-self: stretch;
  }
}

.mapSideSection {
  width: min(320px, 100%);
}

.mapSideSection h2 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.mapSideSection .muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.mapSide__regionHint {
  margin-top: 8px;
  text-align: center;
}

.mapVisitSelfieBtn {
  width: 100%;
  margin-top: 10px;
  font-weight: 700;
}
.mapVisitSelfieNote {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.78rem;
}

.character-wrap {
  width: 100%;
  min-width: 0;
  /* 3:4 — 전신이 박스 안에 들어가도록 (min-height 강제 금지) */
  aspect-ratio: 3 / 4;
  height: auto;
  max-height: min(360px, 52vh);
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(165deg, #ecfeff 0%, #e0f2fe 48%, #f5f3ff 100%);
  border: 1px solid #cbd5e1;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

.mapCharacterStage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 6px;
  padding: 10px 12px 14px;
  box-sizing: border-box;
}

.mapCharacterStage__canvas {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 12px 10px 16px;
  box-sizing: border-box;
}

.mapCharacterStage__portrait {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #0ea5e9;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  z-index: 2;
  pointer-events: none;
}

.mapCharacterStage__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.mapCharacterStage__mascot {
  display: block;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  object-position: center center;
  margin: auto;
  padding: 0;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  /* 전신이 박스 안에 + 좌우 살짝 흔들림 */
  animation: mapMascotSway 2.8s ease-in-out infinite;
}

@keyframes mapMascotSway {
  0%,
  100% {
    transform: rotate(-2deg) translateX(-3px);
  }
  50% {
    transform: rotate(2deg) translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mapCharacterStage__mascot {
    animation: none;
    transform: none;
  }
}

.mapCharacterRegionName {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.35;
}

.character-wrap > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.mapCharacterStage__canvas canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

.mapSideSection[aria-label="3D 캐릭터"] h2,
.mapSideSection[aria-label="3D 캐릭터"] .mapSide__regionHint {
  text-align: center;
  width: 100%;
}

.regionChips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  width: 100%;
  justify-items: stretch;
}

.regionChips button {
  border: 1px solid #94a3b8;
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  width: 100%;
  line-height: 1.25;
}

.regionChips button:hover {
  border-color: #0ea5e9;
  color: #0369a1;
}

.regionChips__btn--active,
.regionChips button.regionChips__btn--active {
  border-color: var(--chip-accent, #0ea5e9);
  background: color-mix(in srgb, var(--chip-accent, #0ea5e9) 12%, #fff);
  color: #0f172a;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-accent, #0ea5e9) 35%, transparent);
}

#map .leaflet-marker-pane {
  z-index: 680 !important;
}

#map .leaflet-marker-pane .mapGuideDivIcon {
  z-index: 680 !important;
}

.mapGuideDivIcon {
  background: transparent;
  border: none;
}

.mapGuideLegend {
  position: absolute;
  left: max(10px, env(safe-area-inset-left, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 905;
  margin: 0;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  pointer-events: none;
}

.mapGuideLegend strong {
  color: #0369a1;
  font-weight: 800;
}

.mapGuidePin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  filter: drop-shadow(0 3px 10px rgba(15, 23, 42, 0.4));
  transform: translateZ(0);
}

.mapGuidePin__img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: contain;
  object-position: center bottom;
  padding: 3px;
  border: 3px solid var(--guide-accent, #0f766e);
  background: #fff;
  box-sizing: border-box;
}

.mapGuidePin__emoji {
  font-size: 32px;
  line-height: 1;
  padding: 6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--guide-accent, #0f766e);
}

.mapGuidePin__name {
  max-width: 84px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.mapGuidePin--active .mapGuidePin__img,
.mapGuidePin--active .mapGuidePin__emoji {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px color-mix(in srgb, var(--guide-accent, #0ea5e9) 70%, #fff);
  transform: scale(1.06);
}

@media (max-width: 899px) {
  .mapGuidePin__img {
    width: 58px;
    height: 58px;
    border-width: 4px;
  }

  .mapGuidePin__name {
    font-size: 12px;
    max-width: 92px;
  }

  .mapGuideLegend {
    font-size: 12px;
    bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 56px));
  }
}

.mapGuidePopupWrap .leaflet-popup-content-wrapper {
  border-radius: 14px;
  border: 1px solid #bae6fd;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.mapGuideHero {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ecfeff 0%, #fff 55%, #f0fdf4 100%);
  border: 1px solid #bae6fd;
  box-sizing: border-box;
}

.mapGuideHero__face,
.mapGuideHero__emoji {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 36px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #0ea5e9;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.2);
  object-fit: contain;
}

.mapGuideHero__face[hidden],
.mapGuideHero__emoji[hidden] {
  display: none !important;
}

.regionChips__img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  object-position: center center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* 전신이 타원 칩 안에 보이도록 */
  transform: scale(0.88);
  transform-origin: center center;
}

.mapGuidePin__img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin: 0 auto 2px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--guide-accent, #0f766e);
}

.mapGuideHero__badge {
  margin: 4px 0 0;
  font-weight: 700;
  color: #0369a1;
}

.regionChips__emoji {
  font-size: 22px;
  line-height: 1;
}

.mapGuidePin--emojiOnly .mapGuidePin__emoji {
  font-size: 34px;
  padding: 8px;
}

.mapGuideHero__name {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
}

.mapGuideHero__region {
  margin: 0;
}

.regionChips__btn--guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 10px;
  min-height: 72px;
}

.regionChips__thumbWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--chip-accent, #0ea5e9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.regionChips__thumb {
  width: 34px;
  height: 34px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 50%;
}

.regionChips__label {
  font-size: 11px;
  line-height: 1.2;
}

.regionChips__btn--active .regionChips__thumbWrap {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--chip-accent, #0ea5e9);
}

.mapGuidePopup__role {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 800;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mapGuidePopup__btn {
  margin-top: 8px;
  border: 1px solid #0ea5e9;
  background: #ecfeff;
  color: #0369a1;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.rcHubCard__map {
  margin: 8px 0 0;
}

.rcHubCard__map a {
  font-weight: 700;
}

.map-ai-panel {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
}

.mapAiPanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.map-ai-panel h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.mapAiGpsBtn {
  flex-shrink: 0;
  border: 1px solid #0ea5e9;
  background: #ecfeff;
  color: #0369a1;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.mapAiGpsBtn:hover,
.mapAiGpsBtn:focus-visible {
  background: #cffafe;
}

.mapAiGpsBtn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.map-ai-panel--hidden {
  display: none !important;
}

.mapTourismRestoreBtn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1250;
  margin: 0;
  padding: 12px 8px;
  border: 1px solid #7dd3fc;
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
  color: #0369a1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(14, 165, 233, 0.18);
}

.mapTourismRestoreBtn:hover,
.mapTourismRestoreBtn:focus-visible {
  background: #cffafe;
  outline: none;
}

body:not(.map-layout--tourism-ai-hidden) .mapTourismRestoreBtn {
  display: none !important;
}

.mapVehicleNav__tourism {
  margin: 10px 0 0;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
}

.mapVehicleNavTourismDrawer {
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
}

.mapVehicleNavTourismDrawer__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
}

.mapVehicleNavTourismDrawer__summary::-webkit-details-marker {
  display: none;
}

.mapVehicleNavTourismDrawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  padding: 2px 6px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.mapVehicleNavTourismDrawer__text {
  margin: 0;
  padding: 0 10px 6px;
  line-height: 1.45;
}

.mapVehicleNavTourismDrawer__chat {
  margin: 0 8px 8px;
  max-height: 280px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.mapVehicleNavTourismDrawer__chat .rcPanel {
  max-height: 280px;
  box-shadow: none;
  border: none;
}

.mapVehicleNav__lbsSlot {
  margin: 0 8px 6px;
}

.mapVehicleNav--tourismActive .mapVehicleNav__tourism {
  display: block;
}

.mapVehicleNav__itinerary {
  margin: 8px 0 0;
  border-top: 1px dashed #cbd5e1;
  padding-top: 8px;
}

.mapVehicleNavItineraryDrawer {
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  background: #f0fdf4;
  overflow: hidden;
}

.mapVehicleNavItineraryDrawer__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  color: #065f46;
  cursor: pointer;
  list-style: none;
}

.mapVehicleNavItineraryDrawer__summary::-webkit-details-marker {
  display: none;
}

.mapVehicleNavItineraryDrawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  padding: 2px 6px;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.mapVehicleNavItinerary__genBtn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #059669;
  border-radius: 8px;
  background: #fff;
  color: #047857;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.mapVehicleNavItinerary__body {
  padding: 0 10px 10px;
  font-size: 12px;
  line-height: 1.45;
  max-height: 240px;
  overflow-y: auto;
}

.mapVehicleNavItinerary__days {
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
}

.mapVehicleNavItinerary__day {
  margin-bottom: 8px;
}

.mapVehicleNavItinerary__day ul {
  margin: 4px 0 0;
  padding-left: 0;
  list-style: none;
}

.mapVehicleNavItinerary__day li {
  margin: 4px 0;
  padding: 4px 0;
  border-bottom: 1px solid #d1fae5;
}

.mapVehicleNavItinerary__time {
  display: inline-block;
  min-width: 3.2em;
  font-weight: 700;
  color: #047857;
}

.mapVehicleNavItinerary__cat {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #dcfce7;
  font-size: 10px;
  color: #166534;
}

.mapVehicleNavItinerary__navBtn {
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid #0ea5e9;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.mapVehicleNavItinerary__link {
  margin-left: 6px;
  font-size: 10px;
  color: #0369a1;
}

#mapStatusBar {
  font-size: 11px;
  color: #475569;
  margin: 0 0 8px;
  line-height: 1.4;
}

#mapInlineChat .rcGuideChip,
#mapInlineChat .rcPanelTitle,
#mapInlineChat .rcToolbar__field {
  text-align: center;
}

#mapInlineChat .rcGuideChip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 6px;
}

#mapInlineChat .rcGuideChip__region {
  font-size: 12px;
  font-weight: 700;
  color: #67e8f9;
}

#mapInlineChat .rcPanel {
  box-shadow: none;
  border: none;
  max-height: 320px;
}

#mapInlineChat .rcPanelBody {
  padding: 0;
}

.mapTaxiSlot {
  min-height: 48px;
}

.mapArPanel {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.mapArPanel .taxiHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #ecfeff, #f5f3ff);
  border-bottom: 1px solid #e2e8f0;
}

.mapArPanel .taxiTitle {
  font-weight: 800;
  font-size: 13px;
}

.mapArPanel .taxiBody {
  padding: 10px 12px;
}

.mapArPanel .taxiActions,
.taxi--pickup .taxiActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.taxiRosterCalls,
.taxiPartnerList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.taxiAppSplitNote {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  background: #f0f9ff;
  border-radius: 10px;
  border: 1px solid #bae6fd;
}

.taxiRoleTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.taxiRoleTab {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.taxiRoleTab--active {
  border-color: #0ea5e9;
  background: #e0f2fe;
  color: #0c4a6e;
}

.taxiAppBroadcast {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ecfdf5, #f0f9ff);
  border: 1px solid #6ee7b7;
}

.taxiAppBroadcastLead {
  margin: 0 0 6px;
  font-size: 14px;
}

.taxiLegacyPartners {
  margin-top: 8px;
  font-size: 13px;
}

.taxiLegacyPartners summary {
  cursor: pointer;
  font-weight: 700;
}

.taxiPickupCard {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.taxiPlaceName {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
}

.taxiPlaceCategory {
  margin: 0 0 8px;
  font-size: 11px;
}

.taxiLine {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 6px;
}

.taxiLine:last-child {
  margin-bottom: 0;
}

.taxiK {
  flex: 0 0 52px;
  font-weight: 800;
  color: #64748b;
}

.taxiV {
  flex: 1;
  color: #0f172a;
  word-break: break-word;
}

.taxiAppPane {
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #e2e8f0;
}

.taxiAppPane--customer {
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
  border-color: #fdba74;
}

.taxiAppPane--driver {
  background: linear-gradient(180deg, #ecfeff 0%, #fff 100%);
  border-color: #67e8f9;
}

.taxiAppPaneHead {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.taxiAppPaneIcon {
  font-size: 22px;
  line-height: 1;
}

.taxiAppPaneTitle {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.taxiAppPaneSub {
  margin: 2px 0 0;
  font-size: 11px;
}

.taxiPartnersLead {
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #9a3412;
}

.taxiPartnerCard {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.taxiPartnerCard--primary {
  border-color: #fb923c;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.15);
}

.taxiPartnerCardHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.taxiPartnerBadge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffedd5;
  color: #c2410c;
}

.taxiPartnerCard--primary .taxiPartnerBadge {
  background: #ea580c;
  color: #fff;
}

.taxiPartnerName {
  font-size: 14px;
  color: #0f172a;
}

.taxiPartnerSub {
  margin: 0 0 8px;
  font-size: 11px;
}

.taxiPartnerRoleRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.taxiPartnerRole {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0369a1;
}

.taxiPartnerActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.taxiPartnerActions .taxiBtn {
  width: 100%;
  margin: 0;
  font-size: 11px;
  padding: 10px 8px;
}

.taxiCustomerTools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.taxiDriverNote {
  font-size: 11px;
  line-height: 1.45;
  margin: 0 0 10px;
}

.taxiBtn--block {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  text-decoration: none;
  box-sizing: border-box;
}

.taxiLegal {
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
}

.taxiLegal summary {
  cursor: pointer;
  font-weight: 700;
  color: #475569;
}

.taxi--pickup .taxiHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.taxi--pickup .taxiTitle {
  font-weight: 800;
  font-size: 14px;
}

.taxi--pickup .taxiBtn {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #0f172a;
}

.taxi--pickup .taxiBtn.primary {
  background: linear-gradient(135deg, #ea580c, #f97316);
  border-color: #ea580c;
  color: #fff;
}

.taxi--pickup .taxiBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.taxiBtn--legacy {
  display: none !important;
}

.driverMap {
  width: 100%;
  height: 46vh;
  min-height: 260px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.driverPickupPlace {
  margin: 10px 0 4px;
  font-size: 15px;
}

.driverStatus {
  margin: 4px 0 12px;
}

.driverActions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.taxiLbs {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
}

.taxiLbsConsent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: #0f766e;
  cursor: pointer;
}

.taxiLbsNote,
.taxiLbsStatus,
.taxiProtectNote,
.taxiBillingNote {
  font-size: 11px;
  line-height: 1.45;
  color: #475569;
  margin: 6px 0 0;
}

.taxiBillingNote {
  color: #64748b;
  font-size: 10px;
}

.taxiLbsActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.taxiDynamics,
.taxiRegionBriefs {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
}

.taxiDynamicsTitle {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #92400e;
}

.taxiDynamicsStatus {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  line-height: 1.45;
}

.taxiDynamicsMeta {
  margin: 4px 0 0;
  font-size: 10px;
}

.taxiBriefList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.taxiBriefItem {
  padding: 8px 0;
  border-bottom: 1px solid #fde68a;
  font-size: 11px;
  line-height: 1.45;
}

.taxiBriefItem strong {
  display: block;
  color: #78350f;
}

.taxiBriefItem p {
  margin: 4px 0 0;
  color: #44403c;
}

.leaflet-pane path.leaflet-interactive {
  cursor: pointer;
}

.mapArPanel .taxiBtn {
  border: 1px solid #94a3b8;
  background: #f8fafc;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.mapArPanel .taxiBtn.primary {
  border-color: #0f766e;
  background: #0f766e;
  color: #fff;
}

.mapArPanel .taxiHint {
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
  text-align: center;
}

.taxiDispatchBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #e2e8f0;
  color: #334155;
}
.taxiDispatchBadge--wait {
  background: #fef3c7;
  color: #92400e;
}
.taxiDispatchBadge--ok {
  background: #d1fae5;
  color: #065f46;
}
.taxiDispatchBadge--bad {
  background: #fee2e2;
  color: #991b1b;
}

/* 지도 위 간편 호출 FAB — mapMain 안에 붙이면 지도 영역 우하단 */
.mapMain > .taxiFab {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 860;
}

.taxiFab {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  color: #1f2937;
  background: linear-gradient(135deg, #fde047, #fbbf24);
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.38);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.taxiFab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(180, 83, 9, 0.45);
}
.taxiFab:active {
  transform: translateY(0);
}
.taxiFab__ico {
  font-size: 20px;
  line-height: 1;
}
.taxiFab.is-busy {
  filter: saturate(0.6) brightness(0.95);
  cursor: progress;
}
.taxiFab.is-busy::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(31, 41, 55, 0.35);
  border-top-color: #1f2937;
  border-radius: 50%;
  animation: taxiFabSpin 0.7s linear infinite;
}
.taxiFab.is-active {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #064e3b;
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.4);
}
.taxiFab--accept {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  color: #052e16;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.4);
}
.taxiFab--accept.is-done {
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
  color: #0b2a5b;
}
@keyframes taxiFabSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 640px) {
  .taxiFab {
    right: 12px;
    bottom: 16px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* 택시 고객·기사 아이콘 — 탭 시 패널 안 미니 지도 (모바일) */
.taxiRoleDock {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 870;
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.taxiRoleDock--dim {
  opacity: 0.35;
  pointer-events: none;
}

.taxiRoleIcon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.15s ease, background 0.15s ease;
  min-width: 58px;
}

.taxiRoleIcon:hover,
.taxiRoleIcon:focus-visible {
  transform: translateY(-2px);
  background: rgba(241, 245, 249, 0.9);
  outline: none;
}

.taxiRoleIcon__img {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}

.taxiRoleIcon__lbl {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  letter-spacing: -0.02em;
}

.taxiRoleIcon--customer.is-active .taxiRoleIcon__lbl {
  color: #047857;
}

.taxiRoleIcon--customer.is-active .taxiRoleIcon__img {
  box-shadow: 0 0 0 3px #34d399, 0 4px 14px rgba(5, 150, 105, 0.35);
}

.taxiRolePanel {
  position: absolute;
  inset: 0;
  z-index: 920;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  overflow: hidden;
}

.taxiRolePanel[hidden] {
  display: none !important;
}

.taxiRolePanel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.taxiRolePanel__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.taxiRolePanel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.taxiRolePanel__mapWrap {
  flex: 1 1 58%;
  min-height: 220px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #cbd5e1;
}

.taxiRolePanel__map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  touch-action: none;
}

.taxiRolePanel__mapHint {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #e2e8f0;
}

.taxiRolePanel__body {
  flex: 0 0 auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e2e8f0;
  max-height: 42%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.taxiRolePanel__lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

.taxiRolePanel__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
}

.taxiRolePanel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.taxiRolePanel__btn {
  flex: 1 1 calc(50% - 4px);
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.taxiRolePanel__btn--primary {
  color: #422006;
  background: linear-gradient(135deg, #fde047, #fbbf24);
  border-color: #f59e0b;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.25);
}

.taxiRolePanel__btn--accept {
  color: #052e16;
  background: linear-gradient(135deg, #4ade80, #16a34a);
  border-color: #16a34a;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}

.taxiRolePanel__status {
  margin: 0;
  line-height: 1.45;
}

.taxiRolePanel--customer .taxiRolePanel__head {
  border-top: 3px solid #0ea5e9;
}

.taxiRolePanel--driver .taxiRolePanel__head {
  border-top: 3px solid #16a34a;
}

body.taxiRolePanel-open .mapHint,
body.taxiRolePanel-open #mapTaxiLive,
body.rentcarRolePanel-open .mapHint,
body.rentcarRolePanel-open #mapRentcarLive {
  display: none;
}

@media (min-width: 900px) {
  .taxiRolePanel {
    inset: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    max-height: min(72vh, 560px);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    border: 1px solid #e2e8f0;
  }

  .taxiRoleDock {
    left: auto;
    right: 14px;
    bottom: 14px;
    transform: none;
  }
}

.mapPage--taxiApp .taxiRoleDock {
  bottom: max(72px, calc(14px + env(safe-area-inset-bottom, 0px)));
}

.mapPage--taxiApp .taxiRolePanel {
  inset: 0;
  max-height: none;
  border-radius: 0;
}

/* 콜 수락 · 차량 정보 카드 */
.taxiAcceptCard {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.taxiAcceptCard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.taxiAcceptBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.taxiAcceptBadge--wait {
  background: #fef3c7;
  color: #92400e;
}

.taxiAcceptBadge--ok {
  background: #d1fae5;
  color: #065f46;
}

.taxiVehicleInfo {
  margin: 0;
  display: grid;
  gap: 6px;
}

.taxiVehicleInfo__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}

.taxiVehicleInfo__row dt {
  margin: 0;
  min-width: 64px;
  color: #64748b;
  font-weight: 600;
}

.taxiVehicleInfo__row dd {
  margin: 0;
  color: #0f172a;
  font-weight: 700;
}

.taxiVehicleInfo__pending {
  margin: 0;
}

.mobilityRideSheet [data-slot="accept-vehicle"]:not([hidden]) {
  margin: 0 0 10px;
}

.taxiAcceptSlot:not([hidden]),
.mobilityRideSlot:not([hidden]) {
  margin-bottom: 10px;
}

/* 카카오택시 스타일 — 수락·배차 고객 카드 */
.mobilityRideCard {
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.mobilityRideCard--taxi.is-accepted {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 55%);
}

.mobilityRideCard--rentcar.is-accepted {
  border-color: #bae6fd;
  background: linear-gradient(180deg, #f0f9ff 0%, #fff 55%);
}

.mobilityRideCard__top {
  margin-bottom: 10px;
}

.mobilityRideCard__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mobilityRideCard__badge--wait {
  background: #fef3c7;
  color: #92400e;
}

.mobilityRideCard__badge--ok {
  background: #111827;
  color: #fff;
}

.mobilityRideCard--rentcar .mobilityRideCard__badge--ok {
  background: #0369a1;
}

.mobilityRideCard__headline {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.mobilityRideCard__etaHero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 4px 0 12px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
}

.mobilityRideCard--rentcar .mobilityRideCard__etaHero {
  background: #0369a1;
}

.mobilityRideCard__etaHero--soft {
  background: #f1f5f9;
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
}

.mobilityRideCard__etaHero--search {
  background: #fff7ed;
  color: #9a3412;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
}

.mobilityRideCard__etaNum {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mobilityRideCard__etaLbl {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.92;
}

.mobilityRideCard__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f97316;
  animation: mobilityRidePulse 1.2s ease-in-out infinite;
}

@keyframes mobilityRidePulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

.mobilityRideCard__driver {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.mobilityRideCard__avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.mobilityRideCard--rentcar .mobilityRideCard__avatar {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.mobilityRideCard__driverBody {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mobilityRideCard__name {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.mobilityRideCard__plate {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #111827;
  line-height: 1.1;
}

.mobilityRideCard__plate--wait {
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 700;
  color: #64748b;
}

.mobilityRideCard__car,
.mobilityRideCard__company {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

.mobilityRideCard__pickup {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12px;
  line-height: 1.45;
  color: #334155;
}

.mobilityRideCard__pickup span {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.mobilityRideCard__facts {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #0369a1;
}

.mobilityRideCard--taxi .mobilityRideCard__facts {
  color: #b45309;
}

.mobilityRideCard__progress {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: 10px;
}

.mobilityRideCard__progress i {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: width 0.35s ease;
}

.mobilityRideCard--rentcar .mobilityRideCard__progress i {
  background: linear-gradient(90deg, #38bdf8, #0284c7);
}

.mobilityRideCard__safeCall {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  background: #f1f5f9;
  cursor: pointer;
}

.mobilityRideCard__safeCall:hover,
.mobilityRideCard__safeCall:focus-visible {
  background: #e2e8f0;
}

.mobilityPanel .mobilityRideCard {
  margin-bottom: 8px;
}

.mobilityRideSheet .mobilityRideCard {
  margin-bottom: 10px;
}

.mobilityRideSheet .mobilityRideCard {
  margin-bottom: 10px;
}

/* 카카오택시 고객 — 진행 단계·픽업·액션 */
.mobilityCustomerSteps {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.mobilityCustomerSteps__item {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  background: #f1f5f9;
}

.mobilityCustomerSteps__item.is-active {
  color: #0f172a;
  background: #fde68a;
}

.mobilityCustomerPanel--rentcar .mobilityCustomerSteps__item.is-active,
.mobilityRideSheet .mobilityCustomerSteps__item.is-active {
  background: #bae6fd;
  color: #0c4a6e;
}

.mobilityCustomerSteps__item.is-done {
  color: #64748b;
  background: #e2e8f0;
}

.mobilityCustomerPickup {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
}

.mobilityCustomerPickup__dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  flex-shrink: 0;
}

.mobilityCustomerPanel--rentcar .mobilityCustomerPickup__dot,
.mobilityRideSheet .mobilityCustomerPickup__dot {
  background: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

.mobilityCustomerPickup__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
}

.mobilityCustomerPickup__addr {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  word-break: keep-all;
}

.mobilityCustomerActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.mobilityCustomerBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mobilityCustomerBtn--primary {
  color: #1f2937;
  background: linear-gradient(135deg, #fde047, #fbbf24);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.45);
}

.mobilityCustomerPanel--rentcar .mobilityCustomerBtn--primary,
.mobilityRideSheet .mobilityCustomerBtn--primary {
  color: #fff;
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35);
}

.mobilityCustomerBtn--gps {
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  min-height: 44px;
  font-size: 14px;
}

.mobilityCustomerBtn--cancel {
  color: #64748b;
  background: #f1f5f9;
  min-height: 44px;
  font-size: 14px;
}

.mobilityCustomerBtn--driver {
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  min-height: 44px;
  font-size: 14px;
}

.mobilityCustomerPanel--rentcar .mobilityCustomerBtn--driver,
.mobilityRideSheet .mobilityCustomerBtn--driver {
  color: #0c4a6e;
  background: #f0f9ff;
  border-color: #7dd3fc;
}

.mobilityCustomerBtn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
}

.mobilityCustomerBtn--primary:disabled {
  opacity: 0.55;
  cursor: progress;
}

.mobilityCustomerConsent {
  margin: 8px 0;
}

.mobilityCustomerStatus {
  margin: 8px 0 0;
  line-height: 1.45;
}

.mobilityCustomerPanel.is-accepted .mobilityCustomerBtn--gps {
  display: none;
}

.mobilityCustomerBadge--wait {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.mobilityCustomerBadge--ok {
  background: #d1fae5 !important;
  color: #065f46 !important;
}

.mobilityCustomerBadge--ride {
  background: #111827 !important;
  color: #fff !important;
}

.mobilityRideSheet--active .mobilityCustomerBtn--primary,
.mobilityRideSheet--active .mobilityCustomerBtn--primary {
  display: none;
}

.mobilityRideSheet:not(.mobilityRideSheet--active) .mobilityCustomerBtn--driver,
.mobilityRideSheet:not(.mobilityRideSheet--active) .mobilityCustomerBtn--driver {
  display: none;
}

.taxiCustomerApp,
.rentcarCustomerApp {
  position: relative;
  min-height: 100dvh;
  padding: 0 !important;
}

.taxiCustomerApp .customerMap,
.rentcarCustomerApp .customerMap,
.mapMain--mobilityPwa .customerMap,
.mapMain--mobilityPwa .driverMap {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 100dvh;
  border: none;
  border-radius: 0;
  z-index: 1;
}

.mapMain--mobilityPwa {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.taxiCustomerSheet,
.rentcarCustomerSheet,
.mobilityCustomerSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.96) 10%, #f8fafc 100%);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.12);
  max-height: min(52vh, 440px);
  overflow-y: auto;
}

.mobilityCustomerSheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #cbd5e1;
}

.mobilityCustomerPin {
  background: transparent;
  border: none;
}

.mobilityCustomerPin span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.mobilityCustomerPin--pickup span {
  background: #2563eb;
}

.mobilityCustomerPin--driver span {
  background: #f59e0b;
}

.rentcarCustomerApp .mobilityCustomerPin--driver span {
  background: #0284c7;
}

.mobilityPanel--taxi .mobilityCustomerPanel.is-accepted .mobilityRideCard,
.mobilityPanel--rentcar .mobilityCustomerPanel.is-accepted .mobilityRideCard {
  margin-top: 4px;
}

/* 모빌리티 AI 안내 (아이콘 클릭 시) */
.mobilityPanel__aiBrief:not([hidden]) {
  margin: 8px 0;
}

.mobilityTourismStack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
}
.mobilityTourismStack .mobilityPanel__lbs,
.mobilityTourismStack .mobilityPanel__aiBrief {
  margin: 0;
}
.taxi .mobilityTourismStack,
.taxiApp .mobilityTourismStack {
  padding: 0 2px 8px;
}

.mobilityAiBriefDrawer {
  border-radius: 14px;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
  border: 1px solid #bbf7d0;
  padding: 10px 12px;
}

.mobilityPanel--rentcar .mobilityAiBriefDrawer,
.mobilityCustomerPanel--rentcar .mobilityAiBriefDrawer,
.mobilityDriverPanel--rentcar .mobilityAiBriefDrawer {
  background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
  border-color: #bae6fd;
}

.mobilityAiBriefDrawer__summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobilityAiBriefDrawer__summary::-webkit-details-marker {
  display: none;
}

.mobilityAiBriefDrawer__badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  background: #111827;
  color: #fff;
}

.mobilityPanel--rentcar .mobilityAiBriefDrawer__badge {
  background: #0369a1;
}

.mobilityAiBriefDrawer__text {
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
  white-space: pre-line;
}

.mobilityAiBriefDrawer__chat {
  margin-top: 6px;
  max-height: 220px;
  overflow: hidden;
  border-radius: 12px;
}

.mobilityAiBriefDrawer__chat .rcPanel {
  max-height: 220px;
}

.map-ai-panel--mobility-active {
  outline: 2px solid #86efac;
  outline-offset: 2px;
  border-radius: 12px;
}

.rcMsg--mobility-brief {
  border-left: 3px solid #22c55e;
  padding-left: 8px;
  margin-top: 6px;
}

.taxiDriverVehicleForm {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.taxiDriverVehicleForm__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.taxiDriverVehicleForm__field {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.taxiDriverVehicleForm__field input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
}

/* ── 렌트카 호출 (택시와 동일 UX, 블루 테마) ── */
.mobilityRideSheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  pointer-events: none;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  max-height: min(42vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.mobilityRideSheet > * {
  pointer-events: auto;
}

.mobilityRideSheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.2);
}

.mobilityRideSheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mobilityRideSheet__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.mobilityRideBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #e2e8f0;
  color: #334155;
  flex-shrink: 0;
}

.mobilityRideBadge--wait {
  background: #e0f2fe;
  color: #0369a1;
}

.mobilityRideBadge--ok,
.mobilityRideBadge--ride {
  background: #d1fae5;
  color: #065f46;
}

.mobilityRidePickup {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
}

.mobilityRidePickup__dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
  flex-shrink: 0;
}

.mobilityRidePickup__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
}

.mobilityRidePickup__addr {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  word-break: keep-all;
}

.mobilityRideMetrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.mobilityRideMetric {
  background: #fff;
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
}

.mobilityRideMetric__k {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}

.mobilityRideMetric__v {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.mobilityRideRouteBar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.mobilityRideRouteBar__fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0284c7);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.mobilityRideStatus {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.45;
  padding: 0 4px;
}

.mobilityRideActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobilityRideBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mobilityRideBtn--primary {
  color: #0c4a6e;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45);
}

.mobilityRideBtn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
}

.mobilityRideBtn--primary:disabled {
  opacity: 0.55;
  cursor: progress;
}

.mobilityRideBtn--ghost {
  color: #64748b;
  background: #f1f5f9;
  min-height: 44px;
  font-size: 14px;
}

.mobilityRideBtn--driver {
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  min-height: 44px;
  font-size: 14px;
}

.mobilityRideSheet--active .mobilityRideBtn--primary {
  display: none;
}

.mobilityRideSheet:not(.mobilityRideSheet--active) .mobilityRideBtn--driver {
  display: none;
}

.mobilityRideSheet:not(.mobilityRideSheet--active) .mobilityRideStatus {
  margin-bottom: 8px;
  font-size: 11px;
}

.mobilityRideSheet--active {
  max-height: min(48vh, 420px);
}

.mobilityRideSheet [data-slot="accept-vehicle"]:not([hidden]) {
  margin: 0 0 10px;
}

@media (max-width: 420px) {
  .mobilityRideMetrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mapPage--rentcarApp .page,
.mapPage--rentcarApp .pageInner {
  min-height: 100dvh;
  height: 100dvh;
}

.mapPage--rentcarApp .mapLayout {
  grid-template-columns: 1fr;
  min-height: 100dvh;
  height: 100dvh;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.mapPage--rentcarApp .mapSide,
.mapPage--rentcarApp .pageTop {
  display: none;
}

.mapPage--rentcarApp .mapMain {
  min-height: 100dvh;
  height: 100dvh;
}

.mapPage--rentcarApp .mapViewToggle {
  top: max(10px, env(safe-area-inset-top, 0px));
}

.mapPage--rentcarApp .rentcarRoleDock {
  bottom: max(72px, calc(14px + env(safe-area-inset-bottom, 0px)));
}

.mapPage--rentcarApp .rentcarRolePanel {
  inset: 0;
  max-height: none;
  border-radius: 0;
}

.rentcarRoleDock {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 869;
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.rentcarRoleDock--dim {
  opacity: 0.35;
  pointer-events: none;
}

.rentcarRoleIcon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  transition: transform 0.15s ease, background 0.15s ease;
  min-width: 58px;
}

.rentcarRoleIcon:hover,
.rentcarRoleIcon:focus-visible {
  transform: translateY(-2px);
  background: rgba(241, 245, 249, 0.9);
  outline: none;
}

.rentcarRoleIcon__img {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}

.rentcarRoleIcon__lbl {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  letter-spacing: -0.02em;
}

.rentcarRoleIcon--customer.is-active .rentcarRoleIcon__lbl {
  color: #0369a1;
}

.rentcarRoleIcon--customer.is-active .rentcarRoleIcon__img {
  box-shadow: 0 0 0 3px #38bdf8, 0 4px 14px rgba(2, 132, 199, 0.35);
}

.rentcarRolePanel {
  position: absolute;
  inset: 0;
  z-index: 919;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  overflow: hidden;
}

.rentcarRolePanel[hidden] {
  display: none !important;
}

.rentcarRolePanel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.rentcarRolePanel__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.rentcarRolePanel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.rentcarRolePanel__mapWrap {
  flex: 1 1 58%;
  min-height: 220px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #cbd5e1;
}

.rentcarRolePanel__map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  touch-action: none;
}

.rentcarRolePanel__mapHint {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #e2e8f0;
}

.rentcarRolePanel__body {
  flex: 0 0 auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e2e8f0;
  max-height: 42%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rentcarRolePanel__lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

.rentcarRolePanel__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
}

.rentcarRolePanel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.rentcarRolePanel__btn {
  flex: 1 1 calc(50% - 4px);
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.rentcarRolePanel__btn--primary {
  color: #0c4a6e;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  border-color: #0ea5e9;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
}

.rentcarRolePanel__btn--accept {
  color: #052e16;
  background: linear-gradient(135deg, #4ade80, #16a34a);
  border-color: #16a34a;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}

.rentcarRolePanel__status {
  margin: 0;
  line-height: 1.45;
}

.rentcarRolePanel--customer .rentcarRolePanel__head {
  border-top: 3px solid #0ea5e9;
}

.rentcarRolePanel--driver .rentcarRolePanel__head {
  border-top: 3px solid #16a34a;
}

@media (min-width: 900px) {
  .rentcarRolePanel {
    inset: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    max-height: min(72vh, 560px);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    border: 1px solid #e2e8f0;
  }

  .rentcarRoleDock {
    left: auto;
    right: 14px;
    bottom: 14px;
    transform: none;
  }
}

/* 택시·렌트카 동시 노출 시 좌(택시)·우(렌트카) 분리 */
.mapMain:has(.taxiRoleDock):has(.rentcarRoleDock) .taxiRoleDock {
  left: max(10px, env(safe-area-inset-left, 0px));
  right: auto;
  transform: none;
}

.mapMain:has(.taxiRoleDock):has(.rentcarRoleDock) .rentcarRoleDock {
  left: auto;
  right: max(10px, env(safe-area-inset-right, 0px));
  transform: none;
}

@media (min-width: 900px) {
  .mapMain:has(.taxiRoleDock):has(.rentcarRoleDock) .taxiRoleDock {
    left: 14px;
    right: auto;
  }

  .mapMain:has(.taxiRoleDock):has(.rentcarRoleDock) .rentcarRoleDock {
    left: auto;
    right: 14px;
  }
}

.rentcarAcceptCard {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rentcarAcceptCard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rentcarAcceptBadge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.rentcarAcceptBadge--wait {
  background: #e0f2fe;
  color: #0369a1;
}

.rentcarAcceptBadge--ok {
  background: #d1fae5;
  color: #065f46;
}

.rentcarAcceptCard__meta {
  flex: 1 1 100%;
}

.rentcarVehicleInfo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.rentcarVehicleInfo li {
  margin: 0;
  color: #0f172a;
  font-weight: 700;
}

.rentcarVehicleInfo__pending {
  margin: 0;
}

.rentcarDriverApp {
  position: relative;
  min-height: calc(100dvh - 60px);
  padding: 0 !important;
}

.rentcarDriverApp .pageTop,
.rentcarDriverApp [data-ikcta-portal-nav] {
  display: none;
}

.rentcarDriverApp .driverMap {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 100dvh;
  border: none;
  border-radius: 0;
  z-index: 1;
}

.rentcarDriverSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.15);
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.rentcarDriverVehicleForm {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.rentcarDriverVehicleForm__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.rentcarDriverVehicleForm__field {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.rentcarDriverVehicleForm__field input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
}

.rentcar-map-marker-leaflet,
.rentcar-pickup-marker-leaflet {
  background: transparent !important;
  border: none !important;
}

.rentcar-map-marker {
  transform: rotate(var(--rentcar-h, 0deg));
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.25));
}

.rentcar-pickup-marker {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.rentcar-pickup-marker__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35);
}

.rentcar-pickup-marker__lbl {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ── 사회적 약자 비상 SOS ── */
.emergencySosDock {
  position: absolute;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0px)));
  z-index: 880;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid rgba(220, 38, 38, 0.45);
  box-shadow: 0 8px 24px rgba(127, 29, 29, 0.22);
}

.emergencySosIcon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  min-width: 48px;
}

.emergencySosIcon:active,
.emergencySosIcon:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

.emergencySosIcon__img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.emergencySosIcon__lbl {
  font-size: 8px;
  font-weight: 800;
  color: #7f1d1d;
  line-height: 1.1;
  text-align: center;
}

.emergencySosPanel {
  position: absolute;
  inset: 0;
  z-index: 930;
  display: flex;
  flex-direction: column;
  background: #fff7f7;
  overflow: auto;
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}

.emergencySosPanel[hidden] {
  display: none !important;
}

.emergencySosPanel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.emergencySosPanel__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: #fee2e2;
  font-size: 22px;
  cursor: pointer;
}

.emergencySosPanel__title {
  margin: 0;
  font-size: 1.1rem;
  color: #991b1b;
}

.emergencySosPanel__lead {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: #334155;
}

.emergencySosPanel__field select {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.emergencySosPanel__consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 0.88rem;
}

.emergencySosPanel__actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.emergencySosPanel__btn {
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  background: #64748b;
}

.emergencySosPanel__btn--police {
  background: #1e3a8a;
}

.emergencySosPanel__btn--fire {
  background: #ea580c;
}

body.emergencySosPanel-open .emergencySosDock {
  opacity: 0.3;
  pointer-events: none;
}

/* ── 택시·렌트카 통합 아이콘 독 (호출·예약·기사) ── */
.mobilityDock {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 875;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: min(100vw - 16px, 520px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.mobilityDock--dim {
  opacity: 0.35;
  pointer-events: none;
}

.mobilityDockIcon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  min-width: 52px;
  flex: 0 0 auto;
}

.mobilityDockIcon:hover,
.mobilityDockIcon:focus-visible {
  background: rgba(241, 245, 249, 0.95);
  outline: none;
}

.mobilityDockIcon__img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.14);
}

.mobilityDockIcon__lbl {
  font-size: 9px;
  font-weight: 800;
  color: #334155;
  line-height: 1.15;
  text-align: center;
}

.mobilityDockIcon.is-session-active .mobilityDockIcon__img {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45), 0 3px 10px rgba(15, 23, 42, 0.14);
}

.mobilityDockIcon.is-session-active .mobilityDockIcon__lbl {
  color: #1d4ed8;
}

.mobilityPanel .mobilitySessionMetrics {
  margin: 0 0 10px;
}

.mobilityPanel .mobilitySessionProgress {
  margin: 0 0 10px;
}

/* 플랫폼 고객 — 기사 링크·버튼 숨김 */
.mapPage--customerMobility .mobilityRideBtn--driver,
.mapPage--customerMobility .mobilityRideBtn--driver {
  display: none !important;
}

/* 협력사 기사 — 고객 호출 시트 숨김 */
.mapPage--driverMobility #mapTaxiLive,
.mapPage--driverMobility #mapRentcarLive {
  display: none !important;
}

.mobilityPanel--driverMode [data-slot="fare"],
.mobilityPanel--driverMode [data-slot="vehicle-types"],
.mobilityPanel--driverMode .mobilityGovBadge {
  display: none !important;
}

.mobilityDock--driver {
  max-width: min(100vw - 16px, 200px);
}

.mobilityPanel {
  position: absolute;
  inset: 0;
  z-index: 925;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  overflow: hidden;
}

.mobilityPanel[hidden] {
  display: none !important;
}

.mobilityPanel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.mobilityPanel--taxi .mobilityPanel__head {
  border-top: 3px solid #f59e0b;
}

.mobilityPanel--rentcar .mobilityPanel__head {
  border-top: 3px solid #0ea5e9;
}

.mobilityPanel__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 22px;
  cursor: pointer;
}

.mobilityPanel__headText {
  flex: 1;
  min-width: 0;
}

.mobilityGovBadge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: #ede9fe;
  color: #5b21b6;
  margin-bottom: 4px;
}

.mobilityPanel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.mobilityPanel__vehicle {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.mobilityVtBtn {
  flex: 1;
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.mobilityVtBtn.is-active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1e40af;
}

.mobilityPanel__fare {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  max-height: 140px;
  overflow-y: auto;
}

.mobilityFareBreakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.mobilityFareBreakdown li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

.mobilityFareBreakdown__total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #cbd5e1;
  font-size: 13px;
}

.mobilityPanel__foreign {
  flex: 0 0 auto;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}

.mobilityPanel__foreign[hidden] {
  display: none !important;
}

.mobilityForeignDrawer {
  margin: 0;
}

.mobilityForeignDrawer__summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mobilityForeignDrawer__summary::-webkit-details-marker {
  display: none;
}

.mobilityForeignDrawer__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mobilityForeignVoice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 12px 8px;
}

.mobilityForeignVoice__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #93c5fd;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mobilityForeignVoice__btn.is-active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1e40af;
}

.mobilityForeignVoice__status {
  flex: 1 1 120px;
  min-width: 0;
}

.mobilityForeignChat {
  max-height: min(220px, 32vh);
  overflow: hidden;
  padding: 0 8px 8px;
}

.mobilityForeignChat .rcMessenger {
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.mobilityForeignChat .rcLog {
  max-height: 140px;
  min-height: 72px;
}

.mobilityForeignChat .rcHead {
  padding: 6px 10px;
}

.mobilityForeignChat .rcToolbar {
  padding: 6px 8px;
}

.mobilityPanel__lbs {
  flex: 0 0 auto;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}

.mobilityPanel__lbs[hidden] {
  display: none !important;
}

.mobilityLbsDrawer {
  margin: 0;
}

.mobilityLbsDrawer__summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobilityLbsDrawer__summary::-webkit-details-marker {
  display: none;
}

.mobilityLbsDrawer__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.mobilityLbsBrief {
  margin: 0;
  padding: 0 12px 8px;
  line-height: 1.45;
}

.mobilityLbsSection {
  padding: 0 12px 8px;
}

.mobilityLbsSection__title {
  margin: 0 0 6px;
  font-size: 12px;
}

.mobilityLbsList {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.mobilityLbsList li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.mobilityLbsList__link {
  color: #15803d;
  font-weight: 600;
  text-decoration: none;
}

.mobilityLbsList__price {
  flex: 0 0 auto;
  color: #475569;
  font-size: 11px;
}

.mobilityLbsLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 8px;
}

.mobilityLbsLinks__btn {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #86efac;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #166534;
}

.mobilityLbsNote {
  margin: 0;
  padding: 0 12px 10px;
}

.mobilityPanel__mapWrap {
  flex: 1 1 45%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: #cbd5e1;
}

.mobilityPanel__map {
  flex: 1;
  min-height: 160px;
}

.mobilityPanel__mapHint {
  margin: 0;
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #e2e8f0;
}

.mobilityPanel__body {
  flex: 0 0 auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e2e8f0;
  max-height: 38%;
  overflow-y: auto;
}

.mobilityPanel__lead {
  margin: 0 0 10px;
  font-size: 13px;
  color: #475569;
}

.mobilityPanel__field {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}

.mobilityPanel__field input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.mobilityPanel__consent {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
}

.mobilityPanel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.mobilityPanel__btn {
  flex: 1 1 calc(50% - 4px);
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.mobilityPanel__btn--primary {
  background: linear-gradient(135deg, #fde047, #fbbf24);
  border-color: #f59e0b;
}

.mobilityPanel--rentcar .mobilityPanel__btn--primary {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  border-color: #0ea5e9;
  color: #0c4a6e;
}

.mobilityPanel__btn--cancel {
  background: #fff;
  border-color: #dc2626;
  color: #dc2626;
  font-weight: 700;
}

.mobilityPanel__btn--cancel:hover,
.mobilityPanel__btn--cancel:focus-visible {
  background: #fef2f2;
}

.mobilityPanel__btn--accept {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  border-color: #16a34a;
  color: #052e16;
}

body.mobilityPanel-open .mapHint,
body.mobilityPanel-open #mapTaxiLive,
body.mobilityPanel-open #mapRentcarLive {
  display: none;
}

.mapPage--taxiApp .mobilityDock,
.mapPage--rentcarApp .mobilityDock,
.mapPage--taxiApp .mapMain > .mobilityDock,
.mapPage--rentcarApp .mapMain > .mobilityDock {
  top: max(120px, calc(100px + env(safe-area-inset-top, 0px))) !important;
  bottom: auto !important;
}

@media (min-width: 900px) {
  .mobilityDock {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: min(640px, 92vw);
  }

  .mobilityPanel {
    inset: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    max-height: min(78vh, 620px);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    border: 1px solid #e2e8f0;
  }
}

.mobilityPickBar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.mobilityPickBtn {
  flex: 1;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.mobilityPickBtn.is-active {
  background: #dbeafe;
  border-color: #2563eb;
  color: #1e40af;
}

.mobilityPickStatus {
  margin: 0 0 10px;
  line-height: 1.45;
}

.mobilityFareRegion {
  margin: 0 0 6px;
  font-size: 13px;
}

.mobilityFareRoute {
  margin: 0 0 8px;
}

.mobility-pin-icon {
  background: transparent !important;
  border: none !important;
}

.mobility-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.mobility-pin--origin {
  background: #2563eb;
}

.mobility-pin--dest {
  background: #dc2626;
}

/* ── 지도 다국어 ── */
.mapLangBarHost {
  display: flex;
  align-items: center;
}

.mapLangBar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: 8px;
}

.mapLangPill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bae6fd;
  background: rgba(255, 255, 255, 0.92);
  color: #0369a1;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}

.mapLangPill:hover,
.mapLangPill:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 1px;
}

.mapLangPill.is-active {
  background: #0ea5e9;
  border-color: #0284c7;
  color: #fff;
}

@media (max-width: 720px) {
  .mapLangBarHost {
    width: 100%;
    order: -1;
    margin-bottom: 6px;
  }

  .pageActions {
    flex-wrap: wrap;
  }
}

/* 스마트폰 2D — 화면 하단 고정 (지도 레이아웃과 무관하게 항상 노출) */
.mapMobileStrip {
  display: block;
  position: fixed;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 99990;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid #0ea5e9;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.35);
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
}

.mapMobileStrip[hidden],
.mapMobileStrip.mapMobileStrip--done {
  display: none !important;
}

html.ikcta-map-gps-dock .mapPage {
  padding-bottom: max(120px, calc(80px + env(safe-area-inset-bottom, 0px)));
}

.mapMain--3d .mapMobileStrip {
  display: none !important;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .mapMobileStrip {
    display: none !important;
  }
}

@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  .mapHint--copy {
    font-size: 13px;
    font-weight: 700;
    color: #0369a1;
    opacity: 1 !important;
    bottom: max(118px, calc(100px + env(safe-area-inset-bottom, 0px)));
  }

  #mapLegend {
    bottom: max(148px, calc(128px + env(safe-area-inset-bottom, 0px)));
  }
}

.mapMobileStrip__title {
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 14px;
  color: #0369a1;
}

.mapMobileStrip__steps {
  margin: 0 0 10px;
  padding-left: 1.2rem;
}

.mapMobileStrip__steps li {
  margin-bottom: 4px;
}

.mapMobileStrip--done {
  display: none !important;
}

/* ── GPS · 내 위치 FAB ── */
.mapLocateFab {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: 905;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #bae6fd;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.22);
  cursor: pointer;
  color: #0369a1;
  font-weight: 800;
  font-size: 11px;
}

.mapLocateFab:hover,
.mapLocateFab:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

.mapLocateFab.is-busy {
  opacity: 0.65;
  cursor: progress;
}

.mapLocateFab__icon {
  font-size: 18px;
  line-height: 1;
}

.mapLocateFab__toast {
  position: absolute;
  top: max(58px, calc(48px + env(safe-area-inset-top, 0px)));
  right: max(8px, env(safe-area-inset-right, 0px));
  z-index: 906;
  max-width: min(280px, calc(100vw - 24px));
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
}

/* mapTopRightStack 내부는 위 .mapTopRightStack .mapLocateFab__toast 규칙 사용 */

/* ── 차량 네비게이션 ── */
.mapVehicleNav {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: 1200;
  pointer-events: none; /* 토글·패널만 클릭 받게 */
}

.mapVehicleNav__toggle,
.mapVehicleNav__panel {
  pointer-events: auto;
  touch-action: manipulation;
}

.mapVehicleNav__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  font-weight: 800;
  font-size: 11px;
  color: #334155;
  position: relative;
  z-index: 1202;
}

.mapVehicleNav__toggleIcon {
  font-size: 16px;
  line-height: 1;
}

.mapVehicleNav.is-open .mapVehicleNav__toggle {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

/* mapLayout overflow:hidden 을 피하기 위해 열림 시 fixed */
.mapVehicleNav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: min(72vh, calc(100dvh - 120px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  z-index: 1201;
}

.mapVehicleNav.is-open .mapVehicleNav__panel {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top, 0px) + 56px));
  left: max(10px, env(safe-area-inset-left, 0px));
  right: auto;
  width: min(340px, calc(100vw - 20px));
  max-height: min(78vh, calc(100dvh - 88px));
}

.mapVehicleNav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.mapVehicleNav__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.mapVehicleNav__close {
  border: none;
  background: #f1f5f9;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.mapVehicleNav__pick {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.mapVehicleNav__pickBtn {
  flex: 1;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mapVehicleNav__pickBtn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.mapVehicleNav__search {
  margin-bottom: 8px;
}

.mapVehicleNav__searchLbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}

.mapVehicleNav__searchRow {
  display: flex;
  gap: 6px;
}

.mapVehicleNav__searchInput {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
}

.mapVehicleNav__searchBtn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid #0f172a;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mapVehicleNav__searchResults {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 180px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.mapVehicleNav__searchResults li + li {
  border-top: 1px solid #f1f5f9;
}

.mapVehicleNav__searchHit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}

.mapVehicleNav__searchHit:hover,
.mapVehicleNav__searchHit:focus-visible {
  background: #f8fafc;
}

.mapVehicleNav__searchHit strong {
  font-size: 13px;
  color: #0f172a;
}

.mapVehicleNav__searchCat {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

.mapVehicleNav__searchEmpty {
  padding: 10px;
  font-size: 12px;
  color: #64748b;
}

.mapVehicleNav__metrics {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  font-size: 14px;
  font-weight: 800;
  color: #1e40af;
}

.mapVehicleNav__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.mapVehicleNav__btn {
  min-height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mapVehicleNav__btn--primary {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border-color: #0284c7;
  color: #fff;
}

.mapVehicleNav__btn--gps {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
  font-weight: 800;
}

.mapVehicleNav__btn.is-disabled {
  opacity: 0.55;
  cursor: pointer;
}

.mapVehicleNav__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mapVehicleNav__extern {
  display: none !important;
}

.mapVehicleNav__badge {
  margin: 0 0 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.mapVehicleNav__guide {
  margin: 8px 0;
  padding: 10px;
  border-radius: 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}

.mapVehicleNav__guideNow {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #0c4a6e;
  line-height: 1.35;
}

.mapVehicleNav__guideNext,
.mapVehicleNav__guideRemain {
  margin: 2px 0 0;
}

.mapVehicleNav__btn--nav {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #16a34a;
  color: #fff;
}

.mapVehicleNav__btn--stop {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.mapVehicleNav__follow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
}

.mapVehicleNav__voice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
}

.mapVehicleNavCar__body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transform: rotate(var(--nav-h, 0deg));
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.35));
  font-size: 22px;
}

.mapVehicleNav.is-navigating .mapVehicleNav__toggle {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.mapVehicleNavPin span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.mapVehicleNavPin--origin span {
  background: #2563eb;
}

.mapVehicleNavPin--dest span {
  background: #dc2626;
}

.mapMain--vehicleNav #map {
  cursor: crosshair;
}

/* ── 차량 네비 · 택시·렌트카 호출 통합 ── */
.mapVehicleNav--mobilityHub .mapVehicleNav__panel,
.mapVehicleNav--unified .mapVehicleNav__panel {
  width: min(340px, calc(100vw - 20px));
}

.mapVehicleNav__panel .mapVehicleNav__btn,
.mapVehicleNav__panel .mapVehicleNav__pickBtn,
.mapVehicleNav__panel .mapVehicleNav__searchBtn,
.mapVehicleNav__panel .mapVehicleNav__modeBtn,
.mapVehicleNav__panel .mapVehicleNav__close {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

.mapVehicleNav__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 10px;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 28%);
}

/* ── 경로·택시·렌트카 일원화 탭 ── */
.mapVehicleNav__modes {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  padding: 3px;
  border-radius: 12px;
  background: #f1f5f9;
}

.mapVehicleNav__modeBtn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
}

.mapVehicleNav__modeBtn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.mapVehicleNav__callSection {
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.mapVehicleNav__lbs {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  font-size: 11px;
  line-height: 1.4;
}

.mapVehicleNav__callActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.mapVehicleNav__btn--call {
  flex: 1;
  min-width: 120px;
}

.mapVehicleNav__callStatus {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.mobilityCustomerPanel--compact .mobilityCustomerSteps--compact {
  margin: 0 0 8px;
  font-size: 10px;
}

.mobilityCustomerPanel--compact .mobilityCustomerMetrics {
  margin-bottom: 8px;
}

.mapVehicleNav--modeCall .mapVehicleNav__mobility,
.mapVehicleNav--unified .mapVehicleNav__mobility {
  display: none !important;
}

.mapVehicleNav__mobility {
  margin: 10px 0 8px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.mapVehicleNav__mobilityLead {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
}

.mapVehicleNav__mobilityTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.mapVehicleNav__mobilityTab {
  flex: 1;
  padding: 7px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
}

.mapVehicleNav__mobilityTab.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.mapVehicleNav__mobilityBody .mobilityCustomerPanel {
  font-size: 12px;
}

.mapVehicleNav__mobilityBody .mobilityCustomerBtn {
  font-size: 12px;
  padding: 8px 10px;
}

.mapVehicleNav--callActive .mapVehicleNav__toggle {
  background: #f59e0b;
  border-color: #d97706;
  color: #fff;
}

/* navHub — 지도 타일 독·하단 시트 완전 숨김 (차량 네비 패널 사용)
   app=taxi / app=rentcar 전용 진입은 예외 — 호출·요금 독 필수 */
body[data-map-nav-hub="1"] .mapPage:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) .mapMain > .mobilityDock,
body[data-map-nav-hub="1"] .mapPage:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) .mapMain > .mobilityPanel,
body[data-map-nav-hub="1"] .mapPage:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) #mapTaxiLive,
body[data-map-nav-hub="1"] .mapPage:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) #mapRentcarLive,
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) .mapMain > .mobilityDock,
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) .mapMain > .mobilityPanel,
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) #mapTaxiLive,
.mapPage--navHub:not(.mapPage--taxiApp):not(.mapPage--rentcarApp) #mapRentcarLive {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 택시·렌트 전용 앱 진입 — 독·패널 강제 표시 */
.mapPage--taxiApp .mapMain > .mobilityDock,
.mapPage--rentcarApp .mapMain > .mobilityDock {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  top: max(120px, calc(100px + env(safe-area-inset-top, 0px))) !important;
  bottom: auto !important;
  left: max(8px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  transform: none !important;
}
.mapPage--taxiApp .mapMain > .mobilityPanel.mobilityPanel--open,
.mapPage--rentcarApp .mapMain > .mobilityPanel.mobilityPanel--open {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
  max-height: min(42vh, 380px) !important;
  overflow: auto !important;
  opacity: 1 !important;
}
/* 택시·렌트 앱은 mobilityPanel만 — 라이브 시트 강제 표시 금지(지도 양분 원인) */
.mapPage--taxiApp #mapTaxiLive,
.mapPage--rentcarApp #mapRentcarLive {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
}