a{text-decoration: none;font-family: 'Pretendard';}
input{font-family: 'Pretendard';}
textarea{font-family: 'Pretendard';}
::placeholder{font-family: 'Pretendard';}
*{box-sizing: border-box;margin: 0;padding: 0;font-family: 'Pretendard';}
*::-webkit-scrollbar{width: 3px;height: 8px;background-color: #D9E3F1;border-radius: 100px;}
*::-webkit-scrollbar-thumb{background-color: #1b72d6;border-radius: 100px;}
ul,ol,li{margin: 0;padding: 0;list-style: none;}
button{cursor: pointer; font-family: 'Pretendard';background-color: transparent;border: 0;}

select{appearance: none;width: 100%;background-image: url('/img/chevron-down.png');background-repeat: no-repeat;background-size: 14px;background-position: calc(100% - 10px) center;cursor: pointer;color: #666;background-color: #fff;}

select,input{border: 1px solid #D9E3F1;border-radius: 10px;width: 100%;height: 36px;background-color: #fff;padding: 0 10px;font-size: 14px;color: #000;transition: 0.2s;box-shadow: inset 0 0 16px rgba(43, 144, 83, 0.0);}
select::placeholder,
input::placeholder{color: #707070;}
textarea{border: 1px solid #D9E3F1;border-radius: 10px;width: 100%;min-height: 150px;padding: 10px;}

input:focus,
select:focus,
textarea:focus{
    outline: none;
    border: 1px solid #1b72d6;
    box-shadow: inset 0 0 16px rgba(0, 157, 236, 0.1);
}

li input{width: 100%;height: 26px;border-radius: 8px;font-size: 12px;padding: 0 5px;}
li select{width: 100%;height: 26px;border-radius: 8px;font-size: 12px;padding: 0 5px;}

html{width: 100vw;height: 100vh;}/*0212*/
body{width: 100%;height: 100%;}

.logo{display: flex;flex-direction: column;gap: 10px;align-items: center;margin-bottom: 32px;}
.logo>img{display: block;height: 50px;width: auto;}
.logo>span{font-weight: 500;font-size: 16px;color: #565656;}

.auto-login{}
.check-label{display: flex;align-items: center;margin-bottom: 32px;}
.check-label>input{display: none;}
.check-label>label{display: flex;align-items: center;gap: 10px;font-size: 16px;font-weight: 500;color: #000;cursor: pointer;transition: 0.2s;}
.checkbox{border: 1px solid #D9E3F1;border-radius: 5px;width: 18px;height: 18px;transition: 0.2s;display: flex;align-items: center;justify-content: center;}
.checkbox>svg{width: 14px;height: 14px;transition: 0.2s;color: #fff;opacity: 0;margin-left: -0px;}

.check-label>input[id="check"] + label{;}
.check-label>input[id="check"]:checked + label{color: #1b72d6;}
.check-label>input[id="check"]:checked + label .checkbox{background-color: #1b72d6;border-color: #1b72d6;}
.check-label>input[id="check"]:checked + label .checkbox>svg{opacity: 1;}

.login-btn{width: 100%;}
.login-btn>button{width: 100%;display: flex;align-items: center;justify-content: center;height: 40px;border-radius: 100px;background-color: #1b72d6;transition: 0.2s;color: #fff;font-size: 16px;font-weight: 500;}
.login-btn>button:hover{filter: brightness(0.8);}

@media (max-width: 1024px) {
    .login-btn>button:hover{filter: brightness(1);}
    .login-btn>button:focus{filter: brightness(0.8);}
}

.login-section{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background-color: #F8FAFC;flex-direction: column;gap: 64px;}
.login-form{width: 100%;max-width: 480px;background-color: transparent;border-radius: 24px;padding: 64px 32px 32px 32px;transition: 0.8s;border: 1px solid transparent;}
.login-form.on{box-shadow: 0 0 256px rgba(27, 114, 214, 0.2);background-color: #fff;border-color: #D9E3F1;}
.login-form>p{font-size: 42px;color: #000;font-weight: 600;margin-bottom: 32px;}
.login-input{display: flex;flex-direction: column;gap: 5px;margin-bottom: 24px;width: 100%;}
.login-input>p{font-size: 14px;font-weight: 600;color: #000;}
.input-wrap{width: 100%;}
.input-wrap>input{width: 100%;height: 40px;border-radius: 10px;border: 1px solid #D9E3F1;padding: 0 10px;font-size: 16px;color: #000;}
.input-wrap>input:focus{border-color: #1B72D6;}

.main-section{padding: 32px 32px 32px 0;width: 100%;height: 100%;display: flex;background-color: #F8FAFC;align-items: flex-start;gap: 32px;}
.menu-wrap{width: 240px;flex-shrink: 0;max-height: 100%;display: flex;flex-direction: column;padding: 16px 0;border-radius: 0 16px 16px 0;border: 1px solid #D9E3F1;border-left: 0;background-color: #fff;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.05);gap: 16px;}
.profile{padding: 0 16px;}
.user-info{border-radius: 10px;background-color: #F1F5FB;display: flex;gap: 10px;padding: 10px;align-items: center;justify-content: space-between;}
.user{width: 36px;height: 36px;border-radius: 100%;overflow: hidden;background-color: #fff;flex-shrink: 0;display: none;}
.user>svg{width: 100%;height: 100%;color: #707070;}
.name{display: flex;gap: 5px;flex-direction: column;width: 100%;}
.name>p{display: flex;gap: 5px;color: #121212;font-size: 16px;font-weight: 600;}
.name>p>span{font-size: 10px;font-weight: 500;padding: 1.5px 5px 2.5px 5px;border-radius: 100px;border: 1px solid #1b72d6;}
.name>p>span.rank1{background-color: #1b72d6;border-color: #1b72d6;color: #fff;}
.name>p>span.rank2{background-color: #fff;border-color: #1b72d6;color: #1b72d6;}
.name>span{font-size: 12px;font-weight: 500;color: #666;}

.menu-list-wrap{width: 100%;height: auto;max-height: 100%;overflow-y: auto;display: flex;flex-direction: column;gap: 16px;padding: 0 16px;}

.menu-list{width: 100%;height: auto;}
.ml{height: auto;width: 100%;transition: 0.2s;border-radius: 0px;overflow: hidden;padding: 0 6px;background-color: #F1F5FB;}
.ml:first-of-type{border-radius: 10px 10px 0 0;}
.ml:last-of-type{border-radius: 0 0 10px 10px;}
.ml:hover{}


.ml.on{background-color: #1b72d6;}

.ml>button{height: auto;transition: 0.2s;width: 100%;display: flex;align-items: center;gap: 8px;padding: 6px 0;font-size: 14px;font-weight: 600;color: #121212;border-bottom: 1px solid #D9E3F1;}
.ml:last-of-type>button{border-bottom: 0;}
.ml>button>span{display: flex;align-items: center;justify-content: center;width: 28px;aspect-ratio: 1/1;border-radius: 6px;background-color: transparent;}
.ml>button>span>svg{width: 16px;height: 16px;color: #343434;}
.ml>button>svg{width: 16px;height: 16px;transition: 0.2s;}
.ml:hover button{color: #1B72D6;}
.ml:hover button>span>svg{color: #1b72d6;}
.ml.on{background-color: #1b72d6;}
.ml.on button{color: #fff;border-color: transparent;}
.ml.on button>span{background-color: rgba(255, 255, 255, 0.1);}
.ml.on button>span>svg{color: #fff;}
.ml.on:hover button{color: #fff;}
.ml.on:hover button>span>svg{color: #fff;}

.ml-title{margin-bottom: 10px;font-size: 12px;font-weight: 700;color: #707070;padding-bottom: 5px;position: relative;}
.ml-title::after{display: block;content: '';position: absolute;bottom: 0;left: -16px;width: calc(100% + 32px);height: 1px;background-color: #D9E3F1;}

.main{width: 100%;height: 100%;padding-top: 16px;}
.main-area{width: 100%;height: 100%;display: flex;flex-direction: column;min-width: 0;border-radius: 16px;}
.main-title{width: 100%;border-bottom: 1px solid #D9E3F1;padding-bottom: 10px;flex-shrink: 0;font-size: 32px;font-weight: 600;width: 100%;}
.dash-category{display: flex;width: 100%;white-space: nowrap;gap: 16px;margin-bottom: 32px;}
.dash-category>button{display: flex;align-items: center;justify-content: center;gap: 10px;padding: 0 24px;border-radius: 100px;background-color: #fff;box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);font-size: 20px;font-weight: 600;transition: 0.2s;height: 48px;}
.dash-category>button:hover{background-color: rgba(0, 157, 236, 0.1);color: #1b72d6;}
.dash-category>button.on{background-color: #1b72d6;box-shadow: 0 16px 32px rgba(33, 137, 255, 0.15);color: #fff;}

.basic{background-color: #fff;padding: 16px;border: 1px solid #D9E3F1;border-radius: 16px;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.1);}

.search-title{display: flex;flex-direction: column;}
.search-title>p{font-size: 16px;font-weight: 600;color: #000;}
.search-title>span{display: block;font-size: 14px;color: #707070;font-weight: 500;}
.search-wrap{display: flex;margin-bottom: 16px;position: relative;z-index: 2;}
.saerch{display: flex;flex-direction: column;gap: 5px;}
.search-item{display: flex;align-items: center;gap: 10px;}

.date-sel{display: flex;align-items: center;gap: 5px;}
.date-sel>input{width: 130px;}
.date-sel>span{color: #707070;}

.flatpickr-calendar{border-radius: 16px !important;}
#datePicker{background-image: url('/img/calendar2-week.svg');background-position: calc(100% - 10px) center;background-repeat: no-repeat;background-size: 14px;}

.sel-div{position: relative;width: 130px;flex-shrink: 0;cursor: pointer;}
.sel-txt{width: 100%;border-radius: 10px;border: 1px solid #D9E3F1;height: 36px;display: flex;align-items: center;justify-content: space-between;padding: 0 10px;color: #707070;font-size: 14px;transition: 0.2s;}
.sel-txt>svg{color: #707070;width: 14px;height: 14px;transition: 0.2s;}
.sel-div.on .sel-txt{box-shadow: inset 0 0 16px rgba(33, 137, 255, 0.15);border-color: #1b72d6;}
.sel-div.on .sel-txt>svg{transform: rotate(180deg);}
.sel-menu{position: absolute;top: calc(100% + 0px);border: 1px solid #D9E3F1;width: 100%;z-index: 2;background-color: #fff;box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);border-radius: 10px;transition: 0.2s;opacity: 0;pointer-events: none;filter: blur(2.5px);}
.sel-menu.on{filter: blur(0);opacity: 1;top: calc(100% + 5px);pointer-events: inherit;}
.sel-menu>button{height: 32px;display: flex;align-items: center;padding: 0 10px;font-size: 14px;font-weight: 500;transition: 0.2s;width: 100%;border-radius: 10px;}
.sel-menu>button:hover{background-color: rgba(0, 157, 236, 0.1);color: #1b72d6;}

.btn-wrap{display: flex;align-items: center;gap: 10px;flex-shrink: 0;}
.btn-wrap>button{display: flex;align-items: center;justify-content: center;border-radius: 10px;gap: 5px;font-size: 14px;font-weight: 500;color: #fff;background-color: #1b72d6;padding: 0 10px;height: 36px;transition: 0.2s;}
.btn-wrap>button.green{background-color: #21A365;}
.btn-wrap>button.red{background-color: #FD322E;}
.btn-wrap>button.gray{background-color: #707070;}
.btn-wrap>button.charcola{background-color: #343434;}



.btn-wrap.btn26{gap: 5px}
.btn-wrap.btn26>button{height: 26px;font-size: 13px;border-radius: 100px;}

.btn-wrap.btn32{gap: 10px;}
.btn-wrap.btn32>button{height: 32px;border-radius: 100px;}

.btn-wrap.category{margin-bottom: 16px;width: 100%;overflow-x: auto;white-space: nowrap;}
.btn-wrap.category>button{border: 1px solid #F1F5FB;background-color: #F1F5FB;color: #343434;box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);flex-shrink: 0;}
.btn-wrap.category>button.on{background-color: #1b72d6;border-color: #1b72d6;color: #fff;box-shadow: 0px 8px 16px rgba(33, 137, 255, 0.15);}
.basic .btn-wrap.category>button{box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.0);}
.basic .btn-wrap.category>button.on{box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.0);}



.btn-wrap>button:hover{background-color: #1b72d6;}
.btn-wrap>button.green:hover{background-color: #1e9059;}
.btn-wrap>button.red:hover{background-color: #db2d2a;}
.btn-wrap.category>button:hover{background-color: rgba(0, 157, 236, 0.1);color: #1b72d6;border-color: #1b72d6;}
.btn-wrap.category>button.on:hover{background-color: #1b72d6;color: #fff;}

.title-wrap{display: flex;align-items: center;gap: 10px;margin-bottom: 16px;}
.title>p{font-weight: 600;font-size: 20px;}
.title>p>span{color: #1b72d6;}
.title>p strong{font-weight: 600;}
.title>span{font-size: 14px;color: #707070;font-weight: 500;display: block;}

.title{display: flex;flex-direction: column;}


.dash-content>.title-wrap{gap: 16px;}
.dash-content>.title-wrap .title>p{font-size: 24px;}
.dash-content>.title-wrap .title>span{font-size: 16px;}



/* 개쩌는 테이블 모듈 */
.table-section{height: 100%;width: 100%;display: flex;flex-direction: column;min-height: 0/*0212*/;}

.table-wrap{height: 100%;display: flex;flex-direction: column;min-width: 0;min-height: 0;overflow: hidden;width: 100%;}

.table{width: 100%;height: 100%;overflow: auto;display: flex;flex-direction: column;position: relative;}

.table-list{width: max-content;}

.table ul{display: flex;}
.table ul li{height: 32px;display: flex;align-items: center;justify-content: center;padding: 0 5px;font-size: 14px;color: #707070;border-right: 1px solid #D9E3F1;flex-shrink: 0;border-bottom: 1px solid #D9E3F1;gap: 0px;}
.table ul li:last-of-type{border-right: 0;}


.table-title{position: sticky;top: 0;}
.table-title li{color: #000 !important;font-weight: 700;}
.table-title ul:first-of-type{}
.table-title ul:first-of-type>li{border-top: 1px solid #D9E3F1;}

.table ul.bold{background-color: rgba(0, 157, 236, 0.1);}
.table ul.bold li{font-weight: 700;color: #000;}

.table ul.ex-bold{background-color: rgba(0, 157, 236, 0.2);}
.table ul.ex-bold li{font-weight: 800;color: #000;}

.table ul li.left{justify-content: left;}
.table ul li.right{justify-content: right;}
.table ul li.bold{color: #000;font-weight: 700;}
.table ul li.between{justify-content: space-between;}
.table ul li.red{color: #FD322E !important;font-weight: 600;}
.table ul li.blue{color: #1b72d6 !important;font-weight: 600;}

.sticky-col {
    position: sticky;
    left: var(--left-offset);
    z-index: 1;
    background: #fff;
    border-right: 2px solid #D9E3F1; /* 고정 열 구분선 */
  }

.bold li{background-color: #e8f3ff !important;font-weight: 700;}
.on li{background-color: #e8f3ff !important;}
.red li{background-color: #ffd6d5 !important;}



  .table-title{z-index: 30;}
  /* 헤더 내의 왼쪽 고정 셀들 */
  .table-title .sticky-col {
      position: sticky;
      left: var(--left-offset); /* 좌측 고정 위치 */
      top: 0;                   /* 상단 고정 위치 (부모가 sticky여도 명시하는 것이 안전) */
      z-index: 2;              /* 헤더 내의 일반 셀보다 높아야 함 */
      background-color: #f7f7f7; /* 일반 헤더와 구분되는 색상 권장 */
  }
  .table-title ul {
      display: flex;
      width: max-content;
  }
  
  .table-title .sticky-col {
      position: sticky;
      left: var(--left-offset);
      z-index: 2 !important; /* 헤더 내 일반 li보다 높게 */
      background-color: #f7f7f7; /* 배경색 필수 (글자 겹침 방지) */
  }
  
  .table-title li {
      background-color: #f7f7f7; /* 일반 헤더 셀도 배경색 필요 */
  }
/**/

/* 반원 게이지 모듈 */                                            
/* 독립적인 스타일링을 위해 컨테이너 내부로 한정 */
.gauge-fixed-container {
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.gauge-svg-box {
    width: 100%;
    height: auto;
}

/* 배경 점선 아크 */
.gauge-arc-bg {
    fill: none;
    stroke: #D9E3F1;
    stroke-width: 2;
    stroke-dasharray: 2, 6;
}

/* 민트색 진행 아크 (B+ 위치까지 고정) */
.gauge-arc-fill {
    fill: none;
    stroke: #1b72d6;
    stroke-width: 3;
    stroke-linecap: round;
}

/* 구간 점(노드) 공통 스타일 */
.gauge-dot {
    fill: #D9E3F1;
}
.gauge-dot.active {
    fill: #1b72d6;
}

/* 현재 위치 큰 인디케이터 */
.gauge-indicator {
    fill: #1b72d6;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* 등급 텍스트 */
.gauge-text-wrap {
    position: absolute;
    top: 60%;left: 50%;transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.gauge-grade {
    font-size: 48px;
    font-weight: 400;
    color: #1b72d6;
    margin: 0;
    display: flex;align-items: center;justify-content: center;
    
}

/* 하단 라벨 */
.gauge-bottom-labels {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: -24px;
    padding: 0 20px;
    color: #D9E3F1ccc;
    font-size: 16px;
}

.gauge-s { width: 300px; margin: 10px auto; display: flex; flex-direction: column; align-items: center; font-family: sans-serif; position: relative; }
.gauge-s svg { width: 100%; height: auto; }
.gauge-s .bg { fill: none; stroke: #eee; stroke-width: 2; stroke-dasharray: 2, 5; }
.gauge-s .fill { fill: none; stroke: #1b72d6; stroke-width: 3; stroke-linecap: round; }
.gauge-s .dot { fill: #eee; }
.gauge-s .dot.active { fill: #1b72d6; }
.gauge-s .indicator { fill: #1b72d6; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); }
.gauge-s .txt { position: absolute; bottom: 30px; text-align: center; font-size: 70px; font-weight: 300;margin: 0; }
.gauge-s .labels { width: 100%; display: flex; justify-content: space-between; margin-top: -10px; color: #D9E3F1; font-size: 14px; }

@media (max-width: 768px) {
    .gauge-fixed-container{width: 100%;}
    .gauge-bottom-labels{font-size: 14px;}
}

.dash-category-2{display: flex;width: 100%;margin-bottom: 16px;}
.dash-category-2>button{display: flex;align-items: center;justify-content: center;background: linear-gradient(to bottom, #fff, rgba(33, 137, 255, 0.0));width: 100%;height: 42px;font-size: 20px;font-weight: 600;color: #707070;border-bottom: 2px solid #D9E3F1;transition: 0.2s;}
.dash-category-2>button.on{color: #1b72d6;border-color: #1b72d6;background: linear-gradient(to bottom, #fff, rgba(0, 157, 236, 0.1));}

@media (max-width: 768px) {
    
}

.flip-btn>button>span:last-of-type{display: none;}
.flip-btn>button.on{background-color: #000;}
.flip-btn>button.on>span:first-of-type{display: none;}
.flip-btn>button.on>span:last-of-type{display: inherit;}

.flip{display: none !important;}
.flip-wrap.on .flip{display: flex !important;}

.flip-wrap ul li{border-bottom: 1px dashed #D9E3F1 !important;}
.flip-wrap ul:last-of-type li{border-bottom: 1px solid #D9E3F1 !important;}

.report-txt-wrap{margin-top: 10px;display: flex;gap: 10px;}
.report-txt{padding: 10px;border-radius: 10px;background-color: #f7f7f7;width: 100%;display: flex;flex-direction: column;gap: 2.5px;}
.report-txt>span{font-size: 12px;color: #707070;font-weight: 500;display: flex;align-items: center;}
.report-txt>span>strong{font-weight: 500;}
.report-txt>p{font-size: 20px;font-weight: 600;color: #000;display: flex;align-items: center;gap: 10px;}
.report-txt>p>span>strong{font-weight: 600;}
.report-txt.blue{background-color: rgba(0, 157, 236, 0.1);}
.report-txt.blue>span>strong{color: #1b72d6;}
.report-txt.blue>p{color: #1b72d6;}

.report-txt.red{background-color: rgba(253, 49, 46, 0.1);}
.report-txt.red>span>strong{color: #FD322E;}
.report-txt.red>p{color: #FD322E;}

.report-txt-wrap-l{margin-top: 16px;padding-top: 16px;border-top: 1px solid #D9E3F1;}

.report-txt-arrow.blue .bi-graph-down-arrow{display: none;}
.report-txt-arrow.blue .down{display: none;}
.report-txt-arrow.red .down{display: flex;}
.report-txt-arrow.red .up{display: none;}

.report-txt-arrow.red .bi-graph-down-arrow{display: block;}
.report-txt-arrow.red .bi-graph-up-arrow{display: none;}

.kpi-line{width: 100%;background-color: #f7f7f7;border-radius: 6px;height: 16px;overflow: hidden;display: flex;justify-content: left;border: 1px solid #D9E3F1;}
.kpi-item{display: flex;align-items: center;justify-content: left;white-space: nowrap;position: relative;background-color: #1b72d6;border-radius: 6px;}
.kpi-item>span{font-size: 13px;color: #000;position: absolute;top: 50%;transform: translateY(-50%);left: calc(100% + 5px);}



.upload-wrap{display: flex;gap: 16px;}
.upload-item{
    pointer-events: none;
    background-color: rgba(204, 204, 204, 0.5);
    color: #707070;
    min-height: 300px;
    font-size: 24px;
    font-weight: 500;
    border-style: dashed;
    border-width: 2px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: 0.2s;
}
.upload-item>p{transition: 0.2s;}
.upload-item.on{background-color: #fff;color: #1b72d6;pointer-events: inherit;}
.upload-item.on>p{color: #000;}

.upload-item.on:hover{border-color: #1b72d6;background-color: rgba(0, 157, 236, 0.1);}
.upload-item.on:hover>p{color: #1b72d6;}
.upload-item>svg{width: 56px;height: 56px;}

.data-wrap{display: flex;gap: 16px;margin-bottom: 16px;}
.data-item{border: 1px solid #D9E3F1;transition: 0.2s;width: 100%;max-width: 320px;min-width: 0;display: flex;justify-content: space-between;align-items: flex-start;cursor: pointer;}
.data-item:hover{border-color: #1b72d6;background-color: rgba(0, 157, 236, 0.1);}
.data-title{display: flex;flex-direction: column;gap: 2.5px;}
.data-title>p{font-size: 20px;font-weight: 600;color: #000;transition: 0.2s;}
.data-wrap-sub .data-title>p{font-size: 16px;}
.data-wrap-sub .data-item{position: relative;padding: 10px;}
.data-wrap-sub .data-select{position: absolute;right: 10px;top: 10px;}
.data-title>span{font-size: 14px;color: #707070;transition: 0.2s;display: flex;gap: 2.5px;font-weight: 500;}
.data-title>span>strong{font-weight: 500;}
.data-item.on{background-color: #1b72d6;border-color: #1b72d6;box-shadow: 0px 16px 32px rgba(0, 157, 236, 0.2);}
.data-item.on:hover{background-color: #1b72d6;border-color: #1b72d6;}
.data-item:hover .data-title>p{color: #1b72d6;}
.data-item.on .data-title>p{color: #fff;}
.data-item.on:hover .data-title>p{color: #fff;}
.data-item.on .data-title>span{color: #fff;}

.data-select{border-radius: 100px;background-color: #fff;padding: 2.5px 5px;color: #1b72d6;font-weight: 600;font-size: 12px;opacity: 0;transition: 0.2s;pointer-events: none;}
.data-item.on .data-select{opacity: 1;}

.table-tag{padding: 2.5px 5px;border-radius: 100px;font-size: 12px;font-weight: 600;color: #fff;}
.table-tag.blue{background-color: #1b72d6;}
.table-tag.red{background-color: #FD322E;}

.pagination-wrap{display: flex;}
.pagination-wrap>button{display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;font-size: 14px;font-weight: 500;color: #707070;transition: 0.2s;border-radius: 10px;}
.pagination-wrap>button>svg{width: 14px;height: 14px;}
.pagination-wrap>button:hover{background-color: rgba(0, 157, 236, 0.1);color: #1b72d6;}
.pagination-wrap>button.on{background-color: #1b72d6;color: #fff;}

.popup{position: fixed;left: 0;top: 0;width: 100%;height: 100%;transition: 0.2s;pointer-events: none;opacity: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 100;}
.popup-inner{width: 100%;max-width: 480px;padding: 16px;gap: 16px;display: flex;flex-direction: column;transition: 0.2s;filter: blur(5px);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) scale(0.95);background-color: #fff;border-radius: 16px;}
.popup.on{opacity: 1;pointer-events: inherit;}
.popup.on .popup-inner{transform: translate(-50%, -50%) scale(1);filter: blur(0);}
.popup-inner>p{font-size: 20px;font-weight: 600;color: #000;display: flex;gap: 5px;}
.popup-txt>p{font-size: 14px;font-weight: 500;color: #000;}

.input-sub-wrap{width: 100%;display: flex;flex-direction: column;gap: 4px;}
.input-sub-wrap>p{font-weight: 500;color: #000;font-size: 14px;}
.input-item{display: flex;gap: 10px;align-items: center;}
.input-sub-section{display: flex;gap: 10px;}

.access-wrap{display: flex;gap: 5px;}
.access-item{display: flex;padding: 0 5px;height: 26px;border: 1px solid #D9E3F1;background-color: #f7f7f7;align-items: center;justify-content: center;border-radius: 10px;}
.access-item>span{font-size: 12px;font-weight: 500;color: #000;}

.user-sub-info{padding: 10px;border-radius: 10px;background-color: #f7f7f7;width: 100%;display: flex;flex-direction: column;gap: 5px;align-items: flex-start;}
.user-sub-info>p{font-size: 18px;color: #000;}
.user-sub-info>p>span{font-size: 14px;font-weight: 400;color: #707070;}
.user-sub-info>p>strong{font-weight: 600;}
.user-sub-info>span{padding: 2.5px 5px;border-radius: 100px;background-color: #fff;border: 1px solid #D9E3F1;font-size: 10px;font-weight: 700;color: #707070;}

.user-sub-info-sub{flex-direction: row;gap: 5px;font-size: 16px;font-weight: 600;}
.user-sub-info-sub>p{font-size: 16px;}
.user-sub-info-sub>p>span{font-size: 12px;}

.access-sel-wrap{display: flex;flex-direction: column;gap: 10px;width: 100%;}
.access-sel{display: flex;align-items: center;justify-content: space-between;transition: 0.2s;background-color: #f7f7f7;border: 1px solid #D9E3F1;border-radius: 10px;cursor: pointer;height: 36px;padding: 0 10px;}
.access-sel:hover{background-color: #fff;border-color: #1b72d6;}
.access-sel.on{background-color: #1b72d6;border-color: #1b72d6;}
.access-sel>span{display: flex;align-items: center;gap: 10px;color: #707070;font-size: 14px;font-weight: 500;transition: 0.2s;}
.access-sel>span>svg{transition: 0.2s;}

.access-sel>strong{font-weight: 700;color: #1b72d6;background-color: #fff;border-radius: 100px;padding: 2.5px 5px;font-size: 12px;opacity: 0;transition: 0.2s;}
.access-sel.on>strong{opacity: 1;}

.access-sel:hover>span{color: #1b72d6;}
.access-sel:hover>span>svg{color: #1b72d6;}
.access-sel.on>span{color: #fff;}
.access-sel.on>span>svg{color: #fff;}

.btn-wrap-more{display: flex;margin-bottom: 16px;}
.btn-wrap-more .btn-wrap:first-of-type{margin-right: 10px;padding-right: 10px;position: relative;width: auto;margin-bottom: 0;}
.btn-wrap-more .btn-wrap:first-of-type::after{display: block;content: '';width: 1px;height: 16px;background-color: #D9E3F1;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}

.depth-wrap{display: flex;gap: 16px;}
.depth-item{width: 100%;}
.depth-item .title-wrap{justify-content: space-between;}
.depth-sub-wrap{gap: 5px;display: flex;flex-direction: column;}
.depth-sub{width: 100%;height: 36px;border: 1px solid #D9E3F1;background-color: #f7f7f7;border-radius: 10px;display: flex;align-items: center;justify-content: space-between;padding: 0 5px 0 10px;transition: 0.2s;cursor: pointer;}
.depth-sub:hover{border-color: #1b72d6;background-color: #fff;}
.depth-sub.on{background-color: #1b72d6;border-color: #1b72d6;}
.depth-sub>p{transition: 0.2s;font-size: 14px;font-weight: 600;color: #000;}
.depth-sub:hover>p{color: #1b72d6;}
.depth-sub.on>p{color: #fff;}

.mall .title-wrap{justify-content: space-between;align-items: flex-start;margin-bottom: 0;}

.mall-wrap{display: flex;flex-direction: column;width: 100%;gap: 10px;}
.mall{width: 100%;border: 1px solid #D9E3F1;border-radius: 10px;background-color: #f7f7f7;padding: 10px;display: flex;flex-direction: column;gap: 5px;cursor: pointer;transition: 0.2s;}
.mall:hover{background-color: #fff;border-color: #1b72d6;}
.mall .title>p{font-size: 16px;}
.mall .title>span{font-size: 12px;}
.mall-tag{display: flex;gap: 5px;align-items: center;}
.mall-tag>p{padding: 2.5px 5px;border-radius: 100px;border: 1px solid #D9E3F1;background-color: #fff;font-size: 12px;font-weight: 700;color: #707070;display: flex;gap: 2.5px;}

.mall-txt{width: 100%;border-top: 1px solid #D9E3F1;padding-top: 5px;font-size: 12px;font-weight: 500;color: #000;}
.mall .btn-wrap{justify-content: right;}

.history-wrap{margin-bottom: 16px;}
.history{display: flex;align-items: center;justify-content: space-between;padding: 7px 10px;border-bottom: 1px solid #D9E3F1;}
.history:first-of-type{border-top: 1px solid #D9E3F1;}
.history strong{font-weight: 500;}
.history p{color: #707070;font-size: 14px;}
.history span{color: #707070;font-size: 14px;}
.test{color: rgba(0, 157, 236, 0.543)}
.test{color: #1b72d6}

#componentWave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.water-wrap{position: relative;overflow: hidden;border: 0;}
.water-report{position: relative;z-index: 2;padding-top: 16px;display: flex;flex-direction: column;width: 100%;}
.water-report>p{font-size: 64px;color: rgba(255, 255, 255, 1);display: flex;align-items: center;gap: 16px;font-weight: 500;margin-bottom: 5px;}
.water-report>p strong{font-weight: 500;}
.water-report>p svg{width: 64px;height: 64px;}
.water-report>span{font-size: 24px;color: rgba(255, 255, 255, 1);}
.water-sub-wrap{display: flex;flex-direction: column;align-items: flex-start;gap: 10px;margin-top: 16px;}
.water-sub{background-color: rgba(255, 255, 255, 0.15);border-radius: 10px;padding: 5px 10px;display: flex;min-width: 0;color: #f9f9f9;font-size: 14px;}
.water-sub strong{font-weight: 500;}
.water-sub span{display: flex;gap: 2.5px;}
.water-sub p{width: 80px;}

.main-wrap{width: 100%;display: flex;flex-direction: column;gap: 32px;height: 100%;}
.main-nav{width: 100%;display: flex;align-items: center;gap: 16px;position: relative;z-index: 2;}

.search-btn-wrap{display: flex;gap: 16px;}

.main-nav-item{width: 100%;max-width: 320px;border-radius: 100px;border: 1px solid #D9E3F1;padding: 10px;display: flex;align-items: center;justify-content: space-between;font-size: 20px;font-weight: 600;color: #121212;transition: 0.3s;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.025);padding-left: 24px;cursor: pointer;position: relative;background-color: #fff;gap: 16px;}
.main-nav-item:hover{border-color: #1B72D6;color: #1B72D6;}
.search-svg{display: flex;align-items: center;justify-content: center;background-color: #F1F5FB;width: 36px;aspect-ratio: 1/1;border-radius: 100%;transition: 0.2s;}
.search-svg svg{width: 18px;height: 18px;color: #454545;transition: 0.2s;}
.search-company.on{border-color: #1B72D6;color: #1b72d6;box-shadow: 0px 64px 128px rgba(27, 114, 214, 0.6);}
.search-company.on svg{color: #1b72d6;}

.search-company{max-width: 480px;}

.search-list{position: absolute;top: calc(100% + 0px);background-color: #fff;width: 100%;left: 0;border-radius: 16px;display: flex;flex-direction: column;gap: 0;max-height: 360px;overflow-y: auto;opacity: 0;transition: 0.2s;pointer-events: none;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.15);}
.search-list.on{opacity: 1;pointer-events: inherit;top: calc(100% + 10px);}
.search-list button{font-size: 20px;display: flex;align-items: center;justify-content: space-between;width: 100%;border-radius: 0px;padding: 10px;padding-left: 24px;color: #343434;font-weight: 600;transition: 0.2s;}
.search-list button .search-svg{background-color: #f1f1f1;}
.search-list button .search-svg svg{color: #343434;}
.search-list button:hover svg{color: #1B72D6;}
.search-list button:hover .search-svg{background-color: #F1F5FB;}
.search-list button:hover{color: #1B72D6;background-color: #F1F5FB;}

.main-nav-item input{border: 0;background-image: none !important;font-size: 20px;color: #121212;font-weight: 600;}
.main-nav-item input::placeholder{color: #121212;}
.main-nav-item input:focus{background-color: transparent;box-shadow: none;}

.main-flex-wrap{display: flex;width: 100%;gap: 32px;flex-wrap: wrap;}
.main-com-item{width: calc(33.333% - 21.333px);display: flex;flex-direction: column;gap: 16px;}
.main-com-item>p{font-size: 24px;font-weight: 600;width: 100%;font-weight: 600;color: #121212;display: flex;align-items: center;justify-content: space-between;}
.main-com-item>p a{font-size: 16px;font-weight: 500;color: #343434;display: flex;align-items: center;gap: 5px;transition: 0.2s;padding-right: 5px;text-decoration: underline;}
.main-com-item>p a svg{width: 16px;height: 16px;transition: 0.2s;}
.main-com-item>p a:hover{color: #1b72d6;padding-right: 0;gap: 10px;}


.stat-color{position: relative;overflow: hidden;}
.stat-color::after{position: absolute;display: block;content: '';left: 0;top: 0;width: 100%;height: 100%;transition: 0.2s;background: linear-gradient(to top, transparent, transparent);pointer-events: none;}
.stat-color.good::after{background: linear-gradient(to bottom, rgba(0, 157, 236, 0.1), transparent);}
.stat-color.caution::after{background: linear-gradient(to bottom, rgba(255, 144, 40, 0.1), transparent);}
.stat-color.danger::after{background: linear-gradient(to bottom, rgba(253, 49, 46, 0.1), transparent);}

.main-com-wrap{width: 100%;display: flex;gap: 16px;}
.com-stat-item{display: flex;flex-direction: column;gap: 32px;padding: 16px;}
.com-stat-txt{display: flex;flex-direction: column;gap: 32px;position: relative;z-index: 2;}
.com-stat-txt>p{font-size: 24px;font-weight: 600;color: #121212;transition: 0.2s;}

.good .com-stat-txt>p{color: #1B72D6;}
.caution .com-stat-txt>p{color: #FF7B00;}
.danger .com-stat-txt>p{color: #fd312e;}

.com-sub-txt{color: #121212;display: flex;flex-direction: column;transition: 0.2s;}
.good .com-sub-txt{color: #1B72D6;}
.caution .com-sub-txt{color: #FF7B00;}
.danger .com-sub-txt{color: #fd312e;}

.com-sub-txt>p{font-size: 18px;font-weight: 400;transition: 0.2s;}
.com-sub-txt>p>span{font-size: 36px;font-weight: 600;transition: 0.2s;}
.com-sub-txt>span{font-size: 24px;font-weight: 600;transition: 0.2s;}

.stat-line{padding: 10px;border-radius: 12px;background-color: #fff;display: flex;flex-direction: column;gap: 10px;width: 100%;position: relative;z-index: 2;}
.stat-line-txt{display: flex;justify-content: space-between;align-items: center;}
.stat-line-txt p{font-size: 12px;color: #666;font-weight: 400;display: flex;flex-direction: column;}
.stat-line-txt p span{font-size: 14px;font-weight: 500;}
.stat-line-txt p:last-of-type{align-items: flex-end;}

.main-com-wrap .com-stat-item{width: 100%;background-color: #fff;border-radius: 16px;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.025);}
.main-com-wrap .com-stat-txt{text-align: center;}

.sl{width: 100%;position: relative;border-radius: 100px;height: 4px;background: linear-gradient(to right, #009DEC, #FF9028, #fd312e);}
.sl-check{position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 4px;height: 12px;border-radius: 100px;background-color: #fff;border: 1px solid #d9d9d9;transition: 0.3s;}

.ai-data{width: 100%;transform: scale(0.99);opacity: 0.6;max-width: 280px;height: auto;border-radius: 16px;transition: 0.3s 0.2s;background-color: transparent;box-shadow: 0 16px 32px rgba(27, 114, 214, 0.0);border: 1px solid transparent;display: flex;flex-direction: column;gap: 16px;padding: 16px;}
.ai-data.on{background-color: #fff;box-shadow: 0 16px 32px rgba(27, 114, 214, 0.25);border: 1px solid rgba(27, 114, 214, 0.5);transform: scale(1);opacity: 1;}
.ai-title{text-align: center;display: flex;flex-direction: column;gap: 2.5px;}
.ai-title>p{font-size: 24px;font-weight: 600;color: #121212;transition: 0.3s 0.4s;}
.ai-data.on .ai-title>p{color: #1b72d6;}
.ai-title>span{font-size: 14px;font-weight: 400;color: #666;}

.ai-data .com-stat-item{width: 100%;border-radius: 16px;background-color: #fff;}
.ai-data .com-stat-txt{align-items: center;}
.ai-data .com-sub-txt{text-align: center;}

.chart-data-wrap{width: calc(100% - 312px);display: flex;flex-direction: column;gap: 32px;}
.chart-data-item{width: 100%;display: flex;flex-direction: column;gap: 16px;}
.chart-data-item>p{font-size: 24px;font-weight: 600;color: #121212;}
.chart-data{width: 100%;display: flex;gap: 16px;border-radius: 16px;padding: 16px;background-color: #fff;box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.025);}
.chart-data .stat-line{min-width: 140px;}
.chart-data .com-stat-item{padding: 0;position: relative;z-index: 2;justify-content: space-between;}
.chart-wrap{position: relative;z-index: 2;width: 100%;display: flex;flex-direction: column;gap: 16px;height: 100%;}
.chart-wrap>p{font-size: 14px;font-weight: 400;color: #666;}

.stat-data-wrap{position: relative;z-index: 2;width: 100%;height: 210px;max-width: 210px;flex-shrink: 0;border: 1px solid #f1f1f1;overflow-y: auto;background-color: #fff;border-radius: 10px;}
.stat-data-wrap .stat-data{width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 5px 10px;border-bottom: 1px solid #f1f1f1;}
.stat-data-wrap .stat-data:last-of-type{border-bottom: 0;}
.sd-txt{display: flex;align-items: center;}
.sd-txt>p{width: 60px;color: #666;font-size: 12px;}
.sd-txt>p>span{color: #121212;font-size: 14px;font-weight: 600;}
.sd-txt>span{font-size: 12px;font-weight: 600;padding: 2.5px 7.5px;border-radius: 100px;border: 1px solid transparent;color: #666;background-color: transparent;}
.sd-txt>span.sd-1{border-color: #1B72D6;background-color: rgba(27, 114, 214, 0.1);color: #1b72d6;}
.sd-txt>span.sd-2{border-color: #FF9028;background-color: rgba(255, 144, 40, 0.1);color: #FF7B00;}
.sd-txt>span.sd-3{border-color: #fd312e;background-color: rgba(253, 49, 46, 0.1);color: #fd312e;}
.stat-data>span{font-size: 14px;color: #666;}

.chart-item{width: 100%;height: 100%;}

.ds-title{display: flex;gap: 10px;}
.ds-svg{background-color: #fff;border-radius: 12px;box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.025);aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;padding: 16px;}
.ds-svg svg{width: 100%;height: 100%;color: #1B72D6;}
.ds-txt{display: flex;flex-direction: column;gap: 2.5px;}
.ds-txt>p{font-size: 32px;font-weight: 600;color: #121212;}
.ds-txt>p>span{color: #1b72d6;}
.ds-txt>span{font-size: 16px;color: #666;}
.ds-wrap{display: flex;flex-direction: column;gap: 16px;width: 100%;}

.ds-wrap .btn-wrap button{width: 100px;}
.ds-wrap .basic{display: flex;flex-direction: column;gap: 16px;}

.com-info-wrap{display: flex;flex-wrap: wrap;gap: 16px;}
.com-info-wrap .input-sub-wrap{width: calc(50% - 8px);}

.sensor-wrap{width: 100%;flex-wrap: wrap;display: flex;gap: 10px;}
.sensor-item{padding: 10px;width: calc(50% - 5px);border-radius: 10px;border: 1px solid #f1f1f1;background-color: #F7F7F7;display: flex;align-items: center;justify-content: space-between;transition: 0.2s;}
.sensor-txt{display: flex;align-items: center;gap: 5px;}
.sensor-txt>p{font-size: 15px;font-weight: 600;color: #121212;transition: 0.2s;}
.sensor-item.on .sensor-txt>p{color: #fff;}
.sensor-txt>span{background-color: #fff;color: #1b72d6;opacity: 0;transition: 0.2s;border-radius: 100px;padding: 1.5px 5px;font-size: 12px;font-weight: 500;pointer-events: none;}
.sensor-item.on .sensor-txt>span{opacity: 1;}
.sensor-item .btn-wrap button{width: 26px;padding: 0;border-radius: 10px;}
.sensor-item .btn-wrap button:last-of-type{display: none;}
.sensor-item.on .btn-wrap button:last-of-type{display: flex;}
.sensor-item.on .btn-wrap button:first-of-type{display: none;}
.sensor-item.on{background-color: #1b72d6;border-color: #1B72D6;}

#componentWave{position: fixed !important; top: 0 !important; left: 0 !important; width: 100dvw !important; height: 100dvh !important; pointer-events: none !important; display: block !important;filter: brightness(0.4);opacity: 0.6;transition: 0.8s;}
#componentWave.on{opacity: 1;filter: brightness(1);}
.mo-section{position: relative;width: 100%;height: 100%;overflow: hidden;}
.mo-wrap{padding: 64px 24px 32px 24px;width: 100%;height: 100%;overflow-y: auto;}
.water-stat-wrap{width: 100%;display: flex;flex-direction: column;gap: 16px;max-width: 540px;margin: 0 auto;}
.water-stat-flex{display: flex;width: 100%;gap: 16px;}
.water-stat-item{width: 100%;background-color: rgba(255, 255, 255, 0.15);border-radius: 16px;overflow: hidden;}
.ws-title{width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.4);font-size: 13px;color: #f1f1f1;}
.ws-title p{display: flex;align-items: center;gap: 5px;}
.ws-title button{display: flex;align-items: center;gap: 5px;color: #f1f1f1;}
.ws-title svg{width: 13px;height: 13px;}
.mo-wrap{display: flex;flex-direction: column;width: 100%;gap: 32px;}
.mo-wrap .com-stat-item{padding: 10px;gap: 10px;padding-bottom: 16px;transition: 0.3s;}
.mo-wrap .stat-line{padding: 0;background-color: transparent;border-radius: 0;}
.mo-wrap .com-sub-txt{color: #fff;}
.mo-wrap .com-sub-txt>p>span{font-size: 32px;font-weight: 500;}
.mo-wrap .com-sub-txt>span{font-size: 18px;font-weight: 400;}
.water-stat-flex .com-sub-txt{text-align: center;}

.water-title{display: flex;flex-direction: column;width: 100%;color: #fff;text-align: center;}
.water-title>p{font-size: 20px;font-weight: 300;}
.water-title>strong{font-weight: 500;font-size: 64px;}
.water-title>span{font-size: 16px;color: rgba(255, 255, 255, 0.8);font-weight: 300;}
.mo-wrap .com-stat-item.danger{background-color: rgba(255, 255, 255, 0.2);}
.mo-wrap .com-stat-item.danger .com-sub-txt{color: #fd312e;}

.water-stat-wrap>div{transform: translateY(16px);opacity: 0;filter: blur(5px);}
.water-stat-wrap.on>div{transform: translateY(0px);opacity: 1;filter: blur(0px);}
.water-stat-wrap>div:nth-of-type(1){transition: 0.5s 0.6s;}
.water-stat-wrap>div:nth-of-type(2){transition: 0.5s 0.5s;}
.water-stat-wrap>div:nth-of-type(3){transition: 0.5s 0.4s;}
.water-stat-wrap>div:nth-of-type(4){transition: 0.5s 0.3s;}
.water-stat-wrap>div:nth-of-type(5){transition: 0.5s 0.2s;}
.water-stat-wrap>div:nth-of-type(6){transition: 0.5s 0.1s;}

.data-popup{position: fixed;bottom: -100%;left: 50%;transform: translateX(-50%);max-width: 540px;border-radius: 20px 20px 0 0;width: 100%;height: calc(100% - 128px);background-color: rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);filter: blur(5px);transition: 0.4s;}
.data-popup-inner{width: 100%;height: 100%;padding: 64px 24px 32px 24px;display: flex;flex-direction: column;gap: 16px;align-items: center;display: flex;flex-direction: column;align-items: center;gap: 16px;}
.data-popup.on{bottom: 0;background-color: rgba(0, 0, 0, 0.6);backdrop-filter: blur(5px);filter: blur(0);}
.data-popup .water-title>p{font-size: 16px;}
.data-popup .water-title>strong{font-size: 36px;}
.data-popup .water-title>span{font-size: 16px;}
.data-popup-inner>div{transform: translateY(16px);opacity: 0;filter: blur(5px);}
.data-popup-inner>div:nth-of-type(1){transition: 0.3s 0.2s;}
.data-popup-inner>div:nth-of-type(2){transition: 0.3s 0.3s;}
.data-popup-inner>div:nth-of-type(3){transition: 0.3s 0.4s;}
.data-popup-inner>div:nth-of-type(4){transition: 0.3s 0.5s;}
.data-popup-inner>div:nth-of-type(5){transition: 0.3s 0.6s;}
.data-popup.on .data-popup-inner>div{transform: translateY(0);opacity: 1;filter: blur(0);}

.data-popup button{display: flex;align-items: center;justify-content: center;flex-shrink: 0;height: 40px;width: auto;padding: 0 10px;border: 1px solid #fff;color: #fff;font-weight: 500;background-color: rgba(255, 255, 255, 0.1);gap: 10px;border-radius: 100px;font-size: 16px;transition: 0.3s;}
.data-popup button svg{width: 16px;height: 16px;color: #fff;}
.data-popup button:active{transform: scale(0.98);background-color: rgba(255, 255, 255, 0.4)}
.water-data-wrap{color: #fff;}

.data-detail{width: 100%;height: 100%;overflow-y: auto;}
.data-detail-item{padding: 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.4);display: flex;align-items: center;justify-content: space-between;}
.dd-txt{display: flex;align-items: center;gap: 5px;}
.dd-txt>p{width: 70px;font-size: 16px;color: #fff;font-weight: 300;}
.dd-txt>p span{font-weight: 600;}
.dd-txt>span{font-size: 14px;font-weight: 600;padding: 1.5px 5px 2.5px 5px;border-radius: 100px;border: 1px solid #fff;color: #fff;}
.data-detail-item>span{font-size: 14px;color: rgba(255, 255, 255, 0.8);}

.dd-1 .dd-txt>span{background-color: #fff;color: #1B72D6;border-color: #1B72D6;}
.dd-2 .dd-txt>span{background-color: #fff;color: #FF7B00;border-color: #FF7B00;}
.dd-3 .dd-txt>span{color: #FD322E;border-color: #fd312e;background-color: #fff;}
.dd-3 .dd-txt>p{color: #FD322E;}
.data-detail-item.dd-3{background-color: rgba(255, 255, 255, 0.1);}

.water-ai-txt{font-size: 16px;color: #fff;text-align: center;}

.tip-txt{font-size: 14px;color: #fff;font-weight: 500;}
.tip-txt-3{color: #fd312e;font-weight: 600;}

.good .tip-txt-1{display: block;}
.good .tip-txt-2{display: none;}
.good .tip-txt-3{display: none;}

.caution .tip-txt-1{display: none;}
.caution .tip-txt-2{display: block;}
.caution .tip-txt-3{display: none;}

.danger .tip-txt-1{display: none;}
.danger .tip-txt-2{display: none;}
.danger .tip-txt-3{display: block;}