/* 변경 파일명: course-detail.css */
/* 버전: 202607081710 */
body, html { margin: 0; padding: 0; min-height: 100%; width: 100%; min-width: 1220px; font-family: 'Pretendard', sans-serif; background-color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

#course-detail-main { box-sizing: border-box; width: 100%; min-height: 100vh; padding-top: 100px; padding-bottom: 15px; }

.inner-container { width: 1220px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }

.page-title { font-size: 24px; font-weight: 800; color: #444; margin: 0 0 15px 0; line-height: 34px; word-break: break-all; width: 100%; display: flex; align-items: center; gap: 12px; }
.page-title i { font-size: 22px; color: #2E9E6B; flex-shrink: 0; }
.page-title i.fa-lock { color: #333; }

.save-columns-wrap { display: flex; flex-direction: row; gap: 20px; width: 100%; align-items: flex-start; }

.save-left-col { width: 400px; display: flex; flex-direction: column; gap: 15px; flex-shrink: 0; }
.save-right-col { width: 800px; display: flex; flex-direction: column; gap: 15px; flex-shrink: 0; }

.save-form-card { padding: 0; gap: 15px; display: flex; flex-direction: column; background: transparent; border-radius: 0; box-shadow: none; border: none; width: 100%; box-sizing: border-box; min-height: 500px; }

.detail-card-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 20px; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 14px; }

.course-meta-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.meta-left, .meta-right { display: flex; align-items: center; gap: 8px; }
.meta-item { font-size: 13px; color: #777; font-weight: 500; }
#view-author { font-size: 15px; font-weight: 700; color: #333; }
.meta-dot { font-size: 13px; color: #ccc; }
.meta-divider { border: none; border-top: 1px solid #eaeaea; margin: 0 0 15px 0; width: 100%; }

/* 시작: 메타 정보 그룹 및 간격 밀착 스타일 어떤 기능을 하는 요소인지 짧은설명: 부모의 gap 간섭을 피하고 가로선 위아래 항목을 줄바꿈처럼 밀착시킴 */
.course-meta-group { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.course-meta-group .course-meta-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; padding: 0; }
.course-meta-group .meta-divider { border: none; border-top: 1px solid #eaeaea; margin: 4px 0; width: 100%; }
.course-meta-group .course-sub-meta-row { display: flex; justify-content: flex-end; align-items: center; width: 100%; margin: 0; padding: 0; }
.sub-meta-right { display: flex; align-items: center; gap: 8px; }
/* 끝: 메타 정보 그룹 및 간격 밀착 스타일 */

.info-display-group { margin-bottom: 12px; }
.desc-group { padding-top: 10px; }
.display-desc { font-size: 15px; color: #333; line-height: 1.7; white-space: pre-wrap; min-height: 120px; }
/* BADGE-03: 설명·댓글 본문 URL 자동 링크 (투명bg·radius2·녹색·hover 녹색+흰) v202606251803 */
.auto-link { color: #2E9E6B; font-weight: 600; text-decoration: none; background-color: transparent; border-radius: 2px; padding: 0 4px; word-break: break-all; }
.auto-link:hover { background-color: #2E9E6B; color: #ffffff; }

/* 시작: 추천 및 스크랩 버튼 스타일 어떤 기능을 하는 요소인지 짧은설명: 중앙 정렬 배치 및 기본 흰색 배경, 호버 시 파란색 테두리와 글자색 변경 스타일 정의 */
.action-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 50px 0;
    border-bottom: none;
    padding-bottom: 0;
}
.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 20px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.action-btn i {
    font-size: 14px;
    transition: color 0.2s ease;
}
.action-btn:hover {
    background: #EEFAF3;
    border-color: #2E9E6B;
    color: #2E9E6B;
}
.action-btn.active i {
    color: #2E9E6B;
}
/* 끝: 추천 및 스크랩 버튼 스타일 */

.tags-group { margin-bottom: 4px; padding-bottom: 0; border-bottom: none; }
.loc-group { margin-bottom: 0px; padding-bottom: 0; border-bottom: none; }

/* 시작: 게시물 링크 복사 박스 스타일 어떤 기능을 하는 요소인지 짧은설명: side-panel.css의 cip-link-box 원본 스타일을 클래스명만 변경하여 그대로 적용, span에 flex: 1; min-width: 0 추가로 detail 페이지 flex 컨텍스트 대응 */
.detail-link-group {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.detail-link-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0faf5;
    color: #1A8A5A;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d4edd9;
    transition: all 0.2s;
}

.detail-link-box:hover {
    background: #CCF0DE;
}

.detail-link-box span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}
/* 끝: 게시물 링크 복사 박스 스타일 */

.icon-text-wrap { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #333; line-height: 1.5; word-break: break-word; }
.icon-text-wrap i { color: #888; font-size: 13px; margin-top: 3px; flex-shrink: 0; }
.icon-text-wrap > div { display: inline; }

.display-tags { font-size: 13px; color: #2E9E6B; }
.display-loc { font-size: 13px; color: #333; }

.btn-kakao-map {
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -2px;
    transition: all 0.2s ease;
    font-family: inherit;
}
.btn-kakao-map:hover {
    background: #EEFAF3;
    border-color: #2E9E6B;
    color: #2E9E6B;
}

.kakao-map-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4); z-index: 10000;
    display: none; justify-content: center; align-items: center;
    backdrop-filter: blur(2px);
}
.kakao-map-modal-content {
    background-color: #ffffff; 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;
}
.kakao-map-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid #eaeaea;
}
.kakao-map-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #333; }
.btn-close-kakao { background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 0; }
.btn-close-kakao:hover { color: #2E9E6B; }
.kakao-map-body { flex: 1; width: 100%; position: relative; }
.kakao-map-footer {
    padding: 15px 20px; border-top: 1px solid #eaeaea; text-align: center; background-color: #f9f9f9;
    display: flex; justify-content: center; align-items: center;
}
.kakao-map-addr-text { font-size: 14px; font-weight: 500; color: #666; }

.author-display-group { margin-top: auto; padding-top: 15px; }
.author-info { font-size: 13px; color: #666; font-weight: 500; }
.author-info i { margin-right: 5px; color: #aaa; }

.save-footer-row { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 4px; margin-bottom: 4px; }
.save-footer-row .btn-cancel { padding: 10px 28px; border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; background: #fff; border: 1px solid #c0c0c0; color: #555; }
.save-footer-row .btn-cancel:hover { background: #EEFAF3; border-color: #2E9E6B; color: #2E9E6B; }

.btn-list { width: 100%; padding: 13px 0; background: #fff; border: 1px solid #dadce0; border-radius: 10px; color: #555; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn-list:hover { background: #EEFAF3; border-color: #2E9E6B; color: #2E9E6B; }

/* 작성자 전용 버튼 그룹 */
.detail-author-btns { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.detail-author-btns .detail-author-btn { flex: 1; text-align: center; }
.detail-author-btns .btn-13 { flex: none; margin-left: 10px; }
.btn-02 { background: #2E9E6B; color: #fff; border: none; border-radius: 22px; padding: 10px 28px; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background 0.2s; font-family: inherit; }
.btn-02:hover { background: #24835A; }
.btn-03 { background: #fff; border: 1px solid #c0c0c0; color: #555; border-radius: 22px; padding: 10px 28px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn-03:hover { background: #EEFAF3; border-color: #2E9E6B; color: #2E9E6B; }
.btn-13 { background: transparent; border: none; padding: 0; font-size: 16px; font-weight: 600; color: #555; cursor: pointer; transition: color 0.2s ease; font-family: inherit; }
.btn-13:hover { color: #2E9E6B; }
.footer-right { display: flex; gap: 10px; }
.footer-right button { padding: 10px 24px; border-radius: 22px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn-cancel { background: #fff; border: 1px solid #c0c0c0; color: #555; }
.btn-submit { background: #2E9E6B; border: 1px solid #2E9E6B; color: #fff; }

.save-preview-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e0e0e0; overflow: hidden; display: flex; flex-direction: column; width: 100%; }

.save-preview-card.expanded-mode { width: 100vw !important; height: 100vh !important; display: flex !important; flex-direction: column !important; background: #fff; border: none; border-radius: 0; margin: 0; padding: 0; overflow: hidden; }
.save-preview-card:fullscreen { width: 100vw !important; height: 100vh !important; display: flex !important; flex-direction: column !important; background: #fff; border: none; border-radius: 0; margin: 0; padding: 0; overflow: hidden; }

.save-preview-card.expanded-mode .map-area-wrap { flex: 1 !important; height: auto !important; min-height: 0; }
.save-preview-card:fullscreen .map-area-wrap { flex: 1 !important; height: auto !important; min-height: 0; }

.save-preview-card.expanded-mode .stats-row-wrap { justify-content: flex-start; gap: 0; }
.save-preview-card:fullscreen .stats-row-wrap { justify-content: flex-start; gap: 0; }

.save-preview-card.expanded-mode .stat-col { flex: none; min-width: 100px; margin-right: 30px; padding-right: 30px; }
.save-preview-card:fullscreen .stat-col { flex: none; min-width: 100px; margin-right: 30px; padding-right: 30px; }

.save-preview-card.expanded-mode .chart-area-wrap { height: 260px; }
.save-preview-card:fullscreen .chart-area-wrap { height: 260px; }

.save-preview-card.expanded-mode .detail-only-stat { display: flex !important; }
.save-preview-card:fullscreen .detail-only-stat { display: flex !important; }

/* 시작: 댓글 섹션 스타일 v202605231630 */
.comment-section { margin-top: 0; border-top: none; padding-top: 0; }
.comment-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.comment-section-title { font-size: 18px; font-weight: 700; color: #444; display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.comment-section-title i { color: #888; }
.comment-total-count { font-size: 13px; font-weight: 500; color: #888; }
.comment-sort-btn { background: transparent; border: none; padding: 0; font-size: 13px; font-weight: 400; color: #333; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; transition: color 0.2s; }
.comment-sort-btn:hover { color: #2E9E6B; }
.comment-divider { border: none; border-top: 1px dashed #eaeaea; margin: 12px 0; }

.comment-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.comment-item:last-child { border-bottom: none; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.comment-author { font-size: 15px; font-weight: 700; color: #333; }
.comment-date { font-size: 11px; color: #aaa; }
.comment-content { font-size: 15px; color: #333; line-height: 1.7; word-break: break-word; margin-bottom: 6px; }
.comment-actions { display: flex; gap: 8px; justify-content: flex-end; }
.comment-reply-btn { background: none; border: none; font-size: 13px; color: #333; cursor: pointer; padding: 0; font-family: inherit; font-weight: 600; }
.comment-reply-btn:hover { color: #2E9E6B; text-decoration: underline; }
.comment-delete-btn { background: none; border: none; font-size: 13px; color: #aaa; cursor: pointer; padding: 0; font-family: inherit; }
.comment-delete-btn:hover { color: #e53935; }

.reply-list { margin-top: 6px; padding-left: 14px; border-left: 2px solid #E2F5EC; }
.reply-item { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.reply-item:last-child { border-bottom: none; }

.reply-form-wrap { margin-top: 8px; padding: 10px; background: #f8f9fa; border-radius: 10px; display: none; }
.reply-form-wrap.open { display: block; }

.comment-form-wrap { margin-top: 14px; }
.comment-textarea { width: 100%; box-sizing: border-box; border: 1px solid #dadce0; border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; color: #333; resize: none; min-height: 72px; overflow: hidden; outline: none; transition: border-color 0.2s; }
.comment-textarea:focus { border-color: #2E9E6B; }
.comment-form-footer { display: flex; justify-content: flex-end; margin-top: 6px; }
.comment-submit-btn { background: #2E9E6B; border: none; border-radius: 22px; color: #fff; font-size: 15px; font-weight: 600; padding: 10px 18px; cursor: pointer; font-family: inherit; transition: background 0.2s; }
.comment-submit-btn:hover { background: #24835A; }
.comment-mention { font-size: 13px; font-weight: 600; color: #2E9E6B; }
.comment-empty { font-size: 13px; color: #aaa; text-align: center; padding: 16px 0; }

.comment-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
.comment-page-btn { background: #fff; border: 1px solid #dadce0; border-radius: 8px; color: #555; font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.comment-page-btn:hover { border-color: #2E9E6B; color: #2E9E6B; }
.comment-page-btn.active { background: #2E9E6B; border-color: #2E9E6B; color: #fff; }
.comment-page-btn:disabled { opacity: 0.4; cursor: default; }
/* 끝: 댓글 섹션 스타일 */

.map-area-wrap { height: 500px; position: relative; background: #eee; border-bottom: 1px solid #ccc; }
#ws-map-view { width: 100%; height: 100%; z-index: 1; }

.stats-row-wrap { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: #fff; border-bottom: 1px solid #ccc; flex-shrink: 0; }
.stat-col { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.stat-col:not(:last-child) { border-right: 1px solid #eee; margin-right: 20px; padding-right: 20px; }
.stat-lbl { font-size: 11px; color: #888; font-weight: 600; margin-bottom: 4px; white-space: nowrap; display: flex; align-items: baseline; gap: 4px; }
.stat-lbl .pct-blue { color: #2E9E6B; font-weight: 600; }
.stat-val { font-size: 24px; font-weight: 600; color: #333; font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 2px; line-height: 1.1; white-space: nowrap; }

.stat-val .unit, .stat-val .unit-sym { font-size: 13px; font-weight: 500; color: #888; }
.stat-val .unit-sym { margin: 0 1px; }

.chart-area-wrap { height: 220px; background: #ffffff; position: relative; padding: 5px 20px 20px 20px; box-sizing: border-box; flex-shrink: 0; }

.map-info-overlay { position: absolute; bottom: 15px; right: 20px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; pointer-events: none; z-index: 1000; }
.zoom-level-display { font-size: 11px; font-weight: 700; color: #333; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; margin-bottom: 2px; }

#ws-leaflet-scale-custom .leaflet-control-scale-line {
    border: 1px solid #333 !important;
    border-top: none !important;
    line-height: 1.1 !important;
    padding: 2px 5px !important;
    font-size: 11px !important; 
    font-weight: 700 !important;
    color: #333 !important;
    background: rgba(255, 255, 255, 0.6) !important; 
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    box-sizing: border-box;
}

.map-toolbar-wrap { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); 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: 1000; }
.toolbar-btn { border: none; background: none; height: 34px; width: 34px; margin: 0 2px; cursor: pointer; color: #444; font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s ease; }
.toolbar-btn:hover { background-color: #2E9E6B !important; color: #ffffff !important; }
.toolbar-divider { width: 1px; height: 18px; background: rgba(0, 0, 0, 0.12); margin: 0 4px; }

[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); transition: none; }
[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; transition: none; }
[data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; visibility: visible; }

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

.dropup-menu::after { content: ''; position: absolute; bottom: -15px; left: 0; width: 100%; height: 15px; background: transparent; }
.dropup-menu { display: none; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background: white; border: 1px solid rgba(46, 158, 107, 0.3); border-radius: 10px; box-shadow: 0 -4px 16px rgba(0,0,0,0.15); min-width: 140px; z-index: 1002; padding: 6px 0; }
.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 i { width: 16px; text-align: center; color: #777; font-size: 14px; }
.dropup-menu button:hover { background: #EEFAF3; color: #2E9E6B; }

/* 구간 정보 오버레이(#save-interval-stats-overlay)·.save-interval-* CSS는 제목박스+써머리 이전으로 폐지·제거 v202607081210 */
.highlight-blue { color: #2E9E6B; }

.save-bottom-data-panel { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #e0e0e0; display: flex; flex-direction: column; width: 100%; margin-top: 15px; flex-shrink: 0; }
.split-panel-container { display: flex; width: 100%; }
.split-panel-col { flex: 1; display: flex; flex-direction: column; width: 50%; min-width: 0; }
.split-panel-col:first-child { border-right: 1px solid #e0e0e0; }
.split-panel-header { padding: 15px 0; text-align: center; font-size: 15px; font-weight: 800; color: #2E9E6B; background: #f9f9f9; border-bottom: 1px solid #e0e0e0; }

.split-panel-content { padding: 15px; }

.save-data-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.waypoint-item { display: flex; align-items: center; padding: 10px 8px; min-height: 40px; border-radius: 8px; cursor: pointer; transition: background 0.2s; box-sizing: border-box; }
.waypoint-item:hover, .waypoint-item.active { background: #EEFAF3; color: #2E9E6B;}

.wp-icon-wrapper { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #555; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: all 0.2s ease; box-sizing: border-box;}
.waypoint-item:hover .wp-icon-wrapper, .waypoint-item.active .wp-icon-wrapper { border-color: #2E9E6B; color: #2E9E6B; box-shadow: 0 2px 6px rgba(46, 158, 107, 0.3); }

.seg-icon-wrapper { width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; overflow: hidden; }
.segment-flag-marker { background: transparent !important; border: none !important; }

.waypoint-marker { background: transparent !important; border: none !important; }
.waypoint-marker-inner { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background-color: white; border: 2px solid #555; border-radius: 15px; padding: 4px 10px; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); white-space: nowrap; }
.waypoint-marker-inner::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-width: 10px 8px 0; border-style: solid; border-color: #555 transparent transparent transparent; }
.waypoint-marker-inner i { font-size: 13px; color: #555; }
.waypoint-marker-inner .wp-name { font-size: 12px; font-weight: 700; color: #333; width: auto !important; }
#save-map-wrap.wp-hide-text .waypoint-marker .wp-name,
#save-map-wrap.wp-hide-all .waypoint-marker .wp-name { display: none; }
#save-map-wrap.wp-hide-text .waypoint-marker-inner,
#save-map-wrap.wp-hide-all .waypoint-marker-inner { padding: 4px 6px; gap: 0; }

.wp-content { margin-left: 12px; flex: 1; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; overflow: hidden; }
/* 시작: 세그먼트 이름 줄임표 처리 어떤 기능을 하는 요소인지 짧은설명: 이름이 길어져도 거리/고도 정보가 밀리지 않도록 wp-name에 ellipsis 적용, wp-details는 shrink 방지 */
.wp-name { font-weight: 600; font-size: 14px; color: #333; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-details { font-size: 12px; color: #666; margin-left: 8px; font-weight: normal; text-align: right; flex-shrink: 0; }
/* 끝: 세그먼트 이름 줄임표 처리 */
.save-data-empty { text-align: center; padding: 40px 0; color: #888; font-size: 14px; }

.ruler-cursor { cursor: crosshair; }
.chart-selection-box { position: absolute; background: rgba(46, 158, 107, 0.15); border: 1px solid rgba(46, 158, 107, 0.4); pointer-events: none; z-index: 5; display: none; }
.chart-scrollbar-container { position: absolute; bottom: 5px; left: 30px; right: 30px; height: 10px; background: rgba(0,0,0,0.05); border-radius: 5px; display: none; z-index: 10; border: 1px solid rgba(0,0,0,0.1); }
.chart-scrollbar-thumb { position: absolute; height: 100%; background: #2E9E6B; border-radius: 5px; cursor: pointer; min-width: 160px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.chart-zoom-reset-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: #555; border: none; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.4); z-index: 15; color: #fff; font-size: 10px; transition: all 0.2s ease; }

/* 시작: 전체화면 인덱스형 플로팅 S/W 패널 (v202606111527) — 기존 탭 패널을 대체, 인덱스 side-panel.css 동일 스펙 */
.ws-floating-btn-group { position: absolute; top: 20px; right: 20px; bottom: 20px; display: none; flex-direction: column; gap: 10px; z-index: 2000; align-items: flex-end; pointer-events: none; }
.ws-floating-btn-group .floating-action-btns, .ws-floating-btn-group .side-panel-base { pointer-events: auto; }
.ws-floating-btn-group .floating-action-btns { display: flex; flex-direction: row; gap: 10px; justify-content: flex-end; width: 100%; flex-shrink: 0; }
/* 시작: 세그먼트/웨이포인트/마커숨김 통합 버튼 박스(새작업 그룹 동형) 짧은설명: 흰 박스 하나에 세 항목을 구분선으로 나눠 상시 표시. 데이터 없으면 아이콘·폰트 회색 비활성(반투명 아님). 아이콘=세그(strava.svg 이미지)·웨이포인트(깃발)·마커숨김(눈) */
.sw-uni-box { display: flex; align-items: center; height: 38px; background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); overflow: hidden; box-sizing: border-box; }
.sw-uni-div { width: 1px; height: 20px; background: rgba(0,0,0,0.12); flex-shrink: 0; }
.sw-uni-item { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 16px; border: none; background: transparent; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 13px; color: #bbb; cursor: not-allowed; white-space: nowrap; box-sizing: border-box; transition: background 0.2s ease, color 0.2s ease; }
.sw-uni-ico-img { width: 15px; height: 15px; object-fit: contain; filter: grayscale(1); transition: filter 0.2s ease; }
.sw-uni-item.has-segments { color: #FC4C02; cursor: pointer; }
.sw-uni-item.has-segments .sw-uni-ico-img { filter: none; }
.sw-uni-item.has-waypoints { color: #2E9E6B; cursor: pointer; }
.sw-uni-item.has-markers { color: #666; cursor: pointer; }
.sw-uni-item.has-segments:hover, .sw-uni-item.has-waypoints:hover, .sw-uni-item.has-markers:hover { background: #EEFAF3; color: #2E9E6B; }
/* 시작: ws 세그먼트 패널 상단 필터(경사 슬라이더 + 인기/모든 토글) — 작은 패널용 콤팩트, 슬라이더 색은 인덱스와 동일 */
.ws-seg-filter { padding: 8px 10px; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 7px; }
.ws-seg-pop { display: flex; gap: 4px; }
.ws-seg-pop-btn { flex: 1; padding: 4px 0; font-size: 11px; font-weight: 600; font-family: 'Pretendard', sans-serif; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #888; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ws-seg-pop-btn.is-selected { background: #2E9E6B; border-color: #2E9E6B; color: #fff; }
.ws-seg-grade { display: flex; align-items: center; gap: 8px; }
.ws-range-slider { position: relative; flex: 1; height: 20px; }
.ws-range-track { position: absolute; width: 100%; height: 4px; background-color: #f0f0f0; top: 8px; border-radius: 2px; }
.ws-range-zero-tick { position: absolute; left: 33.33%; top: 4px; width: 2px; height: 12px; background-color: #bbb; transform: translateX(-50%); z-index: 1; }
.ws-range-fill { position: absolute; height: 4px; background-color: #2E9E6B; top: 8px; border-radius: 2px; z-index: 1; }
.ws-range-slider input[type="range"] { position: absolute; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; top: 0; margin: 0; height: 20px; z-index: 2; }
.ws-range-slider input[type="range"]:focus { outline: none; }
.ws-range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 13px; border-radius: 3px; background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.15); pointer-events: auto; cursor: pointer; margin-top: 2px; }
.ws-range-slider input[type="range"]::-moz-range-thumb { height: 16px; width: 13px; border-radius: 3px; background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.15); pointer-events: auto; cursor: pointer; }
.ws-seg-grade-badge { flex-shrink: 0; background: #2E9E6B; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; min-width: 40px; text-align: center; white-space: nowrap; }
/* 끝: ws 세그먼트 패널 상단 필터 */
/* 끝: 통합 버튼 박스 */
.side-panel-base { width: 290px; max-height: calc(100% - 100px); background: rgba(255, 255, 255, 0.95); 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); backdrop-filter: blur(5px); }
#ws-segment-side-panel.expanded, #ws-waypoint-side-panel.expanded { display: flex !important; }
.side-panel-header { padding: 15px; border-bottom: 1px solid #e0e0e0; background: rgba(249, 249, 249, 0.8); font-size: 15px; font-weight: 800; color: #2E9E6B; text-align: center; display: flex; justify-content: center; align-items: center; gap: 3px; flex-shrink: 0; }
.side-panel-content { padding: 15px; overflow-y: auto; flex: 1; }
.side-panel-content::-webkit-scrollbar { width: 6px; }
.side-panel-content::-webkit-scrollbar-track { background: transparent; }
.side-panel-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
.side-panel-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
.side-panel-footer { border-top: 1px solid #e0e0e0; background: rgba(249, 249, 249, 0.95); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; min-height: 52px; box-sizing: border-box; }
.wp-btn-action { flex: 1; padding: 6px 0; border: 1px solid #ddd; background: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; color: #555; cursor: pointer; transition: all 0.2s ease; }
.wp-btn-action:hover { background: #EEFAF3; color: #2E9E6B; border-color: #2E9E6B; }
.side-footer-close-btn { background: transparent; border: none; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; transition: all 0.2s ease; font-family: inherit; margin-left: auto; }
.side-footer-close-btn:hover { background: #f0f0f0; color: #333; }
#save-map-wrap.wp-force-hide .waypoint-marker { display: none !important; }
#save-map-wrap.seg-force-hide .segment-flag-marker { display: none !important; }
/* 세그먼트 마커는 전체화면 안에서도 줌아웃(≤11) 시엔 함께 숨김(모바일 동형, 웨이포인트는 상시 표시) */
#save-map-wrap.wp-hide-all .segment-flag-marker { display: none !important; }
/* 전체화면이 아닐 때는 세그먼트/웨이포인트 아이콘 숨김(전체화면 body.is-fullscreen 에서만 표시) */
body:not(.is-fullscreen) #save-map-wrap .segment-flag-marker,
body:not(.is-fullscreen) #save-map-wrap .waypoint-marker { display: none !important; }

/* 시작: 워크스페이스 세그먼트 전용 UI(좌하단 제목 박스 + 푸터 써머리 치환) — 인덱스 footer-stats.js UI 미러(폰트·색 동일) */
#ws-seg-title-box { position: absolute; left: 15px; bottom: 15px; z-index: 1000; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 12px; background: #ffffff; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
body.is-fullscreen #ws-seg-title-box { bottom: calc(var(--ws-overlay-h, 92px) + 12px); z-index: 1200; }
#ws-seg-title-box .seg-title-header { display: flex; align-items: center; gap: 8px; }
#ws-seg-title-box .seg-title-text { flex: 1; font-size: 14px; font-weight: 700; color: #222222; line-height: 1.3; word-break: keep-all; }
#ws-seg-title-box .seg-title-strava-btn { flex-shrink: 0; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; background: #f4f4f4; border-radius: 8px; color: #FC4C02; font-size: 11px; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; }
#ws-seg-title-box .seg-title-strava-btn:hover { background: #e8e8e8; }
#ws-seg-title-box .seg-title-btn { width: 28px; height: 28px; border: none; background: #f4f4f4; color: #555555; border-radius: 8px; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
#ws-seg-title-box .seg-title-close { background: #2E9E6B; color: #fff; }
#ws-seg-title-box .seg-title-close:hover { background: #24835A; }
#ws-seg-title-box .seg-title-block { background: #fff1f0; color: #cf1322; }
#ws-seg-title-box .seg-title-block:hover { background: #ffe0de; }

.stats-row-wrap.seg-summary-on > .stat-col { display: none !important; }
#ws-seg-summary { display: contents; }
.ws-seg-stat-box { display: flex; flex-direction: column; align-items: flex-start; min-width: 85px; flex-shrink: 0; }
.ws-seg-stat-box .ws-seg-lbl { font-size: 12px; color: #888; margin-bottom: 2px; font-weight: 600; }
.ws-seg-stat-box .ws-seg-val { font-size: 26px; font-weight: 600; color: #333; font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; white-space: nowrap; line-height: 1.1; margin-top: 2px; }
.ws-seg-stat-box .ws-seg-val .unit { color: #888; font-size: 0.5em; font-weight: 500; margin-left: 2px; }
.ws-seg-stat-box .ws-seg-val.seg-val-green { color: #FC4C02; }
.ws-seg-stat-divider { width: 1px; height: 35px; background: #eee; margin: 0 20px; flex-shrink: 0; }
/* 상세전용(detail-only) 항목: 미니(접힘) 숨김, 확장/전체화면 표시 — 워크스페이스 detail-only 토글과 동일 */
.stats-row-wrap.seg-summary-on .ws-seg-summary-item.detail-only-stat { display: none; }
.save-preview-card.expanded-mode .stats-row-wrap.seg-summary-on .ws-seg-summary-item.detail-only-stat,
.save-preview-card:fullscreen .stats-row-wrap.seg-summary-on .ws-seg-summary-item.detail-only-stat,
body.is-fullscreen .stats-row-wrap.seg-summary-on .ws-seg-summary-item.detail-only-stat { display: flex; }
/* 끝: 워크스페이스 세그먼트 전용 UI */
/* 끝: 전체화면 인덱스형 플로팅 S/W 패널 */

/* 시작: 전체화면 고도프로필 토글 + 미니 고도그래프 (v202606111547) — 전체화면에서만 노출, 닫으면 통계줄에 미니 그래프 */
.ws-mini-chart-wrapper { display: none; }
.ws-footer-action-btn { display: none; }
body.is-fullscreen .ws-footer-action-btn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; background: #2E9E6B; color: #fff; border: none; border-radius: 22px; padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.2s; }
body.is-fullscreen .ws-footer-action-btn:hover { background: #24835A; }
.ws-mini-chart-wrapper canvas { display: block; width: 100% !important; height: 100% !important; }
/* 고도그래프 레이어 슬라이드(A안): 접힘을 display:none 대신 height:0으로 애니메이션. 오버레이 높이가 매 프레임 변해 --ws-overlay-h(ResizeObserver)가 연속 갱신 → S/W 패널·플로팅 그룹도 그래프와 한 몸으로 슬라이드 v202607081643 */
body.is-fullscreen .chart-area-wrap { transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; }
/* border-box라 height:0만으론 세로 padding(25px)이 남아 그래프 영역이 살짝 보임 → 세로 padding도 0으로 접어 화면 바닥에 딱 맞춤 v202607081710 */
body.is-fullscreen.ws-chart-collapsed .chart-area-wrap { height: 0; padding-top: 0; padding-bottom: 0; }
/* 끝: 전체화면 고도프로필 토글 + 미니 고도그래프 */

/* 시작: 전체화면 지도 overlay (v202606111615) — 지도를 카드 전체로 깔고 통계+고도그래프를 하단 overlay로 덮음 → 프로필 토글 시 지도 크기 불변(타일 재로드 없음, 인덱스 푸터 overlay와 동일 원리) */
body.is-fullscreen #ws-preview-card { position: relative; }
body.is-fullscreen #save-map-wrap { position: absolute; inset: 0; height: auto; }
body.is-fullscreen .ws-bottom-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; flex-direction: column; }
/* 스케일·플로팅 패널·메뉴바를 하단 overlay 실제 높이(--ws-overlay-h, JS가 측정·주입) 바로 위에 배치 → 고정값 없이 열림/닫힘 모두 정확히 가림 방지 */
body.is-fullscreen .map-info-overlay { z-index: 1200; bottom: calc(var(--ws-overlay-h, 92px) + 12px); }
body.is-fullscreen .ws-floating-btn-group { bottom: calc(var(--ws-overlay-h, 92px) + 12px); }
body.is-fullscreen .map-toolbar-wrap { z-index: 1200; bottom: calc(var(--ws-overlay-h, 92px) + 12px); }
/* 시작: 전체화면 ESC 안내 박스 어떤 기능을 하는 요소인지 짧은설명: MISC-01b의 검은 반투명·라운드만 차용(흰 글자), 폰트는 TYPO-04(15px/400), 박스는 폰트에 맞춰 padding으로 자동 크기. 전체화면 동안 상단 중앙 고정 */
#ws-fs-esc-notice { display: none; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1250; background: rgba(60, 64, 67, 0.95); color: #fff; font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 400; padding: 10px 20px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; }
body.is-fullscreen #ws-fs-esc-notice { display: block; }
/* 끝: 전체화면 ESC 안내 박스 */
/* 끝: 전체화면 지도 overlay */
.fs-save-data-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }

.fs-waypoint-item { display: flex; align-items: center; justify-content: flex-start; width: 100%; background: transparent; border: none; padding: 10px 8px; min-height: 40px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; color: #444; flex-shrink: 0; }
.fs-waypoint-item:hover, .fs-waypoint-item.active { background: #EEFAF3; color: #2E9E6B; }
.fs-wp-icon-wrapper { width: 26px; height: 26px; border-radius: 50%; background-color: white; border: 2px solid #555; box-shadow: 0 2px 4px rgba(0,0,0,0.15); display: flex; justify-content: center; align-items: center; font-size: 13px; flex-shrink: 0; transition: all 0.2s ease; color: #555; box-sizing: border-box; }
.fs-waypoint-item:hover .fs-wp-icon-wrapper, .fs-waypoint-item.active .fs-wp-icon-wrapper { border-color: #2E9E6B; color: #2E9E6B; box-shadow: 0 2px 6px rgba(46, 158, 107, 0.3); }
.fs-wp-content { display: flex; align-items: center; margin-left: 12px; flex-grow: 1; white-space: nowrap; overflow: hidden; }
/* 시작: 전체화면 세그먼트 이름 줄임표 처리 어떤 기능을 하는 요소인지 짧은설명: 전체화면 패널에서도 동일하게 이름 ellipsis 적용 및 거리/고도 고정 */
.fs-wp-name { font-size: 14px; font-weight: 600; text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-wp-details { font-size: 12px; color: #666; margin-left: 8px; font-weight: normal; text-align: right; flex-shrink: 0; }
/* 끝: 전체화면 세그먼트 이름 줄임표 처리 */
.fs-save-data-empty { text-align: center; padding: 40px 0; color: #888; font-size: 14px; }

.start-point-icon { box-sizing: border-box !important; background-color: #67CF67 !important; border: 2.5px solid #ffffff !important; border-radius: 50% !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; width: 14px !important; height: 14px !important; }
.end-point-icon { box-sizing: border-box !important; background-color: #ffffff !important; border: 2.5px solid #ffffff !important; border-radius: 50% !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; width: 14px !important; height: 14px !important; overflow: hidden !important; background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000) !important; background-size: 4px 4px !important; background-position: 0 0, 2px 2px !important; }
.hover-guide-point { background: transparent !important; border: none !important; }
.hover-guide-point-inner { width: 16px; height: 16px; background-color: white; border: 3.5px solid #2E9E6B; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); box-sizing: border-box; }

.detail-only-stat { display: none; }
.full-width-divider { border: none; border-top: 1px solid #e0e0e0; margin: 100px 0 0 0; width: 100%; }
.footer-copyright-wrap { text-align: center; margin-top: 100px; margin-bottom: 50px; }

/* 시작: 파일 저장 및 외부 서비스 내보내기 섹션 스타일 어떤 기능을 하는 요소인지 짧은설명: 디테일 페이지의 파일 저장/외부 전송 버튼 그룹 레이아웃 및 각 서비스 아이콘 색상 정의 */
.detail-export-box {
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
}
.detail-file-save-section { margin-top: 0; margin-bottom: 12px; }
.detail-export-ext-section { margin-top: 0; margin-bottom: 0; border-top: 1px solid #eeeeee; padding-top: 12px; }
.detail-export-notice { font-size: 13px; color: #aaa; margin: 6px 0 0 0; }

.detail-section-label {
    font-size: 16px;
    font-weight: 800;
    color: #555;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.detail-section-label i { color: #2E9E6B; font-size: 18px; }

.detail-service-btn-group { display: flex; flex-wrap: wrap; gap: 8px; }

.detail-service-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #dadce0;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.detail-service-btn:hover { background: #EEFAF3; border-color: #2E9E6B; color: #2E9E6B; }
/* 시작: GPX 다운로드 primary 버튼(BTN-01 색·hover만 차용) 짧은설명: 기존 detail-service-btn 크기·모양 유지하고 배경/글자/hover 색만 BTN-01 그린으로 */
.detail-service-btn--primary { background: #2E9E6B; border-color: #2E9E6B; color: #fff; }
.detail-service-btn--primary:hover { background: #24835A; border-color: #24835A; color: #fff; }
/* 끝: GPX 다운로드 primary 버튼 */
.detail-service-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.detail-service-btn:disabled:hover { background: #fff; border-color: #dadce0; color: #555; }

.detail-btn-strava i { color: #FC4C02; }
.detail-btn-wahoo i { color: #e8222c; }
.detail-btn-garmin i { color: #007cc3; }
/* 끝: 파일 저장 및 외부 서비스 내보내기 섹션 스타일 */

/* 시작: 내보내기 성공 알림 모달 스타일 어떤 기능을 하는 요소인지 짧은설명: 파일 저장 또는 외부 서비스 전송 완료 시 표시되는 팝업 레이아웃 및 버튼 스타일 */
.detail-success-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); justify-content: center; align-items: center;
    backdrop-filter: blur(2px);
}
.detail-success-modal-content {
    background: #fff; width: 90%; max-width: 350px;
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden;
}
.detail-success-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px; border-bottom: 1px solid #eaeaea;
}
.detail-success-modal-header h2 {
    margin: 0; font-size: 16px; font-weight: 700; color: #333;
    display: flex; align-items: center;
}
.detail-success-modal-close { background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 0; }
.detail-success-modal-close:hover { color: #2E9E6B; }
.detail-success-modal-body { padding: 30px 20px; text-align: center; }
.detail-success-modal-body p { font-size: 15px; color: #333; font-weight: 600; margin: 0; word-break: keep-all; }
.detail-success-modal-footer { padding: 15px 20px; border-top: 1px solid #eaeaea; display: flex; justify-content: center; }
.detail-success-confirm-btn {
    width: 100%; padding: 12px; background: #2E9E6B; border: none;
    border-radius: 22px; color: #fff; font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: background 0.2s;
}
.detail-success-confirm-btn:hover { background: #24835A; }
/* 끝: 내보내기 성공 알림 모달 스타일 */

/* 시작: 저장/내보내기 안내 도움말(BTN-16 + 모달) 스타일 */
.detail-card-box--export { position: relative; }
/* BTN-16 Help Circle (디자인시스템 스펙) */
.btn-16 {
    width: 12px; height: 12px; padding: 0;
    border: 1px solid transparent; border-radius: 50%;
    background: #cbcbcb; color: #ffffff;
    font-size: 10px; font-weight: normal; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-16:hover { border-color: #24835A; background: #24835A; color: #fff; }
.detail-help-btn { position: absolute; top: 14px; right: 14px; }

.detail-guide-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); justify-content: center; align-items: center;
    backdrop-filter: blur(2px);
}
.detail-guide-modal-content {
    background: #fff; width: 90%; max-width: 560px; max-height: 85vh;
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden; display: flex; flex-direction: column;
}
.detail-guide-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px; border-bottom: 1px solid #eaeaea; flex-shrink: 0;
}
.detail-guide-modal-header h2 {
    margin: 0; font-size: 16px; font-weight: 700; color: #333;
    display: flex; align-items: center;
}
.detail-guide-modal-close { background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 0; }
.detail-guide-modal-close:hover { color: #2E9E6B; }
.detail-guide-modal-body { padding: 22px 24px; overflow-y: auto; }
.detail-guide-section + .detail-guide-section { margin-top: 37px; padding-top: 20px; border-top: 1px solid #eee; }
.detail-guide-section h3 {
    margin: 0 0 8px 0; font-size: 15px; font-weight: 700; color: #333;
    display: flex; align-items: center;
}
.detail-guide-section h3 i { color: #2E9E6B; font-size: 16px; margin-right: 8px; }
.detail-guide-section p { margin: 0 0 23px 0; font-size: 14px; line-height: 1.7; color: #555; word-break: keep-all; }
.detail-guide-section p:last-child { margin-bottom: 0; }
.strava-icon { color: #FC4C02; margin-right: 6px; }
.wahoo-icon { color: #000000; margin-right: 6px; }
.garmin-icon { color: #007CC3; margin-right: 6px; }
.detail-guide-modal-footer { padding: 15px 20px; border-top: 1px solid #eaeaea; display: flex; justify-content: flex-end; flex-shrink: 0; }
.detail-guide-close-btn {
    padding: 10px 28px; background: #2E9E6B; border: none;
    border-radius: 22px; color: #fff; font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: background 0.2s;
}
.detail-guide-close-btn:hover { background: #24835A; }
/* 끝: 저장/내보내기 안내 도움말(BTN-16 + 모달) 스타일 */

/* 작성자 액션 드롭다운 */
.author-action-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 2000;
    min-width: 130px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
}

.author-action-item {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    transition: background 0.15s, color 0.15s;
}

.author-action-item:hover { background: #EEFAF3; color: #2E9E6B; }

.author-action-item i {
    color: #999;
    font-size: 13px;
    width: 14px;
    text-align: center;
    transition: color 0.15s;
}

/* 본문 인라인 이미지(설명 [[img#id]] 토큰, 게시판 .board-content-img 미러) */
.course-content-img { display: block; max-width: 100%; border-radius: 10px; margin: 10px 0; cursor: pointer; }

/* 코스 이미지 갤러리 */
.course-images-group { padding-top: 0; }

.course-image-gallery { display: flex; flex-direction: column; gap: 10px; }

.course-gallery-item {
    width: 100%; border-radius: 10px; overflow: hidden;
    cursor: pointer; border: 1px solid #e8e8e8; transition: box-shadow 0.2s;
}
.course-gallery-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.course-gallery-item img { width: 100%; display: block; object-fit: cover; }

/* 라이트박스 */
#lightbox-overlay {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.88); align-items: center; justify-content: center;
}
#lightbox-overlay.active { display: flex; }

#lightbox-content {
    position: relative; display: flex; align-items: center;
    justify-content: center;
}

#lightbox-img { max-width: 90vw; max-height: 90vh; border-radius: 6px; display: block; object-fit: contain; }

#lightbox-close {
    position: fixed; top: 20px; right: 24px;
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    font-size: 20px; cursor: pointer; width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
#lightbox-close:hover { background: rgba(255,255,255,0.32); }

#lightbox-prev, #lightbox-next {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    font-size: 18px; cursor: pointer; width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
#lightbox-prev { left: 24px; }
#lightbox-next { right: 24px; }
#lightbox-prev:hover, #lightbox-next:hover { background: rgba(255,255,255,0.32); }

#lightbox-counter {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
}

.author-action-item:hover i { color: #2E9E6B; }
/* 마일스톤(지도 거리 마커) — 엔진 통합으로 detail에도 표시 v202606102235 */
.milestone-major, .milestone-minor {
    background: transparent !important;
    border: none !important;
}
.milestone-major-inner {
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid;
    border-radius: 12px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    white-space: nowrap;
    text-align: center;
    line-height: 14px;
}
.milestone-minor-inner {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: white;
    border: 2px solid;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    box-sizing: border-box;
}