/* 버전: 202607091356 */

#left-panel-container {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 250px;
    z-index: 1001;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: auto;
}

#left-panel-container.LEFT-closed {
    transform: translateX(-250px);
}

.LEFT-body {
    width: 250px;
    height: 100%;
    background: #ffffff;
    box-shadow: none;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* 시작: Strava 접속 버튼 어떤 기능을 하는 요소인지 짧은설명: 좌측 패널 맨 하단에 정렬되는 Connect with Strava 이미지 링크, 새 창으로 strava.com 접속 */
.LEFT-strava-link {
    margin-top: auto;
    padding: 18px;
    display: block;
}

.LEFT-strava-link img {
    display: block;
    width: 100px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
/* 끝: Strava 접속 버튼 */


.LEFT-body::-webkit-scrollbar { width: 4px; }
.LEFT-body::-webkit-scrollbar-track { background: transparent; }
.LEFT-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.LEFT-toggle-btn {
    position: absolute;
    top: 50%;
    right: -19px;
    transform: translateY(-50%);
    width: 19px;
    height: 156px;
    background: #ffffff;
    border: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 12px;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}

.LEFT-toggle-btn:hover {
    background: #EEFAF3;
    color: #2E9E6B;
}

.LEFT-toggle-icon {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#left-panel-container.LEFT-closed .LEFT-toggle-icon {
    transform: rotate(180deg);
}

/* 사용자 메뉴 패널 내 오버라이드 */
.LEFT-body .footer-user-menu {
    height: auto;
    width: 100%;
    padding: 10px 12px 10px 17px;
    margin-top: 5px;
    box-sizing: border-box;
}

.LEFT-body .footer-user-menu:hover {
    background: transparent;
}

.LEFT-map-controls {
    position: absolute;
    left: 278px;
    top: 35px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    pointer-events: auto;
    z-index: 990;
}

.LEFT-map-controls .unified-control-box {
    padding: 8px 10px;
    gap: 8px;
    min-width: unset;
}

.LEFT-map-controls .segment-floating-toggle {
    gap: 15px;
}

.LEFT-map-controls .course-floating-main {
    gap: 15px;
}

.LEFT-map-controls .unified-control-box .course-floating-options {
    padding-top: 6px;
    margin-top: 6px;
}

/* 시작: 새 작업/경로저장 막대 버튼 어떤 기능을 하는 요소인지 짧은설명: 상단 토글과 동일한 흰색 박스 스타일, 좌우 분할, 사이드패널 흰색 버튼과 동일한 호버 효과 */
.LEFT-map-controls .LEFT-action-box {
    flex-direction: row;
    padding: 0;
    gap: 0;
    overflow: hidden;
    align-items: stretch;
}

.LEFT-action-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    border: none;
    background: transparent;
    padding: 0 16px;
    height: 36px;
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.LEFT-action-btn:hover {
    background: #EEFAF3;
    color: #2E9E6B;
}

.LEFT-action-btn--primary {
    background: #FC4C02;
    color: #fff;
}

.LEFT-action-btn--primary:hover {
    background: #D94302;
    color: #fff;
}

.LEFT-action-divider {
    width: 1px;
    background: #eee;
    align-self: stretch;
}

/* 경로가 그려지면 강조 대상 전환: 새 작업→화이트, 경로저장→주황 */
.LEFT-action-box.has-route .LEFT-action-btn--primary {
    background: transparent;
    color: #555;
}
.LEFT-action-box.has-route .LEFT-action-btn--primary:hover {
    background: #EEFAF3;
    color: #2E9E6B;
}
.LEFT-action-box.has-route .LEFT-action-btn--save {
    background: #FC4C02;
    color: #fff;
}
.LEFT-action-box.has-route .LEFT-action-btn--save:hover {
    background: #D94302;
    color: #fff;
}
/* 끝: 새 작업/경로저장 막대 버튼 */

/* 시작: 코스 인포그라피 캡처 버튼 어떤 기능을 하는 요소인지 짧은설명: 액션 막대 버튼과 동일한 흰 박스(unified-control-box 룩) 단독 아이콘 버튼, hover 시 연녹, 호버 툴팁(아이콘 아래) */
.LEFT-map-controls .LEFT-camera-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* MISC-01 툴팁 스타일(아이콘 아래 + 위쪽 화살표) */
.LEFT-map-controls .LEFT-camera-wrap::before {
    content: attr(data-cam-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(60, 64, 67, 0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10000;
}
.LEFT-map-controls .LEFT-camera-wrap::after {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent rgba(60, 64, 67, 0.95) transparent;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
}
.LEFT-map-controls .LEFT-camera-wrap:hover::before,
.LEFT-map-controls .LEFT-camera-wrap:hover::after {
    opacity: 1;
    visibility: visible;
}
/* 카메라 버튼: LEFT-action-btn 스타일(36px·hover 연녹) 기반, 박스에 맞춰 모서리만 라운드(아이콘만, 텍스트 없음) */
.LEFT-map-controls .LEFT-camera-btn {
    border-radius: 12px;
    font-size: 15px;
}
/* 끝: 코스 인포그라피 캡처 버튼 */

/* 시작: 지명 검색 섹션 어떤 기능을 하는 요소인지 짧은설명: 좌측 패널 검색창(INPUT-04 변형, 돋보기 우측 버튼) + 결과 레이어(가로 확장) + MARKER-04 검색 마커 */
.LEFT-place-search-section {
    position: relative;
    padding: 14px 18px 0;
}
/* '현 지도 내 장소검색' 체크박스 - 검색폼 위 우측 정렬, 코스 옵션 체크박스(accent-color #333) 준용 */
.LEFT-search-scope {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 6px;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    user-select: none;
}
.LEFT-search-scope input[type="checkbox"] {
    accent-color: #333;
    cursor: pointer;
    margin: 0;
}
.LEFT-search-box {
    display: flex;
    align-items: center;
    height: 30px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #fff;
    padding: 0 2px 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.LEFT-search-box:focus-within {
    border-color: #2E9E6B;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.LEFT-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #333;
}
.LEFT-search-input::placeholder { color: #9aa0a6; }
.LEFT-search-btn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #c0c0c0;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.LEFT-search-btn:hover { background: #EEFAF3; }

/* 결과 레이어: 폼 너비를 최소폭으로, 결과 텍스트 길이만큼 오른쪽으로 가로 확장 */
.LEFT-search-results {
    display: none;
    position: absolute;
    top: 70px;
    left: 18px;
    right: 18px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1200;
}
.LEFT-search-results.show { display: block; }
.LEFT-search-item {
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
}
.LEFT-search-item:last-child { border-bottom: none; }
.LEFT-search-item.active,
.LEFT-search-item:hover { background: #EEFAF3; }
.LEFT-search-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.LEFT-search-item-addr {
    font-size: 12px;
    color: #80868b;
    margin-top: 2px;
}
.LEFT-search-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: #80868b;
    white-space: nowrap;
}

/* 선택 강조 행(녹색) */
.LEFT-search-item.selected { background: #EEFAF3; }
.LEFT-search-item.selected .LEFT-search-item-name { color: #2E9E6B; }

/* 결과 레이어 상단 '검색 취소' 헤더 - 스크롤해도 상단 고정 */
.LEFT-search-head {
    display: flex;
    justify-content: flex-end;
    padding: 6px 8px;
    border-bottom: 1px solid #f1f3f4;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.LEFT-search-cancel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: #80868b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}
.LEFT-search-cancel:hover { background: #f1f3f4; color: #d93025; }

/* 시작: '현 지도 내' 검색 마커 어떤 기능을 하는 요소인지 짧은설명: 체크 모드에서 화면 안 검색 결과를 오렌지 핀(fa-location-dot)으로 표시. 핀 스타일(외곽선·크기·그림자)은 안쪽 i에만 걸어 툴팁(MISC-01 data-tooltip::before)에 폰트·외곽선·라인하이트가 안 새게 함. 호버=MISC-01 상호명 툴팁, 클릭=공용 말풍선(.poi-info-* kakao-view.css) */
.LEFT-inview-marker { position: relative; cursor: pointer; }
.LEFT-inview-marker i {
    display: block;
    line-height: 1;
    font-size: 30px;
    color: #FC4C02;
    -webkit-text-stroke: 1.5px #fff;
    paint-order: stroke fill;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
/* MISC-01 툴팁을 편의점 마커와 100% 동일하게: 마커 고유 스타일이 새지 않도록 명시 리셋 */
.LEFT-inview-marker[data-tooltip]::before {
    -webkit-text-stroke: 0;
    line-height: 1.4;
    filter: none;
}
/* 끝: '현 지도 내' 검색 마커 */
/* 끝: 지명 검색 섹션 */

.LEFT-library-section {
    padding: 16px 0 8px;
}

.LEFT-library-link {
    display: block;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    margin: 0 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.LEFT-library-link:hover {
    background: #EEFAF3;
    color: #2E9E6B;
}

.LEFT-library-link--parent {
    padding-bottom: 4px;
}

.LEFT-library-link--sub {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 38px;
}

.LEFT-library-link--sub::before {
    content: "└";
    margin-right: 6px;
    color: #666;
    font-weight: 400;
}

.LEFT-library-count {
    font-size: 11px;
    font-weight: 400;
    color: #666;
}

/* 내 라이딩 채널: 기본=강조 상태, 호버 시 NAV-03 입체 팝업 효과 */
.LEFT-library-link--channel {
    margin-top: 3px;
    background: #EEFAF3;
    color: #2E9E6B;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.LEFT-library-link--channel:hover {
    background: #EEFAF3;
    color: #2E9E6B;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(46,158,107,0.25);
}

/* 시작: 지도 설정 섹션 어떤 기능을 하는 요소인지 짧은설명: 좌측 패널에서 베이스/위성 지도 라디오 선택 UI. 메뉴바 토글 버튼이 참조하는 기준값 */
.LEFT-map-settings-section {
    padding: 18px 18px 20px;
    border-top: 1px solid #eee;
    margin-top: 8px;
}

.LEFT-map-settings-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #444;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* 시작: 안내 도움말 버튼 어떤 기능을 하는 요소인지 짧은설명: 연한 회색 원형 '?' 버튼(지도 설정·세그먼트 필터·푸터 통계 공용). 클릭 시 해당 안내 모달을 염. 기본 연회색 배경+흰 글자, 호버 녹색 채움 */
.help-btn-circle {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #cbcbcb;
    color: #ffffff;
    font-size: 10px;
    font-weight: normal;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.help-btn-circle:hover {
    border-color: #24835A;
    background: #24835A;
    color: #fff;
}
/* 끝: 안내 도움말 버튼 */

.LEFT-map-radio-group {
    margin-bottom: 12px;
}

.LEFT-map-radio-group:last-child {
    margin-bottom: 0;
}

.LEFT-map-radio-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
}

.LEFT-map-options-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.LEFT-map-btn {
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
    border-radius: 14px;
    padding: 4px 10px;
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.LEFT-map-btn:not(.is-selected):hover {
    background-color: #EEFAF3;
    border-color: #2E9E6B;
    color: #2E9E6B;
}

.LEFT-map-btn.is-selected {
    background-color: #2E9E6B;
    border-color: #2E9E6B;
    color: #ffffff;
}
/* 끝: 지도 설정 섹션 */

/* 시작: SEGMENTS 설정 필터 섹션 어떤 기능을 하는 요소인지 짧은설명: 좌측 패널에서 세그먼트 표시 필터(평균경사도, 거리) UI 및 단일 핸들 슬라이더 스타일 */
.LEFT-segments-filter-section {
    padding: 18px 18px 24px;
    border-top: 1px solid #eee;
    margin-top: 8px;
}

.LEFT-segments-filter-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #444;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.LEFT-filter-item {
    margin-bottom: 12px;
}

.LEFT-filter-item:last-child {
    margin-bottom: 0;
}

.LEFT-popular-filter {
    margin-bottom: 18px;
}

.LEFT-popular-seg {
    display: flex;
    width: 100%;
    border: 1px solid #c0c0c0;
    border-radius: 14px;
    overflow: hidden;
}

.LEFT-popular-seg-btn {
    flex: 1;
    background-color: #ffffff;
    border: none;
    padding: 6px 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.LEFT-popular-seg-btn + .LEFT-popular-seg-btn {
    border-left: 1px solid #c0c0c0;
}

.LEFT-popular-seg-btn:not(.is-selected):hover {
    background-color: #EEFAF3;
    color: #2E9E6B;
}

.LEFT-popular-seg-btn.is-selected {
    background-color: #2E9E6B;
    color: #ffffff;
}

.LEFT-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #2E9E6B;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 3;
}

.LEFT-slider-wrap {
    position: relative;
    padding: 0 4px;
    padding-top: 19px;
}

.LEFT-range-slider {
    position: relative;
    width: 100%;
    height: 24px;
    margin-top: 4px;
}

.LEFT-range-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #f0f0f0;
    top: 10px;
    border-radius: 2px;
}

.LEFT-range-zero-tick {
    position: absolute;
    left: 33.33%;
    top: 6px;
    width: 2px;
    height: 12px;
    background-color: #bbb;
    transform: translateX(-50%);
    z-index: 1;
}

.LEFT-range-fill {
    position: absolute;
    height: 4px;
    background-color: #2E9E6B;
    top: 10px;
    border-radius: 2px;
    z-index: 1;
}

.LEFT-range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    top: 0;
    margin: 0;
    z-index: 2;
}

.LEFT-range-slider input[type="range"]:focus {
    outline: none;
}

.LEFT-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 14px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    pointer-events: auto;
    cursor: pointer;
    margin-top: 3px;
}

.LEFT-range-slider input[type="range"]::-moz-range-thumb {
    height: 18px;
    width: 14px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    pointer-events: auto;
    cursor: pointer;
}

.LEFT-axis-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    color: #888;
}

.LEFT-grade-axis span:nth-child(2) {
    position: absolute;
    left: calc(33.33% + 2.33px);
    transform: translateX(-50%);
}
/* 끝: SEGMENTS 설정 필터 섹션 */