:root{
    --c-black: #231815;
    --c-green: #00927B;
    --c-orange: #DB9A00;

    --c-grey : #a3a3a3;
    --c-light_n: #ddd;
    --c-light_b: #F6F6F6;

    --line: 1px solid var(--c-light_n);
    --d-font: 'Han';
    --en-font : 'Poppins', sans-serif;

    --shadow: 0px 4px 30px rgba(35, 24, 21, 0.3);
}

*{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;color:var(--c-black);cursor: pointer;}
html{font-family:var(--d-font);font-size:62.5%;}
body{font-size:1.6rem;line-height:1.5;font-weight: 400;}
img{width:100%;display:block;border:0;}
button{cursor:pointer;}
input,button,textarea{border: var(--line);font-family: var(--d-font); font-size: 1.6rem;padding: 1rem 1.4rem;width: 100%;}
label{display: flex;}
input[type="checkbox"]{
    width: 2rem;
    height: 2rem;
    display: flex;  
}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{height:30%;background:var(--c-green); }
::-webkit-scrollbar-track{background:rgba(0, 0, 0, 0.1)}

.row{display:flex;flex-direction:row;}
.row.center{justify-content: center;}
.col{display:flex;flex-direction:column;}
.col.center{align-items: center;}

.en{font-family: var(--en-font); font-weight: 400;}

.bg_green{background: var(--c-green); color: #fff;}
.bg_green:hover{background: var(--c-black);}
.line_btn{border: var(--line); background: #fff;}
.line_btn:hover{background: var(--c-light_b);}

.gap_wrap{gap: 2rem;}


header{
    position: absolute;
    top: 0;
    left: 0;
    height: 10rem;
    background: #fff;
    border-bottom: 1rem solid var(--c-green);
    box-sizing: border-box;
    width: 100%;
    align-items: center;
}
header .header_wrap{
    width: 100%;
}
header .logo_wrap{
    width: 30rem;
}
header .top_wrap{
    width: calc(100% - 30rem);
}

header .top_wrap .inner{
    justify-content: space-between;
    align-items: center;
}
header .select_box .box{
    width: 10rem;
    border: 0;
    font-weight: 600;
}

.icon_btn{
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    
}
.icon_btn p{
    font-weight: 600;
}

.inner{width: calc(100% - 8rem);}

.nav_wrap{
    width: 30rem;
    box-shadow: var(--shadow);
    height: calc(100vh - 10rem);
    margin-top: 10rem;
    overflow: auto;
    /*transition-duration: .5s; nav 이벤트 개선용*/
	
    position: relative;
    z-index: 1;
}

.nav_wrap a{
    color: var(--c-grey);
}

.nav_wrap .ico{
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    /* background: teal; */
    margin-right: 1rem;
    filter: grayscale(1) brightness(1.8);
}
.nav_wrap .show_btn{
    padding: 1rem 2rem;
    font-size: 1.8rem;
}
.nav_wrap .show_btn p{
    width: calc(100% - 3.4rem);
    white-space: nowrap;
    overflow: hidden;
    transition-duration: .5s;
}
.nav_wrap .show_menu{
    background: var(--c-light_b);
    padding: 1rem 0;
}
.nav_wrap .show_menu p{
    width: calc(100% - 5.4rem);
    white-space: nowrap;
    overflow: hidden;
    transition-duration: .5s;
}
.nav_wrap .dep2{
    margin-left: 5.4rem;
    font-size: 1.6rem;
    transition-duration: .5s;
}
.nav_wrap .dep2 .ico{
    width: 2rem;
    height: 2rem;
    filter: grayscale(1) brightness(1.8);
}

.nav_wrap .dep2.active a{
    color: var(--c-green);
}

#navUl a:hover{
    color: var(--c-green);
}
#navUl li.active .ico{
    filter: unset;
}
#navUl li.active .dep2 .ico{
    filter: grayscale(1) brightness(1.8);
}
#navUl li.active .show_btn{
    color: var(--c-green);
}
#navUl li.active .show_menu{
    display: block;
}
#navUl li.active .dep2.active .ico{
    filter: unset;
}
.nav_wrap.off {
    width: 7rem;
}

.nav_wrap.off .show_btn p{
    
    width: 0;
}
.nav_wrap.off .show_menu p{
    width: 0;
}
.nav_wrap.off .dep2{
    margin-left: 2.2rem;
}
.nav_wrap.off .ico{
    margin-right: 0;
}

.nav_wrap .ico.bg_orange{
    background: var(--c-orange);
    filter: unset;
}

.show_menu{
    display: none;
}
nav{float: left;}
main.wrap{
    width: calc(100% - 30rem);
    height: calc(100vh - 10rem);
    margin-top: 10rem;
    /* background: tan; */
    float: left;
    transition-duration: .5s;
}

main.wrap.off{
    width: calc(100% - 7rem);
    transition-duration: .5s;
}

.table_wrap {position: relative;}
.table_wrap table{width:100%;border-collapse:collapse}
.table_wrap table thead{background: var(--c-light_b);position: sticky;top: 0;}
.table_wrap table th{
    padding: 1rem;
    text-align: left;
}
.table_wrap table td{
    padding: 1rem;
    color: var(--c-grey);
    border-bottom: 1px solid var(--c-light_n);
}

.table_wrap table th,
.table_wrap table td{
    border-right: 1px solid var(--c-light_n);
}

.table_wrap .tui-datepicker table td{
    border-bottom: 0;
}
.table_wrap .tui-datepicker table td,
.table_wrap .tui-datepicker table th{
    border-right: 0;
}

.table_wrap table th{
    background: var(--c-light_b);
}

.table_wrap.col_table table th{
    border-bottom: 1px solid var(--c-light_n);
}

.table_wrap table th:last-child,
.table_wrap table td:last-child{
    border-right: 0;
}

.table_wrap table th.t_center,
.table_wrap table td.t_center{
    text-align: center;
}

.table_wrap.small_table{
    max-height: 40rem;
    overflow: auto;
}

.table_wrap.xsmall_table{
    max-height: 30rem;
    overflow: auto;
}

.table_wrap.mid_table{
    max-height: calc(100vh - 43rem);
    overflow: auto;
}

.table_wrap table td .icon_btn{
    width: 3rem;
    display: inline-block;
}

.table_wrap table td .repair_btn{
    width: 8rem;
    background: var(--c-green);
    color: #fff;
}

.table_wrap table td .repair_btn:hover{
    background: var(--c-black);
}

.table_wrap table td .edit_btn,
.table_wrap table td .del_btn{
    width: 3rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background: transparent;
    border: 0;
}

.table_wrap input[type="text"],
.table_wrap input[type="password"],
.table_wrap input[type="tel"],
.table_wrap textarea{
    width: calc(100% - 3rem);
}

.table_wrap .time{
    gap: 1rem;
    align-items: center;
    white-space: nowrap;
}

.select_box .box{display:inline-block;position:relative;width:100%;border: var(--line);box-sizing: border-box;}
.select_box .box .select{position:relative;box-sizing:border-box;padding:1rem 1.4rem;background-color:#fff;cursor:pointer;}
.select_box .box .select:after{background:url(../img/arrow.svg) no-repeat 0 0;content:' ';display:inline-block;height:2.4rem;width:2.4rem;position:absolute;top:50%;right:10px;transform:translateY(-50%)}
.select_box.on .box .select:after{content:' ';transform:translateY(-50%) rotate(180deg)}
.select_box .box .list{display:none;overflow-y:auto;position:absolute;top:5rem;left:0;z-index:10;box-sizing:border-box;box-shadow:var(--shadow);padding:10px 0;width:100%;max-height:200px;background-color:#fff;border: var(--line);}
.select_box .box .list>li{box-sizing:border-box;padding:0 10px;width:100%;height:35px;line-height:35px;cursor:pointer}
.select_box .box .list>li:hover{background-color:var(--c-light_b)}

.tui-datepicker-input{
    height: auto;
}
.tui-datepicker-input > input{
    width: 100%;
    height: auto;
    padding: 1rem 1.4rem;
    font-size: 1.6rem;
	font-weight: bold;
    line-height: unset;
    vertical-align: top;
    border: 0;
    color: #333;
}
.tui-datepicker{
    z-index: 1;
}

.tui-calendar-date.tui-is-selectable{
	font-weight: 200;
}

.tui-calendar-date.tui-is-selected {
    font-weight: bold !important;
}

.tui-datetime-input {
    width: 100%;
}

.tui-datepicker .tui-is-selectable.tui-is-selected, .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected{
    background-color: var(--c-orange);
	font-weight: bold;
}

.tui-datepicker .tui-is-selectable:hover {
    background-color: #db9a0030;
}

.highlight-date {
	background-color: #db9a0030 !important;
	
}

.highlighted {
	background-color:var(--c-green);
	font-weight: bold !important;
	color: #fff !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 1000;
    display: flex;
    justify-content: center; /* 자식 요소 수평 중앙 정렬 */
    align-items: center; /* 자식 요소 수직 중앙 정렬 */
}

.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fade-image {
	opacity: 0;
	transition: opacity 1s ease-out;
	margin-left: 10px; /* 이미지 간의 간격 조절 */
}