@charset "utf-8";
:root{
    --point : #267DFF;
}

/*title*/
.bdr{display: flex;align-items: center;gap: 8px;border-bottom:1px solid #E7EBEE;margin-bottom:12px;}
.title h2{font-size:16px;font-weight:600;padding:10px 0;}
.title h2 strong{color:var(--point);}
.title p{font-size:12px;font-weight:500;color:#213A56}
.tit_wrap{display:flex;align-items:center;justify-content:space-between;}
.tit_wrap .tit_area,.tit_wrap .btn_area{display:inline-flex;column-gap:8px;align-items:center;}


/*login*/
.login .container{position:relative;background:url('../../image/background_megazone.jpg') no-repeat;background-size:cover;display: flex;align-items: center;height:100%;margin-top:0;min-height: 900px;}
.login .container::before{content:'';position:absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);}
.login_wrapper{width:850px;margin:0 auto;padding: 100px 0;z-index: 1;}
.login_logo{text-align: center;margin-bottom:32px;}
.login_area{display:flex;column-gap:32px;padding:64px;background:#fff;}
.login_area .log_img{width:390px;}
.log_area{display:flex;flex-direction:column;justify-content: space-between;width:calc(100% - 422px);}
.log_area .heading_area{margin-bottom:32px;}
.log_area .heading_area .tit{font-size:24px;font-weight:700;line-height: 1;}
.log_area .form .radio_list input{color:#213A56;}
.log_area .form .input_list{margin:16px 0}
.log_area .form .login_etc{display:flex;align-items:center;justify-content:space-between;}
.log_area .form .login_etc .find_wrap{display:flex;column-gap:12px;}
.log_area .form .login_etc .find_wrap li a{font-size:12px;color:var(--point);text-decoration:underline;}
.btn_login_wrap .btn{width:100%;}
.function_wrap{margin-top:32px;}
.function_wrap .btn{width:100%;}
.function_wrap .form_item{display:flex;align-items:center;margin-top:8px;gap:12px;}
.function_wrap .form_item .form_label{font-size:12px;font-weight:700;color:#213A56;}
.function_wrap .form_item .form_control{display:flex;align-items:center;gap:4px;}
.function_wrap .form_item .form_control .inputbox input{width:173px;}
.function_wrap .form_item .form_control .btn{padding:0px 5px;width: 90px;}
.function_wrap .time_area{font-size:12px;font-weight:500;color:var(--point);margin-left: auto;}


/*main*/
.period{display:flex;align-items:center;column-gap: 12px;}
.period .radio_list{display:flex;align-items:center;column-gap:4px;margin-left: 20px;}
.range {display: inline-block;position: relative;line-height: 1;}
.range input{position: absolute;left: -9999px;}
.range label{display: inline-block;min-width:80px;border:1px solid #DCE0E5;border-radius:4px;padding:9px 12px;box-sizing: border-box;text-align:center;font-weight: 400;vertical-align: top;word-break: break-all;cursor: pointer;}
.range input:checked+label{background: #E9F2FF;color: var(--point);border-color:var(--point);}
.range input:disabled+label{color:#7F8A94;background-color:#E7EBEE;}



.required{display: inline-block;margin-left: 4px;color: #FF4C4C;}

.table+.sort_wrap{margin-bottom:0;margin-top:24px;}
.sort_wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;min-height:32px;}
.sort_wrap .inputbox.search{margin-left:auto;}
.sort_wrap .btn_area{display:flex;align-items:center;gap:4px;}
.sort_wrap .btn_area select{margin-left:8px;}

.form_control{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;}
.form_control .inputbox+.inputbox{margin-top:0;}
.form_control.tel .inputbox{width:77px;}
.form_control.tel .inputbox input{width:100%;}


.wrap.frame{min-width:initial;}
.wrap.frame .container{overflow-y:initial;margin-top:0;height:auto;flex-direction: column;}
.section{padding:10px 20px 10px 20px;background: #fff;}
.section + .section{margin-top:8px;}
.table .row_hide{display: none;}
.table .row_hide.show{display: table-row;}

.btn_wrap{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:4px;}
.btn_wrap_right{margin-top:24px;display:flex;align-items:center;justify-content:end;gap:4px;}
.btn_wrap_left{margin-top:24px;display:flex;align-items:center;justify-content:start;gap:4px;}
.btn_acdion{position: relative;font-size:12px;font-weight:400;padding-right:20px;}
.btn_acdion::after{content: ""; position: absolute;top: 50%;right:0;transform: translateY(-50%);width: 16px;height: 16px;background: url('../../image/ico_arrowdown_16.svg') no-repeat center center / contain;transition: 0.4s ease;}
.btn_acdion.active::after{transform: translateY(-50%) rotate(180deg);}
.btn_acdion.hide{display: none;}


.table+.area_wrap{margin-top:24px;}
.area_wrap{display:flex;gap:20px;}
.area_wrap > *{flex:1}
.area_right{flex:1;}
.wfix{width:390px;flex:none;}
.area_wrap .section{height:100%;}
.cont+.cont{margin-top:40px;}

.top_wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap: nowrap;column-gap: 14px;}
.top_wrap .tab{overflow-x:auto;}
.top_wrap .tab::-webkit-scrollbar{display:none;}
.top_wrap .tab .tab_menu {transition: 0.4s;}
.top_wrap .tab .tab_menu li{display:flex;align-items:center;}
.top_wrap .tab .tab_menu li:not(.active) a{color:#525960;}
.top_wrap .tab .tab_menu li a{padding-right:12px;text-align:left;white-space: nowrap;}
.top_wrap .btn_area .arrow_btn{display:flex;}
.top_wrap .btn_area{display:flex;align-items:center;gap:8px;}
.top_wrap .btn_area [class*="arrow_"].disabled,
.top_wrap .btn_area [class*="arrow_"][disabled]{opacity: 0.6;cursor:default;}

/*출입장현황관리*/
.access_wrap{margin-bottom:12px;}
.access_wrap ul{display:flex;gap:4px;flex-shrink: 0;}
.access_wrap ul li{flex: 1;padding:20px;border:1px solid #E7EBEE;background-color: #F3F5F6;}
.access_wrap ul li:first-child{border-radius:12px 0 0 12px;}
.access_wrap ul li:last-child{border-radius:0 12px 12px 0;}
.access_wrap ul li p{color:#525960;font-size:12px;font-weight:400;}
.access_wrap ul li strong{display:block;font-size:24px;margin:12px 0 11px;}
.access_wrap ul li strong span{color:#267DFF;}
.access_wrap .personas span{position:relative;display:inline-block;color:#525960;font-weight:700;}
.access_wrap .personas span:not(:last-child){padding-right:16px;}
.access_wrap .personas span:not(:last-child):after{content:'';position:absolute;right:4px;top:50%;width:1px;height:8px;background-color:#A8B3BD;transform:translateY(-50%);}

/*window popup*/
.win_popup{background-color:#F3F5F6;padding:32px 32px 40px 32px;}
.win_header .tit_win{font-size:16px;font-weight:700;line-height:19px;margin-bottom:20px;}
.win_cont .tab .tab_cont,
.win_box{padding:32px 32px 40px 32px;background-color:#fff;border-radius:12px;}
.win_cont .tab .tab_cont{border-radius:0 0 12px 12px;}
.win_sec+.win_sec{margin-top:24px;}
.win_sec .win_area{display:flex;gap:12px;}
.win_area .profile_img{overflow: hidden;width:120px;height:160px;background: url('../../image/img_profile.png') no-repeat center center / 100% auto;}
.win_area .profile_img img{width: 100%;height: 100%;object-fit: cover;background-color: #fff;}
.win_popup select{width:100%;}
.win_popup .textarea{height:222px;/*margin-top:40px;margin-left: -12px;margin-right: -12px;* border-top: 1px solid #E7EBEE;*/}
.txt_msg{margin-top:8px;color:var(--point);}


/*loading*/
.loading_wrap{position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.7);z-index: 1001;}
.loading_layer{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.dot_flashing {position: relative;width: 12px;height: 12px;border-radius: 6px;background-color: #267DFF;color: #267DFF;animation: dot_flashing 0.5s infinite linear alternate;animation-delay: 0.2s;}
.dot_flashing::before, .dot_flashing::after {content: "";display: inline-block;position: absolute;top: 0;}
.dot_flashing::before {left:-24px;width: 12px;height: 12px;border-radius:6px;background-color: #267DFF;color: #267DFF;animation: dot_flashing 0.5s infinite alternate;animation-delay: 0.35s;}
.dot_flashing::after {left:24px;width: 12px;height: 12px;border-radius: 6px;background-color: #267DFF;color: #267DFF;animation: dot_flashing 0.5s infinite alternate;animation-delay: 0.5s;}

@keyframes dot_flashing  {
    0% {
        background-color: #267DFF;
    }
    50% {
        background-color: rgba(38, 125, 255, 0.6)
    }
    100% {
        background-color:rgba(38, 125, 255, 0.3)
    }
}


/*unit*/
.w80{width:80px;}
.w140{width:140px;}
.wp100{width:100%}

.status{position:absolute;top: 55px;left: 433px;}
.status ul{display:flex;flex-shrink:0;align-items:center;gap:16px;}
.status ul li span{position: relative;display: inline-block;vertical-align: middle;margin-top: -4px;margin-right:6px;width:12px;height:12px;border-radius:2px;overflow: hidden;}
.status .use{background-color:#55EF00;}
.status .available{border:1px solid #A8B3BD;background-color:#fff}
.status .assign{background-color:#FF8F00;}
.status .overdue{background-color:#FF4C4C;}
.status .breakdown{background-color:#A8B3BD;}

/* 탭메뉴 신규 추가 */
.tab.type4 .status {
	top: 118px;
}

.menu{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.menu li{display:flex;flex-direction: column;justify-content: space-between;width:calc(20% - 3.5px);height:80px;padding:12px;border:1px solid #DCE0E5;border-radius:4px;background-color:#fff;}


/*레이어팝업*/
/* dim 처리 레이어 */
.dialog {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3); /* 배경 색상을 좀 더 진하게 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* 다른 요소들 위에 위치하도록 설정 */
  pointer-events: auto; /* 배경이 클릭될 수 있게 */
}
/* 내용 */
.dialog__inner {
  width: 300px;
  height: 200px;
  background: white;
  padding: 10px 16px;
  border-radius: 25px;
  position: relative;
  z-index: 1001; /* 다이얼로그 내용은 배경 위에 표시되도록 */
  pointer-events: auto; /* 다이얼로그 내부는 클릭 가능 */
}
.dialog__inner h1 {
  font-size: 22px;
}

.dialog__inner p {
  text-align: center;
  height: 70px;
  line-height: 70px;
}

.dialog__btn__wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 40px;
}

.dialog__btn__wrap button {
  width: 100px;
  height: 25px;
}

/* dim 효과가 적용된 뒤, 체크박스와 같은 요소들을 비활성화 */
.dialog__inner,
.dialog__inner * {
  pointer-events: none; /* 다이얼로그 내부 모든 요소 비활성화 */
}

.resizer {width: 100%; height: 10px; background: darkblue; position: absolute; bottom: 0; left: 0; cursor: ns-resize;}
.disabledTab {background-color:rgb(192, 192, 192); border-radius: 12px 12px 0 0; cursor: not-allowed; pointer-events: none;}
.readonly-select {background-color: #f0f0f0; border: 1px solid #ccc; color: #888; pointer-events: none; user-select: none; cursor: default;}