/*
======================================================================================
* 퍼블리싱 할 때 dist > custom_css 안에서만 사용
* dist > app.css는 건들지 말것
* 전체 테마 color변경을 원할 경우
    초기 순서 : yarn install > yarn run watch 후 src > _color.css 에서 컬러테마 변경
    작업 중간 수정 : yarn run watch 후 src > _color.css 에서 컬러테마 변경
======================================================================================
*/


/*
#=========================================#
        reset
#=========================================#
*/
html,body {min-width:1260px; overflow-x:auto !important; overflow-y:auto; height:auto; min-height:100dvh; font-family: "Pretendard", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
body {background-color: #d6dadd; }

.h_38{
    height:38px;
}
.text-sub {color:#9ea5be; }

.gap-y-8{
    row-gap: 2rem;
}

.datepicker-input {
    padding-left: 3.25rem;
}

.photo-card {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.photo-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.photo-card .photo-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.photo-card:hover .photo-remove-btn {
    opacity: 1;
}

.photo-card .photo-remove-btn svg {
    width: 14px;
    height: 14px;
}

.photo-card .photo-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.photo-list {
    border: 1px dashed #cbd5f5;
    border-radius: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
}

.setting-item-btn {
    display: block;
    margin-bottom: 12px;
}

.setting-item-btn:last-child {
    margin-bottom: 0;
}

.settings-grid {
    grid-template-columns: 1fr 1.4fr;
}

.settings-detail-card {
    min-height: 560px;
}

.list-panel {
    min-height: 520px;
}

.side-submenu {
    display: none;
    margin: 6px 0 0 32px;
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
}

.side-submenu.open {
    display: block;
}

.side-submenu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: 8px;
}

.side-submenu__item--active {
    color: #1e293b;
    background: #f1f5f9;
    font-weight: 600;
}

.side-submenu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.side-nav.fold .side-submenu {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.side-nav.fold .side-submenu__item {
    justify-content: center;
    padding: 8px 0;
}

.side-nav.fold .side-submenu__label {
    display: none;
}


/*
#=========================================#
        폰트
#=========================================#
*/


/*
#=========================================#
        로딩
#=========================================#
*/

#loadingContainer{
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ffffffc1;
    z-index: 999;
    justify-content: center;
    align-items: center;
}

/*
#=========================================#
        버튼 추가 커스텀
#=========================================#
*/

.btn-stone{
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-stone) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-stone) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-outline-stone{
    --tw-border-opacity: 0.4;
    border-color: rgb(var(--color-stone) / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(var(--color-stone) / var(--tw-text-opacity));
}

.btn-outline-stone:hover:not(:disabled){
    background-color: rgb(var(--color-stone) / 0.01);
}

.btn-green{
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-green) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-green) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-outline-green{
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-green) / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(var(--color-green) / var(--tw-text-opacity));
}

.btn-outline-green:hover:not(:disabled){
    background-color: rgb(var(--color-green) / 0.1);
}
/*
#=========================================#
        컨텐츠 영역 커스텀
#=========================================#
*/

.box{border: 1px solid #e8e5e5;}
/* 체크박스 애니메이션 변경 */

[type='checkbox']{background-position: 0 30px;--tw-border-opacity: 0.5!important;border-color:rgb(var(--color-slate-300) / var(--tw-bg-opacity))!important;}
[type='checkbox']:checked, [type='radio']:checked{background-position: 0 0px;}

/* 체크박스 커스텀 */
.checkbox_btn input{display:none;margin:0 !important;}
.checkbox_btn input + span{position:relative;height:34px;padding:0 10px;min-width:100%;border:1px solid rgba(0,0,0,0.1);background:#fff;
    cursor: pointer;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    display:inline-flex;align-items:center;justify-content:center;}

.checkbox_btn input:checked + span{z-index:5;background:rgb(var(--color-primary) / var(--tw-bg-opacity));color:#fff;border-color:#1556dc;}
.flex .checkbox_btn:first-child input + span{border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;}
.flex .checkbox_btn:last-child input + span{border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;}
.flex .checkbox_btn:not(:first-child){margin-left:-1px}

/* 라디오 커스텀 */
.radio_btn input{display:none;margin:0 !important;}
.radio_btn input + span{
    position:relative;height:34px;padding:0 10px;min-width:100%;border:1px solid rgba(0,0,0,0.1);background:#fff;
    cursor: pointer;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    display:inline-flex;align-items:center;justify-content:center;
}
.radio_btn.dis input + span{background:rgb(var(--color-slate-400));color:rgb(var(--color-slate-200) / var(--tw-border-opacity));cursor: not-allowed;}
.radio_btn.dis ~ label span {color:rgb(var(--color-slate-400));cursor: not-allowed;}
.radio_btn input:checked + span{z-index:5;background:rgb(var(--color-primary) / var(--tw-bg-opacity));color:#fff;border-color:#1556dc;}
.flex .radio_btn:first-child input + span{border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem;}
.flex .radio_btn:last-child input + span{border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;}
.flex .radio_btn:not(:first-child){margin-left:-1px}

/* 톰셀렉트 커스텀 */
.tom_search + .ts-control .ts-input{padding-left:2rem;}
.ts-control.plugin-remove_button .item .remove{font-size:12px;}
.ts-control.multi .ts-input > div{background:#292929;color:#fff;}

/* box 비활성 */
.box_disabled{background:rgb(var(--color-slate-200));}
.box_disabled h3{color:rgb(var(--color-slate-400));}
.box_disabled .danger_btn_darea{display: none;}
.box_disabled p{color:rgb(var(--color-slate-400));}




/*
#=========================================#
        사이드 메뉴 커스텀
#=========================================#
*/

.side-nav .side-menu {
    transition: all 0.5s;
}
/* .side-nav > ul > li > .side-menu.side-menu--active {
    background-color: rgb(var(--color-stone) / var(--tw-bg-opacity));
} */
/* .side-nav .side-menu:hover {
    background-color: rgb(238 242 255);
} */
/* .side-nav > ul > li > .side-menu.side-menu--active:hover {
    background-color: rgb(41 37 36);
} */
.side-nav .side-menu .side-menu__title {
    margin-left: 0.45rem;
}
.side-nav .side-menu,
.side-nav > ul ul li a:not(.side-menu--active) {
    /* color:#8A92A6 */
    color: rgb(var(--color-slate-500));
}
.side-menu:active {
    scale: 0.9;
}

/*
#=========================================#
        사이드 메뉴 접기 펼치기 css
#=========================================#
*/
.side-nav {
    background-color: #fff;
    transition: all 0.3s;
}
.side-nav .logo_lg {
    display: flex;
}
.side-nav .logo_sm {
    display: none;
}
.side-nav.fold {
    width: 85px;
}
.side-nav.fold .logo_lg {
    display: none;
}
.side-nav.fold .logo_sm {
    display: flex;
}
.side-nav.fold .side-menu {
    justify-content: center;
    padding-left: 1px;
    padding-right: 1px;
}
.side-nav.fold > ul > li > .side-menu.side-menu--active {
    justify-content: center;
    padding-left: 1px;
    padding-right: 1px;
}
.side-nav.fold .side-menu__icon .ml-2 {
    margin-left: 0;
}
.side-nav.fold .side-menu__icon .ml-4 {
    margin-left: 0;
}
.side-nav.fold .side-menu__icon .ml-6 {
    margin-left: 0;
}
.side-menu__title {
    transition: all 0.1s 0.1s;
    opacity: 1;
}
.side-nav.fold .side-menu .side-menu__title {
    opacity: 0;
    position: fixed;
    left: -99px;
    top: -99px;
}
/*
@media all and (max-width: calc(1279px)) {
    .side-nav {
        z-index: 101;
        position: absolute;
        left: 0;
        top: 0;
        width: 230px;
        height: 100%;
    }
    .side-nav.fold {
        width: 70px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .side-nav + .content .fold_btn {
        margin-left: 160px;
        transition: margin 0.3s;
    }
    .side-nav.fold + .content .fold_btn {
        margin-left: 0px;
    }
    .content {
        margin-left: 70px;
    }
    .side-nav .side-menu {
        padding-left: 1.25rem;
    }
    .side-nav .side-menu .side-menu__title {
        display: flex;
    }
    .side-nav .side-menu .side-menu__title .side-menu__sub-icon {
        display: block;
    }
    .side-nav > ul > li > .side-menu.side-menu--active {
        padding-left: 1.25rem;
    }
}
*/
/*
#=========================================#
        모바일 메뉴
#=========================================#
*/

.mobile-menu {
    margin: auto;
    background-color: rgb(255 255 255);
}

.mobile-menu .scrollable {
    background-color: rgb(255 255 255);
}
.mobile-menu .menu {
    color: black;
    padding-left: 1rem;
    padding-right: 1rem;
}
.mobile-menu .menu.menu--active {
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
    border-radius: 0.5rem;
}
.mobile-menu .menu.menu--active .menu__icon {
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.mobile-menu .menu.menu--active .menu__title {
    font-weight: 500;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.mobile-menu ul li.side-nav__devider {
    width: 90%;
    height: 1px;
    background-color: rgb(var(--color-dark) / 0.08);
}
.mobile-menu ul li ul {
    margin: 0;
    background-color: rgb(var(--color-slate-50) / var(--tw-bg-opacity));
}
.mobile-menu ul li ul ul {
    background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}

@media all and (max-width: calc(767px)) {
    /* 모바일 검색 */
    .search-result {
        width: 300px;
    }
}

/*
#=========================================#
        content
#=========================================#
*/
.content_wrap {position:relative; display:flex; min-height:calc(100dvh - 1.5rem);}

.content {padding:0 20px 40px; background-color:#f3f5f8; min-height:auto; }

.p-8 { padding: 2rem; }

.tab-content > div {width:100% !important; }

/*
#=========================================#
        테이블 상태
#=========================================#
*/

.ui-widget{
    width:100%!important;
}

.table.table-hover tbody tr {cursor:pointer; }

.table.table-sm th,
.table.table-sm td {
    padding: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.delete_info::before {
    content: "";
    position: absolute;
    right: 15px;
    bottom: calc(100% - 2px);
    width: 20px;
    height: 8px;
    border-bottom: 8px solid #000;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

/* 테이블 페이지 네이션 */
.pagination .page-item.active .page-link{
    border-color:rgb(var(--color-stone))
}

/*
#=========================================#
        체크박스 커스텀
#=========================================#
*/
.custom_check input[type="radio"] {display:none; }
.custom_check input[type="radio"] + label {display:block; min-width:75px; padding:8px 10px; font-weight:600; letter-spacing:-0.036px; background-color:#f8faff; border-radius:4px; text-align:center; color:rgb(var(--color-primary) / 1 ); cursor:pointer; }
.custom_check input[type="radio"]:checked + label { color:#fff; background-color:rgb(var(--color-primary) / 1 ); }


/*
#=========================================#
        라이트피커 커스텀
#=========================================#
*/
.nav.nav-boxed-tabs .nav-item .nav-link {background-color:#F8FAFF; border-radius:0; }
.nav.nav-boxed-tabs .nav-item .nav-link.active {border-radius:4px; }

/*
#=========================================#
        라이트피커 커스텀
#=========================================#
*/
.datepicker2{
    transition: all 0.1s;
}
.datepicker2:active{
    scale: 0.9;
}


/*
#=========================================#
        이미지업로드
#=========================================#
*/

.imgupload_bg {position:relative; background:#f8faff url('../images/image.svg') no-repeat center 40%; }
.imgupload_bg:after {content:'파일 업로드'; position:absolute; left:0; bottom:30%; width:100%; text-align:center; font-weight:bold; color:#9ea5be; }
.imgupload_bg img {z-index:10; position:relative; }


/*
#=========================================#
        color picker
#=========================================#
*/
.pickr .pcr-button {border:1px solid #d0d4de; }


/*
#=========================================#
        모달 여러개
#=========================================#
*/
.modal_wrap {z-index:-10000; opacity:0; visibility:hidden; position:fixed; left:0; top:0; overflow:auto; width:100%; height:100%; background-color:rgba(0,0,0,0.5); transition:all 0.5s; }
.modal_wrap.show {z-index:10000; opacity:1; visibility:visible; }
.modal_wrap .modal {left:20px; top:20px; width:auto; height:auto;  background:transparent; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.modal_wrap .modal .modal-dialog {margin:0; }

.modal_wrap .modal:nth-child(1) { top: 20px; left: 20px; }
.modal_wrap .modal:nth-child(2) { top: 40px; left: 50px; }
.modal_wrap .modal:nth-child(3) { top: 60px; left: 80px; }
.modal_wrap .modal:nth-child(4) { top: 80px; left: 110px; }
.modal_wrap .modal:nth-child(5) { top: 100px; left: 140px; }
.modal_wrap .modal:nth-child(6) { top: 120px; left: 170px; }
.modal_wrap .modal:nth-child(7) { top: 140px; left: 200px; }
.modal_wrap .modal:nth-child(8) { top: 160px; left: 230px; }
.modal_wrap .modal:nth-child(9) { top: 180px; left: 260px; }
.modal_wrap .modal:nth-child(10) { top: 200px; left: 290px; }
.modal_wrap .modal:nth-child(11) { top: 220px; left: 320px; }
.modal_wrap .modal:nth-child(12) { top: 240px; left: 350px; }
.modal_wrap .modal:nth-child(13) { top: 260px; left: 380px; }
.modal_wrap .modal:nth-child(14) { top: 280px; left: 410px; }
.modal_wrap .modal:nth-child(15) { top: 300px; left: 440px; }

.modal_wrap .modal:nth-child(16) { top: 200px; left: 60px; }
.modal_wrap .modal:nth-child(17) { top: 220px; left: 90px; }
.modal_wrap .modal:nth-child(18) { top: 240px; left: 120px; }
.modal_wrap .modal:nth-child(19) { top: 260px; left: 150px; }
.modal_wrap .modal:nth-child(20) { top: 280px; left: 180px; }
.modal_wrap .modal:nth-child(21) { top: 300px; left: 210px; }
.modal_wrap .modal:nth-child(22) { top: 320px; left: 240px; }
.modal_wrap .modal:nth-child(23) { top: 340px; left: 270px; }
.modal_wrap .modal:nth-child(24) { top: 360px; left: 300px; }
.modal_wrap .modal:nth-child(25) { top: 380px; left: 330px; }
.modal_wrap .modal:nth-child(26) { top: 400px; left: 360px; }
.modal_wrap .modal:nth-child(27) { top: 420px; left: 390px; }
.modal_wrap .modal:nth-child(28) { top: 440px; left: 420px; }
.modal_wrap .modal:nth-child(29) { top: 460px; left: 450px; }
.modal_wrap .modal:nth-child(30) { top: 480px; left: 480px; }

/* .modal_wrap .modal:nth-child(10) { top: 140px; left: 20px; }
.modal_wrap .modal:nth-child(11) { top: 140px; left: 50px; }
.modal_wrap .modal:nth-child(12) { top: 140px; left: 80px; }
.modal_wrap .modal:nth-child(13) { top: 140px; left: 110px; }
.modal_wrap .modal:nth-child(14) { top: 140px; left: 140px; } */