/* 버전: 202608041815 */
/* 코스 파일 병합 페이지(/merge/) 전용 스타일 — PC 전용. 지도영역은 map-workspace.css를 공유하고 이 파일은 병합 페이지 배치·레이어 리스트·파일추가 폼·버튼만 담당 */

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

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

/* 시작: 2컬럼 배치 v202608041643 짧은설명: 좌=지도영역·우=레이어영역(상세페이지 좌우 미러).
   우측은 상세 좌측 내용영역과 같은 560px 고정, 컬럼 간격은 상세와 같은 60px.
   좌측 지도 폭은 고정값 대신 브라우저 세로높이 연동 — 지도 높이(--mg-map-h)를
   100vh에서 고정 요소(헤더 64 + 본문 상단 여백 40 + 통계줄 ~90 + 고도그래프 220 + 하단 숨쉼 ~26 = 440px)를 뺀 값으로 잡고,
   지도 폭 = 높이 × 1.56(상세 지도영역 780:500 비율). 창 가로가 좁으면 100vw 기준으로 한 번 더 제한하고
   실제 지도 높이는 aspect-ratio가 폭에서 역산해 비율을 항상 유지한다 */
/* 컨테이너: 타이틀 + 2컬럼을 세로로 쌓고 내용 폭(fit-content)만큼 중앙 정렬 — 타이틀이 컬럼 좌측 상단에 정렬된다.
   지도 높이 고정 요소 합은 타이틀 줄(36px + 간격 20px)이 늘어 440→500px v202608041706 */
.mg-container {
    --mg-map-h: clamp(300px, calc(100vh - 500px), 860px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: fit-content;
    margin: 0 auto;
}

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

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

.mg-left-col {
    width: min(calc(var(--mg-map-h) * 1.56), calc(100vw - 720px));
    flex-shrink: 0;
    /* 써머리 반응형 숨김의 기준 폭(컨테이너 쿼리) v202608041706 */
    container-type: inline-size;
}

/* 시작: 써머리 반응형 숨김 v202608041706 짧은설명: 지도영역(컨테이너) 폭이 좁아지면 통계줄이 한 줄에 안 들어가므로
   1단계(≤700px)에서 '상승거리' 칸, 2단계(≤560px)에서 '예상시간' 칸까지 숨긴다.
   공용 include를 고치지 않도록 칸 안의 값 id(:has)로 지정 — 병합 페이지 전용 CSS라 상세·저장 페이지 무영향 */
@container (max-width: 700px) {
    .stats-row-wrap .stat-col:has(#mg-asc-dist) { display: none; }
}
@container (max-width: 560px) {
    .stats-row-wrap .stat-col:has(#mg-time) { display: none; }
}
/* 끝: 써머리 반응형 숨김 */

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

/* 지도영역: ws 카드 그대로 쓰되 지도 높이는 폭에서 상세 비율(780:500)로 역산. 툴바(지도전환·편집·전체화면)와 하단 세그/웨이포인트 패널은 병합 페이지에서 미사용이라 숨김 */
#merge-main .map-area-wrap { height: auto; aspect-ratio: 780 / 500; }
#merge-main .map-toolbar-wrap { display: none; }
#merge-main .save-bottom-data-panel { display: none; }
/* 끝: 2컬럼 배치 */

/* 패널 카드(레이어 리스트·파일추가): ws 카드(.save-preview-card)와 같은 크림 카드 톤 */
.mg-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;
}

.mg-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #444;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.mg-panel-title i { color: #777; font-size: 14px; }

/* 시작: 파일 레이어 리스트 짧은설명: 행 드래그(grab)·▲▼·휴지통. 코스세이브 이미지 목록(.image-thumb-item) 형식 차용 */
.mg-layer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.mg-layer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: grab;
    transition: background 0.15s, border-color 0.15s;
}
.mg-layer-item:active { cursor: grabbing; }
.mg-layer-item.drag-over { border-color: #2E9E6B; background: #f0faf5; }
.mg-layer-item.dragging { opacity: 0.5; }

.mg-layer-grip { color: #ccc; font-size: 13px; flex-shrink: 0; }

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

.mg-layer-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* 순서 화살표·휴지통: BTN-20-1 색 차용(베이지 배경·테두리·hover) */
.mg-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;
}
.mg-layer-btn:hover { background: #E3DED7; border-color: #D5CEC4; }
.mg-layer-btn:disabled { opacity: 0.35; cursor: default; }
.mg-layer-btn:disabled:hover { background: #F2EFEB; border-color: #E3DED7; }
.mg-layer-btn.mg-layer-del { margin-left: 6px; }
/* 끝: 파일 레이어 리스트 */

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

/* 시작: 하단 버튼 짧은설명: 중앙 BTN-22(병합 후 다운로드) + 우측 BTN-20(내 채널에 저장·코스 편집) */
.mg-download-row {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.mg-action-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 76px; /* 컬럼 gap 24px과 합쳐 '병합 후 다운로드' 버튼에서 100px 아래 v202608041706 */
    margin-bottom: 30px;
}

/* BTN-22 Accent Button */
.mg-btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #E5CFA1;
    border-radius: 10px;
    background: #F1D9A9;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    transition: all 0.2s ease;
}
.mg-btn-accent:hover { background: #EDCC8E; border-color: #DEA535; }

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

/* 시작: 병합 모달 버튼 스타일 v202608041815 짧은설명: 공용 .btn-03(베이지) 스타일이 특정 모달 ID로 스코프되어
   (#newdoc-modal·#export-modal 등) 병합 페이지 모달에는 적용되지 않아 기본 버튼으로 보였다 → 같은 스펙을 병합 모달 스코프로 부여 */
#mg-import-modal .btn-03,
#mg-download-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;
}
#mg-import-modal .btn-03:hover,
#mg-download-modal .btn-03:hover {
    background: #E3DED7;
    border-color: #D5CEC4;
}
/* 끝: 병합 모달 버튼 스타일 */

/* 시작: 처리 로더 짧은설명: FIT 변환·고도 조회 동안 전체 화면 덮개 */
.mg-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;
}
.mg-loader-overlay.show { display: flex; }
.mg-loader-overlay i { font-size: 30px; color: #2E9E6B; }
.mg-loader-overlay span { font-size: 14px; font-weight: bold; color: #333; }
/* 끝: 처리 로더 */