/* ==========================================
 * 코스 보기 (사용자 화면) 지도 레이아웃
 * ========================================== */
.course-viewer-wrap { position: relative; width: 100%; height: 85vh; min-height: 600px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin: 20px 0; border: 1px solid #e0e0e0; display: flex; flex-direction: column; }
.map-area { flex: 1; width: 100%; min-height: 700px; background-color: #f9f9f9; }
.chart-area { width: 100%; height: 200px; background: #ffffff; border-top: 1px solid #e0e0e0; flex-shrink: 0; }
.f-map-label { font-family: GmSansM; padding: 6px 12px 2px 12px; background: #1745c7; border: 1px solid #1745c7; border-radius: 20px; font-size: 13px; font-weight: normal; color: #fff; white-space: nowrap; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); line-height: 1.1; user-select: none; }
.f-info-box { background: #fff; border: 2px solid #2853a4; border-radius: 8px; padding: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); text-align: left; word-break: break-all; white-space: normal; cursor: pointer; }
.f-info-box-title { font-weight: 900; font-size: 14px; color: #2853a4; margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 4px; word-break: break-all; white-space: normal; }
.f-info-box-content { font-size: 12px; color: #333; line-height: 1.4; word-break: break-all; white-space: normal; }

/* 경로 흐름(점선 이동) 애니메이션 */
@keyframes flowDash { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }

/* 카카오맵에서 노란색(#FFFF00)으로 그려진 선을 찾아 애니메이션 적용 */
path[style*="255, 255, 0"], path[style*="255,255,0"], path[style*="#FFFF00"], path[style*="#ffff00"] { stroke-dasharray: 15, 15 !important; animation: flowDash 2s linear infinite !important; }


@media screen and (max-width: 1460px){
	.course-viewer-wrap { height:650px; min-height: 500px; border-radius: 12px; margin: 20px 0; }
	.map-area { min-height: 500px; }
	.chart-area { height: 200px; }
	.f-map-label { padding: 6px 12px 2px 12px; border-radius: 20px; font-size: 13px; }
	.f-info-box { border: 2px solid #2853a4; border-radius: 8px; padding: 10px; }
	.f-info-box-title { font-size: 14px; margin-bottom: 6px; padding-bottom: 4px; }
	.f-info-box-content { font-size: 12px; }
}

@media screen and (max-width: 1100px) {

}

@media screen and (max-width: 650px) {
	.course-viewer-wrap { height:650px; min-height: 650px; border-radius: 12px; margin: 20px 0; }
	.map-area { min-height: 500px; }
	.chart-area { height: 150px; }
	.f-map-label { padding: 6px 12px 2px 12px; border-radius: 20px; font-size: 12px; }
	.f-info-box { border: 2px solid #2853a4; border-radius: 8px; padding: 10px; }
	.f-info-box-title { font-size: 13px; margin-bottom: 6px; padding-bottom: 4px; }
	.f-info-box-content { font-size: 12px; }
}


/* ==========================================
 * 마우스 휠 고정 토글 버튼 (지도 좌측 상단)
 * ========================================== */
.map-scroll-toggle { position: absolute; top: 3px; left: 5px; z-index: 20; background: rgba(255, 255, 255, 0.95); padding: 8px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 1px solid #ccc; pointer-events: auto; }
.map-scroll-toggle label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: 14px; font-weight: bold; color: #333; user-select: none; }
.map-scroll-toggle input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; margin: 0; }

.map-terrain-toggle { position: absolute; bottom:10px; z-index: 20; background: rgba(255,255,255,0.95); padding: 8px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 1px solid #ccc; pointer-events: auto; }
.map-terrain-toggle label { display:flex; align-items:center; gap:6px; margin:0; cursor:pointer; font-size:12px; font-weight:800; color:#333; user-select:none; letter-spacing:-0.025em; }
.map-terrain-toggle input[type="checkbox"] { cursor:pointer; width:16px; height:16px; margin:0; }

/* PC 마우스 휠 고정 토글 버튼 */
.map-scroll-toggle { position: absolute; top: 3px; left: 5px; z-index: 20; background: rgba(255,255,255,0.95); padding: 10px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 1px solid #ccc; pointer-events: auto; }
.map-scroll-toggle label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-size: 14px; font-weight: bold; color: #333; user-select: none; }
.map-scroll-toggle input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; margin: 0; }

/* 모바일 1손가락 패닝 경고 오버레이 */
.two-finger-warning { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; }
.two-finger-warning.show { opacity: 1; visibility: visible; }

/* 카카오맵 강제 스크롤 잠금 무력화 */
#kakao_map, #kakao_map > div, #kakao_map > div > div { touch-action: auto !important; }


.map_fix_tg {position:absolute; top:5px; left:5px; font-size:0px; transition: all .3s; cursor: pointer; z-index:3; background:#fff; padding:5px 10px; border-radius:30px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); border: 1px solid #ccc; }
.map_fix_tg em,
.map_fix_tg span {display:inline-block; vertical-align:middle; position:relative;}
.map_fix_tg em {width:40px; height:24px; background:#0081ef; margin-right:8px; border-radius:35px;transition: all .3s; }
.map_fix_tg em:before {content:""; width:20px; height:20px; background:#fff; border-radius:100%; position:absolute; top:50%; left:18px; transform:translateY(-50%);transition: all .3s; }
.map_fix_tg span {font-size:14px; color:#000; font-weight:600;}

.map_fix_tg.unlock em {background:#777; transition: all .3s;}
.map_fix_tg.unlock em:before {left:1px; transition: all .3s;}

.map_cover {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.07); opacity: 1; visibility: visible;  z-index:2;transition: all .3s !important; }
.map_cover.hidden {visibility: hidden; opacity: 0; transition: all .3s;}

.map_cover_all {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.07); opacity: 1; visibility: visible;  z-index:2; transition: all .3s !important; }
.map_cover_all.hidden {visibility: hidden; opacity: 0; transition: all .3s;}

@media screen and (max-width: 650px) {
	.map_cover_all { height:450px; }
}