/* 버전: 202608031457 */

/* 1440px 미만은 레이아웃 고정 + 가로 스크롤(전 PC 페이지 공통 기준, common-header.css와 동일 값) v202607302305 */
body { min-width: 1440px; }

/* 확장자 파일 정보 패널: 좌측 배치 v202608031219
   푸터가 우측 하단 카드(/draw/ 코스 선택 모드 .cip-elev-card 동형)로 바뀌어 좌측과 겹치지 않으므로,
   하단을 /draw/ CIP 패널과 같은 바닥 20px으로 고정한다(고도프로필 개폐와 무관).
   내용이 짧아도 아래까지 채우고, 길면 내부 스크롤. 배경은 /draw/ 그리기모드 카드와 동일한 크림(#FFFCF7, COL-B7) */
#log-side-panel {
    position: absolute;
    top: calc(20px + var(--draw-header-h, 64px));
    left: 16px; /* /draw/ 카드·검색 결과 패널과 동일 정렬 20→16 v202608021841 */
    width: 400px; /* 타 패널(log-edit 정보 패널·/draw/ 코스 카드)과 동일 폭 300→400 v202608021841 */
    bottom: 20px;
    background: #FFFCF7; /* COL-B7 — /draw/ 카드와 동일 v202608021855 */
    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);
    transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 시작: 단일 코스 파일 전용 v202608021943 짧은설명: 공용 불러오기 모달(new-doc-modal.js)은 파일을 고르면
   '추가 로그 불러오기' 행을 붙이지만 뷰어는 한 파일만 보므로 첫 행 이후를 숨긴다(파싱도 첫 파일만, viewer-file.js) */
#newdoc-log-import-container .newdoc-log-row:not(:first-child) {
    display: none;
}
/* 끝: 단일 코스 파일 전용 */

/* 시작: 선택 해제 버튼(BTN-15) 위치 v202608031219 짧은설명: 푸터가 우측 하단 카드(좌 432·바닥 16)로 바뀌어
   카드 가로 중앙(50% + 208px, /draw/ cip-card-close-btn과 동일 계산) 위 20px에 둔다. 패널 닫힘이면 카드가
   전체 폭이라 화면 중앙으로 복귀. 표시/숨김은 footer-stats.css(body.seg-info-active)가 담당 */
#btn-seg-close {
    position: absolute;
    left: calc(50% + 208px);
    transform: translateX(-50%);
    bottom: calc(var(--expanded-height, 350px) + 36px);
    z-index: 1101;
    transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body.logedit-chart-collapsed #btn-seg-close {
    bottom: 121px;
}
body.log-panel-closed #btn-seg-close {
    left: 50%;
}
/* 끝: 선택 해제 버튼(BTN-15) 위치 */

/* 리사이즈 핸들 드래그 중에는 높이가 포인터를 즉시 따라오도록 트랜지션을 끈다(/draw/ 플로팅 그룹과 동일) */
#log-side-panel.no-transition {
    transition: none;
}

#log-side-panel.expanded {
    display: flex;
}

/* 시작: 패널 닫힘 버튼(세로 탭) + 닫힘 슬라이드 v202608021841 짧은설명: /draw/ 그리기모드 좌측 카드의
   닫기 탭(.LEFT-toggle-btn)을 이식. 패널 우측 가장자리에 붙고, 닫으면 패널이 좌측으로 슬라이드 아웃되며
   탭만 좌측 가장자리에 남아 재열기 핸들이 된다. 세로 위치(top)는 패널 실제 높이 중앙에 오도록 JS가 갱신 */
.log-panel-toggle {
    position: absolute;
    left: 416px; /* 패널 우측 가장자리(16 + 400) */
    top: calc(50vh - 50px); /* 초기값. viewer-leftpanel.js가 패널 세로 중앙으로 갱신 */
    width: 19px;
    height: 100px;
    background: #F2EFEB;
    border: 1px solid #E3DED7;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 12px;
    padding: 0;
    z-index: 2000;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.2s, color 0.2s;
}
.log-panel-toggle:hover {
    background: #E3DED7;
    border-color: #D5CEC4;
}
.log-panel-toggle-icon {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 닫힘: 패널은 좌측으로 슬라이드 아웃(16 + 400 + 그림자 여유), 탭은 좌측 가장자리로 이동해 재열기 핸들 */
body.log-panel-closed #log-side-panel {
    transform: translateX(-440px);
}
body.log-panel-closed .log-panel-toggle {
    transform: translateX(-416px);
}
body.log-panel-closed .log-panel-toggle-icon {
    transform: rotate(180deg);
}
/* 끝: 패널 닫힘 버튼(세로 탭) + 닫힘 슬라이드 */

/* 정보 패널이 좌측으로 오면서 장소검색 결과 패널(draw-header.css: left 16px)과 자리가 겹친다 →
   검색 결과가 떠 있는 동안(.show)에만 정보 패널 위로 올려 가려지지 않게 한다 v202608012334 */
body.draw-page .draw-search-panel.show {
    z-index: 2100;
}

/* side-panel.css가 log-edit.css보다 뒤에 로드되어 같은 클래스 규칙은 그쪽이 이긴다 →
   이 패널 전용 값은 #log-side-panel 스코프로 걸어 확실히 적용한다 v202608012355 */
#log-side-panel .side-panel-header {
    /* 타이틀 = 파일명(확장자 제거, viewer-edit.js가 갱신). 글자 스타일은 /draw/ CIP 카드 제목(.cip-modal-title)과 동일 v202608021919 */
    padding: 14px 16px;
    border-bottom: 1px solid #E3DED7; /* /draw/ 카드 상단 헤더와 동일 톤 v202608021858 */
    background: #F2EFEB; /* /draw/ 카드 상단 헤더(.LEFT-course-head)와 동일 v202608021858 */
    font-size: 20px;
    font-weight: 400;
    color: #444;
    text-align: left;
    word-break: break-all;
    line-height: 1.3;
}

.side-panel-tabs {
    display: flex;
    overflow-x: auto;
    background: #f1f3f4;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 5px;
    gap: 2px;
}

.side-panel-tabs::-webkit-scrollbar {
    height: 3px;
}

.side-panel-tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.side-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 400;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.side-tab-x {
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.side-tab-x:hover {
    color: #e53935;
}

.side-tab:hover {
    background: rgba(46, 158, 107, 0.06);
    color: #2E9E6B;
}

.side-tab.active {
    color: #2E9E6B;
    border-bottom-color: #2E9E6B;
    background: #fff;
}

.side-panel-content {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

/* 시작: CIP형 섹션 스타일 이식 v202608031219 짧은설명: /draw/ 코스 선택 패널(course-info-modal.css)의
   섹션 제목·AI 요약 박스·출발지·도로 유형·하단 버튼 스타일을 뷰어 좌측 패널로 스코프해 복사(뷰어는 그 CSS를 로드하지 않는다).
   클래스 이름은 CIP와 동일하게 유지해 1:1 유지관리가 되게 한다 */
#log-side-panel .side-panel-content {
    /* 버튼 바 ↔ 본문 50px 여백을 스크롤 영역 밖(margin)으로 — 스크롤을 올려도 버튼 아래 여백이 항상 유지되고
       그 경계에서 본문이 잘린다. CIP(.cip-modal-body)와 동일 처리 v202608031405 */
    margin-top: 50px;
    padding: 0 16px 24px;
}
#log-side-panel .side-panel-content::-webkit-scrollbar { width: 4px; }
#log-side-panel .side-panel-content::-webkit-scrollbar-track { background: transparent; }
#log-side-panel .side-panel-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

/* 섹션 이동 버튼 바(CIP .cip-modal-nav/.cip-nav-btn 미러) — 헤더 아래 고정 서브헤더(스크롤 안 됨) v202608031347 */
#log-side-panel .viewer-panel-nav { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px 0; background: #FFFCF7; }
/* 뷰어는 CIP(400)와 달리 볼드 600 지시 v202608031357 */
#log-side-panel .cip-nav-btn { border: none; background-color: transparent; border-radius: 2px; padding: 2px 6px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: #444; transition: none; }
#log-side-panel .cip-nav-btn:hover { background-color: #F2EFEB; color: #444; }

/* 섹션 제목 (CIP .cip-sec-title 동일 — 22px·400·앞 불릿·섹션 간 60px) */
#log-side-panel .cip-sec-title { font-size: 22px; font-weight: 400; color: #444; margin: 60px 0 0; line-height: 1.3; }
#log-side-panel .cip-sec-title::before { content: '•'; margin-right: 10px; }
/* 버튼 바 ↔ 첫 섹션 간격 50px은 본문(.side-panel-content) margin-top이 담당(스크롤 밖 고정) → 첫 제목은 0 v202608031405 */
#log-side-panel .cip-sec-title--first { margin-top: 0; }
#log-side-panel .cip-info-group { margin-top: 14px; }

/* AI 요약 박스(CARD-13 미러). 섹션 제목이 'AI 요약'이라 박스 안 소제목은 없다 */
#log-side-panel .cip-ai-summary-box { background: #FCF9F5; border: 1px solid #e0e0e0; border-radius: 12px; padding: 14px 16px; }
#log-side-panel .cip-ai-summary-text { font-size: 15px; color: #333; line-height: 1.7; }
#log-side-panel .cip-ai-summary-text[hidden] { display: none; }
#log-side-panel .cip-ai-summary-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
#log-side-panel .cip-ai-summary-more { display: flex; justify-content: flex-end; margin-top: 8px; }
#log-side-panel .cip-ai-summary-more[hidden] { display: none; }
#log-side-panel .cip-ai-summary-more button {
    background-color: transparent; border: none; border-radius: 2px; padding: 0 4px;
    font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 600; color: #444;
    cursor: pointer; transition: none;
}
#log-side-panel .cip-ai-summary-more button:hover { background-color: #F2EFEB; color: #444; }
#log-side-panel .cip-ai-summary-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0; font-size: 14px; color: #888; }
#log-side-panel .cip-ai-summary-loading[hidden] { display: none; }
.cip-ai-summary-spinner { width: 16px; height: 16px; border: 2px solid #ddd; border-top-color: #2E9E6B; border-radius: 50%; animation: cip-ai-summary-spin 0.8s linear infinite; }
@keyframes cip-ai-summary-spin { to { transform: rotate(360deg); } }

/* 비로그인 안내(박스 중앙 문구 + 로그인/가입 BTN-20) */
#log-side-panel .viewer-ai-gate { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; }
#log-side-panel .viewer-ai-gate[hidden] { display: none; }
#log-side-panel .viewer-ai-gate-text { font-size: 14px; color: #888; }

/* 출발지 (CIP 미러) */
#log-side-panel .cip-icon-text-wrap { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: #333; line-height: 1.5; word-break: break-word; }
#log-side-panel .cip-icon-text-wrap > div { display: inline; }
#log-side-panel .cip-display-loc { font-size: 15px; color: #333; }
#log-side-panel .cip-btn-kakao-map {
    background: #FEE500; border: none; border-radius: 8px;
    padding: 3px 10px; font-size: 12px; font-weight: 700; color: #3c1e1e;
    cursor: pointer; white-space: nowrap; margin-left: 6px;
    vertical-align: middle; margin-top: -2px;
    display: inline-block; transition: all 0.2s ease; font-family: inherit;
}
#log-side-panel .cip-btn-kakao-map:hover { background: #F2D900; }

/* 도로 유형/노면 프로파일 (CIP .cip-modal-content 스코프 복사) */
#log-side-panel .road-profile-group { margin-top: 18px; }
#log-side-panel .road-profile-box { background: #FCF9F5; border: 1px solid #e0e0e0; border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
#log-side-panel .road-profile-box:last-of-type { margin-bottom: 0; }
#log-side-panel .road-profile-subtitle { font-size: 14px; font-weight: 600; color: #444; margin-bottom: 14px; }
#log-side-panel .road-profile-bar { display: flex; width: 100%; height: 18px; border-radius: 6px; overflow: hidden; background: #eee; }
#log-side-panel .road-profile-seg { height: 100%; }
#log-side-panel .road-profile-seg + .road-profile-seg { border-left: 1px solid rgba(255,255,255,0.6); }
#log-side-panel .road-profile-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
#log-side-panel .road-profile-legend-item { font-size: 13px; color: #444; display: inline-flex; align-items: center; }
#log-side-panel .road-profile-legend-item i { width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; display: inline-block; }
#log-side-panel .road-profile-list { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #ececec; max-height: 260px; overflow-y: auto; }
#log-side-panel .road-profile-item { display: flex; align-items: center; font-size: 13px; color: #555; padding: 3px 0; }
#log-side-panel .road-profile-item i { width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; flex: 0 0 auto; }
#log-side-panel .road-profile-item-cat { flex: 0 0 116px; color: #333; }
#log-side-panel .road-profile-item-range { flex: 1 1 auto; color: #888; }
#log-side-panel .road-profile-item-dist { flex: 0 0 auto; color: #555; font-variant-numeric: tabular-nums; }
#log-side-panel .road-profile-est { color: #b0772f; font-size: 12px; }
#log-side-panel .road-profile-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 0; font-size: 14px; color: #888; }
#log-side-panel .road-profile-loading[hidden] { display: none; }

/* 하단 고정 버튼 바 (CIP 하단 바 미러 — 1줄·우측 정렬·상단 구분선 없음) */
#log-side-panel .viewer-panel-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px; background: #FFFCF7; }
#log-side-panel .btn-20 { 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; transition: all 0.2s ease; font-family: inherit; }
#log-side-panel .btn-20:hover { background: #E3DED7; border-color: #D5CEC4; }
#log-side-panel .btn-22 { 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; transition: all 0.2s ease; font-family: inherit; }
#log-side-panel .btn-22:hover { background: #EDCC8E; border-color: #DEA535; }

/* 출발장소 보기 카카오맵 모달 (CIP 동일 클래스 복사) */
.cip-kakao-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4); z-index: 9999999;
    display: none; justify-content: center; align-items: center;
    backdrop-filter: blur(2px);
}
.cip-kakao-modal-content {
    background-color: #fff; width: 90%; max-width: 600px; height: 80vh; max-height: 600px;
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; overflow: hidden;
}
.cip-kakao-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid #eaeaea;
}
.cip-kakao-modal-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #333; }
.cip-kakao-close-btn { background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 0; }
.cip-kakao-close-btn:hover { color: #2E9E6B; }
.cip-kakao-map-body { flex: 1; width: 100%; position: relative; }
.cip-kakao-modal-footer {
    padding: 12px 20px; border-top: 1px solid #eaeaea;
    background-color: #f9f9f9; display: flex; justify-content: center; align-items: center;
}
.cip-kakao-addr-text { font-size: 14px; font-weight: 500; color: #666; }
/* 끝: CIP형 섹션 스타일 이식 v202608031219 */

/* 패널 내용은 전부 기본 폰트(Pretendard · 400 · #444) 15px으로 통일. 초록 아이콘 색만 남긴다 v202607312150 */
.log-simple-text {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
}

/* 시작: 통계 항목 줄바꿈 v202608031431 짧은설명: 항목은 종전대로 한 줄에 하나씩 두되(가독성),
   줄 간격을 벌리던 스타일(line-height 1.8 · 행 margin-bottom · 값을 우측 끝으로 미는 space-between)을
   걷어내 엔터로 개행한 순수 텍스트처럼 붙인다. 세로 높이는 이만큼 줄어 아래 섹션이 덜 밀린다 */
.log-stat-flow {
    margin: 0;
    line-height: normal;
}

.log-stat-flow .log-stat-item {
    display: block;
}

/* 항목 앞 불릿(섹션 제목 .cip-sec-title::before와 동일한 '•', 15px 본문이라 간격만 좁힌다) v202608031457 */
.log-stat-flow .log-stat-item::before {
    content: '•';
    margin-right: 6px;
}
/* 끝: 통계 항목 줄바꿈 */

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

.log-simple-text span[id^="log-info-"] {
    color: #444;
    font-weight: 400;
    font-family: inherit;
}

.log-simple-text .section-title {
    font-size: 15px;
    font-weight: 400;
    color: #444;
    margin-top: 15px;
    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 */
}

.log-simple-text .section-title:first-child {
    margin-top: 0;
}

/* 시작: 푸터 2단계(미니 85 ↔ 상세 --expanded-height) + 우측 하단 카드화 v202608031219 짧은설명: /draw/ 코스 선택 시
   푸터 카드(left-panel.css .main-footer.cip-elev-card)와 동일 기하 — 좌측 정보 패널 오른쪽(432)~우측 16, 바닥 16,
   라운드 16·테두리·그림자. 미니(써머리)·상세(.expanded) 2단계는 그대로이고, 카드에는 리사이즈 핸들·워터마크를 숨긴다.
   정보 패널을 닫으면(body.log-panel-closed) 카드가 좌측 16px까지 넓어진다 */
.main-footer {
    height: 85px !important;
    left: 432px !important;
    right: 16px;
    bottom: 16px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    transition: height 0.3s ease, left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.log-panel-closed .main-footer {
    left: 16px !important;
}

/* 카드 내부 보정(/draw/ .cip-elev-card 동일): 써머리 라운드·좁은 폭 대응 */
.main-footer .footer-summary {
    border-radius: 16px 16px 0 0;
    padding: 0 16px;
}
.main-footer .stat-divider {
    margin: 0 10px;
}
.main-footer .mini-chart-wrapper {
    min-width: 0;
}
.main-footer .mini-chart-logo-text {
    display: none !important;
}

/* 상세 높이 350px = /draw/ 그리기 모드와 동일(써머리 85 + 그래프 영역 265). 상단 패딩도 공용 5px을 그대로 써
   그래프 캔버스 높이(255px)까지 맞춘다 v202607312059 */
.main-footer.expanded {
    height: var(--expanded-height, 350px) !important;
}

.main-footer.expanded .chart-area {
    display: block !important;
}

.main-footer:not(.expanded) .chart-area {
    display: none !important;
}

/* 카드에는 드래그 리사이즈 핸들을 두지 않는다(/draw/ 카드 동일 — 단계 전환은 '고도 프로필' ▲▼) */
.main-footer .resize-handle {
    display: none !important;
}

/* 축척·줌 표시는 카드 위로: 카드 bottom 16 + 높이 + 8 */
body.logedit-chart-collapsed #map-info-overlay {
    bottom: 109px !important;
}
/* 끝: 푸터 2단계 + 우측 하단 카드화 */

.resize-handle {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 24px;
    cursor: ns-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1200 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.resize-handle::after {
    content: '';
    width: 216px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.resize-handle:hover::after {
    background: #a0a0a0;
}

/* #chart-selection-box 상시 숨김 규칙 제거 v202608021943: 세그먼트 선택(구간 강조) 지원으로
   프로그램 경로(updateChartSelectionBox)에서 선택 박스를 표시해야 한다. 드래그 구간선택은 여전히 차단 상태 */

#detailElevationChart {
    cursor: crosshair !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.btn-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.btn-modal-close:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#map-info-overlay {
    position: absolute;
    bottom: calc(var(--expanded-height, 350px) + 24px) !important; /* 카드 bottom 16 + 높이 + 8 v202608031219 */
    right: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    pointer-events: none;
    z-index: 400 !important;
    transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

.dropup-menu {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid rgba(66, 133, 244, 0.3);
    border-radius: 10px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
    width: max-content;
    z-index: 1002;
    padding: 6px 0;
    white-space: nowrap;
}

.dropup-menu::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.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:hover {
    background: #f0f4ff;
    color: #4285F4;
}

/* 시작: 로그 편집 미지원 영역 비활성 스타일 짧은설명: 세그먼트·코스 관련 영역을 회색조로 비활성처럼 보이게 하고, 내부 토글/슬라이더의 클릭·드래그를 차단한다. 컨테이너 자체는 hover 툴팁 감지를 위해 pointer-events를 유지한다 */
.LEFT-feature-disabled {
    filter: grayscale(1);
    cursor: not-allowed;
}

.LEFT-feature-disabled * {
    pointer-events: none !important;
}

/* 비활성 영역 위 툴팁: 영역을 덮고 정중앙에 표시(위쪽 말풍선 대신 오버레이) */
.LEFT-feature-disabled[data-tooltip]::before {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
}

.LEFT-feature-disabled[data-tooltip]::after {
    display: none;
}

/* grayscale filter가 박스마다 stacking context를 만들어 툴팁이 뒤 박스에 가려지므로, 호버 박스를 위로 올린다 */
.LEFT-feature-disabled:hover {
    position: relative;
    z-index: 10000;
}
/* 끝: 로그 편집 미지원 영역 비활성 스타일 */

/* 시작: 상단 액션 막대 경로반전 비활성 + 우측 툴팁 짧은설명: 로그 편집에서 경로반전 버튼만 회색 비활성 처리하고, 안내 툴팁을 버튼 오른쪽(화살표는 왼쪽)에 띄운다. 우측 툴팁이 박스 밖으로 보이도록 overflow를 풀고 모서리 라운드를 보정한다 */
.LEFT-map-controls .LEFT-action-box { overflow: visible; }
.LEFT-action-box .LEFT-action-btn--primary { border-radius: 12px 0 0 12px; }
.LEFT-action-box .LEFT-action-btn.LEFT-action-disabled { border-radius: 0 12px 12px 0; }

.LEFT-action-btn.LEFT-action-disabled {
    filter: grayscale(1);
    color: #aaa;
    cursor: not-allowed;
}
.LEFT-action-btn.LEFT-action-disabled:hover {
    background: transparent;
    color: #aaa;
}

.LEFT-tooltip-right[data-tooltip]::before {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
}
.LEFT-tooltip-right[data-tooltip]::after {
    bottom: auto;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-color: transparent rgba(60, 64, 67, 0.95) transparent transparent;
}
/* 끝: 상단 액션 막대 경로반전 비활성 + 우측 툴팁 */

[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);
}

[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;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

.modal-section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-section-row p {
    margin: 0;
    flex: 1;
    min-width: 200px;
}

#import-file-input {
    display: none;
}

/* 좌표 편집 포인트(.log-edit-point*)·코스선 클릭 편집 메뉴(.log-context-menu*) 스타일은 해당 기능과 함께 제외 v202608012334 */

/* 시작: 헤더 미지원 요소 비활성(회색) v202608012334 짧은설명: /draw/ 헤더 동형으로 배치한 SEGMENTS 토글·코스반전·캡처를
   스타일은 그대로 두고 회색조+클릭 차단만 건다(sw-uni 3버튼은 뷰어에서 활성) */
.log-header-disabled {
    filter: grayscale(1);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
/* 끝: 헤더 미지원 요소 비활성(회색) */

/* 시작: 로그파일 다운로드 파일명 입력행 v202607312329 짧은설명: 모달이 크림 스킨(.newdoc-modal-*)으로 바뀌어
   입력칸도 디자인 시스템 INPUT-01(배경 #FCF9F5 · 테두리 #E5CFA1 · hover/focus #DEA535)을 따른다.
   행은 promptDownloadLog가 만들며, 이전의 인라인 스타일 더미를 이 규칙으로 대체한다 */
#download-inputs-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-filename-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-filename-label {
    width: 45px;
    font-size: 15px;
    color: #444;
    flex-shrink: 0;
}

.download-filename-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 15px;
    color: #444;
    background: #FCF9F5;
    border: 1px solid #E5CFA1;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
}

.download-filename-input:hover,
.download-filename-input:focus {
    border-color: #DEA535;
}

/* 포맷별 저장 버튼(GPX·FIT)은 입력 폼 아래 줄에 우측 정렬 v202607312353 */
.download-format-btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
/* 끝: 로그파일 다운로드 파일명 입력행 */

/* 시작: 레이어 타일·팝업 초기 좌측 위치 v202608021841 짧은설명: 정보 패널이 좌측(폭 400)에 기본 열림이라
   타일 초기 위치도 패널 오른쪽(430px)이다. JS(viewer-leftpanel.js) 계산이 DOMContentLoaded라 첫 페인트와
   최종 위치가 다르면 미끄러져 보이므로 같은 값으로 맞춘다. left-panel.css가 뒤에 로드되므로 id로 우선순위를 확보한다 */
#map-layer-tile,
#map-layer-popup {
    left: 430px;
}
/* 끝: 레이어 타일·팝업 초기 좌측 위치 */

/* 시작: 카카오 파노라마 중 log-edit 전용 요소 숨김 v202607311801 짧은설명: 헤더·푸터(.main-footer)·중앙 툴은
   kakao-view.css(body.kakao-pano)가 이미 숨기므로, log-edit 고유 요소만 여기서 함께 숨긴다 */
body.kakao-pano #log-side-panel,
body.kakao-pano #map-info-overlay,
body.kakao-pano .log-panel-toggle,
body.kakao-pano .LEFT-layer-tile,
body.kakao-pano .LEFT-layer-popup {
    display: none !important;
}
/* 끝: 카카오 파노라마 중 log-edit 전용 요소 숨김 */
/* 시작: 웨이포인트 자동생성 버튼 숨김 v202608022212 짧은설명: 세그먼트·구간 정보 제목박스(footer-stats.js _ensureSegTitleBox)의
   '웨이포인트 자동생성'은 편집 기능이라 보기 전용인 뷰어에서는 눌러도 동작이 없다 → 뷰어에서만 감춘다.
   footer-stats.js가 렌더할 때마다 인라인 display:flex를 다시 심으므로 !important로 덮는다.
   선택 해제 버튼(BTN-15 #btn-seg-close)은 그대로 둔다 */
#seg-title-wp {
    display: none !important;
}
/* 끝: 웨이포인트 자동생성 버튼 숨김 */