/* 202607311121 */
/* 그리기 페이지(/draw/) 전용 상단 헤더: 공통헤더와 동일 배경/높이. PC 전용.
   지도 위 오버레이(fixed)로 얹는다. 항상 그 자리에 있다
   — 패널 숨김/표시(눈 버튼·Alt+H)는 2026-07-28 폐지, 세그먼트·구간 선택 시 슬라이드아웃도 2026-07-30 폐지되어
   헤더가 사라지는 경로 자체가 없어졌다.
   ※ 헤더 높이를 바꾸려면 아래 .draw-page-header height 와 --draw-header-h 기본값을 함께 바꾼다. */
.draw-page { --draw-header-h: 64px; }

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

.draw-page-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1440px;
    height: 64px; /* 물리 높이 고정(슬라이드 위해 상수). --draw-header-h 기본값과 동일하게 유지 */
    background-color: #FFFCF7;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
    z-index: 1050;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 로고: 공통헤더(.gpx-header-logo-*)와 동일 스타일을 자체 정의. 1400px 중앙정렬을 쓰지 않고
   브라우저 좌측 끝에 붙인다(padding-left로 여백만).
   축소 금지·줄바꿈 금지 — 좁은 폭에서 flex가 로고를 세로로 깨뜨리던 문제 차단 v202607302305 */
.draw-header-logo { flex-shrink: 0; }
.draw-header-logo-link {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    gap: 8px;
    white-space: nowrap;
}
.draw-header-logo-main,
.draw-header-logo-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #444;
    letter-spacing: 0.5px;
}

/* ===== 로고 우측 장소 검색 폼: 공통헤더 코스검색(gpx-header-search-*) 스타일 준용.
   골드 알약 박스 안에 [범위 드롭다운(전국 장소/현 지도 내 장소)] · 구분선 · 입력 · 돋보기. ===== */
.draw-header-search {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin-left: 24px;
}
.draw-header-search-box {
    display: flex;
    align-items: center;
    border: 1px solid #E5CFA1;
    background-color: #ffffff;
    border-radius: 20px;
    height: 38px;
    box-sizing: border-box;
    width: 340px;
    padding: 0 6px 0 16px;
    transition: border-color 0.4s ease;
}
.draw-header-search-box:hover,
.draw-header-search-box:focus-within { border-color: #DEA535; }
.draw-header-search-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555555;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.draw-header-search-arrow { font-size: 12px; color: #555555; }
.draw-header-search-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: -16px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    z-index: 1200;
    min-width: 140px;
}
.draw-header-search-menu.show { display: block; }
.draw-header-search-item {
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.draw-header-search-item:hover { background-color: #f5f5f5; }
.draw-header-search-item.active { color: #555; font-weight: 700; }
.draw-header-search-divider {
    width: 1px;
    height: 14px;
    background-color: #dddddd;
    margin: 0 10px;
    flex-shrink: 0;
}
.draw-header-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333333;
    background: transparent;
}
.draw-header-search-input::placeholder { color: #9aa0a6; }
.draw-header-search-btn {
    width: 32px;
    height: 38px;
    background: none;
    border: none;
    padding: 0;
    color: #444444;
    font-size: 16px;
    font-weight: 900;
    -webkit-text-stroke: 1px currentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.draw-header-search-box:focus-within .draw-header-search-btn { color: #DEA535; }

/* 장소 검색 결과 패널: 좌측 카드(.LEFT-body)와 같은 라운드 박스 형태로 좌측에 표시.
   상단은 헤더 아래 50px 고정(헤더 슬라이드 시 --draw-header-h 연동), 하단은 footer-stats.js
   syncSearchPanelPos가 하단 영역(footer 닫힘 85 / 고도그래프 열림 --expanded-height) 위 50px로
   맞춰, 고도그래프가 펼쳐지면 패널이 그만큼 줄어든다. overflow:hidden으로 라운드 모서리를 유지하고
   스크롤바는 내부 리스트(.LEFT-search-list)에만 생기게 해 헤더(검색 취소)·라운드에 겹치지 않게 한다. */
body.draw-page .draw-search-panel {
    position: fixed;
    top: calc(var(--draw-header-h) + 50px);
    bottom: 135px; /* 기본(footer 닫힘 85 + 50). JS가 개폐/드래그에 맞춰 갱신 */
    left: 16px;
    right: auto;
    width: 400px; /* 좌측 카드(.LEFT-body)와 동일 폭 유지 300→400 v202607231500 */
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    z-index: 1200;
    transition: top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 표시(.show)일 때만 세로 flex로 펼침 - 결과 없을 땐 기본 규칙의 display:none 유지 */
body.draw-page .draw-search-panel.show {
    display: flex;
    flex-direction: column;
}
/* 헤더(검색 취소)는 상단 고정, 리스트만 스크롤 */
body.draw-page .draw-search-panel .LEFT-search-head { flex-shrink: 0; }
body.draw-page .draw-search-panel .LEFT-search-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 패널 배경 COL-B7(#FFFCF7), 헤더 띠 배경 #F2EFEB.
   헤더: 좌측 '• 검색결과' 타이틀(기본폰트 20px) / 우측 '검색 취소 ✕' 버튼(기본폰트 15px, hover는 HOVER-01만) */
body.draw-page .draw-search-panel { background: #FFFCF7; }
body.draw-page .draw-search-panel .LEFT-search-head {
    justify-content: space-between;
    align-items: center;
    background: #F2EFEB;
    padding: 8px 14px;
}
body.draw-page .draw-search-panel .LEFT-search-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #444;
}
body.draw-page .draw-search-panel .LEFT-search-title::before {
    content: "•";
    margin-right: 6px;
}
body.draw-page .draw-search-panel .LEFT-search-cancel {
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #444;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}
/* 헤더 띠(#F2EFEB)와 구분되게 hover 배경을 한 톤 짙은 베이지(#E3DED7)로 */
body.draw-page .draw-search-panel .LEFT-search-cancel:hover {
    background: #E3DED7;
    color: #444;
}

/* 헤더가 지도 위 오버레이라, 상단에 붙는 지도 컨트롤을 헤더 높이(--draw-header-h)만큼 내려 가리지
   않게 한다.
   (좌측 카드·액션바·닫기탭 오프셋은 left-panel.css의 draw 전용 규칙에서 함께 처리) */
body.draw-page #kakao-launcher {
    /* 장소 카테고리 버튼: 헤더 아래 20px 간격 v202607231205 */
    top: calc(20px + var(--draw-header-h));
    transition: top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 세그먼트/구간 선택 정보를 볼 때(body.seg-info-active) 헤더·장소 카테고리 버튼·우측 패널을 닫던 동작은
   2026-07-30 폐지 — 선택 중에도 모두 그대로 유지한다. v202607302059 */
/* 좌측 패널은 세그먼트 상세를 보는 동안 숨김(LEFT-closed 상태는 유지 → 닫기 시 원상 복귀).
   단 레이어 타일·지도 선택 팝업은 같은 컨테이너의 자식이지만 지도 위 컨트롤이므로 계속 노출한다
   → 컨테이너 대신 카드 본문·닫기 탭만 숨긴다 v202607231344 */
body.draw-page.seg-info-active #left-panel-container .LEFT-body,
body.draw-page.seg-info-active #left-panel-container .LEFT-toggle-btn {
    display: none !important;
}
body.draw-page .floating-btn-group {
    /* 우측 패널(세그먼트·웨이포인트·코스 레이어): 헤더 아래 60px v202607231205 */
    top: calc(60px + var(--draw-header-h));
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ===== 헤더 툴바: 좌측 액션바에서 이전한 컨트롤(SEGMENTS 토글·불러오기·코스저장·코스반전·캡처).
   모두 테두리 없는 아이콘+텍스트. 로고 우측에 우측 정렬로 배치. ===== */
.draw-header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    margin-left: auto; /* 우측 정렬(카카오 그룹 바로 왼쪽) */
}

/* SEGMENTS 앞 홈 메뉴 + 세로 구분 바 */
.draw-header-home {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    font-family: 'Pretendard', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #444;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.2s ease;
}
.draw-header-home:hover { background: #F2EFEB; } /* HOVER-01: 글자색 변화 없음 */
/* 시작: 햄버거 메뉴 드롭다운 v202607311121 짧은설명: 홈 자리의 햄버거 버튼 + 지도레이어 드롭다운(.kakao-layer-menu)과 동형의 흰 박스 세로 메뉴.
   항목은 기본폰트 17px·볼드 없음·블릿, 호버는 헤더 메뉴와 동일(HOVER-01) */
.draw-header-menu-group { position: relative; }
.draw-header-menu-btn {
    border: none;
    background: none;
    cursor: pointer;
}
.draw-header-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    white-space: nowrap;
}
.draw-header-menu-group.open .draw-header-menu-dropdown { display: flex; }
.draw-header-menu-item {
    display: block;
    padding: 8px 12px;
    font-family: 'Pretendard', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #444;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.2s ease;
}
.draw-header-menu-item:hover { background: #F2EFEB; }
/* 끝: 햄버거 메뉴 드롭다운 */
/* SEGMENTS는 앞 아이콘이 패딩 없이 붙어 있어, 왼쪽 패딩을 줘 홈 쪽 여백(글자→바 28px)과 시각적 간격을 맞춤 */
.draw-header-tools .segment-floating-group { padding-left: 12px; }
.draw-header-divider {
    width: 2px;
    height: 20px;
    background: #E3DED7;
    flex-shrink: 0;
    margin: 0 12px; /* SEGMENTS 등과의 간격을 다른 메뉴 좌우 여백만큼 확보(툴바 gap 4px 포함 실질 ~16px) */
}

/* 우측 정렬 그룹: 카카오 지도 스위치 + 세그/웨이포인트/마커숨김.
   좌측 툴바와 동일하게 흰 박스·라운드·그림자·구분선을 제거하고 플레인 아이콘+텍스트로 통일 */
.draw-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    margin-left: 16px; /* tools 묶음 바로 우측, 사이 간격 */
    padding-right: 16px;
}

/* 카카오 그룹: CARD-14의 '배경색+테두리만' 차용해 크림 박스로 감쌈(padding·radius는 헤더 fit값).
   안쪽 세그먼트(회색 배경/음각)는 제거해 로고 + 플레인 텍스트 버튼. 폰트 13px. */
.draw-header-right .kakao-launch-box {
    background: #FCF9F5;        /* CARD-14 배경 차용 */
    border: 1px solid #e0e0e0;  /* CARD-14 테두리 차용 */
    box-shadow: none;
    padding: 3px 12px;          /* 헤더(64px) fit */
    border-radius: 10px;        /* fit */
    height: auto;
    gap: 8px;
}
.draw-header-right .kakao-launch-switch {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.draw-header-right .kakao-launch-switch button {
    height: 34px; /* 고정 → 폰트 15px로 키워도 박스 높이(42px) 불변 */
    padding: 0 10px;
    font-size: 15px;
    font-weight: 400;
    color: #555;
    border-radius: 8px;
}
.draw-header-right .kakao-launch-switch button:not(:last-child) { border-right: none; }
/* HOVER-01 복원: hover 시 bg #F2EFEB, 글자색은 비활성 #555 유지 */
.draw-header-right .kakao-launch-switch button:hover { background: #F2EFEB; color: #555; }
/* 로드뷰만 텍스트가 아니라 팩맨 아이콘이다. 기본 폰트색(#444).
   hover에서도 색이 #555로 흐려지지 않게 함께 지정하고, 켜져 있을 때(.active) 활성색은
   아래 .active 규칙이 뒤에 와서 그대로 이긴다.
   Font Awesome 솔리드는 굵기가 900으로 고정된 단일 두께라 font-weight로는 굵어지지 않는다 →
   크기를 18px로 키우고 획을 currentColor로 덧그려 볼드처럼 보이게 한다(색은 상태를 그대로 따라감) v202607281922 */
.draw-header-right .kakao-launch-switch button[data-view="road"],
.draw-header-right .kakao-launch-switch button[data-view="road"]:hover {
    color: #444;
    font-size: 18px;
    -webkit-text-stroke: 0.4px currentColor;
}
/* 선택된 지도는 굵기 600 + 글자색 #FC4C02(장소 카테고리 토글과 같은 활성 색)로 구분한다. 미선택은 #555·400 v202607280118 */
.draw-header-right .kakao-launch-switch button.active { background: transparent; color: #FC4C02; font-weight: 600; }
.draw-header-right .kakao-launch-switch button.active:hover { background: #F2EFEB; color: #FC4C02; }

/* 시작: 로드뷰 팩맨 툴팁 v202607281922 어떤 기능을 하는 요소인지 짧은설명: 레이어 아이콘과 같은 MISC-01 툴팁을 팩맨 버튼에
   달고, 헤더가 화면 맨 위라 아래로 반전한다(화살표도 뒤집음).
   ⚠️팩맨은 '카카오 맵' 툴팁이 걸린 스위치의 자식이라 호버하면 부모 툴팁까지 함께 떠 겹친다 →
   팩맨을 호버하는 동안에만 부모 툴팁을 숨긴다(레이어 아이콘은 스위치 바깥 형제라 이 문제가 없다). */
.draw-header-right .kakao-launch-switch button[data-view="road"][data-tooltip]::before {
    bottom: auto;
    top: calc(100% + 8px);
    /* 팩맨 아이콘을 굵게 보이게 한 획(-webkit-text-stroke)은 상속되어 이 툴팁 글자까지 굵게 만든다
       → 툴팁에서만 되돌려 레이어 아이콘 툴팁과 같은 굵기로 둔다(아이콘 자체의 획은 유지) v202607282346 */
    -webkit-text-stroke: 0;
}
.draw-header-right .kakao-launch-switch button[data-view="road"][data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(60, 64, 67, 0.95) transparent;
}
.draw-header-right .kakao-launch-switch:has(button[data-view="road"]:hover)::before,
.draw-header-right .kakao-launch-switch:has(button[data-view="road"]:hover)::after { visibility: hidden; opacity: 0; }
/* 끝: 로드뷰 팩맨 툴팁 */

/* 시작: 지도 레이어 토글(자전거도로·지형도) v202607281151 어떤 기능을 하는 요소인지 짧은설명: 로드뷰 버튼 뒤 레이어 아이콘과
   그 아래로 펼쳐지는 드롭다운. 드롭다운은 카카오 박스를 기준으로 붙으므로 박스에 position:relative를 준다.
   토글 버튼 모양은 SEGMENTS 드롭다운의 '인기 SGM/모든 SGM'(.ws-seg-pop-btn)과 같은 값을 쓰되 헤더 크기에 맞춰 폰트만 키웠다.
   ⚠️.kakao-launch-box는 워크스페이스 페이지도 함께 쓰는 클래스라 반드시 .draw-header-right 안으로만 한정한다. */
.draw-header-right .kakao-launch-box { position: relative; }
.draw-header-right .kakao-layer-icon {
    border: none;
    background: transparent;
    color: #555;
    font-size: 16px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.draw-header-right .kakao-layer-icon:hover { background: #F2EFEB; } /* HOVER-01 */
/* 자전거도로·지형도 중 하나라도 켜져 있으면 활성색으로 알린다(지도/스카이뷰 활성 표시와 같은 색) */
.draw-header-right .kakao-layer-icon.is-on { color: #FC4C02; }
/* 툴팁은 기본이 위쪽인데(menu-bar.css) 헤더가 화면 맨 위라 브라우저 밖으로 잘린다 →
   카카오 그룹 툴팁과 같이 아래로 반전한다(화살표도 함께 뒤집음) */
.draw-header-right .kakao-layer-icon[data-tooltip]::before {
    bottom: auto;
    top: calc(100% + 8px);
}
.draw-header-right .kakao-layer-icon[data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 2px);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(60, 64, 67, 0.95) transparent;
}

.draw-header-right .kakao-layer-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1;
    gap: 6px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    white-space: nowrap;
}
body.kakao-layer-open .draw-header-right .kakao-layer-menu { display: flex; }
/* 툴팁('카카오 맵'·'로드뷰'·'지도 레이어')은 모두 박스 아래에 뜨므로 드롭다운과 자리가 겹친다 → 열려 있는 동안만 숨긴다 */
body.kakao-layer-open .draw-header-right .kakao-launch-switch[data-tooltip]::before,
body.kakao-layer-open .draw-header-right .kakao-launch-switch[data-tooltip]::after,
body.kakao-layer-open .draw-header-right .kakao-launch-switch button[data-tooltip]::before,
body.kakao-layer-open .draw-header-right .kakao-launch-switch button[data-tooltip]::after,
body.kakao-layer-open .draw-header-right .kakao-layer-icon[data-tooltip]::before,
body.kakao-layer-open .draw-header-right .kakao-layer-icon[data-tooltip]::after { visibility: hidden; opacity: 0; }

.draw-header-right .kakao-layer-btn {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    border: 1px solid #E3DED7;
    border-radius: 6px;
    background: #F2EFEB;
    color: #888;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.draw-header-right .kakao-layer-btn:not(.is-selected):hover { background: #E3DED7; border-color: #D5CEC4; }
.draw-header-right .kakao-layer-btn.is-selected { background: #F1D9A9; border-color: #E5CFA1; color: #555; }
.draw-header-right .kakao-layer-btn.is-selected:hover { background: #EDCC8E; border-color: #DEA535; color: #555; }
/* 끝: 지도 레이어 토글 */

/* 시작: 스카이뷰 하이브리드 드롭다운 v202607302120 짧은설명: 레이어 드롭다운과 동일한 흰 박스. '스카이뷰' 클릭 시 열리고
   지도 이동·확대축소·화면 클릭이면 닫힌다(kakao-context.js). 체크는 세션 동안만 유지 */
.draw-header-right .kakao-sky-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    /* 가로 위치(left)는 열 때 '스카이뷰' 버튼 왼쪽 끝에 맞춰 JS가 지정 v202607302130 */
    z-index: 1;
    gap: 6px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    white-space: nowrap;
}
body.kakao-sky-open .draw-header-right .kakao-sky-menu { display: flex; }
/* 열려 있는 동안 박스 아래 툴팁이 드롭다운과 겹치지 않게 숨김(레이어 메뉴와 동일) */
body.kakao-sky-open .draw-header-right .kakao-launch-switch[data-tooltip]::before,
body.kakao-sky-open .draw-header-right .kakao-launch-switch[data-tooltip]::after,
body.kakao-sky-open .draw-header-right .kakao-launch-switch button[data-tooltip]::before,
body.kakao-sky-open .draw-header-right .kakao-launch-switch button[data-tooltip]::after,
body.kakao-sky-open .draw-header-right .kakao-layer-icon[data-tooltip]::before,
body.kakao-sky-open .draw-header-right .kakao-layer-icon[data-tooltip]::after { visibility: hidden; opacity: 0; }
.draw-header-right .kakao-sky-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Pretendard', sans-serif;
    color: #555;
    cursor: pointer;
    user-select: none;
}
.draw-header-right .kakao-sky-check input { accent-color: #DEA535; cursor: pointer; margin: 0; }
/* 끝: 스카이뷰 하이브리드 드롭다운 */

/* sw-uni: 흰 막대 박스·구분선 제거. 항목은 원래 아이콘+텍스트(데이터 상태별 색·연녹 hover) 유지 */
.draw-header-right .sw-uni-box {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
}
.draw-header-right .sw-uni-div { display: none; }

/* 헤더 버튼/라벨 텍스트: 기본폰트(Pretendard) 17px, 볼드 없음(400). 색은 각자 유지.
   카카오 그룹은 제외(자체 규칙 13px) */
.draw-header-tools .segment-floating-label,
.draw-header-tools .LEFT-action-btn,
.draw-header-right .sw-uni-item {
    font-family: 'Pretendard', sans-serif;
    font-size: 17px;
    font-weight: 400;
}

/* SEGMENTS 토글: 주황 알약 배경 제거 → 테두리 없는 라벨+스위치. 필터는 토글 ON 시 헤더 아래로 드롭 */
.draw-header-tools .segment-floating-group {
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 6px;
}
.draw-header-tools .segment-floating-toggle {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}
.draw-header-tools .segment-floating-label { color: #FC4C02; }
.draw-header-tools .segment-floating-toggle .segment-slider { background-color: rgba(0, 0, 0, 0.15); }
.draw-header-tools .segment-floating-toggle .segment-slider:before { background-color: #FC4C02; }
.draw-header-tools .segment-floating-toggle .segment-switch input:checked + .segment-slider { background-color: #FC4C02; }
.draw-header-tools .segment-floating-toggle .segment-switch input:checked + .segment-slider:before {
    background-color: #ffffff;
    transform: translateX(16px);
}
/* 필터 드롭다운: 그룹이 헤더 높이를 꽉 채우므로 top:100%가 헤더 하단. 좌측 정렬 보정 */
.draw-header-tools .segment-floating-options {
    top: 100%;
    left: 0;
    margin-top: 8px;
}

/* 액션 버튼 묶음: 한 줄 배치. 색 강조(주황/has-route) 제거해 전부 균일한 플레인 아이콘+텍스트 */
.draw-header-tools .LEFT-action-box {
    display: flex;
    align-items: center;
}
.draw-header-tools .LEFT-action-btn--primary,
.draw-header-tools .LEFT-action-btn--save,
.draw-header-tools .LEFT-action-box.has-route .LEFT-action-btn--primary,
.draw-header-tools .LEFT-action-box.has-route .LEFT-action-btn--save {
    background: transparent;
    color: #555;
}
/* HOVER-01: bg #F2EFEB · radius 12px · 글자색 변화 없음(각 버튼 고유색 유지) */
.draw-header-tools .LEFT-action-btn { border-radius: 12px; }
.draw-header-tools .LEFT-action-btn:hover,
.draw-header-tools .LEFT-action-btn--primary:hover,
.draw-header-tools .LEFT-action-btn--save:hover,
.draw-header-tools .LEFT-action-box.has-route .LEFT-action-btn--primary:hover,
.draw-header-tools .LEFT-action-box.has-route .LEFT-action-btn--save:hover {
    background: #F2EFEB;
    color: #555;
}

/* sw-uni: 활성(has-*) 상태에서 HOVER-01 적용 — bg #F2EFEB, 글자색은 각 상태색 유지.
   hover 박스 높이를 액션/카카오 버튼과 동일하게(36px) 맞춰 활성화 시 hover 모양이 같아지게 함 */
.draw-header-right .sw-uni-item { border-radius: 12px; height: 36px; }
.draw-header-right .sw-uni-item.has-segments:hover { background: #F2EFEB; color: #FC4C02; }
.draw-header-right .sw-uni-item.has-waypoints:hover { background: #F2EFEB; color: #2E9E6B; }
.draw-header-right .sw-uni-item.has-markers { color: #444; } /* 활성화 시 색 #444 */
.draw-header-right .sw-uni-item.has-markers:hover { background: #F2EFEB; color: #444; }

/* ===== 시작: 헤더 반응형 축소 v202607302305 짧은설명: 헤더 자연 폭(약 1,859px)이 안 나오는 폭부터 단계적으로
   요소를 줄인다. ①검색폼 340→240 ②세그먼트·웨이포인트·마커숨김 아이콘만 ③캡처 아이콘만 ④코스반전 아이콘만.
   아이콘만 남는 단계에서는 호버 시 카카오 그룹과 같은 아래 반전형 MISC-01 툴팁을 띄운다.
   1440px 미만은 min-width로 고정되어 가로 스크롤이 생긴다(전 페이지 공통). ===== */
/* 툴팁(data-tooltip)은 전역 규칙(menu-bar.css)이 항상 띄우므로, 텍스트가 보이는 넓은 화면에서는 끈다.
   각 단계 미디어쿼리에서 해당 요소만 다시 켠다 */
.draw-header-right .sw-uni-item[data-tooltip]::before,
.draw-header-right .sw-uni-item[data-tooltip]::after,
.draw-header-tools .LEFT-action-btn[data-tooltip]::before,
.draw-header-tools .LEFT-action-btn[data-tooltip]::after { display: none; }

/* ① 검색폼 100px 축소 */
@media (max-width: 1859px) {
    .draw-header-search-box { width: 240px; }
}

/* ② 세그먼트·웨이포인트·마커숨김: 텍스트 숨김 + 아래 툴팁 */
@media (max-width: 1759px) {
    .draw-header-right .sw-uni-item span { display: none; }
    .draw-header-right .sw-uni-item[data-tooltip]::before {
        display: block;
        bottom: auto;
        top: calc(100% + 8px);
    }
    .draw-header-right .sw-uni-item[data-tooltip]::after {
        display: block;
        bottom: auto;
        top: calc(100% + 2px);
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent rgba(60, 64, 67, 0.95) transparent;
    }
}

/* ③ 캡처: 텍스트 숨김 + 아래 툴팁 */
@media (max-width: 1539px) {
    .draw-header-tools .LEFT-action-btn[data-tooltip="캡처"] span { display: none; }
    .draw-header-tools .LEFT-action-btn[data-tooltip="캡처"]::before {
        display: block;
        bottom: auto;
        top: calc(100% + 8px);
    }
    .draw-header-tools .LEFT-action-btn[data-tooltip="캡처"]::after {
        display: block;
        bottom: auto;
        top: calc(100% + 2px);
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent rgba(60, 64, 67, 0.95) transparent;
    }
}

/* ④ 코스반전: 텍스트 숨김 + 아래 툴팁 */
@media (max-width: 1499px) {
    .draw-header-tools .LEFT-action-btn[data-tooltip="코스반전"] span { display: none; }
    .draw-header-tools .LEFT-action-btn[data-tooltip="코스반전"]::before {
        display: block;
        bottom: auto;
        top: calc(100% + 8px);
    }
    .draw-header-tools .LEFT-action-btn[data-tooltip="코스반전"]::after {
        display: block;
        bottom: auto;
        top: calc(100% + 2px);
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent rgba(60, 64, 67, 0.95) transparent;
    }
}
/* ===== 끝: 헤더 반응형 축소 ===== */