/* =============================================================

    Global Token = 실제 값(색상, 간격, 폰트 크기 등)의 저장소
    Alias Token = 그 값에 역할과 의미를 부여하는 중간 계층
    Specific(Component) Token = 버튼, 카드, 입력창 등 실제 컴포넌트가 사용하는 토큰 

=============================================================*/

/* global token */
:root{
/* ==================================================
   Global Color
================================================== */
--duration-fast: 150ms;
--duration-normal: 350ms;
--duration-slow: 550ms;

--wm-maincont-bg: linear-gradient(#12234A, #000000);
--wm-status-bg: linear-gradient(180deg, #12234A, #26538B);
--wm-sts-sub-bg: linear-gradient(45deg, #255087, #173153);

--c-bluem1: #ddecff;
--c-bluem2: #b7d6ff;
--c-bluem3: #8cbeff;
--c-bluem4: #5192ff;
--c-bluem5: #4972fe;
--c-bluem6: #3b60e0; /*primary 1*/
--c-bluem7: #3250be;
--c-bluem8: #243ea0;
--c-bluem9: #222f63;
--c-bluem10: #051140;

/* measure panel */
--c-pink-txt: #ff82c2;
--c-pink-bg: rgba(244, 114, 182, 0.2);
--c-pink-border: rgba(255, 130, 195, 0.5);
--c-pink-shadow: rgba(244, 114, 182, 0.15);

--c-ylw-txt: #ffdf5f;
--c-ylw-bg: rgba(255, 204, 0, 0.2);
--c-ylw-border: rgba(250, 204, 21, 0.5);

--c-green-txt: #77ebc4;
--c-green-bg: rgba(16, 185, 129, 0.2);
--c-green-border: rgba(60, 247, 185, 0.5);
--c-green-shadow: rgba(16, 185, 129, 0.15);

--c-blue-txt: #38bdf8;
--c-blue-bg: rgba(56, 189, 248, 0.2);
--c-blue-border: rgba(56, 189, 248, 0.5);
--c-blue-shadow: rgba(56, 189, 248, 0.15);

--c-purple-txt: #a078ff;
--c-purple-bg: rgba(139, 92, 246, 0.2);
--c-purple-border: rgba(165, 135, 255, 0.5);
--c-purple-shadow: rgba(139, 92, 246, 0.15);

--c-comshadow: rgba(0, 0, 0, 0.35);

/* wt opacity */
--c-wt-gr03: rgba(255, 255, 255, 0.03);
--c-wt-gr05: rgba(255, 255, 255, 0.05);
--c-wt-gr08: rgba(255, 255, 255, 0.08);
--c-wt-gr09: rgba(255, 255, 255, 0.09);
--c-wt-gr01: rgba(255, 255, 255, 0.1);
--c-wt-gr015: rgba(255, 255, 255, 0.15);
--c-wt-gr025: rgba(255, 255, 255, 0.25);
--c-wt-gr035: rgba(255, 255, 255, 0.35);
--c-wt-gr04: rgba(255, 255, 255, 0.4);
--c-wt-gr045: rgba(255, 255, 255, 0.45);
--c-wt-gr05: rgba(255, 255, 255, 0.5);
--c-wt-gr055: rgba(255, 255, 255, 0.55);
--c-wt-gr06: rgba(255, 255, 255, 0.6);
--c-wt-gr07: rgba(255, 255, 255, 0.7);
--c-wt-gr08: rgba(255, 255, 255, 0.8);
--c-wt-gr09: rgba(255, 255, 255, 0.9);
--c-wt: #ffffff;

/* bk opacity */
--c-bk: #000000;
--c-bk-gr1: rgba(0, 0, 0, 0.1);
--c-bk-gr15: rgba(0, 0, 0, 0.15);
--c-bk-gr2: rgba(0, 0, 0, 0.2);
--c-bk-gr3: rgba(0, 0, 0, 0.3);
--c-bk-gr35: rgba(0, 0, 0, 0.35);
--c-bk-gr4: rgba(0, 0, 0, 0.4);
--c-bk-gr5: rgba(0, 0, 0, 0.5);
--c-bk-gr55: rgba(0, 0, 0, 0.55);
--c-bk-gr6: rgba(0, 0, 0, 0.6);
--c-bk-gr7: rgba(0, 0, 0, 0.7);
--c-bk-gr8: rgba(0, 0, 0, 0.8);
--c-bk-gr85: rgba(0, 0, 0, 0.85);
--c-bk-gr9: rgba(0, 0, 0, 0.9);

/* txt */
--c-sts-txt1: #ffffff;
--c-sts-txt2: #f1f1f1;
--c-sts-txt3: #eef0f3;
--c-sts-txt4: #8a949e;
--c-sts-txt5: #6d7882;


/* gray */
--c-gr1: #f0f0f0;
--c-gr2: #dddddd;
--c-gr3: #cccccc;
--c-gr4: #999999;
--c-gr5: #777777;
--c-gr6: #666666;
--c-gr7: #444444;
--c-gr8: #222222;
--c-gr9: #111111;

/* ==================================================
   Size
================================================== */
/* rem */
--rem0_0125:0.0125rem;

--rem0_1:0.1rem;
--rem0_125:0.125rem;
--rem0_2:0.2rem;
--rem0_25:0.2rem;
--rem0_3:0.3rem;
--rem0_35:0.35rem;
--rem0_4:0.4rem;
--rem0_5:0.5rem;
--rem0_6:0.6rem;
--rem0_625:0.625rem;
--rem0_6875:0.6875rem;
--rem0_7:0.7rem;
--rem0_75:0.75rem;
--rem0_8:0.8rem;
--rem0_8125:0.8125rem;
--rem0_875:0.875rem;
--rem0_9375:0.9375rem;
--rem0_9:0.9rem;
--rem1: 1rem;
--rem1_1:1.1rem;
--rem1_125:1.125rem;
--rem1_2:1.2rem;
--rem1_25:1.25rem;
--rem1_3:1.3rem;
--rem1_4:1.4rem;
--rem1_5:1.5rem;
--rem1_6:1.6rem;
--rem1_7:1.7rem;
--rem1_8:1.8rem;
--rem1_9:1.9rem;
--rem2:2rem;
--rem2_1:2.1rem;
--rem2_2:2.2rem;
--rem2_3:2.3rem;
--rem2_4:2.4rem;
--rem2_5:2.5rem;
--rem2_6:2.6rem;
--rem2_7:2.7rem;
--rem2_8:2.8rem;
--rem2_9:2.9rem;
--rem3:3rem;


--rem4_2:4.2rem;
--rem5:5rem;
--rem5_5:5.5rem;
--rem6:6rem;
--rem40:40rem;



/* percent % */
--sts-p100: 100%;
--sts-p35: 35%;

/* ==================================================
   Semantic
================================================== */
/* 배경 */
--wm-header-bg: var(--wm-status-bg);
--wm-maincontent: var(--wm-maincont-bg);
--wm-popup-bg: var(--wm-status-bg);

/* primary */
--wm-status-primary: var(--c-bluem6);

/* 구조 */
--wm-status-header-pc: var(--rem40); /* pc */
--wm-status-header-mo: var(--sts-p100); /* mo */
--wm-status-cont-pc: var(--rem40); /* pc */
--wm-status-cont-mo: var(--sts-p100);  /* mo */
--wm-status-map-pc: calc(var(--sts-p100) - var(--rem40)); /* pc */
--wm-status-map-mo: var(--sts-p100); /* mo */

/* text size */
--wm-status-txt-8px: var(--rem0_5);
--wm-status-txt-10px: var(--rem0_625);
--wm-status-txt-11px: var(--rem0_6875);
--wm-status-txt-12px: var(--rem0_75);
--wm-status-txt-l3px: var(--rem0_8125);
--wm-status-txt-14px: var(--rem0_875);
--wm-status-txt-15px: var(--rem0_9375);
--wm-status-txt-16px: var(--rem1);
--wm-status-txt-18px: var(--rem1_125);
--wm-status-txt-20px: var(--rem1_25);

/* text color */
--wm-status-txt-base: var(--c-gr1);

/* font-weight */
--wm-sts-txt500: 500;
--wm-sts-txt600: 600;
--wm-sts-txt700: 700;
--wm-sts-txt800: 800;
--wm-sts-txt900: 900;

/* transition */
--wm-transition-fast: all var(--duration-fast) ease-in-out;
--wm-transition-normal: all var(--duration-normal) ease-in-out;
--wm-transition-slow: all var(--duration-slow) ease-in-out;

/* border */
--wm-sts-border100: var(--c-gr1);
--wm-sts-border15: var(--c-wt-gr015);
--wm-sts-border25: var(--c-wt-gr025);
--wm-sts-border35: var(--c-wt-gr035);
--wm-sts-border55: var(--c-wt-gr055);
--wm-sts-border80: var(--c-wt-gr08);

/* font */
--font-family-base: "Pretendard", sans-serif;
--font-family-en: "Montserrat", sans-serif;
}


body .wm-status_wrap,
body .wm-status_wrap main,
body .wm-status_wrap main section{width: 100%; height: 100%;}

body,
body .wm-status_wrap{min-height: auto;}
body .wm-status_wrap *button{font-size: 1rem;}
body .wm-status_wrap button:focus{outline: 2px dotted var(--wm-status-primary);}
body .wm-status_wrap .wm-civdsb-icon{display: block; width: 100%; height: 100%; background-image: var(--c-iconmap); background-repeat: no-repeat;}

body .wm-status_wrap *{font-family: var(--font-family-base);}

/* header 메뉴를 숨겼다가 노출하기 모바일에서  */
.wm-status-header-btn{
    position: fixed; left: 1rem; right: 1rem;
    width: max-content; z-index: 1; color: inherit;
}

/* radio */

/* 라디오 */
body .wm-status_wrap .comrdo{
    display: flex;
    align-items: center;
}

body .wm-status_wrap .comrdo input[type="radio"],
body .wm-status_wrap .comrdo span{
    vertical-align: middle;
}

body .wm-status_wrap .comrdo input[type="radio"]{
    appearance: none;
    margin: 0 0.3rem;
    border: max(2px, 0.1em) solid var(--c-wt-gr015);
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    transition: border 0.3s ease-in-out;
}

body .wm-status_wrap .comrdo input[type="radio"]:checked {
    border: 0.4em solid var(--c-bluem6);
}

body .wm-status_wrap .comrdo input[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted var(--c-bluem6);
}

body .wm-status_wrap .comrdo input[type="radio"]:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) var(--c-wt-gr015);
    cursor: pointer;
}

body .wm-status_wrap .comrdo span{
    margin-left: 0.625rem;
    font-weight: 500;
    color: var(--c-gr3);
    display: block;
}

body .wm-status_wrap .comrdo input[type="radio"]:hover + span {
    cursor: pointer;
}

body .wm-status_wrap .comrdo input[type="radio"]:disabled {
    background-color: var(--c-wt-gr015);
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

body .wm-status_wrap .comrdo input[type="radio"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}
/* -----------------------------------
    ● html
    <div class="wm-cont-box">
        <div class="wm-cont-box-header">
            <p class="wm-cont-tit">타이틀</p> 
            <span class="wm-sts-value">--.--%</span>
        </div>
        <div class="wm-cont-box-body">
            <input type="range" class="wm-sts-custom-range" min="0" max="100" value="50" aria-label="커스텀 레인지 예시">
        </div>
    </div>
    ----------------------------------- */     
.wm-cont-box{padding: 0.5rem; display: flex; flex-direction: column; gap: var(--rem0_4);}
/* header */
.wm-cont-box .wm-cont-box-header{display: flex; justify-content: space-between; font-size: inherit;}
/* body */
.wm-sts-layer-box{font-size: 0.875rem;}
.wm-range-contbox{display: flex; align-items: center;}
.wm-sts-value{ color: var(--c-wt);font-weight: 700; display: block; text-align: right;}   


/* input range custom */
.wm-sts-custom-range{width:100%; height:16px; padding:0; background:transparent; appearance:none; cursor:pointer;}
/* Track */
.wm-sts-custom-range::-webkit-slider-runnable-track{height:2px; border-radius:999px; background:var(--c-wt-gr04);}
/* Thumb */
.wm-sts-custom-range::-webkit-slider-thumb{appearance:none; width: var(--rem0_75); height: var(--rem0_75); margin-top:-0.3rem; border-radius: 50%;
    border: 1px solid var(--c-wt); background: var(--c-blue-txt); box-shadow:0.0625rem 0.0625rem 0.2rem var(--c-bk-gr35);
    transition: all .15s ease-in-out;}
.wm-sts-custom-range:hover::-webkit-slider-thumb{transform: scale(1.2);}
.wm-sts-custom-range:active::-webkit-slider-thumb{transform: scale(1.35);}

/* ===============================================
  header 헤더메뉴버튼 외 추가 2026-08-14
===============================================*/
body .wm-status_wrap {color: var(--wm-status-txt-base); transition: var(--wm-transition-normal);}
body .wm-status_wrap header.wm-status-header{
    position: fixed; top: 0; left: 0; z-index: 150;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--rem1_25);
    font-size: var(--rem1_25);    
    background: var(--wm-header-bg);
    color: var(--wm-status-txt-base);
}
/* left */
body .wm-status_wrap header.wm-status-header h1{font-size: 1.25rem;} /*2026-08-14 font-size 수정*/
body .wm-status_wrap header.wm-status-header h1 a{display: block; font-size: inherit;}
body .wm-status_wrap header.wm-status-header .wm-status-header-left h1>a>small{
    display: block; font-size: var(--rem0_75); color: var(--c-bluem2);}
body .wm-status_wrap header.wm-status-header .wm-status-header-left h1>a>span{font-size: 1.125rem;}

/* 2026-08-14 header menu */
body .wm-status_wrap header.wm-status-header .wm-status-header-left *{box-sizing: border-box;}
body .wm-status_wrap header.wm-status-header .wm-status-header-left h1{display: flex; align-items: center;}
/* 헤더메뉴 버튼 */
body .wm-status_wrap header.wm-status-header .wm-status-header-left h1 button.wm-civdsb-viewmenu-btn{
    margin: 0 0.5rem; background-color: transparent;
    border: 0.025rem solid var(--c-border35); border-radius: 9rem; position: relative;
}
body .wm-status_wrap header.wm-status-header .wm-status-header-left h1 button.wm-civdsb-viewmenu-btn>i{
    transition: all .3s ease-in-out; cursor: pointer;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg);
}
body .wm-status_wrap header.wm-status-header .wm-status-header-left h1 button.wm-civdsb-viewmenu-btn.on>i{
    transform: translate(-50%, -50%) rotate(-180deg);
}
/* right */
body .wm-status_wrap header.wm-status-header .wm-status-header-right{display: flex; align-items: center;}
body .wm-status_wrap header.wm-status-header .wm-status-header-right .wm-status-header-tab button{font-weight: 800; cursor: pointer;}

/* ===============================================
  전체 모달 팝업 추가 2026-08-14
===============================================*/
/* 전체 모달 팝업 공통 */
.wm-status_modal-wrap.on{
    width: 100%; height: 100%; position: fixed; z-index: 999;
    background: var(--c-bk-gr5);
}
.wm-status_modal-wrap.on .wm-status_modal-popup.on{display: block;}
.wm-status_modal-wrap .wm-status_modal-popup{
    display: none;
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: var(--c-footerbg);
    border: 0.0625rem solid var(--c-border35);
    border-radius: 0.625rem;
    box-shadow: 0.3125rem 0.3125rem 0.625rem var(--c-border25);
    backdrop-filter: blur(0.625rem);
}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header{
    display: flex; justify-content: space-between;
    position: relative;
    height: 2.5rem;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.625rem;
    margin-bottom: 1rem;
    border-bottom: 0.0625rem solid var(--c-border35);
    font-size: 1rem;
}
/* common close X type2 / icon, txticon */
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-txtclose-btn,
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-close-btn{
    display: flex; align-items: center; cursor: pointer; background-color: transparent;
    border: none; color: var(--c-txt); border-radius: var(--rem2);}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-txtclose-btn > span,
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-close-btn{
  transform: rotate(0deg);}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-txtclose-btn{
  width: fit-content; position: relative;}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-txtclose-btn > span{
  margin-right: 0.3125rem;}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header .wm-civdsb-txtclose-btn::before{
  content: ""; display: block; width: 0; position: absolute; bottom: -0.0625rem; left: -10%; height: var(--rem0_1); background: var(--c-bluem5); opacity: 0;}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-header h3{
  display: flex; align-items: center; font-size: inherit; font-weight: 800; white-space: nowrap;}
.wm-status_modal-wrap .wm-status_modal-popup .modal-pop-body{
  height: calc(100% - 3.5rem); overflow: hidden; padding: 0 1rem;}
body .wm-status_wrap .wm-civdsb-txtclose-btn{
  width: fit-content; position: relative;}
body .wm-status_wrap .wm-civdsb-txtclose-btn, body .wm-status_wrap .wm-civdsb-close-btn{
  cursor: pointer; background-color: transparent; color: var(--c-txt); border-radius: var(--rem2);}

/* ===============================================
  헤더: 물모아 컨텐츠 메뉴 이동 팝업 wm-civdsb-viewmenu-popup 2026-08-14
===============================================*/
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup.on{display: block;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup{padding: 1.25rem; display: none;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body>div{display: flex; gap: var(--rem0_4); flex-wrap: wrap;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .wm-view-menu:active,
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .wm-view-menu:focus,
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-main-menu-list .wm-view-menu.on,
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .wm-view-menu:hover{
    opacity: 1; background: var(--c-bluem6); border-color: var(--c-bluem6);}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu{
    padding: 0.5rem 1rem; border-radius: 0.5rem; flex: 1 1 0; color: var(--c-wt);
    display: flex; align-items: center; border: 0.0625rem solid var(--c-border6);
    justify-content: space-between; opacity: 0.85;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-main-menu-list .wm-view-menu{width: 100%;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-main-menu-list{flex-direction: column;}
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-main-menu-list,
.wm-status_modal-wrap .wm-civdsb-viewmenu-popup .modal-pop-body .wm-view-menu-wrap .wm-view-menu-list{
    display: flex; flex-wrap: wrap; width: 100%; gap: 0.25rem;
}



/* ===============================================
  main /section
===============================================*/
body .wm-status_wrap main.on{display: flex;}
body .wm-status_wrap main:not(.on),
body .wm-status_wrap main:not(.on)>section{display: none !important;} /*2026-08-24 퍼블리싱상의 수정 필요*/
body .wm-status_wrap main{position: relative; width: 100%; height: 100%;}
body .wm-status_wrap main section{overflow: hidden; color: var(--wm-status-txt-base);}
body .wm-status_wrap main section>h2{display: none;}




/* ===============================================
  main content container
===============================================*/
body .wm-status_wrap main .wm-status-content{
    background: var(--wm-maincontent);
}

body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container{
    width: 100%; height: 100%;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-detail{
    display: none; width: 100%; height: calc(100% - (40% + 3.75rem)); padding: 1rem 0 0; margin-bottom: 1rem;
}
body .wm-status_wrap main .wm-status-content .wm-status-comm-tab-container .wm-status-comm-tab-detail.on{
    display: block;
}


/* 메인 탭 */
body .wm-status_wrap .wm-status-comm-tab-title button{font-weight: 800;}
body .wm-status_wrap main .wm-status-comm-tab-container .wm-status-comm-tab-title{
    width: 100%; height: max-content; min-height: 2.75rem; display: flex; padding: 0.125rem;
}
body .wm-status_wrap main .wm-status-comm-tab-container .wm-status-comm-tab-title button{
    font-size: 1rem; border-radius: 0.25rem;
    flex: 1 1 0; min-width: 0; min-height: 100%; background: transparent; color: var(--c-sts-txt1); border: none;}
.tab-tit-item:hover,
.tab-tit-item.on{opacity: 1;}
.tab-tit-item{position: relative; opacity: 0.5;}
.tab-tit-item:hover::before,
.tab-tit-item.on::before{opacity: 1; width: 100%;}
.tab-tit-item:hover::before{background: var(--c-wt-gr05);}
.tab-tit-item.on::before{background: var(--c-wt);}
.tab-tit-item::before{
    content: ''; position: absolute; width: 0; height: 3px; bottom: 0;
    left: 0; opacity: 0;
    transition: var(--wm-transition-normal);
}



/* 탭별 공통 알림리스트 */
.wm-status-comm-tab-detail .wm-alert-list ol{display: flex;width: 100%; gap: 0.25rem;}
.wm-status-comm-tab-detail .wm-alert-list ol>li:hover{
    background-color: rgba(255,255,255,0.2);
    transition: var(--wm-transition-normal);

}
.wm-status-comm-tab-detail .wm-alert-list ol>li{
    min-width: 0; flex: 1 1 0;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 1rem;
    background-color: rgba(255,255,255,0.1);
    transition: var(--wm-transition-normal);
}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button{
    width: 100%; height: 100%; background-color: transparent;
    border: none;
    display: flex; flex-direction: column;
    gap: 0.25rem; cursor: pointer;
}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button:not(.wm-item-left-cont){
    align-items: center; justify-content: center;
    padding: 0.5rem 0;
}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button.wm-item-left-cont{
    align-items: flex-start; justify-content: center;
    padding: 0.5rem 0.625rem; text-align: left; font-size: 1.0625rem;
}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button.wm-item-left-cont>strong{
    margin-left: auto;
}

.wm-status-comm-tab-detail .wm-alert-list ol>li>button *:not(strong){display: block;}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong{
    display: flex; align-items: baseline; text-decoration: underline;
}

.wm-status-comm-tab-detail .wm-alert-list ol>li>button>span{
    color: rgba(255, 255, 255, 0.6); font-size: 0.875rem;
}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button>b{
    color: var(--c-wt); font-size: 0.8125rem; /*2026-08-21 font-size 추가*/
}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button>b>small{
}
.wm-status-comm-tab-detail .wm-alert-list ol>li>button>strong .wm-item-unit{
}

/* 공통검색창 2026-08-21 border-radius 추가 */
body .wm-status_wrap .wm-status-search-container{display: flex; margin: 1rem 0; width: 100%;}
body .wm-status_wrap .wm-status-search-container legend{display: none;}
body .wm-status_wrap .blind{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
body .wm-status_wrap .wm-status-search-container form,
body .wm-status_wrap .wm-status-search-container .wm-status-search-box{display: flex; width: 100%;}
body .wm-status_wrap .wm-status-search-container .wm-status-search-box input[type="search"]:focus{outline: 0.125rem dotted var(--c-bluem6);}
body .wm-status_wrap .wm-status-search-container .wm-status-search-box input[type="search"]{
    font-size: 0.875rem; border-radius: var(--rem0_4) 0 0 var(--rem0_4);
    width: calc(100% - 6rem); padding: 0 0.625rem; background: transparent; border-style: solid none solid solid; border-width: 0.01rem; 
    border-color: var(--c-wt-gr035); color: var(--c-wt);}
body .wm-status_wrap .wm-status-search-container .wm-status-search-box button{width: 6rem; border: 1px solid var(--c-bluem6); background: var(--c-bluem5); color: var(--c-wt);}
body .wm-status_wrap .wm-status-search-container .wm-status-search-box button:hover{background: transparent; transition: var(--wm-transition-normal); cursor: pointer;}






/* 1. 수위컨텐츠/녹조컨텐츠 영역 2026-08-21 */
.wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol li:nth-child(3) strong,
.wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-alert-list ol li:nth-child(2) strong{opacity: 0.7;}
.wm-status-comm-tab-detail.wm-sts-cont-algae .wm-alert-list ol li:nth-child(1) strong,
.wm-status-comm-tab-detail.wm-sts-cont-algae .wm-alert-list ol li:nth-child(2) strong,
.wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol li:nth-child(3) strong,
.wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol li:nth-child(4) strong,
.wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol li:nth-child(5) strong,
.wm-status-comm-tab-detail.wm-sts-cont-waterlevel .wm-alert-list ol li:nth-child(1) strong{color: var(--c-wt);}
.wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-alert-list ol li:nth-child(3) strong,
.wm-status-comm-tab-detail.wm-sts-cont-algae.wm-sts-algae-nomeasure .wm-alert-list ol li:nth-child(4) strong,
.wm-status-comm-tab-detail.wm-sts-cont-waterlevel .wm-alert-list ol li:nth-child(2) strong{color: var(--c-statusp-lv1);}
.wm-status-comm-tab-detail.wm-sts-cont-waterlevel .wm-alert-list ol li:nth-child(3) strong{color: var(--c-statusp-lv2);}
.wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-alert-list ol li:nth-child(4) strong,
.wm-status-comm-tab-detail.wm-sts-cont-waterlevel .wm-alert-list ol li:nth-child(4) strong{color: var(--c-statusp-lv3);}
.wm-status-comm-tab-detail.wm-sts-cont-algae:not(.wm-sts-algae-nomeasure) .wm-alert-list ol li:nth-child(5) strong,
.wm-status-comm-tab-detail.wm-sts-cont-waterlevel .wm-alert-list ol li:nth-child(5) strong{color: var(--c-statusp-lv4);}

/* 2. 댐 컨텐츠 영역 */
.wm-status-comm-tab-detail.wm-sts-cont-dam{}
.wm-status-comm-tab-detail.wm-sts-cont-dam .wm-alert-list ol li:nth-child(1) strong{color: var(--c-blue-txt);}
.wm-status-comm-tab-detail.wm-sts-cont-dam .wm-alert-list ol li:nth-child(2) strong{color: var(--c-statusp-lv4);}
.wm-status-comm-tab-detail.wm-sts-cont-dam .wm-alert-list ol li:nth-child(3) strong{color: var(--c-purple-txt);}
.wm-status-comm-tab-detail.wm-sts-cont-dam .wm-alert-list ol li:nth-child(4) strong{color: var(--c-ylw-txt);}
.wm-status-comm-tab-detail.wm-sts-cont-dam .wm-alert-list ol li:nth-child(5) strong{color: var(--c-pink-txt);}

/* 3. 보 컨텐츠 영역 */
.wm-status-comm-tab-detail.wm-sts-cont-weir{}
.wm-status-comm-tab-detail.wm-sts-cont-weir .wm-alert-list ol li:nth-child(1) strong{color: var(--c-blue-txt);}
.wm-status-comm-tab-detail.wm-sts-cont-weir .wm-alert-list ol li:nth-child(2) strong{color: var(--c-statusp-lv4);}
.wm-status-comm-tab-detail.wm-sts-cont-weir .wm-alert-list ol li:nth-child(3) strong{color: var(--c-purple-txt);}
.wm-status-comm-tab-detail.wm-sts-cont-weir .wm-alert-list ol li:nth-child(4) strong{color: var(--c-ylw-txt);}
.wm-status-comm-tab-detail.wm-sts-cont-weir .wm-alert-list ol li:nth-child(5) strong{color: var(--c-pink-txt);}
/* 4. 누적강수 영역 */
.wm-status-comm-tab-detail.wm-sts-cont-cumulativerainfall{}
.wm-status-comm-tab-detail.wm-sts-cont-cumulativerainfall .wm-alert-list ol li:nth-child(1) strong{color: var(--c-wt);}
.wm-status-comm-tab-detail.wm-sts-cont-cumulativerainfall .wm-alert-list ol li:nth-child(2) strong{color: #87D9FF;}
.wm-status-comm-tab-detail.wm-sts-cont-cumulativerainfall .wm-alert-list ol li:nth-child(3) strong{color: #FFF26F;}
.wm-status-comm-tab-detail.wm-sts-cont-cumulativerainfall .wm-alert-list ol li:nth-child(4) strong{color: #F65E67;}
.wm-status-comm-tab-detail.wm-sts-cont-cumulativerainfall .wm-alert-list ol li:nth-child(5) strong{color: #C23EFF;}
/* 그래프 영역 */

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 .wm-status-graph-guide{
    width: 80%; height: 100%; padding: 0 2.75rem; display: flex; flex-direction: column;
    justify-content: center; align-items: center; font-size: 0.875rem; color: var(--c-wt-gr06);} /*2026-09-04 padding 추가*/
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 .wm-status-graph-guide small{
    display: block; font-size: inherit;}
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 .wm-status-graph-guide .nodata-img{
    display: block; /* [2026-08-13] 퍼블 경로 /assets/images/ → swd 경로로 치환(재납품 시 재적용) */
background-image: url("/swd/resources/images/no-data-img.png"); width: 3.75rem; height: 3.75rem; background-repeat: no-repeat; background-size: contain; margin-bottom: 0.5rem;}



/* ===============================================
  map container
===============================================*/
body .wm-status_wrap main .wm-status-map{
    /* 임시 */
    background: lightslategrey; position: relative;
}

/* ============================================================
    wm-status-map-popup 지도 팝업 공통
 ============================================================*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on.wm-pop-fold{display: block; z-index: 1;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.on:not(.wm-pop-fold){display: block; z-index: 2;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup{
    display: none;
    position: absolute; background: var(--wm-sts-sub-bg);
    padding: var(--rem0_6875); box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.15);
    border-radius: var(--rem0_4);
    border: 1px solid rgba(255,255,255,0.25); 
}

/* 공용 테이블 */
main .wm-sts-table-wrap{position: relative; overflow: auto;}
main .wm-sts-table-wrap table{width: 100%;}
main .wm-sts-table-wrap table thead{position: sticky; left: 0; top: 0; z-index: 2;}
main .wm-sts-table-wrap table tr span{display: flex; width: 100%; align-items: baseline; padding: 0.25rem; font-size: 0.9375rem;}
main .wm-sts-table-wrap table tr span.align-center{align-items: center;}
main .wm-sts-table-wrap table tr span.justify-between{justify-content: space-between;}
main .wm-sts-table-wrap table tr span.justify-flexend{justify-content: flex-end;}
main .wm-sts-table-wrap table tr span.justify-center{justify-content: center;}
main .wm-sts-table-wrap table tr span *{display: block;}
main .wm-sts-table-wrap table tr .wm-thead-unit{margin: 0 0.125rem;}
main .wm-sts-table-wrap table tr .wm-thead-unit::before{content: '(';}
main .wm-sts-table-wrap table tr .wm-thead-unit::after{content: ')';}
main .wm-sts-table-wrap table thead tr th span a,
main .wm-sts-table-wrap table tbody tr th span a{font-weight: var(--wm-sts-txt900);}
main .wm-sts-table-wrap table thead tr th{
    border-right: 1px solid var(--c-wt-gr03); border-bottom: 1px solid var(--c-wt-gr03);
}
.wm-sts-table-wrap table tbody tr th,
.wm-sts-table-wrap table tbody tr td:not(:last-of-type){border-right: 1px solid var(--c-wt-gr03);}
.wm-sts-table-wrap table tbody tr:first-of-type{border-top: 2px solid rgba(255, 255, 255, 0.35);}
.wm-sts-table-wrap table tbody tr:not(:last-of-type){border-bottom: 1px solid var(--c-wt-gr03);}
.wm-sts-table-wrap table tbody tr:nth-child(2n+1){background-color: rgba(0, 0, 0, 0.2);}
.wm-sts-table-wrap table tbody tr th:hover,
.wm-sts-table-wrap table tbody tr td:hover{background-color: rgba(135, 206, 250, 0.1);}
.wm-sts-table-wrap table tbody tr .gap0_4{gap: var(--rem0_4);}
.wm-sts-table-wrap table .txt-center{text-align: center;}
.wm-sts-table-wrap table .txt-left{text-align: left;}
.wm-sts-table-wrap table .txt-right{text-align: right;}

/* 공통뱃지 */
.wm-sts-badge{
    display: flex; padding: var(--rem0_1) 0.2rem; border-radius: 0.3rem;
    border-style: solid; border-width: 0.05rem; font-size: 0.8125rem; /*2026-08-21 font size 추가*/
}

.wm-sts-badge.btit{border-color: var(--c-blue-border); color: var(--c-wt); background-color: var(--c-bluem5); padding: var(--rem0_1) var(--rem0_4) var(--rem0_1) 0.2rem;}
.wm-sts-badge.green{border-color: var(--c-green-border); color: var(--c-green-txt); background-color: var(--c-green-bg);}
.wm-sts-badge.blue{border-color: var(--c-blue-border); color: var(--c-blue-txt); background-color: var(--c-blue-bg);}
.wm-sts-badge.pink{border-color: var(--c-pink-border); color: var(--c-pink-txt); background-color: var(--c-pink-bg);}
.wm-sts-badge.yellow{border-color: var(--c-ylw-border); color: var(--c-ylw-txt); background-color: var(--c-ylw-bg);}
.wm-sts-badge.purple{border-color: var(--c-purple-border); color: var(--c-purple-txt); background-color: var(--c-purple-bg);}
.wm-sts-badge.none{color: var(--c-wt); opacity: 0.6; border-color: transparent;}
.wm-sts-badge.default{border-color: var(--c-wt-gr03); color: var(--c-wt); background-color: rgba(0,0,0,0.25);}
.wm-sts-badge.interest{border-color: #00a400; background-color: rgba(117, 200, 104, 0.1); color: var(--c-statusp-lv1);}
.wm-sts-badge.caution{border-color: #ffd66e; background-color:rgba(255, 255, 161, 0.1); color: var(--c-statusp-lv2);}
.wm-sts-badge.alert{border-color: #ff7b00; background-color:rgba(255, 146, 100, 0.1); color: var(--c-statusp-lv3);}
.wm-sts-badge.danger{border-color: #d60002; background-color:rgba(243, 93, 106, 0.1); color: var(--c-statusp-lv4);}

.wm-value-change{font-size: 0.8rem;} /* 2026-08-21 font-size 추가*/
.wm-value-change::after{content: ')';}
.wm-value-change:not(.increase,.decrease){opacity: 0.75;}
.wm-value-change:not(.increase,.decrease)::before{content: '(';}
.wm-value-change.increase::before{content: '(▲';}
.wm-value-change.increase{color: var(--c-statusp-lv4);}
.wm-value-change.decrease::before{content: '(▼';}
.wm-value-change.decrease{color: var(--c-bluem4);}
.wm-val-time{opacity: 0.75;}



/*======================
  1-전체 발령현황 / 2-수계별 지도팝업
======================= */

body .wm-status_wrap .wm-status-map .wm-status-flood-alert .wm-status-map-popup-header .ico-btn{
 border: none; background-color: transparent; cursor: pointer;
}

body .wm-status_wrap .wm-status-map .wm-status-comm-tab-detail{display: none;}
body .wm-status_wrap .wm-status-map .wm-status-comm-tab-detail.on{display: block;}

/* 1-전체 발령현황 */
/* 너비100 */
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-status-comm-tab-container,
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-status-comm-tab-container .wm-status-comm-tab-title li button,
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 thead th span a{width: 100%;}
/* 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,
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-status-comm-tab-container{
  display: flex; align-items: center;}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup.wm-status-flood-alert .wm-status-map-popup-header{width: 100%; justify-content: space-between;}
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-status-comm-tab-container .wm-status-comm-tab-title li{flex: 1 1 0;}

/* 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{
    border-style: solid none solid none; border-width: 2px 0 1px 0; border-color: var(--c-wt-gr05);}
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 thead th:last-child{border-right: none;}
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 thead th span{
  flex-direction: column; height: 100%;}

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{vertical-align: middle;}
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{
  text-decoration: underline; text-align: right; margin-left: auto; color: inherit;}
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.font-wt600{font-weight: 600;}
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.font-wt800{font-weight: 800;}
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.or{
  color: var(--c-statusp-lv3); font-weight: var(--wm-sts-txt800);}
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.yw{
  color: var(--c-statusp-lv2); font-weight: var(--wm-sts-txt800);}
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.gr{
  color: var(--c-statusp-lv1); font-weight: var(--wm-sts-txt800);}
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.rd{
  color: var(--c-statusp-lv4); font-weight: var(--wm-sts-txt800);}
/* 2-수계 */
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.sts-int{
  color: var(--c-statusp-lv1);
}
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.sts-cau{
  color: var(--c-statusp-lv2);
}
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.sts-warn{
  color: var(--c-statusp-lv3);
}
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.sts-crtic{
  color: var(--c-statusp-lv4);
}




/*================================================
    map-control bar
=================================================*/
body .wm-status_wrap .wm-status-map .wm-status-map-canvas{width: 100%; height: 100%; position: relative;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar{position: fixed;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar button{
    margin-bottom: 0.25rem; border: none; border-radius: 0.5rem;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar button{
  background: var(--c-bluem8); cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar button:focus,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar button:hover,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-toolbar button.on{background: var(--c-bluem6);}

/* 지도 팝업 공통 설정 */
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{
    display: flex; align-items: center;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-header h4{font-size: 1.125rem; font-weight: 800; gap: var(--rem0_4);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-status-map-popup-body{position: relative;}

body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-sts-fold-btn,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-sts-popup-close{
    background: transparent; border: none; position: absolute;
    cursor: pointer;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-sts-popup-close{transition: var(--wm-transition-normal);}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-sts-popup-close{
    top: 1rem; right: 1rem; border-radius: 999px;
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-sts-popup-close:hover{
    transform: rotate(180deg);
}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-popup .wm-sts-subtit{
    display: block;
}

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

/* --------------------------------
  left - scale 축척
-------------------------------- */
/* left - scale */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-scale>span{
    display: block; padding: 0 var(--rem2); width: max-content; height: var(--rem1_25);
    background: rgba(73, 115, 254, 0.35);
    border-style: none solid solid solid; border-width: var(--rem0_0125);
    border-color: var(--c-wt); backdrop-filter: blur(var(--rem1));
    color: var(--c-wt);
    font-size: 0.85rem;
}

/* --------------------------------
  map-control 지도설정
-------------------------------- */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-wrap .wm-status-map-control{
    background: var(--wm-maincontent); backdrop-filter: blur(1rem);}
/* common */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-left,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-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 .wm-status-map-control-right-auto_refresh label,
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 ul,
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 ol,
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-group-wrap .wm-status-map-control-group .wm-btn-toggle span{
    display: flex; align-items: center;
}

/* 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{
    cursor: pointer; border-radius: var(--rem0_4);
}
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:hover{
    background: var(--c-bluem6); border-color: var(--c-bluem6); transition: .3s;}
/* 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 .wm-status-map-control-group{
    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 .wm-btn-toggle{
    display: inline-flex; cursor: pointer;}
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-btn-toggle input{
    position: absolute; opacity: 0; pointer-events: none;}
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-btn-toggle span{
    justify-content: center; border: 1px solid var(--c-wt); border-radius: 0.25rem; background: var(--c-wt-gr025); color: var(--c-wt); backdrop-filter: blur(1rem); transition: .3s;}
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-btn-toggle:hover span{
    border-color: var(--c-bluem5);}
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-btn-toggle input:checked + span{
    background: var(--c-bluem5); border-color: var(--c-bluem5); color: var(--c-wt);}

/* map-control -right */
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-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{gap: 0.5rem;}
body .wm-status_wrap .wm-status-map .wm-status-map-canvas .wm-status-map-control-right .wm-status-map-control-right-auto_refresh .wm-status-map-control-setting{
    border: none; background: var(--c-bluem6); border-radius: 0.25rem;}


/* 버튼 비활성화 */
.wm-sts-prev-btn:disabled,
.wm-sts-next-btn:disabled,
.wm-sts-prev-btn.disabled,
.wm-sts-next-btn.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* =============================
   input range custom
============================= */

.wm-sts-custom-range{width:100%; padding:0; background:transparent; appearance:none; cursor:pointer;}
/* Track */
.wm-sts-custom-range::-webkit-slider-runnable-track{border-radius: 99rem; background:var(--c-wt-gr04);}
/* Thumb */
.wm-sts-custom-range::-webkit-slider-thumb{appearance:none; border-radius: 50%;
    border: 1px solid var(--c-wt); background: var(--c-blue-txt); box-shadow:0.0625rem 0.0625rem 0.2rem var(--c-bk-gr35);
    transition: all .15s ease-in-out;}
.wm-sts-custom-range:hover::-webkit-slider-thumb{transform: scale(1.2);}
.wm-sts-custom-range:active::-webkit-slider-thumb{transform: scale(1.35);}

@media (min-width: 768px){

    /* =============================
    input range custom
    ============================= */
    .wm-sts-custom-range{height: 1rem;}
    /* Track */
    .wm-sts-custom-range::-webkit-slider-runnable-track{height: 0.125rem;}
    /* Thumb */
    .wm-sts-custom-range::-webkit-slider-thumb{width: var(--rem0_75); height: var(--rem0_75); margin-top:-0.3rem;}    
}
@media (max-width: 767.98px){

    /* =============================
    input range custom
    ============================= */
    .wm-sts-custom-range{height: var(--rem2);}
    /* Track */
    .wm-sts-custom-range::-webkit-slider-runnable-track{height: 0.25rem;}
    /* Thumb */
    .wm-sts-custom-range::-webkit-slider-thumb{width: 1.25rem; height: 1.25rem; margin-top: -0.5rem;}
}