@charset "utf-8";

/* ==========================================================================
⚠️  BEM NAMING CONVENTION REQUIRED
 -----------------------------------------------------------------------------
 이 파일의 모든 CSS 클래스는 반드시 BEM 규칙을 따릅니다.

 Block      : .block
 Element    : .block__element
 Modifier&Status   : .block--modifier || .block--status || .block__element--modifier ||.block__element--status

 Example
 .card{} .tree-layout 
 .card__title{}
 .card--active{}
 .card__button--primary{}
 .card__button--active{}
 
 단, is-active, is-open과 같은 상태는 class 작명이 가능하며,  이어지는 단어의 경우는 하이픈(-)을 이용하여 작명 가능.
 

 ❌ 잘못된 예
 .card-title
 .title
 .card .title

 유지보수를 위해 반드시 BEM 구조를 지켜주세요.
========================================================================== */

.wrap{
	min-width: 320px;
}

/* Header */
.header{
	height: 50px; 
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	position: relative; z-index: 2;
}
.header__logo{
	width: 240px; flex-shrink: 0; text-align: center;
	background-color: var(--color-bg-sidebar); padding: var(--pd-sm) var(--pd-md);
	display: flex; justify-content: center; align-items: center;
}
.header__logo img{
	width: 160px; display: block;
}
.header__nav{
	flex-grow: 1; background-color: var(--color-bg-surface);
	border-bottom: 1px solid var(--color-border-default);
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
	padding-right: var(--pd-rg);
}
.header__system{
	height: 100%;
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
}
.header__system .system__btn{
	height: 100%;
	padding: 0 var(--pd-lg); font-size: var(--fs-md); font-weight: 500; position: relative;
	font-family: var(--font-score); font-weight: bold; color: var(--color-text-default);
}
.header__system .system__btn:hover{
	color: var(--color-text-primary);
}
.header__system .system__btn.active{
	color: var(--color-text-primary); 
}
.header__system .system__btn.active::before{
	content: ""; width: 100%; height: 3px;
	position: absolute; left: 0; bottom: 0; background-color: var(--color-bg-primary);
}
.header__nav .users{
	display: none;
}
.header__utill .btn{
	font-size: var(--fs-sm);
}

/* Container */
.container{
	height: calc(100dvh - 50px);
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
}
.gnb{
	width: 240px; flex-shrink: 0; background-color: var(--color-bg-sidebar);
	position: relative;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
}
.gnb__list{
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	padding: 0;
	overflow-y: auto;
}
.gnb__list::-webkit-scrollbar {
    width: 6px;
}
.gnb__list::-webkit-scrollbar-track {
    background-color: var(--color-bg-sidebar); border: none;
}
.gnb__list::-webkit-scrollbar-thumb { 
    background-color: var(--color-text-primary-strong);
}
.gnb__list::-webkit-scrollbar-button {
	border: 1px solid var(--color-border-default); display: none;
}
.gnb__list > li{
	border-top: 1px solid var(--color-border-dark); padding: 10px 0;
}
.gnb__list > li:first-child{
	border-top: none;
}
.gnb__list li a{
	display: block;
}
.gnb__list li.no-data{
	color: var(--color-text-lightgray); text-align: center; padding: 10px; font-size: var(--fs-rg);
}
.gnb__list > li > a{
	color: var(--color-text-nav); font-size: var(--fs-rg); padding: var(--pd-xs) 15px 0 20px;
	font-weight: bold; pointer-events: none;
}
.gnb__list > li > a + .sub-menu{
	padding-left: 10px;
}
/*
.gnb__list > li > a::after{
	content: ""; width: 10px; height: 10px; display: inline-block;
	background-color: var(--color-bg-white);
	mask-image: url("/img/ico-arrow-thin.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
	margin-left: 3px; transition: all 0.2s ease;
}
*/
.gnb__list > li.closed > a::after{
	transform: rotate(180deg);
}
.gnb__list > li > ul > li{
	padding: 0 10px;
}
.gnb__list > li > ul > li > a{
	color: var(--color-text-nav-sub); padding: 6px 10px; font-size: var(--fs-md);
}
.gnb__list > li > ul > li > a + .sub-menu{
	display: none; padding: 10px 0 5px 0;
}
.gnb__list > li > ul > li.has-child > a{
	position: relative;	
}
.gnb__list > li > ul > li.has-child > a::before{
	content: ""; width: 10px; height: 10px; display: block;
	position: absolute; right: 10px; top: calc(50% - 5px); background-color: var(--color-bg-surface);
	mask-image: url("../img/ico-arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
	transform: rotate(0);
}
.gnb__list > li > ul > li.has-child.closed > a::before{
	transform: rotate(0);
}
.gnb__list > li > ul > li.has-child.open > a::before{
	transform: rotate(180deg);
}
.gnb__list > li > ul > li > a.menu--active{
	border-radius: 8px; position: relative;
	background-color: var(--color-bg-primary); color: var(--color-text-inverse);
}
.gnb__list > li > ul > li > a.menu--active::before{
	content: ""; width: 10px; height: 10px; display: block;
	position: absolute; right: 10px; top: calc(50% - 5px); background-color: var(--color-bg-surface);
	mask-image: url("../img/ico-arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
	transform: rotate(-90deg);
}
.gnb__list > li > ul > li > ul > li > a{
	color: var(--color-text-placeholder); padding: 3px 20px; font-size: var(--fs-rg); position: relative;
}
.gnb__list > li > ul > li > ul > li > a.menu--active{
	color: var(--color-text-inverse); background-color: var(--color-bg-primary); border-radius: 8px;
}
.gnb__list > li > ul > li > ul > li > a::before{
	content: ""; width: 1px; height: 100%; display: block;
	position: absolute; left: 8px; top: 0; background-color: var(--color-bg-gray);
}
.gnb__list > li > ul > li > ul > li > a.menu--active::before{
	background-color: var(--color-text-inverse); display: none;
}
.gnb .users{
	background-color: var(--color-bg-primary-strong); text-align: center; color: var(--color-text-inverse);
	padding: var(--pd-md) var(--pd-rg);
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
	gap: 10px;
}
.gnb .users .btn--logout{
	color: var(--color-text-inverse);
}
.gnb .users__btn{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
	gap: 5px; margin-top: 10px;
}
.gnb .users__btn .btn{
	font-size: var(--fs-sm);
}
.gnb .users__img{
	width: 80px; height: 80px; border-radius: var(--radius-pill); overflow: hidden;
	background-color: var(--color-bg-gray);
}
.gnb .users__img img{
	width: 100%; display: block;
}
.gnb .users__name dt{
	font-weight: bold;
}


/* Contents */
.content{
	flex-grow: 1; 
	/* background-color: var(--color-bg-onSurface); */
}
/* Iframe 컨테이너 */
.iframe-container{
	flex: 1;
	width: 100%;
	height: 100%;
	display: flex; flex-direction: column;
}
.content__header{
	flex-shrink: 0; padding: var(--pd-sm) var(--pd-rg);
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
}
.content__header .content__title h3{
	font-size: var(--fs-lg); color: var(--color-text-black);
}
.content__header .breadcrumb{
	font-size: var(--fs-sm); color: var(--color-text-default);
}
.content__header .content__btns{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
	gap: 5px;
}
.content__body{
	flex-grow: 1; overflow-y: auto; padding: 0 var(--pd-rg) var(--pd-rg) var(--pd-rg);
}
.content__body:not(:has(.search-box)) > div{
	border-top: 1px solid var(--color-border-default); padding-top: 15px;
}

.content__wrap{
	height: 100%;
}
.content__frame{
	height: 100%;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
}



/* Grid table */
.tbl--register{
	min-width: 400px;
}
.tbl--register table{
	min-width: 100%;
}
.tbl--register table tr th,
.tbl--register table tr td{
	font-size: var(--fs-rg); padding: var(--pd-xs); border: 1px solid var(--color-border-default);
}
.tbl--register table tr th{
	text-align: left; font-weight: normal; background-color: var(--color-bg-grid-head);
	color: var(--color-text-black); padding: var(--pd-xs) var(--pd-sm);
}
/*.tbl--register table tr .required::after{
	content: ""; width: 5px; height: 5px; display: inline-block;
	background-color: var(--color-bg-danger); border-radius: var(--radius-pill); margin-left: 3px;
	position: relative; top: -6px;
}*/
.tbl--register table tr td input,
.tbl--register table tr td select,
.tbl--register table tr td textarea,
.tbl--register table tr td button{
	vertical-align: middle;
}
.tbl--register table tr td input[type="text"],
.tbl--register table tr td select,
.tbl--register table tr td textarea{
	width: 100%; 
}

/* Form register */
.form--register{
	width: 100%; display: grid; grid-template-columns: max-content 1fr; row-gap: 8px; column-gap: 10px;
}
.form-register .tbl--register{
	width: 100%;
}
.form--register dl{
	display: contents;
}
.form--register dl dt{
	display: contents; font-weight: 500; color: var(--color-text-black); white-space: nowrap;
	font-size: var(--fs-rg);
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	padding-top: 3px;
}
.form--register dl dd input{
	width: 100%; 
}

/*.form--register dl{
	width: 100%;
	display: grid; grid-template-columns: max-content 1fr;
	gap: 10px;
}
.form--register dl dt{
	font-weight: normal; color: var(--color-text-black); white-space: nowrap;
}
.form--register dl dd input{
	width: 100%; 
}*/

.h-full{
	height: 100%;
}



/* Search + Content Layout */
.search-layout{
	height: 100%;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 10px;
}
.search-layout .search-box{
	flex-shrink: 0;
}
.search-layout .tbl-wrap,
.search-layout .tabset{
	flex-grow: 1;
}

/* Tree layout */
.tree-layout{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;
	gap: 15px;
	
	flex-grow: 1; overflow: hidden;
}
.tree-panel{
	height: calc(100% - 2px);
	background-color: var(--color-bg-surface); border-radius: var(--radius-control);
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 5px; 
	/* border: 1px solid var(--color-border-default); padding: 15px; */
}
.tree-panel .tbl__top{
	flex-shrink: 0;
}
.tree-panel .tbl__body{
	min-height: 0; flex-grow: 1;
}
.tree-panel .tui-grid-container{
	/* border: 1px solid var(--color-border-default); */
}
.tree-panel__detail:has(.fc-direction-ltr){
	height: 100%;
}

.tree-panel__source{
	flex-shrink: 0; width: 320px;
}
.tree-panel__detail{
	flex-grow: 1; min-width: 0;
}
.tree-panel__row2{
	height: 100%;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 15px;
}


/* Tbl top */
.tbl__top{
	min-height: 28px;
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
	gap: 10px;
}
.tbl__top .tbl__top--left{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
	gap: 5px;
	flex-grow: 1;
}
.tbl__top .tbl__top--right{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
	gap: 5px;
	flex-grow: 1;
}


/* Grid tbl */
.tbl-wrap{
	height: 100%; 
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	position: relative; gap: 5px;
}
.tbl-wrap .tbl__top{
	flex-shrink: 0;
}
.tbl-wrap .tbl__top .tbl__top--right{
	gap: 0;
}
.tbl-wrap .tbl__top .btn{
	min-width: auto; height: 24px; padding: 0 5px;
	font-family: var(--font-nanum); gap: 3px; color: var(--color-text-strong);
}
.tbl-wrap .tbl__top .btn .icon{
	background-color: var(--color-text-strong);
}
.tbl-wrap .tbl__body{
	 min-height: 0; flex-grow: 1;
}
.tbl-wrap .tbl__body__toast{
	height: calc(100% - 50px);
}
.tbl-wrap .tbl__body__toast:not(:has(.tui-pagination)){
	height: calc(100% - 2px)
}
.tbl-wrap .tbl__total {
	position: absolute; left: 0; bottom: 10px;
	font-size: var(--fs-rg); color: var(--color-text-default);
}

.tbl--row2{
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 20px;
}

/* Title */
.section__title{
	font-size: var(--fs-rg); font-weight: bold; color: var(--color-text-black); padding-left: 14px;
	position: relative;
}
.section__title::before{
	content: ""; width: 10px; height: 10px; display: block;
	position: absolute; left: 0; top: 6px; border-radius: var(--radius-pill);
	border: 3px solid var(--color-border-primary-strong); box-sizing: border-box;
}

/* Icons */
.icon{
	width: 16px; height: 16px; display: inline-block; background-color: #000000; vertical-align: middle;
	mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
	-webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.icon--inverse{
	background-color: var(--color-text-inverse);
}
.icon--primary{
	background-color: var(--color-bg-primary);
}
.icon--gray{
	background-color: var(--color-bg-gray);
}
.icon--strong{
	background-color: var(--color-bg-strong);
}
.icon--green{
	background-color: var(--color-bg-green);
}
.icon--danger{
	background-color: var(--color-bg-danger);
}

.icon-logout{
	mask-image: url("../img/ico-logout.svg");
	-webkit-mask-image: url("../img/ico-logout.svg");
}
.icon-menu{
	mask-image: url("../img/ico-menu.svg");
	-webkit-mask-image: url("../img/ico-menu.svg");
}
.icon-close{
	mask-image: url("../img/ico-close.svg");
	-webkit-mask-image: url("../img/ico-close.svg");
}
.icon-excel{
	mask-image: url("../img/ico-excel.svg");
	-webkit-mask-image: url("../img/ico-excel.svg");
}
.icon-plus{
	mask-image: url("../img/ico-plus.svg");
	-webkit-mask-image: url("../img/ico-plus.svg"); 
}
.icon-minus{
	mask-image: url("../img/ico-minus.svg"); 
	-webkit-mask-image: url("../img/ico-minus.svg"); 
}
.icon-reset{
	mask-image: url("../img/ico-reset.svg");
	-webkit-mask-image: url("../img/ico-reset.svg");
}
.icon-window{
	mask-image: url("../img/ico-window.svg");
	-webkit-mask-image: url("../img/ico-window.svg");
}
.icon-trash{
	mask-image: url("../img/ico-trash.svg");
	-webkit-mask-image: url("../img/ico-trash.svg");
}
.icon-edit{
	mask-image: url("../img/ico-edit.svg");
	-webkit-mask-image: url("../img/ico-edit.svg");
}
.icon-arrow{
	mask-image: url("../img/ico-arrow-normal.svg");
	-webkit-mask-image: url("../img/ico-arrow-normal.svg");
	transform: rotate(-90deg);
}
.icon-arrow-down{
	mask-image: url("../img/ico-arrow-normal.svg");
	-webkit-mask-image: url("../img/ico-arrow-normal.svg");
}
.icon-arrow-up{
	mask-image: url("../img/ico-arrow-normal.svg");
	-webkit-mask-image: url("../img/ico-arrow-normal.svg");
	transform: rotate(-180deg);
}
.icon-info{
	mask-image: url("../img/ico-infomation.svg");
	-webkit-mask-image: url("../img/ico-infomation.svg");
}
.icon-search{
	mask-image: url("../img/ico-search.svg");
	-webkit-mask-image: url("../img/ico-search.svg");
}
.icon-check{
	mask-image: url("../img/ico-check.svg");
	-webkit-mask-image: url("../img/ico-check.svg");
}
.icon-selected{
	mask-image: url("../img/ico-selected.svg");
	-webkit-mask-image: url("../img/ico-selected.svg");
}
.icon-remove{
	mask-image: url("../img/ico-remove.svg");
	-webkit-mask-image: url("../img/ico-remove.svg");
}
.icon-more{
	mask-image: url("../img/ico-more.svg");
	-webkit-mask-image: url("../img/ico-more.svg");
}
.icon-return{
	mask-image: url("../img/ico-return.svg");
	-webkit-mask-image: url("../img/ico-return.svg");
}
.icon-authority-add{
	mask-image: url("../img/ico-authority-add.svg");
	-webkit-mask-image: url("../img/ico-authority-add.svg");
}
.icon-authority-remove{
	mask-image: url("../img/ico-authority-remove.svg");
	-webkit-mask-image: url("../img/ico-authority-remove.svg");
}
.icon-file{
	mask-image: url("../img/ico-file.svg");
	-webkit-mask-image: url("../img/ico-file.svg");
}
.icon-warning{
	mask-image: url("../img/ico-warning.svg");
	-webkit-mask-image: url("../img/ico-warning.svg");
}


/* Button */
.btn{
	min-width: 40px; height: 28px; padding: 0 10px; line-height: 1;
	color: var(--color-text-default); font-weight: 500; font-size: var(--fs-rg);
	display: inline-flex; flex-direction: row; flex-wrap: nowrap; 
	align-content: flex-start; justify-content: center; align-items: center; gap: 5px;
	border-radius: var(--radius-control); overflow: hidden; 
	position: relative;
}
.btn:hover{
	border-color: var(--color-button-border-hover); transition: border 0.4s ease;
}
.btn.btn--sm{
	height: 24px; font-size: 13px;
}
.btn.btn--sm .icon{
	width: 12px; height: 12px;
}
.btn-icon{
	min-width: auto; width: 28px; height: 28px; padding: 0; display: inline-block; border-radius: var(--radius-control); 
	position: relative;
}
.btn-icon .icon{
	width: 80%; height: 80%;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.btn-icon.btn--sm{
	width: 18px; height: 18px;
}
.btn-icon.btn--sm .icon{
	width: 100%; height: 100%;
}
.btn--circle{
	border-radius: var(--radius-pill);
}
.btn--circle.btn--gray{
	background-color: var(--color-bg-gray);
}
.btn--circle.btn--lightgray{
	background-color: var(--color-bg-lightgray);
}
.btn-icon.btn--circle.btn--sm .icon{
	width: 60%; height: 60%;
}

/* Button - outline */
.btn--outlined{
	border: 1px solid var(--color-button-border-default);
	transition: all 0.4s ease;
}
.btn--outlined.btn--white{
	border-color: var(--color-border-white); color: var(--color-text-white);
}
.btn--outlined.btn--inverse{
	border-color: var(--color-border-inverse); color: var(--color-text-inverse);
}
.btn--outlined.btn--gray{
	border-color: var(--color-border-gray); color: var(--color-text-default);
}
.btn--outlined.btn--danger{
	border-color: var(--color-border-danger); color: var(--color-text-danger);
}
.btn--outlined:hover{
	box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* Button - Contained */
.btn--contained.btn--gray{
	background-color: var(--color-bg-gray); color: var(--color-text-inverse);
}
.btn--contained.btn--primary{
	background-color: var(--color-bg-primary); color: var(--color-text-inverse);
}
.btn--contained.btn--strong{
	background-color: var(--color-bg-primary-strong); color: var(--color-text-inverse);
}
.btn--contained.btn--danger{
	background-color: var(--color-bg-danger); color: var(--color-text-danger);
}
.btn--contained:hover::after{
	content: ""; width: 0; height: 0; display: block;
	background: rgba(255, 255, 255, 0.15); 
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	animation-name: btnHover; animation-duration: 0.6s; animation-fill-mode: forwards; 
	border-radius: var(--radius-pill);
}
@keyframes btnHover{
	0%{
		width: 0; height: 0;
	}
	100%{
		width: 200%; height: 200%;
	}
}


/* Button - Subtle */
.btn.btn--subtle{
	padding: 0 5px; gap: 2px;
}
.btn.btn--subtle.btn--danger{
	color: var(--color-text-danger);
}





/* Modal */
.layer-wrap{
	background-color: var(--color-bg-surface); border-radius: var(--radius-surface);
	border: 1px solid var(--color-border-layer); box-shadow: 0 0 20px rgba(0,0,0,0.15);
	position: fixed; left: 50%; top: 50%; outline: none;
	overflow: hidden;

	max-width: 90%; max-height: 90%; min-height: 120px;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
}
.layer__header{
	padding: var(--pd-sm) var(--pd-rg);
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
	
	flex-shrink: 0;
}
.layer__header h3{
	font-size: var(--fs-md); font-weight: bold; color: var(--color-text-black);
}
.layer__header .close-box .btn-icon{
	vertical-align: middle;
}
.layer__body{
	padding: 0 var(--pd-rg) var(--pd-rg) var(--pd-rg); font-size: var(--fs-rg);	
	flex-grow: 1; overflow-y: auto;
}
.layer__btns{
	padding-top: var(--pd-sm);
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
	gap: 5px;
}
.layer__btns .layer__btns--left{
	flex-grow: 1;
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
	gap: 5px;
}
.layer__btns .layer__btns--right{
	flex-grow: 1;
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
	gap: 5px;
}

.layer__body:has(> .layer__btns){
	padding-bottom: 64px;
}
.layer__body > .layer__btns{
	width: 100%; padding: var(--pd-rg); background-color: var(--color-bg-surface);
	position: absolute; right: 0; bottom: 0; 
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
	gap: 10px; z-index: 10;
}

.modal{
	width: 100dvw; height: 100dvh; background: rgba(0,0,0,0.3);
	position: fixed; left: 0; top: 0; z-index: 999999999999999;
}
.modal__container{
	background-color: var(--color-bg-surface); border-radius: var(--radius-surface);
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 15px;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 15px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}
.modal__content{
	min-width: 240px; width: 100%; max-width: 300px; min-height: 100px;
	text-align: center; font-size: var(--fs-rg); color: var(--color-text-default);
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
	font-size: var(--fs-md); 
}
.modal__content p{
	padding: 0 10px; white-space: pre-line;
}
.modal__btns{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;
	gap: 10px;
}
.modal__btns .btn{
	flex-grow: 1; height: 36px;
}

.is-modal-open .header::before,
.is-modal-open .gnb::before{
	content:""; width: 100%; height: 100%; display: block; background: rgba(0,0,0,0.3);
	position: absolute; left: 0; top: 0; z-index: 999999;
}

.layer-wrap:has(.workday){
	height: 90dvh;
}
.layer-wrap:has(.project-search),
.layer-wrap:has(.code-search),
.layer-wrap:has(.vendor-search),
.layer-wrap:has(.personnel-search){
	height: min(86vh, 900px);
}

.product-register{
	width: 600px;
}
.team-history{
	width: 1000px;
}

.form-register{
	width: 1000px; 
}

.charger-modify{
	width: 560px;
}
.charger-modify .tbl--register{
	width: 100%;
}
.workday{
	width: 420px; position: relative;
}
.workday .datepicker-container .tui-datepicker-type-date{
	width: 188px;
}
.workday__form{
	display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
	row-gap: 10px; column-gap: 10px;
}
.workday__form > div{
	width: calc(50% - 5px);
}
.workday__form > div.workday__technical{
	width: 100%; border-top: 1px solid var(--color-border-default); padding-top: 10px; display: none;
}
.workday__form > div:has(textarea){
	width: 100%;
}
/* 임시 워킹데이 CSS 삭제 예정 */
/*.workday__form > div.workday__technical .workday__form div:nth-child(5),
.workday__form > div.workday__technical .workday__form div:nth-child(6),
.workday__form > div.workday__technical .workday__form div:nth-child(7),
.workday__form > div.workday__technical .workday__form div:last-child{
	width: 100%;
}*/
/* 임시 워킹데이 CSS 삭제 예정 */
.workday__form > div dl{
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 2px;
}
.workday__form > div dl dt{
	font-weight: 500; color: var(--color-text-strong); font-size: var(--fs-rg);
	display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
	gap: 5px;
}
.workday__form > div dl dt.title--check{
	justify-content: space-between;
}
.workday__form > div dl dt.title--check label.label-ui span{
	color: var(--color-text-default); font-weight: 400;
}
.workday__form > div dl dd div.input--search button:disabled{
	border: none !important;
}
.workday__form > div dl dd div.input--search.search--disable{
	background-color: var(--color-bg-disabled);
}
.workday__form > div dl dt.title--check > span.required::after{
	margin-left: 3px;
	top: -6px;
}
.workday__form > div dl dd input,
.workday__form > div dl dd select,
.workday__form > div dl dd textarea{
	width: 100%;
}
.workday__form > div dl dd .datepicker,
.workday__form > div dl dd input[type="time"]{
	width: 100%; max-width: 100%; min-width: 100%;
}
.workday__form > div dl dd textarea{
	display: block;
}
.workday__form .workday__form--column1{
	width: 100%;
}
.workday__form .workday__form--column4-1{
	width: 25%;
}
.workday__form .workday__form--column4-3{
	width: calc(75% - 10px);
}
.workday__title{
	font-size: var(--fs-rg); font-weight: bold; color: var(--color-text-strong);
}
.workday--row{
	border-bottom: 4px solid var(--color-border-layer);
	transition: all 0.2s ease;
	
	background-color: var(--color-bg-onSurface); border-radius: var(--radius-surface); padding: 15px;
	margin-top: 10px;
	animation: workdayAni 0.4s ease;
}

@keyframes workdayAni{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.workday--row:first-of-type{
	margin-top: 0;
}
#workdayToggleAllRowsBtn{
	width: 80px; padding: 0;
}
.workday--row__body{
	margin-top: 10px;
}
.workday--row__toggle{
	width: 24px; height: 24px; border-radius: var(--radius-pill); position: relative;
	background-color: var(--color-bg-lightgray); text-indent: -9999px;
}
.workday--row__toggle::before{
	content: ""; width: 60%; height: 60%; display: block; background-color: var(--color-bg-white);
	mask-image: url("../img/ico-arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
	-webkit-mask-image: url("../img/ico-arrow-normal.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(180deg);
}
.workday--row.is-collapsed .workday--row__toggle::before{
	transform: translate(-50%, -50%);
}

/* 워킹데이 일괄수정 */
.workday-bulk{
	width: 1400px; overflow-x: auto;
}
.workday-bulk__technical{
	width: 600px;
}


/* 검색필터+그리드 */
.search-panel{
	width: 1000px; height: 100%; min-height: 60dvh;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 10px; overflow: hidden;
}
.search-panel__bar{
	flex-shrink: 0;
}
.search-panel__bar .input--search{
	height: 32px; border-color: var(--color-border-strong);
}
.search-panel__bar .input--search .btn-icon:has(.icon-search){
	width: 30px; height: 30px; 
}

.search-panel__result{
	flex-grow: 1; 
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; overflow: hidden;
}
.search-panel__result .custom-grid{
	height: 100%;
}
.custom-grid{
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; overflow: hidden;
}
.custom-grid ::-webkit-scrollbar {
    width: 10px;
}
.custom-grid ::-webkit-scrollbar-track {
    background-color: var(--color-bg-surface); border: 1px solid var(--color-border-default);
	box-sizing: border-box;
}
.custom-grid ::-webkit-scrollbar-thumb { 
    background-color: var(--color-border-default);
}
.custom-grid ::-webkit-scrollbar-button {
	display: none;
}
.custom-grid__head{
	background-color: var(--color-bg-grid-head); font-size: var(--fs-rg); flex-shrink: 0;
	color: var(--color-text-strong); font-weight: 500; overflow-y: scroll; overflow-x: hidden;
}
.custom-grid__head .custom-grid__rows{
	text-align: center;
}
.custom-grid__body{
	font-size: var(--fs-rg); flex-grow: 1; overflow-y: scroll; overflow-x: hidden; scrollbar-gutter: stable;
	border-bottom: 1px solid var(--color-border-default); position: relative;
}
.custom-grid__body::before{
	content: ""; width: 1px; height: 100%; display: block;
	position: absolute; left: 0; top: 0; background-color: var(--color-border-default);
}
.custom-grid__rows{
	display: grid; padding: 0; border: 1px solid var(--color-border-default);
	position: relative;
	
	grid-auto-flow: column; grid-auto-columns: 1fr;
	grid-template-columns: 120px 1fr 120px 200px;
	
}
.custom-grid__rows > div{
	border-left: 1px solid var(--color-border-default); padding: 5px;
}
.custom-grid__rows > div:first-child{
	border-left: none;
}

.custom-grid__body .custom-grid__rows{
	margin-top: -1px; cursor: pointer;
}
.custom-grid__body .custom-grid__rows:hover{
	background-color: var(--color-bg-grid-hover);
}
.custom-grid__body .custom-grid__rows:first-of-type{
	margin-top: 0;
}
.custom-grid__body .custom-grid__rows > div{
	display: flex; align-items: center;
}
.personnel-upload .custom-grid__body .custom-grid__rows > div{
	text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block;
}
.custom-grid__body .custom-grid__rows > div.grid__remark{
	display: block;
}
.custom-grid__body .custom-grid__rows .grid__remark--title{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
	gap: 5px;
}
.custom-grid__body .custom-grid__rows .grid__remark--title .btn-icon{
	flex-shrink: 0;
}
.custom-grid__body .custom-grid__rows .grid__remark--title .btn-icon.is-open{
	transform: rotate(180deg);
}
.custom-grid__body .custom-grid__rows .grid__remark--detail{
	display: none; font-size: var(--fs-sm);
}
.custom-grid__body .custom-grid__rows .project__code,
.custom-grid__body .custom-grid__rows .project__date{
	text-align: center;
}
.custom-grid__body .no-data{
	padding: 10px; text-align: center; border: 1px solid var(--color-border-default);
}
.custom-grid__body .custom-grid__rows:has(.upload--error){
	background-color: var(--color-bg-danger-subtle);
}
.custom-grid__body .custom-grid__rows .upload--error{
	border: 1px solid var(--color-border-danger);
	
}

.project-upload{
	width: 1000px; max-height: 50dvh;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 10px; overflow-x: auto;
}
.project-upload .custom-grid__rows{
	grid-template-columns: 40px 100px 100px 100px 100px 120px 120px 120px 1fr;
}
.project-upload .custom-grid__rows > div{
	padding: 5px;
}
.project-upload .custom-grid__body .custom-grid__rows{
	cursor: default; 
}
.personnel-upload{
	width: 1200px; max-height: 50dvh;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 10px; overflow-x: auto;
}
.personnel-upload .custom-grid__rows{
	grid-template-columns: 40px 100px 100px 100px 100px 120px 280px 80px 100px 100px; cursor: default;
	pointer-events: none;
}
.project-upload--error{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
	gap: 4px;
}
.code-search .custom-grid__rows{
	grid-template-columns: 120px 160px 1fr;
}
.personnel-search{
	width: 700px;
}
.personnel-search .custom-grid__rows{
	grid-template-columns: 120px 1fr 1fr 1fr;
}
.vendor-search{
	width: 700px;
}
.vendor-search .custom-grid__rows{
	grid-template-columns: 120px 1fr;
}



/* 사원검색 모달 */
.search-wrap{
	width: 1000px; min-height: 400px;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 10px; overflow: hidden;
}
.search-wrap .input--search + div{
	flex-grow: 1;
}

/* tui grid */
.content__body .tui-grid-tree-icon i,
.layer__body .tui-grid-tree-icon i{
	background: url("../img/img-tui.png") no-repeat -14px -35px;
}
.content__body .tui-grid-tree-depth i,
.layer__body .tui-grid-tree-depth i{
	background: url("../img/img-tui.png") no-repeat;
}
.content__body .tui-grid-layer-selection,
.content__body .tui-grid-layer-focus-border,
.content__body .tui-grid-layer-focus-deactive .tui-grid-layer-focus-border,
.layer__body .tui-grid-layer-selection,
.layer__body .tui-grid-layer-focus-border,
.layer__body .tui-grid-layer-focus-deactive .tui-grid-layer-focus-border{
    pointer-events: none;
}
.content__body .tui-grid-layer-editing,
.layer__body .tui-grid-layer-editing{
	border-color: var(--color-border-default); background-color: inherit;
}
.content__body .tui-grid-layer-editing input[type="text"],
.content__body .tui-grid-layer-editing input[type="password"],
.layer__body .tui-grid-layer-editing input[type="text"],
.layer__body .tui-grid-layer-editing input[type="password"]{
	border-color: var(--color-border-strong);
}
.content__body .tui-grid-container p, 
.content__body .tui-grid-container input,
.content__body .tui-grid-container textarea,
.layer__body .tui-grid-container p, 
.layer__body .tui-grid-container input,
.layer__body .tui-grid-container textarea{
	font-family: var(--font-nanum); font-size: var(--fs-rg); padding: 0 5px;
}
.content__body .tui-grid-cell-content input[type="text"], 
.content__body .tui-grid-cell-content input[type="password"],
.layer__body .tui-grid-cell-content input[type="text"], 
.layer__body .tui-grid-cell-content input[type="password"]{
	width: 100% !important;
}
.content__body .tui-grid-container input,
.layer__body .tui-grid-container input{
	height: 24px !important;
}
.content__body .tui-grid-layer-focus,
.layer__body .tui-grid-layer-focus{
    display: none !important;
}


.content__body .tui-pagination .tui-first-child.tui-is-selected,
.layer__body .tui-pagination .tui-first-child.tui-is-selected{
	border: none; border-bottom: 2px solid var(--color-border-primary-strong); 
}
.content__body .tui-pagination .tui-is-selected:hover,
.layer__body .tui-pagination .tui-is-selected:hover{
	background-color: transparent;
}
.content__body .tui-pagination .tui-page-btn,
.layer__body .tui-pagination .tui-page-btn{
	border: none; background-color: transparent; border-radius: 0;
	margin: 0 2px; font-size: var(--fs-rg); font-family: var(--font-nanum); color: var(--color-text-default);
	box-sizing: border-box;
}
.content__body .tui-pagination .tui-page-btn,
.layer__body .tui-pagination .tui-page-btn{
	border-radius: 0;
}
.content__body .tui-pagination .tui-is-selected,
.layer__body .tui-pagination .tui-is-selected{
	border-left: none; border-bottom: 2px solid black; 
}
.content__body .tui-pagination .tui-last-child.tui-is-selected,
.layer__body .tui-pagination .tui-last-child.tui-is-selected{
	border-right: none;
}
.content__body .tui-pagination .tui-first, 
.content__body .tui-pagination .tui-prev, 
.content__body .tui-pagination .tui-next, 
.content__body .tui-pagination .tui-last, 
.content__body .tui-pagination .tui-prev-is-ellip,
.content__body .tui-pagination .tui-next-is-ellip,
.layer__body .tui-pagination .tui-first, 
.layer__body .tui-pagination .tui-prev, 
.layer__body .tui-pagination .tui-next, 
.layer__body .tui-pagination .tui-last, 
.layer__body .tui-pagination .tui-prev-is-ellip,
.layer__body .tui-pagination .tui-next-is-ellip{
	background-color: transparent; height: 28px;
}
.content__body .tui-pagination .tui-is-selected, 
.content__body .tui-pagination strong,
.layer__body .tui-pagination .tui-is-selected, 
.layer__body .tui-pagination strong{
	background: none; color: var(--color-text-primary-strong); font-weight: bold;
}

.content__body .tui-grid-content-area,
.layer__body .tui-grid-content-area{
	border: 1px solid var(--color-border-grid-head); border-left: none; border-right: none;
}
.content__body .tui-grid-no-scroll-x,
.layer__body .tui-grid-no-scroll-x{
    border-bottom: 0;
}
.content__body .tui-grid-cell.tui-grid-cell-header,
.layer__body .tui-grid-cell.tui-grid-cell-header{
	background-color: var(--color-bg-grid-head); color: var(--color-text-black); font-weight: 500;
	border-top: none; font-size: var(--fs-rg);
}
.content__body .tui-grid-header-area,
.layer__body .tui-grid-header-area{
	border-bottom: 1px solid var(--color-border-default);
}
.content__body .tui-grid-header-area .tui-grid-table,
.content__body .tui-grid-table,
.layer__body .tui-grid-header-area .tui-grid-table,
.layer__body .tui-grid-table{
	border-top: none; /*border-right: 1px solid var(--color-border-grid);*/
}
.content__body .tui-grid-header-area,
.layer__body .tui-grid-header-area{
	background-color: var(--color-bg-grid-head);
}
.content__body .tui-grid-cell-header.tui-grid-cell-selected,
.layer__body .tui-grid-cell-header.tui-grid-cell-selected{
	background-color:  var(--color-bg-grid-head);
}
.content__body .tui-grid-cell,
.layer__body .tui-grid-cell{
	font-family: var(--font-default); border-color: var(--color-border-grid);
}
.content__body .tui-grid-cell.team-move,
.layer__body .tui-grid-cell.team-move{
	color: var(--color-text-secondary);
}
.content__body .tui-grid-cell.cell-pointer,
.layer__body .tui-grid-cell.cell-pointer{
	color: var(--color-text-blue); cursor: pointer;
}
.content__body .tui-grid-cell.cell-pointer:hover,
.layer__body .tui-grid-cell.cell-pointer:hover{
	text-decoration: underline;
}
.content__body .tui-grid-layer-selection,
.layer__body .tui-grid-layer-selection{
	border: none; background: none;
}
.content__body .tui-grid-cell,
.layer__body .tui-grid-cell{
	color: var(--color-text-default);
}
.content__body .tui-grid-cell-row-header.tui-grid-cell-selected,
.layer__body .tui-grid-cell-row-header.tui-grid-cell-selected{
	background: none;
}
.content__body .tui-grid-scrollbar-right-top,
.layer__body .tui-grid-scrollbar-right-top{
	background-color: var(--color-bg-grid-head); /* border-bottom: 1px solid var(--color-border-grid-head); */
	border-right-color: var(--color-border-grid);
	border-bottom: 1px solid var(--color-border-default);
}
/*
.content__body .tui-grid-body-area,
.content__body .tui-grid-layer-state{
	border-top: 1px solid var(--color-border-grid-head);
}
*/
.content__body .tui-grid-layer-state,
.layer__body .tui-grid-layer-state{
	border-left: 1px solid var(--color-border-grid);
}
.content__body .tui-grid-body-area .tui-grid-cell,
.layer__body .tui-grid-body-area .tui-grid-cell{
	background-color: transparent;
}
.content__body .tui-grid-cell-current-row,
.layer__body .tui-grid-cell-current-row{
	background-color: var(--color-bg-grid-select);
}
.content__body .tui-grid-cell.tui-grid-cell-legend-row,
.layer__body .tui-grid-cell.tui-grid-cell-legend-row{
	background-color: var(--color-bg-grid-legend);
}
.tui-grid-cell .tui-grid-cell-content{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; font-size: var(--fs-rg);
}
.content__body .tui-grid-row-header-checkbox,
.layer__body .tui-grid-row-header-checkbox{
	padding: 0;
}
.content__body .tui-grid-container .tui-grid-pagination,
.layer__body .tui-grid-container .tui-grid-pagination{
	margin-top: 10px;
}
.content__body .tui-grid-lside-area,
.layer__body .tui-grid-lside-area{
	height: 100%; border-left: 1px solid var(--color-border-grid);
}

.content__body .tui-grid-border-line-top,
.layer__body .tui-grid-border-line-top{
    border-top: none;
}
.content__body .tui-grid-scrollbar-y-outer-border,
.layer__body .tui-grid-scrollbar-y-outer-border{
	background-color: var(--color-border-grid);
}
.content__body .tui-grid-cell-content a,
.layer__body .tui-grid-cell-content a{
	color: var(--color-text-primary);
}
.content__body .tui-grid-container a:hover,
.layer__body .tui-grid-container a:hover{
	text-decoration: underline;
}
.content__body .tui-grid-layer-selection,
.layer__body .tui-grid-layer-selection{
  display: none;
}
.content__body .tui-grid-layer-focus,
.layer__body .tui-grid-layer-focus{
	display: none;
}
.content__body .tui-page-btn,
.layer__body .tui-page-btn{
	padding: 0 10px; height: 28px; line-height: 28px; text-decoration: none;
	color: var(--color-text-default);
}
.content__body .tui-pagination .tui-page-btn,
.layer__body .tui-pagination .tui-page-btn{
	padding: 0; line-height: 28px;
}
.content__body .tui-pagination .tui-page-btn:hover{
	text-decoration: none;
}
.content__body .tui-is-selected,
.layer__body .tui-is-selected{
	background-color: var(--color-bg-paging); color: var(--color-text-inverse);
}
.content__body .tui-grid-editor-select-box-layer li,
.layer__body .tui-grid-editor-select-box-layer li{
	font-family: var(--font-nanum);
}
.content__body .tui-grid-btn-sorting-up,
.layer__body .tui-grid-btn-sorting-up{
	background-position: -112px -10px;
}
.content__body .tui-grid-btn-sorting-down,
.layer__body .tui-grid-btn-sorting-down{
	background-position: -133px -10px;
}
.tui-grid__search{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
	gap: 5px;
}
.tui-grid__search > span{
	flex-grow: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.tui-grid__search > .btn-icon{
	flex-shrink: 0;
}
.tui-grid-container .datepicker{
	width: 100%; min-width: 100%; max-width: 100%;
}
.tui-grid-cell .grid-link{
	color: var(--color-text-blue); 
}
.tui-grid-cell .grid-link:hover{
	text-decoration: underline; cursor: pointer;
}

.team-move__legend{
	color: var(--color-text-secondary); font-size: 13px; position: relative; padding-left: 16px;
}
.team-move__legend::before{
	content: ""; width: 12px; height: 12px; display: block; border-radius: 3px;
	background-color: var(--color-bg-secondary); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}

/* 토스트 그리드 Tree */
.content__body .tui-grid-tree-button-collapse .tui-grid-btn-tree i{
	width: 16px; height: 16px; margin: 0;
	background: var(--color-bg-gray);
	mask-image: url("../img/ico-plus-circle.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
	-webkit-mask-image: url("../img/ico-plus-circle.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
	position: relative; z-index: 100;
}
.content__body .tui-grid-tree-button-expand .tui-grid-btn-tree i{
	width: 16px; height: 16px; margin: 0;
	background: var(--color-bg-gray);
	mask-image: url("../img/ico-minus-circle.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
	-webkit-mask-image: url("../img/ico-minus-circle.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
	position: relative; z-index: 100;
}
.content__body .tui-grid-tree-button-expand .tui-grid-tree-icon i,
.content__body .tui-grid-tree-button-collapse .tui-grid-tree-icon i{
	margin-left: 8px;
}
.content__body .tui-grid-cell-has-tree .tui-grid-cell-content{
	position: relative; overflow: visible;
}
.content__body .tui-grid-cell-has-tree .tui-grid-cell-content::before{
	content: ""; width: 1px; height: 100%; display: block;
	position: absolute; left: -30px; top: 0; border-right: 1px dotted var(--color-border-layer);
}
.content__body .tui-grid-cell-has-tree .tui-grid-cell-content::after{
	content: ""; width: 14px; height: 1px; display: block;
	position: absolute; left: -29px; top: 50%; border-top: 1px dotted var(--color-border-layer);
}


/* Label ui - checkbox, label */
.label-ui{
	position: relative;
}
.label-ui input[type="checkbox"],
.label-ui input[type="radio"]{
	width: 0; height: 0; line-height: 0; display: none;
	position: absolute; left: 0; top: 0;
}
.label-ui input[type="checkbox"] + span,
.label-ui input[type="radio"] + span{
	position: relative;  padding-left: 22px; font-size: var(--fs-rg);
}
.label-ui input[type="checkbox"] + span::before{
	width: 16px; height: 16px; display: block; content: ""; border-radius: var(--radius-control);
	mask-image: url("../img/ico-check.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: 70%;
	background-color: var(--color-bg-white);
	position: absolute; left: 0; top: 2px; z-index: 2;
}
.label-ui input[type="checkbox"] + span::after{
	content: ""; box-sizing: border-box;
	width: 16px; height: 16px; display: block; background-color: var(--color-bg-white); border: 1px solid var(--color-border-control-default);
	border-radius: var(--radius-control);
	position: absolute; left: 0; top: 2px; z-index: 1;
}
.label-ui input[type="checkbox"]:checked + span::after{
	background-color: var(--color-bg-priramy-active); border-color: var(--color-bg-priramy-active);
}
.label-ui input[type="checkbox"]:checked + span::before{
	background-color: var(--color-bg-white); 
}
.label-ui input[type="checkbox"]:disabled + span{
	color: var(--color-text-disabled);
}
.label-ui input[type="checkbox"]:disabled + span::before{
	display: none;
}
.label-ui input[type="checkbox"]:disabled + span::after{
	background-color: var(--color-bg-disabled); border-color: var(--color-border-disabled);
}
.label-ui input[type="checkbox"]:disabled:checked + span{
	border-color: var(--color-border-disabled);
}
.label-ui input[type="checkbox"]:disabled:checked + span::before{
	background-color: var(--color-text-disabled); display: block; 
}

.label-ui input[type="radio"] + span::before{
	width: 10px; height: 10px; display: block; content: ""; border-radius: var(--radius-pill);
	background-color: var(--color-bg-white);
	position: absolute; left: 3px; top: 4px; z-index: 2;
}
.label-ui input[type="radio"] + span::after{
	content: ""; box-sizing: border-box;  border-radius: var(--radius-pill);
	width: 16px; height: 16px; display: block; background-color: var(--color-bg-white); border: 1px solid var(--color-border-control-default);
	position: absolute; left: 0; top: 1px; z-index: 1;
}
.label-ui input[type="radio"]:checked + span::before{
	background-color: var(--color-bg-priramy-active);
}
.label-ui input[type="radio"]:checked + span::after{
	border-color: var(--color-border-primary-active);
}
.label-ui-only input[type="checkbox"] + span,
.label-ui-only input[type="radio"] + span{
	padding-left: 16px;
}
.label-ui.readonly{
	pointer-events: none;
}
.label-ui{
	margin-right: 10px;
}
.label-ui:first-of-type{
	margin-right: 0;
}
.label-ui:not(:last-child) {
  margin-right: 10px;
}

/* Toggle */
.toggle-switch{
	display: inline-block;
}
.toggle-switch input[type="checkbox"]{
	display: none; 
}
.toggle-switch input[type="checkbox"] + span{
	width: 3ch;  
	height: 24px; padding: 0 10px 0 26px; position: relative; border-radius: var(--radius-pill);
	line-height: 24px; background-color: var(--color-bg-inactive); color: var(--color-text-inverse);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: var(--fs-sm); overflow: hidden;
}
.toggle-switch input[type="checkbox"] + span::before{
	content: ""; width: 16px; height: 16px; border-radius: var(--radius-pill);
	position: absolute; left: 4px; top: 4px; background-color: var(--color-bg-surface); transition: 0.2s ease;
}
.toggle-switch input[type="checkbox"]:checked + span{
	background: var(--color-bg-checked); padding: 0 26px 0 10px;
}
.toggle-switch input[type="checkbox"]:checked + span::before{
	left: auto; right: 4px;
}

.toggle-group{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 1px; background-color: var(--color-bg-disabled); padding: 4px;
	overflow: hidden; border-radius: var(--radius-control);
}
.toggle-group label{
	display: block; flex-grow: 1;
}
.toggle-group label input[type="radio"]{
	display: none;
}
.toggle-group label input[type="radio"] + span{
	height: 28px; line-height: 28px; cursor: pointer; font-weight: 500; border-radius: var(--radius-control);
	position: relative; display: block; text-align: center;  font-size: var(--fs-rg); color: var(--color-text-disabled);
}
.toggle-group label input[type="radio"]:checked + span{
	background-color: var(--color-bg-surface); color: var(--color-text-strong);
}

/* Form */
.input--datepicker{
	padding-right: 30px;
	background-image: url("../img/ico-calendar.svg"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}
.input--search{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
	gap: 2px;	
	border: 1px solid var(--color-border-control-default); border-radius: var(--radius-control);
	overflow: hidden; background-color: var(--color-bg-surface);
}
.input--search:focus-within {
  border-color: var(--color-border-strong);
}
.input--search input{
	border: none; flex-grow: 1; height: 26px;
}
.input--search .btn-icon:has(.icon-search){
	min-width: auto; flex-shrink: 0; width: 26px; height: 26px;
}

/* Datepicker */
.datepicker{
	position: relative; min-width: 140px; max-width: 190px;
}
.datepicker .input--datepicker{
	width: 100%;
}
.datepicker-container{
	position: absolute; left: 0; top: 100%; z-index: 10001;
}
.datepicker-container .tui-datepicker{
	position: absolute; left: 0; top: 0;
	border: 1px solid var(--color-border-control-default); border-radius: var(--radius-control); overflow: hidden;
}
.datepicker-container .tui-datepicker-type-date{
	max-width: 188px;
}
.datepicker-container .tui-calendar th,
.datepicker-container .tui-calendar td{
	height: 24px; border: none; background: none; padding: 2px;
}
.datepicker-container .tui-calendar{
	width: 100%;
}
.datepicker-container .tui-calendar .tui-calendar-header-inner,
.datepicker-container .tui-calendar-btn{
	height: 30px;
}
.datepicker-container .tui-calendar .tui-calendar-header-inner{
	padding: 10px; padding: 0;
}
.datepicker-container .tui-calendar .tui-calendar-title{
	font-weight: bold; font-size: var(--fs-rg); line-height: 30px;
}
.datepicker-container .tui-calendar .tui-calendar-title-today{
	display: none;
}
.datepicker-container .tui-calendar .tui-calendar-title-today:hover{
	font-weight: bold;
}
.datepicker-container .tui-calendar .tui-calendar-prev-month.tui-calendar-date, 
.datepicker-container .tui-calendar .tui-calendar-next-month.tui-calendar-date{
	visibility: visible;
}
.datepicker-container .tui-calendar .tui-calendar-body-header th{
	color: var(--color-text-placeholder); text-align: center;
}

.datepicker-container .tui-calendar th, 
.datepicker-container .tui-calendar td{
	color: var(--color-text-default); font-size: var(--fs-sm);
}
.datepicker-container .tui-calendar .tui-calendar-sat{
	color: var(--color-text-blue);
}
.datepicker-container .tui-calendar .tui-calendar-sun{
	color: var(--color-text-red);
}
.datepicker-container .tui-calendar .tui-calendar-prev-month, 
.datepicker-container .tui-calendar .tui-calendar-next-month{
	color: var(--color-text-inactive);	
}
.datepicker-container .tui-calendar.tui-calendar-month .tui-calendar-body-inner{
	height: 140px;
}
.datepicker-container .tui-datepicker .tui-is-selectable.tui-is-selected,
.datepicker-container .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected{
	font-weight: bold; border-radius: var(--radius-control);
	background-color: var(--color-bg-primary-strong) !important; color: var(--color-text-inverse) !important;
}

.datepicker-container .tui-datepicker .tui-is-selectable:hover{
	font-weight: bold; background-color: var(--color-bg-onSurface); border-radius: var(--radius-control);
	color: var(--color-text-primary-strong);
}
.datepicker-container .tui-datepicker .tui-is-selectable.tui-is-selected.tui-calendar-month::before{
	width: 80%; height: 80%;
}
.datepicker-container .tui-calendar .tui-calendar-today{
	position: relative;	
}
.datepicker-container .tui-calendar .tui-calendar-today::before{
	content: ""; width: 4px; height: 4px; display: block; border-radius: var(--radius-pill);
	position: absolute; left: 50%; top: 2px; background-color: var(--color-bg-primary);
	transform: translateX(-50%);
}
.datepicker-container .tui-calendar-body{
	padding: 5px;
}
.datepicker .tui-calendar-month .tui-calendar-body, 
.datepicker .tui-calendar-year .tui-calendar-body{
	max-width: 188px;
}

/* input type */
input[type="time"]{
	min-width: 140px; max-width: 180px; 
}



/* Search box */
.search-box{
	border: 1px solid var(--color-border-strong); border-left: none; border-right: none;
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 20px;
	padding: 10px 0 10px 5px;
}
.search-box__form{
	display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; 
	column-gap: 20px; row-gap: 10px;
	flex-grow: 1;
}
.search-box__form > dl{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px;
}
.search-box__form > dl > dt{
	font-weight: 500; color: var(--color-text-strong); font-size: var(--fs-rg);
}
.search-box__form > dl > dt.required::after{
	margin-left: 3px; top: -6px;
}
.search-box__btn{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;
	gap: 5px;
}

/* 엑셀 업로드 */
.file-upload{
	border: 1px dashed var(--color-border-control-default); border-radius: var(--radius-surface); padding: 20px;
	background-color: var(--color-bg-onSurface); text-align: center;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;
	gap: 10px;
}
.file-upload__description{
	margin-top: 10px; font-size: var(--fs-rg);
}


/* 비밀번호변경 팝업 */
.pw-change{
	width: 420px;
	padding: 10px 0 0 0;
}
.pw-change .validation-msg{
	font-size: var(--fs-rg); line-height: 140%; 
}
 

#workFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


/* Login */
.login{
	width: 100%; height: 100dvh; background-color: var(--color-bg-onSurface); position: relative;
}
.login__box{
	width: 400px; height: 500px; background-color: var(--color-bg-surface); border-radius: var(--radius-surface);
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	padding: 40px 30px;
}
.login__header{
	text-align: center;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;
	gap: 10px;
}
.login__header h1{
	width: 240px; display: inline-block;
}
.login__form{
	padding: 40px 20px 50px 20px; border: 1px solid var(--color-border-default); border-left: none; border-right: none;
	margin: 20px 0;
}
.login__form dl{
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 5px; margin-top: 10px;
}
.login__form dl:first-of-type{
	margin-top: 0;
}
.login__form dl dt{
	font-weight: 500; color: var(--color-text-strong); font-size: var(--fs-md);
}
.login__form dl dd input{
	width: 100%; height: 36px; 
}
.login__form--option{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
	margin: 10px 0 20px 0;
}
.login__form .forgot-password{
	font-size: var(--fs-rg); color: var(--color-text-default);
}
.login__form .forgot-password:hover{
	text-decoration: underline;
}
.login__form .btn--login{
	width: 100%; height: 40px; font-size: var(--fs-md);
	background: var(--color-bg-gradient); color: var(--color-text-inverse); font-weight: 500;
	border-radius: var(--radius-control); 
}
.login__footer{
	font-size: var(--fs-sm); text-align: center;
}


/* Loading */
.loading-wrap{
	width: 100dvw; height: 100dvh; position: fixed; left: 0; top: 0; z-index: 100020;
	background: rgba(255, 255, 255, 0.5);
}
.loading{
	background-color: var(--color-bg-surface); border-radius: var(--radius-surface);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	font-size: var(--fs-sm); padding: 30px 50px 20px 50px;
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch;
	gap: 10px;
}
.loading__spinner{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;
	gap: 5px;
}
.loading__spinner > span{
	display: block; width: 10px; height: 10px; border-radius: var(--radius-pill);
	background-color: var(--color-bg-primary);
	animation-name: loadingAni; animation-duration: 0.5s; animation-timing-function: ease; 
	animation-iteration-count: infinite; animation-direction: alternate;
}
.loading__spinner2{
	animation-delay: 0.1s;
}
.loading__spinner3{
	animation-delay: 0.2s;
}
.loading p{
	line-height: 100%
}
@keyframes loadingAni{
	0%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(-10px);
	}
}


/* Full calendar */
.calendar{
	min-height: 380px;
}
.fc-direction-ltr{
	gap: 5px;
}
.fc .fc-scrollgrid{
	border-right-width: 1px;
}
.fc .fc-toolbar-title{
	font-size: var(--fs-rg); font-weight: bold; color: var(--color-text-black); padding-left: 14px;
	position: relative;
}
.fc .fc-toolbar-title::before{
	content: ""; width: 10px; height: 10px; display: block;
	position: absolute; left: 0; top: 6px; border-radius: var(--radius-pill);
	border: 3px solid var(--color-border-primary-strong); box-sizing: border-box;
}
.fc .fc-button-primary{
	background-color: var(--color-bg-surface); border-color: var(--color-button-border-default);
	color: var(--color-text-default);
}
.fc .fc-button-primary:hover{
	background-color: var(--color-bg-onSurface); border-color: var(--color-button-border-default);
	color: var(--color-text-default);
}
.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active{
	background-color: var(--color-bg-onSurface); border-color: var(--color-button-border-default);
	color: var(--color-text-default);
}
.fc .fc-button-primary:focus{
	box-shadow: none;
}
.fc .fc-button:focus{
	outline: none; box-shadow: none;
}
.fc .fc-button-primary:not(:disabled).fc-button-active:focus, 
.fc .fc-button-primary:not(:disabled):active:focus{
	box-shadow: none;
}
.fc .fc-button{
	padding: 0 5px; height: 28px;
}
.fc-theme-standard td, 
.fc-theme-standard th{
	border-left: none; border-right: none; border-color: var(--color-border-default);
}
.fc-theme-standard th{
	font-size: var(--fs-rg); background-color: var(--color-bg-grid-head);
}
.fc-theme-standard td{
	position: relative;
}
.fc-theme-standard td::before{
	content: ""; width: 4px; height: 100%; display: block; background-color: var(--color-bg-surface);
	position: absolute; left: 0; top: 0; z-index: 10;
}
.fc-theme-standard .fc-day-sat{
	color: var(--color-text-blue);
}
.fc-theme-standard .fc-day-sun{
	color: var(--color-text-red);
}
.fc .fc-toolbar.fc-header-toolbar{
	margin-bottom: 0;
}
.fc .fc-daygrid-day-events .fc-h-event{
	background: rgb(from var(--color-calendar-project1) r g b / 0.1); border: none;
	padding: 0 10px; color: var(--color-calendar-project1); border-left-color: var(--color-calendar-project1);
	font-weight: 500; line-height: 120%;
}
.fc .fc-daygrid-day-events .fc-event-start {	
	border-left-width: 3px; border-left-style: solid;
}
.fc .fc-daygrid-day-events .fc-event-end{
	border-right-width: 3px; border-right-style: solid;
}
.fc-popover-body .fc-h-event{
	min-width: 120px; max-width: 280px;
	background-color: var(--color-bg-surface); color: var(--color-text-default); border: 1px solid var(--color-border-default);
	padding-left: 10px;
}
.fc-h-event .fc-event-title{
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.fc-event{
	cursor: pointer;
}
a.fc-event:hover{
	border-color: var(--color-border-strong);
}
a.fc-event:active{
	background-color: var(--color-bg-onSurface);
}
.fc .fc-h-event .fc-event-main{
	color: inherit;
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events .fc-h-event.fc-project-blue{
	background: rgb(from var(--color-calendar-project1) r g b / 0.1); color: var(--color-calendar-project1);
	border-left-color: var(--color-calendar-project1);
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events .fc-h-event.fc-project-blue:hover{
	background: rgb(from var(--color-calendar-project1) r g b / 0.2);
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events .fc-h-event.fc-project-orange{
	background: rgb(from var(--color-calendar-project2) r g b / 0.1); color: var(--color-calendar-project2);
	border-left-color: var(--color-calendar-project2);
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events .fc-h-event.fc-project-orange:hover{
	background: rgb(from var(--color-calendar-project2) r g b / 0.2);
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events .fc-h-event.fc-project-green{
	background: rgb(from var(--color-calendar-project3) r g b / 0.1); color: var(--color-calendar-project3);
	border-left-color: var(--color-calendar-project3);
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events .fc-h-event.fc-project-green:hover{
	background: rgb(from var(--color-calendar-project3) r g b / 0.2);
}
.fc-direction-ltr .fc-daygrid-event.fc-event-start, .fc-direction-rtl .fc-daygrid-event.fc-event-end{
	margin-left: 4px;
}
.fc .fc-daygrid-day-top{
	padding: 5px; height: 40px; flex-direction: row;
}
.fc .fc-daygrid-day.fc-day-today{
	background-color: transparent;
}
/*.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top .fc-daygrid-day-number > span{
	overflow: hidden; 
	background-color: var(--color-bg-primary); border-radius: var(--radius-pill); color: var(--color-text-inverse);
	display: block; white-space: nowrap; padding: 4px;
}*/
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top .fc-daygrid-day-number > span{
	padding: 0 4px; position: relative;
}
.fc .fc-daygrid-day-number .holiday{
	color: var(--color-text-red); font-size: var(--fs-sm);	
}
.fc .fc-highlight{
	background: var(--color-bg-grid-select);
}
.fc-event-selected::after,
.fc-event:focus::after{
	display: none;
}
.fc-direction-ltr .fc-daygrid-more-link{
	width: 100%; margin-top: 5px; font-size: var(--fs-sm);
	float: none; text-align: right; display: block; 
}


/* Flex */
.flex--row{
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
	gap: 10px;
}
.flex--space{
	justify-content: space-between;
}
.flex--vertical{
	align-items: flex-start;
}

.gap0{
	gap: 0;
}
.gap5{
	gap: 5px;
}

.required::after{
	content: ""; width: 5px; height: 5px; display: inline-block;
	background-color: var(--color-bg-danger); border-radius: var(--radius-pill); margin-left: -2px;
	position: relative; top: -4px;
}
table .required::after{
	margin-left: 3px; top: -6px;
}

/*.popup-container {
    z-index: 9999;
}*/

/* -----------tree dropDown------------ */
.tree-select {
  position: relative;
  min-width: 180px;
  font-family: Arial, sans-serif;
  font-size: var(--fs-rg);
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

/* 선택창 박스 */
.ts__box {
	height: 28px; line-height: 28px;
	border: 1px solid var(--color-border-control-default); background-color: var(--color-bg-surface);
	padding: 0 30px 0 5px; position: relative; border-radius: var(--radius-control);
	background-image: url("../img/ico-arrow-normal.svg"); background-repeat: no-repeat; background-position: right 5px center; background-size: 14px;
}
.tree-select:has(.is-open) .ts__box{
	border-color: var(--color-border-strong);
}

/* 드롭다운 리스트 */
.ts__list {
  display: none;
  position: absolute; left: 0; right: 0;
  border: 1px solid var(--color-border-control-default); background-color: var(--color-bg-surface);
  max-height: 160px; overflow-y: auto; z-index: 1000; border: 1px solid var(--color-border-strong);
}

/* 클릭 가능한 아이템 */
.ts__item{
  height: 28px; line-height: 28px; cursor: default; padding: 0 15px;
}

.ts__item:hover{
	background-color: var(--color-bg-select); color: var(--color-text-inverse);
}


/* time Picker */
.timepicker{
	position: relative;
}

.input--timepicker{
	width: 100%; padding: 6px; box-sizing: border-box;
	background-image: url("../img/ico-time.svg"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}

.timepicker__dropdown{
	position: absolute; top: 100%; left: 0;
	width: 100%; max-height: 120px; overflow-y: auto;
	border: 1px solid var(--color-border-control-default); background: var(--color-bg-surface);
	display: none; z-index: 1001;
	overscroll-behavior: contain;
}

.timepicker__item{
	height: 28px; line-height: 28px; padding: 0 10px; cursor: pointer;
}

.timepicker__item:hover{
	background: var(--color-bg-onSurface);
}

.timepicker__item.is-active{
	background: var(--color-bg-select); color: var(--color-bg-surface);
}

/* time Picker 마지막 카드 일때 짤리는 영역 수정 */
.workday--row:last-child .timepicker__dropdown {
    top: auto;
    bottom: calc(100% + 1px);
}


/* Tabset  */
.tabset{
	display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; 
	gap: 5px;
}
.tabset__tabs{
	flex-shrink: 0;
	display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	gap: 4px; padding: 4px; background-color: var(--color-bg-onSurface); border-radius: var(--radius-control);
	border: 1px solid var(--color-border-default);
	overflow-x: auto; overflow-y: hidden; white-space: nowrap;
	
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;

	/* 스크롤바 숨기기 */
	-ms-overflow-style:none;     /* IE, Edge */
	scrollbar-width:none;        /* Firefox */
}
.tabset__tab{
	height: 32px; line-height: 32px; display: inline-block;
	background-color: var(--color-bg-onSurface); color: var(--color-text-inactive); text-align: center; 
	padding: 0 15px; font-size: var(--fs-rg); 
	font-weight: bold; border-radius: var(--radius-control) var(--radius-control) 0 0;
	flex: 0 0 auto; white-space: nowrap;
}
.tabset__tab:hover{
	color: var(--color-text-strong);
}
.tabset__tab--active{
	background-color: var(--color-bg-surface); color: var(--color-text-strong); 
	box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
.tabset__panels{
	flex-grow: 1;
	border: 1px solid var(--color-border-default); position: relative; top: -1px;
}
.tabset__panel{
	height: 100%; padding: var(--pd-sm); display: none; overflow-y: auto;
}
.tabset__panel--active{
	display: block;
}
.tabset__panel .tree-layout{
	height: 100%;
}

/* Grid Total row */
.tui-grid-cell.tui-cell-total {
	background: #f9f9f9 !important;
	font-weight: 600 !important;
}

/* column 숨기기 (colspan 효과) */
.tui-grid-cell.tui-cell-total-hide {
	color: transparent;
	border: none;
}

/* rowNum 강조 */
.tui-grid-cell.tui-cell-total-main {
	border-left: none;
	border-right: none;
}

.tui-grid-cell.tui-cell-total-main-left {
	text-align: left !important;
	padding-left: 6px;
	border-left: none;
	border-right: none;
}

.tui-grid-cell.tui-cell-total-main-right {
	text-align: right !important;
	border-left: none;
	border-right: none;
}

/* KPI Dashboard */
.kpi-page {
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.kpi-card {
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 14px;
}

.kpi-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kpi-top__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.kpi-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kpi-title__badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1f7aff 0%, #0e5fc7 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
}

.kpi-title h2 {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.25;
  color: var(--color-text-black);
  letter-spacing: -0.04em;
  font-weight: 800;
}

.kpi-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  width: min(100%, 880px);
}

.kpi-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-filter label {
  font-size: 12px;
  color: #1d346f;
  font-weight: 700;
}

.kpi-filter select {
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--color-border-control-default);
  background-color: #fff;
  color: #243b71;
}

.kpi-summary {
  display: grid;
  grid-template-columns: repeat(8, minmax(145px, 1fr));
  gap: 10px;
}

.kpi-summary__item {
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: #fbfdff;
  padding: 10px;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-summary__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-rg);
  color: var(--color-text-black);
  font-weight: 700;
  justify-content: center;
}

.kpi-summary__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eaf1ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-rg);
  color: #2a6fec;
  font-weight: 700;
}

.kpi-summary__value {
  font-size: 1.75rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #132a63;
  font-weight: 800;
  display: flex;
  justify-content: end;
}

.kpi-summary__trend {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.kpi-summary__trend.is-up {
  color: #0ba57d;
  display: flex;
  justify-content: end;
}

.kpi-summary__trend.is-down {
  color: #df2c3f;
  display: flex;
  justify-content: end;
}

.kpi-summary__trend.is-flat {
  color: #8b97ad;
  display: flex;
  justify-content: end;
}

.kpi-mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
}

.kpi-section__title {
  margin: 0 0 10px;
  font-size: var(--fs-md);
  color: var(--color-text-black);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.kpi-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f7faff;
}

.kpi-info__title {
  margin: 0;
  font-size: var(--fs-md);
  color: #1a4da5;
  font-weight: 800;
}

.kpi-info ul {
  margin: 0;
  color: #354f80;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.kpi-info__updated {
  margin-top: auto;
  font-size: var(--fs-xs);
  color: #6b7ea9;
  font-weight: 700;
}

.kpi-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 10px;
}

.kpi-bottom--single {
  grid-template-columns: minmax(0, 1fr);
}

.kpi-topbottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kpi-mini {
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.kpi-mini__title {
  margin: 0 0 8px;
  font-size: var(--fs-rg);
  color: var(--color-text-black);
  font-weight: 800;
  display: flex;
  justify-content: center;
}

.kpi-mini__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.kpi-mini__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: 800;
}

.kpi-mini__label.is-top {
  color: #2571e8;
  display: flex;
  justify-content: center;
}

.kpi-mini__label.is-bottom {
  color: #de3d4b;
  display: flex;
  justify-content: center;
}

.kpi-rank {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-sm);
}

.kpi-rank th {
  text-align: left;
  color: #6780b1;
  padding: 3px 2px;
  border-bottom: 1px solid var(--color-border-default);
}

.kpi-rank td {
  padding: 4px 2px;
  border-bottom: 1px dashed var(--color-border-layer);
  color: var(--color-text-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-rank td:last-child,
.kpi-rank th:last-child {
  text-align: right;
}
.kpi-rank td:first-child {
  text-align: center;
}

.kpi-chart-wrap {
  min-height: 270px;
  position: relative;
}

.kpi-chart-wrap--small {
  min-height: 238px;
}

@media (max-width: 1440px) {
  .kpi-title h2 {
    font-size: var(--fs-md);
  }

  .kpi-summary__value {
    font-size: 1.5rem;
  }

  .kpi-section__title {
    font-size: var(--fs-rg);
  }
}

@media (max-width: 1200px) {
  .kpi-top__head {
    flex-direction: column;
    align-items: stretch;
  }

  .kpi-filters {
    width: 100%;
  }

  .kpi-summary {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }

  .kpi-mid,
  .kpi-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .kpi-page {
    padding: 8px;
  }

  .kpi-title h2 {
    font-size: var(--fs-rg);
  }

  .kpi-filters {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-summary {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-topbottom-grid {
    grid-template-columns: 1fr;
  }

  .kpi-mini__split {
    grid-template-columns: 1fr;
  }
}