/* 버전: 202608070025 */
/* 출발 구간 복원 페이지(/extender/) 전용 스타일 — PC 전용. log-edit.css(v202608061845)의 완전 분리 사본(ex- 접두).
   지도영역은 map-workspace.css를 공유하고 이 파일은 배치·로그 정보 카드·레이어 리스트·코스추가 폼·
   LOG 편집 컨텍스트 메뉴·편집 모달·버튼만 담당 */

body {
    margin: 0;
    background: #FFFCF7; /* COL-B7 */
    font-family: 'Pretendard', sans-serif;
}

#extender-main {
    min-height: 100vh;
    background: #FFFCF7;
    padding: 40px 0 30px;
}

/* 시작: 2컬럼 배치 짧은설명: 좌=지도영역·우=레이어영역(분할 페이지 미러).
   지도 780px + 간격 60px + 레이어영역 560px = 1400px. 높이는 브라우저 세로높이만 따른다 —
   좌측 컬럼에 준 높이를 카드가 그대로 갖고, 카드 안에서 통계줄·고도그래프를 뺀 나머지를 지도가 차지한다(map-area-wrap flex).
   우측 컬럼 높이와는 무관하며(레이어가 늘면 우측만 아래로 길어진다), 그래프를 접으면 그 220px을 지도가 흡수한다 */
.ex-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: fit-content;
    margin: 0 auto;
}

/* 페이지 타이틀: 기본 폰트(Pretendard·#444·볼드 없음) 30px + 블릿 */
.ex-page-title {
    font-size: 30px;
    font-weight: 400;
    color: #444;
    line-height: 36px;
    margin: 0;
}

.ex-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
}

/* 높이는 브라우저 세로높이 연동 — 분할과 동일 계산식 */
.ex-left-col {
    width: 780px;
    flex-shrink: 0;
    height: clamp(599px, calc(100vh - 201px), 1159px);
}
/* 그래프 접힘 상태는 카드에서 그래프 220px이 빠지므로 상·하한도 그만큼 낮춘다(기준식 자체는 동일) */
#extender-main.ex-chart-hidden .ex-left-col { height: clamp(379px, calc(100vh - 201px), 939px); }

.ex-right-col {
    width: 560px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 지도영역: ws 카드 그대로 쓰되 폭 780px 고정, 높이는 카드가 컬럼 높이를 채우고
   그 안에서 통계줄·고도그래프를 뺀 나머지를 지도가 가져간다. 툴바·하단 세그/웨이포인트 패널은 미사용이라 숨김 */
#extender-main .ex-left-col .save-preview-card { height: calc(100% - 2px); }
#extender-main .map-area-wrap { height: auto; flex: 1; min-height: 0; }
#extender-main .map-toolbar-wrap { display: none; }
#extender-main .save-bottom-data-panel { display: none; }

/* 고도그래프 접힘: 파일 없음(자동)·▼ 버튼(수동)일 때 그래프 칸(220px)을 height 0 슬라이드로 접고 통계 써머리 줄까지만 보이게 한다 */
/* 접힌 만큼은 지도가 그대로 가져간다(카드 높이 불변) — 지도는 flex라 그래프가 줄어드는 동안 함께 늘어난다 */
#extender-main .chart-area-wrap { transition: height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; }
/* 파일 추가·전체 삭제로 상태가 바뀔 때는 슬라이드 없이 즉시 반영(fitBounds가 최종 지도 크기로 계산되게) — exSetChartHidden이 잠깐 부여 */
#extender-main.ex-no-anim .chart-area-wrap { transition: none; }
#extender-main.ex-chart-hidden .chart-area-wrap { height: 0; padding-top: 0; padding-bottom: 0; }
#extender-main.ex-chart-hidden .stats-row-wrap { border-bottom: none; }

#extender-main .ws-bottom-overlay { position: relative; }

/* 상승거리 항목 숨김(이 페이지 전용) — 통계줄은 공용 include라 다른 ws 페이지는 그대로 둔다(분할과 동일) */
#extender-main .stats-row-wrap .asc-dist-stat { display: none; }

/* 시작: 편집 도구 그룹 짧은설명: 분할 .sp-tool-group 스펙 사본 — 지도 전환(카카오 지도↔스카이뷰)·실행 취소·다시 실행.
   통계줄 우측 ▲▼ 그룹 바로 위, 지도 하단 중앙에 떠 있다 */
.ex-tool-group {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 12px;
    background: #F2EFEB;
    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: 1200; /* 카카오 오버레이(z2)·지도 위 */
}
.ex-tool-btn {
    border: none;
    background: none;
    height: 34px;
    width: 34px;
    margin: 0 2px;
    padding: 0;
    cursor: pointer;
    color: #444;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.ex-tool-btn:hover { background-color: #F1D9A9; color: #444; }
.ex-tool-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.ex-tool-divider { width: 1px; height: 20px; background-color: rgba(0, 0, 0, 0.12); flex-shrink: 0; }
/* 끝: 편집 도구 그룹 */

/* 시작: 고도프로필 단계 버튼 짧은설명: 분할 .sp-footer-stage-* 스펙 사본 — 통계줄 맨 끝의 BTN-21 ▲▼ 바(라벨 없음).
   margin-left:auto 금지 — 통계줄 space-between이 깨진다(분할 실측과 동일 사유) */
.ex-footer-stage-box {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.ex-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; }
.ex-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; }
.ex-footer-stage-btn:hover { background-color: #F1D9A9; color: #444; }
.ex-footer-stage-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.ex-footer-stage-divider { width: 1px; height: 18px; background: rgba(0, 0, 0, 0.12); margin: 0 4px; flex-shrink: 0; }
/* 끝: 고도프로필 단계 버튼 */
/* 끝: 2컬럼 배치 */

/* 패널 카드(로그 정보·코스추가+코스레이어·저장): ws 카드(.save-preview-card)와 같은 크림 카드 톤 */
.ex-panel-card {
    background: #FCF9F5;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 18px 20px;
}

.ex-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.ex-panel-title i { color: #777; font-size: 14px; }
/* 한 카드 안에서 '코스 추가' 아래에 오는 '코스 레이어' 소제목 — 두 영역 사이 여백만 부여 */
.ex-panel-title-sub { margin-top: 22px; }

/* 시작: 코스추가 드롭존 짧은설명: 분할 드롭존 미러 — 클릭·드래그 추가(여러 파일 허용) */
.ex-drop-area {
    border: 1.5px dashed #c8c8c8;
    border-radius: 10px;
    padding: 22px 12px;
    cursor: pointer;
    text-align: center;
    color: #aaa;
    font-size: 14px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}
.ex-drop-area i { font-size: 26px; color: #c8c8c8; transition: color 0.2s; }
.ex-drop-area:hover, .ex-drop-area.drag-hover { border-color: #2E9E6B; background: #f0faf5; color: #2E9E6B; }
.ex-drop-area:hover i, .ex-drop-area.drag-hover i { color: #2E9E6B; }
.ex-drop-area input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
/* 끝: 코스추가 드롭존 */

/* 시작: 저장 카드 짧은설명: 설명문 + GPX/FIT 저장·Strava 전송 버튼(파일명 입력 없음 — 레이어의 파일명 사용) */
.ex-save-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 4px;
    padding-left: 18px;
    list-style: disc;
}
.ex-save-desc li { margin-bottom: 6px; }
.ex-save-desc li:last-child { margin-bottom: 0; }
/* 파일명 입력: export-modal.css .export-filename-input과 동일 스펙을 자체 정의(해당 CSS 미로드) —
   저장 버튼 묶음 위 한 줄, 병합 카드와 같은 모양 v202608062240 */
.ex-export-filename-input {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid #E5CFA1;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    height: 40px;
}
.ex-export-filename-input:hover, .ex-export-filename-input:focus { border-color: #DEA535; }

/* 버튼 묶음 한 줄 — export-modal.css .export-file-btn-group과 동일 배치를 자체 정의(해당 CSS 미로드) */
.ex-save-btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 10px;
}
/* 스트라바 전송 버튼 아이콘: /draw/ 내보내기 모달 .strava-icon과 동일 브랜드색 */
.ex-btn-beige .strava-icon { color: #FC4C02; margin-right: 2px; }
/* 끝: 저장 카드 */

/* 시작: 출발 구간 복원 사용 안내문 짧은설명: 코스 추가 섹션 위 타이틀 없는 설명 블록 — 저장 카드 설명문과 같은 타이포·블릿 목록 */
.ex-guide-desc {
    margin: 0 0 30px; /* '코스 추가' 섹션 타이틀과의 간격 */
    padding-left: 18px;
    list-style: disc;
}
.ex-guide-desc li {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 8px;
}
.ex-guide-desc li:last-child {
    margin-bottom: 0;
}
/* 끝: 출발 구간 복원 사용 안내문 */

/* 시작: 하단 버튼 짧은설명: 우측 BTN-20(내 채널에 저장·코스 편집) */
.ex-action-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px; /* 컬럼 gap 24px과 합쳐 저장 카드에서 40px 아래 */
}

/* BTN-20 Beige Button */
.ex-btn-beige {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #E3DED7;
    border-radius: 10px;
    background: #F2EFEB;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    transition: all 0.2s ease;
}
.ex-btn-beige:hover { background: #E3DED7; border-color: #D5CEC4; }
/* 끝: 하단 버튼 */

/* 시작: 그리기 커서(/draw/ 미러) v202608070025 짧은설명: 기본=십자(점 찍기), 팬 중=잡는 손, 코스선 호버=손가락.
   Leaflet은 map-core.css #map 규칙, 카카오는 kakao-view.css body.kakao-draw 규칙의 로그판 —
   자식까지 십자 강제 후 상호작용 요소만 같은 세기로 손가락 복귀. 카카오 팬 표식(body.ex-kakao-dragging)은
   extender.js가 SDK dragstart/dragend로 붙였다 뗀다(공용 ws-kakao-context.js 무수정) */
#extender-main #ws-map-view { cursor: crosshair !important; }
.leaflet-dragging #extender-main #ws-map-view,
.leaflet-dragging #extender-main #ws-map-view * { cursor: grabbing !important; }
#extender-main #ws-kakao-map-container,
#extender-main #ws-kakao-map-container * { cursor: crosshair !important; }
#extender-main #ws-kakao-map-container svg path[data-course-halo] { cursor: pointer !important; }
body.ex-kakao-dragging #ws-kakao-map-container,
body.ex-kakao-dragging #ws-kakao-map-container * { cursor: grabbing !important; }
/* 끝: 그리기 커서 */

/* 시작: 출발 구간 복원 모달 버튼 스타일 짧은설명: 공용 .btn-03(베이지)이 특정 모달 ID로 스코프되어 진입 모달에는
   적용되지 않으므로 같은 스펙을 진입 모달 스코프로 부여(병합·분할과 동일 사유) */
#ex-import-modal .btn-03 {
    background: #F2EFEB;
    border: 1px solid #E3DED7;
    color: #555;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
#ex-import-modal .btn-03:hover {
    background: #E3DED7;
    border-color: #D5CEC4;
}
/* 끝: 출발 구간 복원 모달 버튼 스타일 */

/* 시작: 처리 로더 짧은설명: FIT 변환·스트라바 전송 동안 전체 화면 덮개 — 문구 기본폰트 20px·스피너 42px */
.ex-loader-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1000010;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.ex-loader-overlay.show { display: flex; }
.ex-loader-overlay i { font-size: 42px; color: #2E9E6B; }
.ex-loader-overlay span { font-size: 20px; font-weight: 400; color: #444; }
/* 끝: 처리 로더 */