*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

/* ─── docked 레이아웃 변수 ───────────────────────────────
   사이드바·우측 사이드바가 차지하는 폭. body 클래스로 접힘 표시. */
:root {
    --top-bar-h: 38px;
    --sidebar-w: 0px;   /* 좌측 도킹 사이드바 제거됨 — 저장/불러오기는 상단 태스크바로 이전 */
    --right-sidebar-w: 320px;
}
body.sb-l-collapsed { --sidebar-w: 0px; }
body.sb-r-collapsed { --right-sidebar-w: 0px; }

#map {
    position: absolute;
    top: var(--top-bar-h);
    left: var(--sidebar-w);
    right: var(--right-sidebar-w);
    bottom: 0;
    background-color: #f0f0f0;
    /* 트랜지션 없음 — leaflet 타일이 새 영역을 즉시 채우도록 스냅 전환.
       애니메이션 도중 빈 영역에 회색 배경이 노출되는 문제 회피. */
    /* fdCanvas 등 absolute 기준 유지 */
}

/* leaflet tile 흰 격자 보정 — 브라우저 줌이 100%가 아닐 때(예: 90%, 110%)
   devicePixelRatio가 분수가 되어 tile 사이 1px sub-pixel gap이 보이는 leaflet 알려진 이슈.
   tile pane 전체를 0.1% 확대해 갭을 시각적으로 채움. */
.leaflet-tile-pane {
    transform: scale(1.001);
    transform-origin: 0 0;
}
.leaflet-tile-container,
.leaflet-tile {
    backface-visibility: hidden;
}

/* 프로젝트 저장/불러오기 버튼 스타일은 .app-taskbar-action-btn 로 통일
   (상단 태스크바로 이전됨 — 예전 좌측 사이드바 전용 스타일은 제거) */

#proj-progress-toast {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,30,30,.85);
    color: #fff;
    padding: 10px 22px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 999999;
    pointer-events: none;
}

/* ===== 상단 태스크바 — 프로젝트 저장/불러오기 액션 버튼 ===== */
.app-taskbar-action-group {
    display: flex;
    gap: 5px;
    align-items: center;
    padding-right: 10px;
    margin-right: 4px;
    border-right: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.app-taskbar-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    height: 28px;
    background: rgba(255,255,255,0.08);
    color: #cfd9e3;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.app-taskbar-action-btn:hover {
    background: rgba(138,180,232,0.22);
    border-color: rgba(138,180,232,0.4);
    color: #e8f1fb;
}

/* ===== 주소 검색 바 ===== */
#geocode-bar {
    position: fixed;
    top: 48px;          /* 상단 태스크바(38) + 여백(10) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;     /* 태스크바(11000)보다 낮춤 — 검색 dropdown은 태스크바 위로 못 나감 */
    width: 360px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#geocode-input-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
    padding: 6px 10px;
    gap: 6px;
}

#geocode-search-icon {
    font-size: 15px;
    flex-shrink: 0;
    opacity: .7;
}

#geocode-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
    background: transparent;
    min-width: 0;
}
#geocode-input::placeholder { color: #bbb; }

#geocode-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    cursor: pointer;
    color: #666;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
#geocode-clear:hover { background: #ddd; }

#geocode-dropdown {
    display: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    margin-top: 4px;
    overflow: hidden;
    max-height: 340px;
    overflow-y: auto;
}

.gc-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    transition: background .12s;
}
.gc-item:last-child { border-bottom: none; }
.gc-item:hover { background: #f5f8ff; }

.gc-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.gc-text { flex: 1; min-width: 0; }

.gc-primary {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-sub {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-msg {
    padding: 12px 14px;
    font-size: 13px;
    color: #999;
    text-align: center;
}

.gc-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.gc-item:hover .gc-actions { opacity: 1; }

.gc-btn-fly,
.gc-btn-load {
    border: none;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.gc-btn-fly  { background: #eef4ff; color: #2c7be5; }
.gc-btn-fly:hover  { background: #d6e8ff; }
.gc-btn-load { background: #eafaf1; color: #27ae60; font-size: 16px; font-weight: bold; }
.gc-btn-load:hover { background: #c8f0d8; }
.gc-btn-load:disabled { background: #f0f0f0; color: #aaa; cursor: default; }

/* ===== WMS 패널 ===== */
.wms-msg {
    padding: 10px 12px;
    font-size: 11px;
    color: #999;
    text-align: center;
}
.wms-error { color: #c0392b; }

.wms-layer-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 6px 8px;
}
.wms-layer-item:last-child { border-bottom: none; }
.wms-layer-item:hover { background: #f5f8ff; }

.wms-layer-label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    cursor: pointer;
    width: 100%;
}
.wms-layer-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

.wms-layer-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wms-layer-title  { font-size: 12px; font-weight: 600; color: #222; }
.wms-layer-parent { font-size: 14px; color: #888; }
.wms-layer-name   { font-size: 14px; color: #aaa; font-family: monospace; }

.wms-tags { display: flex; gap: 3px; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; margin-top: 2px; }
.wms-tag  {
    font-size: 9px; padding: 1px 5px;
    border-radius: 8px;
    background: #eef4ff; color: #4a6fa5;
    border: 1px solid #c8d8f5;
}
.wms-tag.time { background: #fef9e7; color: #b7770d; border-color: #f5dfa0; }

/* ===== 패널 런처 ===== */
#panel-launcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#launcher-toggle {
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    background: #444;
    color: white;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background 0.2s;
}
#launcher-toggle:hover { background: #222; }

#launcher-menu {
    margin-top: 6px;
    background: white;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    overflow: hidden;
    min-width: 180px;
}

.launcher-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #333;
}
.launcher-item:last-child { border-bottom: none; }
.launcher-item:hover { background: #f8f8f8; }

.launcher-item button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.15s;
}
.launcher-item button:hover { background: #eee; }

/* 패널 숨김 상태 표시 */
.launcher-item.hidden span { color: #aaa; text-decoration: line-through; }
.launcher-item.hidden button { opacity: 0.5; }
details {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    text-align: center;
}

/* ===== 공통 패널 헤더 ===== */
/* === 통일된 패널 헤더 — app-taskbar와 동일 톤 (단일 디자인 언어) === */
/* 드래그 핸들(makeDraggable 이 붙여줌) — 터치로 끌 때 브라우저가 스크롤 제스처로
   가로채지 않도록. 모바일(≤768px)은 패널이 풀스크린이라 드래그 자체를 막아두므로 제외 */
@media (min-width: 769px) {
    .js-drag-handle { touch-action: none; }
}

/* ═══ 우측 사이드바 아이콘 레일 (PC 전용, map_02c_rs_rail.js) ═══
   레이어 목록만 항상 두고, 나머지 섹션은 아이콘으로 접었다가
   누르면 화면 오른쪽을 덮으며 펼쳐진다(지도를 밀지 않음).
   모바일은 기존 하단 시트+탭 방식을 쓰므로 이 블록 전체를 적용하지 않는다. */
@media (min-width: 769px) {
    #rs-rail {
        display: flex;
        gap: 3px;
        padding: 5px 5px 4px;
        background: #24313f;
        flex-shrink: 0;
    }
    .rs-rail-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px 5px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: rgba(255,255,255,0.06);
        color: #cfd9e3;
        cursor: pointer;
        font-size: 9px;
        line-height: 1.1;
        transition: background .12s, color .12s;
    }
    .rs-rail-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
    .rs-rail-btn.is-active {
        background: #4a6fa5;
        border-color: #6f93c9;
        color: #fff;
        font-weight: 700;
    }
    .rs-rail-icon { font-size: 15px; line-height: 1; }
    .rs-rail-label { white-space: nowrap; }

    /* 기본 접힘 — 레이어만 보인다 */
    #right-sidebar > [data-rs-section="tools"],
    #right-sidebar > [data-rs-section="items"],
    #right-sidebar > [data-rs-section="legend"],
    #right-sidebar > [data-rs-section="export"] {
        display: none;
    }

    /* 레이어 섹션이 남는 높이를 전부 사용 (예전엔 max-height:45vh 로 잘렸음) */
    #right-sidebar > [data-rs-section="layers"] {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow-y: auto;
    }

    /* 펼침 — 오른쪽을 덮으며 확장. 지도 폭은 그대로 유지된다.
       레일 높이만큼 아래에서 시작해서 레일이 계속 보이고, 다른 섹션으로 바로 전환할 수 있다.
       (활성 아이콘을 다시 누르거나 Esc 로 닫는다) */
    #right-sidebar > [data-rs-section].rs-expanded {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: calc(var(--top-bar-h, 38px) + var(--rs-rail-h, 46px));
        right: 0;
        bottom: 0;
        width: min(380px, 92vw);
        max-height: none;
        z-index: 1060;
        background: #f7f8fa;
        border-left: 1px solid #c8d2e0;
        box-shadow: -10px 0 28px rgba(20,30,50,0.20);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* 레일은 펼친 패널 위에 계속 떠 있어야 함 */
    #rs-rail { position: relative; z-index: 1061; }
}

.panel-drag-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: linear-gradient(180deg, #2c3e50 0%, #1f2d3d 100%);
    color: #cfd9e3;
    border-radius: 9px 9px 0 0;
    cursor: move;
    user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    transition: background 0.15s;
}
.panel-drag-header:hover {
    background: linear-gradient(180deg, #344861 0%, #25364a 100%);
}
.panel-drag-header:active {
    cursor: grabbing;
}
.panel-drag-title {
    font-size: 12px;
    font-weight: 700;
    color: #8ab4e8;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.panel-drag-controls {
    display: flex;
    gap: 3px;
    margin-left: auto;
}
.panel-drag-controls .panel-ctrl-btn,
.panel-drag-controls button {
    background: rgba(255,255,255,0.08);
    color: #cfd9e3;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.panel-drag-controls .panel-ctrl-btn:hover,
.panel-drag-controls button:hover {
    background: rgba(138, 180, 232, 0.22);
    border-color: rgba(138, 180, 232, 0.4);
    color: #e8f1fb;
}
/* legacy .panel-ctrl-btn 원형 노란 → 통일 헤더 컨트롤 스타일 흡수.
   panel-drag-controls 안에 있으면 위의 통일 스타일이 적용됨. 단독 사용은 거의 없음. */
.panel-ctrl-btn {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: #cfd9e3;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    flex-shrink: 0;
}
.panel-ctrl-btn:hover {
    background: rgba(138, 180, 232, 0.22);
    border-color: rgba(138, 180, 232, 0.4);
    color: #e8f1fb;
}
/* btn-minimize는 통일 스타일 따름 — 별도 규칙 불필요 (노란색 제거) */
.btn-delete { background: #c0392b !important; color: #fff !important; border-color: #a03423 !important; }

.panel-body {
    overflow: visible;
    max-height: none;
    transition: max-height 0.25s ease;
}
.panel-body.minimized {
    max-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
}

/* ===== 플로팅 스타일 패널 ===== */
#style-panel {
    position: absolute;
    top: 10px;
    left: clamp(200px, 22vw, 280px);
    width: clamp(200px, 18vw, 260px);
    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 0.82rem;
    overflow: hidden;
}
/* style-panel-header는 panel-drag-header 공통 스타일 사용 */
#style-panel-tabs {
    display: flex;
    gap: 3px;
    flex: 1;
}
.style-tab {
    flex: 1;
    padding: 3px 6px;
    background: #666;
    color: #ccc;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
}
.style-tab.active {
    background: #eee;
    color: #333;
    font-weight: bold;
}
.style-tab:hover:not(.active) {
    background: #555;
    color: #fff;
}
#style-panel-body {
    background: white;
}

.style-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}
.style-row label {
    font-size: 0.78rem;
    color: #444;
    white-space: nowrap;
    min-width: 90px;
}
.style-row input[type="range"] {
    flex: 1;
    accent-color: #444;
}
.style-row input[type="color"] {
    width: 36px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
}
.style-val {
    font-size: 0.72rem;
    color: #888;
    margin-left: 3px;
}
/* 선택 탭 활성시 패널 헤더 강조 */
#style-panel.has-selection #style-panel-header {
    background: #555;
    border-bottom: 2px solid #ffc107;
}
summary {
    padding: 10px;
    background-color: #f8f9fa;
    cursor: pointer;
    font-weight: bold;
    list-style: none; /* 기본 화살표 숨기기 (선택사항) */
    border-bottom: 1px solid #eee;
}

summary:hover {
    background-color: #e9ecef;
}

/* 하위 항목이 있는 details 강조 */
details.has-items > summary {
    background-color: #eaf2ff;
    border-left: 3px solid #4a6fa5;
    padding-left: 7px;
}
details.has-items > summary:hover {
    background-color: #d9eaff;
}
.summary-count {
    float: right;
    font-size: 14px;
    font-weight: normal;
    background: #4a6fa5;
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    margin-top: 1px;
}

/* 내부 그룹 여백 */
.control-group {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 슬라이더와 라벨 정렬 */
.control-group label {
    font-size: 0.9rem;
    color: #555;
}

/* 버튼 디자인 */
.primary-btn {
    padding: 8px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

details details {
    border: none;           /* 테두리 제거 */
    margin-bottom: 0;       /* 아래 간격 제거 */
    margin-left: 15px;      /* 왼쪽 여백을 주어 들여쓰기 효과 */
    background: transparent; /* 배경을 투명하게 해서 부모 색상 따르기 */
}

/* 2. 하위 summary의 디자인 살짝 변경 */
details details summary {
    background-color: transparent; /* 배경색 제거 */
    border-bottom: none;           /* 밑줄 제거 */
    font-size: 0.9rem;             /* 글씨를 살짝 작게 */
    color: #666;                   /* 색상을 살짝 연하게 */
    padding: 5px 10px;             /* 패딩 조절 */
}

/* 3. 하위 summary 호버 시 효과 */
details details summary:hover {
    color: #007bff;                /* 마우스 올리면 파란색으로 */
    text-decoration: underline;    /* 밑줄 표시 */
}

.side-panel {
    position: absolute;
    top: 20px;
    z-index: 1000;
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid #999;
    width: 250px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sidebar {
    position: fixed;
    top: var(--top-bar-h);
    left: 0;
    bottom: 0;
    /* #attribute-container/#style-panel/#text-panel 등도 z-index:1000이라, DOM상
       나중에 나오는 그쪽이 사이드바 위에 그려져 하단 버튼을 가리는 문제가 있었음
       (세로 해상도 낮은 화면에서 트리를 펼쳐 버튼이 아래로 내려갈수록 잘 드러남).
       도킹된 좌/우 사이드바는 항상 그런 플로팅 유틸리티 패널보다 위에 그려지게 고정. */
    z-index: 1050;
    background: #f7f8fa;
    border: none;
    border-right: 1px solid #dde1e8;
    border-radius: 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.06);
    /* overflow: visible — 우측 모서리 밖에 시각 그립 핸들 보이도록 */
    overflow: visible;
    width: var(--sidebar-w);
    min-width: 0;
    max-width: 520px;
}
#sidebar .panel-drag-header { cursor: default; }
/* 접힘 시 잔여 박스섀도·보더 제거 — 폭 0인데도 그림자 1~2px 보이는 것 방지.
   !important — base #right-sidebar 의 display:flex 와 미디어쿼리 충돌 회피 */
body.sb-l-collapsed #sidebar       { display: none !important; }
body.sb-r-collapsed #right-sidebar { display: none !important; }

/* 리사이즈 영역 — 우측 모서리 8px 띠 (투명, 잡기 영역) */
#sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
    overflow: visible;
}
/* 시각 그립 — 세로 가운데 작은 손잡이 (그립 닷) */
#sidebar-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
    width: 6px;
    height: 56px;
    background: #d0d6e0;
    border: 1px solid #b6bfcc;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.12);
    transition: background 0.15s, border-color 0.15s, height 0.15s;
}
#sidebar-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    width: 0;
    height: 28px;
    border-left: 1px dotted rgba(255,255,255,0.7);
    pointer-events: none;
}
#sidebar-resize-handle:hover::before,
#sidebar-resize-handle.dragging::before {
    background: var(--c-primary, #4a6fa5);
    border-color: var(--c-primary-d, #3a5a90);
    height: 72px;
}

/* right-panel resize handle — 왼쪽 가장자리에 위치 (오른쪽 패널이라 왼쪽으로 늘림) */
#right-panel-resize-handle {
    position: absolute;
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
    border-radius: 10px 0 0 10px;
    transition: background 0.15s;
}
#right-panel-resize-handle:hover,
#right-panel-resize-handle.dragging {
    background: rgba(74, 111, 165, 0.3);
}
#right-panel {
    position: relative;   /* resize handle absolute 기준 */
}

/* ── 패널 공통 디자인 시스템 (sidebar + right-panel) ── */
#sidebar,
#right-panel {
    background: #f7f8fa;
    border: 1px solid #dde1e8;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
/* sidebar/right-panel 헤더는 통일 .panel-drag-header 스타일 그대로 사용 (override 제거) */
#sidebar .panel-body,
#right-panel .panel-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 80vh;
    overflow-y: auto;
    background: #f7f8fa;
}
#sidebar .panel-body::-webkit-scrollbar,
#right-panel .panel-body::-webkit-scrollbar { width: 4px; }
#sidebar .panel-body::-webkit-scrollbar-thumb,
#right-panel .panel-body::-webkit-scrollbar-thumb { background: #ccd; border-radius: 2px; }

/* sticky CTA — 폭과 무관하게, 패널 세로 공간이 부족해 .panel-body가 스크롤될 때도
   "지도에 로드" 같은 각 섹션의 마지막 액션 버튼이 화면 밖으로 밀려나지 않도록 하단 고정.
   (예전엔 @media max-width:768px 모바일에서만 적용돼 있어서, 세로 해상도가 낮은
   데스크탑/노트북에서는 트리가 길어지면 버튼이 스크롤 없이는 안 보이는 문제가 있었음) */
#sidebar-body details[open] > .sb-body > .sb-btn-full:last-child,
#sidebar-body details[open] > .sb-body > [id$="-add-section"]:last-child .sb-btn-full:last-child,
#sidebar-body details[open] > .sb-body > div:last-child > .sb-btn-full:last-child {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 6px -10px -10px;
    box-shadow: 0 -6px 10px rgba(0,0,0,0.08);
}

#sidebar details,
#right-panel details {
    margin-bottom: 0;
    border: 1px solid #e2e6ed;
    border-radius: 7px;
    background: #fff;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    /* 전역 `details { overflow:hidden }`(둥근 모서리 클리핑용) 상속을 명시적으로 끔 —
       overflow:hidden 인 채로 남아있으면 position:sticky 인 하단 액션 버튼
       ("지도에 로드" 등)의 스크롤 컨테이너 판정이 꼬여 클릭이 다른 요소로 새는
       문제가 있었음. 대신 summary/본문에 각각 라운드를 줘서 시각적으로는 거의
       동일하게 보이게 함. */
    overflow: visible;
}
#sidebar summary, #right-panel summary { border-radius: 7px 7px 0 0; }
#sidebar details:not([open]) summary,
#right-panel details:not([open]) summary { border-radius: 7px; }
#sidebar details[open],
#right-panel details[open] { border-color: #b8c8e8; }

#sidebar summary,
#right-panel summary {
    padding: 8px 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
}
#sidebar summary::after,
#right-panel summary::after {
    content: '›';
    position: absolute;
    right: 10px;
    font-size: 14px;
    color: #aab;
    transition: transform 0.2s;
    line-height: 1;
}
#sidebar details[open] > summary::after,
#right-panel details[open] > summary::after { transform: rotate(90deg); }

#sidebar summary:hover,
#right-panel summary:hover {
    background: #f0f4fb;
    color: #4a6fa5;
    text-decoration: none;
}
#sidebar details[open] > summary,
#right-panel details[open] > summary {
    background: #f0f4fb;
    border-bottom: 1px solid #e2e6ed;
    color: #4a6fa5;
}

/* 중첩 details */
#sidebar details details,
#right-panel details details {
    margin: 0 0 2px;
    border: none;
    border-radius: 5px;
    background: #f7f8fa;
    box-shadow: none;
}
#sidebar details details summary,
#right-panel details details summary {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    padding: 5px 8px;
    background: transparent;
}
#sidebar details details summary:hover,
#right-panel details details summary:hover {
    background: #eef2fa;
    color: #4a6fa5;
    text-decoration: none;
}
#sidebar details details[open] > summary,
#right-panel details details[open] > summary {
    background: #eef2fa;
    border-bottom: 1px solid #e2e6ed;
    color: #4a6fa5;
}

/* 공통 인풋 */
#sidebar input[type="number"],
#sidebar input[type="text"],
#sidebar select,
#right-panel input[type="number"],
#right-panel input[type="text"],
#right-panel select {
    padding: 4px 6px;
    border: 1px solid #dde1e8;
    border-radius: 5px;
    font-size: 14px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
}
#sidebar input[type="number"]:focus,
#sidebar input[type="text"]:focus,
#sidebar select:focus,
#right-panel input[type="number"]:focus,
#right-panel input[type="text"]:focus,
#right-panel select:focus { border-color: #4a6fa5; }

#sidebar input[type="range"],
#right-panel input[type="range"] { accent-color: #4a6fa5; width: 100%; }

#sidebar input[type="color"],
#right-panel input[type="color"] {
    width: 32px; height: 24px;
    border: 1px solid #dde1e8;
    border-radius: 4px;
    padding: 1px; cursor: pointer;
}

/* panel-drag-title 공통 */
.panel-drag-title { letter-spacing: 0.3px; }

/* 섹션 내용 공통 컨테이너 */
.sb-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #333;
}
/* 라벨+인풋 행 */
.sb-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-label {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    min-width: 52px;
}
/* 공통 버튼 */
.sb-btn {
    padding: 5px 8px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: filter 0.15s, opacity 0.15s;
    white-space: nowrap;
}
.sb-btn:hover { filter: brightness(0.92); }
.sb-btn-primary  { background: #4a6fa5; color: #fff; }
.sb-btn-success  { background: #27ae60; color: #fff; }
.sb-btn-warning  { background: #e67e22; color: #fff; }
.sb-btn-neutral  { background: #ecf0f1; color: #333; border: 1px solid #dde1e8; }
.sb-btn-muted    { background: #7f8c8d; color: #fff; }
.sb-btn-full     { width: 100%; text-align: center; }
.sb-btn-sm       { padding: 3px 7px; font-size: 14px; }
/* 버튼 그룹 */
.sb-btn-group {
    display: flex;
    gap: 4px;
}
.sb-btn-group .sb-btn { flex: 1; text-align: center; }
/* 구분선 */
.sb-divider {
    border: none;
    border-top: 1px solid #eef0f3;
    margin: 2px 0;
}
/* 뱃지 */
.sb-badge {
    font-size: 14px;
    background: #4a6fa5;
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: auto;
    flex-shrink: 0;
}
/* 정보 텍스트 */
.sb-info {
    font-size: 14px;
    color: #999;
    background: #f7f8fa;
    border-radius: 4px;
    padding: 4px 6px;
    line-height: 1.4;
}
/* DB에 저장 버튼 */
#btn-save-db {
    display: block;
    width: calc(100% - 12px);
    margin: 6px 6px 3px;
    padding: 6px;
    background: #2c3e50;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.15s;
}
#btn-save-db:hover { background: #3d5166; }
/* 우측 고정 사이드바 */
#right-sidebar {
    position: fixed;
    top: var(--top-bar-h);
    right: 0;
    bottom: 0;
    width: var(--right-sidebar-w);
    height: auto;
    background: #f7f8fa;
    border-left: 1px solid #dde1e8;
    box-shadow: -2px 0 8px rgba(0,0,0,0.06);
    z-index: 1050; /* #sidebar 와 동일 이유 — 플로팅 유틸리티 패널에 가려지지 않게 */
    display: flex;
    flex-direction: column;
    /* 각 섹션이 자체 스크롤을 갖고 있지만, 여러 섹션이 동시에 커지면(레이어 여러 개 + 범례 여러 개 등)
       합계가 화면 높이를 넘어서 맨 아래 섹션(내보내기 등)이 통째로 밀려 안 보일 수 있음 —
       안전망으로 사이드바 자체도 스크롤 가능하게 해서 항상 끝까지 스크롤해서 닿을 수 있게 함 */
    overflow-y: auto;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
}
.rs-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    background: #2c3e50;
}
.rs-tools-section {
    flex-shrink: 0;
    border-bottom: 1px solid #dde1e8;
}
.rs-tools-section .tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 도구 7~8개 → 4열 2행 */
    gap: 5px;
    padding: 8px;
    background: #f0f2f5;
}
.rs-tools-section .tool-grid button {
    aspect-ratio: auto;
    min-height: 58px;
    border: 1px solid #d0d6e0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: 11px;
}
.rs-tools-section .tool-grid button .tool-icon {
    font-size: 22px;
    line-height: 1;
}
.rs-tools-section .tool-grid button .tool-label {
    font-size: 10px;
    color: #5a6a7c;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
}
.rs-tools-section .tool-grid button.is-active {
    background: #dce8ff;
    border-color: #4a6fa5;
}
.rs-tools-section .tool-grid button.is-active .tool-label { color: #2c4870; font-weight: 700; }
.rs-tools-section .tool-grid button:hover { background: #dce8ff; border-color: #4a6fa5; }
.rs-tools-section .tool-grid button.active { background: #4a6fa5; color: #fff; border-color: #3a5a95; }
.rs-layers-section {
    flex-shrink: 0;
    border-bottom: 1px solid #dde1e8;
    max-height: 45vh;
    overflow-y: auto;
}
.rs-layers-section::-webkit-scrollbar { width: 4px; }
.rs-layers-section::-webkit-scrollbar-thumb { background: #ccd; border-radius: 2px; }
.rs-layers-section > #map-order-container { padding: 5px 6px; }
.rs-unified-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 1px solid #dde1e8;
}
.rs-unified-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rs-unified-body::-webkit-scrollbar { width: 4px; }
.rs-unified-body::-webkit-scrollbar-thumb { background: #ccd; border-radius: 2px; }
/* 이전엔 규칙이 아예 없어서 내용(범례 항목 수)만큼 무한정 늘어났음 —
   그러면 아래 .rs-export-section(내보내기 버튼)이 사이드바 밖으로 밀려 안 보이는 문제가 생김.
   .rs-layers-section과 같은 방식으로 자체 높이 상한 + 스크롤을 줘서 항상 아래 섹션들이 밀려나지 않게 함. */
.rs-legend-section {
    flex-shrink: 0;
    border-bottom: 1px solid #dde1e8;
    max-height: 22vh;
    overflow-y: auto;
}
.rs-export-section {
    flex-shrink: 0;
}
.rs-export-section .sb-btn-group { margin-top: 4px; }

/* 레이어 카드 그리드 */
.lc-group-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
}
.lc-group-2col .lc-card { min-width: 0; }
.lc-group-2col .lc-bar { gap: 3px; padding: 3px 4px; }
/*.lc-group-2col .lc-handle { display: none; }*/
.lc-group-2col .lc-name { font-size: 14px; }
/*.lc-group-2col .lc-geom { display: none; }*/
.lc-group-2col .lc-actions { gap: 1px; }
.lc-group-2col .lc-btn { padding: 2px 3px; font-size: 14px; }
/* 스타일 패널 / 위치조정 패널 열리면 전체 너비 */
.lc-group-2col .lc-card:has(.lc-style-panel:not([style*="none"])),
.lc-group-2col .lc-card:has(.lc-nudge-panel:not([style*="none"])) {
    grid-column: 1 / -1;
}

/* right-sidebar 아코디언 스타일 (#right-panel 스타일 재사용) */
#right-sidebar details {
    margin-bottom: 0;
    border: 1px solid #e2e6ed;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#right-sidebar details[open] { border-color: #b8c8e8; }
#right-sidebar summary {
    padding: 7px 10px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
}
#right-sidebar summary::after {
    content: '›';
    position: absolute;
    right: 10px;
    font-size: 14px;
    color: #aab;
    transition: transform 0.2s;
    line-height: 1;
}
#right-sidebar details[open] > summary::after { transform: rotate(90deg); }
#right-sidebar summary:hover { background: #f0f4fb; color: #4a6fa5; }
#right-sidebar details[open] > summary { background: #f0f4fb; border-bottom: 1px solid #e2e6ed; color: #4a6fa5; }
#right-sidebar input[type="number"],
#right-sidebar input[type="text"],
#right-sidebar select {
    padding: 4px 6px;
    border: 1px solid #dde1e8;
    border-radius: 5px;
    font-size: 11px;
    background: #fff;
    color: #333;
    outline: none;
}
#right-sidebar input[type="number"]:focus,
#right-sidebar input[type="text"]:focus,
#right-sidebar select:focus { border-color: #4a6fa5; }
#right-sidebar input[type="range"] { accent-color: #4a6fa5; width: 100%; }
#right-sidebar input[type="color"] {
    width: 32px; height: 24px;
    border: 1px solid #dde1e8;
    border-radius: 4px;
    padding: 1px; cursor: pointer;
}

/* hidden stub (JS 호환) */
#right-panel {
    display: none !important;
}
.layer-list-container {
    flex-grow: 1;
    overflow-y: auto;
    margin: 10px 0;
    border: 1px inset #eee;
    background: #fdfdfd;
    min-height: 100px;
}

.layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    margin-bottom: 5px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}
.layer-item:hover {
  box-shadow: inset 4px 0 0 #6f42c1;
}

/* 레이어 순서 변경을 위한 드래그 효과용 (추후 구현) */
.layer-item:active { cursor: grabbing; }

/* 속성테이블 */
#attribute-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(300px, 60vw, 900px);
    height: clamp(180px, 28vh, 350px);
    min-height: 0;
    background: white;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid #999;
    border-radius: 4px;
    overflow: hidden;
}
/* 최소화 시 헤더만 남기고 나머지 숨김 */
#attribute-container.is-minimized {
    height: auto !important;
}

/* === 속성테이블 최대화 모드 (PC) ===
   사이드바 (--sidebar-w, --right-sidebar-w) 사이의 지도 영역만 덮음. */
#attribute-container.is-maximized {
    position: fixed !important;
    top: var(--top-bar-h, 38px) !important;
    bottom: 0 !important;
    left: var(--sidebar-w, 0px) !important;
    right: var(--right-sidebar-w, 0px) !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: 0 0 24px rgba(0,0,0,0.18);
    z-index: 1100;
}
/* 최대화 상태 — 버튼 시각 변화 (확장 → 축소 표시) */
#attribute-container.is-maximized #btn-attr-maximize::before {
    content: '⊟';
}
#attribute-container.is-maximized #btn-attr-maximize { font-size: 0; }
#attribute-container.is-maximized #btn-attr-maximize::before { font-size: 13px; }

/* attribute-header는 panel-drag-header 공통 스타일 사용 */

/* 지도연동 패널 열렸을 때 컨테이너 확장 */
#attribute-container.map-link-open {
    width: clamp(540px, 80vw, 1200px);
}
/* 계산함수 버튼 스타일 (데이터 조작 플로팅 패널) */
.calc-fn-btn {
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    font-family: monospace;
    font-weight: 600;
    transition: background 0.1s;
}
.calc-fn-btn:hover { background: #e67e22; color: #fff; border-color: #e67e22; }
#attribute-table-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
#map-link-panel {
    display: none;
    flex-direction: column;
}
#attribute-container.map-link-open #map-link-panel {
    display: flex;
}
#data-ops-panel {
    display: none;
    flex-direction: column;
}

/* 듀얼 슬라이더 thumb */
#ml-range-lo, #ml-range-hi {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    outline: none;
    background: transparent;
    pointer-events: none;
}
#ml-range-lo::-webkit-slider-thumb,
#ml-range-hi::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #2c7be5;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
    pointer-events: all;
}
/* 드롭존 활성화 */
#ml-dropzone.drag-over {
    border-color: #2c7be5;
    background: #eef4ff;
    color: #2c7be5;
}

/* ===== 통합 레이어 카드 패널 ===== */
.lc-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 2px 4px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}
.lc-group {
    min-height: 24px;
}
.lc-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e8ef;
    border-radius: 5px;
    margin-bottom: 4px;
    background: #fff;
    transition: box-shadow 0.15s;
}
.lc-card.lc-hidden {
    background: #f8f8f8;
    opacity: 0.65;
}
.lc-card.lc-dragging {
    opacity: 0.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
/* 현재 지도에서 가장 위(z-index 최상단)에 그려지는 레이어 — 순서 파악이 잘 안 된다는
   피드백으로 추가. 카드 목록 맨 위 = 최상단이라는 게 잘 안 보였음 */
.lc-card.lc-topmost {
    border-color: #2980b9;
    background: #eaf4fc;
    box-shadow: 0 0 0 1px #2980b9;
}
.lc-card.lc-topmost .lc-name { color: #1c5a80; font-weight: 600; }
.lc-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    cursor: default;
}
.lc-handle {
    color: #bbb;
    cursor: grab;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    /* 터치로 순서를 바꿀 때 브라우저가 목록 스크롤로 가로채지 않게.
       핸들에만 걸어서, 카드의 다른 부분을 쓸어내리면 목록은 그대로 스크롤된다. */
    touch-action: none;
}
.lc-handle:active { cursor: grabbing; }

/* 범례 행 순서 변경 핸들 — 사이드 패널 범례에만 렌더링됨(플로팅 범례엔 없음) */
.legend-handle {
    color: #ccc;
    cursor: grab;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    touch-action: none;   /* 터치 순서 변경이 목록 스크롤로 새지 않게 */
}
.legend-handle:active { cursor: grabbing; }
.lc-icon {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
}
.lc-name {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}
.lc-count {
    font-size: 14px;
    background: #2c7be5;
    color: #fff;
    border-radius: 8px;
    padding: 1px 6px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.5;
}
.lc-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.lc-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 3px;
    border-radius: 3px;
    line-height: 1;
    color: #555;
    transition: background 0.1s;
}
.lc-btn:hover { background: #f0f0f0; }
.lc-del-btn { color: #cc3333; font-size: 15px; font-weight: 700; }
.lc-del-btn:hover { background: #fff0f0; }

/* 인라인 스타일 패널 */
.lc-style-panel {
    padding: 7px 8px;
    border-top: 1px solid #eef0f5;
    background: #f7f9fc;
    border-radius: 0 0 5px 5px;
}
.lc-style-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    font-size: 11px;
    color: #555;
}
.lc-style-row:last-child { margin-bottom: 0; }
.lc-style-row label { flex-shrink: 0; min-width: 32px; }
.lc-style-row input[type="color"] {
    width: 28px; height: 22px;
    border: 1px solid #ccc; border-radius: 3px;
    padding: 0; cursor: pointer; flex-shrink: 0;
}
.lc-style-row input[type="range"] {
    flex: 1; height: 4px; cursor: pointer;
}
.lc-val {
    min-width: 28px; text-align: right;
    font-size: 14px; color: #888;
}
.lc-num-input {
    width: 44px; padding: 1px 4px;
    font-size: 11px; border: 1px solid #ddd;
    border-radius: 3px;
}

/* 레이어 위치 미세조정 패널 (map_24d_layer_nudge.js) */
.lc-nudge-panel {
    padding: 7px 8px;
    border-top: 1px solid #eef0f5;
    background: #f7f9fc;
    border-radius: 0 0 5px 5px;
}
.lc-nudge-pad {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    grid-template-rows: repeat(3, 30px);
    gap: 3px;
    justify-content: center;
}
.lc-nudge-btn, .lc-nudge-reset {
    border: 1px solid #d4dae5;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #4a6fa5;
    display: flex; align-items: center; justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.lc-nudge-btn:hover, .lc-nudge-reset:hover { background: #eef2fb; }
.lc-nudge-btn:active, .lc-nudge-reset:active { background: #dbe6f7; }
.lc-nudge-reset { font-size: 13px; color: #888; }
.lc-nudge-step { accent-color: #4a6fa5; }

/* 지오메트리 타입 뱃지 */
.lc-geom {
    font-size: 9px; font-weight: 700;
    padding: 1px 4px; border-radius: 3px;
    flex-shrink: 0; line-height: 1.4;
}
.lc-geom-polygon { background: #d4edda; color: #155724; }
.lc-geom-line    { background: #cce5ff; color: #004085; }
.lc-geom-point   { background: #fff3cd; color: #856404; }
.lc-geom-mixed   { background: #e2e3e5; color: #383d41; }

/* ─── 플로팅 범례 마커 ─── */
.ml-legend-marker {
    background: none !important;
    border: none !important;
}
#ml-float-legend {
    background: rgba(255,255,255,0.95);
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    font-size: 11px;
    min-width: 110px;
    min-height: 40px;
    line-height: 1.8;
    cursor: default;
}

/* ─── 단계구분도 값 레이블 tooltip ─── */
.ml-value-label.leaflet-tooltip {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    padding: 0;
    white-space: nowrap;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.ml-value-label.leaflet-tooltip::before {
    display: none;
}

/* ===== 엑셀형 시트 탭바 ===== */
.sheet-tab-bar {
    display: flex;
    align-items: flex-end;
    background: #f0f0f0;
    border-bottom: 2px solid #999;
    padding: 4px 6px 0;
    gap: 2px;
    min-height: 30px;
    overflow-x: auto;
    flex-shrink: 0;
}
.sheet-tab-bar::-webkit-scrollbar { height: 3px; }
.sheet-tab-bar::-webkit-scrollbar-thumb { background: #ccc; }

/* ── 툴바 버튼 공통 ── */
/* === 디자인 토큰 — 의미 기반 3색 + 타이포 3단계 + 8pt 그리드 === */
:root {
    /* 색 (의미) */
    --c-primary:    #4a6fa5;   /* 액션·강조·카테고리·활성탭 (파랑) */
    --c-primary-d:  #354ea0;   /* primary 어둠 — 테두리·active */
    --c-success:    #27ae60;   /* 완료·확정 알림 전용 (그 외엔 쓰지 말 것) */
    --c-success-d:  #1e8e4a;
    --c-danger:     #c0392b;
    --c-danger-bg:  #fdecea;

    /* 중립 (회색 단계) */
    --c-n-0:   #ffffff;
    --c-n-50:  #f7f9fc;   /* 행 줄무늬·연한 배경 */
    --c-n-100: #eef1f6;   /* chip 배경 */
    --c-n-200: #d4dae5;   /* border */
    --c-n-300: #c0d0e0;
    --c-n-500: #8895a8;
    --c-n-700: #354152;   /* 본문 */
    --c-n-900: #1a2333;   /* 제목 */

    /* 타이포 (3단계) */
    --t-xs: 10px;   /* 마이크로 */
    --t-sm: 11px;   /* 보조라벨·셀 */
    --t-md: 12px;   /* 본문·버튼 */
    --t-lg: 14px;   /* 제목 */

    /* 간격 (8pt grid) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-6: 24px;

    /* 둥글기 */
    --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
}

/* === 테이블 툴바 버튼 통합 시스템 (3색: primary/default/danger) === */
/* 터치 친화: min-height 32px, font-size 12px. 좁은 화면에선 라벨 숨김+아이콘만 */
.tb-btn {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #d4dae5;
    background: #fff;
    color: #354152;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.2;
}
.tb-btn:hover  { background:#f0f4fb; border-color:#a9b5cc; color:#1a2333; }
.tb-btn:active { background:#dee5f1; }

/* primary — 결과를 만들어내는 핵심 액션 (그래프/주제도/CSV/레이어저장).
   카테고리·활성탭과 동일한 의미 색 (파랑). */
.tb-btn-primary {
    background: var(--c-primary);
    color: var(--c-n-0);
    border-color: var(--c-primary-d);
    font-weight: 600;
}
.tb-btn-primary:hover  { background:#3e5f8d; border-color:#27408a; color:#fff; }

/* ⚡ 빠른 시각화 버튼 — 강조 (그라데이션) */
.tb-btn-accent {
    background: linear-gradient(135deg, #7c4dff, #4a6fa5);
    color: #fff;
    border-color: #5a3fd0;
    font-weight: 700;
}
.tb-btn-accent:hover { box-shadow: 0 2px 10px rgba(124,77,255,0.4); color:#fff; }

/* ⚡ 빠른 시각화 갤러리 */
#qv-gallery {           /* 그룹(차트/지도)을 세로로 — id 우선순위로 grid 무력화 */
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qv-group-label {
    font-size: 11px;
    font-weight: 700;
    color: #5a6b85;
    letter-spacing: .02em;
    margin: 6px 0 2px;
}
.qv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
.qv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 8px 11px;
    background: #fff;
    border: 1.5px solid #dde4f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.1s;
    text-align: center;
}
.qv-card:hover {
    border-color: #4a6fa5;
    box-shadow: 0 4px 14px rgba(74,111,165,0.18);
    transform: translateY(-2px);
}
.qv-card:active { transform: translateY(0); }
.qv-rec { border-color: #f0c14b; }
.qv-rec:hover { border-color: #4a6fa5; }
.qv-thumb-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2px 0;
}
.qv-thumb { width: 60px; height: 38px; display: block; }
.qv-badge {
    position: absolute;
    top: 5px; right: 5px;
    font-size: 8px;
    font-weight: 700;
    color: #9a7400;
    background: #fff6d8;
    border: 1px solid #f0d98a;
    border-radius: 8px;
    padding: 1px 5px;
    line-height: 1.4;
}
.qv-ico { font-size: 30px; line-height: 1; }   /* 구버전 호환 */
.qv-name { font-size: 13px; font-weight: 700; color: #2c3e50; }
.qv-desc { font-size: 10px; color: #8895a8; line-height: 1.3; }

@media (max-width: 768px) {
    .qv-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .qv-card { padding: 14px 8px; }
    .qv-thumb { width: 64px; height: 40px; }
}

/* 🎨 차트 스타일 프리셋 바 */
.csp-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.csp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 4px;
    background: #fff;
    border: 1.5px solid #dde4f0;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.csp-btn:hover { border-color: #4a6fa5; }
.csp-btn.active {
    border-color: #4a6fa5;
    box-shadow: 0 0 0 2px rgba(74,111,165,0.18);
}
.csp-dots {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.06);
}
.csp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.csp-name { font-size: 10px; font-weight: 600; color: #44506a; }

/* 산점도/버블 컬럼 칩 */
.scatter-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #2c3e50;
    background: #eaf0fb;
    border: 1px solid #c5d4ee;
    border-radius: 12px;
    padding: 2px 4px 2px 9px;
}
.scatter-chip-x {
    border: none;
    background: rgba(0,0,0,0.06);
    color: #5a6b85;
    width: 15px; height: 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.scatter-chip-x:hover { background: #e74c3c; color: #fff; }
.scatter-chip-ds {
    font-size: 9px; font-weight: 600; color: #2f7d5b;
    background: #e3f3ec; border: 1px solid #bfe3d2; border-radius: 8px;
    padding: 0 5px; margin-left: 2px; max-width: 90px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scs-range { display: flex; align-items: center; gap: 6px; }
.scs-num {
    flex: 1; min-width: 0; font-size: 11px; padding: 3px 6px;
    border: 1px solid #cdd7e6; border-radius: 5px; outline: none;
}
.scs-num:focus { border-color: #3fa06f; }

/* 데이터 카탈로그 (트리 평탄화 + facet 필터) */
.db-facet-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.db-facet {
    font-size: 10px; color: #5a6b85; background: #fff;
    border: 1px solid #cdd7e6; border-radius: 11px; padding: 2px 8px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    transition: background .12s, color .12s, border-color .12s;
}
.db-facet:hover { border-color: #4a6fa5; }
.db-facet.active { background: #4a6fa5; color: #fff; border-color: #4a6fa5; }
.db-facet-n { font-size: 8px; opacity: 0.65; }

/* 그룹 헤더 개수 배지 */
.db-grp-count {
    font-size: 9px; color: #8895a8; background: #eef1f6;
    border-radius: 8px; padding: 0 6px; margin-left: 4px; flex-shrink: 0;
}
.scatter-swap-btn {
    font-size: 10px;
    font-weight: 600;
    color: #4a6fa5;
    background: #eaf0fb;
    border: 1px solid #c5d4ee;
    border-radius: 12px;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.scatter-swap-btn:hover { background: #4a6fa5; color: #fff; }

/* 산점도 분류 필터 체크리스트 */
#scatter-group-filter {
    margin-top: 6px;
    border: 1px solid #e3e8f0;
    border-radius: 6px;
    background: #f8fafc;
    padding: 5px 6px;
}
.sgf-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; font-weight: 700; color: #5a6b85; margin-bottom: 4px; padding: 0 2px;
}
.sgf-actions button {
    border: 1px solid #cdd7e6; background: #fff; color: #4a6fa5;
    font-size: 9px; padding: 1px 6px; border-radius: 4px; cursor: pointer; margin-left: 3px;
}
.sgf-actions button:hover { background: #eef2ff; }
.sgf-search {
    width: 100%; box-sizing: border-box; margin: 0 0 5px;
    font-size: 11px; padding: 4px 7px;
    border: 1px solid #cdd7e6; border-radius: 5px; outline: none;
}
.sgf-search:focus { border-color: #3fa06f; }
.sgf-list { max-height: 170px; overflow-y: auto; }
.sgf-tip {
    margin-top: 5px; font-size: 10px; color: #8895a8; line-height: 1.45;
    background: #fff8e8; border: 1px solid #f0e2b8; border-radius: 5px; padding: 4px 7px;
}
.sgf-tip b { color: #9a7400; }
.sgf-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; color: #3fa06f; cursor: pointer;
}
.sgf-toggle input { margin: 0; cursor: pointer; }
.sgf-item {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 3px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.sgf-item:hover { background: #eef2f8; }
.sgf-item input { margin: 0; cursor: pointer; flex-shrink: 0; }
.sgf-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sgf-name {
    flex: 1; color: #34404f; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.sgf-count { font-size: 9px; color: #aab2c0; flex-shrink: 0; }

/* 📋 데이터 뷰 (표 시각화 / KPI) */
.dv-input, .dv-select {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #cdd7e6;
    border-radius: 5px;
    outline: none;
    background: #fff;
}
.dv-input:focus, .dv-select:focus { border-color: #3fa06f; }
.dv-seg { display: inline-flex; border: 1px solid #cdd7e6; border-radius: 5px; overflow: hidden; }
.dv-seg button {
    border: none; background: #fff; color: #5a6b85;
    font-size: 11px; padding: 4px 10px; cursor: pointer;
}
.dv-seg button:not(:last-child) { border-right: 1px solid #e3e8f0; }
.dv-seg button.active { background: #3fa06f; color: #fff; }

.dv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dv-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: #eef4f1; color: #2c3e50; font-weight: 700;
    padding: 7px 10px; cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid #d6e2db; user-select: none;
}
.dv-table thead th:hover { background: #e2ece7; }
.dv-table tbody td {
    padding: 5px 10px; border-bottom: 1px solid #eef1f5;
    color: #34404f; white-space: nowrap;
}
.dv-table tbody tr:hover td { background: #f6faf8; }
.dv-bar {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    height: 60%; border-radius: 2px; opacity: 0.4; z-index: 0;
}
.dv-bar-val { position: relative; z-index: 1; }

.dv-pg {
    border: 1px solid #cdd7e6; background: #fff; color: #44506a;
    font-size: 11px; padding: 3px 9px; border-radius: 5px; cursor: pointer;
}
.dv-pg:hover:not(:disabled) { background: #eef4f1; border-color: #3fa06f; }
.dv-pg:disabled { opacity: 0.4; cursor: default; }

.dv-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px; padding: 14px;
}
.dv-kpi-card {
    background: #fff; border: 1px solid #e3e8f0; border-radius: 10px;
    padding: 12px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.dv-kpi-label { font-size: 12px; color: #5a6b85; font-weight: 600; margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-kpi-big { font-size: 26px; font-weight: 800; color: #2c3e50; line-height: 1.1; }
.dv-kpi-agg { font-size: 11px; font-weight: 600; color: #3fa06f; margin-left: 6px; }
.dv-kpi-sub {
    display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px;
    font-size: 10px; color: #8895a8;
}
.dv-kpi-top { margin-top: 7px; font-size: 11px; color: #6a7689;
    border-top: 1px dashed #e3e8f0; padding-top: 6px; }
.dv-kpi-top b { color: #2c3e50; }
.tb-btn-primary:active { background:var(--c-primary-d); }

/* danger — 삭제/초기화 */
.tb-btn-danger {
    background: #fff;
    color: #c0392b;
    border-color: #e9b8b3;
}
.tb-btn-danger:hover  { background:#fdecea; border-color:#c0392b; color:#c0392b; }
.tb-btn-danger:active { background:#f7d4d0; }

/* legacy alias — 기존 클래스명 유지하되 동일 스타일로 매핑 (점진적 정리용) */
.tb-btn-dark, .tb-btn-light, .tb-btn-orange, .tb-btn-blue,
.tb-btn-indigo, .tb-btn-brown, .tb-btn-slate {
    /* default style ( .tb-btn ) 그대로 사용 — 색 다양화 제거 */
    background:#fff; color:#354152; border:1px solid #d4dae5;
}
.tb-btn-green { /* legacy green → primary 파랑으로 흡수 (의미 통일) */
    background: var(--c-primary); color:#fff; border-color:var(--c-primary-d); font-weight:600;
}
.tb-btn-green:hover { background:#3e5f8d; border-color:#27408a; }

/* 더보기 드롭다운 */
.tb-more-menu {
    position: absolute;
    /* 모바일에서 속성 컨테이너 (10400) 보다 위 — 안 그러면 컨테이너 뒤로 숨어 안 보임 */
    z-index: 10500;
    background: #fff; border: 1px solid #d4dae5; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 30, 50, 0.18);
    padding: 6px; min-width: 200px; max-height: 70vh; overflow: auto;
}
/* 모바일 더보기 항목 — 터치 타깃 확대 */
@media (max-width: 768px) {
    .tb-more-menu { min-width: 240px; }
    .tb-more-item { padding: 12px 14px; font-size: 13px; min-height: 44px; }
    .tb-more-item-icon { width: 22px; font-size: 14px; }
}
.tb-more-section {
    font-size: 10px; font-weight: 700; color: #8895a8;
    padding: 8px 10px 4px; letter-spacing: 0.5px; text-transform: uppercase;
}
.tb-more-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 5px;
    font-size: 12px; color: #354152; cursor: pointer;
    background: transparent; border: none; width: 100%; text-align: left;
}
.tb-more-item:hover { background: #f0f4fb; }
.tb-more-item-icon { width:18px; text-align:center; flex-shrink:0; }
.tb-more-divider { height:1px; background:#eef1f6; margin: 6px 4px; }

/* 좁은 화면 (≤ 768px, 태블릿 세로) — 보조 라벨 숨기고 아이콘만 */
@media (max-width: 768px) {
    .tb-btn { padding: 8px 10px; min-height: 36px; }
    .tb-btn-label-collapse { display: none; }
}

/* === 모바일 반응형 — Phase 1: 패널 → 풀스크린 오버레이 ===
   기본 동작 유지 (display none/block 토글). CSS가 visible 일 때 위치만 재배치.
   기존 태스크바 슬롯으로 열고 닫기 그대로. */
@media (max-width: 768px) {
    /* 모바일은 docked 변수 강제 0 — 사이드바가 지도를 밀지 않고 오버레이 */
    :root { --sidebar-w: 0px; --right-sidebar-w: 0px; }

    /* 지도가 메인 — 태스크바 아래 전체 */
    #map {
        position: fixed !important;
        top: 38px !important; bottom: 0; left: 0; right: 0;
        width: auto !important; height: auto !important;
    }

    /* 좌측 사이드바 — 슬라이드 인 from left */
    #sidebar {
        position: fixed !important;
        top: 38px !important; bottom: 0;
        left: 0 !important; right: auto !important;
        width: 90vw !important; max-width: 360px;
        height: auto !important;
        z-index: 10500;
        box-shadow: 4px 0 24px rgba(0,0,0,0.28);
        border-radius: 0 12px 12px 0 !important;
        max-height: none !important;
    }
    #sidebar .panel-body {
        max-height: calc(100vh - 88px) !important;
        overflow-y: auto;
    }

    /* 우측 사이드바 — 슬라이드 인 from right */
    #right-sidebar {
        position: fixed !important;
        top: 38px !important; bottom: 0;
        right: 0 !important; left: auto !important;
        width: 90vw !important; max-width: 340px;
        height: auto !important;
        z-index: 10500;
        box-shadow: -4px 0 24px rgba(0,0,0,0.28);
        border-radius: 12px 0 0 12px !important;
        overflow-y: auto;
    }

    /* 속성 테이블 — 하단 시트 (지도 위쪽 40% 살림 — 상호작용 가능).
       풀스크린은 ⛶ 최대화로 토글. */
    #attribute-container {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important;
        height: 60vh !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 10400;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -6px 18px rgba(0,0,0,0.18);
    }
    /* 최대화 시에만 풀스크린 — ⛶ 누르면 지도까지 덮음 */
    #attribute-container.is-maximized {
        top: 38px !important;
        height: auto !important;
        border-radius: 0 !important;
    }
    /* 속성테이블 60vh 시트 모드일 때만 지도 하단 자름 — 상단 40% 노출 → 패닝·줌·도구 사용 가능.
       minimized·maximized 상태에선 JS 가 attr-collapsed 클래스를 붙여서 지도 풀로 돌아옴. */
    body:not(.attr-collapsed) #map { bottom: 60vh !important; }
    /* 헤더·툴바 탭 시 텍스트 셀렉션 방지 — 헤더와 툴바만 */
    #attribute-header,
    #attribute-toolbar { -webkit-user-select: none; user-select: none; }
    /* 컨테이너 전체 탭 하이라이트 끄기 — 안 그러면 터치 시 전체 영역이 살짝 깜박여 "전체 선택" 느낌 */
    #attribute-container { -webkit-tap-highlight-color: transparent; }

    /* 속성테이블(하단시트)/레이어도구(우측 드로어) 드래그 리사이즈 그립 —
       ⛶ 최대화는 이분법(60vh↔풀스크린)이라 그 사이 크기를 자유롭게 조절하고 싶다는
       피드백으로 추가. 데스크탑에선 기존 makeResizable 코너 핸들이 있으니 숨김. */
    .mobile-resize-grip {
        position: absolute;
        z-index: 20;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
        display: flex; align-items: center; justify-content: center;
    }
    .mobile-resize-grip-h {
        /* 부모(overflow:hidden)의 위쪽 바깥이 아니라 안쪽 가장자리에 겹쳐 그림 —
           음수 offset은 overflow:hidden에 잘려서 클릭도 안 먹기 때문 */
        top: 0; left: 0; right: 0; height: 22px;
        cursor: ns-resize;
    }
    .mobile-resize-grip-h::before {
        content: ''; width: 44px; height: 5px; border-radius: 3px;
        background: rgba(255,255,255,0.9); box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    }
    .mobile-resize-grip-v {
        top: 0; bottom: 0; left: 0; width: 22px;
        cursor: ew-resize;
    }
    .mobile-resize-grip-v::before {
        content: ''; width: 5px; height: 44px; border-radius: 3px;
        background: rgba(255,255,255,0.9); box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    }
    /* 그러나 버튼·메뉴 항목은 살짝 강조 — 탭 피드백 */
    #attribute-container button,
    #attribute-container .tb-btn,
    #attribute-container .panel-ctrl-btn,
    .tb-more-item { -webkit-tap-highlight-color: rgba(74,111,165,0.22); }
    #attribute-container.is-minimized {
        height: auto !important; min-height: 44px;
    }
    /* 모바일에서도 ⛶ 최대화 버튼 노출 — 60vh 가 작을 때 풀로 토글 */
    /* 모바일에서 일부 보조 버튼 숨김 — 더보기 메뉴에서 접근 (텍스트 라벨·지도 스타일) */
    #attribute-toolbar #btn-open-text-panel,
    #attribute-toolbar #btn-open-map-style {
        display: none !important;
    }
    /* 속성 테이블 toolbar 한 줄 안에 모든 버튼 강제 + 가로 스크롤 */
    #attribute-toolbar { overflow-x: auto; }
    #attribute-toolbar > div { flex-wrap: nowrap !important; }

    /* 차트·텍스트·기타 floating 패널 — 화면에 꽉 차게
       (단계구분도/도형표현도 설정, 경위선 스타일·박스 옵션, 텍스트 마커 편집,
       자유도형 편집 팝업 — 데스크탑 드래그 팝업이라 모바일에서 빠져있던 항목 추가) */
    #chart-panel, #text-panel, #text-individual-style, #style-panel,
    #th-settings-panel, #graticule-style-panel, #box-grat-options-panel,
    #text-marker-popup, #drawn-edit-popup, #sp-float-panel,
    /* 아래 패널들은 빠져 있어서 모바일에서 고정폭 그대로 열리며 화면 밖으로
       나가 닫기(×)·최소화 버튼이 잘렸음 (390px 기준 각각 150px·297px 넘침 측정됨).
       나머지 패널은 이미 화면 안에 들어와서 건드리지 않음 */
    #data-ops-panel, #dataviz-panel, #fao-float-panel {
        width: 95vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important; right: auto !important;
        top: 50px !important;
        /* 100vh 가 아니라 --vvh(실제 보이는 높이, map_19_zindex.js 가 갱신)를 기준으로.
           top:50px 아래로 펼쳐지므로 50px + 여백 10px 을 빼야 하단 버튼까지 화면 안에 들어온다.
           (예전엔 80vh 라서, 주소창이 보이는 폰에서 푸터의 "🎨 적용" 버튼이 화면 밖으로 밀렸음) */
        max-height: calc(var(--vvh, 100vh) - 60px) !important;
    }
    /* 인라인 height:calc(...) 를 가진 패널들 — max-height 만으론 안 눌려서 같이 지정 */
    #data-ops-panel { height: calc(var(--vvh, 100vh) - 60px) !important; }
    #dataviz-panel  { height: calc(var(--vvh, 100vh) - 60px) !important; }
    /* 공간분석 패널 — 인라인 height:calc(100vh - 80px) 때문에 max-height 만으론
       안 잡힘. 지도를 가리지 않게 높이도 함께 눌러준다. */
    #sp-float-panel { height: calc(var(--vvh, 100vh) - 60px) !important; }
    /* 지도에서 지점을 찍는 동안엔 헤더만 남기고 접는다 (패널이 지도를 덮어버리므로).
       위 78vh 가 !important 라 인라인 height 로는 못 이김 → 클래스로 덮어씀 */
    #sp-float-panel.sp-collapsed { height: auto !important; }
    /* 탭 8개(지오코딩·조인·버퍼·PIP·거리·경로·등시선·필터)가 flex:1 균등분할이면
       모바일 폭에서 라벨이 깨짐 → 가로 스크롤 + 내용폭 유지 */
    #sp-float-panel .sp-tab-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #sp-float-panel .sp-tab-bar::-webkit-scrollbar { display: none; }
    #sp-float-panel .sp-tab-btn {
        flex: 0 0 auto !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        white-space: nowrap;
        min-height: 40px;
    }
    /* 탭 내부 입력행 — 480px 기준으로 짜여 있어 좁은 폭 보정 */
    #sp-float-panel .sp-tab-content { padding: 14px 14px !important; }
    #sp-float-panel select,
    #sp-float-panel input[type="text"],
    #sp-float-panel input[type="number"] {
        font-size: 16px !important;   /* iOS Safari 자동 확대 방지 (16px 미만이면 줌) */
        min-height: 38px;
    }
    #sp-float-panel button { min-height: 40px; }
    /* 위 패널들은 인라인 style 로 고정폭(200~440px)을 갖고 있어 내부 입력행이
       좁은 폭 기준으로 짜여 있음 — 모바일 풀폭에서도 레이아웃 안 깨지게 보정 */
    #graticule-style-panel, #box-grat-options-panel,
    #text-marker-popup, #drawn-edit-popup {
        overflow-y: auto !important;
    }
    #th-settings-panel { height: calc(var(--vvh, 100vh) - 60px) !important; }

    /* PC 전용 아이콘 레일 — 모바일은 하단 시트 + 탭 방식이라 숨긴다
       (레일 스타일은 min-width:769px 안에만 있어서, 안 숨기면 스타일 없는 버튼 줄로 보임) */
    #rs-rail { display: none !important; }

    /* 우클릭 피쳐 메뉴 — 화면 가운데 정렬 */
    #feature-ctx-menu {
        left: 50% !important;
        transform: translateX(-50%);
        width: 90vw !important;
        max-width: 320px;
    }

    /* 빈 right-panel 숨김 (혹시 잘못 등장 시) */
    #right-panel { display: none !important; }

    /* 태스크바 — 슬롯 가로 스크롤 허용 */
    #app-taskbar { overflow-x: auto; padding: 0 6px; }
    #app-taskbar-slots { flex-wrap: nowrap !important; }
    .app-taskbar-slot span:last-child {
        font-size: 10px !important;
    }
    /* 모바일에선 주소 검색 슬롯 숨김 (3개만 노출) */
    .app-taskbar-slot[data-panel-id="geocode"] { display: none !important; }

    /* 플로팅 범례 — 최소 사이즈 보장, 화면 밖 방지 */
    #legend-floating {
        max-width: 75vw !important;
        right: 12px !important;
    }

    /* 터치 타깃 — 모든 인터랙티브 요소 36px↑ */
    .tb-btn, .lc-btn, .panel-ctrl-btn,
    .tab-btn, .rs-tab,
    button[onclick] {
        min-height: 36px;
    }

    /* 우측 사이드바 lc-card 좀 더 크게 (터치) */
    .lc-card { min-height: 44px; }
    .lc-btn { min-width: 32px; min-height: 32px; }
}

/* === 모바일 푸시 내비게이션 — 사이드바 한 화면에 한 카테고리만 ===
   원리: <details>가 열리면 :has() 로 그 형제 details 들을 자동 숨김.
   열린 details 의 summary 도 숨김 (제목은 헤더에 표시). 결과적으로
   "탭 → 슬라이드 화면 전환" 같은 푸시 내비 UX. 데스크탑은 영향 없음. */
@media (max-width: 768px) {
    /* 사이드바 자체 풀스크린 (90vw → 100vw) + z-index 확실히 위로 */
    #sidebar {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        z-index: 99000 !important;
    }
    #right-sidebar { z-index: 99000 !important; }
    /* 모바일에선 폭 리사이즈 의미 없음 */
    #sidebar-resize-handle { display: none !important; }
    /* 레거시 플로팅 위젯 숨김 — 사이드바 위 겹쳐서 탭 가로채는 것 방지 */
    #geocode-bar { display: none !important; }
    #panel-launcher { display: none !important; }
    /* 형제 details 숨김 / summary 숨김 은 JS 가 인라인 style 로 처리 (구버전 브라우저 :has 미지원 회피) */
    /* 열린 details — 풀너비 (배경·테두리·박스섀도 제거해서 카드처럼 안 보이게) */
    #sidebar-body details[open] {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    /* 열린 details 의 본문 — 패딩만 조금 */
    #sidebar-body details[open] > .sb-body { padding: 10px 12px !important; }

    /* sticky CTA — 폼 마지막의 full-width 액션 버튼은 스크롤되어도 하단 고정 */
    #sidebar-body details[open] > .sb-body > .sb-btn-full:last-child,
    #sidebar-body details[open] > .sb-body > [id$="-add-section"]:last-child .sb-btn-full:last-child,
    #sidebar-body details[open] > .sb-body > div:last-child > .sb-btn-full:last-child {
        position: sticky !important;
        bottom: -10px;
        z-index: 5;
        margin: 8px -12px -10px;
        border-radius: 0 !important;
        padding: 12px 16px !important;
        box-shadow: 0 -6px 14px rgba(0,0,0,0.10);
    }

    /* 뒤로가기 버튼 — JS가 헤더에 삽입. 데스크탑에선 display:none */
    #sidebar-back-btn {
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.18);
        color: #cfd9e3;
        border-radius: 4px;
        padding: 2px 10px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        margin-right: 6px;
    }
    #sidebar-back-btn:hover { background: rgba(255,255,255,0.16); }
}

/* === 매우 좁은 화면 (≤ 480px, 모바일 세로) — 풀화면 패널 === */
@media (max-width: 480px) {
    #sidebar, #right-sidebar {
        width: 100vw !important; max-width: 100vw !important;
        border-radius: 0 !important;
    }
    /* attribute-container 높이는 위 768px 블록의 60vh 하나로 통일 —
       여기 65vh가 따로 있어서 두 !important 규칙이 충돌해 폭에 따라
       결과가 들쭉날쭉했음(테이블 하단 리사이즈 기준점이 흔들리는 원인) */
}

/* === 모바일 2단계 — 호버 분리 + 차트/텍스트 bottom sheet + 드래그 비활성 === */
@media (max-width: 768px) {
    /* 텍스트 패널 — bottom sheet */
    #text-panel {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        top: auto !important;
        width: 100vw !important; max-width: 100vw !important;
        height: 82vh !important;
        max-height: 82vh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
        z-index: 10450;
    }

    /* 차트 패널 — 풀스크린 (지도 안 보여도 됨, 좁은 칸 최대 활용) */
    #chart-panel {
        position: fixed !important;
        left: 0 !important; right: 0 !important;
        top: 38px !important; bottom: 0 !important;
        width: 100vw !important; max-width: 100vw !important;
        height: calc(var(--vvh, 100vh) - 38px) !important;
        max-height: calc(var(--vvh, 100vh) - 38px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 0 24px rgba(0,0,0,0.3);
        z-index: 10450;
    }

    /* ===== 모바일 차트 — 상단 차트 고정 + 하단 컨트롤 (실시간 미리보기) ===== */
    /* 차트 탭 버튼 불필요 — 차트가 항상 상단에 보임 */
    .chart-tab-mobile-only { display: none !important; }

    /* 패널 = 세로 flex, order 로 배치: 헤더 → 차트 → 핸들 → 탭바 → 컨트롤 → 액션바 */
    /* 패널 헤더 슬림 (모바일은 풀스크린이라 헤더 하나로 충분) */
    #chart-panel-header { order: 0; flex-shrink: 0; padding: 4px 10px !important; }
    #chart-panel-header > span:first-of-type { font-size: 13px !important; }
    #chart-panel-header > button { padding: 3px 10px !important; font-size: 12px !important; }

    /* 활성 차트만 상단에 풀폭 고정 (나머지 floating box 숨김) */
    #chart-panel .chart-float-box { display: none !important; }
    #chart-panel .chart-float-box.cfl-active {
        display: flex !important;
        order: 1;
        position: relative !important;
        left: 0 !important; top: 0 !important;
        width: 100% !important;
        height: var(--mchart-h, 40vh) !important;
        min-height: 160px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        flex-shrink: 0;
        resize: none !important;
    }
    /* 차트 박스 헤더(cfl-handle) 숨김 — 패널 헤더로 충분 (이중 헤더 제거) */
    #chart-panel .chart-float-box.cfl-active .cfl-handle { display: none !important; }
    /* 캔버스 wrapper 패딩 최소화 — 차트가 공간 꽉 채우게 */
    #chart-panel .chart-float-box.cfl-active .cfl-wrapper { padding: 4px 6px !important; }

    /* 차트 높이 드래그 핸들 (JS 생성) — 차트와 탭바 사이 */
    .mchart-resize {
        order: 2;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: #e8eef9;
        border-top: 1px solid #d4ddec;
        border-bottom: 1px solid #d4ddec;
        cursor: ns-resize;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
        color: #8895a8;
        font-size: 9.5px;
        font-weight: 700;
        user-select: none;
    }
    .mchart-resize::before {
        content: '⬍';
        font-size: 12px;
        color: #7a8db0;
        transition: color 0.12s;
    }
    .mchart-resize::after {
        content: '차트 높이 조절';
    }
    .mchart-resize.dragging,
    .mchart-resize:active {
        background: #dce8ff;
    }
    .mchart-resize.dragging::before,
    .mchart-resize:active::before { color: #4a6fa5; }

    /* 탭바 (데이터/꾸미기) — 핸들 아래 */
    #chart-panel > [data-tab-bar] {
        order: 3;
        width: 100%;
        flex-shrink: 0;
    }
    #chart-panel [data-tab-bar] .chart-tab-btn {
        min-height: 42px;
        font-size: 13px;
    }

    /* 컨트롤 영역 (데이터/꾸미기) — 영역 자체를 터치 스크롤 (핸들 없이도 모든 설정 접근) */
    #chart-panel-body {
        order: 4;
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    /* 탭 콘텐츠(데이터/꾸미기) 가 실제 스크롤 컨테이너 — 안의 모든 설정이 세로로 흐름 */
    #chart-panel #chart-tab-data,
    #chart-panel #chart-tab-style {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        flex: 1;
    }
    /* 시리즈 카드 자체 스크롤 해제 → 전체가 한 흐름으로 스크롤 (중첩 스크롤 제거) */
    #chart-panel #chart-series-cards {
        flex: none !important;
        overflow: visible !important;
    }
    /* specificity 를 #chart-panel #chart-left 로 높임 — 뒤에 선언된 기본 .#chart-left{width:300px}
       (소스 순서상 뒤라 같은 specificity 면 그게 이김) 를 확실히 덮어쓰기 */
    #chart-panel #chart-left {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        flex: 1;
        min-height: 0;
        box-sizing: border-box;
    }
    #chart-panel #chart-tab-data,
    #chart-panel #chart-tab-style {
        width: 100% !important;
        box-sizing: border-box;
    }
    /* 우측 캔버스 placeholder — 모바일 불필요 */
    #chart-right { display: none !important; }

    /* 헤더 PC 전용 버튼 (위치 초기화 ⊙) 숨김 */
    .chart-hdr-pc-only { display: none !important; }

    /* 항목 필터 팝업 (가로축/값 카드 클릭) — 하단 시트로 (태그 아래 absolute 면 화면 밖/클리핑) */
    .tag-filter-popup {
        position: fixed !important;
        left: 0 !important; right: 0 !important;
        bottom: 0 !important; top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 11000 !important;
        box-shadow: 0 -6px 24px rgba(0,0,0,0.28) !important;
        animation: scPickerSheetIn 0.2s cubic-bezier(0.2,0.8,0.2,1);
    }
    /* 시트 상단 그랩 핸들 */
    .tag-filter-popup::before {
        content: '';
        display: block;
        position: sticky;
        top: 0;
        width: 40px; height: 4px;
        margin: 8px auto 4px;
        background: #c5d0e8;
        border-radius: 2px;
    }

    /* 하단 액션바 — 터치 타깃 확대, 맨 아래 고정 */
    #chart-action-bar {
        order: 5;
        padding: 10px 12px;
        gap: 6px;
        flex-shrink: 0;
    }
    #chart-action-bar .cab-btn {
        min-height: 44px;
        padding: 8px 12px;
        font-size: 13px;
    }

    /* 패널 헤더 드래그 의미 없음 — cursor 일반화 */
    .panel-drag-header { cursor: default !important; }
    .panel-drag-header:active { cursor: default !important; }

    /* 패널 헤더에 swipe-down 핸들 시각화 (작은 회색 바) */
    .panel-drag-header::before {
        content: '';
        position: absolute;
        top: 4px; left: 50%;
        transform: translateX(-50%);
        width: 36px; height: 4px;
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
        pointer-events: none;
    }
    .panel-drag-header { position: relative; padding-top: 14px !important; }

    /* 우측 패널 카드 폰트 — 모바일에선 더 크게 */
    .lc-name { font-size: 12px !important; }

    /* 플로팅 범례 — 모바일에선 작은 박스 (방해 안 되게) */
    #legend-floating {
        max-width: 60vw !important;
        font-size: 11px !important;
    }
    #legend-floating-body { max-height: 35vh !important; }
}

/* === 모바일 — 우측 사이드바 = 하단 시트 + 탭바 ===
   지도와 항상 공존. 탭으로 도구/레이어/요소/범례/내보내기 전환. */
@media (max-width: 768px) {
    /* 우측 사이드바 — 우측 슬라이드 인 → 하단 시트로 전환 */
    #right-sidebar {
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 22vh !important;   /* 지도 8 : 시트 2 비율 */
        min-height: 160px !important;
        z-index: 99000 !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -6px 18px rgba(0,0,0,0.15) !important;
        overflow: hidden;       /* 탭바 + 내부 스크롤 분리 */
        display: flex !important;
        flex-direction: column;
    }
    /* 우측 사이드바 열렸을 때 — 지도 하단을 시트 위로 잘라줌 (지도 보이게).
       min-height 160px 와 동기 위해 max() 사용 — 시트가 160px 일 때 지도도 160px 만큼 잘림. */
    body:not(.sb-r-collapsed) #map { bottom: max(22vh, 160px) !important; }

    /* 탭바 — JS가 #right-sidebar 첫 자식으로 삽입 */
    .rs-tabbar {
        display: flex;
        gap: 0;
        background: linear-gradient(180deg, #2c3e50, #1f2d3d);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 8px 4px 0;
        flex-shrink: 0;
        position: relative;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .rs-tabbar::-webkit-scrollbar { display: none; }
    /* 그랩 핸들 (스와이프 다운 단서) */
    .rs-tabbar::before {
        content: '';
        position: absolute;
        top: 3px; left: 50%;
        transform: translateX(-50%);
        width: 36px; height: 3px;
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
        pointer-events: none;
    }
    .rs-tab {
        flex: 1 0 auto;
        min-width: 60px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: #8a96a8;
        font-size: 11px;
        font-weight: 600;
        padding: 8px 10px;
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.12s, border-color 0.12s;
    }
    .rs-tab.is-active {
        color: #8ab4e8;
        border-bottom-color: #8ab4e8;
    }
    /* 활성 섹션 외 숨김은 JS 가 인라인 처리 */
    /* 섹션 컨테이너 — flex item, 본문 스크롤 */
    #right-sidebar > [data-rs-section] {
        flex: 1 1 auto;
        overflow-y: auto;
    }
    /* 활성 섹션 제목 — 탭에 이미 있으니 숨김 (중복 제거) */
    #right-sidebar > [data-rs-section] > .rs-section-title { display: none; }
    /* 모바일 도구 버튼 — 좀 더 크게 (터치) */
    .rs-tools-section .tool-grid button { min-height: 64px; }
    .rs-tools-section .tool-grid button .tool-icon { font-size: 26px; }
    .rs-tools-section .tool-grid button .tool-label { font-size: 11px; }
}

/* === 도구 작업대 (tool workbench) — 도구 선택 시 grid 자리를 완전히 차지 ===
   freedraw-panel 의 신규 구조 (.tw-*) 전용 스타일. */

/* 작업대 컨테이너 — 인라인 도킹된 freedraw-panel */
#right-sidebar #freedraw-panel {
    position: static;
    width: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: #fff;
    padding: 0;
    margin: 0;
    font-size: 12px;
    z-index: auto;
}

/* 활성 상태 (JS 가 토글) — 도구 그리드·섹션 제목 숨김, 작업대만 표시 */
.rs-tools-section.is-tool-active > .rs-section-title,
.rs-tools-section.is-tool-active > .tool-grid { display: none !important; }

/* 헤더 — ← 도구 / 제목 / 종료 */
.tw-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #2c3e50, #1f2d3d);
    color: #cfd9e3;
    cursor: default;
}
.tw-back, .tw-stop {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #cfd9e3;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s;
}
.tw-back:hover { background: rgba(255,255,255,0.16); }
.tw-stop {
    background: rgba(192, 57, 43, 0.85);
    border-color: rgba(192, 57, 43, 1);
}
.tw-stop:hover { background: rgba(192, 57, 43, 1); }
.tw-title {
    flex: 1;
    text-align: center;
    color: #8ab4e8;
    font-weight: 700;
    font-size: 12px;
}

/* 본문 */
.tw-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* MS Paint 스타일 — 좌 팔레트 / 우 컨트롤 */
.tw-body.tw-mspaint {
    flex-direction: row;
    gap: 10px;
    padding: 10px;
}
.tw-palette-col {
    flex: 0 0 92px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    align-content: start;
    background: #f0f2f5;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #dde1e8;
    height: fit-content;
}
.tw-palette-col .tw-swatch {
    aspect-ratio: 1;
    min-width: 0;
    border-radius: 4px;
    border-width: 2px;
}
.tw-controls-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tw-row { display: flex; flex-direction: column; gap: 5px; }
.tw-section-label {
    font-size: 11px;
    color: #5a6a7c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tw-val {
    margin-left: auto;
    font-size: 11px;
    color: #4a6fa5;
    font-weight: 700;
    background: #eef3fb;
    padding: 1px 6px;
    border-radius: 9px;
}

/* 색상 팔레트 — 9칸 그리드 (8 프리셋 + 커스텀) */
.tw-palette {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
}
.tw-swatch {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
    min-width: 0;
}
.tw-swatch-light { border-color: #ccd; }
.tw-swatch:hover { transform: scale(1.08); }
.tw-swatch.is-active {
    border-color: #2c3e50;
    box-shadow: 0 0 0 2px rgba(74,111,165,0.25);
    transform: scale(1.1);
}
.tw-custom {
    background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.tw-custom input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
}

/* 브러시 프리셋 — 3칸 */
.tw-brushes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.tw-brush {
    border: 1px solid #d0d6e0;
    border-radius: 6px;
    background: #fff;
    padding: 8px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #5a6a7c;
    transition: background 0.12s, border-color 0.12s;
}
.tw-brush:hover { background: #f0f4fb; border-color: #b8c8e8; }
.tw-brush.is-active {
    background: #dce8ff;
    border-color: #4a6fa5;
    color: #2c4870;
    font-weight: 700;
}
.bp-vis {
    width: 100%;
    height: 12px;
    display: block;
    position: relative;
}
.bp-thin::before, .bp-thick::before, .bp-dash::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
}
.bp-thin::before  { border-top: 2px solid #2c3e50; }
.bp-thick::before { border-top: 5px solid #2c3e50; }
.bp-dash::before  { border-top: 3px dashed #2c3e50; }
.bp-name { line-height: 1; }

/* 슬라이더 */
.tw-range {
    width: 100%;
    accent-color: #4a6fa5;
    margin: 0;
}

/* 지우개 토글 버튼 — 기존 JS 가 textContent/cssText 갈아치우니 클래스는 보조 */
#eraser-toggle {
    padding: 2px 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #f5f5f5;
    color: #333;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
}
/* active 상태는 기존 JS 가 cssText 로 직접 칠함 — 별도 CSS 불필요 */

/* ── 도형 sub-tab 바 (도형 워크벤치 안의 5종 전환) ── */
.tw-subtabs {
    display: flex;
    overflow-x: auto;
    background: #f0f2f5;
    border-bottom: 1px solid #dde1e8;
    padding: 4px 6px 0;
    gap: 2px;
    scrollbar-width: none;
}
.tw-subtabs::-webkit-scrollbar { display: none; }
.tw-subtab {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #5a6a7c;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 9px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}
.tw-subtab:hover:not(:disabled) { color: #2c3e50; background: rgba(74,111,165,0.06); }
.tw-subtab.is-active {
    color: #4a6fa5;
    border-bottom-color: #4a6fa5;
    background: #fff;
}
.tw-subtab:disabled { color: #b8c0cc; cursor: not-allowed; }

/* ── 마커 아이콘 라이브러리 ── */
.tw-icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}
.tw-icon-btn {
    aspect-ratio: 1;
    border: 1px solid #d0d6e0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s, border-color 0.1s, transform 0.1s;
}
.tw-icon-btn:hover {
    background: #f0f4fb;
    border-color: #b8c8e8;
    transform: scale(1.06);
}
.tw-icon-btn.is-active {
    background: #dce8ff;
    border-color: #4a6fa5;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(74,111,165,0.2);
}

/* 측정 결과 박스 */
.tw-result-box {
    background: linear-gradient(180deg, #f0f7ff, #e3eefb);
    border: 1px solid #b8c8e8;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: #2c3e50;
    text-align: center;
    line-height: 1.4;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.tw-result-box .measure-big {
    font-size: 22px;
    font-weight: 800;
    color: #4a6fa5;
    letter-spacing: 0.3px;
}
.tw-result-box .measure-sub {
    font-size: 10px;
    color: #6a7889;
}
.tw-result-box strong {
    font-size: 10px;
    color: #5a6a7c;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 측정 마커 (지도 위) — 드래그 가능한 흰 원, 보더는 활성 색상 따라감 */
.measure-marker { background: transparent; border: none; }
.measure-marker > div {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--measure-color, #e74c3c);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    cursor: move;
    transition: transform 0.1s;
}
.measure-marker > div:hover { transform: scale(1.25); background: #ffe; }

/* 측정 화살표 끝점 — SVG 기반 (꼬리 앵커) */
.measure-arrow { background: transparent; border: none; }
.measure-arrow > div {
    transform-origin: 0 50%;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.measure-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* 화살표 도구 — SVG 화살촉, 꼬리 앵커로 라인과 자연스럽게 연결 */
.arrow-head { background: transparent; border: none; }
.arrow-head > div {
    /* SVG 가 div 를 채움. transform-origin 은 좌중심 (꼬리) → 라인 끝이 꼬리에 정확히 닿음 */
    transform-origin: 0 50%;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.arrow-head svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 메모 마커 — 디지털 포스트잇 */
.memo-marker { background: transparent; border: none; }
.memo-bubble {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;             /* 우하단 리사이즈 핸들이 절대 위치라 패딩 다시 균일 */
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 3px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.1);
    cursor: move;
    user-select: none;
    line-height: 1.35;
    box-sizing: border-box;
}
.memo-bubble:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15); }
.memo-bubble .memo-icon { flex-shrink: 0; font-size: 1.1em; line-height: 1; padding-top: 2px; }
.memo-bubble .memo-text {
    flex: 1;
    color: #2c3e50;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    min-width: 0;
}
.memo-bubble.is-dark .memo-text { color: #f5f5f5; }
.memo-bubble.is-empty .memo-text { color: rgba(0,0,0,0.4); font-style: italic; }
.memo-bubble.is-dark.is-empty .memo-text { color: rgba(255,255,255,0.6); }

/* ─── 재사용 가능한 폰트 클래스 (메모·텍스트 라벨·폰트 피커 공통) ─── */
.font-default     { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-weight: 500; }
.font-bold        { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-weight: 800; }
.font-noto-sans   { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; }
.font-noto-bold   { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; }
.font-serif       { font-family: 'Nanum Myeongjo', 'Times New Roman', serif; font-weight: 400; }
.font-serif-bold  { font-family: 'Nanum Myeongjo', 'Times New Roman', serif; font-weight: 700; }
.font-jua         { font-family: 'Jua', -apple-system, sans-serif; font-weight: 400; }
.font-black-han   { font-family: 'Black Han Sans', -apple-system, sans-serif; font-weight: 400; letter-spacing: 0.5px; }
.font-handwriting { font-family: 'Nanum Pen Script', 'Segoe Script', 'Comic Sans MS', cursive; font-weight: 400; line-height: 1.15; }
.font-gaegu       { font-family: 'Gaegu', cursive; font-weight: 400; }
.font-hi-melody   { font-family: 'Hi Melody', cursive; font-weight: 400; }
.font-gugi        { font-family: 'Gugi', cursive; font-weight: 400; }
.font-stylish     { font-family: 'Stylish', serif; font-weight: 400; }
.font-mono        { font-family: 'D2Coding', 'Consolas', 'Courier New', monospace; font-weight: 400; }

/* ─── 폰트 피커 (재사용 가능한 드롭다운) ─── */
.font-picker { position: relative; width: 100%; }
.font-picker-trigger {
    width: 100%;
    background: #fff;
    border: 1px solid #d0d6e0;
    border-radius: 5px;
    padding: 8px 28px 8px 10px;
    font-size: 13px;
    color: #2c3e50;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background 0.12s, border-color 0.12s;
}
.font-picker-trigger::after {
    content: '▼';
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: #8a96a8;
    font-family: -apple-system, sans-serif !important;
    font-weight: 400 !important;
}
.font-picker-trigger:hover { background: #f0f4fb; border-color: #b8c8e8; }
.font-picker.is-open .font-picker-trigger { background: #f0f4fb; border-color: #4a6fa5; }

.font-picker-dropdown {
    position: absolute;
    top: calc(100% + 3px); left: 0; right: 0;
    background: #fff;
    border: 1px solid #d0d6e0;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    padding: 4px 0;
}
.font-picker-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    color: #2c3e50;
    cursor: pointer;
    line-height: 1.3;
    transition: background 0.08s;
}
.font-picker-option:hover { background: #f0f4fb; }
.font-picker-option.is-active { background: #dce8ff; color: #2c4870; }
.font-picker-option .fp-name { display: block; font-size: 10px; color: #8a96a8; margin-top: 1px; font-family: -apple-system, sans-serif !important; font-weight: 400 !important; }

/* ─── 메모 도구 활성 시 커서 미리보기 (지도 위에서만) ─── */
.memo-cursor-preview {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    opacity: 0.78;
    display: none;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
    will-change: left, top;
}
.memo-cursor-preview .memo-bubble {
    cursor: none;          /* 커서 자체가 미리보기인데 안쪽 cursor:move 노출 방지 */
    border-style: dashed;  /* 아직 placed 가 아니라는 단서 */
}
.memo-cursor-preview .memo-resize { display: none; }  /* 미리보기엔 핸들 불필요 */
/* 메모 활성 중 지도 위에선 시스템 커서 숨김 */
.leaflet-container.memo-cursor-hidden { cursor: none !important; }

/* ─── 메모 우하단 대각선 리사이즈 핸들 ─── */
.memo-resize {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 18px; height: 18px;
    cursor: nwse-resize;
}
.memo-resize::before {
    content: '';
    position: absolute;
    bottom: 2px; right: 2px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent rgba(0,0,0,0.3) transparent;
    transition: border-color 0.12s;
}
.memo-resize:hover::before { border-color: transparent transparent rgba(74,111,165,0.85) transparent; }
.memo-bubble.is-dark .memo-resize::before { border-color: transparent transparent rgba(255,255,255,0.4) transparent; }
.memo-bubble.is-dark .memo-resize:hover::before { border-color: transparent transparent rgba(255,255,255,0.75) transparent; }

/* 화살표 드래그 핸들 — 측정과 비슷한 패턴 */
.arrow-marker { background: transparent; border: none; }
.arrow-marker > div {
    width: 14px; height: 14px;
    background: #fff;
    border: 2px solid var(--arrow-color, #3498db);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    cursor: move;
    transition: transform 0.1s;
}
.arrow-marker > div:hover { transform: scale(1.25); background: #ffe; }

/* 끝점 토글 행 (점 / 화살표 / 숨김) */
.tw-toggle-row {
    display: flex;
    gap: 4px;
}
.tw-toggle-row button {
    flex: 1;
    background: #fff;
    border: 1px solid #d0d6e0;
    border-radius: 5px;
    padding: 6px 4px;
    font-size: 11px;
    color: #5a6a7c;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.tw-toggle-row button:hover { background: #f0f4fb; border-color: #b8c8e8; }
.tw-toggle-row button.is-active {
    background: #dce8ff;
    border-color: #4a6fa5;
    color: #2c4870;
    font-weight: 700;
}

/* 측정 라벨 tooltip — 깔끔한 알약 */
.leaflet-tooltip.measure-tooltip {
    background: rgba(231, 76, 60, 0.95);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.leaflet-tooltip.measure-tooltip::before { display: none; }

/* 안내 박스 */
.tw-info {
    font-size: 11px;
    color: #5a6a7c;
    line-height: 1.5;
    padding: 8px 10px;
    background: #eef3fb;
    border-radius: 6px;
    border-left: 3px solid #4a6fa5;
}
.tw-info strong { color: #c0392b; }

/* 이미지 오버레이 선택 표시 — 점선 outline + 본체 드래그 커서 */
.leaflet-image-layer.img-selected {
    outline: 2px dashed #3498db;
    outline-offset: 2px;
    cursor: move;
}

/* 이모지 마커 (지도 위) — 텍스트 그림자로 가독성 확보 */
.emoji-marker { background: transparent; border: none; }
.emoji-marker > div {
    font-size: 26px;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
        0 1px 2px rgba(0,0,0,0.25);
    user-select: none;
}

/* === 통일 모달 시스템 — 모든 modal은 이 클래스 사용 ===
   기존 인라인 스타일 modal도 자동 흡수 (background:rgba/inset:0 패턴 매칭). */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 50, 0.45);
    backdrop-filter: blur(2px);
    /* 모바일에서 우측 사이드바 (99000) 보다 무조건 위 */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 24px;
    animation: appModalFadeIn 0.15s ease-out;
}
@keyframes appModalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.app-modal-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: appModalSlideUp 0.18s ease-out;
}
@keyframes appModalSlideUp {
    from { transform: translateY(8px); opacity: 0.5; }
    to   { transform: translateY(0);    opacity: 1; }
}

.app-modal-header {
    padding: 12px 18px;
    background: linear-gradient(180deg, #2c3e50, #1f2d3d);
    color: #cfd9e3;
    border-radius: 12px 12px 0 0;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-modal-header .app-modal-title {
    flex: 1;
    color: #8ab4e8;
    letter-spacing: 0.3px;
}
.app-modal-header .app-modal-close,
.app-modal-header button[aria-label="close"] {
    background: rgba(255,255,255,0.08);
    color: #cfd9e3;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.app-modal-header .app-modal-close:hover {
    background: rgba(192, 57, 43, 0.4);
    border-color: rgba(192, 57, 43, 0.6);
    color: #fff;
}

.app-modal-body {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
    background: #fff;
    color: var(--c-n-700);
}

.app-modal-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--c-n-100);
    background: var(--c-n-50);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-radius: 0 0 12px 12px;
}

/* ===== 데이터 업로드 — 미리보기 표 머리글에 통합된 열 정보 · 필터 =====
   (열 타입·고유값 배지는 해시태그처럼 어수선하고 모바일에서 자리를 많이 차지한다는
   피드백으로 제거 — 정보는 열 이름 title 툴팁으로만 남김) */
.upload-th-filter input {
    width: 84px; box-sizing: border-box; padding: 2px 5px; font-size: 10px;
    border: 1px solid #dde3ee; border-radius: 3px; outline: none; font-weight: 400;
}
.upload-th-filter input:focus { border-color: #4a6fa5; }
.upload-th-filter.has-filter input { border-color: #4a6fa5; background: #f0f5ff; }

.upload-tool-tab {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: #eef1f6;
    color: #667;
    border: 1px solid #dde3ee;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.upload-tool-tab.active { background: #4a6fa5; color: #fff; border-color: #4a6fa5; }

/* 모바일 — 모달을 하단 시트로 (전체화면 → 콘텐츠 크기에 맞게) */
@media (max-width: 768px) {
    .app-modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;  /* 화면 하단 정렬 */
    }
    .app-modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;             /* 콘텐츠 크기 */
        max-height: 92vh !important;         /* 너무 크면 캡 */
        border-radius: 16px 16px 0 0 !important;
        animation: appModalSlideUpMobile 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    @keyframes appModalSlideUpMobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    /* 헤더 상단 그랩 핸들 시각화 (스와이프 다운 가능 단서) */
    .app-modal-header {
        position: relative;
        padding-top: 18px !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .app-modal-header::before {
        content: '';
        position: absolute;
        top: 6px; left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 4px;
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
        pointer-events: none;
    }
    .app-modal-footer { border-radius: 0 !important; }

    /* 데이터 업로드 모달 — min-width/min-height가 100vw보다 커서 가로 넘침 발생하던 문제 */
    #upload-modal-inner {
        min-width: 0 !important;
        min-height: 0 !important;
        resize: none !important;
    }
    #upload-preview-table { height: 220px !important; flex-basis: 100% !important; }
    #upload-shape-preview-wrap { height: 180px !important; flex-basis: 100% !important; }
    .upload-th-filter input { width: 64px !important; }
}

/* === 피처 선택 강조 — 두꺼운 검정 실선 박스 대신 얇은 점선(마칭 앤츠) 애니메이션 === */
.feature-selected-outline {
    animation: fctx-marching-ants 0.6s linear infinite;
}
@keyframes fctx-marching-ants {
    to { stroke-dashoffset: -20; }
}

/* === 호버 효과 분리 — 마우스 있을 때만 hover 발동 (모바일 탭 잔상 방지) === */
@media (hover: none) {
    /* 모든 hover 효과를 active 로 대체 (탭 시만 강조) */
    .tb-btn:hover { background: #fff !important; border-color: #d4dae5 !important; color: #354152 !important; }
    .tb-btn-primary:hover { background: var(--c-primary) !important; border-color: var(--c-primary-d) !important; }
    .lc-btn:hover { background: transparent !important; }
    .legend-row:hover { background: transparent !important; }
    .panel-drag-header:hover { background: linear-gradient(180deg, #2c3e50 0%, #1f2d3d 100%) !important; }
    .rs-tab:hover { background: rgba(255,255,255,0.04) !important; color: #8fa3bd !important; }
}

/* 행 높이 모드 (data-density: compact/normal/comfy) — _VS_ROW_H와 동기. 셀 패딩/폰트만 차이 */
#attribute-table[data-density="compact"] td { padding: 2px 4px; font-size: 11px; }
#attribute-table[data-density="normal"]  td { padding: 4px 6px; font-size: 12px; }
#attribute-table[data-density="comfy"]   td { padding: 8px 10px; font-size: 13px; }

/* ── 탭 버튼 ── */
.tab-btn {
    padding: 4px 14px;
    background: #ddd;
    color: #555;
    border: 1px solid #bbb;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
    position: relative;
    top: 1px;
}
.tab-btn:hover:not(.active) { background: #e8e8e8; color: #333; }
.tab-btn.active {
    background: var(--c-primary);
    color: var(--c-n-0);
    font-weight: bold;
    border-color: var(--c-primary-d);
    border-bottom: 2px solid var(--c-primary);
    z-index: 1;
    box-shadow: 0 -2px 0 var(--c-primary-d) inset;
}

#attribute-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
#attribute-table-wrapper {
    flex: 1;
    overflow: auto;
    background: white;
    min-height: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #eee;
    padding: 10px;
    font-size: 13px;
    text-align: left;
}

th {
    background: #f4f4f4;
    position: sticky; /* 헤더 고정 */
    top: 0;
}

.btn-primary {
    width: 100%; padding: 10px; background-color: #6f42c1; color: white; 
    border: none; border-radius: 5px; cursor: pointer; font-weight: bold; margin-top: 10px;
}

/* 수정 모드일 때 변할 초록색 스타일 */
.btn-editing {
    background-color: #4CAF50 !important;
}

/* 레이어 상세 영역 (접혀있을 때 숨김) */
.layer-detail {
    display: none; 
    padding: 10px;
    background: #f1f3f5;
    border-top: 1px solid #dee2e6;
}

/* 펼쳐진 상태 클래스 */
.layer-item.expanded .layer-detail {
    display: block;
}

/* 지역 이름 칩 스타일 */
.feature-chip {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 15px;
    padding: 2px 10px;
    margin: 2px;
    font-size: 0.8rem;
}

.feature-chip button {
    margin-left: 5px;
    border: none;
    background: none;
    color: #fa5252;
    cursor: pointer;
    font-weight: bold;
}

.feature-chip:hover {
    border-color: #339af0;
}

/* 관리자 항목 공통 스타일 */
.layer-item {
    transition: all 0.2s ease;
}
.layer-item:hover {
    border-color: #6f42c1 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
summary {
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

/* 텍스트 마커 기본 스타일 */

.text-marker {
  background: transparent;
  border: none;
}

.marker-text {
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: move;
}

/* ===== 텍스트 레이블 패널 ===== */
#text-panel {
    position: absolute;
    top: 10px;
    left: clamp(420px, 44vw, 560px);
    width: clamp(200px, 18vw, 260px);
    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 0.82rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* 패널이 화면 아래쪽에 뜨면 옵션이 많을 때 "텍스트 적용" 버튼이 화면 밖으로 밀려
   안 보이는 문제가 있었음 — 높이 상한 + 내부 스크롤로 항상 버튼까지 닿을 수 있게 함.
   실제 상한은 여는 시점에 map_16_text_panel.js가 남은 화면 높이로 다시 계산해 덮어씀. */
#text-panel-body {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

#text-panel-tabs {
    display: flex;
    gap: 3px;
    flex: 1;
}

/* ===== 플로팅 · 도킹 패널 공통 (데이터 불러오기 / 지도기능 등) ===== */
.floating-dock-panel {
    position: absolute;
    background: #fff;
    border: 1px solid #999;
    border-radius: 9px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1100;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.floating-dock-panel.docked-left {
    left: 0 !important; top: var(--top-bar-h, 38px) !important;
    max-height: calc(100vh - var(--top-bar-h, 38px)) !important;
    border-radius: 0 9px 9px 0; border-left: none;
}
.floating-dock-panel.docked-right {
    left: auto !important; right: 0 !important; top: var(--top-bar-h, 38px) !important;
    max-height: calc(100vh - var(--top-bar-h, 38px)) !important;
    border-radius: 9px 0 0 9px; border-right: none;
}
.floating-dock-tabs {
    display: flex;
    gap: 3px;
    padding: 7px 8px 0;
    flex-shrink: 0;
}
.floating-dock-body {
    padding: 0;
    overflow-y: auto;
    min-height: 0;
}
.floating-pane .sb-info { margin-bottom: 6px; }

/* 기본 오픈 위치·크기 — 패널마다 살짝 어긋나게 캐스케이드 (겹쳐 열려도 헤더가 보이도록) */
#data-load-panel {
    top: 96px;          /* 주소 검색 바(top:48px)와 겹치지 않게 아래로 */
    left: calc(var(--sidebar-w, 280px) + 14px);
    width: clamp(300px, 28vw, 380px);
    max-height: 82vh;
}
#map-features-panel {
    top: 128px;
    left: calc(var(--sidebar-w, 280px) + 34px);
    width: clamp(300px, 28vw, 380px);
    max-height: 82vh;
}

/* 태블릿·PC 에서도 브라우저 주소창/툴바 때문에 100vh 가 실제 보이는 높이보다 크다.
   인라인 style 의 height:calc(100vh - N) 를 --vvh 기준으로 덮어써서, 패널 하단의
   적용·저장 버튼이 항상 화면 안에 들어오게 한다. (모바일 규칙과 겹치지 않게 769px 이상만) */
@media (min-width: 769px) {
    #th-settings-panel, #sp-float-panel { height: calc(var(--vvh, 100vh) - 80px) !important; }
    #data-ops-panel                     { height: calc(var(--vvh, 100vh) - 100px) !important; }
}

/* ── 플로팅 팝업 공통 안전장치 ──────────────────────────────
   패널들이 인라인 style 로 고정 너비(300~480px)를 갖고 있어서, 화면이 좁으면
   패널이 화면 밖으로 삐져나가고 헤더 오른쪽의 최소화·닫기 버튼이 잘려서
   아예 못 누르는 문제가 있었음. 위치 보정은 clampToViewport(map_19_zindex.js)가,
   너비 상한은 여기서 담당한다. (!important 없음 — 모바일 전용 규칙이 이겨야 함) */
#data-ops-panel, #map-style-panel, #spatial-filter-panel, #th-settings-panel,
#sp-float-panel, #dataviz-panel, #graticule-style-panel, #box-grat-options-panel,
#text-marker-popup, #drawn-edit-popup, #col-manager-panel, #fao-float-panel,
#text-panel, .floating-dock-panel {
    max-width: calc(100vw - 12px);
}

/* ── 속성 테이블 컬럼 자동 너비 / 리사이즈 ── */
#attribute-table {
    table-layout: fixed;   /* th 너비 기준으로 고정 */
    width: auto;           /* 전역 table{width:100%} 오버라이드 — 컬럼 합산 너비만큼만 */
    border-collapse: collapse;
}
#attribute-table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 40px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    /* 길게 누르기로 열 메뉴를 열 때, 브라우저 기본 텍스트 선택·복사 팝업이 뜨지 않게 */
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}
#attribute-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 5px 8px;          /* 기존 10px → 조밀하게 */
    font-size: 12px;
}
#attribute-table tbody tr.ctx-selected td {
    background: #fff3cd !important;
    outline: 1px solid #ffc107;
    outline-offset: -1px;
}
#attribute-table td.data-cell.cell-selected {
    background: #cce5ff !important;
    outline: 1px solid #4a90d9;
    outline-offset: -1px;
}
#attribute-table th {
    padding: 4px 8px;
    font-size: 11px;
}
/* 컬럼 리사이즈 핸들 */
.col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    z-index: 3;
    user-select: none;
    flex-shrink: 0;
}
.col-resize-handle:hover,
.col-resize-handle.dragging {
    background: rgba(74, 111, 165, 0.45);
}

/* 테이블 컬럼 클릭 시 선택 강조 */
#table-header th {
    cursor: pointer;
    transition: background 0.15s;
}
#table-header th:hover {
    background: #dde;
}
#table-header th.selected-col {
    background: #444;
    color: white;
}

/* ===== 우클릭 컨텍스트 메뉴 ===== */
#text-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    z-index: 99999;
    min-width: 160px;
    overflow: hidden;
}

.context-item {
    padding: 8px 14px;
    font-size: 12px;
    cursor: pointer;
    color: #333;
    border-bottom: 1px solid #eee;
}
.context-item:last-child { border-bottom: none; }
.context-item:hover { background: #f0f0f0; }
.context-danger { color: #e03131; }
.context-danger:hover { background: #fff5f5; }

/* ===== 개별 스타일 팝업 ===== */
#text-individual-style {
    position: absolute;
    width: 240px;
    background: white;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 99998;
    overflow: hidden;
    font-size: 0.82rem;
}

/* 개별 수정된 레이어 칩 강조 */
.feature-chip.customized {
    border-color: #4a6fa5;
    background: #f0f4ff;
}
.feature-chip.customized::before {
    content: '✨';
    margin-right: 3px;
    font-size: 14px;
}

#col-manager-panel {
    position: fixed; /* absolute → fixed */
    background: white;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 8px;
    z-index: 99999; /* 최상단 */
    min-width: 150px;
    font-size: 12px;
    display: none;
}
/* ===== 계산기 버튼 ===== */
.calc-btn {
    padding: 8px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    transition: background 0.1s;
}
.calc-btn:hover { background: #f0f0f0; }
.calc-btn:active { background: #e0e0e0; }

.calc-op {
    background: #f5f0ff;
    color: #6f42c1;
    border-color: #d0b8ff;
}
.calc-op:hover { background: #ebe0ff; }

.calc-clear {
    background: #fff5f5;
    color: #dc3545;
    border-color: #ffcccc;
}
.calc-clear:hover { background: #ffe0e0; }

/* ===== 주제도 세부 설정 플로팅 패널 ===== */
#th-settings-panel {
    display: flex;
}
#th-settings-handle {
    cursor: move;
}
#th-settings-handle button {
    cursor: pointer;
    transition: background 0.15s;
}
#th-settings-handle button:hover {
    background: rgba(255,255,255,0.35) !important;
}
.th-stab-btn {
    transition: color 0.15s, border-color 0.15s;
}
.th-stab-btn:hover:not(.active) {
    color: #2c7be5 !important;
    background: #eef5ff !important;
}
.th-stab-btn.active {
    color: #2c7be5 !important;
    border-bottom: 2px solid #2c7be5 !important;
    background: #fff !important;
}
.th-stab-body {
    min-height: 0;
}

/* ===== 그래프 패널 ===== */
#chart-panel details > summary {
    list-style: none;
    user-select: none;
}
#chart-panel details > summary::-webkit-details-marker {
    display: none;
}
#chart-panel details[open] > summary::before {
    content: '▼ ';
}
#chart-panel details:not([open]) > summary::before {
    content: '▶ ';
}

/* 드롭존 활성화 */
#chart-y-drop.drag-over,
#chart-x-drop.drag-over {
    border-color: #4a6fa5;
    background: #f0f4ff;
    transform: scale(1.02);
}
#chart-y-drop.has-data {
    border-color: #4a6fa5;
    border-style: solid;
    background: #f0f4ff;
}
#chart-x-drop.has-data {
    border-color: #e67e22;
    border-style: solid;
    background: #fff8f0;
}

/* 옵션 행 */
.chart-opt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #555;
}
.chart-opt-row label {
    white-space: nowrap;
    min-width: 70px;
    color: #666;
}
.chart-opt-row input[type="color"] {
    width: 28px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
}
.chart-opt-row span {
    font-size: 14px;
    color: #888;
    min-width: 24px;
}

/* 패턴 버튼 */
.pattern-btn {
    padding: 3px 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: all 0.15s;
    line-height: 1;
}
.pattern-btn:hover {
    background: #f0f0f0;
    border-color: #aaa;
}
.pattern-btn.active {
    background: #4a6fa5;
    color: white;
    border-color: #4a6fa5;
}
/* ===== 그래프 패널: 통합 구조 (chart-graph-area 항상 표시) ===== */
#chart-panel-body {
    overflow: visible;
}
/* 캔버스 영역은 항상 고정 높이 유지 */
#chart-graph-area {
    height: auto;
    min-height: 300px;
}
/* 캔버스 직접 부모: flex:1 collapse 방지 */
#chart-graph-area > div:last-child > div:first-child {
    flex: none !important;
}

/* ===== 도구 패널 (hidden stub, 내용은 #right-sidebar로 이동) ===== */
#tool-panel { display: none !important; }

/* Canvas 자유 그리기 오버레이 */
#freedraw-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 450;
    pointer-events: none;
    touch-action: none;
}

/* 선택된 도구 */
.tool-grid button.active {
    background: #4a6fa5;
    color: white;
    border-color: #4a6fa5;
}

.leaflet-draw {
    display: none;
}

.calc-str-btn {
    padding: 3px 7px;
    font-size: 14px;
    background: #fff3e0;
    color: #e67e22;
    border: 1px solid #f0c080;
    border-radius: 3px;
    cursor: pointer;
    font-family: monospace;
}
.calc-str-btn:hover {
    background: #ffe0b2;
}
.osm-cat-btn {
    padding: 2px 7px;
    font-size: 14px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    color: #555;
}
.osm-cat-btn.active {
    background: #4a6fa5;
    color: white;
    border-color: #3a5f95;
}
.osm-result-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.1s;
}
.osm-result-item:hover {
    background: #f0f4ff;
}

/* ================================================================
   그래프 패널 모던 UI 리디자인
   ================================================================ */

/* ── 패널 전체 ── */
#chart-canvas-float {
    /* resize:both 핸들 표시 위해 overflow:auto (hidden이면 핸들 잘림) */
    overflow: auto;
}
#chart-canvas-float > #chart-canvas-wrapper {
    overflow: hidden;
}

#chart-panel {
    width: min(1140px, 92vw);
    min-width: 520px;
    /* min-height가 max-height보다 크면 CSS 규칙상 min-height가 항상 이겨서
       짧은 화면(높이 680px 이하)에서 하단 액션바가 다시 화면 밖으로 밀려남 —
       min도 같은 뷰포트 상한을 넘지 않게 해서 항상 max-height와 맞물리게 함 */
    min-height: min(580px, calc(var(--vvh, 100vh) - 100px)) !important;
    /* 높이 상한이 없으면 옵션이 많아질 때 패널이 화면 아래로 넘어가
       하단 액션바(저장/지도에 추가)가 아예 안 보이는 문제가 생김 — 상한 + 내부 스크롤로 방지 */
    max-height: calc(var(--vvh, 100vh) - 100px) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 44px rgba(0,0,0,0.22) !important;
    border: 1px solid #c8d4ea !important;
    font-size: 13px !important;
}

/* ── 헤더 ── */
#chart-panel-header {
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #354ea0 0%, #4a6fa5 100%) !important;
    border-radius: 10px 10px 0 0 !important;
}
#chart-panel-header > span:first-of-type {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}
#chart-panel-header > button {
    font-size: 13px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.15) !important;
    transition: background 0.15s !important;
}
#chart-panel-header > button:hover {
    background: rgba(255,255,255,0.28) !important;
}

/* ── 좌측 패널 ── */
#chart-left {
    width: 300px !important;
    background: #f7f9fc !important;
    border-right: 1px solid #dde4f0 !important;
}

/* ── 하단 액션바 (새 차트 / 저장 / 지도 추가) ── */
#chart-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f0f3fb;
    border-top: 1px solid #dde4f0;
    border-radius: 0 0 10px 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;   /* 떠다니는 차트 박스(absolute) 위에 표시 */
}
.cab-btn {
    border: 1px solid #c8d4ea;
    border-radius: 7px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    white-space: nowrap;
    min-height: 38px;
}
.cab-btn-ghost {
    background: #fff;
    color: #354152;
}
.cab-btn-ghost:hover { background: #eef3fb; border-color: #4a6fa5; }
/* 새 차트 — 흰색이라 안 보이던 문제: 연한 파랑 배경 + 파란 텍스트/테두리 */
#chart-action-bar #cfl-new-btn {
    background: #eef3fb;
    border-color: #4a6fa5;
    color: #354ea0;
}
#chart-action-bar #cfl-new-btn:hover { background: #dce8ff; box-shadow: 0 2px 6px rgba(74,111,165,0.2); }
.cab-btn-primary {
    background: linear-gradient(135deg, #354ea0, #4a6fa5);
    color: #fff;
    border-color: #354ea0;
    box-shadow: 0 2px 6px rgba(53,78,160,0.25);
}
.cab-btn-primary:hover { box-shadow: 0 3px 10px rgba(53,78,160,0.38); }

/* ── 카드 만들기 섹션 ── */
#chart-card-maker {
    padding: 14px !important;
    background: #eef2fa !important;
    border-bottom: 1px solid #dde4f0 !important;
    scrollbar-width: thin;
    scrollbar-color: #c5d0e8 transparent;
}

/* Wide mode 행 선택 컨테이너 */
#card-wide-rows {
    border: none !important;
    padding: 0 !important;
}
#card-wide-rows #wrow-search {
    font-size: 12px !important;
    padding: 4px 7px !important;
    border: 1px solid #c5d0e8 !important;
    border-radius: 4px !important;
}
#card-wide-rows #btn-wrow-all,
#card-wide-rows #btn-wrow-none {
    font-size: 11px !important;
    padding: 4px !important;
    border-radius: 4px !important;
}
#card-wide-rows > div:last-child {
    max-height: 180px !important;
    overflow-y: auto !important;
    border: 1px solid #c5d0e8 !important;
    border-radius: 4px !important;
    background: white !important;
    padding: 4px !important;
}
#chart-card-maker > div:first-child {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #354ea0 !important;
    margin-bottom: 10px !important;
}
#chart-card-maker label {
    font-size: 12px !important;
    color: #555 !important;
}
#card-source-select,
#card-x-select {
    font-size: 12px !important;
    padding: 5px 7px !important;
    border-radius: 5px !important;
    border: 1px solid #c5d0e8 !important;
}
#card-y-list,
#card-wide-cols,
#card-wide-rows {
    font-size: 12px !important;
    padding: 5px !important;
    border-color: #c5d0e8 !important;
    border-radius: 5px !important;
}
#card-name-input {
    font-size: 12px !important;
    padding: 6px 8px !important;
    border-radius: 5px !important;
    border: 1px solid #c5d0e8 !important;
}
#btn-add-card {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
}

/* ── 저장소 영역 ── */
#chart-store-empty {
    font-size: 12px !important;
    padding: 20px 0 !important;
}

/* ── JS 렌더링: 카드 아이템 ── */
.chart-card-item {
    border: 1px solid #dde4f0 !important;
    border-radius: 7px !important;
    padding: 9px 11px !important;
    background: white !important;
    font-size: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.15s, border-color 0.15s !important;
}
.chart-card-item:hover {
    border-color: #4a6fa5 !important;
    box-shadow: 0 3px 10px rgba(74,111,165,0.18) !important;
}
.chart-card-item .btn-card-edit {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}
.chart-card-item .btn-card-del {
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

/* ── JS 렌더링: 시리즈 구성 행 ── */
#chart-series-config > div {
    font-size: 11px !important;
    padding: 5px 7px !important;
    border-radius: 5px !important;
    background: #f7f9fc !important;
    border: 1px solid #e4ecf8 !important;
}
#chart-series-config > div > span {
    font-size: 12px !important;
    max-width: 100px !important;
}
#chart-series-config > div select {
    font-size: 11px !important;
    padding: 3px 5px !important;
    border-radius: 4px !important;
    border-color: #c5d0e8 !important;
}
#chart-series-config > div input[type="color"] {
    width: 22px !important;
    height: 20px !important;
}
#chart-series-config > div[style*="color:#aaa"] {
    font-size: 12px !important;
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
}

/* ── 캔버스 래퍼 ── */
#chart-canvas-wrapper {
    min-height: 320px !important;
    padding: 10px 12px !important;
}
#chart-empty-msg {
    font-size: 13px !important;
}
#chart-empty-msg > div:first-child {
    font-size: 38px !important;
    margin-bottom: 8px !important;
}

/* ── X 필터 버튼/레이블 ── */
#chart-select-all,
#chart-deselect-all {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}
#chart-data-select-info {
    font-size: 11px !important;
}
#chart-data-select-list {
    max-height: 72px !important;
    font-size: 11px !important;
    gap: 4px !important;
}

/* ── 차트 타입 ── */
#chart-type-select {
    font-size: 12px !important;
    padding: 5px 8px !important;
    border-radius: 5px !important;
    border: 1px solid #c5d0e8 !important;
}

/* ── 옵션 섹션 ── */
#btn-toggle-chart-options {
    font-size: 12px !important;
    color: #555 !important;
    padding: 8px 0 !important;
    font-weight: 500 !important;
}
#chart-title,
#chart-xlabel,
#chart-ylabel {
    font-size: 12px !important;
    padding: 5px 7px !important;
    border-radius: 4px !important;
    border: 1px solid #dde4f0 !important;
}
#chart-options-body label {
    font-size: 11px !important;
    color: #666 !important;
}
#chart-options-body select {
    font-size: 11px !important;
    padding: 3px 5px !important;
    border-radius: 4px !important;
}
#chart-font-val,
#chart-title-size-val,
#chart-xtick-size-val,
#chart-ytick-size-val,
#chart-xtick-rotation-val {
    font-size: 11px !important;
}

/* ── 하단 버튼 ── */
#chart-download {
    padding: 6px 16px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
    border: 1px solid #c5d0e8 !important;
}
#chart-tomap {
    padding: 6px 16px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
}
#chart-info {
    font-size: 12px !important;
    color: #777 !important;
}

/* 차트 옵션 컨테이너 전체 스타일 */
  .chart-options-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    max-width: 400px; /* 필요에 따라 너비 조정 */
    margin-bottom: 20px;
  }

  /* 토글 버튼 */
  .toggle-btn {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
  }
  .toggle-btn:hover {
    background-color: #f1f5f9;
    border-radius: 8px;
  }

  /* 옵션 본문 영역 */
  .options-body {
    display: none; /* JS로 토글 (임시 확인시 block으로 변경) */
    padding: 0 16px 16px 16px;
  }

  /* 섹션별 그룹화 및 구분선 */
  .option-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
  }
  .option-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* 각 입력 줄 */
  .option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
  }

  /* 입력창 라벨 */
  .option-label {
    width: 65px;
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
    font-size: 13px;
  }

  /* 텍스트 입력창 */
  .input-text {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
  }
  .input-text:focus { border-color: #94a3b8; }

  /* 슬라이더, 컬러 피커, 셀렉트박스 등 */
  .input-range { flex: 1; cursor: pointer; }
  .input-color {
    width: 28px;
    height: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    background: none;
  }
  .val-display {
    width: 30px;
    text-align: right;
    color: #64748b;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .select-box {
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
  }
  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #475569;
    font-size: 13px;
  }
/* ── 차트 v4 드래그앤드롭 ── */
.chart-drop-zone {
    border: 2px dashed #c5d0e8;
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
    min-height: 32px;
    transition: border-color 0.15s, background 0.15s;
}
.chart-drop-zone.drop-zone-hover {
    border-color: #4a6fa5;
    background: #e8f0ff;
}
.drop-hint {
    font-size: 14px;
    color: #bbb;
    font-style: italic;
}
.chart-tag {
    display: flex;
    width: 100%;             /* 부모 너비에 맞춤 */
    max-width: none;         /* 기존 180px 제한 해제 (중요!) */
    align-items: center;
    box-sizing: border-box;  /* 패딩이 너비에 포함되도록 함 */
    gap: 4px;
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid #c5d0e8;
    background: #eef2fa;
    font-size: 11px;
    font-weight: 500;
    color: #354ea0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-tag-remove {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #999;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.chart-tag-remove:hover { color: #e53e3e; }

/* 시리즈 카드 */
.series-card {
    background: #fff;
    border: 1px solid #dde4f0;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
}

/* 출처(데이터셋) 그룹 — 같은 출처 시리즈를 묶고 유형·축 일괄 설정 */
.series-group {
    border: 1px solid #c8d4ea;
    border-radius: 8px;
    margin-bottom: 7px;
    overflow: hidden;
    background: #fbfcfe;
}
.series-group-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px 8px;
    background: #eef2fa;
    border-bottom: 1px solid #dde4f0;
}
.series-group-title {
    font-size: 11px;
    font-weight: 700;
    color: #354ea0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.series-group-count {
    font-size: 9px;
    font-weight: 400;
    color: #fff;
    background: #8ba3c7;
    border-radius: 8px;
    padding: 1px 6px;
    margin-left: 4px;
}
.series-group-ctrls { display: flex; gap: 4px; flex-wrap: wrap; }
.series-grp-select {
    flex: 1 1 auto;
    min-width: 58px;
    font-size: 10px;
    padding: 4px 5px;
    border: 1px solid #b8c8e8;
    border-radius: 5px;
    background: #fff;
    color: #354152;
    cursor: pointer;
    font-weight: 600;
}
.series-group-body { padding: 5px 6px 2px; }
/* 그룹 안 카드는 여백 줄임 */
.series-group-body .series-card { margin-bottom: 4px; }
.series-card-header {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: #f7f9fc;
    border-bottom: 1px solid #eaeff8;
}
.series-card-title {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.series-label-edit {
    font-size: 12px;
    font-weight: 600;
    color: #2a3f6a;
    border-bottom: 1.5px dashed #b8c8e0;
    padding: 1px 3px 0;
    border-radius: 2px 2px 0 0;
    transition: border-color 0.15s, background 0.15s;
    cursor: text;
}
.series-label-edit:hover {
    border-bottom-color: #4a6fa5;
    background: #eef3fb;
}
.series-label-edit:focus {
    outline: none;
    border-bottom: 2px solid #4a6fa5;
    background: #fff;
    box-shadow: 0 1px 0 #4a6fa5;
}
/* 연필 아이콘 — 카드 헤더 호버 시 표시 */
.sle-pencil {
    font-size: 11px;
    color: #4a6fa5;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    flex-shrink: 0;
    user-select: none;
}
.series-card-header:hover .sle-pencil { opacity: 1; }
.series-card-del {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #bbb;
    padding: 0 2px;
    line-height: 1;
}
.series-card-del:hover { color: #e53e3e; }
.series-card-body {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.series-opt-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.series-opt-label {
    width: 36px;
    color: #888;
    flex-shrink: 0;
    font-size: 12px;
}
.series-opt-select {
    flex: 1;
    font-size: 12px;
    padding: 3px 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* 차트 패널 탭 버튼 */
.chart-tab-btn {
    flex: 1;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.chart-tab-btn:hover { color: #4a6fa5; }
.chart-tab-btn.active { color: #354ea0; border-bottom-color: #354ea0; background: #fff; }
/* 차트 탭 버튼 — PC 에선 숨김 (우측에 항상 캔버스 표시되므로). 모바일 미디어쿼리에서 노출 */
.chart-tab-mobile-only { display: none; }

/* ── 차트 종류 토글 바 (막대/선/곡선/영역/가로/원/도넛) ── */
.chart-type-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    cursor: grab;          /* PC 드래그 스크롤 단서 */
}
.chart-type-bar:active { cursor: grabbing; }
.chart-type-bar::-webkit-scrollbar { display: none; }

/* 필터 하단 시트 — 닫기 버튼 (모바일) */
.tag-filter-close {
    position: sticky;
    top: 0;
    width: 100%;
    background: #f0f3fb;
    border: none;
    border-bottom: 1px solid #dde4f0;
    padding: 13px;
    font-size: 13px;
    font-weight: 700;
    color: #4a6fa5;
    cursor: pointer;
    z-index: 3;
}
.tag-filter-close:active { background: #dce8ff; }
.ct-btn {
    flex: 1 0 auto;
    min-width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 6px;
    background: #fff;
    border: 1px solid #d0d6e0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ct-btn .ct-ico { font-size: 17px; line-height: 1; }
.ct-btn .ct-lbl { font-size: 10px; color: #5a6a7c; font-weight: 600; line-height: 1; }
.ct-btn:hover { background: #f0f4fb; border-color: #b8c8e8; }
.ct-btn.active {
    background: #dce8ff;
    border-color: #4a6fa5;
    box-shadow: 0 0 0 1px #4a6fa5 inset;
}
.ct-btn.active .ct-lbl { color: #2c4870; font-weight: 700; }

@media (max-width: 768px) {
    .ct-btn { min-width: 54px; padding: 8px 6px; min-height: 50px; }
    .ct-btn .ct-ico { font-size: 20px; }
    .ct-btn .ct-lbl { font-size: 11px; }
}

/* ── 단계 번호 뱃지 (① ②) ── */
.chart-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px; height: 17px;
    background: #4a6fa5;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    margin-right: 3px;
    vertical-align: middle;
}

/* ── 고급: 색으로 나누기 (접힘 섹션) ── */
.chart-advanced-group {
    margin-top: 8px;
    border-top: 1px dashed #dde4f0;
    padding-top: 8px;
}
.chart-advanced-group > summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: #8895a8;
    list-style: none;
    padding: 4px 2px;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.chart-advanced-group > summary::-webkit-details-marker { display: none; }
.chart-advanced-group > summary::before {
    content: '▸';
    transition: transform 0.15s;
    font-size: 10px;
    color: #aab;
}
.chart-advanced-group[open] > summary::before { transform: rotate(90deg); }
.chart-advanced-group > summary:hover { color: #4a6fa5; }
.chart-advanced-group .adv-hint {
    font-weight: 400;
    font-size: 9.5px;
    color: #bbc;
}

/* ── 차트 슬롯 라벨 (가로축/값/그룹) + 선택 버튼 ── */
.chart-slot-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #4a5568;
}
.chart-slot-label em {
    font-style: normal;
    font-weight: 400;
    font-size: 9.5px;
    color: #aab;
    margin-left: 3px;
}
.chart-pick-btn {
    flex-shrink: 0;
    border: 1px solid #4a6fa5;
    background: #4a6fa5;
    color: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
    min-height: 30px;
    white-space: nowrap;
}
.chart-pick-btn:hover { background: #3a5a90; box-shadow: 0 2px 6px rgba(74,111,165,0.3); }
.chart-pick-btn:active { transform: translateY(1px); }

/* ── 컬럼 선택 피커 팝오버 ── */
.sc-col-picker {
    position: fixed;
    z-index: 11000;
    background: #fff;
    border: 1px solid #c8d4ea;
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(20,30,50,0.22);
    padding: 6px;
    min-width: 200px;
    max-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    animation: scPickerIn 0.14s ease-out;
}
@keyframes scPickerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sc-col-picker-head {
    font-size: 10px;
    font-weight: 700;
    color: #8895a8;
    text-transform: none;
    letter-spacing: 0.3px;
    padding: 4px 8px 6px;
    border-bottom: 1px solid #eef1f6;
    margin-bottom: 4px;
}

/* 데이터셋(출처) 선택 바 */
.sc-ds-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 2px 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef1f6;
}
.sc-ds-label { font-size: 14px; flex-shrink: 0; }
.sc-ds-select {
    flex: 1;
    min-width: 0;
    padding: 7px 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #c8d4ea;
    border-radius: 6px;
    background: #f7f9fc;
    color: #2c3e50;
    cursor: pointer;
}
/* 검색창 */
.sc-search {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    font-size: 12px;
    border: 1px solid #d0d6e0;
    border-radius: 7px;
    margin: 0 0 6px;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.sc-search:focus { border-color: #4a6fa5; box-shadow: 0 0 0 3px rgba(74,111,165,0.12); }

/* 값 피커 모드 토글 (항목별 값 / 가로 시계열) */
.sc-mode-bar {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f0f3fb;
    border-radius: 8px;
    margin: 2px 2px 6px;
}
.sc-mode-btn {
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5a6a7c;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.sc-mode-btn.is-active {
    background: #fff;
    color: #354ea0;
    border-color: #c8d4ea;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.sc-mode-hint {
    font-size: 10.5px;
    color: #8895a8;
    line-height: 1.4;
    padding: 0 8px 8px;
    border-bottom: 1px solid #eef1f6;
    margin-bottom: 4px;
}
.sc-col-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 9px 10px;
    font-size: 13px;
    color: #2c3e50;
    cursor: pointer;
    transition: background 0.1s;
    min-height: 40px;
}
.sc-col-item:hover { background: #eef3fb; }
.sc-col-item.is-sel { background: #dce8ff; color: #2c4870; font-weight: 600; }
.sc-col-icon { flex-shrink: 0; font-size: 14px; width: 18px; text-align: center; align-self: flex-start; padding-top: 2px; }
.sc-col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* 이름 + 샘플(아래 작게) 세로 레이아웃 */
.sc-col-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sc-col-text .sc-col-name { flex: none; }
.sc-col-sub {
    font-size: 10px;
    color: #9aa7b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}
.sc-col-item.is-sel .sc-col-sub { color: #6a82a8; }
.sc-col-check {
    flex-shrink: 0; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 13px; font-weight: 800;
    background: #eef1f6; color: #8895a8;
}
.sc-col-item.is-sel .sc-col-check { background: #4a6fa5; color: #fff; }
.sc-col-empty { padding: 14px 12px; font-size: 12px; color: #aab; line-height: 1.5; text-align: center; }

/* 멀티 선택 — 하단 적용 바 (sticky) */
.sc-col-apply-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 6px 4px 2px;
    margin-top: 4px;
    border-top: 1px solid #eef1f6;
}
.sc-col-apply {
    width: 100%;
    border: none;
    border-radius: 7px;
    padding: 11px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #354ea0, #4a6fa5);
    cursor: pointer;
    transition: opacity 0.12s, box-shadow 0.12s;
    min-height: 42px;
}
.sc-col-apply:hover:not(:disabled) { box-shadow: 0 3px 10px rgba(53,78,160,0.35); }
.sc-col-apply:disabled { background: #c8d0dc; color: #fff; cursor: default; }

/* 모바일 — 피커를 화면 하단 시트로 (터치 친화) */
@media (max-width: 768px) {
    .chart-slot-label { font-size: 12px; }
    .chart-pick-btn { min-height: 34px; padding: 6px 12px; font-size: 12px; }
    .sc-col-picker {
        left: 0 !important; right: 0 !important;
        bottom: 0 !important; top: auto !important;
        max-width: 100vw !important;
        width: 100vw;
        border-radius: 16px 16px 0 0;
        max-height: 55vh;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
        animation: scPickerSheetIn 0.2s cubic-bezier(0.2,0.8,0.2,1);
    }
    @keyframes scPickerSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .sc-col-item { min-height: 48px; font-size: 14px; }
}

/* 패턴 스와치 */
.psw {
    width: 20px; height: 20px;
    border-radius: 3px;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color .1s;
}
.psw:hover { border-color: #4a6fa5; }
.psw.psw-active { border-color: #354ea0; box-shadow: 0 0 0 1px #354ea0; }

/* 꾸미기 탭 내 옵션 섹션 */
.style-section {
    border-bottom: 1px solid #edf0f6;
    padding: 9px 0 7px;
}
.style-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #4a6fa5;
    margin-bottom: 6px;
}

/* 범례 위치 프리셋 버튼 */
.lgp-btn {
    width: 26px; height: 26px;
    border: 1px solid #c8d4ea;
    border-radius: 4px;
    background: #f7f9fc;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s, border-color .1s;
}
.lgp-btn:hover { background: #dce8ff; border-color: #4a6fa5; }
.lgp-btn.active { background: #4a6fa5; color: #fff; border-color: #354ea0; }

/* ── 차트 모드 활성 시 테이블 하이라이트 ── */
#attribute-table.chart-mode-active th[data-key] {
    position: relative;
    transition: background 0.12s;
}
#attribute-table.chart-mode-active th[data-key]:hover {
    background: #dbeafe !important;
    outline: 2px solid #4a6fa5;
    outline-offset: -2px;
    cursor: grab;
}
#attribute-table.chart-mode-active .chart-name-cell:hover {
    background: #dcfce7 !important;
    outline: 2px solid #28a745;
    outline-offset: -2px;
    cursor: grab;
}

/* 글로브 모드: 지도 미니맵 */
#map.map-minimap {
    position: fixed !important;
    top: 56px;
    left: 16px;
    bottom: auto;
    right: auto;
    width: 380px;
    height: 260px;
    z-index: 8000 !important;
    border: 2px solid #4a6fa5;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    will-change: transform;
}

.minimap-resize-handle {
    position: absolute;
    bottom: 0; right: 0;
    width: 16px; height: 16px;
    cursor: se-resize;
    z-index: 9002;
    background: linear-gradient(135deg, transparent 50%, #4a6fa5 50%);
    border-radius: 0 0 4px 0;
}

/* 드래그 핸들 스타일 */
#map-drag-handle {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 24px;
    background: #4a6fa5;
    color: white;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    z-index: 9001; /* 지도보다 위 */
    border-radius: 4px 4px 0 0;
}
#globe-container {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 7000;
    background: #1a1a2e;
    flex-direction: column;
}
/* 글로브 내부 편집 패널 */
#globe-edit-panel {
    display: none;
    position: absolute;
    top: 56px; right: 16px;
    width: 260px;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    background: rgba(20,25,40,0.95);
    border: 1px solid #3a5a8a;
    border-radius: 8px;
    padding: 12px 14px;
    color: #ddd;
    font-size: 13px;
    z-index: 7100;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
#globe-edit-panel.open { display: block; }
#globe-edit-panel h4 {
    margin: 0 0 10px; font-size: 13px; color: #8ab4e8;
    border-bottom: 1px solid #2a4a6a; padding-bottom: 6px;
}
#globe-edit-panel label { display: block; margin: 4px 0 2px; color: #aaa; font-size: 12px; }
#globe-edit-panel select, #globe-edit-panel input[type=range] {
    width: 100%; box-sizing: border-box;
}
#globe-edit-panel select {
    background: #1a2a3a; color: #ddd; border: 1px solid #3a5a7a;
    border-radius: 4px; padding: 4px 6px;
}
#globe-edit-panel input[type=number] {
    background: #1a2a3a; color: #ddd; border: 1px solid #3a5a7a;
    border-radius: 3px; padding: 2px 4px;
}
#globe-edit-panel .close-btn {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: #888; cursor: pointer; font-size: 16px;
}
.globe-section {
    border-top: 1px solid #2a3a4a;
    padding: 8px 0 4px;
    margin-top: 4px;
}
.globe-section-title {
    display: block; font-size: 11px; font-weight: bold;
    color: #8ab4e8 !important; margin-bottom: 6px !important;
}
/* 스크린샷 모드 버튼 */
#sc-btn-full.sc-active, #sc-btn-feat.sc-active {
    background: #4a6fa5 !important;
    color: white !important;
    border-color: #4a6fa5 !important;
}
#sc-btn-full:not(.sc-active), #sc-btn-feat:not(.sc-active) {
    background: #f0f0f0 !important;
    color: #333 !important;
}

#globe-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 13px;
    flex-shrink: 0;
}
#globe-controls label { color: #ccc; font-size: 12px; }
#globe-controls select {
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #555;
    background: #222;
    color: white;
    font-size: 12px;
}

/* WebGL 모달 전용 스타일 */
#webgl-modal {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background-color: #000000; /* 배경을 완전히 검은색으로 */
    z-index: 99999 !important; /* 리플렛(보통 1000대)보다 훨씬 높게 설정 */
}

#webgl-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* 공간분석 처리 중 스피너 */
.sp-spinner {
    display: inline-block;
    width: 11px; height: 11px;
    border: 2px solid #a0c4e8;
    border-top-color: #2980b9;
    border-radius: 50%;
    animation: sp-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* ===== 다중 플로팅 차트 박스 ===== */
.chart-float-box {
    position: absolute;
    min-width: 220px; min-height: 130px;
    background: #fff;
    border: 1.5px solid #c8d4ea;
    border-radius: 7px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.13);
    display: flex; flex-direction: column;
    overflow: hidden;
    resize: both;
    z-index: 10;
    cursor: default;
}
.chart-float-box.cfl-active {
    border-color: #4a6fa5;
    box-shadow: 0 4px 18px rgba(74,111,165,0.28);
}
.cfl-handle {
    height: 22px; flex-shrink: 0;
    cursor: move; user-select: none;
    background: linear-gradient(135deg, #5b8fd4, #7aaee8); /* JS가 덮어씀 */
    border-bottom: 1px solid rgba(0,0,0,0.10);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px;
    font-size: 11px; color: #7a8db0; font-weight: 600;
}
.cfl-handle .cfl-title {
    flex: 0 1 160px;
    max-width: 160px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-radius: 3px; padding: 1px 4px;
    outline: none;
    cursor: text;
    transition: background 0.15s;
}
.cfl-handle .cfl-title:hover  { background: rgba(255,255,255,0.18); }
.cfl-handle .cfl-title:focus  { background: rgba(255,255,255,0.90); color: #2a3f6a; border-radius: 3px; }
/* 타이틀과 버튼 사이 드래그 전용 공간 */
.cfl-drag-zone {
    flex: 1;
    cursor: move;
    min-width: 20px;
}
.cfl-handle .cfl-max,
.cfl-handle .cfl-close {
    border: none; background: rgba(0,0,0,0.10); color: rgba(255,255,255,0.85);
    border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 12px; flex-shrink: 0;
    transition: background 0.12s;
}
.cfl-handle .cfl-max:hover   { background: rgba(255,255,255,0.28); color: #fff; }
.cfl-handle .cfl-close:hover { background: rgba(200,40,40,0.55);  color: #fff; }
.cfl-wrapper {
    flex: 1; position: relative; overflow: hidden; padding: 6px 8px;
}
#cfl-new-btn {
    border: none;
    background: rgba(255,255,255,0.18);
    color: white;
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
}
#cfl-new-btn:hover { background: rgba(255,255,255,0.30); }
#cfl-active-label {
    flex-shrink: 0;
    transition: background 0.2s;
}