/* 버전: 202608060142 */
/* 코스 파일 분할 페이지(/split/) 전용 스타일 — PC 전용. merge.css(v202608051056)를 기반으로 한 완전 분리 사본(sp- 접두).
   지도영역은 map-workspace.css를 공유하고 이 파일은 분할 페이지 배치·레이어 리스트·코스추가 폼·자르기 컨텍스트 메뉴·버튼만 담당 */

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

#split-main {
    min-height: 100vh;
    background: #FFFCF7;
    padding: 40px 0 30px; /* 하단 30px: 옛 .sp-action-row margin-bottom 이전 v202608060120 */
}

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

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

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

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

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

/* 지도영역: ws 카드 그대로 쓰되 폭 780px 고정, 높이는 카드가 컬럼(=우측 카드 스택) 높이를 채우고
   그 안에서 통계줄·고도그래프를 뺀 나머지를 지도가 가져간다 v202608060111. 툴바·하단 세그/웨이포인트 패널은 미사용이라 숨김 */
/* 카드가 컬럼 높이를 그대로 갖게 한다. 카드는 content-box라 상하 테두리 2px을 빼야 바깥 높이가 정확히 일치하고,
   폭 계산(지도 780px)은 종전 그대로 유지된다 v202608060111 */
#split-main .sp-left-col .save-preview-card { height: calc(100% - 2px); }
#split-main .map-area-wrap { height: auto; flex: 1; min-height: 0; }
#split-main .map-toolbar-wrap { display: none; }
#split-main .save-bottom-data-panel { display: none; }

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

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

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

/* 시작: 편집 도구 그룹 v202608052312 짧은설명: /draw/ 메뉴바 툴그룹(menu-bar.css .tool-group.horizontal-group /
   .tool-btn / .divider-vertical) 스펙 사본 — 통계줄 우측 ▲▼ 그룹 바로 위, 지도 우측 하단에 떠 있다 */
.sp-tool-group {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%); /* /draw/ .center-tool-container와 같은 지도 하단 중앙 정렬 v202608060001 */
    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)·지도 위 */
}
.sp-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;
}
.sp-tool-btn:hover { background-color: #F1D9A9; color: #444; }
.sp-tool-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.sp-tool-divider { width: 1px; height: 20px; background-color: rgba(0, 0, 0, 0.12); flex-shrink: 0; }
/* 끝: 편집 도구 그룹 */

/* 시작: 고도프로필 단계 버튼 v202608052312 짧은설명: 공용 .ws-footer-stage-*(map-workspace.css) 스펙 사본 —
   통계줄 맨 끝의 BTN-21 ▲▼ 바(라벨 없음 v202608060001).
   margin-left:auto를 쓰지 않는다 — 통계줄은 justify-content:space-between이라 auto가 남는 공간을 다 먹으면
   통계 항목들이 왼쪽에 다닥다닥 붙어 버린다(v202608052312 실측). 마지막 flex 항목으로 두면 제자리에 온다 */
.sp-footer-stage-box {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.sp-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; }
.sp-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; }
.sp-footer-stage-btn:hover { background-color: #F1D9A9; color: #444; }
.sp-footer-stage-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.sp-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)와 같은 크림 카드 톤 */
.sp-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;
}

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

/* 시작: 조각 레이어 리스트 짧은설명: 색칩·파일명(클릭=이름 변경)·거리·휴지통. 순서 변경(그립·▲▼·드래그) 없음 */
.sp-layer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-layer-empty {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    padding: 18px 0;
}

.sp-layer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 8px 10px;
    transition: background 0.15s, border-color 0.15s;
}

/* 조각별 경로 색상 칩 */
.sp-layer-color {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* 파일명: 클릭하면 인라인 입력으로 바뀐다 — 수정 가능함을 커서·호버 밑줄로 표시 */
.sp-layer-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}
.sp-layer-name:hover { text-decoration: underline; text-decoration-color: #bbb; }

/* 파일명 인라인 편집 입력: 같은 자리·같은 타이포로 스왑(INPUT-01 계열 테두리) */
.sp-layer-name-input {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    font-family: 'Pretendard', sans-serif;
    border: 1px solid #2E9E6B;
    border-radius: 6px;
    padding: 2px 6px;
    outline: none;
    background: #fff;
}

.sp-layer-meta {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
    margin-right: 6px;
    font-family: 'Montserrat', sans-serif;
}

/* 휴지통: BTN-20-1 색 차용(베이지 배경·테두리·hover) */
.sp-layer-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #E3DED7;
    border-radius: 6px;
    background: #F2EFEB;
    color: #555;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.sp-layer-btn:hover { background: #E3DED7; border-color: #D5CEC4; }
.sp-layer-btn.sp-layer-del { margin-left: 6px; }
/* 끝: 조각 레이어 리스트 */

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

/* 시작: 저장 카드 짧은설명: 설명문 + GPX/TCX/FIT 일괄 저장 버튼(파일명 입력 없음 — 레이어의 파일명 사용) */
/* 설명은 블릿 목록 — 타이포는 안내문(.sp-guide-desc)과 동일 v202608052156 */
.sp-save-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 4px;
    padding-left: 18px;
    list-style: disc;
}
.sp-save-desc li { margin-bottom: 6px; }
.sp-save-desc li:last-child { margin-bottom: 0; }
/* 파일명 입력이 없으므로 버튼 묶음만 한 줄 — export-modal.css .export-file-btn-group(flex) 재사용에 상단 여백만 부여 */
.sp-save-btn-group { margin-top: 10px; }
/* 끝: 저장 카드 */

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

/* 시작: 코스 자르기 컨텍스트 메뉴 짧은설명: /draw/ 코스편집 메뉴(context-menu.css .course-context-menu/.context-box) 스킨의
   축소판 — 흰 박스·타이틀 줄·아이콘 버튼 1개. 위치는 split.js가 클릭 좌표 기준으로 지정 */
.sp-context-menu {
    position: fixed;
    z-index: 2000;
    display: none;
}
.sp-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;
}
.sp-context-title {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eaeaea;
    font-weight: 700;
}
.sp-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;
}
.sp-context-item i {
    width: 16px;
    text-align: center;
    color: #777;
    font-size: 14px;
    transition: color 0.2s ease;
}
.sp-context-item:hover { background-color: #f0f4ff; color: #4285F4; }
.sp-context-item:hover i { color: #4285F4; }
.sp-context-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.sp-context-close:hover { color: #444; }
/* 끝: 코스 자르기 컨텍스트 메뉴 */

/* 시작: 하단 버튼 짧은설명: 우측 BTN-20(내 채널에 저장·코스 편집) */
.sp-action-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px; /* 컬럼 gap 24px과 합쳐 저장 카드에서 40px 아래 */
    /* 페이지 하단 숨쉼은 #split-main 패딩이 담당한다 — 여기 margin을 두면 그만큼 우측 컬럼(=좌측 카드 최소높이)이 커진다 v202608060120 */
}

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

/* 시작: 분할 모달 버튼 스타일 짧은설명: 공용 .btn-03(베이지)이 특정 모달 ID로 스코프되어 분할 페이지 모달에는
   적용되지 않으므로 같은 스펙을 분할 모달 스코프로 부여(병합과 동일 사유) */
#sp-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;
}
#sp-import-modal .btn-03:hover {
    background: #E3DED7;
    border-color: #D5CEC4;
}
/* 끝: 분할 모달 버튼 스타일 */

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