/* 버전: 202607090104 */
/* 시작: ws-kakao-view.css 어떤 기능을 하는 요소인지 짧은설명: 인덱스 카카오 런처(kakao-view.css)를 map-workspace 전체화면 전용으로 이식한 스타일. 전체화면 요소(#ws-preview-card) 안쪽에 두며, 출발장소 모달과의 ID 충돌을 피하려 ws- 접두 사용 */

/* 시작: 카카오 오버레이 레이어 어떤 기능을 하는 요소인지 짧은설명: 전체화면 지도 영역(save-map-wrap) 전체를 덮음. 하단 overlay(1100)·툴바(1200)보다 위, 플로팅 S/W(2000)·런처(2003)보다 아래 */
#ws-kakao-overlay {
    position: absolute;
    inset: 0;
    z-index: 1500;
    display: none;
}
#ws-kakao-overlay.active { display: block; }

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

/* 시작: 카카오맵 런처 박스 어떤 기능을 하는 요소인지 짧은설명: 전체화면에서만 노출(기본 display:none). S/W 버튼 왼쪽에 동일 높이로 위치(right는 JS positionLauncher가 계산) */
.ws-kakao-launcher {
    position: absolute;
    top: 20px;
    right: 120px;
    z-index: 2003;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
body.is-fullscreen .ws-kakao-launcher { display: flex; }

.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);
}
.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; }

/* 툴팁을 그룹 아래로 반전(기본 [data-tooltip]은 course-detail.css/course-save.css 상속) */
.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;
}
/* 끝: 카카오맵 런처 박스 */

/* 시작: 장소 카테고리 토글 버튼(편의점·마트·카페·음식점) 어떤 기능을 하는 요소인지 짧은설명: 인덱스(kakao-view.css)와 동일 스타일 이식. 런처 박스 아래 가로 한 줄, 글자·아이콘 획에 흰 외곽선(text-stroke)만, ON 시 글자 #FC4C02·외곽선 흰색 유지. 마커는 MARKER-04 준용 원형+카테고리 색 */
.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; }
.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; }
/* 끝: 장소 카테고리 토글 버튼 */

/* 시작: 공용 장소 정보 말풍선 어떤 기능을 하는 요소인지 짧은설명: 마커 클릭 시 뜨는 정보(상호명·카테고리·주소·전화 + 상세보기 팝업·로드뷰 아이콘). convenience-search(Leaflet 팝업/카카오 CustomOverlay) 공용. kakao-view.css와 동일 스펙 이식(ws 자체완결) */
.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; }
.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)); }
/* 끝: 공용 장소 정보 말풍선 */

/* 시작: 닫기 버튼 어떤 기능을 하는 요소인지 짧은설명: 카카오 실행 중에만 화면 중앙 하단에 표시되는 원형 검은 반투명 흰 X. 카카오뷰가 화면 전체(로드뷰 레이어 1500)를 덮어 하단 통계·고도그래프·메뉴바가 가려지므로, overlay 높이에 의존하지 않고 화면 하단 고정. 카드(#ws-preview-card) 자식이라 가로 중앙(left:50%) */
#ws-kakao-close-btn {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 2004;  /* 카카오 오버레이(1500)보다 위 — 로드뷰에 가리지 않게(기존 런처 2003 바로 위) */
    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.ws-kakao-active #ws-kakao-close-btn { display: flex; }
#ws-kakao-close-btn:hover { background: rgba(0,0,0,0.75); }
/* 끝: 닫기 버튼 */

/* 시작: 카카오 활성 시 S/W 버튼·툴바 비활성화 어떤 기능을 하는 요소인지 짧은설명: 카카오 실행 중 우측 S/W 플로팅 버튼을 클릭 차단+흐림(런처/닫기는 제외) */
body.ws-kakao-active .floating-action-btns,
body.ws-kakao-active .floating-action-btns * {
    pointer-events: none !important;
}
body.ws-kakao-active .floating-action-btns { opacity: 0.4; }
/* 끝: 카카오 활성 시 S/W 버튼·툴바 비활성화 */

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

#ws-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;
}

/* 크기조절 핸들 — 독립(아래 최대화·지도전환 그룹과 분리) */
#ws-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;
}
#ws-kakao-minimap-resize:hover { background: rgba(0,0,0,0.75); }

/* 최대화/이전크기 토글 버튼 — 아래 지도전환 버튼과 한 그룹(그룹 상단) */
#ws-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;
}
#ws-kakao-minimap-max:hover { background: rgba(0,0,0,0.75); }

/* 최대화 버튼 아래 지도/위성 토글 버튼 — 최대화 버튼과 붙은 그룹(그룹 하단) */
#ws-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;
}
#ws-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);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #FC4C02;
    transform-origin: 50% 20px;
    transform: translateX(-50%);
    display: none;
}
/* 끝: 미니맵 */

/* 시작: 카카오 지도 중앙 마커 어떤 기능을 하는 요소인지 짧은설명: 카카오 지도 중심 표시(미니맵 마커와 동일한 주황 점), 파노라마 진입 시 자동 숨김 */
#ws-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;
}
/* 끝: 카카오 지도 중앙 마커 */

/* 시작: 로드뷰 펙맨 어떤 기능을 하는 요소인지 짧은설명: 인덱스 메뉴바 펙맨(menu-bar.css) 외형을 그대로 이식. 툴바(.map-toolbar-wrap) 우측에 절대배치, 전체화면 전·후 항상 노출 */
#ws-roadview-pegman { display: flex; }
.ws-roadview-pegman {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 14px;
    transform: translateY(calc(-50% - 4px));
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #FC4C02;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    cursor: grab;
    z-index: 1002;
}
.ws-roadview-pegman::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: -5px;
    border: 13px solid transparent;
    border-width: 13px 8px 0;
    border-top-color: #fff;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2));
}
.ws-roadview-pegman.dragging { cursor: grabbing; opacity: 0.4; }

.ws-roadview-pegman-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(60,64,67,0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    pointer-events: none;
}
.ws-roadview-pegman-tip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-width: 6px 6px 0 6px;
    border-top-color: rgba(60,64,67,0.95);
}
.ws-roadview-pegman:hover .ws-roadview-pegman-tip { display: block; }

.ws-roadview-pegman-ghost {
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #FC4C02;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -100%);
}
.ws-roadview-pegman-ghost::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: -5px;
    border: 13px solid transparent;
    border-width: 13px 8px 0;
    border-top-color: #fff;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2));
}

.ws-roadview-drop-notice {
    position: fixed;
    transform: translate(-50%, -130%);
    background: rgba(60,64,67,0.95);
    color: #fff;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 100000;
}
/* 끝: 로드뷰 펙맨(전체화면 전용) */
/* 끝: 코스 캡처 아이콘(detail 전용) */

/* 끝: ws-kakao-view.css */