/* --------- custom UI --------- */

/* Color */
:root{
    --blue-25 : #F7F8FC;
    --blue-50 : #e7ecf8;
    --blue-100 : #b5c4e9;
    --blue-200 : #91a8de;
    --blue-300 : #5e80cf;
    --blue-400 : #3f67c5;
    --blue-500 : #0f41b7;
    --blue-600 : #0e3ba7;
    --blue-700 : #0b2e82;
    --blue-800 : #082465;
    --blue-900 : #061b4d;
    --blue-400-30: #C5CDE9;
    --blue-400-06: #F3F6FC;

    --mint-100 : #e7f9fc;
    --mint-200 : #9ee5f1;
    --mint-300 : #76daec;
    --mint-400 : #3acae4;
    --mint-500 : #12bfde;
    --mint-600 : #0d869b;

    --purple-400 : #4c4286;
    --purple-25 : #dbd8e6;
    --green-25 : #d6e9e9;
    --green : #2BA196;
    --yellow : #F5C000;
    --orange : #F69037;
    --red : #E45538;
    --red-30: #F6D7CD;
    --red-06: #FDF6F3;
    --commu-3 : #072775;
    --commu-2 : #3A528A;
    --commu-1 : #7E92A9;

    --white : #ffffff;
    --grey-50 : #F7F8F9;
    --grey-100 : #E8EBEF;
    --grey-200 : #BFC9D4;
    --grey-300 : #7E92A9;
    --grey-400 : #5A6F86;
    --grey-500 : #374553;
    --grey-600 : #28323C;
    --grey-700 : #161D24;

/* 20251027 추가 - 알람 컬러 새로 정의 */
    /* 주의 색상 */
    --caution-500 : #26C438;
    --caution-100 : #E6F9E5;
    /* 경고 색상 */
    --warning-500 : #F5C000;
    --warning-100 : #f8eab7;
    /* 위험 색상 */
    --danger-500 : #f69037;
    --danger-100 : #f2c9a5;
    /* 심각 색상 */
    --serious-500 : #e45538;
    --serious-100 : #F6D7CD;
}

/* 툴팁 css */
.tooltip-wrapper {
    position: relative;
}

.mouse-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: var(--white);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease-in-out;
}

.f-blue700{color: var(--blue-700);}
.f-blue500{color: var(--blue-500);}
.f-blue400{color: var(--blue-400);}
.f-mint400{color: var(--mint-400);}
.f-mint500{color: var(--mint-500);}
.f-red{color: var(--red);}
.f-yellow{color: var(--yellow);}
.f-green{color: var(--green);}
.f-grey500{color: var(--grey-500);}
.f-grey400{color: var(--grey-400);}
.f-grey300{color: var(--grey-300);}
.f-grey200{color: var(--grey-200);}
.f-white{color: var(--white);}


/* Font */
h1{font-size: 0;}
h2{font-size: 3.2rem;}
h3{font-size: 2.6rem;}
h4{font-size: 2.2rem;}
.body-lg{font-size: 2rem;}
.body-md{font-size: 1.7rem;} /* default */
.body-sm{font-size: 1.5rem;}
.caption-md{font-size: 1.3rem;}
.caption{font-size: 1.2rem;}

.hoem-body-md{
    font-size: 1.7rem;
    padding-top: 1rem;
}

.f-light{font-weight: 300;}
.f-medium{font-weight: 500;}
.f-bold{font-weight: 700;}

.f-left{text-align: left;}
.f-right{text-align: right;}
.f-center{text-align: center;}

.f-under{text-decoration: underline;}

/* typo */
.error-msg{
    font-size: 1.2rem;
    color: var(--red);
}
.success-msg{
    font-size: 1.2rem;
    color: var(--green);
}

/* positon */
.relative{position: relative;}
.absolute{position: absolute;}


/* // dispaly */
/* flex */
.flex-ss{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.flex-sc{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.flex-sb{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.flex-cs{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.flex-ce{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.flex-cc{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-cb{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-eb{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.flex-eb1{
	margin-top: 8rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.flex-col{
    display: flex;
    flex-direction: column;
}
.flex-row{
    flex-direction: row;
}
.flex-grow{
    flex-grow: 1;
}
.flex-shrink{
    flex-shrink: 0;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-nowrap{
    flex-wrap: nowrap;
}
.flex-stretch{
    align-items: stretch;
}
.flex-justi-center{
    justify-content: center;
}
.flex-justi-end{
    justify-content: flex-end;
}
.align-center{
    align-items: center;
}

/* 20250310 추가 */
.align-end{
    align-items: flex-end;
}

/* 20250312 원격제어 슬라이드 css 추가 */
.flex-direc-col {
    flex-direction: column !important;
    align-items: end !important;
    gap: 1rem !important;
}
.flex-direc-row {
    width: 100% !important;
    flex-direction: row !important;
}

.column-gap40{
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.column-gap20{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


/* 250321: install-prd-info 내 flex css 추가 */
.install-prd-info .flex-sb {
    gap: 0.8rem;
}
.install-prd-info .flex-sb > div:first-child {
    flex: 1;
}


.btn-wrap{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.homepage-btn-wrap{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-wrap .btn[hidden]{
    opacity: 0;
}

.gap-2{gap: 0.2rem;}
.gap-4{gap : 0.4rem;}
.gap-8{gap : 0.8rem;}
.gap-10{gap: 1rem;}
.gap-12{gap: 1.2rem;}
.gap-14{gap: 1.4rem;}
.gap-20{gap: 2rem;}
.gap-24{gap: 2.4rem;}
.gap-30{gap: 3rem;}
.gap-40{gap: 4rem;}



/* -- spacing --*/
.w-100{width: 100%;}
.w-fit{width: fit-content;}
.w-50{width: 50%;}


/* margin */
.m-auto{margin: 0 auto;}

.mt-auto{margin-top: auto;}
.mt-10{margin-top: 1rem;}
.mt-20{margin-top: 2rem;}
.mt-30{margin-top: 3rem;}

.mb-4{margin-bottom: 0.4rem;}
.mb-6{margin-bottom: 0.6rem;}
.mb-8{margin-bottom: 0.8rem;}
.mb-10{margin-bottom: 1rem;}
.mb-12{margin-bottom: 1.2rem;}
.mb-14{margin-bottom: 1.4rem;}
.mb-16{margin-bottom: 1.6rem;}
.mb-20{margin-bottom: 2rem;}
.mb-30{margin-bottom: 3rem;}
.mb-40{margin-bottom: 4rem;}
.mb-60{margin-bottom: 6rem;}

.ml-auto{margin-left: auto;}

.mr-auto{margin-right: auto;}
.mr-10{margin-right: 1rem;}
.mr-20{margin-right: 2rem;}

.pb-10{padding-bottom: 1rem;}
.pb-20{padding-bottom: 2rem;}

hr{border-color: var(--grey-100);}

.v-hidden {
    visibility: hidden;
}


/* -- nav -- */
nav{
    display: flex;
    height: 100dvh;
}

/* main category */
nav .main-category{
    width: 18rem;
    background: var(--blue-800);
    padding: 4rem 1.2rem 2rem;
    overflow-y: auto;
    z-index: 5;
}

nav .main-category h1 a{
    display: block;
    /* height: 2.2rem;
    background: url(../img/logo-white.png) no-repeat center center; */
    height: 4rem;
    background: url(../img/top_logo.png) no-repeat center center;
    background-size: contain;
    margin-bottom: 4rem;
}

nav .main-category ul{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

nav .main-category li{
    padding: 0.8rem 1.4rem;
    border-radius: 0.8rem;
    background-color: transparent;
}
nav .main-category li:hover{
    background-color: rgb(255, 255, 255, 0.16);
}
nav .main-category li.active{
    background-color: var(--mint-500);
}

nav .main-category li a{
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 1rem;
}
nav .icon{
    width: 2.4rem;
    height: 2.4rem;
}

/* sub category */
nav .sub-category{
    width: 16rem;
    background: var(--blue-900);
    padding: 11.2rem 2rem 2rem;
    flex-direction: column;
    gap: 4rem;
    position: relative;
    overflow-y: auto;
    display: none;
}
nav .sub-category.fixed{
    display: flex;
    animation: leftSlide 0.5s;
}
nav .sub-category .group-title{
    padding: 0 0.4rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blue-200);
    margin-bottom: 1rem;
}
nav .sub-category ul{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
nav .sub-category ul li{
    padding: 0.4rem;
    border-radius: 0.8rem;
}
nav .sub-category ul li:hover,
nav .sub-category ul li.active{
    background-color: rgba(255, 255, 255, 0.16);
}
nav .sub-category ul li a{
    font-size: 1.5rem;
    color: var(--white);
}
nav .sub-category .btn.circle{
    margin-top: auto;
    align-self: flex-end;
}
nav .sub-category .btn.circle:hover{
    background-color: rgba(255, 255, 255, 0.16);
}
nav .main-category::-webkit-scrollbar,
nav .sub-category::-webkit-scrollbar{
    width: 4px;
}
nav .main-category::-webkit-scrollbar-thumb{
    background-color: rgba(255, 255, 255, 0.06);
}
nav .sub-category::-webkit-scrollbar-thumb{
    background-color: rgba(255, 255, 255, 0.16);
}

nav.tablet{display: none;}


/* -- container -- */
body{overflow: hidden;}

.tablet{display: none;}
.mo{display: none !important;}


.page{
    min-height: 100dvh;
    background: var(--grey-50);
    display: flex;
}
.container{
    width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
section.page-contents{
    height: calc(100dvh  - 7.8rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3rem;
    position: relative;
}
section.page-contents::-webkit-scrollbar{width: 12px;}
section.card{
    padding: 3rem;
    border-radius: 0.8rem;
    background-color: var(--white);
    box-shadow: 0 0 2rem rgba(22, 29, 36, 0.06);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-x: hidden;
}
section.card1{
	padding: 2rem;
	border-radius: 0.8rem;
	background-color: var(--white);
	box-shadow: 0 0 2rem rgba(22, 29, 36, 0.06);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow-x: hidden;
}
section.card .flex-cb h3{flex-shrink: 0;}

.oper-info > .card {padding: 3rem !important;}


.tab-contents{
    display: none;
    flex-direction: column;
    gap: 2rem;
}
.line-card{
    padding: 2rem;
    border-radius: 0.4rem;
    border: 1px solid var(--grey-100);
}
.line-card h4{flex-shrink: 0;}

/* 영역잡기용 */
.chart-wrap,
.site-wrap,
.img-box{
    width: 100%;
    background-color: var(--grey-200);
}
.chart-wrap.sample,
.site-wrap.sample,
.img-box.sample{height: 20rem;}
.chart-wrap{
    /* overflow: hidden; */
    background-color: transparent;
}
.tab-contents.show{
    display: flex;
}
.card-wrap{
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

form:not(.header-btn){
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 20250224: 사이드 레이어 팝업 스크롤 css 추가 */
.side-layer form.scroll {
    overflow-y: auto;
    height: calc(100vh - 174px);
    padding: 0.2rem 0.1rem;
}
.side-layer form.scroll::-webkit-scrollbar {
    width: 8px;
}



/* 제품 카드 */
.prd-card{
    /* width: 40rem; */
    min-width: 35rem;
    padding: 1.4rem;
    border-radius: 0.4rem;
    background-color: var(--white);
    box-shadow: 0 0 2rem rgba(22, 29, 36, 0.16);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.prd-card.line{
    box-shadow: none;
    border: 1px solid var(--grey-100);
}
.prd-card .prd-img{
    width: 14rem;
    height: 16rem;
    background: none no-repeat center center;
    background-size: contain;
    /* border: 1px solid var(--grey-100); */
}
.prd-card .temperature{
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--blue-400);
    margin-bottom: 0.4rem;
}

.prd-card .flex-cb p:not(.system-label p){
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.prd-card .flex-grow{min-width: 14rem;}
.prd-card .prd-info .name{
    font-size: 1.7rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}
.prd-card .prd-info .code{
    font-size: 1.5rem;
    color: var(--grey-400);
    margin-bottom: 0.4rem;
}
.prd-card .prd-info .num{
    font-size: 2rem;
    font-weight: 700;
}
.canvas-wrap .prd-card{
    /* max-width: 4rem; */
    position: absolute;
    top: 0;
    left: 0;
}
.prd-card-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}
.prd-card-wrap .prd-card{width: calc((100% / 3) - 2rem);}



/* -- header -- */
header{
    padding: 1.2rem 2.5rem;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--grey-100);
    /* padding-top: env(safe-area-inset-top); */
}
header .header-btn{
    padding: 1.2rem;
    border-radius: 50%;
}
header .header-btn:hover{
    background-color: var(--blue-25);
}

header .group,
.weather-wrap,
.weather-wrap > div,
.update-wrap,
header .date-wrap,
header .utility-wrap{
    display: flex;
    align-items: center;
    flex-direction: row;
}
header .group{
    gap: 2.4rem;
}

.weather-wrap .option p{
    font-size: 1.2rem;
    color: var(--grey-400);
}

.update-wrap{
    min-width: 25.4rem;
    padding: 0.6rem 1.2rem;
    gap: 0.8rem;
    border-radius: 0.4rem;
    border: 1px solid var(--grey-100);
    justify-content: center;
}
.tablet.show .update-wrap{width: 100%;}
.update-wrap p{
    font-size: 1.5rem;
    color: var(--grey-400);
}
.update-wrap .date-wrap p{
    font-variant: tabular-nums;
    letter-spacing: -0.8px;
}
header .utility-wrap .alarm.active{
    position: relative;
}
header .search-bar,
#searchbar-popup .search-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
#searchbar-popup .search-bar{width: 100% !important;}

header .search-bar .select-wrap{
    display: none;
}
header .search-bar.active,
#searchbar-popup .search-bar.active{
    width: 28rem;
    background: var(--blue-25);
    border-radius: 10rem;
    padding: 0.5rem 1.6rem;
}
header .search-bar.active .select-wrap,
#searchbar-popup .search-bar.active .select-wrap{
    display: block;
    width: 100%;
}
header .search-bar.active .el-select__wrapper,
#searchbar-popup .search-bar.active .el-select__wrapper{
    background: transparent;
    box-shadow: none;
}
header .search-bar.active .el-select__wrapper .el-select__suffix,
#searchbar-popup .search-bar.active .el-select__wrapper .el-select__suffix{display: none;}

header .alarm{position: relative;}
header .alarm.active .num{
    width: 1.8rem;
    height: 1.8rem;
    background-color: var(--red);
    border-radius: 50%;
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    font-size: 1.2rem;
    color: var(--white);
    text-align: center;
    line-height: 1.8rem;
}

header .my-info-wrap{position: relative;}
header .my-info-card{
    min-width: 20rem;
    position: absolute;
    right: 1rem;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--white);
    border-radius: 0.8rem;
    box-shadow: 0 0 10px rgba(22, 29, 36, 0.1);
    display: none;
}
header .my-info-card.show{display: block; z-index: 90;}
header .my-info-card li{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 1.4rem;
    border-radius: 0.4rem;
}
header .my-info-card li:hover{background-color: var(--blue-25);}
header .my-info-card p{
    font-size: 1.5rem;
}
header .my-info-card li .el-switch{
    margin-left: auto;
    height: auto;
}

header .my-info-card > div{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grey-50);
    padding: 1rem;
    width: 100%;
}

/* -- buttons -- */
.btn{
    font-size: 1.7rem;
    font-weight: 500;
    border-radius: 0.4rem;
    border: 1px solid var(--blue-500);
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.btn:hover{
    box-shadow: 0 0 10px rgba(11, 46, 130, 0.3);
}
.btn:disabled{
    cursor: default;
}
.btn.filled:disabled,
.btn.ghost:disabled{
    background: var(--grey-300);
    border-color: var(--grey-300);
}
.btn:disabled:hover{box-shadow: none;}


/* btn size */
.btn.large{
    min-width: 10rem;
    min-height: 5.2rem;
}
.btn.medium{
    min-width: 8rem;
    min-height: 4.6rem;
}
.btn.small{
    min-width: 7.2rem;
    min-height: 4rem;
}
.btn.tiny{
    font-size: 1.5rem;
    min-width: 5.6rem;
    min-height: 3.4rem;
}
.btn.xtiny{
    font-size: 1.2rem;
    min-height: 2.2rem;
}

.btn.long{
    min-width: 17rem;
    min-height: 4.6rem;
}


/* btn filled */
.btn.filled{
    color: var(--white);
    background: var(--blue-500);
}
.btn.filled.red{
    color: var(--white);
    border-color: var(--red);
    background: var(--red);
}


/* btn outlined */
.btn.outlined{
    color: var(--blue-500);
    background: var(--white);
}
.btn.outlined.grey{
    color: var(--grey-500);
    border-color: var(--grey-500);
}
.btn.outlined:disabled,
.btn.outlined.grey:disabled{
    background: var(--grey-100);
    color: var(--grey-300);
    border-color: var(--grey-300);
}

/* btn ghost */
.btn.ghost{
    color: var(--white);
    background: var(--grey-600);
    border-color: var(--grey-600);
}


/* btn text */
.btn.text{
    min-width: initial;
    width: fit-content;
    height: 4rem;
    color: var(--grey-600);
    border: 0;
    border-radius: 0;
    display: inline-flex;
}
.btn.text:hover{
    box-shadow: none;
}
.btn.text p{
    font-size: 1.7rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--grey-600);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.btn.text:hover p{
    color: var(--blue-500);
    border-color: var(--blue-500);
}
.btn.text p::before{
    content: '';
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    background: url(../img/icon_check_bk.svg) no-repeat;
    background-size: contain;
}
.btn.text:hover p::before,
.btn.text:hover p::after{
    filter: invert(18%) sepia(92%) saturate(2519%) hue-rotate(216deg) brightness(88%) contrast(95%);
}
.btn.text.under{text-decoration: underline;}

/* btn circle */
.btn.circle{
    width: fit-content;
    height: auto;
    border-radius: 50%;
    border: 0;
}
.circle.large{
    min-width: initial;
    padding: 1.8rem;
}
.circle.medium{
    min-width: initial;
    padding: 1.4rem;
}
.circle.small{
    min-width: initial;
    padding: 1.1rem;
}
.circle.tiny{
    min-width: initial;
    padding: 0.6rem;
}
.circle.transparent{
    border: 0;
    background: transparent;
}


/* 상세페이지 뒤로가기 버튼 */
.btn.circle.rotate{
    transform: rotate(-180deg);
}


/* checkbox squere type */
.checkbox input[type="checkbox"]{
    display: none;
}
.checkbox input[type="checkbox"] + label{
    display : inline-flex;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.checkbox input[type="checkbox"] + label .checkbox-icon{
    width: 2.2rem;
    height: 2.2rem;
    position: relative;
    background-color: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 0.2rem;
}
.checkbox input[type="checkbox"] + label .label{
    font-size: 1.5rem;
}
.checkbox input[type="checkbox"]:checked + label .checkbox-icon{
    background-color: var(--blue-500);
    border-color: var(--blue-500);
}
.checkbox input[type="checkbox"]:checked + label .checkbox-icon::after{
    content: '';
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/icon_check_wh.svg) no-repeat;
    background-size: contain;
}
.checkbox input[type="checkbox"]:disabled + label .checkbox-icon{
    background-color: var(--grey-100);
}
.checkbox input[type="checkbox"]:disabled + label .label{
    color: var(--grey-300);
}
.checkbox input[type="checkbox"]:checked:disabled + label .checkbox-icon{
    background-color: var(--grey-200);
    border-color: var(--grey-200);
}

/* chip type */
.checkbox.chip label{
    min-width: 7.4rem;
    height: 4rem;
    padding: 0 1rem;
    border-radius: 0.4rem;
    border: 1px solid var(--grey-100);
    justify-content: center;
}
.checkbox.chip label:hover{
    background-color: var(--mint-100);
}
.checkbox.chip label span{color: var(--grey-500);}
.checkbox.chip input[type="checkbox"]:checked + label{
    background-color: var(--mint-100);
    border-color: var(--mint-500);
}
.checkbox.chip input[type="checkbox"]:checked + label span{
    font-weight: 500;
    color: var(--mint-500);
}

/* radio normal */
.el-radio-group .el-radio{margin-right: 1rem;}
.el-radio.el-radio--large .el-radio__inner{width: 2.2rem; height: 2.2rem;}
.el-radio__inner{border: 1px solid var(--grey-200);}
.el-radio.el-radio--large .el-radio__label{
    font-size: 1.5rem;
    color: var(--grey-700);
    padding-left: 0.4rem;
}
.el-radio__input.is-checked .el-radio__inner{
    background-color: var(--blue-500);
    border-color: var(--blue-500);
}
.el-radio__inner:after{
    width: 1rem;
    height: 1rem;
}



/* wrapper */
.input-wrap,
.select-wrap,
.textarea-wrap,
.mix-wrap,
.date-wrap{
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.input-label,
.select-wrap .select-label,
.textarea-wrap .input-label,
.mix-wrap .mix-label,
.date-wrap, .date-label{
    font-size: 1.5rem;
    color: var(--grey-500);
}
.input-wrap .input-label.required-icon::after,
.select-wrap .select-label.required-icon::after,
.textarea-wrap .input-label.required-icon::after,
.mix-wrap .mix-label.required-icon::after,
.date-wrap .date-label.required-icon::after{
    display: inline-flex;
    content: '*';
    color: var(--red);
    margin-left: 0.2rem;
}
.input-wrap .flex-cs button{flex-shrink: 0;}
.txt-wrap{
    display: flex;
    align-items: center;
}

/* 20250310: 추가 */
.txt-wrap-end {
    justify-content: end;
}

.input-wrap .value{
    font-size: 1.7rem;
}
form .el-input__wrapper{width: initial;}


/* system label */
.system-label{
    /* width: 6.4rem; */
    min-width: 6.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border-radius: 0.4rem;
}
.system-label p{
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--white) !important;
}
.system-label.normal{
    background-color: var(--green);
}
.system-label.inactive{
    background-color: var(--commu-1);
}
.system-label.caution{
    background-color: var(--caution-500);
}
.system-label.warning{
    background-color: var(--warning-500);
}
.system-label.danger{
    background-color: var(--danger-500);
}
.system-label.serious{
    background-color: var(--serious-500);
}
.system-label.warning.commu{
    background-color: var(--commu-2);
}
.system-label.serious.commu{
    background-color: var(--commu-3);
}

.system-label.small{
    width: fit-content;
    max-width: initial;
    flex-shrink: 0;
    padding: 0.4rem;
}
.system-label.small p{font-size: 1.5rem;}

.system-status.normal p{color: var(--green);}
.system-status.inactive p{color: var(--grey-300);}
.system-status.caution p{color: var(--caution-500);}
.system-status.warning p{color: var(--warning-500);}
.system-status.danger p{color: var(--danger-500);}
.system-status.serious p{color: var(--serious-500);}
.system-status.warning.commu p{color: var(--commu-2);}
.system-status.serious.commu p{color: var(--commu-3);}

.commu-label{
    width: fit-content;
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
    font-weight: 700;
    border-radius: 0.4rem;
    margin: 0.4rem auto 0;
}
.commu-label.on{
    background: var(--blue-50);
    color: var(--blue-400);
}
.commu-label.off{
    background: var(--grey-50);
    color: var(--grey-400);
}


/* --- table --- */
.table{
    border-radius: 0.4rem;
    display: flex;
    flex-direction: column;
    font-size: 1.7rem;
    overflow: hidden;
    border: 1px solid var(--grey-100);
}

.table .tr,
.table .tr .th,
.table .tr .td{
    display: flex;
}

.table .tr > *{
    padding: 1.4rem;
    min-height: 5.6rem;
    height: auto;
    align-items: center;
}
.table .tr:last-child .th,
.table .tr:last-child .td{border: 0;}

/* table header */
.table .tr .th{
    min-width: 14rem;
    background-color: var(--blue-50);
    border-bottom: 1px solid var(--grey-50);
    font-weight: 700;
}

/* table cell */
.table .tr .td{
    flex: 1;
    border-bottom: 1px solid var(--grey-100);
    flex-wrap: wrap;
}

/* table col */
.table-wrap{
    height: fit-content;
    overflow: hidden;
}
.table.col .tr .th{
    min-width: initial;
    flex: 1;
    justify-content: center;
    text-align: center;
}
.table.col .tr .td{
    justify-content: center;
    text-align: center;
}

/* 20250225: 테이블 가로 맞춤 css 추가 */
.table.tit .tr .th{
    background-color: transparent;
    border-color: var(--grey-100);
    border-right: 1px solid var(--grey-100);
    flex: 0.5;
}

.table .tr.bg .th,
.table .tr.bg .td{
    background-color: var(--blue-50);
    border-color: var(--grey-50);
}
.table .tr.bgm2 .th,
.table .tr.bgm2 .td{
    background-color: var(--mint-200);
}
.table .tr.bgm1 .th,
.table .tr.bgm1 .td{
    background-color: var(--mint-100);
}

.table-label{
    width: 100%;
    padding: 1rem;
    color: var(--white);
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
    background-color: var(--blue-300);
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    position: relative;
}
.table-label + .table{
    border-radius: 0;
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
}
.acco-btn{
    border-radius: 0.4rem;
}
.acco-btn.show{
    border-radius: 0;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
}
.acco-btn .icon{
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    transition: all 0.5s;
}
.acco-btn.show .icon{
    transform: translateY(-50%) rotate(-180deg);
    transition: all 0.5s;
}
.table-label.acco-btn + .table{display: none;}
.table-label.acco-btn.show + .table{display: block;}




/* -- scroll bar -- */
::-webkit-scrollbar{
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-thumb{
    background-color: var(--grey-200);
    border-radius: 10px;
}
::-webkit-scrollbar-track{
    background-color: transparent;
    box-shadow: none;
}


/* card */
div.card{
    border-radius: 0.8rem;
    padding: 2rem;
    background-color: var(--white);
    box-shadow: 0 0 20px rgba(22, 29, 36, 0.06);
}
div.card .label{
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--grey-400);
}
div.card .value{
    font-size: 3.2rem;
    font-weight: 700;
}


/* filter area */
.filter-area{
    display: flex;
    align-items: stretch;
    gap: 2.4rem;
}

/* 20250225: 조회/search 버튼 css 수정 */
.filter-area .btn-wrap button{
    height: 100%;
    padding: 0 0.5rem;
    letter-spacing: -0.1rem;
}


.filter-area .select-group{
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    flex-grow: 1;
}
.filter-area .select-wrap{
    width: 15%;
    flex-grow: 1;
}
.filter-area .input-wrap{
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
}

.table-area .search-result p,
.chart-area .search-result p,
.shop-monitoring .search-result p{
    font-size: 1.7rem;
}
.table-area .search-result p.result,
.chart-area .search-result p.result,
.shop-monitoring .search-result p.result{
    font-weight: 700;
    color: var(--blue-300);
}


/* -- bubble -- */
.map-bubble{
    width: fit-content;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 1.4rem;
    border-radius: 10rem;
    background-color: #67D5FF;
    border: 1.2rem solid rgba(199, 240, 254, 0.7);
}
.ai-bubble{
    width: fit-content;
    padding: 1rem;
    border-radius: 1rem;
    color: var(--white);
    background-color: var(--green);
    border: 0.4rem solid var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}
.ai-bubble::before{
    content: '';
    position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 1.2rem solid transparent;
	border-top-color: var(--white);
	border-bottom: 0;
	margin-left: -1.2rem;
	margin-bottom: -1.2rem;
}
.ai-bubble::after{
    content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 0.8rem solid transparent;
	border-top-color: var(--green);
	border-bottom: 0;
	margin-left: -0.8rem;
	margin-bottom: -0.7rem;
}
.ai-bubble span{
    font-size: 1.5rem;
}

/* -- data arrow -- */
.value.increase{color: var(--red);}
.value.decrease{color: var(--blue-400);}


/* -- file -- */
.img-file{
    display: flex;
    align-items: center;
    gap: 1rem;
    height: fit-content;
    padding: 2rem;
    border-radius: 0.4rem;
    background-color: var(--grey-50);
    flex-shrink: 0;
}
.img-file p{
    font-size: 1.5rem;
    color: var(--grey-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.img-file .txt-wrap{
    gap: 0.4rem;
    flex-grow: 1;
    overflow: hidden;
}
.img-file .img-file-size{
    font-size: 1.2rem;
    color: var(--grey-300);
}
.img-list{
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
}
.img-list li{
    width: fit-content;
    position: relative;
}
.img-list li .img-box{
    width: 12rem;
    height: 12rem;
    border-radius: 0.4rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*250108 css코드 추가요청 */
.img-list li .img-view-btn{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.2);
}
/*--250108 css코드 추가요청 끝*/

.img-list li .delete-btn{
    width: 2.8rem;
    height: 2.8rem;
    background: var(--grey-700);
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -- process -- */
.process-wrap{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.7rem;
    color: var(--grey-300);
}
.process-wrap li{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.process-wrap li.active{
    color: var(--mint-500);
    font-weight: 500;
}
.process-wrap li::after{
    display: block;
    content: '>';
    font-size: 1.2rem;
    color: var(--grey-200);
}
.process-wrap li:last-child:after{display: none;}


/* -- receipt --*/
.receipt-info-wrap .txt-wrap::after{
    display: block;
    content: '';
    width: 1px;
    height: 1.4rem;
    background-color: var(--grey-200);
    margin-left: 2rem;
}
.receipt-info-wrap .tit{
    font-size: 1.7rem;
    margin-right: 0.4rem;
}
.receipt-info-wrap .num{
    font-size: 1.7rem;
    font-weight: 500;
}


/* -- ranking badge -- */
.ranking-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.4rem;
}

/* 20250310: 수정 */
.ranking-badge{
    position: absolute;
    top: -7px;
    left: -8px;
    width: 5rem;
    padding: 0.4rem;
    background: var(--mint-500);
    border-radius: 0.4rem;
    color: var(--white);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.08rem;
}

.ranking-badge::before{
    content: '';
    border-top: 1rem solid var(--mint-500);
    border-left: 0.8rem solid rgba(0, 0, 0, 0);
    border-top-left-radius: 2px;
    position: absolute;
    top: 2.6rem;
    left: -0.06px;
}


/* 수량 */
.quantity-wrap{
    min-width: 18rem;
    width: 18rem;
    flex-grow: 1;
    position: relative;
}
.quantity-wrap .el-input__wrapper{
    width: 100%;
    flex-shrink: 0;
    padding: 0.7rem 4.7rem;
}
.quantity-wrap .el-input__inner{
    text-align: center;
}
.quantity-wrap button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 100%;
    background-color: var(--grey-50);
    flex-shrink: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}
.quantity-wrap .minus-btn{
    border-radius: 0.4rem 0 0 0.4rem;
    border-right: 1px solid var(--grey-200);
    left: 0;
}
.quantity-wrap .plus-btn{
    border-radius: 0 0.4rem 0.4rem 0;
    border-left: 1px solid var(--grey-200);
    right: 0;
}
.quantity-wrap button:hover~.el-input:not(.is-disabled) .el-input__wrapper{
    box-shadow: 0 0 0 1px var(--mint-400);
}
.quantity-wrap button:hover .icon{
    filter: invert(60%) sepia(87%) saturate(999%) hue-rotate(160deg) brightness(111%) contrast(79%);
}

.quantity-wrap.side-ver{
    min-width: 12rem;
    width: 12rem;
}
.quantity-wrap.side-ver .el-input__wrapper{
    padding: 0.7rem 4.7rem 0.7rem 0.7rem;
}
.quantity-wrap.side-ver button{
    height: 50%;
}
.quantity-wrap.side-ver .minus-btn{
    border-left: 1px solid var(--grey-200);
    border-right: 0;
    border-radius: 0 0.4rem 0 0;
    left: initial;
    right: 0;
    top: 0;
}
.quantity-wrap.side-ver .plus-btn{
    border-radius: 0 0 0.4rem 0;
    border-top: 1px solid var(--grey-200);
    top: initial;
    bottom: 0;
}


.no-content{
    padding: 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--grey-400);
}
.no-content.sm{
    font-size: 1.5rem;
    font-weight: 300;
}

.cursor-pointer{
    cursor: pointer;
}



/* TOOLTIP */
[data-tooltip]{
    position:relative;
    line-height: 1.4rem;
}

/* 20250325: 툴팁 transition 주석처리 */
[data-tooltip]:before,
[data-tooltip]:after{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    /* transition: all .2s ease; */
    font-size: 1.2rem;
    white-space: pre-wrap;
}
[data-tooltip]:before{
    content: attr(data-tooltip);
    width: 20rem;
    position: absolute;
    padding: 0.4rem 1rem;
    border-radius: 0.4rem;
    color: var(--white);
    background: var(--blue-300);
    box-shadow:0 0 1rem rgba(11, 46, 130, 0.3);
    z-index: 5;
}
[data-tooltip]:after{
    content: '';
    z-index: 5;
}
[data-tooltip]:not([data-tooltip=""]):hover:before{
    visibility: visible;
    opacity: 1;
}
[data-tooltip]:not([data-tooltip=""]):hover:after{
    visibility: visible;
    opacity: 1;
}


.tooltip-left[data-tooltip]:before,
.tooltip-left[data-tooltip]:after{
    right: calc(110% - 0.4rem);
}
.tooltip-left[data-tooltip]:before{
    margin-top: -0.2rem;
}
.tooltip-left[data-tooltip]:after{
    border-left: 0.4rem solid var(--blue-300);
    border-right: 0.4rem solid transparent;
    border-top: 0.4rem solid transparent;
    border-bottom: 0.4rem solid transparent;
    top: 50%;
    transform: translateY(-50%);
    right: calc(110% - 1.2rem);
}


.tooltip-right[data-tooltip]:before,
.tooltip-right[data-tooltip]:after{
    left: 110%;
}
.tooltip-right[data-tooltip]:before{
    margin-top: -0.2rem;
}
.tooltip-right[data-tooltip]:after{
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid var(--blue-300);
    border-top: 0.4rem solid transparent;
    border-bottom: 0.4rem solid transparent;
    top: 50%;
    transform: translateY(-50%);
    left: calc(110% - 0.7rem);
}


.tooltip-top[data-tooltip]:before,
.tooltip-top[data-tooltip]:after{
    left:50%;
    transform:translateX(-50%);
}
.tooltip-top[data-tooltip]:before{
    top: -2rem;
}
.tooltip-top[data-tooltip]:after{
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.4rem solid var(--blue-300);
    top: 0.2rem;
}
.tooltip-top[data-tooltip]:not([data-tooltip=""]):hover:before{
    top: -4.4rem;
}
.tooltip-top[data-tooltip]:not([data-tooltip=""]):hover:after{
    top: -0.8rem;
}

/* 20250321: tooltip-bottom css 추가 */
.tooltip-bottom[data-tooltip]::before {
    left: 1rem !important;
    top: 2.8rem;
    transform: translateX(-50%);
}
.tooltip-bottom[data-tooltip]::after {
    top: 2.1rem !important;
    left: 0.6rem !important;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.4rem solid transparent;
    border-bottom: 0.4rem solid var(--blue-300);
}

/* 20250325: tooltip-bottom left css 추가 */
.tooltip-bottom.left[data-tooltip]::before {
    left: 10rem !important;
}


.icon-box{
    border-radius: 0.4rem;
    background-color: var(--blue-400);
    padding: 1rem;
    box-shadow: 0.2rem 0.4rem 1rem rgba(71, 119, 230, 0.28);
}

.guide-wrap{
    border-radius: 0.4rem;
    background-color: var(--grey-50);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.guide-wrap p{
    font-size: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.guide-wrap p span.icon{
    flex-shrink: 0;
}

.loading-pop{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    background: rgba( 255, 255, 255, 0.15 );
    backdrop-filter: blur( 4.5px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    z-index: 99;
    display: none;
    align-items: center;
    justify-content: center;
}
.loading-pop.show{display: flex;}
.loading-pop svg{
    width: 3.4rem;
    transform-origin: center;
    animation: rotate4 2s linear infinite;
}
.loading-pop circle{
    fill: none;
    stroke: var(--mint-400);
    stroke-width: 8;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash4 1.5s ease-in-out infinite;
}
@keyframes rotate4 {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash4 {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}

.ld-ripple {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto 6rem;
}

.ld-ripple div {
    position: absolute;
    border: 4px solid var(--blue-500);
    opacity: 1;
    border-radius: 50%;
    animation: ld-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.ld-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes ld-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}



/* -- icon -- */
.icon{
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 0;
}

/* icon size */
.icon.size60{
    width: 6rem;
    height: 6rem;
}
.icon.size40{
    width: 4rem;
    height: 4rem;
}
.icon.size36{
    width: 3.6rem;
    height: 3.6rem;
}
.icon.size32{
    width: 3.2rem;
    height: 3.2rem;
}
.icon.size30{
    width: 3rem;
    height: 3rem;
}
.icon.size28{
    width: 2.8rem;
    height: 2.8rem;
}
.icon.size24{
    width: 2.4rem;
    height: 2.4rem;
}
.icon.size20{
    width: 2rem;
    height: 2rem;
}
.icon.size18{
    width: 1.8rem;
    height: 1.8rem;
}
.icon.size16{
    width: 1.6rem;
    height: 1.6rem;
}
.icon.size14{
    width: 1.4rem;
    height: 1.4rem;
}

/* icon color */
.icon.grey200{
    filter: invert(85%) sepia(5%) saturate(584%) hue-rotate(171deg) brightness(95%) contrast(89%);
}
.icon.grey400{
    filter: invert(43%) sepia(13%) saturate(871%) hue-rotate(171deg) brightness(94%) contrast(90%);
}
.icon.grey500{
    filter: invert(20%) sepia(5%) saturate(3576%) hue-rotate(169deg) brightness(93%) contrast(77%);
}
.icon.blue400{
    filter: invert(39%) sepia(15%) saturate(6082%) hue-rotate(203deg) brightness(85%) contrast(79%);
}
.icon.blue500{
    filter: invert(22%) sepia(83%) saturate(2357%) hue-rotate(212deg) brightness(83%) contrast(98%);
}
.icon.blue700{
    filter: invert(14%) sepia(64%) saturate(3044%) hue-rotate(212deg) brightness(92%) contrast(96%);
}
.icon.mint400{
    filter: invert(80%) sepia(13%) saturate(3565%) hue-rotate(152deg) brightness(94%) contrast(90%);
}
.icon.white{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(274deg) brightness(108%) contrast(107%);
}
.icon.red{
    filter: invert(52%) sepia(83%) saturate(2068%) hue-rotate(335deg) brightness(90%) contrast(97%);
}
.icon.purple{
    filter: invert(27%) sepia(13%) saturate(2285%) hue-rotate(209deg) brightness(97%) contrast(94%);
}
.icon.green{
    filter: invert(45%) sepia(73%) saturate(403%) hue-rotate(125deg) brightness(102%) contrast(87%);
}


/* icon image */
.icon.dashboard{
    background-image: url(../img/icon_dashboard.svg);
}
.icon.monitoring{
    background-image: url(../img/icon_monitoring.svg);
}
.icon.remote-control{
    background-image: url(../img/icon_remote-control.svg);
}
.icon.service{
    background-image: url(../img/icon_service.svg);
}
.icon.analyze{
    background-image: url(../img/icon_analyze.svg);
}
.icon.basic{
    background-image: url(../img/icon_basic.svg);
}
.icon.setting{
    background-image: url(../img/icon_setting.svg);
}
.icon.admin{
    background-image: url(../img/icon_admin.svg);
}
.icon.support{
    background-image: url(../img/icon_support.svg);
}
.icon.lock{
    background-image: url(../img/icon_lock.svg);
}
.icon.unlock{
    background-image: url(../img/icon_unlock.svg);
}
.icon.menu{
    background-image: url(../img/icon_menu.svg);
}
.icon.map-pin{
    background-image: url(../img/icon_map-pin.svg);
}
.icon.list{
    background-image: url(../img/icon_list.svg);
}
.icon.list-blue{
    background-image: url(../img/icon_list_blue.svg);
}
.icon.search{
    background-image: url(../img/icon_search.svg);
}
.icon.search-wh{
    background-image: url(../img/icon_search-wh.svg);
}
.icon.bell{
    background-image: url(../img/icon_alarm.svg);
}
.icon.full-window{
    background-image: url(../img/icon_full-window.svg);
}
.icon.user{
    background-image: url(../img/icon_user.svg);
}
.icon.normal{
    background-image: url(../img/icon_normal.svg);
}
.icon.inactive{
    background-image: url(../img/icon_inactive.svg);
}
.icon.caution{
    background-image: url(../img/icon_caution.svg);
}
.icon.warning{
    background-image: url(../img/icon_warning.svg);
}
.warning.commu .icon.warning{
    background-image: url(../img/icon_warning-commu.svg);
}
.icon.danger{
    background-image: url(../img/icon_warning.svg);
}
.icon.serious{
    background-image: url(../img/icon_serious.svg);
}
.serious.commu .icon.serious{
    background-image: url(../img/icon_serious-commu.svg);
}
.icon.normal-wh{
    background-image: url(../img/icon_normal-wh.svg);
}
.icon.inactive-wh{
    background-image: url(../img/icon_inactive-wh.svg);
}
.icon.caution-wh{
    background-image: url(../img/icon_caution-wh.svg);
}
.icon.warning-wh{
    background-image: url(../img/icon_caution-wh.svg);
}
.icon.danger-wh{
    background-image: url(../img/icon_warning-wh.svg);
}
.icon.serious-wh{
    background-image: url(../img/icon_serious-wh.svg);
}
.icon.close{
    background-image: url(../img/icon_close.svg);
}
.icon.bell-ringing{
    background-image: url(../img/icon_bell-ringing.svg);
}
.icon.bell-ringing-wh{
    background-image: url(../img/icon_bell-ringing-wh.svg);
}
.icon.user-card{
    background-image: url(../img/icon_user-card.svg);
}
.icon.logout{
    background-image: url(../img/icon_logout.svg);
}
.icon.caret-right{
    background-image: url(../img/icon_caret-right.svg);
}
.icon.caret-right-blue-round{
    background-image: url(../img/icon_caret-right-blue-round.svg);
}
.icon.caret-down{
    background-image: url(../img/icon_caret-down.svg);
}
.icon.caret-down-b{
    background-image: url(../img/icon_caret-down-bold.svg);
}
.icon.good{
    background-image: url(../img/icon_circle-good.svg);
}
.icon.good-active{
    background-image: url(../img/icon_circle-good-active.svg);
}
.icon.trend-up{
    background-image: url(../img/icon_trend-up.svg);
}
.icon.trend-down{
    background-image: url(../img/icon_trend-down.svg);
}
.icon.fridge{
    background-image: url(../img/icon_fridge.svg);
}
.icon.wrench{
    background-image: url(../img/icon_wrench.svg);
}
.icon.slide-right{
    background-image: url(../img/icon_slide-right.svg);
}
.icon.slide-left{
    background-image: url(../img/icon_slide-left.svg);
}
.icon.list-bullets{
    background-image: url(../img/icon_list-bullets.svg);
}
.icon.layout{
    background-image: url(../img/icon_layout.svg);
}
.icon.guide{
    background-image: url(../img/icon_guide.svg);
}
.icon.edit{
    background-image: url(../img/icon_edit.svg);
}
.icon.snowflake{
    background-image: url(../img/icon_snowflake.svg);
}
.icon.wind{
    background-image: url(../img/icon_wind.svg);
}
.icon.shop{
    background-image: url(../img/icon_shop.svg);
}
.icon.shop-blue{
    background-image: url(../img/icon_shop_blue.svg);
}
.icon.shop-line{
    background-image: url(../img/icon_shop-line.svg);
}
.icon.filter{
    background-image: url(../img/icon_filter.svg);
}
.icon.area{
    background-image: url(../img/icon_area.svg);
}
.icon.product{
    background-image: url(../img/icon_product.svg);
}
.icon.card-tree{
    background-image: url(../img/icon_card-tree.svg);
}
.icon.fader{
    background-image: url(../img/icon_fader.svg);
}
.icon.save{
    background-image: url(../img/icon_save.svg);
}
.icon.folder{
    background-image: url(../img/icon_folder.svg);
}
.icon.thumbs-up{
    background-image: url(../img/icon_thumbs-up.svg);
}
.icon.expand{
    background-image: url(../img/icon_expand.svg);
}
.icon.upload{
    background-image: url(../img/icon_upload.svg);
}
.icon.download{
    background-image: url(../img/icon_download.svg);
}
.icon.update{
    background-image: url(../img/icon_update.svg);
}
.icon.change{
    background-image: url(../img/icon_change.svg);
}
.icon.power{
    background-image: url(../img/icon_power.svg);
}
.icon.eco{
    background-image: url(../img/icon_eco.svg);
}
.icon.temperature{
    background-image: url(../img/icon_temper.svg);
}
.icon.outdoor{
    background-image: url(../img/icon_outdoor.svg);
}
.icon.gauge{
    background-image: url(../img/icon_gauge.svg);
}
.icon.eye{
    background-image: url(../img/icon_eye.svg);
}
.icon.eyeslash{
    background-image: url(../img/icon_eyeslash.svg);
}
.icon.receipt{
    background-image: url(../img/icon_receipt.svg);
}
.icon.flag{
    background-image: url(../img/icon_flag.svg);
}
.icon.proceeding{
    background-image: url(../img/icon_proceeding.svg);
}
.icon.flame{
    background-image: url(../img/icon_flame.svg);
}
.icon.call{
    background-image: url(../img/icon_call.svg);
}
.icon.energy{
    background-image: url(../img/icon_energy.svg);
}
.icon.driver{
    background-image: url(../img/icon_driver.svg);
}
.icon.homePage{
    background-image: url(../img/square_logo_white.png);
    display: inline-flex;
    margin-right: 1rem;
    vertical-align: bottom;
}
.icon.wifi{
    background-image: url(../img/icon_wifi.svg);
}
.icon.wifi-slash{
    background-image: url(../img/icon_wifi-slash.svg);
}
.icon.minus{background-image: url(../img/icon_minus.svg);}
.icon.plus{background-image: url(../img/icon_plus.svg);}
.icon.light{background-image: url(../img/icon_light.svg);}
.icon.light-off{background-image: url(../img/icon_light-off.svg);}
.icon.moon{background-image: url(../img/icon_moon.svg);}
.icon.quick-setting{background-image: url(../img/icon_quick-setting.svg);}
.icon.quick-setting-off{background-image: url(../img/icon_quick-setting-off.svg);}
.icon.connect{background-image: url(../img/icon_connect.svg);}
.icon.not-connect{background-image: url(../img/icon_not-connect.svg);}
.icon.ai{background-image: url(../img/icon_ai.svg);}
.icon.video{background-image: url(../img/icon_video.svg);}
.icon.info{background-image: url(../img/icon_info.svg);}
.icon.comment{background-image: url(../img/icon_comment.svg);}
.icon.trash{background-image: url(../img/icon_trash.svg);}
.icon.check-circle{background-image: url(../img/icon_check-circle.svg);}
.icon.minus-circle{background-image: url(../img/icon_minus-circle.svg);}
.icon.glass-plus{background-image: url(../img/icon_glass-plus.svg);}
.icon.arrow-counter-clockwise {background-image: url(../img/icon_arrow-counter-clockwise.svg);}
.icon.arrow-counter-clockwise-slash{background-image: url(../img/icon_arrow-counter-clockwise-slash.svg);}


/* weather */
.icon.weather-conditions.sunny{
    background-image: url(../img/icon_weather_sunny.svg);
}
.icon.weather-conditions.cloudy{
    background-image: url(../img/icon_weather_cloudy.svg);
}
.icon.weather-conditions.foggy{
    background-image: url(../img/icon_weather_foggy.svg);
}
.icon.weather-conditions.partly-cloudy{
    background-image: url(../img/icon_weather_partly-cloudy.svg);
}
.icon.weather-conditions.rainy{
    background-image: url(../img/icon_weather_rainy.svg);
}
.icon.weather-conditions.snowy{
    background-image: url(../img/icon_weather_snowy.svg);
}
.icon.weather-conditions.storming{
    background-image: url(../img/icon_weather_storming.svg);
}
.icon.weather-conditions.thunder{
    background-image: url(../img/icon_weather_thunder.svg);
}
.icon.weather-conditions.windy{
    background-image: url(../img/icon_weather_windy.svg);
}
.icon.time-zone{
    background-image: url(../img/icon_time-zone.svg);
}
.icon.globe{
    background-image: url(../img/icon_globe.svg);
}



/* slider */
.slider-wrap{
    position: relative;
    height: 100%;
    /* padding: 0 5.4rem; */
    display: flex;
    align-items: center;
}
.slider-wrap > button{
    /* width: 10rem; */
    height: fit-content;
    position: absolute;
    z-index: 90;
    border-radius: 50%;
}
.slider-wrap > button:hover{
    box-shadow: 0 0 10px rgba(11, 46, 130, 0.1);
}
.slider-wrap .slide-prev{
    left: -2rem;
    /* background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 46%, transparent); */
}
.slider-wrap .slide-next{
    right: -2rem;
    /* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 46%); */
}
.slider-wrap .slide-btn{
    width: fit-content;
    padding: 1rem;
    border-radius: 50%;
    background-color: var(--white);
    box-shadow: 0 0 20px rgba(15, 65, 183, 0.1);
}
.slider-wrap .slide-next .slide-btn{margin-left: auto;}
.slider-wrap .swiper{height: 100%;}
.slider-wrap .swiper-wrapper{align-items: center;}
.slider-wrap{min-width: 35.4rem;}
.swiper-slide .swiper-card{
    min-width: 17.4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.6rem;
    border-radius: 1.4rem;
    border: 1px solid var(--grey-100);
    /* box-shadow: 0 0 2rem rgba(22, 29, 36, 0.06); */
}
.line-card.alarm-type{
    min-width: 16rem;
    width: 16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1rem;
    gap: 1rem;
    border-radius: 1.4rem;
}

.swiper-slide .swiper-card.default,
.line-card.alarm-type.default{
    border-bottom: 6px solid var(--grey-100);
}
.swiper-slide .swiper-card.default-1{
    border-bottom-color: var(--red);
}
.swiper-slide .swiper-card.default-2{
    border-bottom-color: var(--orange);
}
.swiper-slide .swiper-card.default-3{
    border-bottom-color: var(--yellow);
}
.swiper-slide .swiper-card.caution,
.line-card.alarm-type.caution{
    border-bottom: 6px solid var(--caution-500);
}
.swiper-slide .swiper-card.warning,
.line-card.alarm-type.warning{
    border-bottom: 6px solid var(--warning-500);
}
.swiper-slide .swiper-card.danger,
.line-card.alarm-type.danger{
    border-bottom: 6px solid var(--danger-500);
}
.swiper-slide .swiper-card.serious,
.line-card.alarm-type.serious{
    border-bottom: 6px solid var(--serious-500);
}
.swiper-slide .swiper-card.inactive.commu,
.line-card.alarm-type.inactive.commu{
    border-bottom: 6px solid var(--commu-1);
}
.swiper-slide .swiper-card.warning.commu,
.line-card.alarm-type.warning.commu{
    border-bottom: 6px solid var(--commu-2);
}
.swiper-slide .swiper-card.serious.commu,
.line-card.alarm-type.serious.commu{
    border-bottom: 6px solid var(--commu-3);
}
.swiper-slide .swiper-card.normal,
.line-card.alarm-type.normal{
    border-bottom: 6px solid var(--green);
}

.swiper-slide .swiper-card.caution .error-code,
.line-card.alarm-type.caution .error-code{color: var(--caution-500);}

.swiper-slide .swiper-card.warning .error-code,
.line-card.alarm-type.warning .error-code{color: var(--warning-500);}

.swiper-slide .swiper-card.danger .error-code,
.line-card.alarm-type.danger .error-code{color: var(--danger-500);}

.swiper-slide .swiper-card.serious .error-code,
.line-card.alarm-type.serious .error-code{color: var(--serious-500);}

.swiper-slide .swiper-card.inacitve .error-code,
.line-card.alarm-type.inactive .error-code{color: var(--commu-1);}

.swiper-slide .swiper-card.warning.commu .error-code,
.line-card.alarm-type.warning.commu .error-code{color: var(--commu-2);}

.swiper-slide .swiper-card.serious.commu .error-code,
.line-card.alarm-type.serious.commu .error-code{color: var(--commu-3);}

.swiper-slide .swiper-card.normal .error-code,
.line-card.alarm-type.normal .error-code{color: var(--green);}

.swiper-slide .swiper-card h4{text-align: center;}
.swiper-slide .swiper-card p:not(.system-status p){
    color: var(--grey-400);
    font-size: 1.5rem;
}
.swiper-slide .swiper-card p.date{font-size: 1.3rem !important;}
.swiper-slide .swiper-card .system-status,
.line-card.alarm-type .system-status{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--grey-100);
}
.swiper-slide .swiper-card .date-wrap{
    flex-direction: row;
    gap: 0.4rem;
}

.bb-grey100{
    border-bottom: 1px solid var(--grey-100);
}

/* — data arrow — */
.value.arrow::after{
    display: inline-flex;
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
}
.value.increase{color: var(--red);}
.value.increase::after{
    border-bottom-color: var(--red);
    margin-bottom: 6px;
}
.value.decrease{color: var(--blue-400);}
.value.decrease::after{
    border-bottom-color: var(--blue-400);
    margin-bottom: 6px;
}

/* timer-refresh */
.refresh {
    position: relative;
}

.refresh .icon.arrow-counter-clockwise.active {
    animation: rotate 2s linear infinite; /* 2초 동안 한 번 회전, 무한 반복 */
}

.refresh .time {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

@keyframes rotateUpdate {
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}


/* --- popup --- */
.popup{
    width: 100%;
    height: 100dvh;
    height:-webkit-fill-available;
    background: rgba(22, 29, 36, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 90;
}
.popup.show{
    display: flex;
}
.popup.alert, .popup.confirm{z-index: 99;}

.popup.full .popup-wrap{
    height: calc(100% - 2rem);
}

/* alert, confirm */
.alert .popup-wrap,
.confirm .popup-wrap,
.layer .popup-wrap{
    min-width: 30rem;
    max-width: calc(100% - 10rem);
    padding: 2rem 2rem 2rem 2rem;
    background: var(--white);
    border-radius: 0.8rem;
    position: relative;
}
.alert.show .popup-wrap,
.confirm.show .popup-wrap,
.layer.show .popup-wrap{
    animation: fadeInDown 0.5s;
}

.popup.layer .popup-wrap{
    min-width: 50rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
}

/* 워런티 팝업창 최대사이즈 수정 20250520 */
#warranty-popup.popup.layer .popup-wrap{
    max-width: 60rem;
}

/* 부품이미지 팝업창 최대사이즈 수정 20250520 */
#img-view-popup.popup.layer .popup-wrap{
    max-width: 100rem;
}

/* 20250310 추가 */
.popup-wrap .popup-content .input-wrap .input-label:nth-of-type(2) {
    gap: 0.4rem;
}

.side-layer{
    min-width: 40rem;
    height: 100svh;
    padding: 2rem;
    background-color: var(--white);
    box-shadow: -10px 0 20px rgba(22, 29, 36, 0.06);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90;
    display: none;
}
.side-layer.hide{
    display: block;
    animation: sideLayerHide 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.side-layer.show{
    display: block;
    animation: sideLayerShow 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.side-layer .side-title{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 4rem;
}
.side-layer .side-title button{
    position: absolute;
    left: 0;
}
.side-layer .side-title .info-msg{
    font-size: 1.2rem;
    padding: 1rem;
    border-radius: 0.4rem;
    background-color: var(--grey-50);
}
.side-layer .side-info-title .txt-wrap{
    justify-content: center;
    gap: 1rem;
}
.side-layer .side-info-title p{
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--grey-500);
}
.side-layer .side-info-title p:first-child::after{
    display: inline-flex;
    content: '|';
    margin-left: 1rem;
}


@keyframes fadeInDown{
    0%{
        opacity: 0;
        transform: translateY(-3rem);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes leftSlide{
    0%{
        transform: translateX(-16rem);
    }
    100%{
        transform: translateX(0);
    }
}

@keyframes leftSlideTablet{
    0%{
        transform: translateX(-37.5rem);
    }
    100%{
        transform: translateX(0);
    }
}

@keyframes sideLayerShow{
    0%{
        transform: translateX(40rem);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes sideLayerHide{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(100%);
    }
}


/* --------- element UI component --------- */

/* input */
.el-input{
    width: 100%;
}
.el-input__wrapper{
    width: 28rem;
    padding: 0.7rem 1rem;
    box-shadow: 0 0 0 1px var(--grey-200);
    font-size: 1.7rem;
}
.el-input__wrapper:hover{
    padding: 0.7rem 1rem;
    box-shadow: 0 0 0 1px var(--grey-400);
}
.el-input__wrapper.is-focus{
    box-shadow: 0 0 0 1px var(--grey-400);
}
.el-input__wrapper .el-input__suffix .el-icon{
    filter: invert(55%) sepia(17%) saturate(497%) hue-rotate(172deg) brightness(101%) contrast(86%);
}
.el-input.is-disabled .el-input__wrapper{
    background-color: var(--grey-100);
    box-shadow: 0 0 0 1px var(--grey-200);
}
.el-input--large{height: 4.4rem;}
.el-input--small .el-input__wrapper{padding: 0.7rem 1rem;}

/* textarea */
.el-textarea__inner{
    padding: 1rem;
    box-shadow: 0 0 0 1px var(--grey-200);
    font-size: 1.7rem;
    resize: none;
}
.el-textarea__inner.is-focus{
    box-shadow: 0 0 0 1px var(--grey-400);
}
.el-textarea__inner:hover{
    padding: 1rem;
    box-shadow: 0 0 0 1px var(--grey-400);
}

/* number */
/* .el-input-number__decrease, .el-input-number__increase{background-color: var(--grey-50);}
.el-input-number__decrease:hover, .el-input-number__increase:hover{color: var(--mint-500);}
.el-input-number__decrease:hover~.el-input:not(.is-disabled) .el-input__wrapper, .el-input-number__increase:hover~.el-input:not(.is-disabled) .el-input__wrapper{
    box-shadow: 0 0 0 1px var(--mint-500);
} */

/* radio tab */
.el-radio-group{flex-wrap: nowrap;}
.filter-area .radio-wrap{flex-grow: 1;}
.filter-area .radio-wrap .el-radio-group{
    width: 100%;
    flex-wrap: nowrap;
}
.radio-wrap.w-100 .el-radio-group{width: 100%;}
.el-radio-button{
    flex: 1;
    --el-radio-button-checked-bg-color: var(--mint-500);
    --el-radio-button-checked-text-color: var(--white);
    --el-radio-button-checked-border-color: var(--mint-500);
    --el-radio-button-disabled-checked-fill: var(--grey-300);
}
.el-radio-button .el-radio-button__inner {
    width: 100%;
    min-width: 8rem;
    border-radius: 0;
    font-size: 1.7rem;
    padding: 1.35rem;
    font-weight: 300;
}
.el-radio-button .el-radio-button__inner:hover{
    color: var(--mint-500);
}
.el-radio-button.is-active .el-radio-button__inner{
    font-weight: 500;
}
.el-radio-button.is-active .el-radio-button__inner:hover{
    color: var(--white);
}


/* select */
.select-wrap{min-width: 14rem;}
.el-select__wrapper{
    padding: 0.7rem 1rem;
    box-shadow: 0 0 0 1px var(--grey-200);
    font-size: 1.7rem;
}
.el-select__wrapper.is-hovering:not(.is-focused){
    box-shadow: 0 0 0 1px var(--grey-400);
}
.el-select__wrapper.is-focused{
    box-shadow: 0 0 0 1px var(--mint-500);
}
.el-select__wrapper.is-disabled{
    padding: 1.5rem 1rem;
    background-color: var(--grey-100);
    box-shadow: 0 0 0 1px var(--grey-200) !important;
}
.el-select__wrapper.is-diabled:hover{
    padding: 1rem;
    box-shadow: 0 0 0 1px var(--grey-100);
}
.el-select__selection{height: 30px;}


/* date picker range */
.date-range-wrap,
.datetime-range-wrap{
    min-width: 18rem;
    font-size: 1.5rem;
    flex-grow: 1;
}
.el-date-editor.el-input__wrapper{
    width: 100%;
    height: fit-content;
}
.el-date-editor.el-input{height: auto; width: auto;}
.el-date-editor.el-input__wrapper,
.el-date-editor--month .el-input__wrapper{
    height: 4.4rem;
    box-shadow: 0 0 0 1px var(--grey-200);
}
.el-range-editor.el-input__wrapper:hover,
.el-date-editor--month .el-input__wrapper:hover{
    box-shadow: 0 0 0 1px var(--grey-400);
}
.el-range-editor.is-active,
.el-date-editor--month .el-input__wrapper.is-focus{
    box-shadow: 0 0 0 1px var(--mint-500);
}
.el-range-editor.is-active:hover{
    box-shadow: 0 0 0 1px var(--mint-500);
}
.el-date-editor .el-range-input{
    font-size: 1.7rem;
}
/* 달력 아이콘 사이즈 */
.el-date-editor .el-range__icon,
.el-date-editor--month .el-range__icon{font-size: 1.7rem;}

/* 시간 선택 */
.el-date-range-picker__time-header{
    display: flex;
    align-items: center;
    gap: 1rem;
}


/* ag-grid */
.grid-wrap{overflow-x:auto;}
.grid-wrap .ag-theme-quartz.ag-theme-mycustom{
    --ag-font-size: 1.7rem;
    --ag-card-radius: 0.4rem;
    --ag-wrapper-border-radius: 0.4rem;
    --ag-border-radius: 0.4rem;
    --ag-cell-horizontal-padding: 1.4rem;

    --ag-borders: none;
    --ag-row-border-color: var(--grey-100);
    --ag-border-color: var(--grey-100);

    --ag-header-foreground-color: var(--grey-600);
    --ag-header-background-color: var(--blue-50);
    --ag-header-column-resize-handle-display: block;
    --ag-header-column-resize-handle-height: 100%;
    --ag-header-column-resize-handle-color: var(--blue-100);
    --ag-header-column-resize-handle-width: 1px;

    --ag-header-column-separator-display: block;
    --ag-header-column-separator-height: 100%;
    --ag-header-column-separator-width: 1px;
    --ag-header-column-separator-color: var(--blue-100);
    /* displaynone 하면 동작안하고 투명색으로하면동작함 */
    /* --ag-header-column-resize-handle-color: transparent !important;   */
    /* --ag-header-column-resize-handle-color: orange !important; */

    --ag-foreground-color: var(--grey-600);
    --ag-background-color: var(--white);
    --ag-odd-row-background-color: var(--white);
    --ag-selected-row-background-color: var(--blue-25);
    --ag-row-hover-color: var(--blue-25);
    --ag-disabled-foreground-color: var(--grey-100);

    --ag-active-color: var(--blue-400);
    --ag-invalid-color: var(--red);
    --ag-checkbox-unchecked-color: var(--grey-200);
    --ag-input-focus-border-color: var(--grey-400);
    --ag-input-focus-box-shadow: none;
    --ag-input-disabled-border-color: var(--grey-200);
    --ag-input-disabled-background-color: var(--grey-100);

    --ag-icon-font-color-group: red;
    --ag-icon-size: 1.8rem;
}
.grid-wrap .ag-ltr .ag-header-cell::before, .ag-ltr .ag-header-group-cell:not(.ag-header-span-height.ag-header-group-cell-no-group)::before{width: 1px;}
.grid-wrap .ag-theme-quartz.ag-theme-mycustom .ag-icon-desc,
.grid-wrap .ag-theme-quartz.ag-theme-mycustom .ag-icon-asc{color: var(--grey-300);}
.grid-wrap .ag-theme-quartz.ag-theme-mycustom .ag-ltr .ag-sort-indicator-icon{padding-left: 0.4rem;}
.grid-wrap .ag-theme-quartz.ag-theme-mycustom .ag-header-cell-text,
.grid-wrap .ag-theme-quartz.ag-theme-mycustom .ag-header-group-text{font-weight: 700;}

.grid-wrap .ag-theme-quartz.ag-theme-mycustom .ag-header-group-cell{justify-content: center;}

/* 그룹으로된헤더  서비스대시보드- 이번달센터별누적에서 2층짜리컬럼 */
.ag-header-group-cell-with-group {
    border-bottom : 1px solid var(--blue-100)
}
/* 마지막 셀 우측 선 없애기 */
.ag-header-cell:last-child{
    --ag-header-column-separator-width: 0;
    --ag-header-column-resize-handle-width: 0;
}
.ag-header-container .ag-header-row-column .ag-column-last::before{background-color: transparent;}
.ag-header-container .ag-header-row-column .ag-column-last .ag-header-cell-resize::after{
    height: 0;
}

/* ag-grid row 중앙정렬*/
.cell-center {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ag-grid row 좌측정렬*/
.cell-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ag-grid row 우측정렬*/
.cell-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    white-space: normal;
    overflow-wrap: break-word;
}

/* 셀 강조 */
.cell-point{
    font-weight: 500;
    color: var(--red);
}


/*헤더 중앙정렬*/
.ag-header-cell,
.ag-header-cell-label {
    justify-content: center;
}

/*ag-grid 보기 버튼 font size*/
.list-view-btn{
    font-size: 1.7rem ;
}

/* 체크박스 가운데 정렬 */
/* .ag-header-cell:first-child .ag-header-cell-comp-wrapper{
    display: none;
} */
.ag-ltr .ag-header-select-all,
.ag-ltr .ag-selection-checkbox{margin-right: 0;}

.grid-detail{
    padding: 2rem;
    background-color: var(--blue-25);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.grid-detail .txt-wrap{
    justify-content: space-between;
    gap: 1rem;
}
.grid-detail .txt-wrap p{
    font-size: 1.7rem;
    color: var(--grey-500);
    text-align: left;
    white-space: pre-wrap;
}
.grid-detail .txt-wrap .tit{
    font-weight: 700;
    color: var(--grey-600);
    flex-shrink: 0;
    text-align: left;
}
.grid-detail + .grid-acco-content{
    border-top: 1px solid var(--grey-200);
}
.grid-acco-content{
    padding: 2rem;
    background-color: var(--blue-25);
    display: flex;
    justify-content: space-between;
}
.grid-acco-content .btn.small{height: 4rem;}
.grid-acco-content pre{white-space: pre-wrap;}

.grid-detail pre{white-space: pre-wrap;}


/* apex chart */
.apexcharts-text { filter:none !important; }

.legend-stack .apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.apexcharts-datalabels-group text {
    font-size: 1.5rem;
    font-weight: 700;
}

.bg-grey-50 {
    background-color: var(--grey-50);
}

/* 250107 추가 로딩 애니메이션 (loading.html) */
.loader {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 10px;
  }

  .loader div {
    width: 8%;
    height: 24%;
    background: var(--grey-400);
    position: absolute;
    left: 50%;
    top: 30%;
    opacity: 0;
    border-radius: 50px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    animation: fade458 1s linear infinite;
    animation-play-state :  paused;
  }

  .loader.active div {
    animation-play-state :  running;
  }



  @keyframes fade458 {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  .loader .bar1 {
    transform: rotate(0deg) translate(0, -130%);
    animation-delay: 0s;
  }

  .loader .bar2 {
    transform: rotate(30deg) translate(0, -130%);
    animation-delay: -1.1s;
  }

  .loader .bar3 {
    transform: rotate(60deg) translate(0, -130%);
    animation-delay: -1s;
  }

  .loader .bar4 {
    transform: rotate(90deg) translate(0, -130%);
    animation-delay: -0.9s;
  }

  .loader .bar5 {
    transform: rotate(120deg) translate(0, -130%);
    animation-delay: -0.8s;
  }

  .loader .bar6 {
    transform: rotate(150deg) translate(0, -130%);
    animation-delay: -0.7s;
  }

  .loader .bar7 {
    transform: rotate(180deg) translate(0, -130%);
    animation-delay: -0.6s;
  }

  .loader .bar8 {
    transform: rotate(210deg) translate(0, -130%);
    animation-delay: -0.5s;
  }

  .loader .bar9 {
    transform: rotate(240deg) translate(0, -130%);
    animation-delay: -0.4s;
  }

  .loader .bar10 {
    transform: rotate(270deg) translate(0, -130%);
    animation-delay: -0.3s;
  }

  .loader .bar11 {
    transform: rotate(300deg) translate(0, -130%);
    animation-delay: -0.2s;
  }

  .loader .bar12 {
    transform: rotate(330deg) translate(0, -130%);
    animation-delay: -0.1s;
  }


/* -- 반응형 노트북-- */
@media screen and (max-width: 1465px){
    /* 헤더 */
    header .weather-wrap{display: none;}
    .update-wrap .date-wrap{
        flex-direction: row;
    }
}

/* -- 반응형 노트북, 태블릿 가로 -- */
@media screen and (max-width: 1280px){
    /* 좌측 메뉴 */
    nav.pc{display: none;}
    nav.tablet.show{
        display: block;
        position: relative;
    }
    nav.tablet .dimmed{
        width: 100vw;
        height: 100dvh;
        display: block;
        background-color: rgba(22, 29, 36, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 92;
    }
    nav.tablet.show .nav-wrap{
        width: 37.5rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 93;
        animation: leftSlideTablet 0.5s;
    }
    nav.tablet .group{
        padding: 2rem;
        background-color: var(--white);
        border-bottom: 1px solid var(--grey-100);
    }
    nav.tablet .group h1 a{
        display: block;
        /* width: 6.4rem; */
        height: 2.2rem;
        /* background: url(../img/logo-navy.png) no-repeat center center; */
        width: 12rem;
        background: url(../img/square-logo-navy.png) no-repeat center center;
        background-size: contain;
    }
    nav.tablet .update-wrap{
        justify-content: center;
        background-color: var(--grey-50);
        border: 0;
    }

    /* 20250310: 사이드메뉴 높이 수정 */
    nav.tablet .nav-menu{
        display: flex;
        /* height: calc(100vh - 16.1rem); */
        height: calc(100vh - 12.5rem);
    }

    nav.tablet .nav-menu .main-category{
        padding-top: 2rem;
    }
    nav.tablet .nav-menu .sub-category{
        padding-top: 3.6rem;
        background-color: var(--white);
        flex-grow: 1;
        animation: none;
    }
    nav.tablet .nav-menu .sub-category ul li a{
        color: var(--grey-600);
    }
    nav.tablet .nav-menu .sub-category ul li:hover,
    nav.tablet .nav-menu .sub-category ul li.active{
        background-color: var(--blue-25);
    }

    /* 250326 nav-wrap tooltip 사이즈 조정 */
    nav .weather-wrap .tooltip-bottom[data-tooltip]::before{
        width: initial;
        min-width: 12rem;
        z-index: 99;
    }

    /* 헤더 */
    header .update-wrap{display: none;}
}

/* -- 반응형 태블릿 세로 -- */
@media screen and (max-width: 980px){
    html,body{
        font-size: 59%;
    }

    /* 달럭 패널 */
    .el-date-range-picker{
        width: 34rem;
        max-height: 48rem;
        overflow-y: scroll;
    }
    .el-date-range-picker .el-picker-panel__body{
        display: flex;
        flex-direction: column;
        min-width: initial;
        width: 100%;
    }
    .el-date-range-picker__content{
        width: 100%;
        float: initial;
    }
    .el-date-range-picker__time-header{
        justify-content: center;
        flex-direction: column;
    }
    .el-date-range-picker__time-header .el-icon{
        transform: rotate(90deg);
    }
    /* 250114 모니터링 radio-flex-wrap 분기점 추가 */
    .shop-monitoring .remote-control .line-card.data button {
        flex: 1 0 auto;
    }
    .shop-monitoring .remote-control .line-card.data .radio-flex-wrap {
        width: 100%;
    }
    .shop-monitoring .remote-control .line-card.data .radio-flex-wrap label{
        flex: 1 0 33%;
    }


    /* 20250225: 조회/search 버튼 css 추가 */
    .filter-area .btn-wrap button {
        font-size: 1.6rem;
    }
}

/* -- 반응형 모바일 -- */
@media screen and (max-width: 600px){
    html,body{
        font-size: 57%;
    }
    header{padding: 1rem 1.6rem;}
    header .header-btn{padding: 1rem;}
    header .header-btn.full{display: none;}
    header .alarm.active::after{top: 1rem; right: 1rem;}

    section.page-contents{
        height: calc(100dvh - 6.5rem);
        padding: 1.6rem 1.6rem 3rem 1.6rem;
    }
    section.page-contents.aos{
        height: calc(100dvh - 6.5rem);
    }
    section.card{
        padding: 2.4rem;
        width: 100vw;
        margin-left: -1.6rem;
    }
    .card-wrap{
        width: 100vw;
        margin-left: -1.6rem;
    }
    .card-wrap section.card{
        margin-left: 0;
        width: 100%;
    }

    .pc{display: none !important;}
    .mo{display: flex !important;}
    .mo-pop{display: none;}
    .mo-pop.show{display: block !important;}

    .filter-area .btn-wrap button{height: 4.6rem;}

    .date-range-wrap .date-wrap{
        width: calc(50% - 1rem);
    }

    .side-layer.show{width: 100% !important;}
    .side-layer{min-width: 34rem;}
    .popup.layer .popup-wrap{
        min-width: 30rem;
        max-width: initial;
        width: calc(100% - 3.2rem);
        max-height: calc(100% - 2rem);
    }

    .receipt-info-wrap > .flex-cs{
        flex-wrap: wrap;
    }
    .receipt-info-wrap .txt-wrap::after{
        display: none;
    }
    .img-file .txt-wrap{
        flex-direction: column;
        align-items: flex-start;
    }
    /* .filter-area .select-group > div{width: calc(50% - 1rem);}
    .filter-area .input-wrap.quantity{width: 100%;} */

    .system-label{flex-wrap: wrap;}
    .system-label p{font-size: 1.5rem;}

    .popup-bottom .flex-cb{flex-wrap: wrap;}
    .popup-bottom .flex-cb div,
    .popup-bottom .flex-cb div .el-radio-group{width: 100%;}
    .popup-bottom .flex-cb div.flex-cc{justify-content: space-between;}

    .oper-info > .card > button {width: 100%;}


    /* 20250304: 모바일헤더 검색영역 수정 */
    header .search-bar .select-wrap{
        display: none !important;
    }
    header .search-bar.active{
        width: fit-content;
        background: transparent;
        border-radius: 0;
        padding: 1rem;
    }
}

/* 정렬 옵션 스타일 */
.sort-options {
	margin: 0 16px;
	margin-left: auto;
}

.sort-select {
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: white;
	font-size: 2rm;
	cursor: pointer;
}

.sort-select:focus {
	outline: none;
	border-color: #007bff;
}