/* desktop ----------------1441 이상 */
@media (min-width: 1920px){
    
/* ===============================================
  header
===============================================*/
body .wm-status_wrap .wm-status-header-btn,
body .wm-status_wrap .wm-status-map-control-setting{display: none;}
body .wm-status_wrap header.wm-status-header{width: 54%; height: var(--rem4_2);} /*2026-08-21 sdashboard와 너비통일*/
.wm-status-header-tab{
    display: flex;
    gap: var(--rem0_4);
}
.wm-status-header-tab button{
    width: max-content; min-width: 6rem; max-width: 8rem; padding: var(--rem0_25);
    background: transparent;
    border-style: none none solid none; border-width: 0 0 var(--rem0_25) 0;
    border-color: transparent;
    color: var(--wm-status-txt-base);
    opacity: 0.5; cursor: pointer;
}
.wm-status-header-tab button.on,
.wm-status-header-tab button:hover{
  opacity: 1; 
  transition: var(--wm-transition-normal);
}
.wm-status-header-tab button.on{
    border-color: transparent transparent var(--wm-sts-border100) transparent;
}

/* 현황판 이동메뉴 추가 2026-08-14 */
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup{width: 27%; max-height: 90%;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu-list .wm-view-menu {
    min-width: calc((100% - 0.25rem) / 2);
}

/* ===============================================
  main content container
===============================================*/
body .wm-status_wrap .wm-status-content{width: 54%; padding: 4.5rem 1.25rem 1.25rem;} /* 2026-08-21 너비 sdashboard랑 통일 */
body .wm-status_wrap .wm-status-content .wm-status-draghandle{display: none;}

/* 모바일용 닫힘 */
body .wm-status_wrap .wm-status-content .wm-sts-popup-close{display: none; visibility: hidden;}

/*======================
  탭 공통 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail{overflow: hidden;}
/* font 2026-08-21 녹조폰트 추가 및 폰트 크기 조정*/
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container.wm-status-algae-container .wm-status-comm-tab-detail .wm-alert-list ol li button>strong,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong{font-size: 1.2rem;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);
}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table .wm-thead-unit{}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr{cursor: pointer;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr:hover{background-color: var(--c-wt-gr01);}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr,
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th,
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td{vertical-align: middle;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table{border-style: solid none solid none;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody th:hover,
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody td:hover{background-color: transparent;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table td{border: none;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th span,
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td span{white-space: nowrap;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td:not(:first-of-type) span{justify-content: center;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead tr th span{justify-content: center;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td:first-of-type .wm-sts-badge{margin: 0 0.25rem 0 0;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit{align-items: center;}
body .wm-status_wrap main .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-sts-badge{display: flex; align-items: center;}

/* 공통검색 */
body .wm-status_wrap .wm-status-search-container{height: 2rem;}

/*======================
  1- 홍수현황 (홍수/녹조/가뭄(추가예정) 2026-08-21
======================= */
/*======================
  탭1 - 수위관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist{ overflow: hidden;
  height: calc(100% - 8.25rem); background: linear-gradient(transparent, rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
  margin-bottom: 1rem;}
/* 1- 소트 */
/* 소트 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont{
  display: flex; justify-content: flex-end; margin-bottom: 0.5rem; ; align-items: center; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont label{
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--c-wt-gr07); font-weight: 600;
}
/* 2- 리스트영역 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-sts-table-wrap{
  height: calc(100% - 2rem); overflow: auto;
}

/*======================
  탭2 - 댐관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist{
  height: calc(100% - 9.25rem); background: linear-gradient(rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail:not(.wm-sts-cont-waterlevel) .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}
/*======================
  탭3 - 보관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist{
  height: calc(100% - 9.25rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/*======================
  탭4 - 강수량관측소 결과리스트
======================= */

body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont{
  max-width: 13rem; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont span,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont b,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont small{font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont b{display: block; width: 100%;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong{width: 100%; margin: 0; justify-content: flex-end; gap: 0.25rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong .wm-item-unit{font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist{
  height: calc(100% - 11.5rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}

/*======================
  2- 녹조현황 추가 2026-08-21
======================= */
/* 공통높이값 */
/* 상수원/친수활동 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-status-search-resultlist{height: calc(100% - (4.75rem + 3.75rem));}
/* 관찰지점/저수지 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-status-search-resultlist{height: calc(100% - (4.75rem + 5.125rem));}

/* 공통테이블 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead th{vertical-align: middle;}






/*======================
  3-수위차트영역 (★2026-08-21 관측추이 추가★)
======================= */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container{
  width: 100%; height: 40%;
}
/* 차트내부 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  display: flex; 
}
/* 2026-08-21 관측추이 추가 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  align-items: center; height: 1.5rem; margin-bottom: 0.675rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  width: calc(100% - 2rem); height: 100%; gap: 0.4rem;  align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > strong{
  display: block; width: max-content; min-width: 6rem; white-space: nowrap; overflow: hidden; font-size: 0.9125rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > button{
  min-width: max-content; flex: 1;
  padding: 0.05rem 0.4rem; font-size: 0.75rem; cursor: pointer; color: rgb(174, 188, 203); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.25rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform{
  display: inline-flex; width: 100%; height: auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem;
  vertical-align: middle; padding: 0; background: transparent;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip{
  display: inline-flex; align-items: center; gap: 0.25rem; max-width: 14rem; padding: 0.05rem 0.15rem 0.05rem 0.4rem; font-size: 0.6875rem; line-height: 1.6; border-radius: 0.75rem; color: var(--c-wt, #fff); background: color-mix(in srgb, var(--chip-color, var(--c-information-4)) 22%, transparent); border: 1px solid var(--chip-color, var(--c-information-4));}
body .wm-status_wrap .wm-fd-chip > b{flex: 0 0 auto; font-weight: 700; color: var(--chip-color, var(--c-information-4));}
body .wm-status_wrap .wm-fd-chip .wm-fd-chip-nm{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
body .wm-status_wrap .wm-fd-chip > button{
  flex: 0 0 auto; width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 0.125rem;
  font-size: 0.8125rem; line-height: 1; cursor: pointer; color: var(--c-wt, #fff); opacity: 0.65; background: transparent; border: none; border-radius: 50%;}
body .wm-status_wrap .wm-fd-chip > button:hover{opacity: 1; background: var(--c-wt-gr025);}

/* color-mix 미지원 브라우저 폴백 — 반투명 흰 배경으로 대체 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .wm-fd-chip{background: rgba(255, 255, 255, 0.12); }
}

/* 전체 지우기 버튼 기본 간격 (인라인에서 옮겨옴) */
[data-fd-graph-clear]{margin-left: 0.5rem; }
/* 2026-08-21 */

body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::before{content: '(';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::after{content: ')';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap{
  width: 100%; height: calc(100% - 2.175rem);
}

/* l/r 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right{
  height: 100%;
}
/* graph left */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left{
  width: 100%; 
}
/* 그래프영역 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left
.wm-status-graph-box{
  width: 100%; background: var(--c-wt-gr01); padding: 1rem 0.625rem; display: flex; justify-content: center; align-items: flex-start;
  border-radius: 0.5rem;
}



/* ===============================================
  map container
===============================================*/
body .wm-status_wrap .wm-status-map{width: 46%;} /*2026-08-21 sdashboard와 너비통일*/
/* map tool bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{top: 50%; right: 1rem; transform: translateY(-50%);}
/* draggable popup cursor */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup[data-wm-draggable] .wm-status-map-popup-header {
    cursor: move;}
/* 지도 팝업 공통 접기(pc) */
body .wm-status_wrap .wm-status-map-popup.wm-pop-fold{
    width: max-content; height: 2.75rem; overflow: hidden; padding: 0; 
}
.wm-status-map-popup.wm-pop-fold .wm-status-map-popup-body{display: none;}

/*======================
  1-전체 발령현황 / 2-수계별 지도팝업
======================= */
/* popup- fold */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold{
  padding: 0 2.6rem 0 0; min-width: 20rem; top: 1rem; left: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-comm-tab-title{
    padding: 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold){
  width: 27%; min-width: 33rem; height: max-content; top: 1rem; left: 1rem;
}

/* popup-header */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.625rem; top: 0.625rem;}
/* popup-body */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table span{}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a{}


/*============================================
  map-control container
============================================*/
/* left - scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{position: absolute; left: var(--rem1); bottom: var(--rem1);}
/* ------------
  map-control
------------*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control{
    width: max-content; max-width: calc(100% - 15rem); height: max-content; gap: 1rem; padding: 0.4rem 1rem; border-radius: 0.5rem;
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    overflow: hidden; white-space: nowrap;
  }
/* 모바일 전용 숨김 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-setting,/* 모바일용 타이틀명 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-status-map-control-group-tit{
  display: none;}
/* map-control -left */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap{
    display: flex; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group:first-of-type:after{
  content: '|'; margin: 0 0.5rem; height: inherit; opacity: 0.35;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ol,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ul{
  gap: 0.25rem; width: 100%;}
/* 각 선택버튼별 설정 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group li .wm-btn-toggle span{  
    width: max-content; min-width: 5.25rem; height: 2rem; padding: 0 1rem; font-size: 0.9375rem;}
    /* map-control -right */
/* body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-right *{} */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p{align-items: center; display: none; gap: 0.25rem; font-size: 0.9375rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p *{display: block;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right label span{font-size: 0.9375rem;}


/* --------------------------------
  legend - 범례 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold{height: max-content; padding: 0.5rem 3.5rem 0.5rem 0.5rem; bottom: 5rem; left: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header{margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem; top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}
/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold){
    width: 30rem; height: 30%; min-height: 12rem; max-height: 20rem;
    bottom: 5rem; left: 1rem; overflow: hidden;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold) .wm-status-map-popup-header{
    margin-bottom: 0.5rem; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on .wm-status-map-popup-header .wm-sts-fold-btn{top: 1rem; right: 3rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body{
    width: 100%; height: calc(100% - 2.5rem); overflow-y: auto; overflow-x: hidden;}
/* 범례 네비게이션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list{
    width: 100%; height: 2.5rem; padding: 0.125rem;
    display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; left: 0; z-index: 1; background: var(--c-bk-gr1); backdrop-filter: blur(1rem);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container{
    width: calc(100% - 2.5rem); position: relative; height: 100%; overflow: hidden; padding: 0 0.125rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol{
    display: flex; align-items: center; width: 100%; gap: 0.25rem; position: absolute; top: 50%; transform: translateY(-50%);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol>li{
  width: max-content; min-width: calc(100% / 4);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body::-webkit-scrollbar,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list::-webkit-scrollbar{
    display: none;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list button{
    flex-shrink: 0; 
}
.wm-sts-prev-btn,.wm-sts-next-btn{
    background-color: var(--c-bluem10); backdrop-filter: blur(1rem);
    cursor: pointer; border: none; top: 0.25rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item:hover{
    background: var(--c-wt-gr035);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item{
  width: 100%; font-size: 1rem; font-weight: 600;
  background: var(--c-wt-gr01); color: var(--c-wt); border: 1px solid transparent;
  padding: 0.25rem 1rem; border-radius: 0.5rem; white-space: nowrap; cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item.on{
  border: 1px dotted var(--c-bluem4); background: var(--c-bluem10);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box{
    background: var(--c-bk-gr2); border-radius: 0.5rem;
    /* mq */
    padding: 0.2rem 1rem 0.5rem; margin: 0.5rem 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit{
    width: 100%; height: 2.5rem; font-size: 1rem; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::before{content: '[';margin-left: 0.25rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::after{content: ']';}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small{
    font-weight: 400;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list{margin: 0.25rem 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li{flex-wrap: wrap;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li p{
    display: flex; font-size: 0.875rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list{
    border-radius: 0.5rem; margin-bottom: 0.4rem; background: rgba(0, 0, 0, 0.25); height: max-content; align-items: center; position: relative;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li{
    flex: 1 1 0; min-width: 0; position: relative; justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li>p{
    align-items: center;
    
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.center li>p{justify-content: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.left li>p{justify-content: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li:hover .wm-sts-tooltip{
    display: flex; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li .wm-sts-tooltip{
    display: none; position: absolute; bottom: 110%; left: 0; font-size: 0.8125rem;
    width: max-content; max-width: 200%; border-radius: 0.5rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
    justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip{
  display: flex; height: max-content;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip span{
  width: 1rem; height: 1rem; display: block; margin: 0 0.5rem;
  border: 1px solid var(--c-wt-gr05);
}

/* 수위레벨 범례 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip::before{
    position: absolute;
    top: 100%; left: 1.5rem;
    content: ''; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent ;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip p{
    justify-content: center; align-items: center;
}

/* 강수량범례색상 */
.wm-rainfall-legend-color{width: 100%; height: 1.25rem; display: flex; gap: 0.125rem;}
.wm-rainfall-legend-color .color-item{
    flex: 1 1 0; line-height: 1.25rem; display: block; opacity: 0.9;
    position: relative; transition: var(--wm-transition-slow);
}
.wm-rainfall-legend-color .color-item:hover{opacity: 1; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:hover .wm-sts-tooltip{display: block; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip::before{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip::before{left: 0rem;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip::before{right: 0.1rem;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip::before{
    content: ''; position: absolute; top: 100%; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent;}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip{left: 0;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip{right: 0;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip{
    display: none; position: absolute; bottom: 160%;
    width: max-content; ; border-radius: 0.5rem;
    padding: 0 0.3rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
}                        
.wm-rainfall-legend-color .color-item .wm-sts-tooltip>small{}
.wm-rainfall-legend-box .legend-item-list{width: 100%; justify-content: space-between;}


/* --------------------------------
  wm-status-theme-select 레이어 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold{
  height: max-content; padding: 0.5rem 3.5rem 0.5rem 0.5rem; top: 1rem; right: 1rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header{margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header button{top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}
/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select:not(.wm-pop-fold){
  width: 20rem; height: 42rem;
  right: 4rem; top: 1rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on:not(.wm-pop-fold) .wm-status-map-popup-header .wm-sts-fold-btn{top: 1rem; right: 3rem;}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-tit{
  margin: 0.625rem 0; padding: 0.25rem 0.25rem 0.25rem 1rem;
  background: var(--c-wt-gr01);
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-tit{
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; 
}
.wm-sts-layer-tit.justify-between{display: flex; align-items: center; justify-content: space-between;}
/* layerbox / wm-add-func */
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before{width: 1px; height: calc(100% - 1rem); left: 0.5rem; top: 50%; transform: translateY(-50%);}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{width: 0.5rem; height: 1px; left: 0.5rem; bottom: 0.5rem;}

.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before,
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{
  content: '';
  background-color: var(--c-wt-gr025); display: block;
  position: absolute;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box{
  flex-direction: column; position: relative; gap: 0.4rem; height: 0; overflow: hidden; transition: height .3s ease;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func.on{display: flex; height: max-content; opacity: 1;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box:not(.wm-add-func){display:flex;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func:not(.on){display: none;}

.wm-status-theme-select .wm-sts-layer-box.wm-add-func::before,
.wm-status-theme-select .wm-sts-layer-box.wm-add-func::after{content: none;}
.wm-status-theme-select .wm-sts-layer-box.wm-add-func{padding: 0.5rem; background: var(--c-bk-gr15); margin: 0.5rem 0; border: 1px solid var(--c-wt-gr015);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label::before{content: ''; display: block; position: absolute; left: -0.5rem; top: 50%; width: 0.5rem; height: 1px; background: var(--c-wt-gr025);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label{
  display: flex; align-items: center; width: max-content; max-width: calc(100% - 1.5rem); position: relative;
  font-size: 0.875rem;
}

/* 레이어 -> 레이더 영상 -> 레이더 투명도/영상재생 */
.wm-layer-toggle-btn.on{transform: rotate(180deg);}
.wm-layer-toggle-btn{background: var(--c-bk-gr15); border: none; cursor: pointer; border-radius: 0.5rem; transform: rotate(0deg); transition: all .3s ease-in-out;}
.wm-sts-radar-time{ color: var(--c-normal);}
.wm-sts-radar-container .wm-sts-radar-time{display: block; text-align: right; padding: 0.4rem;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap{display: flex; gap: 0.25rem; justify-content: center;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button:not(.on):hover{background: var(--c-bluem8);}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button.on{background: var(--c-bluem6); opacity: 1;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button{
  cursor: pointer; transition: all .3s ease-in-out; background: var(--c-wt-gr015); border: none; border-radius: 0.2rem; opacity: 0.55;}
/* 레이더영상 투명도 조절 */
.wm-iput-rangecustom .wm-cont-box-body .wm-range-contbox{justify-content: flex-end;}

/* 레이더영상 플레이컨트롤 바 */
.wm-vdo-controlbar .wm-cont-box-body .wm-range-contbox{justify-content: space-between;}

/* --------------------------------
  wm-status-basemap-select 기본지도
-------------------------------- */
/* 
.wm-status-basemap-select{
  width: 220px; height: 420px;
  right: 4rem; bottom: 4rem;
} */
/* --------------------------------
  wm-status-weather-alert 기상특보
-------------------------------- */
.wm-status-weather-alert{right: 1rem; top: 2rem;}
.wm-status-weather-alert .wm-status-map-popup-header h4 .rd-only{width: 4rem;}
.wm-status-weather-alert .rd-only input{width: 100%; }

/* 읽기전용 */
.rd-only{display: flex; height: 2rem; padding: 0 1rem; background: var(--c-bluem6); }
.rd-only>input{width: 100%; border: none; background: transparent; color: var(--c-wt);}
.rd-only>input:focus{outline: none;}

/*-----------------------------------------------
  햔황판 메뉴 선택
-----------------------------------------------*/
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap{display: flex;}
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-map-popup-header,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-header-tab-noti,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-menu-wrap,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-mo-org-wrap{display: none;}




}


/* desktop ----------------1441 이상 */
@media (min-width: 1441px) and (max-width: 1919px){

/* ===============================================
  header
===============================================*/
body .wm-status_wrap .wm-status-header-btn,
body .wm-status_wrap .wm-status-map-control-setting{display: none;}
body .wm-status_wrap header.wm-status-header{width: 54%; height: var(--rem4_2);} /*2026-08-21 sdashboard와 너비 통일 */
.wm-status-header-tab{
    display: flex;
    gap: var(--rem0_4);
}
.wm-status-header-tab button{
    width: max-content; min-width: 6rem; padding: var(--rem0_25);
    background: transparent;
    border-style: none none solid none; border-width: 0 0 var(--rem0_25) 0;
    border-color: transparent;
    color: var(--wm-status-txt-base);
    opacity: 0.5; cursor: pointer;
}
.wm-status-header-tab button.on,
.wm-status-header-tab button:hover{
  opacity: 1; 
  transition: var(--wm-transition-normal);
}
.wm-status-header-tab button.on{
    border-color: transparent transparent var(--wm-sts-border100) transparent;
}
/* 현황판 이동메뉴 추가 2026-08-14 */
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup{width: 40%; max-height: 90%;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu-list .wm-view-menu {
    min-width: calc((100% - 0.25rem) / 2);
}
/* ===============================================
  main content container 
===============================================*/
body .wm-status_wrap .wm-status-content{width: 54%; padding: 4.5rem 1rem 1rem;} /*2026-08-21 sdashboard와 너비통일*/
body .wm-status_wrap .wm-status-content .wm-status-draghandle{display: none;}
/* 모바일용 닫힘 */
body .wm-status_wrap .wm-status-content .wm-sts-popup-close{display: none; visibility: hidden;}
/* 알럿영역 추가 수정 (★2026-08-11★) */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li{flex: 1 1 auto; position: relative;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li{border-radius: 0.5rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li>button{padding: 0.2rem 1rem; justify-content: space-between; align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li>button:not(.wm-item-left-cont){
  flex-direction: row-reverse;
} 
/* 알럿영역 추가 수정 */

/*======================
  탭 공통 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist{overflow: hidden;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail:not(.wm-sts-cont-waterlevel) .wm-status-search-resultlist .wm-sts-table-wrap{height: 100%;}
/* font 2026-08-21 녹조폰트 추가 및 폰트 크기 조정*/
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container.wm-status-algae-container .wm-status-comm-tab-detail .wm-alert-list ol li button>strong,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol li button>strong{font-size: 1rem;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table .wm-thead-unit{}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr{cursor: pointer;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr:hover{background-color: var(--c-wt-gr01);}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td{vertical-align: middle;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table{border-style: solid none solid none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody th:hover,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody td:hover{background-color: transparent;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table td{border: none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th span,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td span{white-space: nowrap;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td:not(:first-of-type) span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead tr th span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td:first-of-type .wm-sts-badge{margin: 0 0.25rem 0 0;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit{align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-sts-badge{display: flex; align-items: center;}

/* 공통검색 */
body .wm-status_wrap .wm-status-search-container{height: 2rem;}

/*======================
  1- 홍수현황 (홍수/녹조/가뭄(추가예정) 2026-08-21
======================= */
/*======================
  탭1 - 수위관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist{ overflow: hidden;
  height: calc(100% - 6.5rem); background: linear-gradient(transparent, rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-alert-list ol>li>button span{display: block; line-height: 100%;}
/* 소트 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont{
  display: flex; justify-content: flex-end; margin-bottom: 0.5rem; ; align-items: center; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont label{
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--c-wt-gr07); font-weight: 600;}
/* 리스트영역 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-sts-table-wrap{
  height: calc(100% - 2rem); overflow: auto;
}
/*======================
  탭2 - 댐관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist{
  height: calc(100% - 6.5rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/*======================
  탭3 - 보관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist{
  height: calc(100% - 6.5rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/*======================
  탭4 - 강수량관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont{
  max-width: 13rem; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont span,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont b,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont small{font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont b{display: block; width: 100%;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong{width: 100%; margin: 0; justify-content: flex-end; gap: 0.25rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong .wm-item-unit{font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist{height: calc(100% - 6.8125rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li>button.wm-item-left-cont{flex-direction: row;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li>button.wm-item-left-cont>strong{
  margin: 0; width: 100%; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);}


/*======================
  2- 녹조현황 추가 2026-08-21
======================= */
/* 공통높이값 */
/* 상수원/친수활동 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-status-search-resultlist{
  height: calc(100% - (4.75rem + 1.75rem));}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;}
/* 관찰지점/저수지 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-status-search-resultlist{height: calc(100% - (4.75rem + 2.75rem));}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}

/* 공통테이블 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead th{vertical-align: middle;}

/* 탭3/4 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol>li{flex: 1 1 auto; position: relative;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol>li>button.wm-item-left-cont{max-width: 11rem; flex-direction: row; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol>li>button.wm-item-left-cont>strong{
  margin: 0; width: calc(100% - 2rem); position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); justify-content: flex-end; gap: 0.25rem;}


/*======================
  3-수위차트영역
======================= */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container{
  width: 100%; height: 40%;
}

/* 차트내부 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  display: flex; 
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  align-items: center; height: 1.5rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  width: calc(100% - 2rem); height: 100%; gap: 0.4rem;  align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > strong{
  display: block; width: 5rem; white-space: nowrap; overflow: hidden; font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>button{
  min-width: 4.5rem;
  padding: 0.05rem 0.4rem; font-size: 0.75rem; cursor: pointer; color: rgb(174, 188, 203); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.25rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > button{
  min-width: max-content; flex: 1;
  padding: 0.05rem 0.4rem; font-size: 0.75rem; cursor: pointer; color: rgb(174, 188, 203); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.25rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform{
  display: inline-flex; width: 100%; height: auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem; font-size: 0.875rem;
  vertical-align: middle; padding: 0; background: transparent;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 14rem;
    padding: 0.05rem 0.15rem 0.05rem 0.4rem;
    font-size: 0.6875rem;
    line-height: 1.6;
    border-radius: 0.75rem;
    color: var(--c-wt, #fff);
    background: color-mix(in srgb, var(--chip-color, var(--c-information-4)) 22%, transparent);
    border: 1px solid var(--chip-color, var(--c-information-4));
}
.wm-fd-chip > b {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--chip-color, var(--c-information-4));
}
.wm-fd-chip .wm-fd-chip-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-fd-chip > button {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin-left: 0.125rem;
    font-size: 0.8125rem; line-height: 1;
    cursor: pointer;
    color: var(--c-wt, #fff);
    opacity: 0.65;
    background: transparent;
    border: none;
    border-radius: 50%;
}
.wm-fd-chip > button:hover {
    opacity: 1;
    background: var(--c-wt-gr025);
}

/* color-mix 미지원 브라우저 폴백 — 반투명 흰 배경으로 대체 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .wm-fd-chip{background: rgba(255, 255, 255, 0.12); }
}

/* 전체 지우기 버튼 기본 간격 (인라인에서 옮겨옴) */
[data-fd-graph-clear]{margin-left: 0.5rem; }
/* 2026-08-21 */

body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::before{content: '(';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::after{content: ')';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap{
  width: 100%; height: calc(100% - 1.5rem);
}

/* l/r 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right{
  padding: 0.5rem; height: 100%;
}
/* graph left */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left{
  width: 100%; 
}
/* 그래프영역 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left
.wm-status-graph-box{
  width: 100%; background: var(--c-wt-gr01); padding: 1rem 0.625rem; display: flex; justify-content: center; align-items: flex-start;
  border-radius: 0.5rem;
}






/* ===============================================
  map container
===============================================*/
body .wm-status_wrap .wm-status-map{width: 46%;} /*2026-08-21 sdashboard와 너비통일*/
/* map tool bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{top: 50%; right: 1rem; transform: translateY(-50%);}
/* draggable popup cursor */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup[data-wm-draggable] .wm-status-map-popup-header {
    cursor: move;}
/* 지도 팝업 공통 접기(pc) */
body .wm-status_wrap .wm-status-map-popup.wm-pop-fold{
    width: max-content; height: 2.75rem; overflow: hidden; padding: 0; 
}
.wm-status-map-popup.wm-pop-fold .wm-status-map-popup-body{display: none;}

/*======================
  1-전체 발령현황 / 2-수계별 지도팝업
======================= */
/* popup- fold */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold{
  padding: 0 2.6rem 0 0; min-width: 20rem; top: 0.5rem; left: 0.5rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-comm-tab-title{
    padding: 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold){
  width: 60%; max-width: 30rem; /* 2026-08-21 max-width 값 수정*/ max-height: 20rem; top: 1rem; left: 1rem;
}

/* popup-header */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.625rem; top: 0.625rem;}
/* popup-body */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table span{text-align: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a{}


/*============================================
  map-control container
============================================*/
/* left - scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{
    position: absolute; right: var(--rem1); bottom: 4.6rem;}

/* ------------
  map-control
------------*/
/* map-control -left */
/* 1-1. 모바일설정 버튼/타이틀 숨김 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-left .wm-status-map-control-setting,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-status-map-control-group-tit{
  display: none;}
/* map-control bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap{width: max-content; height: max-content; z-index: 105;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control{
    width: calc(100% - 2rem); gap: 1rem; padding: 0.4rem 1rem; height: max-content; border-radius: 0.5rem; position: absolute; bottom: 1rem; right: 1rem; flex-wrap: wrap;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control>div{flex: 1 1 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap{
  display: flex; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group:first-of-type:after{
  content: '|'; margin: 0 0.5rem; height: inherit; opacity: 0.35;}
  
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ol,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ul{gap: 0.25rem; width: 100%;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group li .wm-btn-toggle span{
  width: max-content; height: 2rem; padding: 0 0.5rem; font-size: 0.875rem;}
/* map-control -right */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-right{justify-content: flex-end;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p{align-items: center; font-size: 0.875rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p>b{display: none;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right label span{font-size: 0.875rem;}



/* --------------------------------
  legend - 범례 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold{
  height: max-content; padding: 0.25rem 3.5rem 0.25rem 0.25rem; bottom: 5rem; left: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header{margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem; top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}

/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold){
    /* pc */
    min-width: 22rem; height: 40%; max-height: 18rem;
    bottom: 5rem; left: 1rem; overflow: hidden;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold) .wm-status-map-popup-header{
    margin-bottom: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on .wm-status-map-popup-header .wm-sts-fold-btn{top: 1rem; right: 3rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body{
    width: 100%; height: calc(100% - 2.5rem); overflow-y: auto; overflow-x: hidden;
}
/* 범례 네비게이션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list{
    width: 100%; height: 2.5rem; padding: 0.125rem;
    display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; left: 0; z-index: 1; background: var(--c-bk-gr1); backdrop-filter: blur(1rem);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container{
    width: calc(100% - 2.5rem); position: relative; height: 100%; overflow: hidden; padding: 0 0.125rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol{
    display: flex; align-items: center; width: 100%; gap: 0.25rem; position: absolute; top: 50%; transform: translateY(-50%);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol>li{
  width: max-content;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body::-webkit-scrollbar,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list::-webkit-scrollbar{
    display: none;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list button{
    flex-shrink: 0; 
}
.wm-sts-prev-btn,.wm-sts-next-btn{
    background-color: var(--c-bluem10); backdrop-filter: blur(1rem);
    cursor: pointer; border: none; top: 0.25rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item:hover{
    background: var(--c-wt-gr035);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item{
  width: 100%; font-size: 1rem; font-weight: 600;
  background: var(--c-wt-gr01); color: var(--c-wt); border: 1px solid transparent;
  padding: 0.25rem 1rem; border-radius: 0.5rem; white-space: nowrap; cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item.on{
  border: 1px dotted var(--c-bluem4); background: var(--c-bluem10);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box{
    background: var(--c-bk-gr2); border-radius: 0.5rem;
    /* mq */
    padding: 0.2rem 1rem 0.5rem; margin: 0.5rem 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit{
    width: 100%; height: 2.5rem; font-size: 0.875rem; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::before{content: '[';margin-left: 0.25rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::after{content: ']';}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small{
    font-weight: 400;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list{margin: 0.25rem 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li{flex-wrap: wrap;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li p{
    display: flex; font-size: 0.875rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list{
    border-radius: 0.5rem; margin-bottom: 0.4rem; background: rgba(0, 0, 0, 0.25); height: max-content; padding: 0.5rem; align-items: center; position: relative;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li{
    flex: 1 1 0; min-width: 0; position: relative; justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li>p{
    align-items: center; 
    
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.center li>p{flex-direction: column; justify-content: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.left li>p{justify-content: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li:hover .wm-sts-tooltip{
    display: flex; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li .wm-sts-tooltip{
    display: none; position: absolute; bottom: 110%; left: 0; font-size: 0.8125rem; 
    width: max-content; border-radius: 0.5rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
    justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip{
  display: flex; height: max-content;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip span{
  width: 1rem; height: 1rem; display: block; margin: 0 0.5rem;
  border: 1px solid var(--c-wt-gr05);
}

/* 수위레벨 범례 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip::before{
    position: absolute;
    top: 100%; left: 1.5rem;
    content: ''; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent ;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip p{
    justify-content: center; align-items: center;
}

/* 강수량범례색상 */
.wm-rainfall-legend-color{width: 100%; height: 1.25rem; display: flex; gap: 0.125rem;}
.wm-rainfall-legend-color .color-item{
    flex: 1 1 0; line-height: 1.25rem; display: block; opacity: 0.9;
    position: relative; transition: var(--wm-transition-slow);
}
.wm-rainfall-legend-color .color-item:hover{opacity: 1; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:hover .wm-sts-tooltip{display: block; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip::before{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip::before{left: 0rem;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip::before{right: 0.1rem;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip::before{
    content: ''; position: absolute; top: 100%; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent;}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip{left: 0;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip{right: 0;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip{
    display: none; position: absolute; bottom: 160%;
    width: max-content; ; border-radius: 0.5rem;
    padding: 0 0.3rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
}                        
.wm-rainfall-legend-box .legend-item-list{width: 100%; justify-content: space-between;}


/* --------------------------------
  wm-status-theme-select 레이어 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold{
  display: flex; align-items: center;
  height: max-content; padding: 0 3.5rem 0 0.25rem; top: 0.5rem; right: 0.5rem; height: 2.75rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header{height: 100%; margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header button{top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}
/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-theme-select:not(.wm-pop-fold){
  width: 18rem; height: 50%; max-height: 36rem;
  right: 4rem; top: 1rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on:not(.wm-pop-fold) .wm-status-map-popup-header .wm-sts-fold-btn{top: 1rem; right: 3rem;}
.wm-status-theme-select .wm-status-map-popup-body{
  height: calc(100% - 2rem); overflow-y: auto; overflow-x: hidden;
}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-tit{
  margin: 0.625rem 0; padding: 0.25rem 0.25rem 0.25rem 1rem; 
  background: var(--c-wt-gr01);
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-tit{
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; 
}
.wm-sts-layer-tit.justify-between{display: flex; align-items: center; justify-content: space-between;}
/* layerbox / wm-add-func */
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before{width: 1px; height: calc(100% - 1rem); left: 0.5rem; top: 50%; transform: translateY(-50%);}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{width: 0.5rem; height: 1px; left: 0.5rem; bottom: 0.5rem;}

.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before,
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{
  content: '';
  background-color: var(--c-wt-gr025); display: block;
  position: absolute;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box{
  flex-direction: column; position: relative; gap: 0.4rem; height: 0; overflow: hidden; transition: height .3s ease;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func.on{display: flex; height: max-content;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box:not(.wm-add-func){display:flex;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func:not(.on){display: none;}

.wm-status-theme-select .wm-sts-layer-box.wm-add-func::before,
.wm-status-theme-select .wm-sts-layer-box.wm-add-func::after{content: none;}
.wm-status-theme-select .wm-sts-layer-box.wm-add-func{padding: 0.5rem; background: var(--c-bk-gr15); margin: 0.5rem 0; border: 1px solid var(--c-wt-gr015);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label::before{content: ''; display: block; position: absolute; left: -0.5rem; top: 50%; width: 0.5rem; height: 1px; background: var(--c-wt-gr025);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label{
  display: flex; align-items: center; width: max-content; max-width: calc(100% - 1.5rem); position: relative;
  font-size: 0.875rem;
}

/* 레이어 -> 레이더 영상 -> 레이더 투명도/영상재생 */
.wm-layer-toggle-btn.on{transform: rotate(180deg);}
.wm-layer-toggle-btn{background: var(--c-bk-gr15); border: none; cursor: pointer; border-radius: 0.5rem; transform: rotate(0deg); transition: all .3s ease-in-out;}
.wm-sts-radar-time{ color: var(--c-normal);}
.wm-sts-radar-container .wm-sts-radar-time{display: block; text-align: right; padding: 0.4rem;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap{display: flex; gap: 0.25rem; justify-content: center;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button:not(.on):hover{background: var(--c-bluem8);}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button.on{background: var(--c-bluem6); opacity: 1;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button{
  cursor: pointer; transition: all .3s ease-in-out; background: var(--c-wt-gr015); border: none; border-radius: 0.2rem; opacity: 0.55;}
/* 레이더영상 투명도 조절 */
.wm-iput-rangecustom .wm-cont-box-body .wm-range-contbox{justify-content: flex-end;}

/* 레이더영상 플레이컨트롤 바 */
.wm-vdo-controlbar .wm-cont-box-body .wm-range-contbox{justify-content: space-between;}

/*-----------------------------------------------
  햔황판 메뉴 선택
-----------------------------------------------*/
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap{display: flex;}
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-map-popup-header,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-header-tab-noti,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-menu-wrap,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-mo-org-wrap{display: none;}




}


/* desktop ----------------992 이상 */
@media (min-width: 992px) and (max-width: 1440px){
/* ===============================================
  header
===============================================*/
body .wm-status_wrap .wm-status-header-btn,
body .wm-status_wrap .wm-status-map-control-setting{display: none;}
body .wm-status_wrap header.wm-status-header{width: 54%; height: 3.4rem; z-index: 150;} /*2026-08-21 sdashboard 너비통일*/
.wm-status-header-tab{
    display: flex;
    gap: var(--rem0_4);
    font-size: 0.875rem;
}
.wm-status-header-tab button{
    width: max-content; min-width: 6rem; padding: var(--rem0_25);
    background: transparent;
    border-style: none none solid none; border-width: 0 0 var(--rem0_25) 0;
    border-color: transparent;
    color: var(--wm-status-txt-base);
    opacity: 0.5; cursor: pointer;
}
.wm-status-header-tab button.on,
.wm-status-header-tab button:hover{
  opacity: 1; 
  transition: var(--wm-transition-normal);
}
.wm-status-header-tab button.on{
    border-color: transparent transparent var(--wm-sts-border100) transparent;
}
/* 현황판 이동메뉴 추가 2026-08-14 */
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup{width: 60%; max-height: 90%;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu-list .wm-view-menu {
    min-width: calc((100% - 0.25rem) / 2);
}
/* ===============================================
  main content container 
===============================================*/

body .wm-status_wrap .wm-status-content{width: 54%; padding: 4.4rem 1rem 1rem;} /*2026-08-21 sdashboard와 너비통일*/
body .wm-status_wrap .wm-status-content .wm-status-draghandle{display: none;}


/* 모바일용 닫힘 */
body .wm-status_wrap .wm-status-content .wm-sts-popup-close{display: none; visibility: hidden;}

/* 알럿영역 추가 수정 (★2026-08-11★) */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li{flex: 1 1 auto;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li{border-radius: 0.5rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong{}
/* 알럿영역 추가 수정 */

/*======================
  탭 공통 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail{overflow: hidden;}
/* font 2026-08-21 녹조폰트 추가 및 폰트 크기 조정*/
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container.wm-status-algae-container .wm-status-comm-tab-detail .wm-alert-list ol li button>strong,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong{font-size: 1rem;}

body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table .wm-thead-unit{}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr{cursor: pointer;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr:hover{background-color: var(--c-wt-gr01);}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td{vertical-align: middle;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table{border-style: solid none solid none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody th:hover,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody td:hover{background-color: transparent;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table td{border: none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th span,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td span{white-space: nowrap;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td:not(:first-of-type) span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead tr th span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td:first-of-type .wm-sts-badge{margin: 0 0.25rem 0 0;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit{align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-sts-badge{display: flex; align-items: center;}

/* 공통검색 */
body .wm-status_wrap .wm-status-search-container{height: 2rem;}

/*======================
  1- 홍수현황 (홍수/녹조/가뭄(추가예정) 2026-08-21
======================= */
/*======================
  탭1 - 수위관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist{ overflow: hidden;
  height: calc(100% - 7.5625rem); background: linear-gradient( transparent, rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/* 소트 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont{
  display: flex; justify-content: flex-end; margin-bottom: 0.5rem; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont label{
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; color: var(--c-wt-gr07); font-weight: 600;}
/* 리스트영역 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-sts-table-wrap{
  height: calc(100% - 2rem); overflow: auto;
}
/*======================
  탭2 - 댐관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist{
  height: calc(100% - 8.7rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%; overflow-y: auto;
}
/*======================
  탭3 - 보관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist{
  height: calc(100% - 8.7rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%; overflow-y: auto;
}
/*======================
  탭4 - 강수량관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont{
  max-width: 9.5rem; align-items: flex-start; flex-wrap: wrap;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont span,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont b{font-size: 1rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong{width: 100%; margin: 0; justify-content: flex-end; gap: 0.25rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong .wm-item-unit{font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist{
  height: calc(100% - 11rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%; overflow-y: auto;
}

/*======================
  2- 녹조현황 추가 2026-08-21
======================= */
/* 공통높이값 */
/* 상수원/친수활동 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-status-search-resultlist{
  height: calc(100% - (4.75rem + 3.5625rem));}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;}
/* 관찰지점/저수지 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-status-search-resultlist{
  height: calc(100% - (4.75rem + 4rem));}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}

/* 공통테이블 */
body .wm-status_wrap main .wm-status-comm-tab-container .wm-status-comm-tab-title,
body .wm-status_wrap main .wm-status-comm-tab-container .wm-status-comm-tab-title button{font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap{
  overflow: auto;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table td{white-space: nowrap;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead th{
  vertical-align: middle; white-space: nowrap;}



/*======================
  3-수위차트영역
======================= */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container{
  width: 100%; height: 40%; display: flex; flex-direction: column;
}

/* 차트내부 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  display: flex; 
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  align-items: center; height: max-content;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  width: calc(100% - 2rem); height: 100%; gap: 0.4rem;  align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit > p > strong{
  display: block; width: 6rem; white-space: nowrap; overflow: hidden; font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>button{
  min-width: 4.5rem;
  padding: 0.05rem 0.4rem; font-size: 0.75rem; cursor: pointer; color: rgb(174, 188, 203); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.25rem;
  
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform{
  border-radius: 0.2rem; font-size: 0.875rem; width: max-content; max-width: calc(100% - 11rem);
  display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform strong{
  display: block; width: 20%; white-space: nowrap; overflow: hidden;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 14rem;
    padding: 0.05rem 0.15rem 0.05rem 0.4rem;
    font-size: 0.6875rem;
    line-height: 1.6;
    border-radius: 0.75rem;
    color: var(--c-wt, #fff);
    background: color-mix(in srgb, var(--chip-color, var(--c-information-4)) 22%, transparent);
    border: 1px solid var(--chip-color, var(--c-information-4));
}
.wm-fd-chip > b {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--chip-color, var(--c-information-4));
}
.wm-fd-chip .wm-fd-chip-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-fd-chip > button {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin-left: 0.125rem;
    font-size: 0.8125rem; line-height: 1;
    cursor: pointer;
    color: var(--c-wt, #fff);
    opacity: 0.65;
    background: transparent;
    border: none;
    border-radius: 50%;
}
.wm-fd-chip > button:hover {
    opacity: 1;
    background: var(--c-wt-gr025);
}

/* color-mix 미지원 브라우저 폴백 — 반투명 흰 배경으로 대체 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .wm-fd-chip{background: rgba(255, 255, 255, 0.12); }
}

/* 전체 지우기 버튼 기본 간격 (인라인에서 옮겨옴) */
[data-fd-graph-clear]{margin-left: 0.5rem; }
/* 2026-08-21 */

body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::before{content: '(';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::after{content: ')';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap{
  width: 100%; height: calc(100% - 1.5rem);
}

/* l/r 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right{
  padding: 0.5rem; height: 100%;
}
/* graph left */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left{
  width: 100%; 
}
/* 그래프영역 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left
.wm-status-graph-box{
  width: 100%; background: var(--c-wt-gr01); padding: 1rem 0.625rem; display: flex; justify-content: center; align-items: flex-start;
  border-radius: 0.5rem;
}

/* ===============================================
  map container
===============================================*/
body .wm-status_wrap .wm-status-map{width: 46%;}
/* map tool bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{top: 50%; right: 1rem; transform: translateY(-50%);}
/* draggable popup cursor */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup[data-wm-draggable] .wm-status-map-popup-header {
    cursor: move;}
/* 지도 팝업 공통 접기(pc) */
body .wm-status_wrap .wm-status-map-popup.wm-pop-fold{
    width: max-content; height: 2.75rem; overflow: hidden; padding: 0; 
}
.wm-status-map-popup.wm-pop-fold .wm-status-map-popup-body{display: none;}

/*======================
  1-전체 발령현황 / 2-수계별 지도팝업
======================= */
/* popup- fold */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold{
  padding: 0 2.6rem 0 0; width: 60%; right: 1rem; top: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-comm-tab-title{
  padding: 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold){
  width: calc(100% - 2rem); height: max-content; top: 1rem; left: 1rem;
}

/* popup-header */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.625rem; top: 0.625rem;}
/* popup-body */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table tbody tr th>span{text-align: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table span{}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a{}





/*====================
  map-control container 
====================*/
/* left - scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{    
    position: fixed; right: var(--rem1); bottom: 4.6rem;
}

/* ------------
  map-control
------------*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap{
  width: 48%; height: max-content; position: fixed; z-index: 105;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control{
    width: 46%; padding: 0.5rem 1rem; justify-content: space-between;
    position: fixed; bottom: 0; right: 0;}

/* map-control -left */
/* 1-1. 모바일용 설정버튼 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting.on{
  background: var(--c-bluem6); border-color: var(--c-bluem6);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting{
    width: max-content; height: 2rem; padding: 0 1rem 0 0.6rem; border: 1px solid var(--c-wt); background: transparent; color: var(--c-wt);
    display: flex; align-items: center;}
/* 1-2. 모바일 설정옵션 팝업 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap{
  display: none;
  width: 100%; height: max-content; flex-direction: column; align-items: flex-start; position: absolute;
  bottom: 100%; right: 0; gap: 0.6rem;
  padding: 1rem; border-radius: 0.5rem; background: rgba(20, 39, 79, 0.8); backdrop-filter: blur(1rem);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap.on{
  display: flex;}
/* 타이틀 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-status-map-control-group-tit{
   width: 10rem; display: flex; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group{
  align-items: flex-start; width: 100%;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ol,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ul{
  gap: 0.25rem; width: 100%;}
/* 표시옵션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.query li{
  width: calc((100% - (0.25rem * 2) + 1rem) / 3);}
/* 색상필터 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.aggregate li{
  width: calc((100% - 0.25rem) / 2);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-btn-toggle{width: 100%;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-btn-toggle span{
  width: 100%; height: 2rem; padding: 0 0.5rem;  color: var(--c-wt);
}
/* map-control -right */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p>b{display: none;}




/* --------------------------------
  legend - 범례 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold{
  height: max-content; padding: 0.25rem 3.5rem 0.25rem 0.25rem; bottom: 5rem; left: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header{margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem; top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}

/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold){
    /* pc */
    width: calc(100% - 2rem); height: 17rem;
    bottom: 4.2rem; left: 1rem; overflow: hidden;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold) .wm-status-map-popup-header{
    margin-bottom: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on .wm-status-map-popup-header .wm-sts-fold-btn{top: 1rem; right: 3rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body{
    width: 100%; height: calc(100% - 2.5rem); overflow-y: auto; overflow-x: hidden;
}
/* 범례 네비게이션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list{
    width: 100%; height: 2.5rem; padding: 0.125rem;
    display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; left: 0; z-index: 1; background: var(--c-bk-gr1); backdrop-filter: blur(1rem);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container{
    width: calc(100% - 2.5rem); position: relative; height: 100%; overflow: hidden; padding: 0 0.125rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol{
    display: flex; align-items: center; width: 100%; gap: 0.25rem; position: absolute; top: 50%; transform: translateY(-50%);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol>li{
  width: max-content;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body::-webkit-scrollbar,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list::-webkit-scrollbar{
    display: none;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list button{
    flex-shrink: 0; 
}
.wm-sts-prev-btn,.wm-sts-next-btn{
    background-color: var(--c-bluem10); backdrop-filter: blur(1rem);
    cursor: pointer; border: none; top: 0.25rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item:hover{
    background: var(--c-wt-gr035);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item{
  width: 100%; font-size: 0.875rem; font-weight: 600;
  background: var(--c-wt-gr01); color: var(--c-wt); border: 1px solid transparent;
  padding: 0.25rem 1rem; border-radius: 0.5rem; white-space: nowrap; cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item.on{
  border: 1px dotted var(--c-bluem4); background: var(--c-bluem10);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box{
    background: var(--c-bk-gr2); border-radius: 0.5rem;
    /* mq */
    padding: 0.2rem 1rem 0.5rem; margin: 0.5rem 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit{
    width: 100%; height: 2.5rem; font-size: 0.875rem; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::before{content: '[';margin-left: 0.25rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::after{content: ']';}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small{
    font-weight: 400;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list{margin: 0.25rem 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li{flex-wrap: wrap;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li p{
    display: flex; font-size: 0.9375rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list{
    border-radius: 0.5rem; margin-bottom: 0.4rem; background: rgba(0, 0, 0, 0.25); height: max-content; padding: 0.4rem 0; align-items: center; position: relative;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li{
    flex: 1 1 0; min-width: 0; position: relative; justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li>p{
    align-items: center;
    
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.center li>p{justify-content: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.left li>p{justify-content: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li:hover .wm-sts-tooltip{
    display: flex; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li .wm-sts-tooltip{
    display: none; position: absolute; bottom: 110%; left: 0; font-size: 0.8125rem;
    width: max-content; border-radius: 0.5rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
    justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip{
  display: flex; height: max-content; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip span{
  width: 1rem; height: 1rem; display: block; margin: 0 0.5rem;
  border: 1px solid var(--c-wt-gr05);
}

/* 수위레벨 범례 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip::before{
    position: absolute;
    top: 100%; left: 1.5rem;
    content: ''; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip p{
    justify-content: center; align-items: center;
}

/* 강수량범례색상 */
.wm-rainfall-legend-color{width: 100%; height: 1.25rem; display: flex; gap: 0.125rem;}
.wm-rainfall-legend-color .color-item{
    flex: 1 1 0; line-height: 1.25rem; display: block; opacity: 0.9;
    position: relative; transition: var(--wm-transition-slow);
}
.wm-rainfall-legend-color .color-item:hover{opacity: 1; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:hover .wm-sts-tooltip{display: block; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip::before{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip::before{left: 0rem;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip::before{right: 0.1rem;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip::before{
    content: ''; position: absolute; top: 100%; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent;}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip{left: 0;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip{right: 0;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip{
    display: none; position: absolute; bottom: 160%;
    width: max-content; ; border-radius: 0.5rem;
    padding: 0 0.3rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
}                        
.wm-rainfall-legend-box .legend-item-list{width: 100%; justify-content: space-between;}


/* --------------------------------
  wm-status-theme-select 레이어 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold{
  display: flex; align-items: center; height: max-content; padding: 0 3.5rem 0 0.25rem; top: 1rem; left: 1rem; height: 2.75rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header{height: 100%; margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header button{top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}
/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select:not(.wm-pop-fold){
  width: 20rem; height: 50%; max-height: 32rem;
  left: 1rem; top: 1rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on:not(.wm-pop-fold) .wm-status-map-popup-header .wm-sts-fold-btn{top: 1rem; right: 3rem;}
.wm-status-theme-select .wm-status-map-popup-body{
  height: calc(100% - 2rem); overflow-y: auto; overflow-x: hidden;
}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-tit{
  margin: 0.625rem 0; padding: 0.25rem 0.25rem 0.25rem 1rem; 
  background: var(--c-wt-gr01);
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-tit{
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; 
}
.wm-sts-layer-tit.justify-between{display: flex; align-items: center; justify-content: space-between;}
/* layerbox / wm-add-func */
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before{width: 1px; height: calc(100% - 1rem); left: 0.5rem; top: 50%; transform: translateY(-50%);}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{width: 0.5rem; height: 1px; left: 0.5rem; bottom: 0.5rem;}

.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before,
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{
  content: '';
  background-color: var(--c-wt-gr025); display: block;
  position: absolute;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box{
  flex-direction: column; position: relative; gap: 0.4rem; height: 0; overflow: hidden; transition: height .3s ease;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func.on{display: flex; height: max-content;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box:not(.wm-add-func){display:flex;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func:not(.on){display: none;}

.wm-status-theme-select .wm-sts-layer-box.wm-add-func::before,
.wm-status-theme-select .wm-sts-layer-box.wm-add-func::after{content: none;}
.wm-status-theme-select .wm-sts-layer-box.wm-add-func{padding: 0.5rem; background: var(--c-bk-gr15); margin: 0.5rem 0; border: 1px solid var(--c-wt-gr015);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label::before{content: ''; display: block; position: absolute; left: -0.5rem; top: 50%; width: 0.5rem; height: 1px; background: var(--c-wt-gr025);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label{
  display: flex; align-items: center; width: max-content; max-width: calc(100% - 1.5rem); position: relative;
  font-size: 0.875rem;
}

/* 레이어 -> 레이더 영상 -> 레이더 투명도/영상재생 */
.wm-layer-toggle-btn.on{transform: rotate(180deg);}
.wm-layer-toggle-btn{background: var(--c-bk-gr15); border: none; cursor: pointer; border-radius: 0.5rem; transform: rotate(0deg); transition: all .3s ease-in-out;}
.wm-sts-radar-time{ color: var(--c-normal);}
.wm-sts-radar-container .wm-sts-radar-time{display: block; text-align: right; padding: 0.4rem;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap{display: flex; gap: 0.25rem; justify-content: center;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button:not(.on):hover{background: var(--c-bluem8);}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button.on{background: var(--c-bluem6); opacity: 1;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button{
  cursor: pointer; transition: all .3s ease-in-out; background: var(--c-wt-gr015); border: none; border-radius: 0.2rem; opacity: 0.55;}
/* 레이더영상 투명도 조절 */
.wm-iput-rangecustom .wm-cont-box-body .wm-range-contbox{justify-content: flex-end;}
/* 레이더영상 플레이컨트롤 바 */
.wm-vdo-controlbar .wm-cont-box-body .wm-range-contbox{justify-content: space-between;}

/*-----------------------------------------------
  햔황판 메뉴 선택
-----------------------------------------------*/
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap{display: flex;}
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-map-popup-header,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-header-tab-noti,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-menu-wrap,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-mo-org-wrap{display: none;}

}


/* Tablet ----------------- 768 이상 */
@media (min-width: 768px) and (max-width: 991px){
    
/* ===============================================
  header
===============================================*/
body .wm-status_wrap .wm-status-header-btn,
body .wm-status_wrap header.wm-status-header .wm-status-map-control-setting{display: none;}
body .wm-status_wrap header.wm-status-header{width: 100%; height: var(--rem4_2); z-index: 150;}
.wm-status-header-tab{
    display: flex;
    gap: var(--rem0_4);
}
.wm-status-header-tab button{
    width: max-content; min-width: 8rem; padding: var(--rem0_25);
    background: transparent;
    border-style: none none solid none; border-width: 0 0 var(--rem0_25) 0;
    border-color: transparent;
    color: var(--wm-status-txt-base); cursor: pointer;
}
.wm-status-header-tab button.on,
.wm-status-header-tab button:hover{
  opacity: 1; 
  transition: var(--wm-transition-normal);
}
.wm-status-header-tab button.on{
    border-color: transparent transparent var(--wm-sts-border100) transparent;
}
/* 현황판 이동메뉴 추가 2026-08-14 */
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup{width: 90%; max-height: 90%;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu-list .wm-view-menu {
    min-width: calc((100% - 0.25rem) / 2);
}


/* ===============================================
  main / section
===============================================*/

body .wm-status_wrap main{
    flex-direction: column;
}



/* ===============================================
  main content container
===============================================*/
body .wm-status_wrap .wm-status-content.on{display: block;}
body .wm-status_wrap .wm-status-content{
    display: none;
    width: 100%; height: calc(100% - 5rem); padding: 0 1.25rem 1.25rem;

    position: absolute; bottom: 0; left: 0; z-index: 2;
    box-shadow: 0 -0.625rem 0.625rem rgba(0,0,0, 0.5);
}
/* 모바일용 닫힘 */
body .wm-status_wrap .wm-status-content .wm-sts-popup-close:hover {
  transform: rotate(180deg);
}
body .wm-status_wrap .wm-status-content .wm-sts-popup-close{
  background: transparent; border: none; transition: var(--wm-transition-normal);
  position: absolute; top: 1rem; right: 1rem;
}
/* 모바일 핸들러 */
body .wm-status_wrap .wm-status-content .wm-status-draghandle:focus{
  outline: none; background: var(--c-bk-gr1);}
  
body .wm-status_wrap .wm-status-content .wm-status-draghandle{
  display: flex; width: 100%; height: 2.75rem; justify-content: center;
  background: transparent; border: none; align-items: center;
  margin-bottom: 0.5rem;
}
/* 2026-08-21 width/height 공통수정 */
body .wm-status_wrap .wm-status-content .wm-status-draghandle .wm-status-draghandle-bar{
  width: 2.5rem; height: 0.25rem; border-radius: 1rem;
  background-color: var(--c-gr3);
}

.wm-status-comm-tab-detail .wm-alert-list ol>li{
  flex: 1 1 auto;
}

/*======================
  탭 공통 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail{overflow: hidden;}
/* font 2026-08-21 녹조폰트 추가 및 폰트 크기 조정*/
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container.wm-status-algae-container .wm-status-comm-tab-detail .wm-alert-list ol li button>strong,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong{font-size: 1.2rem;}

body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container::-webkit-scrollbar{display: none;}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container{
  height: calc(100% - (2.75rem + 0.5rem)); overflow-x: hidden; overflow-y: auto;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-title{
  position: sticky; left: 0; top: 0; background: var(--c-information-8); z-index: 3;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-detail{
  height: 100%; margin-bottom: 2rem;
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table .wm-thead-unit{font-size: 90%; font-weight: 400;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr{cursor: pointer;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr:hover{background-color: var(--c-wt-gr01);}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td{vertical-align: middle;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table{border-style: solid none solid none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody th:hover,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody td:hover{background-color: transparent;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table td{border: none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th span,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td span{white-space: nowrap;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td:not(:first-of-type) span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead tr th span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td:first-of-type .wm-sts-badge{margin: 0 0.25rem 0 0;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit{align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-sts-badge{display: flex; align-items: center;}

/* 공통검색 */
body .wm-status_wrap .wm-status-search-container{height: 3rem;}


/*======================
  1- 홍수현황 (홍수/녹조/가뭄(추가예정) 2026-08-21
======================= */
/*======================
  탭1 - 수위관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist{ overflow: hidden;
  height: calc(100% - 6.7rem); background: linear-gradient( transparent, rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/* 소트 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont{
  display: flex; justify-content: flex-end; margin-bottom: 0.5rem; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont label{
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; color: var(--c-wt-gr07); font-weight: 600;
}
/* 리스트영역 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-sts-table-wrap{
  height: calc(100% - 2rem); overflow: auto;
}

/*======================
  탭2 - 댐관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist{
  height: calc(100% - 10rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
  overflow: hidden;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}
/*======================
  탭3 - 보관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist{
  height: calc(100% - 10rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
  overflow: hidden;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}
/*======================
  탭4 - 강수량관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol{
  flex-wrap: wrap;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont{
  max-width: 13rem; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont span,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont b,
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont small{font-size: 0.875rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont b{display: block; width: 100%;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong{width: 100%; margin: 0; justify-content: flex-end; gap: 0.25rem;}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol>li>button.wm-item-left-cont strong .wm-item-unit{font-size: 0.875rem;}

body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist{
  height: calc(100% - 11.25rem);
  background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}

/*======================
  2- 녹조현황 추가 2026-08-21
======================= */
/* 공통높이값 */
/* 상수원/친수활동 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist{overflow: auto;}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-status-search-resultlist{
  height: calc(100% - (4.75rem + 3.75rem));}
/* 관찰지점/저수지 .wm-status-search-resultlist 높이값 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-status-search-resultlist{
  height: calc(100% - (4.75rem + 5.125rem));}

/* 공통테이블 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-detail.wm-sts-cont-algae .wm-status-search-resultlist .wm-sts-table-wrap table thead th{vertical-align: middle;}


/*======================
  3-수위차트영역
======================= */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container{
  width: 100%; height: 80%;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  margin-bottom: 1rem;
}

/* 차트내부 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  display: flex; 
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  align-items: flex-start; margin-bottom: 1rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  width: calc(100% - 2rem); height: 100%; gap: 0.4rem; flex-direction: column; align-items: flex-start; position: relative;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>strong{
  display: block; font-size: 0.9375rem; line-height: 2rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>button{
  position: absolute; right: 1rem; top: 0;
  padding: 0.05rem 0.4rem; font-size: 0.75rem; cursor: pointer; color: rgb(174, 188, 203); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.25rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform{
  width: 100%; border-radius: 0.2rem; padding: 0 1rem; font-size: 0.9375rem;
  display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem;
}

body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 14rem;
    padding: 0.05rem 0.15rem 0.05rem 0.4rem;
    font-size: 0.875rem;
    line-height: 1.6;
    border-radius: 0.75rem;
    color: var(--c-wt, #fff);
    background: color-mix(in srgb, var(--chip-color, var(--c-information-4)) 22%, transparent);
    border: 1px solid var(--chip-color, var(--c-information-4));
}
.wm-fd-chip > b {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--chip-color, var(--c-information-4));
}
.wm-fd-chip .wm-fd-chip-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-fd-chip > button {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin-left: 0.125rem;
    font-size: 0.8125rem; line-height: 1;
    cursor: pointer;
    color: var(--c-wt, #fff);
    opacity: 0.65;
    background: transparent;
    border: none;
    border-radius: 50%;
}
.wm-fd-chip > button:hover {
    opacity: 1;
    background: var(--c-wt-gr025);
}

/* color-mix 미지원 브라우저 폴백 — 반투명 흰 배경으로 대체 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .wm-fd-chip{background: rgba(255, 255, 255, 0.12); }
}

/* 전체 지우기 버튼 기본 간격 (인라인에서 옮겨옴) */
[data-fd-graph-clear]{margin-left: 0.5rem; }
/* 2026-08-21 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::before{content: '(';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::after{content: ')';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap{
  width: 100%; height: calc(100% - 1.5rem);
}

/* l/r 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right{
  padding: 0.5rem; height: 100%;
}
/* graph left */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left{
  width: 100%; 
}
/* 그래프영역 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left
.wm-status-graph-box{
  width: 100%; background: var(--c-wt-gr01); padding: 1rem 0.625rem; display: flex; justify-content: center; align-items: flex-start;
  border-radius: 0.5rem;
}

/* ===============================================
  map container
===============================================*/
body .wm-status_wrap .wm-status-map{width: 100%; height: 100%; z-index: 1;}
/* map tool bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{
  top: var(--rem5_5); right: 1rem;}
/* draggable popup cursor */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup[data-wm-draggable] .wm-status-map-popup-header {
    cursor: move;}
/* 지도 팝업 공통 접기(pc) */
body .wm-status_wrap .wm-status-map-popup.wm-pop-fold{
    width: max-content; height: 2.75rem; overflow: hidden; padding: 0; 
}
.wm-status-map-popup.wm-pop-fold .wm-status-map-popup-body{display: none;}

/*======================
  1-전체 발령현황 / 2-수계별 지도팝업
======================= */
/* popup- fold */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold{padding: 0 2.6rem 0 0; width: 20rem; left: 1rem; top: 5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-comm-tab-title{
    padding: 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold){
  width: 30rem; height: max-content; top: 5rem; left: 1rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .tab-tit-item::before{
  display: none;
}
/* popup-header */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-header{position: relative;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: -2.5rem; top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold) .wm-status-map-popup-header .wm-sts-fold-btn{right: -0.5rem; top: -0.5rem;}
/* popup-body */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table tbody tr th>span{text-align: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table span{}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a{}


/*====================
  map-control container 
====================*/
/* left - scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{    
    position: fixed; left: var(--rem1); bottom: 1rem;
}

/* ------------
  map-control
------------*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap{
  width: 100%; height: max-content; position: fixed; bottom: 1rem; right: 1rem;
  z-index: 105;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control{
    width: 60%; padding: 0.5rem 1rem; justify-content: space-between; border-radius: 0.5rem;
    position: fixed; bottom: 1rem; right: 1rem;}

/* map-control -left */
/* 1-1. 모바일용 설정버튼 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting.on{
  background: var(--c-bluem6); border-color: var(--c-bluem6);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting{
    width: max-content; height: 2rem; padding: 0 1rem 0 0.6rem; border: 1px solid var(--c-wt); background: transparent; color: var(--c-wt);
    display: flex; align-items: center;}
/* 1-2. 모바일 설정옵션 팝업 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap{
  display: none;
  width: 100%; gap: 0.5rem; height: max-content; flex-direction: column; align-items: flex-start; position: absolute; bottom: 110%; right: 0;
  padding: 1rem; border-radius: 0.5rem; background: rgba(20, 39, 79, 0.8); backdrop-filter: blur(1rem);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap.on{
  display: flex;}
/* 타이틀 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-status-map-control-group-tit{
   width: 7rem; margin: 0.6rem 0; display: flex; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group{
  align-items: center; gap: 1rem; width: 100%;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ol,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ul{
  gap: 0.25rem; width: 100%; max-width: calc(100% - 5rem);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-btn-toggle{width: 100%;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-btn-toggle span{
  width: 100%; height: 2rem; padding: 0 0.5rem;  color: var(--c-wt);
}
/* 표시옵션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.query li{
  width: calc((100% - (0.25rem * 2) + 1rem) / 3);}
/* 색상필터 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.aggregate li{
  width: calc((100% - 0.25rem) / 2);}
/* map-control -right */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p>b{display: none;}




/* --------------------------------
  legend - 범례 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold{
  height: max-content; padding: 0.25rem 3.5rem 0.25rem 0.25rem; bottom: 5rem; left: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header{margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem; top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}

/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold){
    width: calc(100% - 2rem); height: 40%; max-height: 15rem;
    bottom: 4.5rem; left: 1rem; overflow: hidden;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold) .wm-status-map-popup-header{
    margin-bottom: 0.5rem; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend.on .wm-status-map-popup-header .wm-sts-fold-btn{top: 1rem; right: 3rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body{
    width: 100%; height: calc(100% - 2.5rem); overflow-y: auto; overflow-x: hidden;
}
/* 범례 네비게이션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list{
    width: 100%; height: 2.5rem; padding: 0.125rem;
    display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; left: 0; z-index: 1; background: var(--c-bk-gr1); backdrop-filter: blur(1rem);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container{
    width: calc(100% - 2.5rem); position: relative; height: 100%; overflow: hidden; padding: 0 0.125rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol{
    display: flex; align-items: center; width: 100%; gap: 0.25rem; position: absolute; top: 50%; transform: translateY(-50%);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol>li{
  width: max-content; min-width: calc(100% / 8);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body::-webkit-scrollbar,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list::-webkit-scrollbar{
    display: none;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list button{
    flex-shrink: 0; 
}
.wm-sts-prev-btn,.wm-sts-next-btn{
    background-color: var(--c-bluem10); backdrop-filter: blur(1rem);
    cursor: pointer; border: none; top: 0.25rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item:hover{
    background: var(--c-wt-gr035);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item{
  width: 100%; font-size: 0.875rem; font-weight: 600;
  background: var(--c-wt-gr01); color: var(--c-wt); border: 1px solid transparent;
  padding: 0.25rem 1rem; border-radius: 0.5rem; white-space: nowrap; cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item.on{
  border: 1px dotted var(--c-bluem4); background: var(--c-bluem10);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box{
    background: var(--c-bk-gr2); border-radius: 0.5rem;
    /* mq */
    padding: 0.2rem 1rem 0.5rem; margin: 0.5rem 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit{
    width: 100%; height: 2.5rem; font-size: 0.875rem; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::before{content: '[';margin-left: 0.25rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::after{content: ']';}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small{
    font-weight: 400;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list{margin: 0.25rem 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li{flex-wrap: wrap;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li p{
    display: flex; font-size: 0.9375rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list{
    border-radius: 0.5rem; margin-bottom: 0.4rem; background: rgba(0, 0, 0, 0.25); height: max-content; padding: 0.4rem 0; align-items: center; position: relative;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li{
    flex: 1 1 0; min-width: 0; position: relative; justify-content: flex-start; display: flex;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li>p{
    align-items: center;  width: 100%;
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.center li>p{justify-content: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.left li>p{justify-content: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li:hover .wm-sts-tooltip{
    display: flex; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li .wm-sts-tooltip{
    display: none; position: absolute; bottom: 110%; left: 0; font-size: 0.8125rem;
    width: max-content; border-radius: 0.5rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
    justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip{
  display: flex; height: max-content; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip span{
  width: 1rem; height: 1rem; display: block; margin: 0 0.5rem; flex-shrink: 0;
  border: 1px solid var(--c-wt-gr05);
}

/* 수위레벨 범례 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box{display: flex; flex-wrap: wrap;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list{
  width: 50%; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list:nth-child(2){border-radius: 0.5rem 0 0 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list:nth-child(3){border-radius: 0 0.5rem 0.5rem 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li>p{
  flex-direction: column;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip::before{
    position: absolute;
    top: 100%; left: 1.5rem;
    content: ''; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent ;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip p{
    justify-content: center; align-items: center;
}

/* 강수량범례색상 */
.wm-rainfall-legend-color{width: 100%; height: 1.25rem; display: flex; gap: 0.125rem;}
.wm-rainfall-legend-color .color-item{
    flex: 1 1 0; line-height: 1.25rem; display: block; opacity: 0.9;
    position: relative; transition: var(--wm-transition-slow);
}
.wm-rainfall-legend-color .color-item:hover{opacity: 1; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:hover .wm-sts-tooltip{display: block; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip::before{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip::before{left: 0rem;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip::before{right: 0.1rem;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip::before{
    content: ''; position: absolute; top: 100%; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent;}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip{left: 0;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip{right: 0;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip{
    display: none; position: absolute; bottom: 160%;
    width: max-content; ; border-radius: 0.5rem;
    padding: 0 0.3rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
}                        
.wm-rainfall-legend-box .legend-item-list{width: 100%; justify-content: space-between;}


/* --------------------------------
  wm-status-theme-select 레이어 팝업
-------------------------------- */
/* 접은상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold{
  display: flex; align-items: center;
  height: max-content; padding: 0 3.5rem 0 0.25rem; top: 5rem; right: 4rem; height: 2.75rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header{height: 100%; margin: 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header button{top: 50%; transform: translateY(-50%);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on.wm-pop-fold .wm-status-map-popup-header .wm-sts-popup-close{display: none;}
/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select:not(.wm-pop-fold){
  width: 18rem; height: 50%; max-height: 16.5rem; right: 4rem; top: 5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-theme-select.on:not(.wm-pop-fold) .wm-status-map-popup-header .wm-sts-fold-btn{
  top: 1rem; right: 3rem;}
.wm-status-theme-select .wm-status-map-popup-body{
  height: calc(100% - 2rem); overflow-y: auto; overflow-x: hidden;
}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-tit{
  margin: 0.625rem 0; padding: 0.25rem 0.25rem 0.25rem 1rem; 
  background: var(--c-wt-gr01);
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-tit{
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; 
}
.wm-sts-layer-tit.justify-between{display: flex; align-items: center; justify-content: space-between;}
/* layerbox wm-add-func */
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before{width: 1px; height: calc(100% - 1rem); left: 0.5rem; top: 50%; transform: translateY(-50%);}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{width: 0.5rem; height: 1px; left: 0.5rem; bottom: 0.5rem;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before,
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{content: ''; background-color: var(--c-wt-gr025); display: block; position: absolute;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box{
  flex-direction: column; position: relative; gap: 0.4rem; height: 0; overflow: hidden; transition: height .3s ease;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func.on{display: flex; height: max-content;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box:not(.wm-add-func){display:flex;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func:not(.on){display: none;}
.wm-status-theme-select .wm-sts-layer-box.wm-add-func::before,
.wm-status-theme-select .wm-sts-layer-box.wm-add-func::after{content: none;}
.wm-status-theme-select .wm-sts-layer-box.wm-add-func{padding: 0.5rem; background: var(--c-bk-gr15); margin: 0.5rem 0; border: 1px solid var(--c-wt-gr015);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label::before{
  content: ''; display: block; position: absolute; left: -0.5rem; top: 50%; width: 0.5rem; height: 1px; background: var(--c-wt-gr025);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label{
  display: flex; align-items: center; width: max-content; max-width: calc(100% - 1.5rem); position: relative;
  font-size: 0.875rem;}

/* 레이어 -> 레이더 영상 -> 레이더 투명도/영상재생 */
.wm-layer-toggle-btn.on{transform: rotate(180deg);}
.wm-layer-toggle-btn{background: var(--c-bk-gr15); border: none; cursor: pointer; border-radius: 0.5rem; transform: rotate(0deg); transition: all .3s ease-in-out;}
.wm-sts-radar-time{ color: var(--c-normal);}
.wm-sts-radar-container .wm-sts-radar-time{display: block; text-align: right; padding: 0.4rem;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap{display: flex; gap: 0.25rem; justify-content: center;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button:not(.on):hover{background: var(--c-bluem8);}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button.on{background: var(--c-bluem6); opacity: 1;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button{
  cursor: pointer; background: var(--c-wt-gr015); border: none; border-radius: 0.2rem; opacity: 0.55; transition: all .3s ease-in-out;}
/* 레이더영상 투명도 조절 */
.wm-iput-rangecustom .wm-cont-box-body .wm-range-contbox{justify-content: flex-end;}
/* 레이더영상 플레이컨트롤 바 */
.wm-vdo-controlbar .wm-cont-box-body .wm-range-contbox{justify-content: space-between;}

/*-----------------------------------------------
  햔황판 메뉴 선택
-----------------------------------------------*/
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap{display: flex;}
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-map-popup-header,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-status-header-tab-noti,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-menu-wrap,
body .wm-status_wrap .wm-status-header .wm-status-header-right .wm-status-header-tab .wm-status-header-tab-wrap .wm-mo-org-wrap{display: none;}


}


/* Mobile ----------------- 577 이상 */
@media (min-width: 577px) and (max-width: 767px){

/* ===============================================
  header
===============================================*/
body .wm-status_wrap .wm-status-header-btn{display: none;}
body .wm-status_wrap header.wm-status-header .wm-status-map-control-setting{
  border: none;
  background: transparent;
}
body .wm-status_wrap header.wm-status-header{width: 100%; height: var(--rem4_2); z-index: 150;}
.wm-status-header-tab.on{display: flex;}
.wm-status-header-tab{
    display: none; width: 100%;
    gap: var(--rem0_4);
    position: absolute;
    right: 0;
    top: 4.2rem;
    padding: 1.5rem;
    background-color: var(--c-bk-gr5);
    backdrop-filter: blur(1rem);
    flex-wrap: wrap;
}
.wm-status-header-tab button{
    width: 100%; height: 44px; padding: var(--rem0_25);
    background: var(--c-wt-gr01);
    border-style: solid; border-width: 0.01rem;
    border-color: transparent;
    color: var(--wm-status-txt-base); cursor: pointer;
}
.wm-status-header-tab button.on{
  opacity: 1; 
  transition: var(--wm-transition-normal);
  border-color: var(--c-wt-gr05);
  background: var(--c-bluem6);
}
/* 현황판 이동메뉴 추가 2026-08-14 */
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup{width: 90%; max-height: 90%;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu-list .wm-view-menu {
  min-width: 100%;
}


/* ===============================================
  main / section
===============================================*/

body .wm-status_wrap main{
    flex-direction: column;
}



/* ===============================================
  main content container
===============================================*/
body .wm-status_wrap .wm-status-content.on{display: block;}
body .wm-status_wrap .wm-status-content::-webkit-scrollbar{display: none;}
body .wm-status_wrap .wm-status-content{
    display: none;
    width: 100%; height: 100%; padding: 0 1.25rem 1.25rem;

    position: absolute; bottom: 3.125rem; left: 0; z-index: 5;
    box-shadow: 0 -0.625rem 0.625rem rgba(0,0,0, 0.5);
    overflow-y: auto;
}
/* 모바일용 닫힘 */
body .wm-status_wrap .wm-status-content .wm-sts-popup-close:hover {
  transform: rotate(180deg);
}
body .wm-status_wrap .wm-status-content .wm-sts-popup-close{
  background: transparent; border: none; transition: var(--wm-transition-normal);
  position: absolute; top: 1rem; right: 1rem;
}

/* 모바일 핸들러 */
body .wm-status_wrap .wm-status-content .wm-status-draghandle:active,
body .wm-status_wrap .wm-status-content .wm-status-draghandle:focus{
  outline: none; background: var(--c-bk-gr1); cursor: grabbing;}
  
body .wm-status_wrap .wm-status-content .wm-status-draghandle{
  display: flex; width: 100%; height: 2.75rem; justify-content: center;
  background: transparent; border: none; align-items: center;
  margin-bottom: 2.75rem; position: relative; cursor: grab;
}
/* 2026-08-21 width/height 공통 수정 */
body .wm-status_wrap .wm-status-content .wm-status-draghandle .wm-status-draghandle-bar{
  display: block;
  background: rgba(255, 255, 255, 0.5);
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 2rem;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
body .wm-status_wrap .wm-status-content>.wm-sts-popup-close{
  position: absolute; right: 1rem; top: 1rem; background: transparent; border: none;
}

.wm-status-comm-tab-detail .wm-alert-list ol>li{
  flex: 1 1 auto;
}

/*======================
  탭 공통 결과리스트
======================= */

body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail{overflow: hidden;}

/* font 2026-08-21 녹조폰트 추가 및 폰트 크기 조정*/
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container.wm-status-algae-container .wm-status-comm-tab-detail .wm-alert-list ol li button>strong,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong{font-size: 1.4rem;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol>li>button>span{font-size: 0.8rem;}

body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container::-webkit-scrollbar{display: none;}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container{
  height: calc(100% - (2.75rem + 0.5rem)); min-height: 48rem; overflow-x: hidden; overflow-y: auto;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-title{
  position: sticky; left: 0; top: 0; background: var(--c-information-8); z-index: 3;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-detail{
  height: 60%; margin-bottom: 1rem;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-detail:not(.wm-sts-cont-waterlevel) .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr{cursor: pointer;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr:hover{background-color: var(--c-wt-gr01);}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td{vertical-align: middle;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table{border-style: solid none solid none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody th:hover,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody td:hover{background-color: transparent;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table td{border: none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th span,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td span{white-space: nowrap;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td:not(:first-of-type) span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead tr th span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td:first-of-type .wm-sts-badge{margin: 0 0.25rem 0 0;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit{align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-sts-badge{display: flex; align-items: center;}

/* 공통검색 */
body .wm-status_wrap .wm-status-search-container{height: 3rem;}

/*======================
  1- 홍수현황 (홍수/녹조/가뭄(추가예정) 2026-08-21
======================= */
/*======================
  탭1 - 수위관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist{ overflow: hidden;
  height: calc(100% - 9.125rem); background: linear-gradient( transparent, rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/* 소트 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont{
  display: flex; justify-content: flex-end; margin-bottom: 0.5rem; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont label{
  display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; color: var(--c-wt-gr07); font-weight: 600;
}
/* 리스트영역 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-sts-table-wrap{
  height: calc(100% - 1.75rem); overflow: auto;
}
/*======================
  탭2 - 댐관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist{
  height: calc(100% - 9.125rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/*======================
  탭3 - 보관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist{
  height: calc(100% - 9.125rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/*======================
  탭4 - 강수량관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol{
  flex-wrap: wrap;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist{
  height: calc(100% - 10.875rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}

/*======================
  3-수위차트영역 (★2026-08-11 추가★)
======================= */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container{
  width: 100%; height: 70%;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  margin-bottom: 1rem;
}

/* 차트내부 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  display: flex; 
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  align-items: center; height: 1.5rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  width: calc(100% - 2rem); height: 100%; gap: 0.4rem; flex-direction: column; align-items: flex-start; position: relative;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>strong{
  display: block; font-size: 0.9375rem; line-height: 2rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>button{
  position: absolute; right: 1rem; top: 0;
  padding: 0.05rem 0.4rem; font-size: 0.75rem; cursor: pointer; color: rgb(174, 188, 203); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.25rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform{
  width: 100%; border-radius: 0.2rem; padding: 0 1rem;  font-size: 0.9375rem;
  display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 14rem;
    padding: 0.05rem 0.15rem 0.05rem 0.4rem;
    font-size: 0.875rem;
    line-height: 1.6;
    border-radius: 0.75rem;
    color: var(--c-wt, #fff);
    background: color-mix(in srgb, var(--chip-color, var(--c-information-4)) 22%, transparent);
    border: 1px solid var(--chip-color, var(--c-information-4));
}
.wm-fd-chip > b {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--chip-color, var(--c-information-4));
}
.wm-fd-chip .wm-fd-chip-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-fd-chip > button {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin-left: 0.125rem;
    font-size: 0.8125rem; line-height: 1;
    cursor: pointer;
    color: var(--c-wt, #fff);
    opacity: 0.65;
    background: transparent;
    border: none;
    border-radius: 50%;
}
.wm-fd-chip > button:hover {
    opacity: 1;
    background: var(--c-wt-gr025);
}

/* color-mix 미지원 브라우저 폴백 — 반투명 흰 배경으로 대체 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .wm-fd-chip{background: rgba(255, 255, 255, 0.12); }
}

/* 전체 지우기 버튼 기본 간격 (인라인에서 옮겨옴) */
[data-fd-graph-clear]{margin-left: 0.5rem; }
/* 2026-08-21 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::before{content: '(';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::after{content: ')';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap{
  width: 100%; height: calc(100% - 1.5rem);
}

/* l/r 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right{
  padding: 0.5rem; height: 100%;
}
/* graph left */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left{
  width: 100%; 
}
/* 그래프영역 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left
.wm-status-graph-box{
  width: 100%; background: var(--c-wt-gr01); padding: 1rem 0.625rem; display: flex; justify-content: center; align-items: flex-start;
  border-radius: 0.5rem;
}

/* ===============================================
  map container
===============================================*/
body .wm-status_wrap .wm-status-map{width: 100%; height: 100%;}
/* map tool bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{top: 50%; right: 1rem; transform: translateY(-50%);}


body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-header,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-header h4{
  font-size: 1.25rem;
}

/* 모바일 버텀시트 공통*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup{border-radius: 0.625rem 0.625rem 0 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on.wm-pop-fold{z-index: 5;}

/* 접기상태 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on.wm-pop-fold:not(.wm-sts-bottom-sheet){
  height: 2rem; padding: 0.25rem 3.5rem 0.25rem 0.25rem;
}
/* 드래그하는 동안에는 애니메이션 제거 */
body .wm-status_wrap main
.wm-status-map
.wm-status-map-canvas
.wm-status-legend.wm-sts-bottom-sheet.wm-sheet-dragging {
    transition: none !important;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet{
  width: 100%; padding: 2.75rem 1rem 1rem; bottom: 3.2rem; right: 0; overflow: hidden;
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet.wm-sts-mobile-hidden{display: none;}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-pop-fold:not(.wm-sts-bottom-sheet) .wm-status-map-popup-body{display: none;}

/* 2026-08-21 width/height 공통수정 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn i{
  display: block;
  background: var(--c-wt-gr05);
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 2rem;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);  
}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on.wm-pop-fold:not(.wm-sts-bottom-sheet) .wm-status-map-popup-header .wm-sts-popup-close{display: none;}

/* 접기버튼 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-header .wm-sts-fold-btn:focus{
  opacity: 1;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-sts-popup-close{top: 1rem;}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn:focus,
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn:active{cursor: grabbing;}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn{
        width: 100%;
        height: 2.75rem;
        opacity: 0.5;
        cursor: grab;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
}

/*======================
  1-전체 발령현황 / 2-수계별 지도팝업
======================= */
/* popup- fold */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold{
  width: 60%; padding: 0 2.6rem 0 0; top: 4.8rem; left: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-comm-tab-title{
  padding: 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold){
  width: 60%; height: max-content; top: 4.8rem; left: 1rem;
}
/* popup-header */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-header{position: relative;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{right: -2.6rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-header .wm-sts-fold-btn{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}

/* popup-body */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table span{}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a{}




/*====================
  map-control container 
====================*/
/* left - scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{    
    position: fixed; left: var(--rem1); bottom: 4rem;
}

/* ------------
  map-control
------------*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap{
  width: 100%; height: max-content; position: fixed; bottom: 0; left: 0;
  z-index: 105;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control{
    width: 100%; max-width: 100%; padding: 0.6rem; justify-content: space-between;
    position: fixed; bottom: 0; right: 0;}
/* map-control -left */
/* 1-1. 모바일용 설정버튼 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting.on{
  background: var(--c-bluem6); border-color: var(--c-bluem6);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting{
    width: max-content; height: 2rem; padding: 0 1rem 0 0.6rem; border: 1px solid var(--c-wt); background: transparent; color: var(--c-wt);
    display: flex; align-items: center;}
/* 1-2. 모바일 설정옵션 팝업 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap{
  display: none;
  width: 100%; gap: 0.5rem; height: max-content; flex-direction: column; align-items: flex-start; position: absolute; bottom: 100%; right: 0;
  padding: 1rem; border-radius: 0.5rem; background: rgba(20, 39, 79, 0.8); backdrop-filter: blur(1rem);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap.on{
  display: flex;}
/* 타이틀 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-status-map-control-group-tit{
   width: 8rem; margin: 0.6rem 0; display: flex; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group{
  align-items: center; gap: 1rem; width: 100%;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ol,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ul{
  gap: 0.25rem; width: 100%; max-width: calc(100% - 5rem);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-btn-toggle{width: 100%;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-btn-toggle span{
  width: 100%; height: 2rem; padding: 0 0.5rem;  color: var(--c-wt);
}
/* 표시옵션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.query li{
  width: calc((100% - (0.25rem * 2) + 1rem) / 3);}
/* 색상필터 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.aggregate li{
  width: calc((100% - 0.25rem) / 2);}
/* map-control -right */ 
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right .wm-status-map-control-right-auto_refresh *{}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p>b{display: none;}



/* --------------------------------
  legend - 범례 팝업
-------------------------------- */
/* 기본상태 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold){
    /* pc */
    width: 100%; height: 40%;
    bottom: 3.2rem; right: 0; overflow: hidden;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend:not(.wm-pop-fold) .wm-status-map-popup-header{
    margin-bottom: 0.5rem; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body{
    width: 100%; height: calc(100% - 3.25rem); overflow-y: auto; overflow-x: hidden;
}
/* 범례 네비게이션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list{
    width: 100%; height: 2.5rem; padding: 0.125rem;
    display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; left: 0; z-index: 1; background: var(--c-bk-gr1); backdrop-filter: blur(1rem);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container{
    width: calc(100% - 2.5rem); position: relative; height: 100%; overflow: hidden; padding: 0 0.125rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol{
    display: flex; align-items: center; width: 100%; gap: 0.25rem; position: absolute; top: 50%; transform: translateY(-50%);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol>li{
  width: max-content;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body::-webkit-scrollbar,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list::-webkit-scrollbar{
    display: none;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list button{
    flex-shrink: 0; 
}
.wm-sts-prev-btn,.wm-sts-next-btn{
    background-color: var(--c-bluem10); backdrop-filter: blur(1rem);
    cursor: pointer; border: none; top: 0.25rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item:hover{
    background: var(--c-wt-gr035);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item{
  width: 100%; font-size: 1rem; font-weight: 600;
  background: var(--c-wt-gr01); color: var(--c-wt); border: 1px solid transparent;
  padding: 0.25rem 1rem; border-radius: 0.5rem; white-space: nowrap; cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item.on{
  border: 1px dotted var(--c-bluem4); background: var(--c-bluem10);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box{
    background: var(--c-bk-gr2); border-radius: 0.5rem;
    /* mq */
    padding: 0.2rem 1rem 0.4rem; margin: 0.5rem 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit{
    width: 100%; height: 2.5rem; font-size: 0.875rem; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::before{content: '[';margin-left: 0.25rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::after{content: ']';}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small{
    font-weight: 400;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list{margin: 0.25rem 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li{display: flex; flex-wrap: wrap;  gap: 0.4rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li p{
    display: flex; font-size: 1rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list{
    border-radius: 0.5rem; margin-bottom: 0.4rem; background: rgba(0, 0, 0, 0.25); height: max-content; align-items: center; position: relative;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li{
    flex: 1 1 0; min-width: 0; position: relative; justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li>p{
    align-items: center; flex-direction: column; padding: 0.4rem 0; width: 100%; }

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.center li>p{justify-content: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.left li>p{justify-content: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li:hover .wm-sts-tooltip{
    display: flex; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li .wm-sts-tooltip{
    display: none; position: absolute; bottom: 110%; left: 0; font-size: 0.8125rem;
    width: max-content; border-radius: 0.5rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
    justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip{
  display: flex; height: max-content; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip span{
  width: 1rem; height: 1rem; display: block; margin: 0 0.5rem;
  border: 1px solid var(--c-wt-gr05);
}

/* 수위레벨 범례 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip::before{
    position: absolute;
    top: 100%; left: 1.5rem;
    content: ''; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent ;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip p{
    justify-content: center; align-items: center;
}

/* 강수량범례색상 */
.wm-rainfall-legend-color{width: 100%; height: 1.25rem; display: flex; gap: 0.125rem;}
.wm-rainfall-legend-color .color-item{
    flex: 1 1 0; line-height: 1.25rem; display: block; opacity: 0.9;
    position: relative; transition: var(--wm-transition-slow);
}
.wm-rainfall-legend-color .color-item:hover{opacity: 1; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:hover .wm-sts-tooltip{display: block; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip::before{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip::before{left: 0rem;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip::before{right: 0.1rem;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip::before{
    content: ''; position: absolute; top: 100%; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent;}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip{left: 0;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip{right: 0;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip{
    display: none; position: absolute; bottom: 160%;
    width: max-content; ; border-radius: 0.5rem;
    padding: 0 0.3rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
}                        
.wm-rainfall-legend-box .legend-item-list{width: 100%; justify-content: space-between;}



/* --------------------------------
  wm-status-theme-select 레이어 팝업
-------------------------------- */

/* 기본상태 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-theme-select.wm-sts-bottom-sheet{
  width: 100%;  max-height: 80%; right: 0; bottom: 3.2rem; top: auto; overflow: hidden; touch-action: none;
  transition: height 0.28s ease; border-radius: 0.625rem 0.625rem 0 0;
}
.wm-status-theme-select .wm-status-map-popup-body{
  height: calc(100% - 3.25rem); overflow-y: auto; overflow-x: hidden;
}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-tit{
  margin: 0.625rem 0; padding: 0.25rem 0.25rem 0.25rem 1rem; 
  background: var(--c-wt-gr01);
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-tit{
  display: flex; font-weight: 800; font-size: 1.125rem; 
}
.wm-sts-layer-tit.justify-between{align-items: center; justify-content: space-between;}
/* layerbox / wm-add-func */
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before{width: 1px; height: calc(100% - 1rem); left: 0.5rem; top: 50%; transform: translateY(-50%);}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{width: 0.5rem; height: 1px; left: 0.5rem; bottom: 0.5rem;}

.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before,
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{
  content: '';
  background-color: var(--c-wt-gr025); display: block;
  position: absolute;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box{
  flex-direction: column; position: relative; gap: 0.4rem; height: 0; overflow: hidden; transition: height .3s ease;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func.on{display: flex; height: max-content;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box:not(.wm-add-func){display:flex;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func:not(.on){display: none;}

.wm-status-theme-select .wm-sts-layer-box.wm-add-func::before,
.wm-status-theme-select .wm-sts-layer-box.wm-add-func::after{content: none;}
.wm-status-theme-select .wm-sts-layer-box.wm-add-func{padding: 0.5rem; background: var(--c-bk-gr15); margin: 0.5rem 0; border: 1px solid var(--c-wt-gr015);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label::before{content: ''; display: block; position: absolute; left: -0.5rem; top: 50%; width: 0.5rem; height: 1px; background: var(--c-wt-gr025);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label{
  display: flex; align-items: center; width: max-content; max-width: calc(100% - 1.5rem); position: relative;
  font-size: 1rem;
}

/* 레이어 -> 레이더 영상 -> 레이더 투명도/영상재생 */
.wm-layer-toggle-btn.on{transform: rotate(180deg);}
.wm-layer-toggle-btn{background: var(--c-bk-gr15); border: none; cursor: pointer; border-radius: 0.5rem; transform: rotate(0deg); transition: all .3s ease-in-out;}
.wm-sts-radar-time{ color: var(--c-normal);}
.wm-sts-radar-container .wm-sts-radar-time{display: block; text-align: right; padding: 0.4rem;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap{display: flex; gap: 0.25rem; justify-content: center;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button:not(.on):hover{background: var(--c-bluem8);}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button.on{background: var(--c-bluem6); opacity: 1;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button{
  cursor: pointer; transition: all .3s ease-in-out; background: var(--c-wt-gr015); border: none; border-radius: 0.2rem; opacity: 0.55;}
/* 레이더영상 투명도 조절 */
.wm-iput-rangecustom .wm-cont-box-body .wm-range-contbox{justify-content: flex-end;}

/* 레이더영상 플레이컨트롤 바 */
.wm-vdo-controlbar .wm-cont-box-body .wm-range-contbox{justify-content: space-between;}


/*-----------------------------------------------
  햔황판 메뉴 선택
-----------------------------------------------*/
/* 안내메뉴영역 */
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab.on::after{
  content: ''; position: fixed; left: 0; bottom: -24dvh; width: 100%; height: calc(100dvh - 76dvh); backdrop-filter: blur(99px);
  background: var(--c-bk-gr6); display: block; z-index: -9;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab.on{
  display: flex; top: 0; height: 76dvh; opacity: 1;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab{
  display: none; gap: var(--rem0_4); position: absolute; right: 0; top: -100%; opacity: 0; padding: 1.5rem; background: var(--c-information-10);
  backdrop-filter: blur(1rem); flex-wrap: wrap; transition: var(--wm-transition-normal); box-shadow: 0.25rem 0.4rem 1rem rgba(0,0,0,0.5);
  border-radius: 0 0 0.4rem 0.4rem; border-bottom: 0.125rem solid var(--c-border);
}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap::-webkit-scrollbar{
  display: none;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap{
  width: 100%; height: 100%; overflow-y: auto; background: var(--c-information-10); overflow-x: hidden;}
body .wm-status_wrap header.wm-status-header .wm-menu-wrap{width: 100%; margin: 1rem 0;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu{width: 100%; border: 1px solid var(--c-sts-txt4); border-radius: var(--rem0_625); overflow: hidden;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a{
  display: flex; align-items: center; gap: var(--rem0_625); padding: 0.8125rem 0.75rem; font-size: var(--wm-status-txt-14px);
  color: var(--c-sts-txt4); text-decoration: none;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li:not(:last-of-type) a{border-bottom: 1px solid var(--c-wt-gr035);}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a svg{
  flex: none; width: 1.0625rem; height: 1.0625rem; fill: none; stroke: var(--c-sts-txt5); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a .move-arrow{
  margin-left: auto;}
body .wm-status_wrap header.wm-status-header .wm-mo-org{width: 100%; padding-top: 1rem; margin-bottom: 2rem; border-top: 1px solid var(--c-wt-gr035); }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item{margin-bottom: 0.875rem; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item > a{
  display: block; margin-bottom: 4px; font-size: var(--wm-status-txt-14px); font-weight: 700; color: var(--c-sts-txt3); text-decoration: none; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p{margin: 0 0 0.125rem; font-size: var(--wm-status-txt-14px); line-height: 1.6; color: var(--c-sts-txt5); }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p.tel{color: var(--c-sts-txt3); font-weight: 600;}
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p.tel a{color: inherit; text-decoration: none;}
body .wm-status_wrap header.wm-status-header .wm-mo-org-copy{margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--c-wt-gr035);
  font-size: var(--wm-status-txt-14px); line-height: 1.6; color: var(--c-sts-txt4);}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header{
  width: 100%; display: flex; justify-content: space-between;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header h4{
  display: flex; align-items: center; font-size: 1rem;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header .wm-sts-popup-close{
  width: 2rem; height: 2rem;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header .sz24.wm-sts-popup-close .wm-civdsb-icon{
  background-size: 30rem 30rem;}
/* 안내문구 */
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab-noti{
  width: 90%; margin: 1rem auto; font-size: 0.875rem; line-height: 1.2rem; color: var(--c-sts-txt3);}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-menu-wrap .wm-sts-subtit{
  display: flex; color: var(--c-sts-txt4); font-size: 0.875rem; font-weight: 800; height: 2rem; align-items: center;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-mo-org-foot{margin-top: auto;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-mo-org-foot img{
  display: block; width: 100%; max-width: 18rem;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab button{padding: var(--rem0_25); background: var(--c-wt-gr01); border-style: solid; border-width: 0.01rem; border-color: transparent; color: var(--wm-status-txt-base); cursor: pointer;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab button.on{opacity: 1;  transition: var(--wm-transition-normal); border-color: var(--c-wt-gr05); background: var(--c-bluem6);}




}


/* Mobile ----------------- 577 이상 */
@media (max-width: 576px){

body .wm-status_wrap button{font-size: var(--wm-status-txt-15px); cursor: pointer; touch-action: manipulation !important; }

/* ===============================================
  header
===============================================*/
body .wm-status_wrap .wm-status-header-btn{display: none;}
body .wm-status_wrap header.wm-status-header .wm-status-map-control-setting{
  border: none;
  background: transparent;
}
body .wm-status_wrap header.wm-status-header{width: 100%; height: var(--rem4_2); z-index: 150;}

/* 물모아 현황 메뉴선택 */
.wm-status-header-tab.on{
  display: flex; top: 0; right: 0; 
  height: 100%; width: 86vw; max-width: 340px;
  align-content: flex-start;
}
.wm-status-header-tab{
  display: none;
  width: 0;
  height: 0;
  gap: var(--rem0_4);
  position: fixed;
  right: -10%;
  top: 3.2rem;
  padding: 1.5rem;
  background: var(--c-bluem10);
  backdrop-filter: blur(1rem);
  flex-wrap: wrap;
  z-index: -3;
  transition: var(--wm-transition-slow);
}
.wm-status-header-tab button{
    width: 100%; height: 44px; padding: var(--rem0_25);
    background: var(--c-wt-gr01);
    border-style: solid; border-width: 0.01rem;
    border-color: transparent;
    color: var(--wm-status-txt-base); cursor: pointer;
    border-radius: 0.4rem;
}
.wm-status-header-tab button.on{
  opacity: 1; 
  transition: var(--wm-transition-normal);
  border-color: var(--c-wt-gr05);
  background: var(--c-bluem6);
}

/* 현황판 이동메뉴 추가 2026-08-14 */
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup{width: 90%; max-height: 90%;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu-list .wm-view-menu {
  min-width: 100%;
}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-txtclose-btn{text-indent: -999px;}



/* ===============================================
  main / section
===============================================*/

body .wm-status_wrap main{
    flex-direction: column;
}



/* ===============================================
  main content container
===============================================*/

body .wm-status_wrap .wm-status-content.on{display: block;}
body .wm-status_wrap .wm-status-content{
    display: none;
    width: 100%; max-height: 80%; padding: 3.4rem 1.25rem 1.25rem; /*padding 수정 2026-09-04*/
    position: absolute; bottom: 4rem; left: 0; z-index: 5;
    box-shadow: 0 -0.625rem 0.625rem rgba(0,0,0, 0.5);
}
body .wm-status_wrap .wm-status-content .wm-sts-popup-close:active,
body .wm-status_wrap .wm-status-content .wm-sts-popup-close:focus{
  transform: rotate(180deg);
}
body .wm-status_wrap .wm-status-content .wm-sts-popup-close{
  background: transparent; border: none; transition: var(--wm-transition-normal);
  position: absolute; top: 1rem; right: 1rem;
}

body .wm-status_wrap .wm-status-content .wm-status-draghandle:focus,
body .wm-status_wrap .wm-status-content .wm-status-draghandle:active{cursor: grabbing;}
body .wm-status_wrap .wm-status-content .wm-status-draghandle:focus{
  outline: none; background: var(--c-bk-gr1);}
body .wm-status_wrap .wm-status-content .wm-status-draghandle{
  display: flex; width: 100%; height: 2.75rem; justify-content: center;
  background: transparent; border: none; align-items: center;
  padding-top: 1.25rem; margin-bottom: 0.5rem;
  position: absolute; top: 0; left: 0;
  cursor: grab;
}
/* 2026-08-21 width/height 통일수정 */
body .wm-status_wrap .wm-status-content .wm-status-draghandle .wm-status-draghandle-bar{
  display: block;
  background: rgba(255, 255, 255, 0.5);
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 2rem;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.wm-status-comm-tab-detail .wm-alert-list ol>li{
  flex: 1 1 auto;
}


/*======================
  탭 공통 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail{overflow: hidden;}

/* font 2026-08-21 녹조폰트 추가 및 폰트 크기 조정*/
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container.wm-status-algae-container .wm-status-comm-tab-detail .wm-alert-list ol li button>strong,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong{font-size: 1.2rem;}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container::-webkit-scrollbar{display: none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-alert-list ol>li>button>span{font-size: 0.8rem;}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container{
  height: 100%; overflow-x: hidden; overflow-y: auto;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-title{
  position: sticky; left: 0; top: 0; background: #000037; z-index: 3;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-detail{
  height: 100%; min-height: 32rem; margin-bottom: 1rem;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-detail:not(.wm-sts-cont-waterlevel) .wm-status-search-resultlist .wm-sts-table-wrap{
  height: 100%;
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table *:not(.wm-thead-unit){
  
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead{
  background: var(--wm-sts-sub-bg);
}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table .wm-thead-unit{}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr{cursor: pointer;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr:hover{background-color: var(--c-wt-gr01);}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td{vertical-align: middle;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table{border-style: solid none solid none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody th:hover,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody td:hover{background-color: transparent;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table th,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table td{border: none;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr th span,
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td span{white-space: nowrap;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tr td:not(:first-of-type) span{justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table thead tr th span{min-height: 1rem; justify-content: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td:first-of-type .wm-sts-badge{margin: 0 0.25rem 0 0;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit{align-items: center;}
body .wm-status_wrap .wm-status-content .wm-status-flood-container .wm-status-comm-tab-detail .wm-status-search-resultlist .wm-sts-table-wrap table tbody tr td .wm-poi-tit .wm-sts-badge{display: flex; align-items: center;}

/* 공통검색 */
body .wm-status_wrap .wm-status-search-container{height: 3rem;}

/*======================
  탭1 - 수위관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist{ overflow: hidden;
  height: calc(100% - 9.125rem); background: linear-gradient( transparent, rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/* 소트 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont{
  display: flex; justify-content: flex-end; margin-bottom: 0.5rem; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-status-sort-cont label{
  display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; color: var(--c-wt-gr07); font-weight: 600;
}
/* 리스트영역 */
body .wm-status_wrap .wm-status-content .wm-sts-cont-waterlevel .wm-status-search-resultlist .wm-sts-table-wrap{
  height: calc(100% - 2rem); overflow: auto;
}
/*======================
  탭2 - 댐관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-dam .wm-status-search-resultlist{
  height: calc(100% - 9.125rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/*======================
  탭3 - 보관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-weir .wm-status-search-resultlist{
  height: calc(100% - 9.125rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}
/*======================
  탭4 - 강수량관측소 결과리스트
======================= */
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-alert-list ol{
  flex-wrap: wrap;
}
body .wm-status_wrap .wm-status-content .wm-sts-cont-cumulativerainfall .wm-status-search-resultlist{
  height: calc(100% - 10.875rem); background: linear-gradient( rgba(37, 79, 135, 0.5), var(--c-bk-gr8));
}


/*======================
  3-수위차트영역 (★2026-08-11 추가★)
======================= */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container{
  width: 100%; height: 60%;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit{
  margin-bottom: 1rem;
}
/* 차트내부 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  display: flex; 
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p{
  width: calc(100% - 2rem); height: 100%; gap: 0.4rem; flex-direction: column; align-items: flex-start; position: relative;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>strong{
  display: block; font-size: 0.9375rem; line-height: 2rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit>p>button{
  position: absolute; right: 1rem; top: 0;
  padding: 0.05rem 0.4rem; font-size: 0.75rem; cursor: pointer; color: rgb(174, 188, 203); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.25rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform{
  width: 100%; border-radius: 0.2rem; padding: 0 1rem; font-size: 0.9375rem;
  display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem;
}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform .wm-fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 14rem;
    padding: 0.05rem 0.15rem 0.05rem 0.4rem;
    font-size: 0.875rem;
    line-height: 1.6;
    border-radius: 0.75rem;
    color: var(--c-wt, #fff);
    background: color-mix(in srgb, var(--chip-color, var(--c-information-4)) 22%, transparent);
    border: 1px solid var(--chip-color, var(--c-information-4));
}
.wm-fd-chip > b {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--chip-color, var(--c-information-4));
}
.wm-fd-chip .wm-fd-chip-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-fd-chip > button {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin-left: 0.125rem;
    font-size: 0.8125rem; line-height: 1;
    cursor: pointer;
    color: var(--c-wt, #fff);
    opacity: 0.65;
    background: transparent;
    border: none;
    border-radius: 50%;
}
.wm-fd-chip > button:hover {
    opacity: 1;
    background: var(--c-wt-gr025);
}

/* color-mix 미지원 브라우저 폴백 — 반투명 흰 배경으로 대체 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
    .wm-fd-chip{background: rgba(255, 255, 255, 0.12); }
}

/* 전체 지우기 버튼 기본 간격 (인라인에서 옮겨옴) */
[data-fd-graph-clear]{margin-left: 0.5rem; }
/* 2026-08-21 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::before{content: '(';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-sub-tit .wm-sts-inform small::after{content: ')';}
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap{
  width: 100%; height: calc(100% - 1.5rem);
}

/* l/r 공통 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left,
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-right{
  padding: 0.5rem; height: 100%;
}
/* graph left */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left{
  width: 100%; 
}
/* 그래프영역 */
body .wm-status_wrap .wm-status-content .wm-status-comm-tab-container .wm-status-graph-container .wm-status-graph-wrap .wm-status-graph-wrap-left
.wm-status-graph-box{
  width: 100%; background: var(--c-wt-gr01); padding: 1rem 0.625rem; display: flex; justify-content: center; align-items: flex-start;
  border-radius: 0.5rem;
}

/* ===============================================
  map container
===============================================*/
body .wm-status_wrap .wm-status-map{width: 100%; height: 100%;}
/* map tool bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{
  top: 50%; right: 1rem; transform: translateY(-50%);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-header,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-header h4{
  font-size: 1.25rem;
}

/* 모바일 버텀시트 공통*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup{border-radius: 0.625rem 0.625rem 0 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on.wm-pop-fold{z-index: 5;}

/* 접기상태 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on.wm-pop-fold:not(.wm-sts-bottom-sheet){
  height: 2rem; padding: 0.25rem 3.5rem 0.25rem 0.25rem;
}
/* 드래그하는 동안에는 애니메이션 제거 */
body .wm-status_wrap main
.wm-status-map
.wm-status-map-canvas
.wm-status-legend.wm-sts-bottom-sheet.wm-sheet-dragging {
    transition: none !important;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet{
  width: 100%; padding: 2.75rem 1rem 1rem; bottom: 3.2rem; right: 0; overflow: hidden;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet.wm-sts-mobile-hidden{display: none;}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-pop-fold:not(.wm-sts-bottom-sheet) .wm-status-map-popup-body{display: none;}

/* 2026-08-21 width/height 공통수정 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn i{
  display: block;
  background: var(--c-wt-gr05);
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 2rem;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  
}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on.wm-pop-fold:not(.wm-sts-bottom-sheet) .wm-status-map-popup-header .wm-sts-popup-close{display: none;}

/* 접기버튼 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-header .wm-sts-fold-btn:focus{
  opacity: 1;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-sts-popup-close{top: 1rem;}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn:active,
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn:focus{cursor: grabbing;}
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-sts-bottom-sheet .wm-status-map-popup-header .wm-sts-fold-btn{
  width: 100%; height: 2.75rem; opacity: 0.5; cursor: grab; top: 0; left: 50%; transform: translateX(-50%);}

/*======================
  1-전체 발령현황 / 2-수계별 지도팝업
======================= */
/* popup- fold */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold{
  padding: 0 2.6rem 0 1rem; width: 62%; top: 4.7rem; left: 1rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-comm-tab-title{
  padding: 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold){
  width: calc(100% - 2rem); height: max-content; top: 5rem; right: 1rem;
}

/* popup-header */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert:not(.wm-pop-fold) .wm-status-map-popup-header .wm-sts-fold-btn{
  right: 0.5rem; top: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert.wm-pop-fold .wm-status-map-popup-header .wm-sts-fold-btn{
  right: 0.5rem; top: 50%; transform: translateY(-50%);}
/* popup-body */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table span{
  }
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-body .wm-status-comm-tab-detail .wm-sts-table-wrap table a{
  }




/*====================
  map-control container 
====================*/

/* left - scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{
    position: fixed; left: var(--rem1); bottom: 4.5rem;
}

/* ------------
  map-control
------------*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap{
  width: 100%; height: max-content; position: fixed; bottom: 0; left: 0;
  z-index: 105;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control{
    width: 100%; max-width: 100%; padding: 1rem; justify-content: space-between;
    position: fixed; bottom: 0; right: 0; gap: 0.5rem;
}
/* map-control -left */
/* 1-1. 모바일용 설정버튼 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting.on{
  background: var(--c-bluem6); border-color: var(--c-bluem6);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-setting{
    width: max-content; height: 2rem; padding: 0 1rem 0 0.6rem; font-size: 1rem; border: 1px solid var(--c-wt); background: transparent; color: var(--c-wt); display: flex; align-items: center;}
/* 1-2. 모바일 설정옵션 팝업 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group{
    flex-direction: column;
}
/* 타이틀 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-status-map-control-group-tit{
  width: 100%; margin: 0.6rem 0; display: flex; align-items: center; justify-content: flex-start; font-size: 1rem; font-weight: 600}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group li .wm-btn-toggle,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group li .wm-btn-toggle span,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group{
  width: 100%;}
  
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap.on{display: flex;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap{
  display: none;
  position: absolute; bottom: 3.2rem; right: 0; width: 100%; height: max-content; padding: 0 1rem 1rem; backdrop-filter: blur(1rem);
  background: rgba(20, 39, 79, 0.8);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ol,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group ul{
  gap: 0.25rem; width: 100%;}
/* 표시옵션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.query li{
  width: calc((100% - (0.25rem * 2)) / 3);
}
/* 색상필터 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group.aggregate li{
  width: calc((100% - 0.25rem) / 2);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group li .wm-btn-toggle span{
  height: 2.75rem; padding: 0 0.5rem;  color: var(--c-wt); font-size: 1rem;
}
/* map-control -right */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right{overflow: hidden; white-space: nowrap;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right>p>b{display: none;}


/* --------------------------------
  legend - 범례 팝업
-------------------------------- */
/* 기본상태 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-legend.wm-sts-bottom-sheet{
  width: 100%; max-height: 80%; right: 0; bottom: 4rem; top: auto; overflow: hidden; touch-action: none;
  transition: height 0.28s ease;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-header{
    margin-bottom: 0.5rem; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body{
    width: 100%; height: calc(100% - 3.25rem); overflow-y: auto; overflow-x: hidden;
}
/* 범례 네비게이션 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list{
    width: 100%; height: 2.5rem; padding: 0.125rem;
    display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; left: 0; z-index: 1; background: var(--c-bk-gr1); backdrop-filter: blur(1rem);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container{
    width: calc(100% - 2.5rem); position: relative; height: 100%; overflow: hidden; padding: 0 0.125rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol{
    display: flex; align-items: center; width: 100%; gap: 0.25rem; position: absolute; top: 50%; transform: translateY(-50%);
}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-container>ol>li{
  width: max-content;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body::-webkit-scrollbar,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list::-webkit-scrollbar{
    display: none;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list button{
    flex-shrink: 0; 
}
.wm-sts-prev-btn,.wm-sts-next-btn{
    background-color: var(--c-bluem10); backdrop-filter: blur(1rem);
    cursor: pointer; border: none; top: 0.25rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item:hover{
    background: var(--c-wt-gr035);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item{
  width: 100%;  font-size: 1rem; font-weight: 600;
  background: var(--c-wt-gr01); color: var(--c-wt); border: 1px solid transparent;
  padding: 0.25rem 1rem; border-radius: 0.5rem; white-space: nowrap; cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-legend .wm-status-map-popup-body .wm-legend-nav-list .wm-legend-nav-item.on{
  border: 1px dotted var(--c-bluem4); background: var(--c-bluem10);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box{
    background: var(--c-bk-gr2); border-radius: 0.5rem;
    /* mq */
    padding: 0.2rem 1rem 0.4rem; margin: 0.5rem 0;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit{
    width: 100%; height: 2.5rem; font-size: 0.875rem; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::before{content: '[';margin-left: 0.25rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small::after{content: ']';}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .wm-sts-subtit>small{
    font-weight: 400;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list{margin: 0.25rem 0;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li{display: flex; flex-wrap: wrap; gap: 0.4rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box li p{
    display: flex; font-size: 1rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list{
    border-radius: 0.5rem; margin-bottom: 0.4rem; background: rgba(0, 0, 0, 0.25); height: max-content; align-items: center; position: relative;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li{
    flex: 1 1 0; min-width: 0; position: relative; justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li>p{
    align-items: center; flex-direction: column; padding: 0.4rem 0; width: 100%; }

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.center li>p{justify-content: center;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list.left li>p{justify-content: left;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li:hover .wm-sts-tooltip{
    display: flex; 
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list.basic-lg-list li .wm-sts-tooltip{
    display: none; position: absolute; bottom: 110%; left: 0; font-size: 0.8125rem;
    width: max-content; border-radius: 0.5rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
    justify-content: flex-start;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip{
  display: flex; height: max-content; gap: 0.5rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-legend-box .legend-item-list li .wm-legend-chip span{
  width: 1rem; height: 1rem; display: block; margin: 0 0.5rem;
  border: 1px solid var(--c-wt-gr05);
}

/* 수위레벨 범례 */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip::before{
    position: absolute;
    top: 100%; left: 1.5rem;
    content: ''; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent ;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-waterlevel-legend-box .legend-item-list li .wm-sts-tooltip p{
    justify-content: center; align-items: center;
}

/* 강수량범례색상 */
.wm-rainfall-legend-color{width: 100%; height: 1.25rem; display: flex; gap: 0.125rem;}
.wm-rainfall-legend-color .color-item{
    flex: 1 1 0; line-height: 1.25rem; display: block; opacity: 0.9;
    position: relative; transition: var(--wm-transition-slow);
}
.wm-rainfall-legend-color .color-item:hover{opacity: 1; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:hover .wm-sts-tooltip{display: block; transition: var(--wm-transition-slow);}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip::before{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip::before{left: 0rem;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip::before{right: 0.1rem;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip::before{
    content: ''; position: absolute; top: 100%; border-style: solid; border-width: 0.4rem; border-color: var(--c-wt) transparent transparent transparent;}
.wm-rainfall-legend-color .color-item:not(:last-of-type,:first-of-type) .wm-sts-tooltip{left: 50%; transform: translateX(-50%);}
.wm-rainfall-legend-color .color-item:first-of-type .wm-sts-tooltip{left: 0;}
.wm-rainfall-legend-color .color-item:last-of-type .wm-sts-tooltip{right: 0;}
.wm-rainfall-legend-color .color-item .wm-sts-tooltip{
    display: none; position: absolute; bottom: 160%;
    width: max-content; ; border-radius: 0.5rem;
    padding: 0 0.3rem; background: var(--c-bk-gr85);
    backdrop-filter: blur(1rem); color: var(--c-wt);
    border: 1px solid var(--c-wt);
}                        
.wm-rainfall-legend-box .legend-item-list{width: 100%; justify-content: space-between;}


/* --------------------------------
  wm-status-theme-select 레이어 팝업
-------------------------------- */

/* 기본상태 */
body .wm-status_wrap main .wm-status-map .wm-status-map-canvas .wm-status-theme-select.wm-sts-bottom-sheet{
  width: 100%;  max-height: 80%; right: 0; bottom: 4rem; top: auto; overflow: hidden; touch-action: none;
  transition: height 0.28s ease; border-radius: 0.625rem 0.625rem 0 0;
}
.wm-status-theme-select .wm-status-map-popup-body{
  height: calc(100% - 3.25rem); overflow-y: auto; overflow-x: hidden;
}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-tit{
  margin: 0.625rem 0; padding: 0.25rem 0.25rem 0.25rem 1rem; 
  background: var(--c-wt-gr01);
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-tit{
  display: flex; font-weight: 800; font-size: 1.125rem; 
}
.wm-sts-layer-tit.justify-between{align-items: center; justify-content: space-between;}
/* layerbox / wm-add-func */
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before{width: 1px; height: calc(100% - 1rem); left: 0.5rem; top: 50%; transform: translateY(-50%);}
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{width: 0.5rem; height: 1px; left: 0.5rem; bottom: 0.5rem;}

.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box::before,
.wm-status-theme-select .wm-status-map-popup-body>.wm-sts-layer-box::after{
  content: '';
  background-color: var(--c-wt-gr025); display: block;
  position: absolute;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box{
  flex-direction: column; position: relative; gap: 0.4rem; height: 0; overflow: hidden; transition: height .3s ease;
}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func.on{display: flex; height: max-content;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box:not(.wm-add-func){display:flex;}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box.wm-add-func:not(.on){display: none;}

.wm-status-theme-select .wm-sts-layer-box.wm-add-func::before,
.wm-status-theme-select .wm-sts-layer-box.wm-add-func::after{content: none;}
.wm-status-theme-select .wm-sts-layer-box.wm-add-func{padding: 0.5rem; background: var(--c-bk-gr15); margin: 0.5rem 0; border: 1px solid var(--c-wt-gr015);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label::before{content: ''; display: block; position: absolute; left: -0.5rem; top: 50%; width: 0.5rem; height: 1px; background: var(--c-wt-gr025);}
.wm-status-theme-select .wm-status-map-popup-body .wm-sts-layer-box label{
  display: flex; align-items: center; width: max-content; max-width: calc(100% - 1.5rem); position: relative;
  font-size: 1rem;
}

/* 레이어 -> 레이더 영상 -> 레이더 투명도/영상재생 */
.wm-layer-toggle-btn.on{transform: rotate(180deg);}
.wm-layer-toggle-btn{background: var(--c-bk-gr15); border: none; cursor: pointer; border-radius: 0.5rem; transform: rotate(0deg); transition: all .3s ease-in-out;}
.wm-sts-radar-time{ color: var(--c-normal);}
.wm-sts-radar-container .wm-sts-radar-time{display: block; text-align: right; padding: 0.4rem;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap{display: flex; gap: 0.25rem; justify-content: center;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button:not(.on):hover{background: var(--c-bluem8);}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button.on{background: var(--c-bluem6); opacity: 1;}
.wm-status-theme-select .wm-sts-radar-container .wm-playctrl-wrap button{
  cursor: pointer; transition: all .3s ease-in-out; background: var(--c-wt-gr015); border: none; border-radius: 0.2rem; opacity: 0.55;}
/* 레이더영상 투명도 조절 */
.wm-iput-rangecustom .wm-cont-box-body .wm-range-contbox{justify-content: flex-end;}

/* 레이더영상 플레이컨트롤 바 */
.wm-vdo-controlbar .wm-cont-box-body .wm-range-contbox{justify-content: space-between;}

/*-----------------------------------------------
  햔황판 메뉴 선택
-----------------------------------------------*/
/* 안내메뉴영역 */
body .wm-status_wrap header.wm-status-header .wm-menu-wrap{width: 100%; margin: 1rem 0;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu{width: 100%; border: 1px solid var(--c-sts-txt4); border-radius: var(--rem0_625); overflow: hidden;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a{
  display: flex; align-items: center; gap: var(--rem0_625); padding: 0.8125rem 0.75rem; font-size: var(--wm-status-txt-14px);
  color: var(--c-sts-txt4); text-decoration: none;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li:not(:last-of-type) a{border-bottom: 1px solid var(--c-wt-gr035);}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a svg{
  flex: none; width: 1.0625rem; height: 1.0625rem; fill: none; stroke: var(--c-sts-txt5); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a .move-arrow{
  margin-left: auto;}
body .wm-status_wrap header.wm-status-header .wm-mo-org{width: 100%; padding-top: 1rem; margin-bottom: 2rem; border-top: 1px solid var(--c-wt-gr035); }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item{margin-bottom: 0.875rem; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item > a{
  display: block; margin-bottom: 4px; font-size: var(--wm-status-txt-14px); font-weight: 700; color: var(--c-sts-txt3); text-decoration: none; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p{margin: 0 0 0.125rem; font-size: var(--wm-status-txt-14px); line-height: 1.6; color: var(--c-sts-txt5); }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p.tel{color: var(--c-sts-txt3); font-weight: 600;}
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p.tel a{color: inherit; text-decoration: none; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-copy{margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--c-wt-gr035);
  font-size: var(--wm-status-txt-14px); line-height: 1.6; color: var(--c-sts-txt4); }
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab.on::after{
  content: ''; position: fixed; left: -100%; top: 0; width: 100%; height: 100dvh; backdrop-filter: blur(99px);
  background: var(--c-bk-gr5); display: block; z-index: -6;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab.on{
    display: flex; top: 0; height: 100dvh; opacity: 1;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab{
  display: none; gap: var(--rem0_4); position: absolute; right: 0; top: -100%; opacity: 0; padding: 1.5rem; background-color: var(--c-information-10); backdrop-filter: blur(1rem); flex-wrap: wrap; transition: var(--wm-transition-normal);}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap{
  width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header{
  width: 100%; display: flex; justify-content: space-between;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header h4{
  display: flex; align-items: center; font-size: 1rem;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header .wm-sts-popup-close{
  width: 2rem; height: 2rem;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header .sz24.wm-sts-popup-close .wm-civdsb-icon{
  background-size: 30rem 30rem;}
/* 안내문구 */
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab-noti{
  width: 90%; margin: 1rem auto; font-size: 0.875rem; line-height: 1.2rem; color: var(--c-sts-txt3);}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-menu-wrap .wm-sts-subtit{
  display: flex; color: var(--c-sts-txt4); font-size: 0.875rem; font-weight: 800; height: 2rem; align-items: center;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-mo-org-foot{margin-top: auto;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-mo-org-foot img{display: block; width: 100%; max-width: 84%;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab button{padding: var(--rem0_25); background: var(--c-wt-gr01); border-style: solid; border-width: 0.01rem; border-color: transparent; color: var(--wm-status-txt-base); cursor: pointer;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab button.on{opacity: 1;  transition: var(--wm-transition-normal); border-color: var(--c-wt-gr05); background: var(--c-bluem6);}



}


/* ==========================================
  Mobile Landscape 
========================================== */
@media (orientation: landscape) and (max-width: 991px) and (max-height: 500px){

body .wm-status_wrap{
    max-width: 991px;
    min-width: 384px;
    min-height: 384px;
    max-height: 500px;
}
        

/* ===============================================
  header
===============================================*/
body .wm-status_wrap .wm-status-header-btn{display: none;}
body .wm-status_wrap header.wm-status-header .wm-status-map-control-setting{
  border: none;
  background: transparent;
}
body .wm-status_wrap header.wm-status-header{width: 100%; height: var(--rem4_2); position: relative; z-index: 150;}


/*----------------------------------------------------------
  햔황판 메뉴 선택
----------------------------------------------------------*/
/* 안내메뉴영역 */
body .wm-status_wrap header.wm-status-header .wm-menu-wrap{width: 100%; margin: 1rem 0;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu{width: 100%; border: 1px solid var(--c-sts-txt4); border-radius: var(--rem0_625); overflow: hidden;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a{
  display: flex; align-items: center; gap: var(--rem0_625); padding: 0.8125rem 0.75rem; font-size: var(--wm-status-txt-14px);
  color: var(--c-sts-txt4); text-decoration: none;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li:not(:last-of-type) a{border-bottom: 1px solid var(--c-wt-gr035);}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a svg{
  flex: none; width: 1.0625rem; height: 1.0625rem; fill: none; stroke: var(--c-sts-txt5); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
body .wm-status_wrap header.wm-status-header .wm-only-mo-menu li a .move-arrow{
  margin-left: auto;}
body .wm-status_wrap header.wm-status-header .wm-mo-org{width: 100%; padding-top: 1rem; margin-bottom: 2rem; border-top: 1px solid var(--c-wt-gr035); }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item{margin-bottom: 0.875rem; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item > a{
  display: block; margin-bottom: 4px; font-size: var(--wm-status-txt-14px); font-weight: 700; color: var(--c-sts-txt3); text-decoration: none; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p{margin: 0 0 0.125rem; font-size: var(--wm-status-txt-14px); line-height: 1.6; color: var(--c-sts-txt5); }
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p.tel{color: var(--c-sts-txt3); font-weight: 600;}
body .wm-status_wrap header.wm-status-header .wm-mo-org-item p.tel a{color: inherit; text-decoration: none; }
body .wm-status_wrap header.wm-status-header .wm-mo-org-copy{margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--c-wt-gr035);
  font-size: var(--wm-status-txt-14px); line-height: 1.6; color: var(--c-sts-txt4); }
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab.on::after{
  content: ''; position: fixed; left: -100%; top: 0; width: 100%; height: 100dvh; backdrop-filter: blur(99px);
  background: var(--c-bk-gr5); display: block; z-index: -6;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab.on{
    display: flex; top: 0; height: 100dvh; opacity: 1;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab{
  display: none; gap: var(--rem0_4); position: absolute; right: 0; top: -100%; opacity: 0; padding: 1.5rem; background-color: var(--c-information-10); backdrop-filter: blur(1rem); flex-wrap: wrap; transition: var(--wm-transition-normal);}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap{
  width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header{
  width: 100%; display: flex; justify-content: space-between;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header h4{
  display: flex; align-items: center; font-size: 1rem;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header .wm-sts-popup-close{
  width: 2rem; height: 2rem;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap>.wm-status-map-popup-header .sz24.wm-sts-popup-close .wm-civdsb-icon{
  background-size: 30rem 30rem;}
/* 안내문구 */
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab-noti{
  width: 90%; margin: 1rem auto; font-size: 0.875rem; line-height: 1.2rem; color: var(--c-sts-txt3);}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-menu-wrap .wm-sts-subtit{
  display: flex; color: var(--c-sts-txt4); font-size: 0.875rem; font-weight: 800; height: 2rem; align-items: center;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-mo-org-foot{margin-top: auto;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-mo-org-foot img{display: block; width: 100%; max-width: 84%;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab button{padding: var(--rem0_25); background: var(--c-wt-gr01); border-style: solid; border-width: 0.01rem; border-color: transparent; color: var(--wm-status-txt-base); cursor: pointer;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab>.wm-status-header-tab-wrap .wm-status-header-tab button.on{opacity: 1;  transition: var(--wm-transition-normal); border-color: var(--c-wt-gr05); background: var(--c-bluem6);}


.wm-status-header-tab button{
  padding: var(--rem0_25);
    background: var(--c-wt-gr01);
    border-style: solid; border-width: 0.01rem;
    border-color: transparent;
    color: var(--wm-status-txt-base);
    opacity: 0.35; cursor: pointer;
}
.wm-status-header-tab button.on{
  opacity: 1; 
  transition: var(--wm-transition-normal);
  border-color: var(--c-wt-gr05);
  background: var(--c-bluem6);
}

/* ===============================================
  main / section
===============================================*/

body .wm-status_wrap main{
    flex-direction: column;
}



/* ===============================================
  main content container
===============================================*/
body .wm-status_wrap .wm-status-content.on{display: block;}
body .wm-status_wrap .wm-status-content{
    display: none;
    width: 100%; height: 100%; padding: 1.25rem;
    position: absolute; bottom: 0; z-index: 5;
}

/* ===============================================
  map container
===============================================*/
body .wm-status_wrap .wm-status-map{width: 100%; height: 100%;}
/* map tool bar */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{
  top: var(--rem5_5); right: 1rem;
}


/*============================================
  map-control 
============================================*/
/* left - scale */
/* ------------
  map-control
------------*/
/* map-control bar */

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-left .wm-status-map-control-group-wrap{
  position: absolute; bottom: 100%;
  padding: 0.5rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-left .wm-status-map-control-group-wrap,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-left .wm-status-map-control-group-wrap .wm-status-map-control-group{
    flex-direction: column;
}

/* map-control -left */
/* map-control -right */
/* scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{    
    position: fixed; left: var(--rem1); bottom: 1rem;
}
/* right */
.wm-status-map-control-right>p>b{display: none;}
    


}