/* ============================================================
   style.css - 나만의 미니 QGIS v3
============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif;overflow:hidden;font-weight:400;}

/* ══ 상단 고정 바 ══ */
#topBar{position:fixed;top:0;left:220px;right:0;height:44px;background:#142035;border-bottom:1px solid #0d1929;display:flex;align-items:center;padding:0 16px;gap:0;z-index:200;box-shadow:0 2px 6px rgba(0,0,0,.3);}
#topBarLeft{display:flex;align-items:center;gap:8px;min-width:180px;}
#siteLogo{width:28px;height:28px;border-radius:6px;}
#siteTitle{font-size:15px;font-weight:600;color:#222;}
#topBarNav{display:flex;gap:4px;flex:1;justify-content:flex-start;align-items:center;}
.top-nav-btn{padding:5px 14px;border:none;background:none;font-size:13px;color:#e8f4ff;cursor:pointer;border-radius:6px;font-weight:600;}
.top-nav-btn:hover{background:#254d6e;color:#fff;}
#topBarRight{min-width:120px;display:flex;justify-content:flex-end;}
#btnSaveAll{
    padding:6px 16px;
    background:transparent;
    color:#a8cef0;
    border:1px solid #2a5a8a;
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
    font-weight:500;
    font-family:'Noto Sans KR',sans-serif;
    letter-spacing:-0.2px;
    transition:all .2s;
    white-space:nowrap;
    height:36px;
}
#btnSaveAll:hover{
    background:#a8cef0;
    color:#0d1929;
    border-color:#a8cef0;
    font-weight:600;
}

/* ══ 메인 툴바 ══ */
#mainToolbar{position:fixed;top:44px;left:220px;right:0;height:52px;min-height:52px;max-height:52px;background:#142035;border-bottom:1px solid #0d1929;display:flex;align-items:center;padding:0 8px;gap:2px;z-index:199;overflow-x:auto;flex-wrap:nowrap;}
.tb-group{display:flex;align-items:center;}
.tb-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border:none;
    background:transparent;
    cursor:pointer;
    border-radius:6px;
    min-width:48px;
    height:48px;
    transition:background .15s;
    position:relative;
}
.tb-btn:hover{background:#1e3a5a;}
.tb-btn.tb-active{background:#2563a8;}
.tb-icon{display:none;}  /* 아이콘 완전 숨김 */
.tb-label-row{
    display:flex;
    align-items:center;
    gap:2px;
}
.tb-label{
    font-size:12px;
    font-weight:500;
    color:#a8cef0;
    white-space:nowrap;
    line-height:1;
    font-family:'Noto Sans KR',sans-serif;
    letter-spacing:-0.3px;
}
.tb-btn.tb-active .tb-label{color:#e8f4ff;}
.tb-arrow{display:none;}

.tb-divider{width:1px;height:32px;background:#ddd;margin:0 4px;}

/* ══ 플로팅 패널 (드래그 가능) ══ */
.float-panel{position:fixed;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.18);z-index:300;min-width:200px;overflow:hidden;user-select:none;}
.float-panel-header{background:#1e3a5a;color:#a8d4f8;padding:10px 14px;font-size:13px;font-weight:600;cursor:move;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #0d1929;border-radius:8px 8px 0 0;}
.float-close{background:none;border:none;cursor:pointer;font-size:15px;color:#aaa;padding:0;line-height:1;}
.float-close:hover{color:#c8e4ff;}
.float-panel-body{padding:12px 14px;display:flex;flex-direction:column;gap:5px;}

.sub-btn{padding:8px 12px;border:1px solid #eee;border-radius:7px;background:#fafafa;font-size:13px;cursor:pointer;text-align:left;transition:background .12s;}
.sub-btn:hover{background:#e8f0fe;border-color:#0078ff;color:#0078ff;}
.sub-btn.active{background:#0078ff;color:white;border-color:#0078ff;}
.sub-btn.danger{color:#ee6152;}
.sub-btn.danger:hover{background:#fff0ee;border-color:#ee6152;}

.overlay-check{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;padding:4px 0;}
.overlay-check input{width:15px;height:15px;}

/* ══ 탭 ══ */
.tab-row{display:flex;gap:4px;margin-bottom:10px;}
.tab-btn{flex:1;padding:6px;border:1px solid #ddd;border-radius:6px;background:#f5f5f5;font-size:12px;cursor:pointer;}
.tab-btn.active{background:#1e3a5a;color:#a8d4f8;border-color:#2a5a8a;}

/* ══ 검색 ══ */
.search-input{width:100%;padding:7px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;margin-bottom:6px;}
.search-btn{width:100%;padding:7px;background:#1e3a5a;color:#a8d4f8;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:background .15s;}
.search-btn:hover{background:#2a5a8a;color:#c8e4ff;}
.search-result-item{padding:7px 10px;border-bottom:1px solid #f0f0f0;cursor:pointer;border-radius:4px;font-size:12px;}
.search-result-item:hover{background:#f0f6ff;}
.search-result-item .s-name{font-weight:500;color:#222;}
.search-result-item .s-addr{color:#888;font-size:11px;margin-top:2px;}

/* ══ 폼 ══ */
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.form-row label:first-child{font-size:12px;color:#666;width:72px;flex-shrink:0;}
.form-row select,.form-row input{flex:1;padding:6px 8px;border:1px solid #ddd;border-radius:6px;font-size:12px;}

/* ══ 통계 결과 ══ */
.stats-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px;}
.stats-table th{background:#f5f5f5;padding:6px 8px;border:1px solid #e0e0e0;text-align:left;}
.stats-table td{padding:6px 8px;border:1px solid #e0e0e0;}

/* ══ 모달 ══ */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;}
.modal-box{background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.25);width:440px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-box.wide{width:720px;}
.modal-title{padding:16px 20px;font-size:15px;font-weight:600;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-close{background:none;border:none;cursor:pointer;font-size:18px;color:#aaa;}
.modal-close:hover{color:#c8e4ff;}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1;}
.modal-body.no-pad{padding:0;overflow:auto;}
.modal-btn{flex:1;padding:9px;border:1px solid #ddd;border-radius:8px;background:#f9f9f9;font-size:13px;cursor:pointer;}
.modal-btn:hover{background:#eee;}
.modal-btn.primary{background:#1e3a5a;color:#a8d4f8;border-color:#2a5a8a;}
.modal-btn.primary:hover{background:#2a5a8a;color:#c8e4ff;}
.edit-field-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.edit-field-row label{font-size:12px;color:#777;width:100px;flex-shrink:0;}
.edit-field-row input{flex:1;padding:6px 8px;border:1px solid #ddd;border-radius:6px;font-size:13px;}

/* ══ 속성 테이블 ══ */
#attrTableWrap{overflow:auto;max-height:55vh;}
#attrTableWrap table{width:100%;border-collapse:collapse;font-size:12px;}
#attrTableWrap th{background:#f5f5f5;padding:8px 10px;border:1px solid #e0e0e0;white-space:nowrap;font-weight:500;position:sticky;top:0;}
#attrTableWrap td{padding:7px 10px;border:1px solid #e0e0e0;white-space:nowrap;}
#attrTableWrap tr:hover td{background:#f0f6ff;}
#attrTableWrap tr.selected td{background:#cde;font-weight:500;}

/* ══ 메인 컨테이너 ══ */
/* 레이어 패널(220px)을 제외한 나머지 영역 */
#container{position:fixed;top:96px;left:220px;right:0;bottom:0;}
#mapWrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
#container.view_roadview #mapWrapper{position:absolute;width:300px;height:190px;bottom:20px;right:20px;left:auto;top:auto;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.5);z-index:20;overflow:hidden;}
#map{width:100%;height:100%;position:relative;}
#rvWrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
#container.view_roadview #rvWrapper{z-index:10;}
#roadview{width:100%;height:100%;}
#rvClose{display:none;position:absolute;top:12px;left:12px;z-index:30;cursor:pointer;background:#fff;border-radius:4px;border:1px solid #c8c8c8;box-shadow:0 1px #888;padding:4px;}
#rvClose .img{display:block;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/rv_close.png) no-repeat;width:14px;height:14px;}
#container.view_roadview #rvClose{display:block;}
#map.roadview-cursor{cursor:url('https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png') 13 46,crosshair;}

/* ══ 레이어 패널 - QGIS/포토샵 스타일 좌측 고정 ══ */
/* ══ 레이어 패널 - 좌측 고정 (QGIS/포토샵 스타일, 라이트 테마) ══ */
#geojsonPanel{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:220px;
    z-index:201;
    background:#1a2740;
    display:flex;
    flex-direction:column;
    font-size:12px;
    border-right:1px solid #0d1929;
    box-shadow:2px 0 8px rgba(0,0,0,.35);
    overflow:hidden;
}
/* 레이어 패널 상단: 사이트 로고+제목 구역
   높이 = topBar(44px) + mainToolbar(52px) = 96px
   → 나중에 배너 이미지(220×96px)로 교체 가능 */
#geojsonPanelTop{
    height:96px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    background:#142035;
    border-bottom:1px solid #0d1929;
    flex-shrink:0;
    gap:6px;
    cursor:pointer;
    transition:background .15s;
}
#geojsonPanelTop:hover{ background:#1a2a44; }
#geojsonPanelTop .site-logo{ font-size:28px; line-height:1; }
#geojsonPanelTop .site-name{
    font-size:13px;
    font-weight:700;
    color:#7eb8f7;
    white-space:nowrap;
    text-align:center;
    line-height:1.3;
    letter-spacing:0.3px;
}
/* 레이어 패널 헤더 */
#geojsonPanelHeader{
    padding:8px 12px;
    font-weight:600;
    font-size:12px;
    color:#333;
    border-bottom:1px solid #dde0e6;
    display:flex;align-items:center;
    justify-content:space-between;
    background:#eceef2;
    flex-shrink:0;
    user-select:none;
    margin-top:0;
    /* mainToolbar와 같은 top에 위치 */
    margin-top:0;
}
#geojsonLayerList{
    overflow-y:auto;
    flex:1;
    background:#1a2740;
}
#geojsonLayerList::-webkit-scrollbar{width:4px;}
#geojsonLayerList::-webkit-scrollbar-track{background:#142035;}
#geojsonLayerList::-webkit-scrollbar-thumb{background:#2a4a6e;border-radius:2px;}
#geojsonLayerList::-webkit-scrollbar-thumb:hover{background:#3a6a9e;}

.geojson-layer-item{
    border-bottom:1px solid #0d1929;
}
.geojson-layer-item:last-child{border-bottom:none;}
.layer-row1{
    display:flex;align-items:center;
    padding:7px 8px;gap:5px;
    cursor:default;
    transition:background .12s;
}
.layer-row1:hover{background:#1e2f4a;}
.layer-row2{
    padding:4px 10px 8px;
    display:none;
    background:#142035;
    border-top:1px solid #0d1929;
}
.layer-row2.open{display:block;}
.layer-color-btn{
    width:16px;height:16px;border-radius:3px;
    border:1px solid #2a4a6e;cursor:pointer;
    flex-shrink:0;padding:0;
}
.layer-name{
    flex:1;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:12px;
    color:#8ab4e0;
}
.layer-icon-btn{
    cursor:pointer;font-size:12px;flex-shrink:0;
    opacity:.55;background:none;border:none;
    padding:2px;color:#5a8fc4;
}
.layer-icon-btn:hover{opacity:1;color:#7eb8f7;}
.layer-opacity{
    width:100%;margin:4px 0;
    accent-color:#4fc3f7;
}
.layer-sub-btns{
    display:flex;gap:3px;flex-wrap:wrap;margin-top:5px;
}
.layer-sub-btn{
    padding:3px 7px;border:1px solid #1e3a5a;
    border-radius:4px;background:#1a2740;
    font-size:10px;cursor:pointer;
    white-space:nowrap;color:#5a8fc4;
}
.layer-sub-btn:hover{background:#1e3a5a;border-color:#4fc3f7;color:#7eb8f7;}
#geojsonDropzone{
    padding:16px 12px;
    margin:8px 10px 10px;
    border:1.5px dashed #2a5a8a;
    border-radius:8px;
    text-align:center;
    color:#7eb8f7;
    font-size:11px;
    font-weight:500;
    cursor:pointer;
    flex-shrink:0;
    background:transparent;
    transition:all .2s;
    font-family:'Noto Sans KR',sans-serif;
    line-height:1.8;
}
#geojsonDropzone:hover{background:rgba(74,138,180,.1);border-color:#7eb8f7;color:#a8cef0;}
#geojsonDropzone.drag-over{background:rgba(74,138,180,.2);border-color:#4fc3f7;color:#4fc3f7;border-style:solid;}

/* ══ 속성 팝업 ══ */
#geojsonPopup{position:fixed;z-index:9999;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.25);padding:12px 14px;font-size:13px;min-width:200px;max-width:300px;max-height:340px;overflow-y:auto;display:none;}
.popup-title{font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;}
.popup-close{cursor:pointer;color:#aaa;font-size:16px;line-height:1;}
.popup-close:hover{color:#333;}
#geojsonPopup table{width:100%;border-collapse:collapse;}
#geojsonPopup td{padding:4px;font-size:12px;vertical-align:top;border-bottom:1px solid #f5f5f5;}
#geojsonPopup td:first-child{color:#888;width:45%;}
#geojsonPopup td:last-child{font-weight:500;word-break:break-all;}

/* ══ 결과/안내 ══ */
#result{position:absolute;bottom:16px;right:16px;z-index:25;background:#fff;border-radius:8px;padding:12px 16px;box-shadow:0 2px 8px rgba(0,0,0,.2);font-size:13px;display:none;line-height:1.8;max-width:280px;}
#guide{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:25;background:rgba(0,0,0,.65);color:#fff;border-radius:8px;padding:10px 18px;font-size:13px;display:none;white-space:nowrap;}
#zoomInfo{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:25;background:#fff;border-radius:6px;padding:5px 10px;box-shadow:0 1px 6px rgba(0,0,0,.15);font-size:12px;display:flex;align-items:center;gap:5px;margin-bottom:-46px;}

/* 줌 정보 위치 조정 */
#guide{bottom:62px;}

/* ══ 거리/면적/버퍼 오버레이 ══ */
.dot{overflow:hidden;float:left;width:12px;height:12px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/mini_circle.png');}
.dotOverlay{position:relative;bottom:10px;border-radius:6px;border:1px solid #ccc;border-bottom:2px solid #ddd;float:left;font-size:12px;padding:5px;background:#fff;}
.dotOverlay:nth-of-type(n){border:0;box-shadow:0 1px 2px #888;}
.number{font-weight:bold;color:#ee6152;}
.dotOverlay:after{content:'';position:absolute;margin-left:-6px;left:50%;bottom:-8px;width:11px;height:8px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white_small.png');}
.distanceInfo{position:relative;top:5px;left:5px;list-style:none;margin:0;}
.distanceInfo .label{display:inline-block;width:50px;}
.distanceInfo:after{content:none;}
.info{position:relative;top:5px;left:5px;border-radius:6px;border:1px solid #ccc;border-bottom:2px solid #ddd;font-size:12px;padding:5px;background:#fff;list-style:none;margin:0;}
.info:nth-of-type(n){border:0;box-shadow:0 1px 2px #888;}
.info .label{display:inline-block;width:50px;}
.info .number{color:#00a0e9;}

/* ══ MapWalker ══ */
.MapWalker{position:absolute;margin:-26px 0 0 -51px;}
.MapWalker .figure{position:absolute;width:25px;left:38px;top:-2px;height:39px;background:url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -298px -114px no-repeat;}
.MapWalker .angleBack{width:102px;height:52px;background:url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -834px -2px no-repeat;}
.MapWalker.m0 .figure{background-position:-298px -114px;}.MapWalker.m1 .figure{background-position:-335px -114px;}
.MapWalker.m2 .figure{background-position:-372px -114px;}.MapWalker.m3 .figure{background-position:-409px -114px;}
.MapWalker.m4 .figure{background-position:-446px -114px;}.MapWalker.m5 .figure{background-position:-483px -114px;}
.MapWalker.m6 .figure{background-position:-520px -114px;}.MapWalker.m7 .figure{background-position:-557px -114px;}
.MapWalker.m8 .figure{background-position:-2px -114px;}.MapWalker.m9 .figure{background-position:-39px -114px;}
.MapWalker.m10 .figure{background-position:-76px -114px;}.MapWalker.m11 .figure{background-position:-113px -114px;}
.MapWalker.m12 .figure{background-position:-150px -114px;}.MapWalker.m13 .figure{background-position:-187px -114px;}
.MapWalker.m14 .figure{background-position:-224px -114px;}.MapWalker.m15 .figure{background-position:-261px -114px;}
.MapWalker.m0 .angleBack{background-position:-834px -2px;}.MapWalker.m1 .angleBack{background-position:-938px -2px;}
.MapWalker.m2 .angleBack{background-position:-1042px -2px;}.MapWalker.m3 .angleBack{background-position:-1146px -2px;}
.MapWalker.m4 .angleBack{background-position:-1250px -2px;}.MapWalker.m5 .angleBack{background-position:-1354px -2px;}
.MapWalker.m6 .angleBack{background-position:-1458px -2px;}.MapWalker.m7 .angleBack{background-position:-1562px -2px;}
.MapWalker.m8 .angleBack{background-position:-2px -2px;}.MapWalker.m9 .angleBack{background-position:-106px -2px;}
.MapWalker.m10 .angleBack{background-position:-210px -2px;}.MapWalker.m11 .angleBack{background-position:-314px -2px;}
.MapWalker.m12 .angleBack{background-position:-418px -2px;}.MapWalker.m13 .angleBack{background-position:-522px -2px;}
.MapWalker.m14 .angleBack{background-position:-626px -2px;}.MapWalker.m15 .angleBack{background-position:-730px -2px;}

/* ══ 경로 ══ */
.route-step{padding:5px 8px;border-bottom:1px solid #f0f0f0;font-size:11px;color:#555;}
.route-summary{padding:8px;background:#f0f6ff;border-radius:6px;font-size:12px;font-weight:500;margin-bottom:6px;}

/* ══ 그리기 패널 스타일 ══ */
.draw-step-label{
    font-size:11px;color:#888;font-weight:600;
    margin-bottom:3px;letter-spacing:0.3px;
}
.draw-type-btn{
    flex:1;padding:6px 4px;
    border:1px solid #ddd;border-radius:6px;
    background:#f9f9f9;font-size:11px;
    cursor:pointer;text-align:center;
    transition:background .12s;
}
.draw-type-btn:hover{background:#e8f0fe;border-color:#1e3a5a;color:#1e3a5a;}
.draw-type-btn.active{background:#1e3a5a;color:#a8d4f8;border-color:#1e3a5a;}

/* ══ 파일 형식 뱃지 ══ */
#supportedFormats{
    padding:0 10px 10px;
    font-size:10px;
    color:#5a8fb4;
    text-align:center;
    flex-shrink:0;
    line-height:1.8;
    font-weight:400;
    font-family:'Noto Sans KR',sans-serif;
    letter-spacing:0.2px;
}

/* ══ 그리기 도구 버튼 ══ */
.drawing-tool-btn{
    padding:7px 4px;
    border:1px solid #dde0e6;
    border-radius:6px;
    background:#f8f9fa;
    font-size:12px;
    cursor:pointer;
    text-align:center;
    color:#333;
    font-family:'Noto Sans KR',sans-serif;
    font-weight:400;
    transition:all .15s;
}
.drawing-tool-btn:hover{
    background:#e8f0fe;
    border-color:#1e3a5a;
    color:#1e3a5a;
}
.drawing-tool-btn.active{
    background:#1e3a5a;
    color:#a8d4f8;
    border-color:#1e3a5a;
    font-weight:600;
}

/* ══ 표현식 연산자 버튼 ══ */
.expr-op-btn{
    padding:4px 10px;
    border:1px solid #dde0e6;
    border-radius:5px;
    background:#f8f9fa;
    font-size:12px;
    cursor:pointer;
    font-family:'Noto Sans KR',sans-serif;
    transition:all .12s;
    color:#333;
}
.expr-op-btn:hover{
    background:#1e3a5a;
    color:#a8d4f8;
    border-color:#1e3a5a;
}
.expr-field-btn{
    padding:4px 10px;
    border:none;
    border-radius:12px;
    background:#1e3a5a;
    color:#a8d4f8;
    font-size:11px;
    cursor:pointer;
    font-family:'Noto Sans KR',sans-serif;
    transition:all .12s;
    white-space:nowrap;
}
.expr-field-btn:hover{
    background:#2a5a8a;
    color:#e8f4ff;
}

/* ══ 자료제공 아코디언 ══ */
.ds-category{
    border-bottom:1px solid #eee;
}
.ds-category:last-child{
    border-bottom:none;
}
.ds-cat-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    color:#333;
    background:#fff;
    transition:background .12s;
    user-select:none;
}
.ds-cat-header:hover{
    background:#f0f4f8;
}
.ds-cat-header.open{
    background:#f0f4f8;
    color:#1e3a5a;
}
.ds-arrow{
    font-size:9px;
    color:#aaa;
    transition:transform .2s;
}
.ds-arrow.open{
    transform:rotate(90deg);
    color:#1e3a5a;
}
.ds-cat-body{
    background:#fafafa;
    border-top:1px solid #eee;
    overflow:hidden;
}
.ds-item-btn{
    display:block;
    width:100%;
    padding:8px 20px;
    border:none;
    background:transparent;
    text-align:left;
    font-size:12px;
    color:#333;
    cursor:pointer;
    font-family:'Noto Sans KR',sans-serif;
    transition:background .12s;
    border-bottom:1px solid #f0f0f0;
}
.ds-item-btn:last-child{
    border-bottom:none;
}
.ds-item-btn:hover:not([style*="not-allowed"]){
    background:#e8f0fe;
    color:#1e3a5a;
    font-weight:600;
}

/* ══ 자료제공 - 그룹 아이템 ══ */
.ds-item-group{
    border-bottom:1px solid #f0f0f0;
    padding:0;
}
.ds-item-group:last-child{ border-bottom:none; }

.ds-item-label{
    padding:7px 16px 4px;
    font-size:11px;
    font-weight:700;
    color:#1e3a5a;
    background:#f5f8fc;
    letter-spacing:0.3px;
    border-bottom:1px solid #eef1f5;
}
.ds-item-sub{
    display:flex;
    flex-direction:column;
    gap:0;
}
.ds-sub-btn{
    display:block;
    width:100%;
    padding:7px 24px;
    border:none;
    background:transparent;
    text-align:left;
    font-size:12px;
    color:#444;
    cursor:pointer;
    font-family:'Noto Sans KR',sans-serif;
    transition:background .12s;
    border-bottom:1px solid #f5f5f5;
}
.ds-sub-btn:last-child{ border-bottom:none; }
.ds-sub-btn:hover{
    background:#e8f0fe;
    color:#1e3a5a;
    font-weight:600;
}
.ds-sub-btn.active{
    background:#e8f0fe;
    color:#1e3a5a;
    font-weight:600;
}

/* ══ 줌 표시기 ══ */
#zoomIndicator{
    position:absolute;
    left:14px;
    bottom:36px;
    z-index:100;
    background:rgba(26,39,64,0.88);
    border:1px solid #2a5a8a;
    border-radius:8px;
    padding:6px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    pointer-events:none;
    font-family:'Noto Sans KR',sans-serif;
}
#zoomLevelNum{
    font-size:13px;
    font-weight:700;
    color:#e8f4ff;
    line-height:1;
}
#zoomLevelLabel{
    font-size:9px;
    color:#6a9fc8;
    letter-spacing:0.5px;
}
#zoomBar{
    width:6px;
    height:56px;
    background:#1e3a5a;
    border-radius:3px;
    overflow:hidden;
    position:relative;
}
#zoomBarFill{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background:linear-gradient(to top,#4a9fc8,#a8d4f8);
    border-radius:3px;
    transition:height .2s;
}

/* ── 자료제공 아코디언 ── */
.ds-cat-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;cursor:pointer;font-size:13px;font-weight:500;
    color:#1e3a5a;border-bottom:0.5px solid #e5e9f0;
    transition:background .12s;user-select:none;
}
.ds-cat-header:hover{background:#f0f4fa;}
.ds-cat-body{background:#f7f9fc;border-bottom:0.5px solid #e5e9f0;}
.ds-sub-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 20px;font-size:12px;color:#555;
    border-bottom:0.5px solid #eef1f7;cursor:pointer;
    transition:background .1s;
}
.ds-sub-item:last-child{border-bottom:none;}
.ds-sub-item:hover{background:#e8eef8;color:#1e3a5a;}
.ds-badge{
    font-size:10px;padding:2px 6px;border-radius:8px;
    background:#e8eef8;color:#7a9cc8;white-space:nowrap;
}
.ds-arrow{
    font-size:9px;color:#a0aec0;
    transition:transform .2s;display:inline-block;
}
.ds-arrow.open{transform:rotate(90deg);}

/* ── 자료제공 로드 버튼 상태 ── */
.ds-load-btn{ cursor:pointer; transition:background .15s, color .15s; }
.ds-sub-item.ds-active .ds-load-btn{
    background:#1e3a5a; color:#a8d4f8;
}
.ds-sub-item.ds-active{
    background:#e8eef8; color:#1e3a5a;
}

/* ── 속성팝업 드래그 커서 ── */
.popup-title{ cursor:move; user-select:none; }

/* ── 중첩 피처 목록 팝업 ── */
#clusterPopup{ font-family:'Noto Sans KR',sans-serif; }
#clusterPopupHeader{ user-select:none; }


/* 사이트소개 모달 */
#topModal .modal-box{width:760px;max-width:92vw;}
#topModal .modal-title{font-size:17px;font-weight:800;color:#1e3a5a;}
.site-intro-content{font-size:14px;line-height:1.95;color:#334155;word-break:keep-all;}
.site-intro-content p{margin:0 0 13px;}
.site-intro-content b{color:#1e3a5a;font-weight:800;}
.site-intro-content .intro-lead{font-size:16px;line-height:1.8;color:#102033;margin-bottom:18px;}
.site-intro-content .intro-lead span{display:inline-block;margin-top:6px;padding:15px 17px;border-radius:10px;background:#eef6ff;border:1px solid #cfe5ff;font-size:18px;font-weight:900;color:#1e3a5a;line-height:1.7;}
.site-intro-content h4{margin:22px 0 10px;padding-left:10px;border-left:4px solid #1e3a5a;color:#1e3a5a;font-size:16px;font-weight:900;}
.site-intro-content .intro-highlight{margin:18px 0;padding:15px 17px;border-radius:10px;background:#eef6ff;border:1px solid #cfe5ff;color:#17365d;font-size:15px;line-height:1.8;}
.site-intro-content .intro-highlight.dark{background:#eef6ff;color:#17365d;border-color:#cfe5ff;}
.site-intro-content .intro-highlight.dark b{color:#17365d;font-weight:800;}
.site-intro-content .intro-sign{margin-top:22px;padding-top:14px;border-top:1px solid #e2e8f0;text-align:right;color:#1e3a5a;font-size:17px;font-weight:700;line-height:1.85;}
.site-intro-content .intro-sign b{font-size:18px;font-weight:800;color:#1e3a5a;}
.site-intro-content .intro-gap{height:26px;}


/* 경로 패널 전용 스크롤 보정
   - 주동선분석 안내/결과가 길어져도 패널 내부에서 스크롤되도록 함
   - 다른 패널/지도/보고서 기능에는 영향 없음 */
#routePanel{
    max-height:calc(100vh - 130px) !important;
}
#routePanel .float-panel-body{
    max-height:calc(100vh - 178px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}
#routePanel .float-panel-body::-webkit-scrollbar{width:8px;}
#routePanel .float-panel-body::-webkit-scrollbar-track{background:#f1f5f9;}
#routePanel .float-panel-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;}
#routePanel .float-panel-body::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

/* ============================================================
   THEME 01 - Premium Deep Navy / Gold override
   적용 원칙: 기능 구조(id/class/onclick/position/크기)는 유지하고 색상/테두리/상태값만 덮어씀.
============================================================ */
:root{
  --theme-navy-900:#071426;
  --theme-navy-850:#0b1b31;
  --theme-navy-800:#0f2238;
  --theme-navy-700:#142f4b;
  --theme-navy-600:#1e3a5a;
  --theme-gold:#d4af37;
  --theme-gold-soft:#f5e8b8;
  --theme-blue:#0f6fe5;
  --theme-blue-2:#2563eb;
  --theme-bg:#f6f8fb;
  --theme-panel:#ffffff;
  --theme-panel-soft:#f8fafc;
  --theme-border:#d8e0ea;
  --theme-border-dark:#1d3552;
  --theme-text:#111827;
  --theme-muted:#64748b;
  --theme-danger:#dc2626;
  --theme-danger-bg:#fff1f2;
  --theme-success:#16a34a;
  --theme-shadow:0 10px 28px rgba(7,20,38,.18);
}

/* 메인 골격 */
#topBar,
#mainToolbar{
  background:linear-gradient(180deg,var(--theme-navy-850),var(--theme-navy-900)) !important;
  border-bottom-color:var(--theme-border-dark) !important;
  box-shadow:0 3px 10px rgba(7,20,38,.28) !important;
}
.top-nav-btn{
  color:#eef6ff !important;
  border:1px solid rgba(245,232,184,.22) !important;
  background:rgba(255,255,255,.035) !important;
}
.top-nav-btn:hover{
  background:rgba(212,175,55,.16) !important;
  border-color:rgba(212,175,55,.48) !important;
  color:#fff !important;
}
#btnSaveAll{
  background:linear-gradient(180deg,#d9b845,#c89f20) !important;
  border-color:#e5c75a !important;
  color:#071426 !important;
  font-weight:800 !important;
  box-shadow:0 4px 12px rgba(212,175,55,.28) !important;
}
#btnSaveAll:hover{
  background:linear-gradient(180deg,#edcf68,#d4af37) !important;
  color:#071426 !important;
}

/* 상단 툴바 버튼 */
.tb-btn{
  color:#eaf2fb !important;
}
.tb-label{
  color:#d9e8f8 !important;
  font-weight:650 !important;
}
.tb-btn:hover{
  background:rgba(212,175,55,.14) !important;
}
.tb-btn.tb-active,
.tb-btn.active{
  background:linear-gradient(180deg,#0f6fe5,#0b58c2) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;
}
.tb-btn.tb-active .tb-label,
.tb-btn.active .tb-label{
  color:#fff !important;
}
.tb-divider{background:rgba(255,255,255,.18) !important;}

/* 플로팅 패널 / 하위 팝업 공통 */
.float-panel,
#geojsonPopup,
#clusterPopup,
.popup-box,
.layer-panel,
#layerPanel,
#statsPanel,
#searchPanel,
#routePanel,
#choroplethPanel,
#dataServicePanel,
#menuSelect,
#menuAnalysis,
#menuDraw,
#menuMeasure,
#menuOverlay,
#mergeLayerPanel,
#drawingPanel{
  background:var(--theme-panel) !important;
  border:1px solid rgba(15,34,56,.14) !important;
  box-shadow:var(--theme-shadow) !important;
}
.float-panel-header,
.popup-title,
#clusterPopupHeader,
#geojsonPopup .popup-title{
  background:linear-gradient(180deg,var(--theme-navy-700),var(--theme-navy-850)) !important;
  color:var(--theme-gold-soft) !important;
  border-bottom:1px solid var(--theme-border-dark) !important;
}
.float-close,
.popup-close,
.modal-close{
  color:rgba(255,255,255,.72) !important;
}
.float-close:hover,
.popup-close:hover,
.modal-close:hover{
  color:var(--theme-gold-soft) !important;
}
.float-panel-body,
.modal-body{
  background:var(--theme-panel) !important;
  color:var(--theme-text) !important;
}

/* 일반 버튼 / 팝업 내부 버튼 */
.sub-btn,
.tab-btn,
.modal-btn,
.float-panel button:not(.float-close),
.float-panel select,
.float-panel input,
.float-panel textarea,
.modal-box select,
.modal-box input,
.modal-box textarea{
  border-color:var(--theme-border) !important;
}
.sub-btn,
.tab-btn,
.modal-btn,
.float-panel button:not(.float-close):not(.danger),
.modal-box button:not(.modal-close):not(.danger){
  background:var(--theme-panel-soft) !important;
  color:var(--theme-navy-850) !important;
}
.sub-btn:hover,
.tab-btn:hover,
.modal-btn:hover,
.float-panel button:not(.float-close):not(.danger):hover,
.modal-box button:not(.modal-close):not(.danger):hover{
  background:#eef5ff !important;
  border-color:var(--theme-blue) !important;
  color:var(--theme-blue) !important;
}
.sub-btn.active,
.tab-btn.active,
.modal-btn.primary,
.search-btn,
.draw-type-btn.active,
.float-panel button.primary,
.float-panel button.active{
  background:linear-gradient(180deg,var(--theme-blue),#0b58c2) !important;
  color:#fff !important;
  border-color:#0b58c2 !important;
}
.search-btn:hover,
.modal-btn.primary:hover{
  background:linear-gradient(180deg,#1e7cf0,#0f6fe5) !important;
  color:#fff !important;
}
.sub-btn.danger,
.float-panel button.danger,
.modal-btn.danger,
button.danger{
  color:var(--theme-danger) !important;
  border-color:#fecaca !important;
  background:var(--theme-danger-bg) !important;
}
.sub-btn.danger:hover,
.float-panel button.danger:hover,
.modal-btn.danger:hover,
button.danger:hover{
  color:#fff !important;
  background:var(--theme-danger) !important;
  border-color:var(--theme-danger) !important;
}

/* 입력/폼/표 */
.search-input,
.form-row select,
.form-row input,
.edit-field-row input,
select,
input,
textarea{
  border-color:var(--theme-border) !important;
  color:var(--theme-text) !important;
}
.search-input:focus,
.form-row select:focus,
.form-row input:focus,
input:focus,
select:focus,
textarea:focus{
  outline:2px solid rgba(15,111,229,.16) !important;
  border-color:var(--theme-blue) !important;
}
.stats-table th,
#attrTableWrap th{
  background:#eef4fb !important;
  color:var(--theme-navy-850) !important;
  border-color:var(--theme-border) !important;
}
.stats-table td,
#attrTableWrap td{
  border-color:var(--theme-border) !important;
}
#attrTableWrap tr:hover td,
.search-result-item:hover{
  background:#eef5ff !important;
}

/* 모달 */
.modal-overlay{
  background:rgba(7,20,38,.58) !important;
}
.modal-box{
  background:var(--theme-panel) !important;
  border:1px solid rgba(15,34,56,.16) !important;
  box-shadow:0 24px 70px rgba(7,20,38,.32) !important;
}
.modal-title{
  background:linear-gradient(180deg,var(--theme-navy-700),var(--theme-navy-850)) !important;
  color:var(--theme-gold-soft) !important;
  border-bottom-color:var(--theme-border-dark) !important;
}
#topModal .modal-title,
.site-intro-content b,
.site-intro-content h4,
.site-intro-content .intro-sign,
.site-intro-content .intro-sign b{
  color:var(--theme-navy-700) !important;
}
.site-intro-content .intro-lead span,
.site-intro-content .intro-highlight{
  background:#f8f1d4 !important;
  border-color:#ead179 !important;
  color:var(--theme-navy-850) !important;
}
.site-intro-content h4{border-left-color:var(--theme-gold) !important;}

/* 자료제공/아코디언 */
.ds-cat-header{
  color:var(--theme-navy-850) !important;
  background:#fff !important;
  border-bottom-color:var(--theme-border) !important;
  font-weight:750 !important;
}
.ds-cat-header:hover,
.ds-cat-header.open{
  background:#f8f1d4 !important;
  color:var(--theme-navy-900) !important;
}
.ds-cat-body{
  background:#f8fafc !important;
  border-bottom-color:var(--theme-border) !important;
}
.ds-sub-item{
  color:#334155 !important;
  border-bottom-color:#e9eef5 !important;
}
.ds-sub-item:hover,
.ds-sub-item.ds-active{
  background:#eef5ff !important;
  color:var(--theme-navy-850) !important;
}
.ds-badge{
  background:#edf2f7 !important;
  color:var(--theme-blue) !important;
}
.ds-sub-item.ds-active .ds-load-btn{
  background:var(--theme-navy-850) !important;
  color:var(--theme-gold-soft) !important;
}

/* 그리기/분석 특수 버튼 */
.draw-type-btn{
  border-color:var(--theme-border) !important;
  background:#fff !important;
  color:var(--theme-navy-850) !important;
}
.draw-type-btn:hover{
  background:#eef5ff !important;
  border-color:var(--theme-blue) !important;
  color:var(--theme-blue) !important;
}
.draw-step-label,
.form-row label:first-child,
.edit-field-row label{
  color:var(--theme-muted) !important;
}

/* 레이어 패널 / 목록 계열 */
#leftPanel,
#layerPanel,
.layer-panel,
#geojsonPanel{
  background:rgba(255,255,255,.96) !important;
  border-color:var(--theme-border) !important;
}
.layer-title,
.panel-title,
.panel-header,
#layerPanel h3,
#geojsonPanel h3{
  color:var(--theme-navy-850) !important;
}
.layer-item:hover,
.panel-row:hover,
.list-row:hover{
  background:#eef5ff !important;
}

/* 지도 우측 보고서 버튼/문의 카드는 report_bridge.css에도 후속 override 있음 */
.map-report-btn{
  border-color:rgba(15,34,56,.22) !important;
  color:var(--theme-navy-850) !important;
  background:rgba(255,255,255,.95) !important;
}
.map-report-btn:hover{background:#f8f1d4 !important;}
.map-report-btn.danger{color:var(--theme-danger) !important;background:#fff !important;}
.map-report-btn.danger:hover{background:var(--theme-danger-bg) !important;}
.report-toast{background:rgba(7,20,38,.96) !important;color:#fff !important;}
.contact-agent-card{
  border-color:rgba(15,34,56,.18) !important;
  box-shadow:0 12px 34px rgba(7,20,38,.22) !important;
}
.agent-contact-side{
  background:linear-gradient(180deg,var(--theme-navy-700),var(--theme-navy-900)) !important;
  color:var(--theme-gold-soft) !important;
}
.agent-badge{
  background:#f8f1d4 !important;
  color:var(--theme-navy-850) !important;
}
.agent-office{color:var(--theme-navy-700) !important;}
.contact-modal-overlay{background:rgba(7,20,38,.52) !important;}
.contact-modal{
  border:1px solid rgba(15,34,56,.14) !important;
  box-shadow:0 24px 70px rgba(7,20,38,.34) !important;
}
.contact-modal-close{color:var(--theme-navy-850) !important;}
.contact-modal-close:hover{color:var(--theme-gold) !important;}
.contact-choice{border-color:var(--theme-border) !important;}
.tel-choice:hover{background:#eef5ff !important;}
.contact-phone-qr-box{border-color:var(--theme-border) !important;background:#f8fafc !important;}

/* 스크롤바 */
.float-panel-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.contact-modal::-webkit-scrollbar,
#routePanel .float-panel-body::-webkit-scrollbar{width:8px;height:8px;}
.float-panel-body::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
#routePanel .float-panel-body::-webkit-scrollbar-track{background:#eef2f7 !important;}
.float-panel-body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.contact-modal::-webkit-scrollbar-thumb,
#routePanel .float-panel-body::-webkit-scrollbar-thumb{background:#9fb0c4 !important;border-radius:999px;}
.float-panel-body::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
#routePanel .float-panel-body::-webkit-scrollbar-thumb:hover{background:var(--theme-navy-600) !important;}

/* 모바일에서도 팝업/하단 시트 색상 유지 */
@media (max-width:768px){
  #geojsonPopup,
  #clusterPopup,
  .float-panel{border-color:var(--theme-border) !important;box-shadow:0 12px 34px rgba(7,20,38,.24) !important;}
  #geojsonPopup .popup-title,
  #clusterPopupHeader,
  .float-panel-header{background:linear-gradient(180deg,var(--theme-navy-700),var(--theme-navy-850)) !important;color:var(--theme-gold-soft) !important;}
}

/* THEME 01 minor correction: 사이트소개/활용방법 모달 제목은 딥네이비 헤더 위 밝은 글자 유지 */
#topModal .modal-title{color:var(--theme-gold-soft) !important;}

/* ============================================================
   BRAND STRUCTURE 01 - Preview-matched header + floating map UI
   - 기능 ID/onclick/JS 로직 유지
   - 상단 브랜드 헤더와 흰색 작업툴바 구조만 보정
============================================================ */
:root{
  --brand-ink:#071426;
  --brand-ink-2:#0b1b31;
  --brand-ink-3:#10243d;
  --brand-line:#d8e0ea;
  --brand-gold:#d4af37;
  --brand-blue:#0f6fe5;
  --brand-blue-2:#0b58c2;
  --brand-text:#101828;
  --brand-muted:#64748b;
  --brand-panel:#ffffff;
  --brand-soft:#f7f9fc;
  --brand-danger:#dc2626;
}

/* 1. 상단 브랜드 헤더: 전체 폭 사용 */
#topBar{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:64px !important;
  padding:0 22px !important;
  background:linear-gradient(180deg,#061427 0%,#0a1d34 100%) !important;
  border-bottom:1px solid rgba(212,175,55,.22) !important;
  box-shadow:0 4px 16px rgba(7,20,38,.30) !important;
  display:flex !important;
  align-items:center !important;
}
#topBarNav{
  flex:0 0 auto !important;
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  z-index:2 !important;
}
.top-nav-btn{
  height:40px !important;
  padding:0 18px !important;
  border-radius:6px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.035) !important;
  color:#f3f8ff !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-.3px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
.top-nav-btn:hover{
  background:rgba(212,175,55,.16) !important;
  border-color:rgba(212,175,55,.52) !important;
  color:#fff !important;
}
#topBrand{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  white-space:nowrap !important;
  user-select:none !important;
  pointer-events:none !important;
}
.top-brand-mark{
  display:inline-flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:35px !important;
  height:38px !important;
  color:var(--brand-gold) !important;
  font-size:25px !important;
  line-height:.8 !important;
  letter-spacing:-12px !important;
  text-shadow:0 2px 10px rgba(212,175,55,.24) !important;
  transform:skewY(-4deg) !important;
}
.top-brand-name{
  color:#f8fbff !important;
  font-size:27px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-1.2px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.28) !important;
}
.top-brand-product{
  color:var(--brand-gold) !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
  text-shadow:0 2px 10px rgba(212,175,55,.20) !important;
}
#topBarRight{
  margin-left:auto !important;
  min-width:120px !important;
  display:flex !important;
  justify-content:flex-end !important;
  z-index:2 !important;
}
#btnSaveAll{
  height:40px !important;
  min-width:104px !important;
  padding:0 22px !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,#dfbc43,#cfa227) !important;
  border:1px solid #e9ca61 !important;
  color:#081527 !important;
  font-size:14px !important;
  font-weight:900 !important;
  box-shadow:0 4px 14px rgba(212,175,55,.28) !important;
}
#btnSaveAll:hover{background:linear-gradient(180deg,#edcf68,#d4af37) !important;}

/* 2. 메인 툴바: 흰색 카드형 작업툴바 */
#mainToolbar{
  left:0 !important;
  right:0 !important;
  top:64px !important;
  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;
  padding:7px 14px !important;
  gap:6px !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid var(--brand-line) !important;
  box-shadow:0 4px 16px rgba(15,23,42,.10) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:center !important;
}
#mainToolbar::-webkit-scrollbar{height:6px !important;}
#mainToolbar::-webkit-scrollbar-track{background:#eef2f7 !important;}
#mainToolbar::-webkit-scrollbar-thumb{background:#b5c0cf !important;border-radius:999px !important;}
.tb-group{
  height:46px !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}
.tb-btn{
  height:44px !important;
  min-width:72px !important;
  padding:0 13px !important;
  border:1px solid #dce3ec !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
  box-shadow:0 2px 5px rgba(15,23,42,.055) !important;
  color:var(--brand-ink-2) !important;
}
.tb-btn:hover{
  background:#f8f1d4 !important;
  border-color:rgba(212,175,55,.72) !important;
  color:var(--brand-ink) !important;
  transform:translateY(-1px) !important;
}
.tb-btn.tb-active,
.tb-btn.active{
  background:linear-gradient(180deg,#0f6fe5,#0b58c2) !important;
  border-color:#0b58c2 !important;
  box-shadow:0 4px 12px rgba(15,111,229,.25) !important;
  color:#fff !important;
}
.tb-icon{display:inline-block !important;font-size:0 !important;width:0 !important;height:0 !important;overflow:hidden !important;}
.tb-label{color:inherit !important;font-size:13px !important;font-weight:850 !important;letter-spacing:-.35px !important;}
.tb-btn.tb-active .tb-label,.tb-btn.active .tb-label{color:#fff !important;}
.tb-arrow{display:none !important;}
.tb-divider{background:#e5eaf1 !important;height:34px !important;}

/* 3. 지도 영역: 좌측 패널이 지도 위에 떠 있는 구조 */
#container{
  top:124px !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
}
#mapWrapper,#map{width:100% !important;height:100% !important;}

/* 4. 좌측 레이어 패널: 브랜드 로고 영역 제거 후 카드형 플로팅 패널 */
#geojsonPanel{
  top:136px !important;
  left:16px !important;
  bottom:16px !important;
  width:300px !important;
  z-index:250 !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(15,34,56,.14) !important;
  border-radius:10px !important;
  box-shadow:0 12px 34px rgba(7,20,38,.18) !important;
  overflow:hidden !important;
  backdrop-filter:blur(6px) !important;
}
#geojsonPanelTop{display:none !important;}
#geojsonPanelHeader{
  height:54px !important;
  padding:0 18px !important;
  background:#ffffff !important;
  color:var(--brand-ink-2) !important;
  border-bottom:1px solid #e6ebf2 !important;
  font-size:18px !important;
  font-weight:900 !important;
}
#geojsonPanelHeader svg{stroke:var(--brand-ink-2) !important;width:18px !important;height:18px !important;}
#geojsonPanelHeader button{color:var(--brand-muted) !important;}
#geojsonLayerList{
  background:#ffffff !important;
  color:var(--brand-text) !important;
}
#geojsonLayerList::-webkit-scrollbar-track{background:#f1f5f9 !important;}
#geojsonLayerList::-webkit-scrollbar-thumb{background:#cbd5e1 !important;}
.geojson-layer-item{border-bottom:1px solid #e9eef5 !important;background:#fff !important;}
.layer-row1{min-height:38px !important;padding:8px 14px !important;background:#fff !important;}
.layer-row1:hover{background:#eef5ff !important;}
.layer-row2{background:#f8fafc !important;border-top:1px solid #e9eef5 !important;}
.layer-name{color:#26364a !important;font-weight:700 !important;font-size:13px !important;}
.layer-icon-btn{color:var(--brand-ink-2) !important;opacity:.70 !important;}
.layer-icon-btn:hover{color:var(--brand-blue) !important;opacity:1 !important;}
.layer-sub-btn{background:#fff !important;border-color:#d8e0ea !important;color:var(--brand-ink-2) !important;}
.layer-sub-btn:hover{background:#eef5ff !important;border-color:var(--brand-blue) !important;color:var(--brand-blue) !important;}
#geojsonDropzone{
  margin:10px 14px 12px !important;
  border-color:#cbd5e1 !important;
  background:#f8fafc !important;
  color:#667085 !important;
}
#geojsonDropzone:hover{background:#eef5ff !important;border-color:var(--brand-blue) !important;color:var(--brand-blue) !important;}
#supportedFormats{color:#7b8798 !important;background:#fff !important;padding-bottom:12px !important;}

/* 5. 우측 보고서/문의 카드 위치와 톤 보정 */
.map-report-controls{top:16px !important;right:16px !important;gap:8px !important;}
.map-report-btn{
  height:40px !important;
  min-width:132px !important;
  justify-content:center !important;
  border-radius:6px !important;
  font-size:14px !important;
  font-weight:900 !important;
  background:rgba(255,255,255,.96) !important;
  border-color:#d8e0ea !important;
  color:var(--brand-ink-2) !important;
}
.map-report-btn:hover{background:#f8f1d4 !important;border-color:rgba(212,175,55,.72) !important;}
.map-report-btn.danger{color:var(--brand-danger) !important;background:#fff !important;}
.map-report-btn.danger:hover{background:#fff1f2 !important;border-color:#fecaca !important;}
.contact-agent-card{
  top:106px !important;
  right:16px !important;
  width:430px !important;
  height:132px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(15,34,56,.16) !important;
  box-shadow:0 12px 34px rgba(7,20,38,.18) !important;
}
.agent-contact-side{background:#ffffff !important;color:var(--brand-ink-2) !important;border-left:1px solid #e6ebf2 !important;}
.agent-badge{background:#f8f1d4 !important;color:#6f520d !important;}
.agent-office{color:#6f520d !important;}
.agent-photo-box{background:#071426 !important;border-color:#1d3552 !important;}

/* 6. 하위 팝업은 기능 유지 + 1안 색상 통일 */
.float-panel,
#geojsonPopup,
#clusterPopup,
#statisticsPanel,
#searchPanel,
#routePanel,
#choroplethPanel,
#dataServicePanel,
#menuSelect,
#menuAnalysis,
#menuDraw,
#menuMeasure,
#menuOverlay,
#mergeLayerPanel,
#drawingPanel{
  background:#fff !important;
  border:1px solid rgba(15,34,56,.14) !important;
  border-radius:10px !important;
  box-shadow:0 12px 34px rgba(7,20,38,.18) !important;
}
.float-panel-header,
.popup-title,
#geojsonPopup .popup-title,
#clusterPopupHeader{
  background:#ffffff !important;
  color:var(--brand-ink-2) !important;
  border-bottom:1px solid #e6ebf2 !important;
  font-size:15px !important;
  font-weight:900 !important;
}
.float-close,.popup-close,.modal-close{color:#475569 !important;}
.float-close:hover,.popup-close:hover,.modal-close:hover{color:var(--brand-danger) !important;}
.sub-btn,
.tab-btn,
.modal-btn,
.float-panel button:not(.float-close),
.modal-box button:not(.modal-close){
  border-radius:7px !important;
  border-color:#d8e0ea !important;
  background:#fff !important;
  color:var(--brand-ink-2) !important;
  font-weight:850 !important;
}
.sub-btn:hover,
.tab-btn:hover,
.modal-btn:hover,
.float-panel button:not(.float-close):hover,
.modal-box button:not(.modal-close):hover{
  background:#eef5ff !important;
  border-color:var(--brand-blue) !important;
  color:var(--brand-blue) !important;
}
.sub-btn.active,
.tab-btn.active,
.modal-btn.primary,
.search-btn,
.draw-type-btn.active,
.float-panel button.primary,
.float-panel button.active{
  background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-2)) !important;
  color:#fff !important;
  border-color:var(--brand-blue-2) !important;
}
.sub-btn.danger,
.float-panel button.danger,
.modal-btn.danger,
button.danger{
  color:var(--brand-danger) !important;
  border-color:#fecaca !important;
  background:#fff1f2 !important;
}
.sub-btn.danger:hover,
.float-panel button.danger:hover,
.modal-btn.danger:hover,
button.danger:hover{background:var(--brand-danger) !important;color:#fff !important;}
.search-input,.form-row select,.form-row input,.edit-field-row input,select,input,textarea{border-color:#d8e0ea !important;}
.search-input:focus,.form-row select:focus,.form-row input:focus,input:focus,select:focus,textarea:focus{outline:2px solid rgba(15,111,229,.15) !important;border-color:var(--brand-blue) !important;}
.ds-cat-header{background:#fff !important;color:var(--brand-ink-2) !important;font-weight:900 !important;}
.ds-cat-header:hover,.ds-cat-header.open{background:#f8f1d4 !important;color:var(--brand-ink) !important;}
.ds-cat-body{background:#f8fafc !important;}
.ds-sub-item:hover,.ds-sub-item.ds-active{background:#eef5ff !important;}

/* 7. 하단 정보/지도 안내 */
#zoomInfo,#result{border:1px solid #e6ebf2 !important;box-shadow:0 8px 22px rgba(7,20,38,.12) !important;}
#guide{background:rgba(7,20,38,.86) !important;}

/* 8. 반응형 보정 */
@media (max-width:1180px){
  #topBrand{gap:8px !important;}
  .top-brand-name{font-size:21px !important;}
  .top-brand-product{font-size:20px !important;}
  .top-nav-btn{font-size:13px !important;padding:0 12px !important;}
  #geojsonPanel{width:280px !important;}
  .contact-agent-card{width:380px !important;}
}
@media (max-width:768px){
  #topBar,#mainToolbar,#geojsonPanel{display:none !important;}
  #container{top:52px !important;left:0 !important;right:0 !important;bottom:52px !important;}
}


/* ============================================================
   BRAND HEADER FIX v2
   1) 상단 브랜드 클릭 시 새로고침 가능
   2) 레이어 패널과 줌레벨 표시 겹침 방지
   3) 지도 캡처 시 레이어 패널 제외 보조 클래스
============================================================ */
#topBrand{
  pointer-events:auto !important;
  cursor:pointer !important;
}
#topBrand:hover .top-brand-name,
#topBrand:hover .top-brand-product{
  filter:brightness(1.08) !important;
}
#topBrand:focus-visible{
  outline:2px solid rgba(212,175,55,.85) !important;
  outline-offset:6px !important;
  border-radius:8px !important;
}

/* 레이어 패널에 가려지지 않도록 줌레벨 표시를 우측 하단으로 이동 */
#zoomInfo{
  left:auto !important;
  right:24px !important;
  bottom:24px !important;
  transform:none !important;
  margin-bottom:0 !important;
  z-index:180 !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid #e6ebf2 !important;
  box-shadow:0 8px 22px rgba(7,20,38,.14) !important;
}

/* 지도 캡처 중에는 지도 외 UI를 확실히 제거 */
body.report-capturing #geojsonPanel,
body.report-capturing #topBar,
body.report-capturing #mainToolbar,
body.report-capturing .float-panel,
body.report-capturing .contact-agent-card,
body.report-capturing .map-report-controls,
body.report-capturing #contactModalOverlay,
body.report-capturing #result,
body.report-capturing #guide,
body.report-capturing #zoomInfo{
  display:none !important;
}




/* ============================================================
   CLEAN LAYER PANEL CONTROLLER v6
   이전 v3/v4/v5 드래그 CSS 제거 후 단일 규칙 적용
============================================================ */
#geojsonPanel{
  position:fixed !important;
  will-change:left, top !important;
}
#geojsonPanelHeader{
  cursor:grab !important;
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}
#geojsonPanel.is-dragging{
  transition:none !important;
  z-index:9999 !important;
  box-shadow:0 18px 44px rgba(7,20,38,.30) !important;
}
#geojsonPanel.is-dragging #geojsonPanelHeader,
body.layer-panel-dragging{
  cursor:grabbing !important;
  user-select:none !important;
}
.layer-panel-title{
  min-width:0 !important;
  flex:1 1 auto !important;
}
.layer-drag-grip{
  display:inline-block !important;
  color:#94a3b8 !important;
  font-weight:900 !important;
  letter-spacing:-5px !important;
  margin:0 4px 0 2px !important;
  transform:translateY(-1px) !important;
  opacity:.85 !important;
}
.layer-panel-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-left:auto !important;
}
.layer-panel-action-btn{
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #d8e0ea !important;
  border-radius:6px !important;
  background:#ffffff !important;
  color:#26364a !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.layer-panel-action-btn:hover{
  background:#f8f1d4 !important;
  border-color:rgba(212,175,55,.72) !important;
  color:#071426 !important;
}
#geojsonPanel.is-collapsed{
  bottom:auto !important;
  height:54px !important;
  min-height:54px !important;
  overflow:hidden !important;
}
#geojsonPanel.is-collapsed #geojsonLayerList,
#geojsonPanel.is-collapsed #geojsonDropzone,
#geojsonPanel.is-collapsed #supportedFormats{
  display:none !important;
}
#geojsonPanel.is-collapsed #geojsonPanelHeader{
  border-bottom:none !important;
}
@media (max-width:768px){
  #geojsonPanel{display:none !important;}
}


/* ============================================================
   TOP BRAND LOGO UPDATE v7
   상단 중앙 브랜드 앞쪽 로고 이미지 적용
============================================================ */
#topBrand{
  gap:12px !important;
}
.top-brand-logo{
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
  display:block !important;
  flex:0 0 auto !important;
  border-radius:0 !important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.22)) !important;
}
.top-brand-mark{
  display:none !important;
}
@media (max-width:1180px){
  .top-brand-logo{
    width:36px !important;
    height:36px !important;
  }
}
@media (max-width:768px){
  .top-brand-logo{
    width:32px !important;
    height:32px !important;
  }
}


/* ============================================================
   ZOOM UI CLEANUP v10
   - 좌측 세로 줌 표시(#zoomIndicator) 제거
   - 우측 줌레벨 입력창(#zoomInfo)을 좌측 하단으로 이동
   - 클릭정보 결과 팝업(#result)과 우측 하단 충돌 방지
============================================================ */
#zoomIndicator{
  display:none !important;
}

/* 기존 우측 하단 줌레벨 입력창을 좌측 하단으로 이동 */
#zoomInfo{
  left:16px !important;
  right:auto !important;
  bottom:16px !important;
  transform:none !important;
  margin-bottom:0 !important;
  z-index:180 !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid #e6ebf2 !important;
  border-radius:6px !important;
  box-shadow:0 8px 22px rgba(7,20,38,.14) !important;
}

/* 레이어 패널이 기본으로 펼쳐져 있을 때는 줌레벨창이 패널에 가려지지 않도록 우측으로 살짝 밀림 */
#geojsonPanel:not(.is-collapsed) ~ #container #zoomInfo{
  left:326px !important;
}

/* 클릭정보 결과 팝업은 우측 하단 유지 */
#result{
  right:16px !important;
  bottom:16px !important;
  left:auto !important;
  z-index:185 !important;
}

/* 지도 캡처 중에는 줌 UI도 제외 */
body.report-capturing #zoomIndicator,
body.report-capturing #zoomInfo{
  display:none !important;
}

@media (max-width:1023px){
  #zoomInfo{
    left:12px !important;
    bottom:12px !important;
  }
}


/* ============================================================
   LAYER PANEL FOLD FIX v11
   - 헤더 클릭/더블클릭 접기 제거: +/- 버튼 전용
   - 펼친 상태는 첫 번째 이미지처럼 전체 높이 유지
   - 접힌 상태는 헤더만 표시
============================================================ */
#geojsonPanel:not(.is-collapsed){
  height:auto !important;
  min-height:0 !important;
  top:136px !important;
  bottom:16px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
#geojsonPanel:not(.is-collapsed) #geojsonLayerList{
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}
#geojsonPanel:not(.is-collapsed) #geojsonDropzone,
#geojsonPanel:not(.is-collapsed) #supportedFormats{
  display:block !important;
  flex:0 0 auto !important;
}
#geojsonPanel.is-collapsed{
  bottom:auto !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  overflow:hidden !important;
}
#geojsonPanel.is-collapsed #geojsonLayerList,
#geojsonPanel.is-collapsed #geojsonDropzone,
#geojsonPanel.is-collapsed #supportedFormats{
  display:none !important;
}
#geojsonPanelHeader{
  cursor:grab !important;
}
#btnLayerPanelCollapse{
  cursor:pointer !important;
}


/* ============================================================
   LAYER DRAG HEIGHT FIX v12
   - 드래그 후 펼친 레이어창이 작은 업로드 박스 높이로 줄어드는 문제 수정
============================================================ */
#geojsonPanel:not(.is-collapsed){
  bottom:16px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
#geojsonPanel:not(.is-collapsed) #geojsonLayerList{
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}
#geojsonPanel:not(.is-collapsed) #geojsonDropzone,
#geojsonPanel:not(.is-collapsed) #supportedFormats{
  display:block !important;
  flex:0 0 auto !important;
}
#geojsonPanel.is-collapsed{
  bottom:auto !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  overflow:hidden !important;
}
#geojsonPanel.is-collapsed #geojsonLayerList,
#geojsonPanel.is-collapsed #geojsonDropzone,
#geojsonPanel.is-collapsed #supportedFormats{
  display:none !important;
}


/* ============================================================
   CAPTURE LAYER RESTORE FIX v13
   - 지도캡쳐 시 레이어창은 body.report-capturing CSS로만 숨김
   - JS display:none 복구 충돌 방지
============================================================ */
body.report-capturing #geojsonPanel{
  display:none !important;
}
body.report-capturing #geojsonLayerList,
body.report-capturing #geojsonDropzone,
body.report-capturing #supportedFormats{
  display:none !important;
}


/* ============================================================
   LAYER DRAG MOVE FIX v14
   - 펼친 레이어창 드래그 시 bottom 고정으로 인한 높이 축소/확대 방지
   - 이동 중/이동 후에는 height 고정 + bottom:auto
   - 새로고침/캡처복구 시에는 기본 위치에서만 bottom:16px 사용
============================================================ */
#geojsonPanel{
  position:fixed !important;
}
#geojsonPanel.is-dragging{
  transition:none !important;
}
#geojsonPanel:not(.is-collapsed){
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#geojsonPanel:not(.is-collapsed) #geojsonLayerList{
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}
#geojsonPanel:not(.is-collapsed) #geojsonDropzone,
#geojsonPanel:not(.is-collapsed) #supportedFormats{
  display:block !important;
  flex:0 0 auto !important;
}
#geojsonPanel.is-collapsed{
  bottom:auto !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  overflow:hidden !important;
}
#geojsonPanel.is-collapsed #geojsonLayerList,
#geojsonPanel.is-collapsed #geojsonDropzone,
#geojsonPanel.is-collapsed #supportedFormats{
  display:none !important;
}


/* ============================================================
   MOBILE LAYER + THEME FIX v17
   기준:
   - mobile.css / mobile.js 기능은 원본 그대로 유지
   - 모바일/태블릿에서는 데스크톱 레이어창(#geojsonPanel)을 무조건 숨김
   - 모바일 전용 하단 메뉴/패널은 유지
   - 테마 색상은 모바일 전용 UI에만 최소 적용
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
    /* 데스크톱 UI는 모바일/태블릿에서 노출 금지 */
    #topBar,
    #mainToolbar,
    #geojsonPanel,
    #mapReportControls,
    #contactAgentCard,
    #zoomIndicator,
    #zoomInfo {
        display: none !important;
    }

    /* 원본 모바일 레이아웃 유지 */
    #container {
        position: fixed !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 52px !important;
    }

    #mapWrapper,
    #map {
        width: 100% !important;
        height: 100% !important;
    }

    #rvClose,
    #container.view_roadview #rvClose {
        display: none !important;
    }

    #container.view_roadview #mapWrapper {
        display: none !important;
    }

    #container.view_roadview #rvWrapper {
        position: fixed !important;
        top: 52px !important;
        bottom: 52px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        z-index: 10 !important;
    }

    #geojsonPopup {
        position: fixed !important;
        bottom: 60px !important;
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: 55vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        z-index: 470 !important;
        background: #fff !important;
        border: 1px solid rgba(15,34,56,.18) !important;
        box-shadow: 0 12px 34px rgba(7,20,38,.24) !important;
    }

    #geojsonPopup .popup-title {
        cursor: default !important;
        border-radius: 12px 12px 0 0 !important;
        background: linear-gradient(180deg,#102a44,#071426) !important;
        color: #f5e8b8 !important;
    }

    #geojsonPopupTable td {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    #clusterPopup {
        position: fixed !important;
        top: 62px !important;
        bottom: auto !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        border-radius: 12px !important;
        z-index: 470 !important;
        background: #fff !important;
        border: 1px solid rgba(15,34,56,.18) !important;
        box-shadow: 0 12px 34px rgba(7,20,38,.24) !important;
    }

    .float-panel-header {
        cursor: default !important;
    }

    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* 모바일 전용 UI: 원본 위치/구조 유지 + 브랜드 색상만 강제 */
    #m-banner {
        background: linear-gradient(180deg,#071426,#0b1b31) !important;
        border-bottom: 1px solid rgba(212,175,55,.28) !important;
        color: #f8fbff !important;
    }

    #m-banner div,
    #m-banner span {
        color: #f8fbff !important;
    }

    #m-tabbar {
        background: linear-gradient(180deg,#0b1b31,#071426) !important;
        border-top: 1px solid rgba(212,175,55,.28) !important;
        box-shadow: 0 -4px 18px rgba(7,20,38,.25) !important;
    }

    #m-tabbar div {
        color: #8fa9c7 !important;
    }

    #m-tabbar div[style*="rgb(168, 206, 240)"],
    #m-tabbar div[style*="#a8cef0"] {
        color: #f5e8b8 !important;
        border-top-color: #d4af37 !important;
    }

    #m-zoom,
    #m-maptype,
    #m-finish-btn {
        background: #0b1b31 !important;
        border-color: #1d3552 !important;
        color: #f5e8b8 !important;
        box-shadow: 0 8px 22px rgba(7,20,38,.22) !important;
    }

    #m-zoom > div,
    #m-maptype > div,
    #m-finish-btn {
        color: #f5e8b8 !important;
    }

    #m-maptype > div[style*="background"] {
        background: #d4af37 !important;
        color: #071426 !important;
        font-weight: 900 !important;
    }

    /* 모바일 전용 하단 패널: 기능/위치 유지 + 테마 색상 */
    .m-panel {
        background: #fff !important;
        border-top: 1px solid rgba(15,34,56,.16) !important;
        box-shadow: 0 -8px 30px rgba(7,20,38,.22) !important;
    }

    .m-panel > div:nth-child(2) {
        background: linear-gradient(180deg,#102a44,#071426) !important;
        color: #f5e8b8 !important;
        border-bottom: 1px solid rgba(212,175,55,.22) !important;
    }

    .m-panel > div:nth-child(2) * {
        color: #f5e8b8 !important;
    }

    #m-cat-row {
        background: #f8fafc !important;
        border-bottom-color: #e2e8f0 !important;
    }

    #m-ly-list > div {
        border-bottom-color: #eef2f7 !important;
    }

    #m-ly-list div {
        color: inherit;
    }
}


/* ============================================================
   ZOOM THEME FIX v18
   PC / 모바일 / 태블릿 줌 버튼 색상 통일
   기존 파란색 계열 → 딥네이비 + 골드 포인트
============================================================ */

/* PC 줌레벨 입력창 */
#zoomInfo{
  background:rgba(255,255,255,.96) !important;
  border:1px solid #d8e0ea !important;
  color:#0b1b31 !important;
}

#zoomInfo input{
  border:1px solid #1d3552 !important;
  color:#0b1b31 !important;
  background:#ffffff !important;
  font-weight:800 !important;
}

#zoomInfo button,
#zoomInfo button[onclick="goToZoom()"]{
  background:#0b1b31 !important;
  color:#f5e8b8 !important;
  border:1px solid #1d3552 !important;
  border-radius:4px !important;
  font-weight:900 !important;
  box-shadow:0 4px 12px rgba(7,20,38,.16) !important;
}

#zoomInfo button:hover{
  background:#102a44 !important;
  color:#f5e8b8 !important;
  border-color:rgba(212,175,55,.55) !important;
}

/* 혹시 남아 있는 데스크톱 세로 줌 표시가 노출될 경우 테마색 보정 */
#zoomIndicator,
#zoomBar,
#zoomLevelNum,
#zoomLevelLabel{
  color:#f5e8b8 !important;
}

#zoomIndicator{
  background:#0b1b31 !important;
  border:1px solid #1d3552 !important;
  box-shadow:0 8px 22px rgba(7,20,38,.20) !important;
}

#zoomBar{
  background:#1d3552 !important;
}

#zoomBarFill{
  background:#d4af37 !important;
}

/* 모바일/태블릿 전용 줌 컨트롤: inline style보다 우선 적용 */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px) {
  #m-zoom{
    background:#0b1b31 !important;
    border:1px solid #1d3552 !important;
    box-shadow:0 8px 22px rgba(7,20,38,.22) !important;
  }

  #m-zoom > div{
    color:#f5e8b8 !important;
    background:transparent !important;
    border-color:#1d3552 !important;
  }

  #m-zoom > div:hover,
  #m-zoom > div:active{
    background:#102a44 !important;
    color:#f5e8b8 !important;
  }

  #m-zoom > div:nth-child(2){
    background:#1d3552 !important;
  }

  #m-maptype{
    background:#0b1b31 !important;
    border:1px solid #1d3552 !important;
    box-shadow:0 8px 22px rgba(7,20,38,.22) !important;
  }

  #m-maptype > div{
    color:#f5e8b8 !important;
    background:transparent !important;
  }

  #m-maptype > div[style*="background"]{
    background:#d4af37 !important;
    color:#071426 !important;
    font-weight:900 !important;
  }

  #m-finish-btn{
    background:#0b1b31 !important;
    color:#f5e8b8 !important;
    border:1px solid rgba(212,175,55,.45) !important;
    box-shadow:0 8px 22px rgba(7,20,38,.25) !important;
  }
}
@media (max-width: 390px) {
    #m-banner .m-brand-name {
        font-size:18px !important;
        letter-spacing:-1.4px !important;
    }
    #m-banner .m-brand-product {
        font-size:18px !important;
    }
    #zoomInfo {
        right:6px !important;
        min-width:122px !important;
        max-width:140px !important;
        padding:4px 5px !important;
    }
}


/* ============================================================
   MOBILE NO-FLICKER THEME v23
   - 클릭할 때마다 색상 재적용하지 않음
   - mobile.js 인라인 색상값을 테마색으로 직접 고정
   - CSS는 보조 레이아웃/줌레벨 한 줄만 담당
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #geojsonPanel,
    #topBar,
    #mainToolbar,
    #mapReportControls,
    #contactAgentCard {
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    #container {
        position:fixed !important;
        top:52px !important;
        left:0 !important;
        right:0 !important;
        bottom:52px !important;
    }

    #mapWrapper,
    #map {
        width:100% !important;
        height:100% !important;
    }

    #m-banner {
        background:linear-gradient(180deg,#061427,#0b1b31) !important;
        border-bottom:1px solid rgba(212,175,55,.35) !important;
        color:#f8fbff !important;
    }

    #m-banner .m-brand-name {
        color:#ffffff !important;
        font-weight:950 !important;
    }

    #m-banner .m-brand-product {
        color:#d4af37 !important;
        font-weight:950 !important;
    }

    #m-tabbar {
        background:linear-gradient(180deg,#0b1b31,#071426) !important;
        border-top:1px solid rgba(212,175,55,.32) !important;
    }

    #m-tabbar div {
        transition:none !important;
    }

    #m-zoom,
    #m-maptype,
    #m-finish-btn {
        background:#0b1b31 !important;
        border-color:#1d3552 !important;
        color:#f5e8b8 !important;
    }

    .m-panel > div:nth-child(2) {
        background:linear-gradient(180deg,#102a44,#071426) !important;
        color:#f5e8b8 !important;
        border-bottom:1px solid rgba(212,175,55,.28) !important;
    }

    #zoomInfo {
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        gap:4px !important;
        white-space:nowrap !important;
        width:auto !important;
        min-width:128px !important;
        max-width:150px !important;
        height:34px !important;
        padding:4px 6px !important;
        position:fixed !important;
        left:auto !important;
        right:8px !important;
        bottom:64px !important;
        transform:none !important;
        margin:0 !important;
        z-index:405 !important;
        font-size:11px !important;
    }

    #zoomInfo br {
        display:none !important;
    }

    #zoomInfo input {
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        height:24px !important;
        padding:0 3px !important;
        text-align:center !important;
    }

    #zoomInfo button {
        height:24px !important;
        min-width:34px !important;
        padding:0 6px !important;
        background:#0b1b31 !important;
        color:#f5e8b8 !important;
        border:1px solid #1d3552 !important;
        border-radius:4px !important;
    }
}


/* ============================================================
   MOBILE PANEL CONSISTENCY v24
   그리기/경로 PC용 패널을 자료제공/레이어/측정과 같은 모바일 하단 팝업 톤으로 통일
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #drawingPanel,
    #routePanel,
    #searchPanel {
        position:fixed !important;
        bottom:52px !important;
        top:auto !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        background:#fff !important;
        border-radius:18px 18px 0 0 !important;
        border-top:1px solid rgba(15,34,56,.16) !important;
        box-shadow:0 -8px 30px rgba(7,20,38,.24) !important;
        z-index:460 !important;
        max-height:72vh !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }

    #drawingPanel .float-panel-header,
    #routePanel .float-panel-header,
    #searchPanel .float-panel-header,
    #drawingPanel .m-generated-header,
    #routePanel .m-generated-header,
    #searchPanel .m-generated-header {
        background:linear-gradient(180deg,#102a44,#071426) !important;
        color:#f5e8b8 !important;
        padding:11px 16px !important;
        font-size:14px !important;
        font-weight:900 !important;
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        border-bottom:1px solid rgba(212,175,55,.28) !important;
        border-radius:0 !important;
        cursor:default !important;
    }

    #drawingPanel .float-panel-header *,
    #routePanel .float-panel-header *,
    #searchPanel .float-panel-header *,
    #drawingPanel .m-generated-header *,
    #routePanel .m-generated-header *,
    #searchPanel .m-generated-header * {
        color:#f5e8b8 !important;
    }

    #drawingPanel .m-legacy-handle,
    #routePanel .m-legacy-handle,
    #searchPanel .m-legacy-handle,
    #drawingPanel .m-draw-handle,
    #routePanel .m-route-handle {
        width:36px !important;
        height:4px !important;
        background:#d8e0ea !important;
        border-radius:2px !important;
        margin:10px auto 0 !important;
    }

    #drawingPanel button,
    #routePanel button,
    #searchPanel button {
        min-height:44px !important;
        font-size:13px !important;
        border-radius:8px !important;
        border:1px solid #d8e0ea !important;
    }

    #drawingPanel input,
    #routePanel input,
    #searchPanel input {
        min-height:40px !important;
        font-size:14px !important;
        border:1px solid #d8e0ea !important;
        border-radius:8px !important;
    }
}


/* ============================================================
   MOBILE PANEL HEADER UNIFIED v31
   그리기/경로 패널 헤더를 자료제공/레이어/측정의 _ph() 구조와 동일하게 통일
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #drawingPanel > .float-panel-header:not(.m-unified-header),
    #routePanel > .float-panel-header:not(.m-unified-header),
    #searchPanel > .float-panel-header:not(.m-unified-header) {
        display:none !important;
    }

    #drawingPanel .m-unified-mobile-head-wrap,
    #routePanel .m-unified-mobile-head-wrap,
    #searchPanel .m-unified-mobile-head-wrap {
        display:block !important;
    }

    #drawingPanel .m-unified-header,
    #routePanel .m-unified-header,
    #searchPanel .m-unified-header {
        background:#0b1b31 !important;
        color:#f5e8b8 !important;
        padding:11px 16px !important;
        font-size:14px !important;
        font-weight:700 !important;
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        border-bottom:1px solid rgba(212,175,55,.28) !important;
        border-radius:0 !important;
        box-sizing:border-box !important;
        min-height:auto !important;
        height:auto !important;
    }

    #drawingPanel .m-unified-close,
    #routePanel .m-unified-close,
    #searchPanel .m-unified-close {
        color:rgba(168,212,248,.5) !important;
        font-size:19px !important;
        font-weight:400 !important;
        cursor:pointer !important;
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 !important;
        line-height:1 !important;
    }
}


/* ============================================================
   MOBILE PANEL CLOSE X GOLD v32
   모든 모바일 하단 패널 닫기 X 색상을 테마 골드로 통일
   대상: 자료제공 / 레이어 / 측정 / 그리기 / 경로 / 검색
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    /* 자료제공/레이어/측정 등 _ph()로 생성되는 모바일 패널 닫기 X */
    .m-panel > div:nth-child(2) span[onclick="_closeAll()"] {
        color:#d4af37 !important;
        font-size:19px !important;
        font-weight:400 !important;
    }

    /* 그리기/경로/검색 unified 모바일 헤더 닫기 X */
    #drawingPanel .m-unified-close,
    #routePanel .m-unified-close,
    #searchPanel .m-unified-close {
        color:#d4af37 !important;
        font-size:19px !important;
        font-weight:400 !important;
        line-height:1 !important;
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 !important;
    }

    .m-panel > div:nth-child(2) span[onclick="_closeAll()"]:hover,
    #drawingPanel .m-unified-close:hover,
    #routePanel .m-unified-close:hover,
    #searchPanel .m-unified-close:hover {
        color:#f5e8b8 !important;
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
    }
}


/* ============================================================
   MOBILE BOTTOM MENU COLOR v33
   하단 메뉴 글씨색을 상단 위성/로드뷰 버튼 글씨색 계열과 통일
   - 기본: 골드 아이보리 #f5e8b8
   - 활성: 골드 #d4af37
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-tabbar {
        background:linear-gradient(180deg,#0b1b31,#071426) !important;
        border-top:1px solid rgba(212,175,55,.32) !important;
    }

    #m-tabbar div {
        color:#f5e8b8 !important;
        opacity:.92 !important;
    }

    #m-tabbar div[style*="transparent"] {
        color:#f5e8b8 !important;
        opacity:.92 !important;
    }

    #m-tabbar div[style*="solid"]:not([style*="transparent"]) {
        color:#d4af37 !important;
        opacity:1 !important;
        border-top-color:#d4af37 !important;
    }

    #m-tabbar div:active {
        color:#d4af37 !important;
        opacity:1 !important;
    }
}


/* ============================================================
   MOBILE / TABLET MAP ZOOM BUTTON HIDE v41
   - 모바일/태블릿 우측 상단 + / - 줌 버튼만 숨김
   - 하단 줌레벨 입력/이동(#zoomInfo)은 유지
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-zoom {
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    #zoomInfo {
        display:flex !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }
}


/* ============================================================
   MOBILE CONTACT MINI CARD v42
   모바일/태블릿 전용 문의 버튼 + 펼침 카드
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-contact-root {
        position:fixed !important;
        left:10px !important;
        bottom:64px !important;
        z-index:404 !important;
        display:block;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        pointer-events:auto !important;
    }

    #m-contact-btn {
        height:34px !important;
        padding:0 12px !important;
        border-radius:17px !important;
        border:1px solid rgba(212,175,55,.46) !important;
        background:#0b1b31 !important;
        color:#f5e8b8 !important;
        font-size:12px !important;
        font-weight:900 !important;
        line-height:1 !important;
        box-shadow:0 8px 22px rgba(7,20,38,.22) !important;
        cursor:pointer !important;
        white-space:nowrap !important;
        font-family:inherit !important;
    }

    #m-contact-card {
        display:none;
        position:absolute !important;
        left:0 !important;
        bottom:42px !important;
        width:250px !important;
        background:#ffffff !important;
        border-radius:12px !important;
        border:1px solid rgba(15,34,56,.18) !important;
        box-shadow:0 14px 34px rgba(7,20,38,.28) !important;
        overflow:hidden !important;
    }

    #m-contact-root.open #m-contact-card {
        display:block !important;
    }

    #m-contact-root.open #m-contact-btn {
        display:none !important;
    }

    #m-contact-card .m-contact-card-head {
        background:linear-gradient(180deg,#102a44,#071426) !important;
        color:#f5e8b8 !important;
        padding:10px 12px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        border-bottom:1px solid rgba(212,175,55,.28) !important;
    }

    #m-contact-card .m-contact-brand {
        color:#ffffff !important;
        font-size:14px !important;
        font-weight:950 !important;
        letter-spacing:-.5px !important;
        line-height:1.15 !important;
    }

    #m-contact-card .m-contact-sub {
        margin-top:3px !important;
        color:#d4af37 !important;
        font-size:10px !important;
        font-weight:700 !important;
        line-height:1.2 !important;
    }

    #m-contact-card .m-contact-close {
        appearance:none !important;
        -webkit-appearance:none !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        color:#d4af37 !important;
        font-size:16px !important;
        font-weight:700 !important;
        line-height:1 !important;
        padding:0 !important;
        margin:0 !important;
        width:22px !important;
        height:22px !important;
        cursor:pointer !important;
    }

    #m-contact-card .m-contact-body {
        padding:11px 12px 12px !important;
        background:#fff !important;
    }

    #m-contact-card .m-contact-person {
        display:flex !important;
        align-items:center !important;
        gap:7px !important;
        color:#0b1b31 !important;
        font-size:13px !important;
        line-height:1.2 !important;
    }

    #m-contact-card .m-contact-badge {
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:4px 7px !important;
        border-radius:999px !important;
        background:rgba(212,175,55,.16) !important;
        color:#0b1b31 !important;
        font-size:10px !important;
        font-weight:800 !important;
        white-space:nowrap !important;
    }

    #m-contact-card .m-contact-actions {
        margin-top:10px !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:7px !important;
    }

    #m-contact-card .m-contact-action {
        height:34px !important;
        border-radius:8px !important;
        border:1px solid #d8e0ea !important;
        background:#f8fafc !important;
        color:#0b1b31 !important;
        font-size:12px !important;
        font-weight:900 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-decoration:none !important;
        cursor:pointer !important;
        font-family:inherit !important;
        box-sizing:border-box !important;
    }

    #m-contact-card .m-contact-action:first-child {
        background:#0b1b31 !important;
        border-color:#1d3552 !important;
        color:#f5e8b8 !important;
    }
}

@media (max-width: 360px) {
    #m-contact-root {
        left:8px !important;
    }

    #m-contact-card {
        width:232px !important;
    }

    #m-contact-btn {
        padding:0 10px !important;
    }
}


/* ============================================================
   MOBILE CONTACT BUTTON STYLE v43
   상담문의 버튼 시안성 개선
   - 1안: 딥네이비 배경 + 골드 테두리 + 아이보리 글자
   - 문구: 상담문의
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-contact-btn {
        height:38px !important;
        padding:0 15px !important;
        border-radius:19px !important;
        background:#071426 !important;
        color:#f5e8b8 !important;
        border:1.5px solid #d4af37 !important;
        font-size:13px !important;
        font-weight:900 !important;
        letter-spacing:-.2px !important;
        line-height:1 !important;
        box-shadow:0 8px 24px rgba(7,20,38,.35) !important;
    }

    #m-contact-btn:active {
        background:#102a44 !important;
        color:#ffffff !important;
        border-color:#d4af37 !important;
        transform:translateY(1px) !important;
    }
}


/* ============================================================
   MOBILE CONTACT MODAL v44
   모바일 상담문의 팝업을 PC 문의 팝업과 유사한 구조로 표시
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-contact-modal-overlay {
        position:fixed !important;
        inset:0 !important;
        z-index:470 !important;
        background:rgba(7,20,38,.52) !important;
        display:none;
        align-items:center !important;
        justify-content:center !important;
        padding:16px !important;
        box-sizing:border-box !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
    }

    #m-contact-modal {
        position:relative !important;
        width:calc(100vw - 32px) !important;
        max-width:340px !important;
        max-height:72vh !important;
        overflow-y:auto !important;
        background:#ffffff !important;
        border-radius:12px !important;
        border:1px solid rgba(15,34,56,.14) !important;
        box-shadow:0 24px 70px rgba(7,20,38,.34) !important;
        padding:22px 18px 18px !important;
        box-sizing:border-box !important;
    }

    #m-contact-modal-close {
        position:absolute !important;
        top:12px !important;
        right:12px !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        border:0 !important;
        background:transparent !important;
        color:#071426 !important;
        width:26px !important;
        height:26px !important;
        padding:0 !important;
        margin:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:26px !important;
        font-weight:700 !important;
        line-height:1 !important;
        cursor:pointer !important;
        box-shadow:none !important;
    }

    #m-contact-modal-close:active {
        color:#d4af37 !important;
    }

    #m-contact-modal .m-contact-modal-head {
        display:grid !important;
        grid-template-columns:98px 1fr !important;
        gap:16px !important;
        align-items:center !important;
        margin-bottom:18px !important;
        padding-right:26px !important;
    }

    #m-contact-modal .m-contact-modal-logo {
        width:98px !important;
        height:98px !important;
        border-radius:6px !important;
        overflow:hidden !important;
        border:1px solid #d8e0ea !important;
        background:#f8fafc !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
    }

    #m-contact-modal .m-contact-modal-logo img {
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

    #m-contact-modal h3 {
        margin:0 !important;
        color:#0b1b31 !important;
        font-size:17px !important;
        font-weight:900 !important;
        line-height:1.45 !important;
        letter-spacing:-.3px !important;
    }

    #m-contact-modal .m-contact-choice {
        width:100% !important;
        min-height:46px !important;
        border-radius:8px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-decoration:none !important;
        box-sizing:border-box !important;
        font-size:15px !important;
        font-weight:900 !important;
        letter-spacing:-.2px !important;
        margin-top:11px !important;
        border:1px solid #d8e0ea !important;
        color:#0b1b31 !important;
        background:#ffffff !important;
    }

    #m-contact-modal .m-contact-choice.kakao-choice {
        background:#fff6bf !important;
        border-color:#eadf9a !important;
        color:#0b1b31 !important;
    }

    #m-contact-modal .m-contact-choice.naver-choice {
        background:#e8f9ef !important;
        border-color:#c8ecd6 !important;
        color:#04713b !important;
    }

    #m-contact-modal .m-contact-choice.tel-choice {
        background:#ffffff !important;
        border-color:#d8e0ea !important;
        color:#0b1b31 !important;
    }

    #m-contact-modal .m-contact-choice:active {
        transform:translateY(1px) !important;
        filter:brightness(.98) !important;
    }
}

@media (max-width: 360px) {
    #m-contact-modal {
        width:calc(100vw - 24px) !important;
        padding:20px 14px 16px !important;
    }

    #m-contact-modal .m-contact-modal-head {
        grid-template-columns:86px 1fr !important;
        gap:13px !important;
    }

    #m-contact-modal .m-contact-modal-logo {
        width:86px !important;
        height:86px !important;
    }

    #m-contact-modal h3 {
        font-size:16px !important;
    }
}


/* ============================================================
   MOBILE MORE / FIELD MEMO / SAVE v45
   하단바 더보기 2단 메뉴 + 임장메모 / 파일불러오기 / 레이어 저장
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-panel-more,
    #m-panel-imjang {
        z-index:460 !important;
    }

    #m-more-grid {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
    }

    #m-more-grid .m-more-action {
        min-height:48px !important;
        padding:12px 8px !important;
        background:#f8fafc !important;
        border:1px solid #d8e0ea !important;
        border-radius:10px !important;
        font-size:13px !important;
        font-weight:900 !important;
        color:#0b1b31 !important;
        text-align:center !important;
        cursor:pointer !important;
        width:100% !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        box-sizing:border-box !important;
    }

    #m-more-grid .m-more-action:active,
    #m-panel-imjang button:active {
        transform:translateY(1px) !important;
        background:#eef2f7 !important;
    }

    #m-panel-imjang button {
        min-height:46px !important;
        padding:12px !important;
        background:#f8fafc !important;
        border:1px solid #d8e0ea !important;
        border-radius:10px !important;
        font-size:14px !important;
        font-weight:900 !important;
        color:#0b1b31 !important;
        text-align:left !important;
        cursor:pointer !important;
        width:100% !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        box-sizing:border-box !important;
    }
}


/* ============================================================
   MOBILE MORE BAR v46
   더보기 클릭 시 하단바 바로 위에 2단 확장바 표시
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-tabbar div[data-tab="more"] {
        font-size:19px !important;
        font-weight:900 !important;
        letter-spacing:0 !important;
    }

    #m-morebar {
        display:none;
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:52px !important;
        height:48px !important;
        background:#071426 !important;
        border-top:1px solid rgba(212,175,55,.28) !important;
        box-shadow:0 -2px 10px rgba(7,20,38,.28) !important;
        z-index:499 !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        white-space:nowrap !important;
    }

    #m-morebar .m-morebar-btn {
        height:48px !important;
        min-width:72px !important;
        padding:0 10px !important;
        background:transparent !important;
        border:0 !important;
        border-right:1px solid rgba(212,175,55,.16) !important;
        color:#f5e8b8 !important;
        font-size:12px !important;
        font-weight:900 !important;
        cursor:pointer !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        white-space:nowrap !important;
    }

    #m-morebar .m-morebar-btn:active {
        background:rgba(212,175,55,.12) !important;
        color:#ffffff !important;
    }
}

@media (max-width: 390px) {
    #m-morebar .m-morebar-btn {
        min-width:68px !important;
        padding:0 8px !important;
        font-size:11.5px !important;
    }
}


/* ============================================================
   MOBILE ATTRIBUTE SHEET SAFE v48
   모바일/태블릿 속성정보창을 하단 시트형으로 표시
   - JS 감시/MutationObserver 없음
   - 팝업이 열릴 때 원본 show 함수에서만 위치 보정
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #geojsonPopup.m-attr-sheet,
    #clusterPopup.m-attr-sheet {
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:52px !important;
        top:auto !important;
        width:100% !important;
        max-width:none !important;
        max-height:62vh !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
        border-radius:18px 18px 0 0 !important;
        border:1px solid rgba(15,34,56,.16) !important;
        border-bottom:none !important;
        box-shadow:0 -8px 30px rgba(7,20,38,.24) !important;
        z-index:468 !important;
        box-sizing:border-box !important;
        background:#fff !important;
    }

    #geojsonPopup.m-attr-sheet .popup-title,
    #clusterPopup.m-attr-sheet #clusterPopupHeader,
    #clusterPopup.m-attr-sheet .popup-title {
        background:linear-gradient(180deg,#102a44,#071426) !important;
        color:#f5e8b8 !important;
        padding:11px 16px !important;
        font-size:14px !important;
        font-weight:900 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        border-bottom:1px solid rgba(212,175,55,.28) !important;
        cursor:default !important;
        border-radius:18px 18px 0 0 !important;
        box-sizing:border-box !important;
    }

    #geojsonPopup.m-attr-sheet .popup-close,
    #clusterPopup.m-attr-sheet .popup-close {
        color:#d4af37 !important;
        font-size:18px !important;
        font-weight:700 !important;
        cursor:pointer !important;
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 !important;
    }

    #geojsonPopup.m-attr-sheet table,
    #clusterPopup.m-attr-sheet table {
        width:100% !important;
    }
}


/* ============================================================
   MOBILE ATTRIBUTE CONTACT HIDE v49
   속성정보창/클러스터 팝업 열림 시 상담문의 버튼 겹침 방지
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-contact-root[data-attr-hidden="1"] {
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }
}


/* ============================================================
   MOBILE LAYER DELETE v50
   모바일 레이어 목록 삭제 버튼
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    .m-layer-item-v50 {
        display:grid !important;
        grid-template-columns:10px 1fr auto !important;
        gap:10px !important;
        align-items:center !important;
        padding:12px 16px !important;
        border-bottom:1px solid #f5f7fa !important;
        box-sizing:border-box !important;
    }

    .m-layer-delete-v50 {
        height:28px !important;
        padding:0 9px !important;
        border-radius:8px !important;
        border:1px solid #e8a0a0 !important;
        background:#fff0ee !important;
        color:#c0392b !important;
        font-size:11px !important;
        font-weight:900 !important;
        cursor:pointer !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        white-space:nowrap !important;
        box-sizing:border-box !important;
    }

    .m-layer-delete-v50:active {
        background:#ffe2de !important;
        transform:translateY(1px) !important;
    }
}


/* ============================================================
   MOBILE IMJANG PHOTO FORM v51
   임장메모 1차 사진첨부 입력폼
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-imjang-form-overlay {
        position:fixed !important;
        inset:0 !important;
        z-index:520 !important;
        background:rgba(7,20,38,.54) !important;
        display:none;
        align-items:center !important;
        justify-content:center !important;
        padding:16px !important;
        box-sizing:border-box !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
    }

    #m-imjang-form-box {
        width:calc(100vw - 32px) !important;
        max-width:360px !important;
        max-height:78vh !important;
        overflow-y:auto !important;
        background:#fff !important;
        border-radius:14px !important;
        border:1px solid rgba(15,34,56,.16) !important;
        box-shadow:0 24px 70px rgba(7,20,38,.34) !important;
    }

    #m-imjang-form-box .m-imjang-form-head {
        background:linear-gradient(180deg,#102a44,#071426) !important;
        color:#f5e8b8 !important;
        padding:12px 14px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        border-bottom:1px solid rgba(212,175,55,.28) !important;
    }

    #m-imjang-form-box .m-imjang-form-head strong {
        font-size:15px !important;
        font-weight:900 !important;
    }

    #m-imjang-form-close {
        appearance:none !important;
        -webkit-appearance:none !important;
        background:transparent !important;
        border:0 !important;
        color:#d4af37 !important;
        font-size:18px !important;
        font-weight:900 !important;
        width:28px !important;
        height:28px !important;
        padding:0 !important;
        cursor:pointer !important;
    }

    #m-imjang-form-box .m-imjang-form-body {
        padding:14px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
    }

    #m-imjang-form-box label {
        font-size:12px !important;
        font-weight:900 !important;
        color:#0b1b31 !important;
        margin-top:4px !important;
    }

    #m-imjang-form-box input[type="text"],
    #m-imjang-form-box textarea {
        width:100% !important;
        box-sizing:border-box !important;
        border:1px solid #d8e0ea !important;
        border-radius:9px !important;
        padding:11px 12px !important;
        font-size:14px !important;
        color:#0b1b31 !important;
        background:#f8fafc !important;
        font-family:inherit !important;
        outline:none !important;
    }

    #m-imjang-form-box textarea {
        resize:vertical !important;
        min-height:88px !important;
    }

    #m-imjang-form-box input[type="file"] {
        width:100% !important;
        box-sizing:border-box !important;
        border:1px dashed #b8c7d9 !important;
        border-radius:9px !important;
        padding:10px !important;
        font-size:12px !important;
        color:#0b1b31 !important;
        background:#fff !important;
        font-family:inherit !important;
    }

    #m-imjang-photo-name {
        font-size:11px !important;
        color:#6a8a9a !important;
        line-height:1.4 !important;
        padding:2px 0 4px !important;
    }

    #m-imjang-form-box .m-imjang-form-actions {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        margin-top:8px !important;
    }

    #m-imjang-save,
    #m-imjang-cancel {
        height:42px !important;
        border-radius:9px !important;
        border:1px solid #d8e0ea !important;
        font-size:14px !important;
        font-weight:900 !important;
        cursor:pointer !important;
        font-family:inherit !important;
    }

    #m-imjang-save {
        background:#071426 !important;
        color:#f5e8b8 !important;
        border-color:#1d3552 !important;
    }

    #m-imjang-cancel {
        background:#f8fafc !important;
        color:#0b1b31 !important;
    }
}


/* ============================================================
   MOBILE IMJANG KOREAN FIELDS / PHOTO BUTTON v52
   - 사진촬영 버튼 방식
   - 임장메모 GeoJSON 한글 필드명 저장
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-imjang-photo-btn {
        width:100% !important;
        height:44px !important;
        border-radius:9px !important;
        border:1.5px solid #d4af37 !important;
        background:#071426 !important;
        color:#f5e8b8 !important;
        font-size:14px !important;
        font-weight:900 !important;
        cursor:pointer !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        box-sizing:border-box !important;
        box-shadow:0 6px 16px rgba(7,20,38,.16) !important;
    }

    #m-imjang-photo-btn:active {
        background:#102a44 !important;
        transform:translateY(1px) !important;
    }
}


/* ============================================================
   MOBILE IMJANG EDIT / MULTI PHOTO v53
   - 사진 여러 장 첨부
   - 첨부사진 목록/삭제
   - 임장메모 속성편집
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-imjang-photo-btn {
        height:44px !important;
    }

    #m-imjang-photo-list {
        display:flex !important;
        flex-direction:column !important;
        gap:6px !important;
        margin-top:2px !important;
    }

    #m-imjang-photo-list .m-imjang-photo-row {
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:8px !important;
        padding:8px 9px !important;
        border:1px solid #e2e8f0 !important;
        background:#f8fafc !important;
        border-radius:8px !important;
        font-size:12px !important;
        color:#0b1b31 !important;
        box-sizing:border-box !important;
    }

    #m-imjang-photo-list .m-imjang-photo-row span {
        flex:1 !important;
        min-width:0 !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
    }

    #m-imjang-photo-list .m-imjang-photo-row button {
        flex-shrink:0 !important;
        height:26px !important;
        padding:0 8px !important;
        border-radius:7px !important;
        border:1px solid #e8a0a0 !important;
        background:#fff0ee !important;
        color:#c0392b !important;
        font-size:11px !important;
        font-weight:900 !important;
        cursor:pointer !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
    }

    #m-imjang-edit-btn {
        width:100% !important;
        height:38px !important;
        border-radius:9px !important;
        border:1.5px solid #d4af37 !important;
        background:#071426 !important;
        color:#f5e8b8 !important;
        font-weight:900 !important;
        font-size:13px !important;
        cursor:pointer !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
    }

    #m-imjang-edit-btn:active {
        background:#102a44 !important;
        transform:translateY(1px) !important;
    }
}


/* ============================================================
   PC LAYER FEATURE COUNT v55
   PC 레이어 목록에 현재 누적 피처 수 표시
   예: 가구수 (275개)
============================================================ */
.geojson-layer-item .layer-name {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* ============================================================
   PC ROADVIEW UI FIX v59
   로드뷰 모드에서 PC 패널 충돌 방지 + 미니맵 우측 하단 이동
============================================================ */
@media (min-width: 769px) {
    body.pc-roadview-mode #geojsonPanel,
    body.pc-roadview-mode #zoomInfo,
    body.pc-roadview-mode #dataServicePanel,
    body.pc-roadview-mode #searchPanel,
    body.pc-roadview-mode #routePanel,
    body.pc-roadview-mode #drawingPanel,
    body.pc-roadview-mode #choroplethPanel,
    body.pc-roadview-mode #statisticsPanel,
    body.pc-roadview-mode #contactAgentCard,
    body.pc-roadview-mode #contactModalOverlay,
    body.pc-roadview-mode #mapReportControls {
        display:none !important;
    }

    body.pc-roadview-mode #container {
        left:0 !important;
    }

    body.pc-roadview-mode #container.view_roadview #mapWrapper {
        width:300px !important;
        height:190px !important;
        right:20px !important;
        left:auto !important;
        bottom:20px !important;
        top:auto !important;
        z-index:20 !important;
    }

    body.pc-roadview-mode #rvClose {
        top:16px !important;
        left:16px !important;
        z-index:35 !important;
    }
}


/* ============================================================
   MOBILE ROADVIEW ZOOM HIDE v63
   모바일 실제 로드뷰 화면에서 JS로 #m-zoom 숨김/복구
   상담문의 버튼은 유지
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-zoom[data-rv-hidden="1"] {
        display:none !important;
    }
}


/* ============================================================
   MOBILE ROADVIEW ZOOM HIDE v64
   로드뷰 현장 화면에서 남는 공통 줌레벨창까지 숨김
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-zoom[data-rv-hidden="1"],
    #zoomInfo[data-rv-hidden="1"],
    #zoomIndicator[data-rv-hidden="1"] {
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }
}


/* ============================================================
   MOBILE CLICK INFO v65
   모바일 클릭정보 하단 시트
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-clickinfo-sheet-v65 {
        display:none;
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:52px !important;
        background:#ffffff !important;
        border-radius:18px 18px 0 0 !important;
        border-top:1px solid rgba(15,34,56,.16) !important;
        box-shadow:0 -8px 30px rgba(7,20,38,.25) !important;
        z-index:470 !important;
        max-height:62vh !important;
        overflow-y:auto !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
    }

    #m-clickinfo-sheet-v65 .m-clickinfo-head-v65 {
        background:linear-gradient(180deg,#102a44,#071426) !important;
        color:#f5e8b8 !important;
        padding:12px 16px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        border-radius:18px 18px 0 0 !important;
        border-bottom:1px solid rgba(212,175,55,.28) !important;
    }

    #m-clickinfo-sheet-v65 .m-clickinfo-head-v65 strong {
        font-size:15px !important;
        font-weight:900 !important;
    }

    #m-clickinfo-close-v65 {
        background:transparent !important;
        border:0 !important;
        color:#d4af37 !important;
        font-size:18px !important;
        font-weight:900 !important;
        width:28px !important;
        height:28px !important;
        cursor:pointer !important;
    }

    #m-clickinfo-sheet-v65 .m-clickinfo-body-v65 {
        padding:14px 16px 16px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
    }

    #m-clickinfo-sheet-v65 .m-clickinfo-row-v65 {
        display:grid !important;
        grid-template-columns:72px 1fr !important;
        gap:10px !important;
        align-items:start !important;
        padding:9px 10px !important;
        background:#f8fafc !important;
        border:1px solid #e2e8f0 !important;
        border-radius:9px !important;
        box-sizing:border-box !important;
    }

    #m-clickinfo-sheet-v65 b {
        color:#0b1b31 !important;
        font-size:12px !important;
        font-weight:900 !important;
        white-space:nowrap !important;
    }

    #m-clickinfo-sheet-v65 span {
        color:#24384d !important;
        font-size:12px !important;
        line-height:1.45 !important;
        word-break:break-all !important;
    }

    #m-clickinfo-sheet-v65 .m-clickinfo-grid-v65 {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    #m-clickinfo-sheet-v65 .m-clickinfo-grid-v65 > div {
        padding:9px 10px !important;
        background:#f8fafc !important;
        border:1px solid #e2e8f0 !important;
        border-radius:9px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
    }

    #m-clickinfo-imjang-v65 {
        height:42px !important;
        border-radius:10px !important;
        border:1.5px solid #d4af37 !important;
        background:#071426 !important;
        color:#f5e8b8 !important;
        font-size:14px !important;
        font-weight:900 !important;
        cursor:pointer !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        margin-top:2px !important;
    }

    #m-clickinfo-btn-v65 {
        transition:background .12s, color .12s !important;
    }
}


/* ============================================================
   MOBILE CLICK INFO EXIT v66
   클릭정보 ON 상태에서 일반/위성/로드뷰 아래 '클릭종료' 표시
============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (hover: none) and (max-width: 1366px) {
    #m-clickinfo-exit-v66 {
        display:none;
        position:fixed !important;
        top:106px !important;
        left:10px !important;
        z-index:505 !important;
        min-width:82px !important;
        height:34px !important;
        padding:0 12px !important;
        border-radius:999px !important;
        border:1.5px solid #d4af37 !important;
        background:rgba(7,20,38,.94) !important;
        color:#f5e8b8 !important;
        font-size:12px !important;
        font-weight:900 !important;
        font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif !important;
        box-shadow:0 8px 22px rgba(7,20,38,.28) !important;
        cursor:pointer !important;
        -webkit-tap-highlight-color:transparent !important;
    }

    #m-clickinfo-exit-v66:active {
        background:#102a44 !important;
        color:#d4af37 !important;
        transform:translateY(1px) !important;
    }
}

/* ============================================================
   자료제공 패널 스크롤 보강 v92
   - 자료제공량 증가 대비
   - 헤더는 그대로 두고 메뉴 목록 영역만 세로 스크롤
============================================================ */
#dataServicePanel{
    max-height:calc(100vh - 86px);
    overflow:hidden !important;
}
#dataServicePanel .float-panel-body{
    padding:0 !important;
    max-height:calc(100vh - 130px);
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#9fb3c8 #eef3f8;
}
#dataServicePanel .float-panel-body::-webkit-scrollbar{
    width:8px;
}
#dataServicePanel .float-panel-body::-webkit-scrollbar-track{
    background:#eef3f8;
    border-left:1px solid #dde6f0;
}
#dataServicePanel .float-panel-body::-webkit-scrollbar-thumb{
    background:#9fb3c8;
    border-radius:8px;
    border:2px solid #eef3f8;
}
#dataServicePanel .float-panel-body::-webkit-scrollbar-thumb:hover{
    background:#6f8faa;
}
#dataServicePanel .ds-cat-header{
    position:relative;
    z-index:1;
}

/* 모바일에서 자료제공 목록도 화면 높이에 맞춰 자연스럽게 스크롤 */
body.mobile-view #dataServicePanel,
body.is-mobile #dataServicePanel,
#dataServicePanel.m-panel{
    max-height:72vh !important;
}
body.mobile-view #dataServicePanel .float-panel-body,
body.is-mobile #dataServicePanel .float-panel-body,
#dataServicePanel.m-panel .float-panel-body{
    max-height:calc(72vh - 58px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
}

/* ============================================================
   자료제공 패널 스크롤 재정리 v93
   - 하위 아코디언이 잘리는 문제 수정
   - 패널 헤더는 고정, 메뉴 목록 전체만 스크롤
============================================================ */
#dataServicePanel{
    display:none;
    max-height:calc(100vh - 84px) !important;
    overflow:hidden !important;
    flex-direction:column;
}
#dataServicePanel[style*="display: block"],
#dataServicePanel[style*="display:block"]{
    display:flex !important;
}
#dataServicePanel > .float-panel-header{
    flex:0 0 auto;
}
#dataServicePanel > .float-panel-body,
#dataServicePanel > .float-panel-body.ds-scroll-body{
    flex:1 1 auto;
    min-height:0;
    padding:0 !important;
    max-height:none !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#9fb3c8 #eef3f8;
}

/* 아코디언 하위 메뉴가 펼쳐질 때 내부에서 잘리지 않도록 보정 */
#dataServicePanel .ds-cat-body{
    overflow:visible !important;
}
#dataServicePanel .ds-cat-body[style*="display: block"],
#dataServicePanel .ds-cat-body[style*="display:block"]{
    display:block !important;
    height:auto !important;
    max-height:none !important;
}

/* 팝업 내부 전체 목록 스크롤바 */
#dataServicePanel > .float-panel-body::-webkit-scrollbar{
    width:9px;
}
#dataServicePanel > .float-panel-body::-webkit-scrollbar-track{
    background:#eef3f8;
    border-left:1px solid #dde6f0;
}
#dataServicePanel > .float-panel-body::-webkit-scrollbar-thumb{
    background:#9fb3c8;
    border-radius:9px;
    border:2px solid #eef3f8;
}
#dataServicePanel > .float-panel-body::-webkit-scrollbar-thumb:hover{
    background:#6f8faa;
}

/* 모바일 하단시트에서는 기존 형태 유지하되 목록 영역만 스크롤 */
body.mobile-view #dataServicePanel,
body.is-mobile #dataServicePanel,
#dataServicePanel.m-panel{
    max-height:72vh !important;
}
body.mobile-view #dataServicePanel > .float-panel-body,
body.is-mobile #dataServicePanel > .float-panel-body,
#dataServicePanel.m-panel > .float-panel-body{
    max-height:none !important;
    overflow-y:auto !important;
}

/* ============================================================
   자료제공 패널 하단 안전여백 보강 v94
   - 윈도우 작업표시줄/브라우저 하단 상태영역에 마지막 메뉴가 가려지는 문제 수정
============================================================ */
#dataServicePanel{
    max-height:calc(100vh - 118px) !important;
}
#dataServicePanel > .float-panel-body,
#dataServicePanel > .float-panel-body.ds-scroll-body{
    padding-bottom:24px !important;
}

/* 모바일/터치 환경 안전영역 */
body.mobile-view #dataServicePanel,
body.is-mobile #dataServicePanel,
#dataServicePanel.m-panel{
    max-height:68vh !important;
}
body.mobile-view #dataServicePanel > .float-panel-body,
body.is-mobile #dataServicePanel > .float-panel-body,
#dataServicePanel.m-panel > .float-panel-body{
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   자료제공 패널 하단 공백 축소 v95
   - v94의 과한 하단 공백을 줄이되 상태바 가림 방지는 유지
============================================================ */
#dataServicePanel{
    max-height:calc(100vh - 104px) !important;
}
#dataServicePanel > .float-panel-body,
#dataServicePanel > .float-panel-body.ds-scroll-body{
    padding-bottom:8px !important;
}

/* 모바일/터치 환경도 과한 공백 축소 */
body.mobile-view #dataServicePanel,
body.is-mobile #dataServicePanel,
#dataServicePanel.m-panel{
    max-height:70vh !important;
}
body.mobile-view #dataServicePanel > .float-panel-body,
body.is-mobile #dataServicePanel > .float-panel-body,
#dataServicePanel.m-panel > .float-panel-body{
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   PC 속성정보 팝업 위치/스크롤 보강 v96
   - 상단바/툴바 뒤로 헤더가 가려지는 문제 방지
============================================================ */
@media (min-width: 769px) and (hover: hover) {
    #geojsonPopup.pc-attr-popup-v96,
    #clusterPopup.pc-attr-popup-v96 {
        z-index:9998 !important;
        max-width:min(420px, calc(100vw - 16px)) !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        box-sizing:border-box !important;
    }
    #geojsonPopup.pc-attr-popup-v96 .popup-title,
    #clusterPopup.pc-attr-popup-v96 #clusterPopupHeader {
        position:sticky;
        top:0;
        z-index:2;
    }
    #geojsonPopup.pc-attr-popup-v96::-webkit-scrollbar,
    #clusterPopup.pc-attr-popup-v96::-webkit-scrollbar {
        width:8px;
    }
    #geojsonPopup.pc-attr-popup-v96::-webkit-scrollbar-track,
    #clusterPopup.pc-attr-popup-v96::-webkit-scrollbar-track {
        background:#f1f5f9;
    }
    #geojsonPopup.pc-attr-popup-v96::-webkit-scrollbar-thumb,
    #clusterPopup.pc-attr-popup-v96::-webkit-scrollbar-thumb {
        background:#b7c4d2;
        border-radius:8px;
    }
}

/* ============================================================
   모바일 자료제공 하위메뉴 스크롤 v104
   - 토지정보처럼 하위메뉴가 많은 카테고리가 화면을 과하게 가리는 문제 보정
   - PC 자료제공 패널은 기존 구조 유지
============================================================ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu {
        max-height:138px !important; /* 약 3개 항목 + 일부 다음 항목이 보이는 높이 */
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        scrollbar-width:thin;
    }

    #dataServicePanel .ds-cat-body.mobile-scroll-submenu .ds-sub-item {
        min-height:44px;
        box-sizing:border-box;
    }

    #dataServicePanel .ds-cat-body.mobile-scroll-submenu::-webkit-scrollbar {
        width:6px;
    }
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu::-webkit-scrollbar-track {
        background:#eef3f8;
    }
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu::-webkit-scrollbar-thumb {
        background:#a8b7c8;
        border-radius:6px;
    }
}

/* ============================================================
   모바일 자료제공 최하위메뉴 스크롤 강제 보정 v105
   - v104의 matchMedia/class 조건 누락 가능성 보완
   - 모바일 패널 상태에서는 펼쳐진 하위메뉴 자체에 스크롤 적용
============================================================ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    #dataServicePanel.m-panel .ds-cat-body,
    body.mobile-view #dataServicePanel .ds-cat-body,
    body.is-mobile #dataServicePanel .ds-cat-body,
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu {
        max-height:138px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
        scrollbar-width:thin;
        touch-action:pan-y !important;
    }

    #dataServicePanel.m-panel .ds-cat-body[style*="display: block"],
    #dataServicePanel.m-panel .ds-cat-body[style*="display:block"],
    body.mobile-view #dataServicePanel .ds-cat-body[style*="display: block"],
    body.mobile-view #dataServicePanel .ds-cat-body[style*="display:block"],
    body.is-mobile #dataServicePanel .ds-cat-body[style*="display: block"],
    body.is-mobile #dataServicePanel .ds-cat-body[style*="display:block"] {
        max-height:138px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        display:block !important;
    }

    #dataServicePanel.m-panel .ds-cat-body .ds-sub-item,
    body.mobile-view #dataServicePanel .ds-cat-body .ds-sub-item,
    body.is-mobile #dataServicePanel .ds-cat-body .ds-sub-item,
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu .ds-sub-item {
        min-height:44px;
        box-sizing:border-box;
        flex:0 0 auto;
    }

    #dataServicePanel.m-panel .ds-cat-body::-webkit-scrollbar,
    body.mobile-view #dataServicePanel .ds-cat-body::-webkit-scrollbar,
    body.is-mobile #dataServicePanel .ds-cat-body::-webkit-scrollbar,
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu::-webkit-scrollbar {
        width:6px;
    }

    #dataServicePanel.m-panel .ds-cat-body::-webkit-scrollbar-track,
    body.mobile-view #dataServicePanel .ds-cat-body::-webkit-scrollbar-track,
    body.is-mobile #dataServicePanel .ds-cat-body::-webkit-scrollbar-track,
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu::-webkit-scrollbar-track {
        background:#eef3f8;
    }

    #dataServicePanel.m-panel .ds-cat-body::-webkit-scrollbar-thumb,
    body.mobile-view #dataServicePanel .ds-cat-body::-webkit-scrollbar-thumb,
    body.is-mobile #dataServicePanel .ds-cat-body::-webkit-scrollbar-thumb,
    #dataServicePanel .ds-cat-body.mobile-scroll-submenu::-webkit-scrollbar-thumb {
        background:#a8b7c8;
        border-radius:6px;
    }
}

/* ============================================================
   실제 모바일 자료제공 최하위 목록 스크롤 v106
   - mobile.js의 #m-ds-body 렌더링 구조에 직접 적용
   - 토지정보처럼 항목이 많은 카테고리가 화면을 가리지 않도록 보정
============================================================ */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    #m-panel-data #m-cat-row {
        flex-shrink:0 !important;
    }

    #m-panel-data #m-ds-body.m-ds-body-scroll-v106,
    #m-ds-body.m-ds-body-scroll-v106 {
        max-height:138px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
        touch-action:pan-y !important;
        scrollbar-width:thin;
        border-bottom:1px solid #e2e8f0;
    }

    #m-panel-data #m-ds-body.m-ds-body-scroll-v106 > div,
    #m-ds-body.m-ds-body-scroll-v106 > div {
        min-height:44px;
        box-sizing:border-box;
        flex-shrink:0;
    }

    #m-panel-data #m-ds-body.m-ds-body-scroll-v106::-webkit-scrollbar,
    #m-ds-body.m-ds-body-scroll-v106::-webkit-scrollbar {
        width:6px;
    }

    #m-panel-data #m-ds-body.m-ds-body-scroll-v106::-webkit-scrollbar-track,
    #m-ds-body.m-ds-body-scroll-v106::-webkit-scrollbar-track {
        background:#eef3f8;
    }

    #m-panel-data #m-ds-body.m-ds-body-scroll-v106::-webkit-scrollbar-thumb,
    #m-ds-body.m-ds-body-scroll-v106::-webkit-scrollbar-thumb {
        background:#a8b7c8;
        border-radius:6px;
    }
}



/* ============================================================
   PC 객체 선택 기능 v122
============================================================ */
.pc-select-guide-v122{
    font-size:11px;
    color:#667085;
    line-height:1.35;
    background:#f6f8fb;
    border:1px solid #e5eaf2;
    border-radius:7px;
    padding:7px 8px;
}
.pc-select-count-v122{
    font-size:12px;
    font-weight:800;
    color:#1e3a5a;
    background:#fff8d7;
    border:1px solid #ead58f;
    border-radius:7px;
    padding:7px 8px;
}
#btnPcFeatureSelectV122.active{
    background:#1e3a5a;
    color:#fff;
    border-color:#1e3a5a;
}