/* 지도 */
#app-maps { background: #e8e4da; }
.mp-map { position: absolute; inset: 0; z-index: 0; background: #f4f1ea; touch-action: none; }
.mp-status { background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,0)); }
.mp-back { position: absolute; left: 12px; top: calc(max(env(safe-area-inset-top), 6px) + 52px); z-index: 3; appearance: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: #007aff;
  display: flex; align-items: center; gap: 4px; padding: 9px 13px; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; }
.mp-back svg { width: 9px; height: 15px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mp-ctrls { position: absolute; right: 12px; top: calc(max(env(safe-area-inset-top), 6px) + 52px); z-index: 3; display: flex; flex-direction: column; gap: 10px; }
.mp-group { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.mp-group button { appearance: none; border: 0; background: none; width: 44px; height: 44px; display: grid; place-items: center; color: #007aff; font-size: 24px; font-weight: 300; cursor: pointer; }
.mp-group button + button { border-top: .5px solid #d1d1d6; }
.mp-group svg { width: 20px; height: 20px; fill: currentColor; }
.mp-badge { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(env(safe-area-inset-top), 6px) + 108px); z-index: 3; max-width: 78%; padding: 7px 12px; border-radius: 14px; font-size: 12px; line-height: 1.35; text-align: center;
  background: rgba(28,28,30,.82); color: #fff; pointer-events: none; }
.mp-badge:empty { display: none; }
.mp-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-radius: 14px 14px 0 0; padding: 6px 14px 0; max-height: 46%; display: flex; flex-direction: column;
  background: rgba(248,248,250,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 -2px 14px rgba(0,0,0,.14); }
.mp-grab { display: block; width: 36px; height: 5px; border-radius: 3px; background: #c7c7cc; margin: 0 auto 8px; flex: none; }
.mp-search { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 10px; background: rgba(118,118,128,.14); flex: none; }
.mp-search svg { width: 16px; height: 16px; stroke: #8e8e93; fill: none; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.mp-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; }
.mp-results { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; margin-top: 6px; min-height: 0; flex: 1; }
.mp-res { appearance: none; border: 0; background: none; font: inherit; color: inherit; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: .5px solid #e5e5ea; text-align: left; cursor: pointer; }
.mp-res i { width: 30px; height: 30px; border-radius: 50%; background: #ff3b30; flex: none; display: grid; place-items: center; }
.mp-res i svg { width: 14px; height: 14px; fill: #fff; }
.mp-res b { display: block; font-size: 15px; font-weight: 500; } .mp-res small { font-size: 12.5px; color: #8e8e93; }
.mp-foot { font-size: 11px; color: #8e8e93; padding: 6px 2px 0; flex: none; }
.mp-pin { display: block; width: 22px; height: 22px; border-radius: 50%; background: #ff3b30; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.mp-me { display: block; width: 18px; height: 18px; border-radius: 50%; background: #007aff; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(0,122,255,.2), 0 1px 4px rgba(0,0,0,.3); }
.mp-info { display: none; padding: 4px 2px 6px; }
.mp-sheet.info .mp-info { display: block; }
.mp-sheet.info .mp-results { display: none; }
.mp-info-head { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 8px; }
.mp-info-head div { flex: 1; } .mp-info-head b { display: block; font-size: 22px; font-weight: 700; } .mp-info-head small { font-size: 14px; color: #8e8e93; }
.mp-close { appearance: none; border: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(118,118,128,.16); color: #3c3c43; font-size: 18px; cursor: pointer; flex: none; }
.mp-irow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: .5px solid #e5e5ea; font-size: 14.5px; }
.mp-irow small { color: #8e8e93; font-size: 13.5px; flex: none; } .mp-irow span { text-align: right; }
.mp-ibtns { display: flex; gap: 8px; margin-top: 8px; }
.mp-ibtn { appearance: none; border: 0; flex: 1; border-radius: 10px; padding: 10px 0; font: inherit; font-size: 14px; font-weight: 600; background: #007aff; color: #fff; cursor: pointer; }
.mp-ibtn.sec { background: rgba(118,118,128,.14); color: #007aff; }
.leaflet-container { font: inherit; background: #f4f1ea; }

.mp-sec { font-size: 13px; font-weight: 700; color: #8e8e93; padding: 10px 2px 2px; }
.mp-fav i { background: #ff2d55 !important; color: #fff; font-style: normal; font-size: 15px; display: grid; place-items: center; }