/* 버전: 202608062240 */
/* 로그 편집 페이지(/log-edit/) 전용 스타일 — PC 전용. split.css(v202608060142)를 기반으로 한 완전 분리 사본(le- 접두).
   지도영역은 map-workspace.css를 공유하고 이 파일은 로그 편집 배치·로그 정보 카드·레이어 리스트·코스추가 폼·
   LOG 편집 컨텍스트 메뉴·편집 모달·버튼만 담당 */

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

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

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

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

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

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

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

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

/* 고도그래프 접힘: 파일 없음(자동)·▼ 버튼(수동)일 때 그래프 칸(220px)을 height 0 슬라이드로 접고 통계 써머리 줄까지만 보이게 한다 */
/* 접힌 만큼은 지도가 그대로 가져간다(카드 높이 불변) — 지도는 flex라 그래프가 줄어드는 동안 함께 늘어난다 */
#logedit-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가 최종 지도 크기로 계산되게) — leSetChartHidden이 잠깐 부여 */
#logedit-main.le-no-anim .chart-area-wrap { transition: none; }
#logedit-main.le-chart-hidden .chart-area-wrap { height: 0; padding-top: 0; padding-bottom: 0; }
#logedit-main.le-chart-hidden .stats-row-wrap { border-bottom: none; }

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

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

/* 시작: 편집 도구 그룹 짧은설명: 분할 .sp-tool-group 스펙 사본 — 지도 전환(카카오 지도↔스카이뷰)·실행 취소·다시 실행.
   통계줄 우측 ▲▼ 그룹 바로 위, 지도 하단 중앙에 떠 있다 */
.le-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)·지도 위 */
}
.le-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;
}
.le-tool-btn:hover { background-color: #F1D9A9; color: #444; }
.le-tool-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.le-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이 깨진다(분할 실측과 동일 사유) */
.le-footer-stage-box {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.le-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; }
.le-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; }
.le-footer-stage-btn:hover { background-color: #F1D9A9; color: #444; }
.le-footer-stage-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.le-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)와 같은 크림 카드 톤 */
.le-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;
}

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

/* 시작: 로그 정보 카드 내용 짧은설명: 구 좌측 패널(.log-simple-text) 타이포 이식 —
   기본 폰트(Pretendard·400·#444), 항목=좌라벨·우값, 섹션 제목은 밑줄 구분 + 주황 아이콘.
   항목 줄은 안내문(.le-guide-desc)과 같은 14px, 섹션 제목만 15px 유지 v202608061203.
   섹션 단위 좌우 2단 그리드 — 1행=기본 정보|시간, 2행=속도|거리&고도, 섹션 안 항목은 세로 나열 v202608061221 */
.log-simple-text {
    font-size: 14px;
    color: #444;
    line-height: 1.8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 15px;
}

.log-info-section {
    min-width: 0; /* 반 폭 칸 안에서 긴 값이 그리드를 밀어내지 않게 */
}

/* 항목 줄만 대상(섹션 래퍼 div가 걸리지 않게 자식 한정) */
.log-info-section > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    min-width: 0; /* 반 폭 칸 안에서 긴 값이 그리드를 밀어내지 않게 */
}

.log-simple-text strong {
    color: #444;
    font-weight: 400;
    flex-shrink: 0;
}

.log-simple-text span[id^="log-info-"] {
    color: #444;
    font-weight: 400;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

/* 값 텍스트(연필 아이콘과 분리된 안쪽 스팬): 반 폭을 넘치면 말줄임 — 아이콘은 항상 보인다 */
.log-info-val-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-time-icon,
.edit-filename-icon,
.edit-type-icon {
    font-size: 14px;
    color: #D68E03 !important; /* COL-16 */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.edit-time-icon:hover,
.edit-filename-icon:hover,
.edit-type-icon:hover {
    transform: scale(1.2);
}

.log-simple-text .section-title {
    font-size: 15px;
    font-weight: 400;
    color: #444;
    margin-top: 0; /* 행 간격은 그리드 row-gap이 담당 v202608061221 */
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
    display: block;
}

.log-simple-text .section-title i {
    width: 20px;
    color: #D68E03; /* COL-16 */
}
/* 끝: 로그 정보 카드 내용 */

/* 시작: 코스추가 드롭존 짧은설명: 분할 드롭존 미러 — 클릭·드래그 추가(여러 파일 허용) */
.le-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;
}
.le-drop-area i { font-size: 26px; color: #c8c8c8; transition: color 0.2s; }
.le-drop-area:hover, .le-drop-area.drag-hover { border-color: #2E9E6B; background: #f0faf5; color: #2E9E6B; }
.le-drop-area:hover i, .le-drop-area.drag-hover i { color: #2E9E6B; }
.le-drop-area input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
/* 끝: 코스추가 드롭존 */

/* 시작: 저장 카드 짧은설명: 설명문 + GPX/FIT 저장·Strava 전송 버튼(파일명 입력 없음 — 레이어의 파일명 사용) */
.le-save-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 4px;
    padding-left: 18px;
    list-style: disc;
}
.le-save-desc li { margin-bottom: 6px; }
.le-save-desc li:last-child { margin-bottom: 0; }
/* 파일명 입력: export-modal.css .export-filename-input과 동일 스펙을 자체 정의(해당 CSS 미로드) —
   저장 버튼 묶음 위 한 줄, 병합 카드와 같은 모양 v202608062240 */
.le-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;
}
.le-export-filename-input:hover, .le-export-filename-input:focus { border-color: #DEA535; }

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

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

/* 시작: LOG 편집 컨텍스트 메뉴 짧은설명: 분할 자르기 메뉴(.sp-context-*) 스킨 사본 —
   흰 박스·타이틀 줄·아이콘 버튼 3개(로그 자르기·로그 삭제·로그 합치기). 위치는 logedit.js가 클릭 좌표 기준으로 지정 */
.le-context-menu {
    position: fixed;
    z-index: 2000;
    display: none;
}
.le-context-box {
    position: relative;
    width: 210px;
    background: white;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.le-context-title {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eaeaea;
    font-weight: 700;
}
.le-context-item {
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #444;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.le-context-item i {
    width: 16px;
    text-align: center;
    color: #777;
    font-size: 14px;
    transition: color 0.2s ease;
}
.le-context-item:hover { background-color: #f0f4ff; color: #4285F4; }
.le-context-item:hover i { color: #4285F4; }
.le-context-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.le-context-close:hover { color: #444; }
/* 끝: LOG 편집 컨텍스트 메뉴 */

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

/* BTN-20 Beige Button */
.le-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;
}
.le-btn-beige:hover { background: #E3DED7; border-color: #D5CEC4; }
/* 끝: 하단 버튼 */

/* 시작: 좌표 편집 정점 짧은설명: 줌 17↑ 로그 좌표 정점(구 log-edit.css 이식) — 흰 원 + 로그선 색 테두리(인라인 border-color).
   같은 클래스가 카카오 미러(.kakao-mirror) 안에도 그대로 복제된다 */
.log-edit-point {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.log-edit-point-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: white;
    border: 2px solid;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.log-edit-point-inner:hover {
    transform: translate(-50%, -50%) scale(1.3);
}

.log-edit-point-dragging {
    cursor: grabbing !important;
    transform: translate(-50%, -50%) scale(1.5) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
}
/* 끝: 좌표 편집 정점 */

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

/* 시작: 편집 모달 보조 스타일 짧은설명: 출발 시간 변경 모달의 안내문·셀렉트 줄(구 log-edit.css 이식).
   .time-select는 유형 변경 모달의 셀렉트도 함께 쓴다 */
.time-modal-desc {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    word-break: keep-all;
}

.time-modal-selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.time-select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}

.time-select:focus {
    border-color: #DEA535;
}

.time-select-unit {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.time-select-spacer {
    width: 100%;
    height: 4px;
}
/* 끝: 편집 모달 보조 스타일 */

/* 시작: 로그 편집 모달 버튼 스타일 짧은설명: 공용 .btn-03(베이지)이 특정 모달 ID로 스코프되어 진입 모달에는
   적용되지 않으므로 같은 스펙을 진입 모달 스코프로 부여(병합·분할과 동일 사유).
   시간·파일명·유형 모달의 .btn-02/.btn-03은 new-doc-modal.css의 기존 스코프가 그대로 받는다 */
#le-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;
}
#le-import-modal .btn-03:hover {
    background: #E3DED7;
    border-color: #D5CEC4;
}
/* 끝: 로그 편집 모달 버튼 스타일 */

/* 시작: 처리 로더 짧은설명: FIT 변환·스트라바 전송 동안 전체 화면 덮개 — 문구 기본폰트 20px·스피너 42px */
.le-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;
}
.le-loader-overlay.show { display: flex; }
.le-loader-overlay i { font-size: 42px; color: #2E9E6B; }
.le-loader-overlay span { font-size: 20px; font-weight: 400; color: #444; }
/* 끝: 처리 로더 */