@charset "UTF-8";
.radio-opt{display: flex; align-items: start; margin-left: 24px;}
.radio-opt>button{margin-right: 1rem;}

/* 점검표 점검 빈도 */
.radio-opt>.btn-add-ico-p{align-items: start; margin-top: 10px;}
.radio-opt>ul{ flex-direction: row; flex-wrap: wrap; gap: 4px;}

/* 점검표 점검항목 */
.sortable-list>.item{border: 1px solid var(--dark800); padding: 12px 20px; border-radius: 10px;}
.item-tag>span{display: inline-block; padding: 4px 8px; border-radius: 5px; background: var(--dark800); font-size: 0.875rem; color: var(--white);}
.item-section>.item{border-top: 8px solid var(--dark800); padding: 12px 20px; border-radius: 10px; border-bottom: 1px solid var(--dark800); border-left: 1px solid var(--dark800); border-right: 1px solid var(--dark800);}
.add-photo {display: flex; flex-direction: column; padding: 8px 10px 8px 16px; gap: 16px; background: var(--light300); border-radius: 10px;}
.add-photo-tit {display: flex; justify-content: space-between; align-items: center;}
.add-photo-tit .btn-g {border: 1px solid var(--light100);}
.item-section .add-photo-lst{display: flex; align-items: center; flex-wrap: wrap;}
.item-section .add-photo-lst li{display: flex; align-items: center; margin-right: 1rem; padding: 4px 0;}
.item-section .add-photo{gap: 0;}

/* 이슈 태그 목록 */
.content-facility{padding: 20px; background: var(--blue50); border-radius: 10px;}
.content-issue{display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border: 1px solid var(--light500); border-radius: 16px;}
.tag-list{display: flex; justify-content: space-between; align-items: center;}
.tag-list div[class*="tag-"]{padding: 4px 8px; border-radius: 8px;}
.tag-list div[class*="tag-"]>span{font-weight: 600;}
.tag-list .tag-a{background: #FCDADA; fill-opacity: 50%; color: var(--alert);}
.tag-list .tag-p{background: var(--blue50); color: var(--blue500);}

.btn-ico-s{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 20px;}
.btn-ico-s:hover{background-color: var(--light500); transition: 0.3s;}

/* 시설 상세 - qr 이미지 */
/* 시설 상세 - qr 이미지 */
.content-qr{display: flex; align-items: center;}
.qrcode-wrap{padding: 10px 10px 5px; min-height: 80px; min-width: 80px; border: 10px solid var(--blue150); border-radius: 10px; background: var(--white);}
.content-qr>.qrcode-wrap+div>button{padding: 4px 8px; border-radius: 5px; border: 1px solid var(--light300); background: var(--white);}
.content-qr>.qrcode-wrap+div>button>i{font-size: 16px;}

/* 시설 상세 - 점검 항목 */
.content-cl{display: flex;}
.content-cl>p{min-width: 140px; height: 40px; border-right: 1px solid #ddd; margin-right: 16px; line-height: 40px; padding-left: 10px;}
.content-cl>ul.clist{display: flex; align-items: center; flex-wrap: wrap; gap: 8px;}
.content-cl>ul.clist>li{padding: 8px 12px; background: var(--white); border-radius: 10px; cursor: pointer;}
.content-cl>ul.clist>li.on{background: var(--dark800); color: var(--white)}
.content-cl>ul.clist>li:hover{background: var(--dark800); color: var(--white)}

.content-cldtl{display: grid; padding-left: 160px; width: 100%; max-width: calc(100% - 116px); height: max-content; grid-template-columns: 1fr 1fr; gap: 16px 32px;}
.content-cldtl div{padding-right: 16px;}
.content-cldtl div.cl-memo{display: flex; align-items: end}
.content-cldtl div>span{font-size: 12px; color:var(--dark600)}
.content-cldtl div>p{text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 40px;}

.content-filter{border-radius: 16px;}
.content-filter>span.f-border{width: 1px; height: 70%; background: var(--light500);}


/*** 빈 화면 ***/
[class*="empty-"]{display: flex; justify-content: center; align-items: center;}
[class*="empty-"]>div{display: flex; flex-direction: column; justify-content: center; align-items: center;}
[class*="empty-"]>div p{text-align: center;}

/* 일괄 등록 - 빈 화면 */
.excel-info{border: 1px solid var(--light100); border-radius: 15px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; flex: auto;}
.empty-file{height: fit-content; min-height: 600px; background: var(--white);}
.empty-file>div img{width: 60px; height: 60px; margin-bottom: 8px;}
.empty-file>.add-box{width: 600px; height: 320px; border: 1px dashed var(--dark600); border-radius: 20px;}

/* 회사, 기관 관리, 모달 - 빈 화면 */
.empty-content{height: calc(100% - 250px); min-height: 200px;}
.empty-content>div img{width: 80px; height: 80px;}

/* 회사 기관 관리 */
div.wrapper:has(div.cm-header){padding: 20px;}
.cm-header{background: var(--light400); display: flex; justify-content: space-between; align-items: center; padding: 24px 40px; border-radius: 24px;}
.cm-header>p{font-size: 2rem; font-weight: 500;}
.cm-header>p>span.p-em{color: var(--blue500); font-weight: 600;}
.cm-header .user-info button.btn-ico-w:has(img){padding: 2px 4px;}
.cm-header .btn-ico-w{padding: 2px 8px; min-width: 28px; border-radius: 4px; border: 1px solid var(--light500); background: var(--white);}
.cm-header .user-pfl{display: flex; justify-content: flex-start; align-items: center;}
.cm-header .user-pfl>.user-img{width: 48px; height: 48px; border-radius: 50%; background: url(../assets/ico_profile.png) no-repeat center/cover;}
.cm-header .user-pfl>.user-img img{width: 48px; height: 48px; border-radius: 50%;}
.cm-header .user-pfl>.user-img i{color: var(--white); font-size: 32px;}
.cm-header .user-pfl>.user-info{min-width: 300px;}
.cm-header .user-pfl>.user-info>div{display: flex; align-items: center;}
.cm-header .user-pfl>.user-info>div>p{flex: auto;}

.cm-schadd .search-wrap{background: var(--white); width: 320px;}

.cm-content .cmp-list{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; flex-wrap: wrap; grid-gap: 12px; gap: 12px;}
.cm-content .cmp-list>.cmp-block{background: var(--white); border-radius: 20px;cursor: pointer;}

.cmp-info{padding: 20px; min-height: 140px;}
.cmp-info .cmp-name{font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 5px;}
span.ico-admin{background: #FFF1CC; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; justify-content: center; align-items: center;}
span.ico-admin>i{color: #FFB600; font-size: 12px;}
.cmp-info-f{display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top: 1px solid var(--light500);}
.cmp-info-f>span{border-radius: 10px; padding: 4px 8px; background: var(--blue300); color: var(--white); font-weight: 500;}

.result{padding: 8px 12px; background: var(--blue50); border-radius: 16px;}
.result img.flag{width: 20px; height: 20px; content: url("../assets/assistant_photo.png");}

/*홈 그리드 탭메뉴*/
.nav-tabs .nav-link{color: var(--dark900); background: var(--light100); margin-right: 4px;}
.nav-tabs .nav-link.active{background: var(--white);}
.nav-tabs + .tab-grid {margin-top: 0;}
.nav-tabs + .tab-grid .grid-section {border-radius: 0 20px 20px 20px; margin-top: -11px; display: none; overflow: hidden}
.nav-tabs + .tab-grid .grid-section.active {display: block;}

.item-section .add-photo-lst{display: flex; align-items: center; flex-wrap: wrap;}
.item-section .add-photo-lst li{display: flex; align-items: center; margin-right: 1rem; padding: 4px 0;}
.item-section .add-photo{gap: 0;}

.setting-tit {
    display: flex;
    align-items: center;
    padding: 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--blue500);
    border-bottom: 1px solid var(--light100);
}

/*홈 현황 차트*/
.chart-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-basis: 50%;
    font-size: 16px;
}
.chart-wrap .chart {
    width: 100px;
    height: 100px;
}

.chart-num {
    display: flex;
    flex-direction: column;
    min-width: 250px;
    font-size: 16px;
}
.chart-num .chart-tit {
    display: flex;
    justify-content: space-between;
    padding: 8px 6px;
    border-bottom: 1px solid var(--light200);
    font-weight: 600;
}
.chart-num .chart-cont p {
    position: relative;
    padding: 6px 6px 6px 22px;
    display: flex;
    justify-content: space-between;
}
.bt > * {
    cursor: pointer;
    border-radius: 4px;
}
.bt > *:hover {
    background: var(--white);
}
.chart-num .chart-cont p:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 7px;
    top: 12px;
    border-radius: 3px;
}
.chart-num .chart-cont p.bc-b:before {
    background: var(--blue500);
}
.chart-num .chart-cont p.bc-grn:before {
    background: #05B989;
}
.chart-num .chart-cont p.bc-a:before {
    background: var(--alert);
}

/*홈 통계 : 테이블*/
.table-section {
    border-radius: 20px;
    background: rgb(255, 255, 255);
}
.table-section .table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid var(--light100);
}
.table-section table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow-x: auto;
}
.table-section table thead {
    display: table-header-group;
}
.table-section table tbody {
    display: table-row-group;
}
.table-section table tr.b-0 th {
    border: none;
}
.table-section table th, .table-section table td {
    display: table-cell;
    padding: 12px;
    text-align: center;
    border-right: 1px solid var(--light100);
    font-size: 16px;
    font-weight: normal;
}
.table-section table th:first-child, .table-section table td:first-child {
    width: 160px;
    min-width: 160px;
    padding: 12px;
    left: 0;
}
.table-section table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--light300);
}
.table-section table th:first-child {
    z-index: 10;
}
.table-section table td {
    background: var(--white);
}
.table-section table td:first-child {
    position: sticky;
}


/*헤더*/
.header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    color: #333;
    font-size: 1rem;
}
.header-logo {
    width: 200px;
    padding: 10px 20px;
}
.header-logo img {
    width: 100%;
}
.header-center {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-right: 12px;
}
.header-center .main-menu {
    display: flex;
}
.header-center .main-menu li {
    cursor: pointer;
    margin: 8px 0;
    padding: 10px 20px;
    min-width: 80px;
    border-radius: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-center .main-menu li.active {
    background: #2e4d8c;
    color: white;
    font-weight: bold;
}
.header-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-info .select {
    width: auto;
    min-width: 180px;
    padding: 8px 8px 8px 16px;
    background-color: var(--white);
    border: none;
    margin: 0;
}
.header-info .info-wrap {
    position: absolute;
    width: 252px;
    right: 12px;
    top: 62px;
    background: white;
    border-radius: 15px;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    z-index: 999;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

/*홈 : 날짜 인풋*/
.date {
    width: 280px;
    height: 40px;
    padding: 4px 10px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--light100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.date input[type=text] {
    color: var(--dark600);
    text-align: center;
    font-size: 16px;
    border: none;
}
.date input[type=text]::placeholder {
    text-align: center;
}

/*버튼*/
.btn-phone {
    background: var(--white);
    border-radius: 50%;
    min-width: 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--light300);
}
.btn-phone img {
    width: 24px;
    position: relative;
    z-index: 3;
}
.btn-phone:hover {
    background: var(--light500);
}

.btn-person-g {
    display: flex;
    gap: 4px;
    background: var(--light700);
    padding: 10px;
    border-radius: 10px;
}
.btn-person-g img {
    width: 24px;
}

.btn-download {
    display: flex;
    gap: 4px;
    background: var(--light700);
    padding: 10px;
    border-radius: 10px;
}
.btn-download img {
    width: 24px;
}

/*뱃지*/
.badge-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.badge-wrap .badge {
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 5px;
    font-weight: 400;
}
.badge-wrap .badge.b {
    background: var(--blue50);
    color: var(--blue400);
    border: none;
}
.badge-wrap .badge.a {
    background: #fcdada;
    color: var(--alert);
    border: none;
}
.badge-wrap .badge-r {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--dark600);
    border-radius: 15px;
    color: var(--dark900);
    cursor: pointer;
}
.badge-wrap .badge-r.on {
    border-color: var(--dark900);
    background: var(--dark800);
    color: var(--white);
}

/*검색 인풋 버튼*/

.search-wrap {
    display: flex;
    justify-content: space-between;
    background: var(--light700);
    border-radius: 25px;
}
.search-wrap input {
    background: transparent;
    border: none;
    padding: 0;
    flex: 1;
}
.search-wrap:hover .bt-wrap button:has(.ico-close-bg) {
    display: inline-flex;
}
.search-wrap input:active + .bt-wrap button:has(.ico-close-bg) {
    display: inline-flex;
}
.search-wrap input:focus + .bt-wrap button:has(.ico-close-bg) {
    display: inline-flex;
}
.search-wrap .bt-wrap button:has(.ico-close-bg) {
    display: none;
}

.inp-pwd{position: relative;}

.inp-pwd>i{
    position: absolute; top: 50%; left: 28px; transform: translate(-50%, -50%);)
}

.inp-pwd>button{
    position: absolute; top: 50%; right: 20px; transform: translate(-50%, -50%);
}

.inp-pwd .pwd-hid i{
    color: var(--dark600);
}

.grid-search{display: flex; justify-content:space-between; align-items: center; flex-wrap: wrap; gap: 12px;}

/* splash 애니메이션 */
@keyframes jump-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateY(-9px) }
    35% { transform: translateY(-9px) rotate(5deg) }
    55% { transform: translateY(-9px) rotate(-5deg) }
    65% { transform: translateY(-9px) rotate(5deg) }
    75% { transform: translateY(-9px) rotate(-5deg) }
    100% { transform: translateY(0) rotate(0) }
}
div.constant-jump-shake {
    animation: jump-shaking 1s 1;
}
div.splash{
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 60px);
    display: flex;
    align-items: center;
    flex-direction: column; gap: 10px;
}

button:has(.profile-h){
    width: 40px;
    height: 40px;
}
.profile-h{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.wrapper .main-wrapper #content .content-wrapper{
    background: none;
    padding: 0 10px;
}