/* 변경 파일명: map-workspace.css */
/* 버전: 202607311649 */
/* 시작: 맵워크스페이스 공용 CSS v202607311649 짧은설명: map-workspace.html(우측 지도영역: 지도·통계줄·고도그래프·툴바·전체화면·세그/웨이포인트 패널·하단 split 목록)을
   쓰는 상세(course-detail)·저장/수정(course-save/modify) 3페이지가 공유하는 스타일. course-detail.css·course-save.css에 중복 정의되어 있던 워크스페이스 규칙을
   상세 페이지 판을 기준으로 이곳 한 파일로 통합했다(한 곳만 고치면 3페이지에 반영). 이 파일은 각 페이지 CSS보다 먼저 로드되어 페이지 CSS가 필요 시 오버라이드한다.
   /draw/·log-edit의 side-panel.css·draw-header.css 사본은 페이지 성격이 달라 통합 대상에서 제외 */

/* 시작: 세그먼트 아이콘 호버 툴팁 글꼴 어떤 기능을 하는 요소인지 짧은설명: 세그먼트 깃발 아이콘에 마우스를 올렸을 때 뜨는
   이름 툴팁만 Leaflet 기본 글꼴(12px Helvetica) 대신 사이트 기본 폰트(Pretendard 15px/400/#444)로 쓴다.
   그리기 편집기(map-core.css)·카카오(kakao-view.css)와 같은 값 v202607272212 */
.leaflet-tooltip.segment-name-tip {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #444;
}
/* 끝: 세그먼트 아이콘 호버 툴팁 글꼴 */

/* 지도 아래 통계·고도그래프·목록 패널의 바탕을 흰색에서 크림색(#FCF9F5)으로 변경. 전체화면 모드는 기존대로 흰색 유지 v202607141357 */
.save-preview-card { background: #FCF9F5; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e0e0e0; overflow: hidden; display: flex; flex-direction: column; width: 100%; }

.save-preview-card:fullscreen { width: 100vw !important; height: 100vh !important; display: flex !important; flex-direction: column !important; background: #fff; border: none; border-radius: 0; margin: 0; padding: 0; overflow: hidden; }

.save-preview-card:fullscreen .map-area-wrap { flex: 1 !important; height: auto !important; min-height: 0; }

.save-preview-card:fullscreen .stats-row-wrap { justify-content: flex-start; gap: 0; }

.save-preview-card:fullscreen .stat-col { flex: none; min-width: 100px; margin-right: 30px; padding-right: 30px; }

.save-preview-card:fullscreen .chart-area-wrap { height: 260px; }

.save-preview-card:fullscreen .detail-only-stat { display: flex !important; }

.map-area-wrap { height: 500px; position: relative; background: #eee; border-bottom: 1px solid #ccc; }
#ws-map-view { width: 100%; height: 100%; z-index: 1; }

.stats-row-wrap { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: #FFFCF7; border-bottom: 1px solid #ccc; flex-shrink: 0; }
.stat-col { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.stat-col:not(:last-child) { border-right: 1px solid #eee; margin-right: 20px; padding-right: 20px; }
.stat-lbl { font-size: 11px; color: #888; font-weight: 600; margin-bottom: 4px; white-space: nowrap; display: flex; align-items: baseline; gap: 4px; }
.stat-lbl .pct-blue { color: #2E9E6B; font-weight: 600; }
.stat-val { font-size: 24px; font-weight: 600; color: #333; font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 2px; line-height: 1.1; white-space: nowrap; }

.stat-val .unit, .stat-val .unit-sym { font-size: 13px; font-weight: 500; color: #888; }
.stat-val .unit-sym { margin: 0 1px; }

/* 시작: 전체화면 전 통계 줄 v202607291610 짧은설명: 전체화면에 들어가기 전 통계 줄을 /draw/ 푸터 숨김 단계와 같은 모양으로 맞춘다.
   라벨과 값을 세로 2줄이 아니라 가로 한 줄로 붙이고, 기본 폰트(Pretendard) 17px·#444로 통일해 굵기(라벨 400 / 값 600)로만 구분한다.
   항목은 상세 페이지의 5개(거리·상승고도·상승거리·평균속도·예상시간) 그대로이며, 하강고도·하강평지거리는 기존대로 전체화면에서만 나온다.
   전체화면(body.is-fullscreen)은 항목이 7개로 늘어 큰 숫자(24px Montserrat)가 어울리므로 손대지 않는다 */
/* 항목 사이는 세로 구분선 대신 남는 폭을 고르게 나눠 띄운다(5개가 지도 폭 800px 안에 한 줄로 들어가야 한다) */
body:not(.is-fullscreen) .stats-row-wrap:not(.seg-summary-on) { padding: 20px 16px; }
/* 항목명(15px)과 값(18px)의 크기가 달라 세로 중앙 정렬이면 글자 밑선이 어긋난다 → baseline으로 아래를 맞춘다 v202607291622 */
body:not(.is-fullscreen) .stat-col { flex: none; flex-direction: row; align-items: baseline; gap: 5px; }
body:not(.is-fullscreen) .stat-col:not(:last-child) { border-right: none; margin-right: 0; padding-right: 0; }
body:not(.is-fullscreen) .stat-lbl,
body:not(.is-fullscreen) .stat-val {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    color: #444;
    letter-spacing: normal;
    line-height: 1.2;
    margin: 0;
}
/* 항목명은 값보다 한 단계 작은 15px(안의 퍼센트 표기도 상속받아 함께 15px) v202607291614 */
body:not(.is-fullscreen) .stat-lbl { font-size: 15px; font-weight: 400; }
body:not(.is-fullscreen) .stat-val,
body:not(.is-fullscreen) .stat-val .unit,
body:not(.is-fullscreen) .stat-val .unit-sym { font-weight: 600; }
body:not(.is-fullscreen) .stat-val .unit,
body:not(.is-fullscreen) .stat-val .unit-sym { font-size: 18px; color: #444; }
/* 끝: 전체화면 전 통계 줄 v202607291610 */

.chart-area-wrap { height: 220px; background: #FFFCF7; position: relative; padding: 5px 20px 20px 20px; box-sizing: border-box; flex-shrink: 0; }

.map-info-overlay { position: absolute; bottom: 15px; right: 20px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; pointer-events: none; z-index: 1000; }
.zoom-level-display { font-size: 11px; font-weight: 700; color: #333; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; margin-bottom: 2px; }

#ws-leaflet-scale-custom .leaflet-control-scale-line {
    border: 1px solid #333 !important;
    border-top: none !important;
    line-height: 1.1 !important;
    padding: 2px 5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #333 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    box-sizing: border-box;
}

/* z-index는 공통 헤더(1000)보다 낮게 둔다. 같은 값이면 DOM 순서상 툴바가 위로 올라와 스크롤 시 헤더를 덮는다 v202607141502 */
.map-toolbar-wrap { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; height: 44px; display: flex; flex-direction: row; align-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), inset 0 1px 2px #ffffff; padding: 0 6px; z-index: 900; }
.toolbar-btn { border: none; background: none; height: 34px; width: 34px; margin: 0 2px; cursor: pointer; color: #444; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s ease; }
.toolbar-btn:hover { background-color: #F1D9A9 !important; color: #444 !important; }
.toolbar-divider { width: 1px; height: 18px; background: rgba(0, 0, 0, 0.12); margin: 0 4px; }

/* 시작: 일반 화면 지도 툴바 간소화 v202607141443 짧은설명: 전체화면 진입 전에는 툴바를 [코스편집 | 전체화면(아이콘+텍스트)] 두 버튼만 두고(배경 #F2EFEB), 지도전환·캡처·로드뷰 페그맨과 그에 딸린 구분선은 숨긴다. 캡처·지도전환·로드뷰는 전체화면 툴바가 대신한다. 캡처 버튼(#ws-course-capture)은 상세에만 있어 저장·수정에서는 해당 셀렉터가 아무것도 가리지 않는다. 전체화면(body.is-fullscreen)에서는 모든 버튼이 기존대로 나오고 전체화면 버튼은 아이콘만 보인다 */
body:not(.is-fullscreen) #current-map-icon,
body:not(.is-fullscreen) #current-map-icon + .toolbar-divider,
body:not(.is-fullscreen) #ws-course-capture,
body:not(.is-fullscreen) #btn-toggle-fullscreen + .toolbar-divider { display: none !important; }
body:not(.is-fullscreen) .map-toolbar-wrap { background: #F2EFEB; }
body:not(.is-fullscreen) .btn-fullscreen { width: auto; padding: 0 14px; gap: 8px; font-size: 14px; font-weight: 600; }
/* 라벨이 그대로 보이므로 툴팁은 띄우지 않는다 */
body:not(.is-fullscreen) .btn-fullscreen::before,
body:not(.is-fullscreen) .btn-fullscreen::after { display: none; }
body.is-fullscreen .ws-fs-btn-text { display: none; }
/* 끝: 일반 화면 지도 툴바 간소화 v202607141443 */

[data-tooltip] { position: relative; }
[data-tooltip]::before { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background-color: rgba(60, 64, 67, 0.95); color: #ffffff; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; z-index: 10000; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: none; }
[data-tooltip]::after { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-style: solid; border-color: rgba(60, 64, 67, 0.95) transparent transparent transparent; pointer-events: none; opacity: 0; visibility: hidden; z-index: 10000; transition: none; }
[data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; visibility: visible; }

.dropup { position: relative; display: flex; align-items: center; height: 100%; }

.dropup-menu::after { content: ''; position: absolute; bottom: -15px; left: 0; width: 100%; height: 15px; background: transparent; }
.dropup-menu { display: none; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background: white; border: 1px solid rgba(46, 158, 107, 0.3); border-radius: 10px; box-shadow: 0 -4px 16px rgba(0,0,0,0.15); min-width: 140px; z-index: 1002; padding: 6px 0; }
.dropup:hover .dropup-menu { display: block; }
.dropup-menu button { width: 100%; border: none; background: none; padding: 10px 16px; text-align: left; cursor: pointer; font-size: 13px; font-weight: 600; color: #444; display: flex; align-items: center; gap: 10px; transition: all 0.2s ease; }
.dropup-menu button i { width: 16px; text-align: center; color: #777; font-size: 14px; }
.dropup-menu button:hover { background: #EEFAF3; color: #2E9E6B; }

/* 하단 세그먼트/웨이포인트 목록 패널. 상세 페이지는 지도 카드와의 간격(margin-top 15px)을 course-detail.css에서 오버라이드한다 */
.save-bottom-data-panel { background: #FCF9F5; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e0e0e0; display: flex; flex-direction: column; width: 100%; flex-shrink: 0; }
.split-panel-container { display: flex; width: 100%; }
.split-panel-col { flex: 1; display: flex; flex-direction: column; width: 50%; min-width: 0; }
.split-panel-col:first-child { border-right: 1px solid #e0e0e0; }
.split-panel-header { padding: 15px 0; text-align: center; font-size: 20px; font-weight: 400; color: #444; background: #F2EFEB; border-bottom: 1px solid #e0e0e0; }

.split-panel-content { padding: 15px; }

.save-data-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.waypoint-item { display: flex; align-items: center; padding: 10px 8px; min-height: 40px; border-radius: 8px; cursor: pointer; transition: background 0.2s; box-sizing: border-box; }
/* 선택(.active)은 호버와 동일한 상태로 유지 v202607231305 */
.waypoint-item:hover,
.waypoint-item.active { background: #F2EFEB; }
.waypoint-item:hover .wp-name,
.waypoint-item.active .wp-name { font-weight: 600; }

.wp-icon-wrapper { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #555; background-color: #FCF9F5; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: all 0.2s ease; box-sizing: border-box;}

.seg-icon-wrapper { width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; overflow: hidden; }
.segment-flag-marker { background: transparent !important; border: none !important; }

.waypoint-marker { background: transparent !important; border: none !important; }
.waypoint-marker-inner { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background-color: #FCF9F5; border: 2px solid #555; border-radius: 15px; padding: 4px 10px; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); white-space: nowrap; }
.waypoint-marker-inner::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 8px 0; border-style: solid; border-color: #555 transparent transparent transparent; }
.waypoint-marker-inner i { font-size: 13px; color: #555; }
.waypoint-marker-inner .wp-name { font-size: 12px; font-weight: 700; color: #333; width: auto !important; }
#save-map-wrap.wp-hide-text .waypoint-marker .wp-name,
#save-map-wrap.wp-hide-all .waypoint-marker .wp-name { display: none; }
#save-map-wrap.wp-hide-text .waypoint-marker-inner,
#save-map-wrap.wp-hide-all .waypoint-marker-inner { padding: 4px 6px; gap: 0; }

.wp-content { margin-left: 12px; flex: 1; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; overflow: hidden; }
/* 시작: 세그먼트 이름 줄임표 처리 어떤 기능을 하는 요소인지 짧은설명: 이름이 길어져도 거리/고도 정보가 밀리지 않도록 wp-name에 ellipsis 적용, wp-details는 shrink 방지 */
/* 목록 이름: 기본 폰트 15px·볼드 없음(호버 시에만 600) v202607231300 */
.wp-name { font-weight: 400; font-size: 15px; color: #444; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-details { font-size: 12px; color: #666; margin-left: 8px; font-weight: normal; text-align: right; flex-shrink: 0; }
/* 끝: 세그먼트 이름 줄임표 처리 */
.save-data-empty { text-align: center; padding: 40px 0; color: #888; font-size: 14px; }

/* 필터로 숨겨진 세그먼트 개수 안내(슬림 한 줄) v202607121425 */
.seg-filter-notice { padding: 6px 10px; margin: 0 0 6px; background: #F1D9A9; border: 1px solid #E5CFA1; border-radius: 6px; color: #444; font-size: 12px; line-height: 1.4; text-align: center; }

.ruler-cursor { cursor: crosshair; }
.chart-selection-box { position: absolute; background: rgba(46, 158, 107, 0.15); border: 1px solid rgba(46, 158, 107, 0.4); pointer-events: none; z-index: 5; display: none; }
.chart-scrollbar-container { position: absolute; bottom: 5px; left: 30px; right: 30px; height: 10px; background: rgba(0,0,0,0.05); border-radius: 5px; display: none; z-index: 10; border: 1px solid rgba(0,0,0,0.1); }
.chart-scrollbar-thumb { position: absolute; height: 100%; background: #2E9E6B; border-radius: 5px; cursor: pointer; min-width: 160px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.chart-zoom-reset-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: #555; border: none; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.4); z-index: 15; color: #fff; font-size: 10px; transition: all 0.2s ease; }

/* 시작: 전체화면 인덱스형 플로팅 S/W 패널 (v202606111527) — 기존 탭 패널을 대체, 인덱스 side-panel.css 동일 스펙 */
.ws-floating-btn-group { position: absolute; top: 20px; right: 20px; bottom: 20px; display: none; flex-direction: column; gap: 10px; z-index: 2000; align-items: flex-end; pointer-events: none; }
.ws-floating-btn-group .floating-action-btns, .ws-floating-btn-group .side-panel-base { pointer-events: auto; }
.ws-floating-btn-group .floating-action-btns { display: flex; flex-direction: row; gap: 10px; justify-content: flex-end; width: 100%; flex-shrink: 0; }
/* 시작: 세그먼트/웨이포인트/마커숨김 통합 버튼 박스(새작업 그룹 동형) 짧은설명: 흰 박스 하나에 세 항목을 구분선으로 나눠 상시 표시. 데이터 없으면 아이콘·폰트 회색 비활성(반투명 아님). 아이콘=세그(strava.svg 이미지)·웨이포인트(깃발)·마커숨김(눈) */
.sw-uni-box { display: flex; align-items: center; height: 38px; background: #FFFCF7; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); overflow: hidden; box-sizing: border-box; }
.sw-uni-div { width: 1px; height: 20px; background: rgba(0,0,0,0.12); flex-shrink: 0; }
.sw-uni-item { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 16px; border: none; background: transparent; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 13px; color: #bbb; cursor: not-allowed; white-space: nowrap; box-sizing: border-box; transition: background 0.2s ease, color 0.2s ease; }
.sw-uni-ico-img { width: 15px; height: 15px; object-fit: contain; filter: grayscale(1); transition: filter 0.2s ease; }
.sw-uni-item.has-segments { color: #FC4C02; cursor: pointer; }
.sw-uni-item.has-segments .sw-uni-ico-img { filter: none; }
.sw-uni-item.has-waypoints { color: #2E9E6B; cursor: pointer; }
#ws-btn-open-waypoint-panel.has-waypoints { color: #444; }
.sw-uni-item.has-markers { color: #666; cursor: pointer; }
.sw-uni-item.has-segments:hover, .sw-uni-item.has-waypoints:hover, .sw-uni-item.has-markers:hover { background: #EEFAF3; color: #2E9E6B; }
/* 시작: ws 세그먼트 패널 상단 필터(인기/모든 토글 + 경사·거리 슬라이더) — 작은 패널용 콤팩트, 슬라이더 색은 인덱스와 동일. 전체화면 패널과 지도 하단 목록이 공유 v202607131528 */
.ws-seg-filter { padding: 8px 10px; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 7px; }
.ws-seg-pop { display: flex; gap: 4px; }
.ws-seg-pop-btn { flex: 1; padding: 4px 0; font-size: 11px; font-weight: 600; font-family: 'Pretendard', sans-serif; border: 1px solid #E3DED7; border-radius: 6px; background: #F2EFEB; color: #888; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
/* 미선택 버튼 호버: BTN-20-1(배경·테두리만, 글자색 변화 없음) v202607231237 */
.ws-seg-pop-btn:not(.is-selected):hover { background: #E3DED7; border-color: #D5CEC4; }
.ws-seg-pop-btn.is-selected { background: #F1D9A9; border-color: #E5CFA1; color: #555; }
.ws-seg-pop-btn.is-selected:hover { background: #EDCC8E; border-color: #DEA535; color: #555; }
.ws-seg-grade, .ws-seg-dist { display: flex; align-items: center; gap: 8px; }
.ws-range-slider { position: relative; flex: 1; height: 20px; }
.ws-range-track { position: absolute; width: 100%; height: 4px; background-color: #f0f0f0; top: 8px; border-radius: 2px; }
.ws-range-zero-tick { position: absolute; left: 33.33%; top: 4px; width: 2px; height: 12px; background-color: #bbb; transform: translateX(-50%); z-index: 1; }
.ws-range-fill { position: absolute; height: 4px; background-color: #D68E03; top: 8px; border-radius: 2px; z-index: 1; }
.ws-range-slider input[type="range"] { position: absolute; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; top: 0; margin: 0; height: 20px; z-index: 2; }
.ws-range-slider input[type="range"]:focus { outline: none; }
.ws-range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 13px; border-radius: 3px; background: #F2EFEB; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.15); pointer-events: auto; cursor: pointer; margin-top: 2px; }
.ws-range-slider input[type="range"]::-moz-range-thumb { height: 16px; width: 13px; border-radius: 3px; background: #F2EFEB; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.15); pointer-events: auto; cursor: pointer; }
/* 경사·거리 배지 폭을 같게 잡아 두 슬라이더의 좌우 끝을 정렬 v202607131528 */
.ws-seg-grade-badge, .ws-seg-dist-badge { flex-shrink: 0; background: #D68E03; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; min-width: 64px; text-align: center; white-space: nowrap; }
/* 끝: ws 세그먼트 패널 상단 필터 */
/* 끝: 통합 버튼 박스 */
/* 전체화면 우측 패널 배경을 하단 세그먼트·웨이포인트 섹션과 같은 색으로 통일(본문 COL-B8 #FCF9F5 · 헤더/푸터 #F2EFEB). 불투명이 되어 지도가 비치지 않으므로 backdrop-filter는 제거 v202607141409 */
.side-panel-base { width: 290px; max-height: calc(100% - 100px); background: #FFFCF7; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 2000; display: none; flex-direction: column; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
#ws-segment-side-panel.expanded, #ws-waypoint-side-panel.expanded { display: flex !important; }
.side-panel-header { padding: 15px; border-bottom: 1px solid #e0e0e0; background: #F2EFEB; font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 400; color: #444; text-align: center; display: flex; justify-content: center; align-items: center; gap: 3px; flex-shrink: 0; }
.side-panel-content { padding: 15px; overflow-y: auto; flex: 1; }
.side-panel-content::-webkit-scrollbar { width: 6px; }
.side-panel-content::-webkit-scrollbar-track { background: transparent; }
.side-panel-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
.side-panel-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
.side-panel-footer { border-top: 1px solid #e0e0e0; background: #F2EFEB; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; min-height: 52px; box-sizing: border-box; }
.wp-btn-action { flex: 1; padding: 6px 0; border: 1px solid #ddd; background: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; color: #555; cursor: pointer; transition: all 0.2s ease; }
.wp-btn-action:hover { background: #EEFAF3; color: #2E9E6B; border-color: #2E9E6B; }
/* 마커 숨김 버튼: 크기 유지 + BTN-22 색·테두리·호버만 적용 (전체삭제·닫기 제외) v202607201256 */
#ws-btn-seg-toggle-visibility, #ws-btn-wp-toggle-visibility { background: #F1D9A9; border-color: #E5CFA1; color: #555; }
#ws-btn-seg-toggle-visibility:hover, #ws-btn-wp-toggle-visibility:hover { background: #EDCC8E; border-color: #DEA535; color: #555; }
.side-footer-close-btn { background: transparent; border: none; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; transition: all 0.2s ease; font-family: inherit; margin-left: auto; }
.side-footer-close-btn:hover { background: #f0f0f0; color: #333; }
#save-map-wrap.wp-force-hide .waypoint-marker { display: none !important; }
#save-map-wrap.seg-force-hide .segment-flag-marker { display: none !important; }
/* 세그먼트 마커는 전체화면 안에서도 줌아웃(≤11) 시엔 함께 숨김(모바일 동형, 웨이포인트는 상시 표시) */
#save-map-wrap.wp-hide-all .segment-flag-marker { display: none !important; }
/* 전체화면이 아닐 때는 세그먼트/웨이포인트 아이콘 숨김(전체화면 body.is-fullscreen 에서만 표시) */
body:not(.is-fullscreen) #save-map-wrap .segment-flag-marker,
body:not(.is-fullscreen) #save-map-wrap .waypoint-marker { display: none !important; }

/* 시작: 워크스페이스 세그먼트 전용 UI(좌하단 제목 박스 + 푸터 써머리 치환) — 인덱스 footer-stats.js UI 미러(폰트·색 동일) */
#ws-seg-title-box { position: absolute; left: 15px; bottom: 15px; z-index: 1000; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 12px; background: #ffffff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
/* 전체화면 좌하단은 레이어 타일(.ws-layer-tile, 84px)이 먼저 쓰므로 제목박스는 그 오른쪽(15 + 84 + 12)으로 비켜 배치 v202607300236 */
body.is-fullscreen #ws-seg-title-box { left: 111px; bottom: calc(var(--ws-overlay-h, 92px) + 12px); z-index: 1200; }
#ws-seg-title-box .seg-title-header { display: flex; align-items: center; gap: 8px; }
#ws-seg-title-box .seg-title-text { flex: 1; font-size: 14px; font-weight: 700; color: #222222; line-height: 1.3; word-break: keep-all; }
#ws-seg-title-box .seg-title-strava-btn { flex-shrink: 0; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; background: #f4f4f4; border-radius: 8px; color: #FC4C02; font-size: 11px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; }
#ws-seg-title-box .seg-title-strava-btn:hover { background: #e8e8e8; }
#ws-seg-title-box .seg-title-btn { width: 28px; height: 28px; border: none; background: #f4f4f4; color: #555555; border-radius: 8px; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
#ws-seg-title-box .seg-title-close { background: #2E9E6B; color: #fff; }
#ws-seg-title-box .seg-title-close:hover { background: #24835A; }
#ws-seg-title-box .seg-title-block { background: #fff1f0; color: #cf1322; }
#ws-seg-title-box .seg-title-block:hover { background: #ffe0de; }

.stats-row-wrap.seg-summary-on > .stat-col { display: none !important; }
#ws-seg-summary { display: contents; }
.ws-seg-stat-box { display: flex; flex-direction: column; align-items: flex-start; min-width: 85px; flex-shrink: 0; }
.ws-seg-stat-box .ws-seg-lbl { font-size: 12px; color: #888; margin-bottom: 2px; font-weight: 600; }
.ws-seg-stat-box .ws-seg-val { font-size: 26px; font-weight: 600; color: #333; font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; white-space: nowrap; line-height: 1.1; margin-top: 2px; }
.ws-seg-stat-box .ws-seg-val .unit { color: #888; font-size: 0.5em; font-weight: 500; margin-left: 2px; }
.ws-seg-stat-box .ws-seg-val.seg-val-green { color: #FC4C02; }
.ws-seg-stat-divider { width: 1px; height: 35px; background: #eee; margin: 0 20px; flex-shrink: 0; }
/* 상세전용(detail-only) 항목: 미니(접힘) 숨김, 확장/전체화면 표시 — 워크스페이스 detail-only 토글과 동일 */
.stats-row-wrap.seg-summary-on .ws-seg-summary-item.detail-only-stat { display: none; }
.save-preview-card:fullscreen .stats-row-wrap.seg-summary-on .ws-seg-summary-item.detail-only-stat,
body.is-fullscreen .stats-row-wrap.seg-summary-on .ws-seg-summary-item.detail-only-stat { display: flex; }
/* 끝: 워크스페이스 세그먼트 전용 UI */
/* 끝: 전체화면 인덱스형 플로팅 S/W 패널 */

/* 시작: 전체화면 고도프로필 토글 + 미니 고도그래프 (v202606111547) — 전체화면에서만 노출, 닫으면 통계줄에 미니 그래프 */
/* 시작: 전체화면 통계줄 /draw/ 미러 v202607300436 어떤 기능을 하는 요소인지 짧은설명: footer-stats.css의 .footer-summary/.stat-box/.stat-divider 값을 그대로 이식.
   요약줄 높이 85px 고정·좌우 25px·배경 #FFFCF7·상단 1px #ddd·안쪽 그림자, 라벨 12px/#888/600(아래 2px),
   값 26px Montserrat 600 #333(자간 -0.5·행간 1.1·위 2px), 항목 박스 min-width 85(기존 30px 마진·세로 border 간격 폐지),
   구분선은 /draw/처럼 1×35px #eee 요소(좌우 20px). 미니(접힘)에서는 detail-only(하강고도·하강평지+구분선)를 숨겨 5항목,
   펼치면 7항목(/draw/의 보정 슬라이더는 제외). 일반 모드(15px/18px 한 줄 타이포)는 건드리지 않는다 */
.ws-stat-divider { display: none; }
body.is-fullscreen .stats-row-wrap { height: 85px; padding: 0 25px; background: #FFFCF7; border-top: 1px solid #ddd; border-bottom: none; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
body.is-fullscreen .ws-stat-divider { display: block; width: 1px; height: 35px; background: #eee; margin: 0 20px; flex-shrink: 0; }
body.is-fullscreen .stats-row-wrap .stat-col { min-width: 85px; margin-right: 0; padding-right: 0; border-right: none; }
body.is-fullscreen .stat-lbl { font-size: 12px; margin-bottom: 2px; }
body.is-fullscreen .stat-val { font-size: 26px; margin-top: 2px; }
/* 펼침 항목 노출은 :fullscreen 의사클래스 규칙(위 .save-preview-card:fullscreen ...)에만 걸려 있어 클래스 기반 판정(body.is-fullscreen)을 함께 둔다 — 세그 써머리 줄과 같은 방식 */
body.is-fullscreen .stats-row-wrap .detail-only-stat { display: flex !important; }
body.is-fullscreen.ws-chart-collapsed .stats-row-wrap .detail-only-stat { display: none !important; }
/* 끝: 전체화면 통계줄 /draw/ 미러 */

.ws-mini-chart-wrapper { display: none; }
/* 미니 고도그래프: /draw/(footer-stats.css .mini-chart-wrapper) 미러 — 높이 74·flex-grow·좌우 마진 30. 상세가 펼쳐지면 자리는 두고 투명 처리(/draw/ expanded와 동일) v202607300418 */
body.is-fullscreen .ws-mini-chart-wrapper { display: block; flex-grow: 1; height: 74px; margin: 0 30px; position: relative; min-width: 200px; transition: opacity 0.3s ease 0.3s; }
body.is-fullscreen:not(.ws-chart-collapsed) .ws-mini-chart-wrapper { opacity: 0; pointer-events: none; transition-delay: 0s; }
.ws-mini-chart-wrapper canvas { display: block; width: 100% !important; height: 100% !important; }
/* 미니그래프 컵 라인: /draw/(footer-stats.css .empty-chart-guide)의 좌·우·하단 1px 라인 이식 v202607301128 */
.ws-mini-chart-wrapper::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; pointer-events: none; z-index: 10; box-sizing: border-box; }
/* 고도프로필 단계 버튼: /draw/(footer-stats.css .footer-stage-*, BTN-21) 미러 — 라벨 15px/#444 + 34px 바(#F2EFEB) 안 ▲▼, 끝단 disabled v202607300418 */
.ws-footer-stage-box { display: none; }
body.is-fullscreen .ws-footer-stage-box { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 12px; }
.ws-footer-stage-label { font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 400; color: #444; white-space: nowrap; }
.ws-footer-stage-group { background: #F2EFEB; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; height: 34px; display: flex; align-items: center; padding: 0; overflow: hidden; }
.ws-footer-stage-btn { border: none; background: none; height: 34px; width: 34px; margin: 0; padding: 0; cursor: pointer; color: #444; font-size: 15px; display: flex; align-items: center; justify-content: center; border-radius: 0; transition: all 0.2s ease; }
.ws-footer-stage-btn:hover { background-color: #F1D9A9; color: #444; }
.ws-footer-stage-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.ws-footer-stage-divider { width: 1px; height: 18px; background: rgba(0, 0, 0, 0.12); margin: 0 4px; flex-shrink: 0; }
/* 고도그래프 레이어 슬라이드(A안): 접힘을 display:none 대신 height:0으로 애니메이션. 오버레이 높이가 매 프레임 변해 --ws-overlay-h(ResizeObserver)가 연속 갱신 → S/W 패널·플로팅 그룹도 그래프와 한 몸으로 슬라이드 v202607081643 */
body.is-fullscreen .chart-area-wrap { transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; }
/* border-box라 height:0만으론 세로 padding(25px)이 남아 그래프 영역이 살짝 보임 → 세로 padding도 0으로 접어 화면 바닥에 딱 맞춤 v202607081710 */
body.is-fullscreen.ws-chart-collapsed .chart-area-wrap { height: 0; padding-top: 0; padding-bottom: 0; }
/* 끝: 전체화면 고도프로필 토글 + 미니 고도그래프 */

/* 시작: 전체화면 지도 overlay (v202606111615) — 지도를 카드 전체로 깔고 통계+고도그래프를 하단 overlay로 덮음 → 프로필 토글 시 지도 크기 불변(타일 재로드 없음, 인덱스 푸터 overlay와 동일 원리) */
body.is-fullscreen #ws-preview-card { position: relative; }
body.is-fullscreen #save-map-wrap { position: absolute; inset: 0; height: auto; }
body.is-fullscreen .ws-bottom-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; flex-direction: column; }
/* 스케일·플로팅 패널·메뉴바를 하단 overlay 실제 높이(--ws-overlay-h, JS가 측정·주입) 바로 위에 배치 → 고정값 없이 열림/닫힘 모두 정확히 가림 방지 */
body.is-fullscreen .map-info-overlay { z-index: 1200; bottom: calc(var(--ws-overlay-h, 92px) + 12px); }
body.is-fullscreen .ws-floating-btn-group { bottom: calc(var(--ws-overlay-h, 92px) + 12px); }
body.is-fullscreen .map-toolbar-wrap { z-index: 1200; bottom: calc(var(--ws-overlay-h, 92px) + 12px); background: #F2EFEB; }
/* 전체화면 툴바를 진입 전과 동일한 베이지(#F2EFEB)로 통일(로드뷰 펙맨 색 맞춤은 펙맨 폐지로 제거) v202607301732 */
/* 시작: 전체화면 ESC 안내 박스 어떤 기능을 하는 요소인지 짧은설명: MISC-01b의 검은 반투명·라운드만 차용(흰 글자), 폰트는 TYPO-04(15px/400), 박스는 폰트에 맞춰 padding으로 자동 크기. 전체화면 동안 상단 중앙 고정 */
#ws-fs-esc-notice { display: none; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1250; background: rgba(60, 64, 67, 0.95); color: #fff; font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 400; padding: 10px 20px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; }
body.is-fullscreen #ws-fs-esc-notice { display: block; }
/* 끝: 전체화면 ESC 안내 박스 */
/* 끝: 전체화면 지도 overlay */
.fs-save-data-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }

.fs-waypoint-item { display: flex; align-items: center; justify-content: flex-start; width: 100%; background: transparent; border: none; padding: 10px 8px; min-height: 40px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; color: #444; flex-shrink: 0; }
.fs-waypoint-item:hover, .fs-waypoint-item.active { background: #EEFAF3; color: #2E9E6B; }
.fs-wp-icon-wrapper { width: 26px; height: 26px; border-radius: 50%; background-color: #FCF9F5; border: 2px solid #555; box-shadow: 0 2px 4px rgba(0,0,0,0.15); display: flex; justify-content: center; align-items: center; font-size: 13px; flex-shrink: 0; transition: all 0.2s ease; color: #555; box-sizing: border-box; }
.fs-waypoint-item:hover .fs-wp-icon-wrapper, .fs-waypoint-item.active .fs-wp-icon-wrapper { border-color: #2E9E6B; color: #2E9E6B; box-shadow: 0 2px 6px rgba(46, 158, 107, 0.3); }
.fs-wp-content { display: flex; align-items: center; margin-left: 12px; flex-grow: 1; white-space: nowrap; overflow: hidden; }
/* 시작: 전체화면 세그먼트 이름 줄임표 처리 어떤 기능을 하는 요소인지 짧은설명: 전체화면 패널에서도 동일하게 이름 ellipsis 적용 및 거리/고도 고정 */
.fs-wp-name { font-size: 14px; font-weight: 600; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-wp-details { font-size: 12px; color: #666; margin-left: 8px; font-weight: normal; text-align: right; flex-shrink: 0; }
/* 끝: 전체화면 세그먼트 이름 줄임표 처리 */
.fs-save-data-empty { text-align: center; padding: 40px 0; color: #888; font-size: 14px; }

.start-point-icon { box-sizing: border-box !important; background-color: #67CF67 !important; border: 2.5px solid #ffffff !important; border-radius: 50% !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; width: 14px !important; height: 14px !important; }
.end-point-icon { box-sizing: border-box !important; background-color: #ffffff !important; border: 2.5px solid #ffffff !important; border-radius: 50% !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; width: 14px !important; height: 14px !important; overflow: hidden !important; background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000) !important; background-size: 4px 4px !important; background-position: 0 0, 2px 2px !important; }
.hover-guide-point { background: transparent !important; border: none !important; }
.hover-guide-point-inner { width: 16px; height: 16px; background-color: white; border: 3.5px solid #2E9E6B; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); box-sizing: border-box; }

.detail-only-stat { display: none; }

/* 마일스톤(지도 거리 마커) — 엔진 통합으로 전 페이지 표시 v202606102235 */
.milestone-major, .milestone-minor {
    background: transparent !important;
    border: none !important;
}
.milestone-major-inner {
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid;
    border-radius: 12px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    white-space: nowrap;
    text-align: center;
    line-height: 14px;
}
.milestone-minor-inner {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: white;
    border: 2px solid;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    box-sizing: border-box;
}
/* 끝: 맵워크스페이스 공용 CSS v202607311649 */