/* Swiper 공통 */
        .swiper-container {
            width: 30px;
            height: 30px;
            padding: 0;
            margin: 3px 4px;
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #daumMap{ position:relative; }

        /* 미니맵 + 토글 버튼 */
        #miniMap {
            width: 200px;
            height: 400px;
            position: absolute;
            top: 115px; /* 모바일에서 JS로 115/40 등 변경 */
            left: 110px;
            transform: translateX(-50%);
            border: 1px solid #ccc;
            z-index: 10;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            transition: opacity 0.3s ease;
        }

        #toggleButtonMini {
            position: absolute;
            top:20px;
            left:10px;
            z-index: 10;
            padding: 5px 8px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* ▶ 현재 위치 버튼 추가 */
        #currentLocationButton {
            position: absolute;
            top:20px;
            left:45px;
            z-index: 10;
            width: 30px;
            height: 30px;
            padding: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            font-size: 14px;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ▶ 네이버 / 구글 맵 전환 버튼 */
        .map-switch-button {
            position: absolute;
            top:20px;
            z-index: 10;
            width: 28px;
            height: 28px;
            padding: 0;                     /* 로고 꽉 차게 */
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;               /* 동그라미 바깥 부분 잘라내기 */
        }
        #naverMapSwitchButton {
            left:80px;
        }
        #googleMapSwitchButton {
            left:112px;
        }
        #placeAddToggleButton{
            left:144px;   /* 구글 버튼 오른쪽 */
        }
        #placeMarkersToggleButton{
            left:176px;   /* placeAdd 오른쪽 */
        }

        .map-switch-button.active {
            background-color:#1090DA;
            border:1px solid #27C3F0;
        }

        /* 로고 이미지 공통 */
        .map-switch-logo {
            width: 100%;
            height: 100%;
            object-fit: contain;    /* 로고 비율 유지 */
        }

        #toggleSatellite {
            position: absolute;
            top:20px;
            left:10px;
            z-index: 10;
            padding: 5px 4px;
            font-size: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        #toggle-roadview {
            position: absolute;
            top:20px;
            left:45px;
            z-index: 10;
            padding: 5px 4px;
            font-size: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        #toggleCadastral {
            position: absolute;
            top:20px;
            left:90px;
            z-index: 10;
            padding: 5px 4px;
            font-size: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            cursor: pointer;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        #roadview-popup {
            width: 600px;
            height: 400px;
            background: white;
            border: 1px solid black;
            display: none;
        }

        #close-btn {
            position: absolute;
            right: 0;
            top: -30px;
            width: 30px;
            height: 30px;
            background-color: #fff;
            color: #333;
            font-size: 24px;
            border: 1px solid #ccc;
            cursor: pointer;
            line-height: 28px;
            text-align: center;
            display: none;
        }

        /* 마커 타입 토글 버튼 (역/아파트/번화가) */
        .toggle-button2 {
            margin: 5px;
            width: 30px;
            position: absolute;
            top:1px;
            right:1px;
            z-index: 10;
            font-size:10px;
            padding: 2px;
        }
        .toggle-button2.active {
            border: 1px solid #007bff;
        }

        /* 드래그 중 텍스트 선택 방지 */
        #menuPage.no-select,
        #menuPage.no-select * {
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        /* ▼▼▼ 모바일용 왼쪽 패널(#menuPage) & 드래그 바 ▼▼▼ */

        /* 데스크탑에서는 드래그바 숨김 */
        .menu-drag-handle-wrapper {
            display: none;
        }


        /* 팝업 레이어 (문의/의뢰 등) */
        .popup-layer {
            position: absolute;
            z-index: 999;
            display: none;

            width: 200px;
            max-width: calc(100% - 10px);
            height: auto;
            max-height: none;

            background: #ffffff;
            border-radius: 12px;
            padding: 12px 14px 10px;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
            border: 1px solid rgba(148, 163, 184, 0.7);
            box-sizing: border-box;
            font-size: 13px;
            color: #111827;
        }

        .popup-layer::before,
        .popup-layer::after {
            content: "";
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-style: solid;
            border-width: 0 8px 8px 8px;
        }

        .popup-layer::before {
            border-color: transparent transparent rgba(148, 163, 184, 0.7) transparent;
        }

        .popup-layer::after {
            top: -7px;
            border-color: transparent transparent #ffffff transparent;
        }

        .popup-layer.arrow-1::before,
        .popup-layer.arrow-1::after {
            left: 12%;
            transform: translateX(-50%);
        }
        .popup-layer.arrow-2::before,
        .popup-layer.arrow-2::after {
            left: 30%;
            transform: translateX(-50%);
        }
        .popup-layer.arrow-3::before,
        .popup-layer.arrow-3::after {
            left: 50%;
            transform: translateX(-50%);
        }
        .popup-layer.arrow-4::before,
        .popup-layer.arrow-4::after {
            left: 70%;
            transform: translateX(-50%);
        }
        .popup-layer.arrow-5::before,
        .popup-layer.arrow-5::after {
            left: 88%;
            transform: translateX(-50%);
        }

        .popup-layer .close-btn {
            position: absolute;
            top: 6px;
            right: 8px;
            width: 20px;
            height: 20px;
            border-radius: 999px;
            border: none;
            background: transparent;
            color: #6b7280;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            padding: 0;
        }

        .popup-layer .close-btn:hover {
            background: rgba(148, 163, 184, 0.25);
            color: #111827;
        }

        .popup-layer p {
            margin: 4px 0;
            line-height: 1.5;
            color: #374151;
        }

        .popup-layer p:first-of-type {
            font-weight: 600;
            color: #111827;
        }

        .popup-layer a {
            color: #2563eb;
            text-decoration: none;
            font-weight: 500;
        }

        .popup-layer a:hover {
            text-decoration: underline;
        }

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

        .popup-title-img {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            object-fit: cover;
            border:1px solid #27C3F0;
        }

        .popup-title-text {
            flex: 1;
            min-width: 0;
        }

        .popup-title-link,
        .popup-title-label {
            font-weight: 600;
            font-size: 13px;
            color: #111827;
            display: block;
        }

        .popup-menu-wrap {
            margin-top: 4px;
            margin-bottom: 4px;
        }

        .popup-menu-item {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
        }

        .popup-menu-item img {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            object-fit: cover;
            border:1px solid #27C3F0;
        }

        .popup-menu-item a {
            font-size: 12px;
            color: #111827;
            text-decoration: none;
            font-weight: 600;
        }

        .popup-menu-item a:hover {
            text-decoration: underline;
        }

        .popup-desc {
            margin-top: 4px;
            font-size: 12px;
            color: #4b5563;
            font-weight: normal;
        }

        /* 네이버 지도 인포윈도우 공통 스타일 */
        .naver-info-window {
            min-width: 220px;
            max-width: 260px;
            padding: 10px 12px;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
            border: 1px solid rgba(148, 163, 184, 0.8);
            font-size: 12px;
            color: #111827;
        }
        .naver-info-window__title {
            font-weight: 700;
            font-size: 13px;
            color: #0f172a;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .naver-info-window__body {
            font-size: 12px;
            color: #4b5563;
            line-height: 1.4;
            margin-bottom: 6px;
        }
        .naver-info-window__meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            font-size: 11px;
            color: #6b7280;
        }
        .naver-info-window__actions {
            margin-top: 6px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .naver-info-window__actions a {
            display: inline-flex;
            align-items: center;
            padding: 3px 6px;
            border-radius: 999px;
            border: 1px solid #e5e7eb;
            font-size: 11px;
            color: #2563eb;
            text-decoration: none;
            background-color: #f9fafb;
        }
        .naver-info-window__actions a:hover {
            border-color: #2563eb;
            background-color: #eff6ff;
        }

        /* 현재 지도/레벨 표시 */
        .map-provider-status {
            position:absolute;
            bottom:10px;
            left:10px;
            z-index:10;
            background:rgba(255,255,255,0.95);
            border:1px solid #e5e7eb;
            border-radius:4px;
            padding:3px 6px;
            font-size:11px;
            color:#111827;
        }
        .map-provider-status.level {
            left:auto;
            right:10px;
        }

        @media (max-width:768px){
            #menuPage {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                height: 90px;
                margin: 0;
                padding-top: 0;
                z-index: 3000;
                border-radius: 16px 16px 0 0;
                background: #fff;
                overflow: hidden;
                box-shadow: 0 -4px 12px rgba(0,0,0,0.12);
            }

            #menuPage.expanded {
                height: calc(100vh - 90px);
            }

            /* ★ half-expanded : panel 윗변을 100px 더 아래로 (사용자 요청)
               panel 높이 = 70vh - 100px → panel 윗변 = 30vh + 100px */
            #menuPage.half-expanded {
                height: calc(70vh - 100px);
                transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
            }

            /* ★ 2026-06-15: 역(subway) 진입 시 패널 15% peek (펼침/half 아니면 적용 → 드래그업 정상) */
            #menuPage.tspl-subway-peek:not(.expanded):not(.half-expanded) {
                height: 15vh;
            }

            #menuPage .menu-content {
                height: 100%;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            .menu-drag-handle-wrapper {
                display:flex;
                justify-content:center;
                align-items:center;
                padding:6px 0 2px;
                touch-action:none;
            }
            .menu-drag-handle{
                width:40px;
                height:4px;
                border-radius:999px;
                background:rgba(0,0,0,0.18);
            }
        }

        /* 국가 국기 마커 공통 래퍼 */
        .flag-marker {
            position: absolute;                 /* ★ 반드시 absolute */
            cursor: pointer;
            transform: translate(-50%, -100%);  /* 좌표 기준 위로, 가운데 정렬 */
            z-index: 8;

            display: inline-block;              /* 원+화살표 기준으로 폭 결정 */
            text-align: center;                 /* 안의 요소들 가로 중앙 정렬 */
        }

        /* 동그란 원 부분 */
        .flag-marker-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            box-shadow: 0 0 4px rgba(0,0,0,0.5);
            background-color: #cccccc;   /* 국기 없을 때 기본 배경 */
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;      /* 국기가 원을 꽉 채우도록 */
        }

        /* 아래 삼각형 (핀 화살표) */
        .flag-marker-arrow {
            width: 0;
            height: 0;
            margin: 0 auto;  /* ★ circle 폭 기준 중앙 */
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid #ffffff; /* 테두리 느낌 */
            position: relative;
            top: -1px;
        }

        /* 핀 안쪽 색 (꼬리 안쪽) */
        .flag-marker-arrow:after {
            content: '';
            position: absolute;
            top: -8px;
            left: -5px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid #e04b4b; /* 핀 색상 (원 색과 어울리게) */
        }

        /* 툴팁 느낌의 제목 (라벨은 레이아웃에서 빼기) */
        .flag-marker-label {
            position: absolute;
            top: 100%;              /* circle+arrow 아래쪽 기준 */
            left: 50%;
            transform: translateX(-50%);
            margin-top: 2px;

            padding: 2px 4px;
            background: rgba(0,0,0,0.6);
            color: #fff;
            font-size: 10px;
            border-radius: 3px;
            white-space: nowrap;
        }




        /* ===== City Marker (Google Overlay) ===== */
        .city-marker{
        position:absolute;
        transform: translate(-50%, -100%);
        z-index: 7 !important;
        pointer-events:auto;
        cursor:pointer;
        }

        .city-marker-label{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(20,19,24,.14);
        box-shadow: 0 10px 22px rgba(18,18,22,.12);
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        user-select:none;
        -webkit-user-select:none;
        backdrop-filter: blur(6px);
        }

        .city-marker-name{
        font-weight: 600;
        color: #141318;
        letter-spacing: -0.2px;
        }

        .city-marker-info{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        background: rgba(122,79,230,.12);
        color: #7A4FE6;
        font-size: 12px;
        line-height: 1;
        }

        /* hover */
        .city-marker:hover .city-marker-label{
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(18,18,22,.16);
        border-color: rgba(122,79,230,.26);
        }

        .city-marker:active .city-marker-label{
        transform: translateY(0px);
        box-shadow: 0 10px 22px rgba(18,18,22,.12);
        }


        .city-label{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 10px;
        border-radius:14px;
        font-weight:700;
        font-size:13px;
        line-height:1;
        border:1px solid rgba(0,0,0,.12);
        background:#fff;
        color:#111;
        box-shadow:0 6px 16px rgba(0,0,0,.12);
        white-space:nowrap;
        }

        .city-label.is-highlight{
        background:#ff7a00;   /* 주황 */
        color:#fff;           /* 흰 글씨 */
        border-color:rgba(255,255,255,.25);
        box-shadow:0 10px 20px rgba(255,122,0,.28);
        }

        /* ==========================
        City Marker Highlight
        ========================== */
        .city-marker.is-highlight .city-marker-label{
        background:#ff7a00 !important;
        color:#ffffff !important;
        border-color:rgba(255,255,255,.25) !important;
        box-shadow:0 14px 26px rgba(255,122,0,.28) !important;
        }

        .city-marker.is-highlight .city-marker-name{
        color:#ffffff !important;
        }



        /* ✅ 장소등록 레이어 */
        .place-add-layer{
            position: fixed;
            right: 12px;
            top: 120px;
            width: 320px;
            max-width: calc(100vw - 24px);
            z-index: 999999;
            background:#fff;
            border:1px solid rgba(0,0,0,.12);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,.18);
            overflow:hidden;
            font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
        }
        .place-add-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:10px 12px;
            background:#f7f8fa;
            border-bottom:1px solid rgba(0,0,0,.08);
        }
        .place-add-title{ font-size:14px; font-weight:700; }
        .place-add-close{
            width:28px;height:28px;
            border:0;background:transparent;
            font-size:22px; line-height:28px;
            cursor:pointer; opacity:.7;
        }
        .place-add-close:hover{ opacity:1; }

        .place-add-body{ padding:10px 12px; }
        .place-add-row{ margin-bottom:10px; }
        .place-add-row label{ display:block; font-size:12px; color:#555; margin-bottom:4px; }
        .place-add-row input[type="text"],
        .place-add-row input[type="file"]{
            width:100%;
            box-sizing:border-box;
            border:1px solid rgba(0,0,0,.14);
            border-radius:10px;
            padding:9px 10px;
            font-size:13px;
            outline:none;
        }
        .place-add-row input[readonly]{ background:#f3f4f6; }

        .place-add-row-2{
            display:flex;
            gap:8px;
        }
        .place-add-row-2 > div{ flex:1; }

        .place-add-actions{
            display:flex;
            gap:8px;
            margin-top:6px;
        }
        .place-add-btn{
            flex:1;
            border:1px solid rgba(0,0,0,.14);
            background:#fff;
            border-radius:10px;
            padding:10px 0;
            cursor:pointer;
            font-weight:700;
        }
        .place-add-btn.primary{
            background:#1090DA;
            border-color:#1090DA;
            color:#fff;
        }
        .place-add-hint{
            margin-top:8px;
            font-size:12px;
            color:#777;
            line-height:1.3;
        }

        /* ✅ 토글 버튼 ON 표시(기존 map-switch-button과 호환) */
        .map-switch-button.is-on{
            outline:2px solid #1090DA;
            background:rgba(16,144,218,.08);
        }


    /* 애니메이션 마커 인포윈도우 스타일 */
    .tspl-anim-iw {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        min-width: 220px;
        max-width: 280px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 13px;
        color: #333;
        position: relative;
    }
    .tspl-anim-iw__head {
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    .tspl-anim-iw__title {
        font-weight: bold;
        font-size: 15px;
        color: #000;
    }
    .tspl-anim-iw__sub {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }
    .tspl-anim-iw__img img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: 8px;
        max-height: 120px;
        object-fit: cover;
    }
    .tspl-anim-iw__body {
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .tspl-anim-iw__actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }
    .tspl-anim-iw__actions a {
        text-decoration: none;
        color: #fff;
        background: #007bff;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
    }
    .tspl-anim-iw__actions a:hover {
        background: #0056b3;
    }
    .tspl-anim-muted {
        color: #999;
        font-size: 11px;
    }



/* ✅ 즐겨찾기 레이어 (현재위치 버튼 자리에서 펼쳐짐) */
/* =========================================================
   ✅ 위치 레이어(즐겨찾기) - Compact / Pretty
   ========================================================= */
.fav-layer.fav-layer--compact{
  position:absolute;
  left:10px;
  top:10px;
  z-index:12;
  width:300px;
  max-width:86vw;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(20,19,24,.10);
  border-radius:16px;
  box-shadow:0 14px 28px rgba(18,18,22,.12);
  padding:10px;
  backdrop-filter: blur(10px);
}

@media (max-width:600px){
  .fav-layer.fav-layer--compact{ top:90px; }
}

.fav-layer--compact *{ box-sizing:border-box; }

.fav-layer--compact .fav-layer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 2px 8px;
  border-bottom:1px solid rgba(20,19,24,.07);
  margin-bottom:8px;
}

.fav-layer--compact .fav-layer__title{
  font-size:13px;
  font-weight:800;
  letter-spacing:-.2px;
  color:#141318;
  display:flex;
  align-items:center;
  gap:6px;
}

.fav-layer--compact .fav-layer__close{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(20,19,24,.10);
  background:#fff;
  color:#3a3940;
  cursor:pointer;
  line-height:1;
  font-size:18px;
}
.fav-layer--compact .fav-layer__close:hover{
  background:rgba(16,144,218,.08);
  border-color:rgba(16,144,218,.20);
}

/* "지도에서 위치 지정" 버튼 영역 */
.fav-layer--compact .fav-layer__pick{
  margin:8px 0 8px;
}
.fav-layer--compact .fav-layer__pick .fav-btn{
  width:100%;
}

/* 액션 버튼(현재위치 등) */
.fav-layer--compact .fav-layer__actions{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}

/* 입력 + 저장 */
.fav-layer--compact .fav-layer__save{
  display:flex;
  gap:6px;
  margin-bottom:10px;
}

.fav-layer--compact input#favTitle{
  flex:1;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(20,19,24,.12);
  background:#fff;
  padding:0 10px;
  font-size:12.5px;
  outline:none;
}
.fav-layer--compact input#favTitle:focus{
  border-color:rgba(16,144,218,.40);
  box-shadow:0 0 0 3px rgba(16,144,218,.12);
}

/* 버튼 공통 */
.fav-layer--compact .fav-btn{
  height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(20,19,24,.12);
  background:#fff;
  cursor:pointer;
  font-size:12.5px;
  color:#141318;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.fav-layer--compact .fav-btn:hover{
  background:rgba(16,144,218,.08);
  border-color:rgba(16,144,218,.18);
}

.fav-layer--compact .fav-btn.primary{
  background:#1090DA;
  border-color:#1090DA;
  color:#fff;
  box-shadow:0 8px 16px rgba(16,144,218,.18);
}
.fav-layer--compact .fav-btn.primary:hover{
  filter:brightness(.98);
}

/* 위치 지정 버튼 active 표시 */
.fav-layer--compact #favPickBtn.active{
  background:rgba(16,144,218,.10);
  border-color:rgba(16,144,218,.35);
  color:#0b5f8f;
}

/* 리스트 */
.fav-layer--compact .fav-layer__list{
  margin-top:6px;
  border-top:1px solid rgba(20,19,24,.07);
  padding-top:8px;
}

.fav-layer--compact .fav-layer__list-title{
  font-size:11.5px;
  font-weight:800;
  color:rgba(20,19,24,.72);
  margin:0 0 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.fav-layer--compact .fav-layer__list-items{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:240px;
  overflow:auto;
  padding-right:2px;
}

.fav-layer--compact .fav-layer__list-items::-webkit-scrollbar{
  width:6px;
}
.fav-layer--compact .fav-layer__list-items::-webkit-scrollbar-thumb{
  border-radius:6px;
  background:rgba(20,19,24,.12);
}

.fav-layer--compact .fav-item{
  display:flex;
  align-items:center;
  gap:8px;
}

.fav-layer--compact .fav-item button.fav-btn{
  flex:1;
  justify-content:flex-start;
  padding:8px 10px;
  height:auto;
  border-radius:14px;
  background:rgba(255,255,255,.96);
}

.fav-layer--compact .fav-item button.fav-btn:hover{
  background:rgba(16,144,218,.08);
}

.fav-layer--compact .fav-item .meta{
  font-size:11px;
  color:rgba(20,19,24,.50);
  padding:0 6px;
  border-radius:10px;
  border:1px solid rgba(20,19,24,.08);
  background:rgba(255,255,255,.72);
  height:26px;
  display:flex;
  align-items:center;
}

.fav-layer--compact .fav-layer__list-items::-webkit-scrollbar{
  width:8px;
}
.fav-layer--compact .fav-layer__list-items::-webkit-scrollbar-thumb{
  border-radius:8px;
  background:rgba(20,19,24,.18);
}
.fav-layer--compact .fav-layer__list-items::-webkit-scrollbar-track{
  background:rgba(20,19,24,.06);
  border-radius:8px;
}

#favCenterPin img{
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
}

/* 작은 화면에서 더 촘촘하게 */
@media (max-width:420px){
  .fav-layer.fav-layer--compact{ width:240px; padding:9px; }
  .fav-layer--compact .fav-btn{ height:32px; }
  .fav-layer--compact input#favTitle{ height:32px; }
}

/* ✅ 즐겨찾기 수정/삭제 mini 버튼 */
.fav-mini-btn{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(20,19,24,.12);
  background:#fff;
  color:#333;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}
.fav-mini-btn:hover{
  background:rgba(16,144,218,.08);
  border-color:rgba(16,144,218,.20);
}
.fav-mini-btn.fav-del:hover{
  background:rgba(255,93,93,.10);
  border-color:rgba(255,93,93,.25);
  color:#c62828;
}
/* ════════════════════════════════════════════════════════════
   맵저장 탭 — 「테마|필터|맵저장」 박스 안의 지도 즐겨찾기 (2026-05-31)
   - 최고만 스타일 (보라 톤 + Pretendard + 라운드 카드)
   - bot_fav_func.js 가 render 하는 .fav-item / .fav-go / .fav-del 클래스 그대로 활용
   ════════════════════════════════════════════════════════════ */
.mapfav-pane {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0;     /* theme-box__body 가 이미 padding 12/14 가지므로 중복 X */
    font-family: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
    letter-spacing: -0.02em;
    color: #1A1620;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;   /* admin-row flex-wrap 으로 가로 넘침 방지 */
}
.mapfav-pane * { box-sizing: border-box; }
.mapfav-pane__head { padding: 0 2px; }
.mapfav-pane__head-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* ★ 현재위치 + 관리자 토글 chips row — theme-chip 스타일 통일 (2026-05-31) */
.mapfav-pane__chips {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 0;
}
/* 공용 chip — theme-chip 디자인 (pill, 옅은 회색 배경, hover/active 보라) */
.mapfav-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 11px; height: 30px;
    border: 1px solid rgba(26, 22, 32, 0.10);
    border-radius: 15px;
    background: #FAFAF8; color: #4A4458;
    font-size: 12px; font-weight: 600; letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit; white-space: nowrap;
    flex-shrink: 0;
}
.mapfav-chip i { font-size: 11px; }
.mapfav-chip:hover {
    border-color: #6E47D1;
    color: #6E47D1;
    background: #F4EEFE;
}
/* ON 상태 (theme-chip.is-active 와 동일 톤) */
.mapfav-chip.is-active {
    border-color: #6E47D1;
    color: #fff;
    background: #6E47D1;
    box-shadow: 0 2px 8px rgba(110, 71, 209, 0.25);
}
.mapfav-chip.is-active:hover {
    background: #5C39B8;
    border-color: #5C39B8;
}
/* admin chip 만 미세하게 구분 (옅은 노란 hint) — hover 시는 보라 톤 */
.mapfav-chip--admin {
    border-style: dashed;
}
.mapfav-chip--admin:hover { border-style: solid; }
.mapfav-chip--admin.is-active { border-style: solid; }

/* ★ 「역수정 ON」 안내 chip — 토글 없이 admin 만 항상 ON 상태 표시 (2026-05-31) */
.mapfav-chip-hint {
    display: inline-flex; align-items: center;
    padding: 6px 10px; height: 30px;
    border: 1px dashed rgba(219, 139, 0, .35);
    border-radius: 15px;
    background: #FFF7E6;
    color: #B36F00;
    font-size: 11px; font-weight: 700; letter-spacing: -0.02em;
    cursor: default; user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.mapfav-chip-hint i { font-size: 10px; }
/* ★ 중심핀 토글 chip (전체 사용자, 기본 OFF) — aria-pressed 로 상태 표시 (2026-06-06) */
.mapfav-chip-centerpin { gap: 4px; }
.mapfav-chip-centerpin[aria-pressed="true"] {
    border-color: #6E47D1;
    background: #6E47D1;
    color: #fff;
    box-shadow: 0 2px 8px rgba(110, 71, 209, 0.25);
}
.mapfav-chip-centerpin[aria-pressed="true"] .cp-state::before { content: ""; }
.mapfav-chip-centerpin .cp-state { font-weight: 800; }
/* ★ 안내 문구 (등록폼 아래) — 보라 톤 (2026-05-31 등록폼 아래로 이동) */
.mapfav-pane__pick {
    font-size: 11.5px; color: #6E47D1; font-weight: 700; line-height: 1.4;
    padding: 6px 10px;
    background: #F4EEFE;
    border-radius: 8px;
    margin-top: 2px;
}

/* ★ 관리자 전용 토글 행 — 별도 row + 라벨 + compact 디자인 (2026-05-31 layout 픽스) */
.mapfav-pane__admin-row {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin-top: 6px; padding: 6px 8px;
    background: #FFF7E6;
    border: 1px dashed #DB8B00;
    border-radius: 8px;
}
.mapfav-pane__admin-label {
    font-size: 10px; font-weight: 800; color: #B36F00;
    letter-spacing: -0.02em; flex-shrink: 0;
    padding-right: 4px;
}
.mapfav-btn--admin {
    height: 26px; padding: 0 7px;
    border: 1px solid #DB8B00; background: #fff; color: #DB8B00;
    border-radius: 6px;
    font-size: 10.5px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 3px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    font-family: inherit; letter-spacing: -0.02em;
    flex-shrink: 0;
    line-height: 1;
}
.mapfav-btn--admin:hover { background: #FFF7E6; }
.mapfav-btn--admin i { font-size: 9.5px; }
.mapfav-btn--admin.is-on {
    background: linear-gradient(135deg,#DB8B00 0%,#F59E0B 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(219,139,0,.30);
}
.mapfav-btn--admin.is-on:hover { background: linear-gradient(135deg,#B36F00 0%,#DB8B00 100%); }

/* 공용 버튼 */
.mapfav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border: 1.5px solid #6E47D1; background: #fff; color: #6E47D1;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
    flex-shrink: 0;
    font-family: inherit;
}
.mapfav-btn:hover { background: #F4EEFE; }
.mapfav-btn:active { transform: scale(0.97); }
.mapfav-btn i { font-size: 12px; }

.mapfav-btn--current { padding: 0 12px; }
/* ★ 현위치 ON 상태 — 마커 표시 중 (다시 클릭하면 off) (2026-05-31) */
.mapfav-btn--current.is-on {
    background: linear-gradient(135deg,#6E47D1 0%,#8260DF 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(110,71,209,.30);
}
.mapfav-btn--current.is-on:hover {
    background: linear-gradient(135deg,#5C39B8 0%,#6E47D1 100%);
}
.mapfav-btn--save {
    background: linear-gradient(135deg,#6E47D1 0%,#8260DF 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(110,71,209,.25);
}
.mapfav-btn--save:hover {
    background: linear-gradient(135deg,#5C39B8 0%,#6E47D1 100%);
    box-shadow: 0 4px 10px rgba(110,71,209,.35);
}
.mapfav-btn--danger {
    border-color: rgba(229, 96, 76, .35);
    color: #E5604C;
}
.mapfav-btn--danger:hover {
    background: rgba(229, 96, 76, .10);
    border-color: rgba(229, 96, 76, .55);
}

/* 제목 입력 + 등록 행 */
.mapfav-pane__save {
    display: flex; align-items: center; gap: 8px;
    padding: 0 2px;
}
.mapfav-input {
    flex: 1; min-width: 0;
    height: 36px; padding: 0 12px;
    border: 1.5px solid rgba(26,22,32,.10); background: #fff; color: #1A1620;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 500; letter-spacing: -0.02em;
    outline: none;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mapfav-input::placeholder { color: #8B8696; font-weight: 500; }
.mapfav-input:focus {
    border-color: #6E47D1;
    box-shadow: 0 0 0 3px rgba(110,71,209,.12);
}

/* ★ 서브탭 (내 즐겨찾기 / 공개 즐겨찾기) (2026-05-31) */
.mapfav-subtabs {
    display: flex; gap: 0;
    border-bottom: 1px solid rgba(26,22,32,.10);
    margin-top: 4px;
}
.mapfav-subtab {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 6px;
    border: none; background: transparent;
    color: #8B8696;
    font-size: 12px; font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
    font-family: inherit;
}
.mapfav-subtab i { font-size: 11px; }
.mapfav-subtab:hover { color: #6E47D1; }
.mapfav-subtab.is-active {
    color: #6E47D1;
    border-bottom-color: #6E47D1;
}
.mapfav-subpane { display: none; }
.mapfav-subpane.is-active {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px;
}
.mapfav-start {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(110,71,209,.16);
    border-radius: 12px;
    background: linear-gradient(135deg,#FAF8FF 0%,#FFFFFF 100%);
}
.mapfav-start__title {
    font-size: 13px;
    font-weight: 900;
    color: #1A1620;
}
.mapfav-start__desc {
    font-size: 11.5px;
    line-height: 1.45;
    color: #6F687C;
    font-weight: 600;
}
.mapfav-start__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.mapfav-start__actions .mapfav-btn {
    height: 32px;
    padding: 0 8px;
    font-size: 11.5px;
    white-space: nowrap;
}
.mapfav-start.is-login-required .mapfav-start__actions {
    display: none;
}
.mapfav-start.is-login-required .mapfav-start__status {
    min-height: 0;
    padding: 0;
    background: transparent;
}
.mapfav-start.is-login-required .mapfav-login-guide {
    width: 100%;
}
.mapfav-start__status {
    min-height: 28px;
    padding: 7px 9px;
    border-radius: 9px;
    background: #F4EEFE;
    color: #6E47D1;
    font-size: 11.2px;
    font-weight: 700;
    line-height: 1.35;
}
.mapfav-start__status.is-ok { background: #ECFDF3; color: #168452; }
.mapfav-start__status.is-error { background: #FFF1F0; color: #C94D3D; }
.mapfav-start__status.is-muted { background: #FAFAF8; color: #8B8696; }

/* 공개 등록 폼 — admin 만 표시. 노란 톤 (관리자 영역 구분) */
.mapfav-pane__save--public { /* mapfav-pane__save 와 동일 layout */ }
.mapfav-btn--public {
    background: linear-gradient(135deg,#DB8B00 0%,#F59E0B 100%) !important;
    box-shadow: 0 2px 6px rgba(219,139,0,.30) !important;
}
.mapfav-btn--public:hover {
    background: linear-gradient(135deg,#B36F00 0%,#DB8B00 100%) !important;
}
.mapfav-pane__pick--admin {
    color: #B36F00 !important;
    background: #FFF7E6 !important;
}

/* 리스트 */
.mapfav-pane__list-wrap {
    padding: 0 2px;
    border-top: 1px dashed rgba(110,71,209,.18);
    margin-top: 4px; padding-top: 10px;
}
.mapfav-pane__list-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 800; color: #4A4458;
    margin-bottom: 8px; letter-spacing: -0.02em;
}
.mapfav-pane__list-title i { color: #6E47D1; font-size: 12px; }
.mapfav-pane__list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 320px; overflow-y: auto;
    padding-right: 2px;
}
.mapfav-pane__list::-webkit-scrollbar { width: 5px; }
.mapfav-pane__list::-webkit-scrollbar-thumb { background: rgba(110,71,209,.30); border-radius: 3px; }

/* ★ AD 광고 카드 (5개마다 1개 삽입) — 일반 fav-item 과 같은 높이 + 노란 톤 (2026-05-31) */
#miniMap.theme-box .mapfav-pane__list .fav-item--ad {
    background: linear-gradient(to right, #FFFBEB 0%, #FFF7E0 100%) !important;
    border: 1px dashed rgba(219, 139, 0, .35) !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item--ad:hover {
    border-color: rgba(219, 139, 0, .65) !important;
    box-shadow: 0 2px 8px rgba(219, 139, 0, .15) !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item--ad .fav-go-ad {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 2px !important;
    border: none !important; background: transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: left !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item--ad .fav-ad-badge {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-width: 24px !important; height: 16px !important;
    padding: 0 5px !important;
    background: #DB8B00 !important; color: #fff !important;
    border-radius: 3px !important;
    font-size: 9.5px !important; font-weight: 900 !important;
    letter-spacing: 0.08em !important; line-height: 1 !important;
    flex-shrink: 0 !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item--ad .fav-ad-title {
    flex: 0 1 auto !important; min-width: 0 !important;
    font-size: 12.5px !important; font-weight: 800 !important;
    color: #1A1620 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    letter-spacing: -0.02em !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item--ad .fav-ad-tag {
    flex: 0 1 auto !important; min-width: 0 !important;
    font-size: 10.5px !important; font-weight: 600 !important;
    color: #B36F00 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    background: rgba(255, 245, 200, .9) !important;
    padding: 2px 6px !important; border-radius: 4px !important;
    margin-left: auto !important;
}

/* ★ bot_fav_func.js .fav-item — 최고만 스타일 (보라 톤 + Pretendard + 라운드 카드)
   기존 .fav-item / .fav-btn / .fav-mini-btn (bot_style.css 다른 곳) 와 충돌 방지 위해 !important + 더 강한 selector */
#miniMap.theme-box .mapfav-pane__list .fav-item {
    display: flex !important; align-items: center !important; gap: 6px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(26,22,32,.08) !important;
    border-radius: 10px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 38px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item:hover {
    border-color: rgba(110,71,209,.30) !important;
    box-shadow: 0 2px 8px rgba(110,71,209,.10) !important;
}

/* 이동 버튼 (메인 영역) — flex:1 로 카드 폭 차지 */
#miniMap.theme-box .mapfav-pane__list .fav-item .fav-go,
#miniMap.theme-box .mapfav-pane__list .fav-item .fav-btn.fav-go {
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 28px !important; padding: 0 6px !important; margin: 0 !important;
    border: none !important; background: transparent !important; color: #1A1620 !important;
    font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: -0.02em !important;
    text-align: left !important; cursor: pointer !important;
    font-family: inherit !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    box-shadow: none !important; border-radius: 4px !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item .fav-go:hover {
    color: #6E47D1 !important;
    background: #F4EEFE !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item .fav-go i {
    color: #6E47D1 !important; font-size: 12px !important; flex-shrink: 0 !important;
}

/* 메타 (N · 16 같은 provider+zoom) */
#miniMap.theme-box .mapfav-pane__list .fav-item .meta {
    font-size: 10px !important; font-weight: 800 !important; color: #6E47D1 !important;
    background: #F4EEFE !important;
    padding: 2px 7px !important; border-radius: 6px !important;
    flex-shrink: 0 !important; letter-spacing: 0.04em !important;
    line-height: 1.4 !important; white-space: nowrap !important;
}

/* mini 버튼 (삭제) — × */
#miniMap.theme-box .mapfav-pane__list .fav-item .fav-mini-btn {
    width: 22px !important; height: 22px !important; min-width: 22px !important;
    border: none !important; background: transparent !important; color: #8B8696 !important;
    border-radius: 6px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important;
    transition: background .15s ease, color .15s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important; margin: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
#miniMap.theme-box .mapfav-pane__list .fav-item .fav-mini-btn:hover {
    background: rgba(229,96,76,.12) !important;
    color: #E5604C !important;
}

/* 빈 리스트 placeholder */
.mapfav-pane__list:empty::before {
    content: '아직 저장된 위치가 없어요. 지도 위치를 고르고 「등록」 해보세요.';
    display: block;
    padding: 14px 8px;
    color: #8B8696; font-size: 11.5px; font-weight: 500;
    text-align: center;
    background: #FAFAF8; border-radius: 10px;
    letter-spacing: -0.02em;
}

#app, .wrap, .container {
  overflow-x: hidden;
}
html, body {
  overflow-x: hidden !important;
}

/* Start-map quick marker toggles */
.map-quick-toggles {
    position: absolute;
    top: 10px;
    left: 154px;
    z-index: 198;
    display: none;
    grid-template-columns: repeat(8, 25px);
    gap: 3px;
    padding: 3px;
    border-radius: 11px;
    border: 1px solid rgba(26,22,32,.08);
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 24px rgba(26,22,32,.14);
    backdrop-filter: blur(8px);
    font-family: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
}
.map-quick-toggle {
    --quick-color: #6E47D1;
    --quick-color-2: #8260DF;
    --quick-bg: #F7F3FF;
    --quick-border: rgba(110,71,209,.26);
    --quick-shadow: rgba(110,71,209,.22);
    position: relative;
    width: 25px;
    height: 25px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--quick-border);
    border-radius: 8px;
    background: var(--quick-bg);
    color: var(--quick-color);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.map-quick-toggle i { font-size: 11px; line-height: 1; }
.map-quick-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.map-quick-toggle::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    transform: translateX(-50%) translateY(-2px);
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(26,22,32,.92);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -.03em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
    box-shadow: 0 6px 18px rgba(26,22,32,.18);
}
.map-quick-toggle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(26,22,32,.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
}
.map-quick-toggle:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.map-quick-toggle:hover::before { opacity: 1; }
.map-quick-toggle:hover { transform: translateY(-1px); border-color: var(--quick-color); color: var(--quick-color); background: var(--quick-bg); z-index: 30; /* ★ 툴팁 말풍선이 아랫줄 토글버튼에 안 가리게 (2026-07-12) */ }
/* ★ 툴팁이 좌측 지도메뉴 박스(#k1LbtnBox z-index:200)에 가려지던 문제 —
   호버 중에만 퀵토글 컨테이너를 박스 위로 올림 (2026-07-13) */
.map-quick-toggles:hover { z-index: 210; }
.map-quick-toggle.is-on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg,var(--quick-color) 0%,var(--quick-color-2) 100%);
    box-shadow: 0 3px 10px var(--quick-shadow);
}
.map-quick-toggle[data-marker-layer="apt"] { --quick-color:#6E47D1; --quick-color-2:#8260DF; --quick-bg:#F7F3FF; --quick-border:rgba(110,71,209,.28); --quick-shadow:rgba(110,71,209,.22); }
.map-quick-toggle[data-marker-layer="officetel"] { --quick-color:#0EA5E9; --quick-color-2:#38BDF8; --quick-bg:#E0F2FE; --quick-border:rgba(14,165,233,.34); --quick-shadow:rgba(14,165,233,.24); }
.map-quick-toggle[data-marker-layer="building-sale"] { --quick-color:#DB8B00; --quick-color-2:#F59E0B; --quick-bg:#FFF6E6; --quick-border:rgba(219,139,0,.34); --quick-shadow:rgba(219,139,0,.24); }
.map-quick-toggle[data-marker-layer="place"] { --quick-color:#475569; --quick-color-2:#334155; --quick-bg:#E2E8F0; --quick-border:rgba(71,85,105,.34); --quick-shadow:rgba(71,85,105,.24); }
.map-quick-toggle[data-marker-layer="subway"] { --quick-color:#16A34A; --quick-color-2:#22C55E; --quick-bg:#DCFCE7; --quick-border:rgba(22,163,74,.32); --quick-shadow:rgba(22,163,74,.22); }
.map-quick-toggle[data-marker-layer="gtx"] { --quick-color:#E11D48; --quick-color-2:#F43F5E; --quick-bg:#FFE4E6; --quick-border:rgba(225,29,72,.32); --quick-shadow:rgba(225,29,72,.22); }
.map-quick-toggle[data-marker-layer="region"] { --quick-color:#64748B; --quick-color-2:#94A3B8; --quick-bg:#F1F5F9; --quick-border:rgba(100,116,139,.32); --quick-shadow:rgba(100,116,139,.20); }
.map-quick-toggle.is-disabled,
.map-quick-toggle:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
    color: #AAA3B5;
    background: #F3F2F4;
    box-shadow: none;
}

/* ★ 히든(OFF) 토글 외곽선 깜빡임 (2026-07-04) — 마커가 꺼져 있음을 각자 색으로 알림.
   각 레이어마다 animation-delay 로 시간차를 둬 순차 깜빡임. region/gtx 는 기본 OFF 라 is-off 없이도 항상 적용. */
@keyframes k1QuickOffBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); border-color: var(--quick-border); }
    50%      { box-shadow: 0 0 0 3px var(--quick-shadow); border-color: var(--quick-color); }
}
.map-quick-toggle.is-off[data-marker-layer="apt"],
.map-quick-toggle.is-off[data-marker-layer="officetel"],
.map-quick-toggle.is-off[data-marker-layer="building-sale"],
.map-quick-toggle.is-off[data-marker-layer="place"],
.map-quick-toggle:not(.is-on)[data-marker-layer="gtx"],
.map-quick-toggle:not(.is-on)[data-marker-layer="region"] {
    animation: k1QuickOffBlink 1.6s ease-in-out infinite;
}
.map-quick-toggle[data-marker-layer="apt"]           { animation-delay: 0s; }
.map-quick-toggle[data-marker-layer="officetel"]     { animation-delay: .26s; }
.map-quick-toggle[data-marker-layer="building-sale"] { animation-delay: .53s; }
.map-quick-toggle[data-marker-layer="place"]         { animation-delay: .8s; }
.map-quick-toggle[data-marker-layer="gtx"]           { animation-delay: 1.06s; }
.map-quick-toggle[data-marker-layer="region"]        { animation-delay: 1.33s; }
.map-quick-toggle[data-marker-layer="bus"]           { animation-delay: 1.6s; }
/* 버스 토글 전용 톤 */
.map-quick-toggle[data-marker-layer="bus"] {
    --quick-color: #0B7285;
    --quick-color-2: #15AABF;
    --quick-bg: #EDF9FC;
    --quick-border: rgba(11,114,133,.3);
    --quick-shadow: rgba(11,114,133,.24);
}
/* 의료(병원) 토글 — 이전 병원 칩과 동일한 기본(보라) 톤 사용 (2026-07-13 사용자 요청, 전용 톤 제거) */
/* 약국 토글 전용 톤 — 하늘색 십자 (2026-07-13 사용자 요청) */
.map-quick-toggle[data-marker-layer="pharmacy"] {
    --quick-color: #0EA5E9;
    --quick-color-2: #38BDF8;
    --quick-bg: #E0F7FF;
    --quick-border: rgba(14,165,233,.34);
    --quick-shadow: rgba(14,165,233,.24);
}
@media (prefers-reduced-motion: reduce) {
    .map-quick-toggle[data-marker-layer] { animation: none; }
}

.iw-apt__btn.iw-apt__btn--room[data-chat-type] {
    border-color: rgba(110,71,209,.72) !important;
    animation: tsplSubwayRoomPulse 1.35s ease-in-out infinite;
}
@keyframes tsplSubwayRoomPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(110,71,209,.34);
        border-color: rgba(110,71,209,.56);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(110,71,209,.12);
        border-color: rgba(110,71,209,.95);
    }
}

/* ★ 퀵토글 모바일 확장/축소 화살표 (2026-07-12) — 데스크탑에선 전체 노출이라 숨김 */
.map-quick-toggle.map-quick-more { display: none; }
.map-quick-toggle.map-quick-more i { transition: transform .3s ease; }
/* 화살표 버튼은 툴팁(data-label 말풍선) 표시 안 함 (2026-07-12 사용자 요청) */
.map-quick-toggle.map-quick-more::after,
.map-quick-toggle.map-quick-more::before { display: none !important; }

@media (max-width: 1023px) {
    /* ★ 모바일 (2026-07-12): 칩은 1줄 5개 고정 그리드, 화살표는 그리드 밖 우상단 절대배치
       → 펼쳐도(5개×3줄) 바 너비·화살표 위치가 변하지 않음 */
    .map-quick-toggles {
        top: 90px;
        left: calc(50% - 40px);                  /* ★ 검색창 왼쪽 시작위치와 정렬 — 검색창 = 센터+50px·폭180 → 왼쪽 끝 50%-40px (2026-07-12) */
        grid-template-columns: repeat(5, 23px);
        gap: 2px;
        padding: 3px 29px 3px 3px;               /* 우측 29 = 화살표 자리 */
        border-radius: 10px;
        z-index: 198;
    }
    .map-quick-toggle {
        width: 23px;
        height: 23px;
        border-radius: 8px;
    }
    .map-quick-toggle i { font-size: 10px; }
    /* 기본(축소): 6번째 칩부터 숨김 (화살표 제외) */
    .map-quick-toggles .map-quick-toggle:nth-child(n+6):not(.map-quick-more) { display: none; }
    .map-quick-toggle.map-quick-more {
        display: inline-flex;
        position: absolute;                       /* 그리드 밖 — 위치 고정 */
        top: 3px;
        right: 3px;
        --quick-bg: #F3F1F7;
        --quick-color: #55496E;
        --quick-border: rgba(26,22,32,.14);
    }
    /* 펼침 (body.k1-qt-open) — 전체 표시, 같은 5칸 그리드로 3줄 */
    body.k1-qt-open .map-quick-toggles .map-quick-toggle:nth-child(n+6):not(.map-quick-more) { display: inline-flex; }
}

@media (max-width: 360px) {
    .map-quick-toggles {
        grid-template-columns: repeat(5, 22px);   /* left 는 1023px 블록의 calc(50% - 40px) 상속 */
        padding-right: 28px;
    }
    .map-quick-toggle {
        width: 22px;
        height: 22px;
    }
    .map-quick-toggle i { font-size: 9.5px; }
}