/**************************************************************/
/*								                              */
/*  Design ezinc     			                              */
/*  Date : 2024-09-30                                        */
/*      				         			                  */
/**************************************************************/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');



/* ============================ [ popup ] ============================ */
/* modal background */
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.75);
}

.modal-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-40);
}


/********** modal style **********/
/* modal box */
.modal-content {
    position: relative;
    width: fit-content;
    height: fit-content;
    max-height: 100%;
    padding: var(--spacing-32) var(--spacing-48);
    background: var(--form);
    border-radius: var(--radius-xxxl);
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 20px 0px rgba(0, 51, 100, .15);
}

[data-theme="dark"] .modal-content {
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 1);  
}

/* modal header */
.modal-header {
    width: 100%;
}

.modal-title {
    color: var(--gray-900);
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: 1.3;
}

.close {
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    top: 3rem;
    right: 3rem;
    background: url("../images/ico_close.svg") no-repeat center center;
    color: transparent;
    opacity: 0.7;
}

.close:hover,
.close:active,
.close:focus {
    opacity: 1;
}

/* modal body */
.modal-body {
    width: fit-content;
    height: fit-content;
    padding: var(--spacing-16) 0;
    flex: 1;
}



/********** modal inner **********/
.modal__wrap {
    height: fit-content;
    padding-top: var(--spacing-32);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-32);
}

/* madal info box */
.modal__wrap--info {
    width: 100%;
    background: var(--bg-header);
    border-radius: var(--radius-lg);
    padding: var(--spacing-24);
}

.modal__wrap--info li {
    padding: var(--spacing-4) 0;
    display: flex;
    gap: var(--spacing-16);
}

.modal__wrap--info span {
    display: inline-block;
}

.modal__wrap--info .label {
    width: 12rem;
    color: var(--blue-50);
    font-weight: 300;
}

.modal__wrap--info .info {
    color: var(--white);
    font-weight: 500;
}

[data-theme="dark"] .modal__wrap--info .label {
    color: var(--gray-500);
    font-weight: 500;
}

[data-theme="dark"] .modal__wrap--info .info {
    color: var(--gray-900);
    font-weight: 700;
}


/********** form **********/
.modal__wrap--form {
    width: 100%;
}

.modal__wrap--form label {
    margin-bottom: 1.2rem;
}

.modal__wrap--form input,
.modal__wrap--button > button {
    width: 100%;
    height: 4.8rem;
}

.modal__wrap--button > button {
    margin: var(--spacing-24) 0 var(--spacing-12);
}

.modal__wrap--guide {
    position: relative;
    display: block;
    color: var(--gray-700);
    font-weight: 500;
    line-height: 2rem;
    padding-left: 2.4rem;    
}

.modal__wrap--guide::before {
    position: absolute;
    content: '';
    width: 2rem;
    height: 2rem;
    left: 0;
    top: 0;
    background: url("../images/ico_notice.svg") no-repeat center center; 
}


/********** modal body guide text **********/
.modal__guide {
    margin: var(--spacing-16) 0;
    padding: var(--spacing-24);
    border-radius: var(--radius-md);
}

.modal__guide h5 {
    padding-bottom: var(--spacing-8);
} 

.modal__guide--rule {
    overflow: initial;
}

.modal-wrap .btn_wrap {
    padding: var(--spacing-16) 0;
}

/********** modal body table **********/
.modal__table {
    position: relative; 
    width: 100%;
    height: auto;
    max-height: calc(100vh - 48rem);
    overflow-y: auto;
    padding: 0 !important;
    flex-grow: 1;
}

.list__pagination,
.modal__button-group {
    flex-shrink: 0;
    padding-top: var(--spacing-16);
}

.modal__table table {
    width: 100%;
    min-width: 560px;
}

.modal__table th, 
.modal__table td {
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--fs-13);
}

.modal__table th {
    background: var(--gray-50);
    z-index: 4
}

[data-theme="dark"] .modal__table th {
    background: var(--gray-50) !important;
}

.modal__table tr:hover td {
    background: transparent;
}

.modal__table--tb th, 
.modal__table--tb td {
    border-right: 1px solid var(--gray-200);
}

/* table inner button */
.table__button-wrap > * {
    position: relative;
    display: block;
}

.table__button-group {
    display: flex;
    flex-direction: column;
}

/* modal bottom button */
.modal__button {
    padding: var(--spacing-16) var(--spacing-32);
    font-size: var(--fs-14);
    line-height: inherit;
}

/* pagination */
.modal__wrap .list__pagination {
    padding: 0;
}


/* thead 고정 */
/* .modal__table thead {
    position: sticky;
    top: 0px;
    background: var(--blue-10);
    z-index: 3;    
}

[data-theme="dark"] .modal__table thead {
    background: var(--gray-50) !important;
}

.sticky,
.sticky:hover {
    position: sticky;
    left: 0;
    background: var(--blue-10) !important;
    border-right: 1px solid var(--gray-300) !important;
    z-index: 2;
}

[data-theme="dark"] .sticky,
[data-theme="dark"] .sticky:hover {
    background: var(--gray-50) !important;
}

.modal__table th.sticky {
    z-index: 4;
} */
 

/* ============================ [ findId ] ============================ */
.rdo_wrap {
    width: 100%;
    height: fit-content;
    margin-bottom: 2rem;
    background: var(--white);
    border: 1px solid var(--gray-600);
    border-radius: var(--radius-md);
    display: flex;    
}

[data-theme="dark"] .rdo_wrap {
    background: var(--white);
    border: 1px solid var(--gray-400);
}

.rdo_wrap .rdo {
    width: 50%;
    height: fit-content;
}

.rdo [type="radio"] {
    display: none;
}

.rdo label {
    display: inline-block;
    width: 100%;
    color: var(--gray-600);
    font-size: var(--fs-15);
    font-weight: 500;
    text-align: center;
    padding: 0.75rem;
}

[data-theme="dark"] .rdo label {
    color: var(--gray-600);
}

.rdo label.selected-label {
    background: var(--gray-600);
    color: var(--white);
}

[data-theme="dark"] .rdo label.selected-label {
    background: var(--gray-400);
    color: var(--black);
}

.rdo label:hover {
    cursor: pointer;
}



/* ============================ [ mediaquery ] ============================ */
@media screen and (max-height: 680px) {
    .modal-content {
        height: 100%;
        overflow: auto;
    }
}

@media screen and (max-width: 768px) {
    .modal {
        height: 100%;        
        background: var(--form);
        overflow: auto;
    }
    
    .modal-dialog {        
        height: 100%;
        padding: 0;
    }
    
    .modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    
    .popup-header {
        padding-bottom: var(--spacing-40);
    }

    .modal-body {
        width: 100%;
        padding: var(--spacing-40);
        overflow: auto;
        flex: 1;
    }

    .modal__wrap--info span {
        font-size: var(--fs-14);
    }
    
    .modal__wrap--info .info {
        text-align: right;
        flex: 1;
    } 
    
    .modal__table {
        max-height: initial;
        border: 0;
        flex: 1;
    }
    
    .modal__table table {
        min-width: 0;
    }
    
    .modal__table th {
        display: none;
    }
    
    .modal__table td {
        border-right: 0;
    } 
    
    .table__button-wrap {
        position: relative;
        flex-wrap: wrap;
    }
    
    .table__button-group {
        width: 100%;
    }
        
    .table__button {
        width: 100% !important;
    }
    
    .list__table table td p {
        width: 40%;
    }
    
    .modal__button-group {
        padding: var(--spacing-16) 0;
    }
    
    .modal__button-group,
    .modal__button-group .btn_basic {
        width: 100%;
    }
}