/* 버전: 202607090104 */
/* 시작: kakao-view.css 어떤 기능을 하는 요소인지 짧은설명: 카카오 맵 오버레이 레이어/런처 박스/닫기 버튼/안내 박스 스타일 */

/* 시작: 카카오 오버레이 레이어 어떤 기능을 하는 요소인지 짧은설명: 지도 위(z-index 2)에 깔리되 좌/우 패널·버튼(990 이상)보다 아래에 위치 */
#kakao-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
}
#kakao-overlay.active { display: block; }

#kakao-map-container,
#kakao-roadview-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#kakao-roadview-container { display: none; }
/* 끝: 카카오 오버레이 레이어 */

/* 시작: 카카오맵 런처 박스 어떤 기능을 하는 요소인지 짧은설명: 우측 S/W 플로팅 버튼(top:35px) 왼쪽 동일 높이. 타이틀 '카카오맵'(13px) + 지도/스카이뷰/로드뷰(11px) 토글, 선택 녹색/미선택 흰색 */
#kakao-launcher {
    position: absolute;
    top: 35px;
    right: 116px;
    z-index: 1003;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.kakao-launch-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    padding: 0 6px 0 14px;
    height: 38px;
    box-sizing: border-box;
}
.kakao-launch-logo {
    width: 24px;
    height: 24px;
    display: block;
}
.kakao-launch-switch {
    display: flex;
    border-radius: 8px;
    background: #f2f2f2;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); /* 음각(들어가 보이는) 입체감 - 얕게 */
    /* overflow:hidden 제거 — 박스 아래 뜨는 툴팁(가상요소)이 잘리지 않도록 */
}
.kakao-launch-switch button {
    border: none;
    background: transparent;
    color: #555;
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 0 14px;
    height: 28px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.kakao-launch-switch button:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.kakao-launch-switch button:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.kakao-launch-switch button:not(:last-child) { border-right: 1px solid #d5d5d5; } /* 메뉴 사이 구분선 */
.kakao-launch-switch button:hover { background: #EEFAF3; color: #2E9E6B; }
.kakao-launch-switch button.active { background: #2E9E6B; color: #fff; }

/* MISC-01 툴팁을 그룹 아래로(화살표 위로) 반전 — 기본 스타일은 menu-bar.css [data-tooltip] 상속 */
.kakao-launch-switch[data-tooltip]::before {
    bottom: auto;
    top: calc(100% + 8px);
}
.kakao-launch-switch[data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(60, 64, 67, 0.95) transparent;
}
/* 끝: 카카오맵 런처 박스 */

/* 시작: 장소 카테고리 토글 버튼(편의점·카페·음식점) 어떤 기능을 하는 요소인지 짧은설명: 런처 박스 아래 가로 한 줄. 배경/박스 없이 글자·아이콘 획 자체에 흰색 외곽선(text-stroke)만 둘러 지도 위 가독성 확보. 글자색 기본(짙은 회색), 토글 ON 시 글자 #FC4C02·외곽선 흰색 유지 */
.conv-search-row {
    display: flex;
    gap: 12px;
    margin-top: -8px;
}
.conv-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #333;
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 0;
    height: 30px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-text-stroke: 3px #fff;
    paint-order: stroke fill;
    transition: color 0.2s ease;
}
.conv-search-btn.active { color: #FC4C02; }
/* 끝: 장소 카테고리 토글 버튼 */

/* 시작: 장소 카테고리 마커 어떤 기능을 하는 요소인지 짧은설명: MARKER-04(세그먼트 플래그) 준용 - 흰 원 24×24, border 2.5px, 안에 카테고리 아이콘. 식별색은 카테고리별(편의점 파랑·마트 청록·카페 보라·음식점 빨강)로 .cat-*에서 지정 */
.conv-marker {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2.5px solid #3B82F6;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B82F6;
    font-size: 12px;
    cursor: pointer;
}
.conv-marker.cat-conv { border-color: #3B82F6; color: #3B82F6; }
.conv-marker.cat-mart { border-color: #14B8A6; color: #14B8A6; }
.conv-marker.cat-cafe { border-color: #8B5CF6; color: #8B5CF6; }
.conv-marker.cat-food { border-color: #EF4444; color: #EF4444; }
/* 끝: 장소 카테고리 마커 */

/* 시작: 공용 장소 정보 말풍선 어떤 기능을 하는 요소인지 짧은설명: 마커 클릭 시 뜨는 정보(상호명·카테고리·주소·전화 + 상세보기 팝업·로드뷰 아이콘). place-search(Leaflet 팝업)·convenience-search(Leaflet 팝업/카카오 CustomOverlay) 공용 */
.poi-info-name { font-size: 14px; font-weight: 700; color: #222; padding-right: 22px; }
.poi-info-cat { font-size: 11px; font-weight: 500; color: #888; margin-left: 6px; }
.poi-info-addr { font-size: 12px; color: #555; margin-top: 4px; }
.poi-info-tel { font-size: 12px; color: #2E9E6B; margin-top: 3px; }
.poi-info-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.poi-info-btn { flex: 1; height: 30px; border: none; border-radius: 6px; background: #2E9E6B; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.poi-info-btn:hover { background: #24835A; }
.poi-info-rvbtn { width: 34px; height: 30px; border: 1px solid #d0d0d0; border-radius: 6px; background: #fff; color: #FC4C02; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.poi-info-rvbtn:hover { background: #FFF3EE; border-color: #FC4C02; }
/* Leaflet 팝업 래퍼 */
.poi-info-popup .leaflet-popup-content { margin: 10px 12px; min-width: 160px; }
/* 카카오 오버레이용 말풍선 박스(직접 위치) */
.poi-info-bubble { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,0.25); padding: 10px 12px; min-width: 170px; }
.poi-info-close { position: absolute; top: 9px; right: 8px; border: none; background: transparent; font-size: 16px; line-height: 1; color: #999; cursor: pointer; }
.poi-info-close:hover { color: #333; }
.poi-info-tail { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; filter: drop-shadow(0 2px 1px rgba(0,0,0,0.15)); }
/* 끝: 공용 장소 정보 말풍선 */

/* 시작: 닫기 버튼 어떤 기능을 하는 요소인지 짧은설명: 카카오 실행 중에만 화면 중앙 하단 메뉴바 그룹(.center-tool-container) 바로 위 중앙에 표시되는 원형 검은 반투명 흰 X. 푸터(#footer-panel) 자식이라 메뉴바와 동일 가로중심(left:50%)·bottom:100% 기준으로 정렬 */
#kakao-close-btn {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 66px);
    transform: translateX(-50%);
    z-index: 1004;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: background 0.2s ease;
}
body.kakao-active #kakao-close-btn { display: flex; }
#kakao-close-btn:hover { background: rgba(0,0,0,0.75); }
/* 끝: 닫기 버튼 */

/* 시작: 안내 박스 어떤 기능을 하는 요소인지 짧은설명: 디자인시스템 그림자 박스(.ds-item) 차용 + 삼각 경고 아이콘 */
#kakao-notice-box {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
#kakao-notice-box.active { display: flex; }
#kakao-notice-box i { color: #FBBC05; font-size: 18px; }
/* 끝: 안내 박스 */

/* 시작: 미니맵 어떤 기능을 하는 요소인지 짧은설명: 좌측 하단 여백 0 밀착, 우리 서버 지도(Leaflet)로 위치·방향 표시 + 클릭 이동 + 우측 상단 크기조절 */
#kakao-minimap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 440px;
    height: 320px;
    z-index: 1002;
    display: none;
    overflow: hidden;
    box-shadow: 2px -2px 12px rgba(0,0,0,0.25);
    cursor: pointer;
}
#kakao-minimap.active { display: block; }

/* 미니맵 상단 중앙 안내 배너 — MISC-01b 사이즈 + 흰 배경 + TYPO-05 */
#kakao-mini-banner {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: #fff;
    color: #666;
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    white-space: nowrap;
    pointer-events: none;
}

/* 크기조절 핸들 — 독립(아래 최대화·지도전환 그룹과 분리) */
#kakao-minimap-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    z-index: 1100;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: nesw-resize;
    border-bottom-left-radius: 8px;
}
#kakao-minimap-resize:hover { background: rgba(0,0,0,0.75); }

/* 최대화/이전크기 토글 버튼 — 아래 지도전환 버튼과 한 그룹(그룹 상단) */
#kakao-minimap-max {
    position: absolute;
    top: 30px;
    right: 0;
    width: 26px;
    height: 26px;
    z-index: 1100;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-top-left-radius: 8px;
}
#kakao-minimap-max:hover { background: rgba(0,0,0,0.75); }

/* 최대화 버튼 아래 지도/위성 토글 버튼 — 최대화 버튼과 붙은 그룹(그룹 하단) */
#kakao-minimap-view {
    position: absolute;
    top: 56px;
    right: 0;
    width: 26px;
    height: 26px;
    z-index: 1100;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-bottom-left-radius: 8px;
}
#kakao-minimap-view:hover { background: rgba(0,0,0,0.75); }

.kakao-mini-marker {
    position: relative;
    width: 14px;
    height: 14px;
    margin: 7px;
    background: #FC4C02;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    opacity: 0.6;
}
.kakao-mini-arrow {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px); /* 마커 테두리와 화살표 사이 2px 간격 */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #FC4C02;
    transform-origin: 50% 20px; /* 간격 2px 만큼 회전축 보정 */
    transform: translateX(-50%);
    display: none;
}
/* 끝: 미니맵 */

/* 시작: 카카오 지도 중앙 마커 어떤 기능을 하는 요소인지 짧은설명: 카카오 지도가 보이는 영역의 정중앙(=지도 중심) 표시, 미니맵 마커와 동일한 주황 점. 컨테이너 자식이라 파노라마 진입 시 자동 숨김 */
#kakao-center-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    z-index: 5;
    background: #FC4C02;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    pointer-events: none;
    opacity: 0.6;
}
/* 끝: 카카오 지도 중앙 마커 */

/* 시작: 카카오 활성 시 버튼 비활성화 어떤 기능을 하는 요소인지 짧은설명: 우측 S/W·좌측 토글·새작업/저장/반전·하단 메뉴바를 클릭까지 완전 차단(자식 pointer-events:auto 덮어쓰기) */
body.kakao-active #floating-btn-group,
body.kakao-active #floating-btn-group *,
body.kakao-active .LEFT-map-controls,
body.kakao-active .LEFT-map-controls *,
body.kakao-active .center-tool-container,
body.kakao-active .center-tool-container * {
    pointer-events: none !important;
}
body.kakao-active #floating-btn-group,
body.kakao-active .LEFT-map-controls,
body.kakao-active .center-tool-container {
    opacity: 0.4;
}
/* 끝: 카카오 활성 시 버튼 비활성화 */

/* 시작: 세그먼트/구간 선택 정보 표시 시 버튼 비활성화 어떤 기능을 하는 요소인지 짧은설명: 카카오 활성 비활성화와 동일 스타일. 세그먼트(매칭/탐색) 또는 고도그래프 구간 선택으로 정보를 볼 때 좌측 토글·새작업/저장/반전·캡쳐(.LEFT-map-controls)와 카카오 버튼그룹(#kakao-launcher: 흰 박스+로고+버튼 전체)을 클릭까지 완전 차단 */
body.seg-info-active .LEFT-map-controls,
body.seg-info-active .LEFT-map-controls *,
body.seg-info-active #kakao-launcher,
body.seg-info-active #kakao-launcher * {
    pointer-events: none !important;
}
body.seg-info-active .LEFT-map-controls,
body.seg-info-active #kakao-launcher {
    opacity: 0.4;
}
/* 끝: 세그먼트/구간 선택 정보 표시 시 버튼 비활성화 */

/* 끝: kakao-view.css 어떤 기능을 하는 요소인지 짧은설명: 카카오 맵 오버레이 레이어/전환 컨트롤/닫기 버튼/안내 박스 스타일 */