/**************************************************************/
/*								                              */
/*  Design ezinc     			                              */
/*  Date : 2024-11-20	                                      */
/*      				         			                  */
/**************************************************************/

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



/* ============================ [ common ] ============================ */
body {
    background: var(--form-50);
}

/* footer */
footer {
    background: var(--gray-800);
    border-top: 0;
}

footer > * {
    color: var(--gray-300);
}

.footer li.copyright {
    color: var(--gray-400) !important;
}

.footer-address li::before {
    background-image: url("../images/ico_location_white.svg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

pre {
    overflow: initial;
}

/* ============================ [ menu.jsp ] ============================ */
.navBar-top {
    background: transparent;
    padding: 0;
    border-bottom: 1px solid var(--form-100);
}

.navBar-top .inner {
    height: auto;
    flex-wrap: nowrap;
}

.navBar__container {
    flex-grow: 1;
}

.navBar__menu {
    padding: 0 var(--spacing-24);
    flex-wrap: nowrap;
}

.navBar__menu-item {
    color: var(--gray-700);
}

.navBar__menu-item:hover, 
.navBar__menu-item:active, 
.navBar__menu-item:focus, 
.navBar__menu-item.active {
    color: var(--primary) !important;
}

.navBar__menu-item.active::before {
    background: var(--primary) !important;
}

/* nav right button */
.navBar__button-group {
    gap: var(--spacing-24) !important;
}

.navBar__button,
.navBar__button:hover {
    position: relative;
    border: 0;
    color: var(--gray-600) !important;
    font-size: var(--fs-13);   
    line-height: 1.3;
}

.navBar__button:hover,
.navBar__button:active,
.navBar__button:focus {
    text-decoration: underline;
}

/* select */
.navBar__button-language,
.navBar__button-language:focus {
    border: 0 !important;
    background: url('../images/ico_language.svg') no-repeat left center,
                url('../images/ico_dropdown02.svg') no-repeat right center;
    background-color: transparent !important;
    padding: 0 var(--spacing-16) 0 var(--spacing-20);
    outline: 0;
}

.navBar__button.navBar__button-language:hover {
    text-decoration: none;
}

.navBar__button-signout,
.navBar__button-signin {
    background: transparent !important;
    border: 0 !important;
    padding: 0;
}

.navBar__button.navBar__button-signout:hover, 
.navBar__button.navBar__button-signin:hover, 
.navBar__button.navBar__button-signout:focus, 
.navBar__button.navBar__button-signin:focus, 
.navBar__button.navBar__button-signout:active
.navBar__button.navBar__button-signin:active {
    border: 0;
}


/* ============================ [ login.jsp ] ============================ */
.login__inner {
    width: fit-content !important;
    padding: var(--spacing-64);
    margin: 0 auto;
    flex: 1;
}

.login__title {
    padding: var(--spacing-48) var(--spacing-8);
}

.login__button {
    margin: var(--spacing-16) 0 0;
}



/* ============================ [ main.jsp ] ============================ */
.main__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.inner {
    display: flex;
    flex: 1;
}


/* ============================ [ cardList.jsp ] ============================ */
.list__inner {
    padding-bottom: 8rem;
}

/* auth card */
.auth__card {
    width: 100%;
    padding: var(--spacing-32) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-48);
}

.auth__card--list {
    width: 30rem;
}

.auth__card--group {
    width: 100%;
    max-height: 300px;
    padding-right: var(--spacing-8);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    overflow: auto;   
}

/* title */
.main-tit,
.sub-tit {
    position: relative;
    font-size: var(--fs-16);
    font-weight: 700;
    line-height: 1.8rem;
    padding-left: 26px;
    padding-bottom: var(--spacing-20);
}

.main-tit::before,
.sub-tit::before {
    position: absolute;
    content: '';
    width: 2rem;
    height: 2rem;
    left: 0;
    top: 0;
}

.main-tit::before {
    background: url('../images/ico_card.svg') no-repeat center center;
    background-size: contain;
}

.sub-tit::before {
    background: url('../images/ico_infodetail.svg') no-repeat center center;
    background-size: contain;
}

.auth__card--view {
    width: 100%;
    background: var(--gray-50);
    border: 1px solid var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-16) var(--spacing-24);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    transition: all 0.2s;
}

.auth__card--view:hover {
    border: 1px solid var(--gray-300);
    cursor: pointer;
}

.auth__card--view.active,
.auth__card--view.active:hover {
    background: var(--blue-50);
    border: 1px solid var(--blue-50);
    cursor: default;
}

.auth__view--id {
    color: var(--gray-800);
    font-size: var(--fs-15);
    font-weight: 700;
}

.auth__card--view.active .auth__view--id {
    color: var(--primary);
}

.auth__view--service,
.auth__view--user {
    color: var(--gray-500);
    font-size: var(--fs-13);
    font-weight: 500;
}

.auth__card--view.active .auth__view--service,
.auth__card--view.active .auth__view--user {
    color: var(--gray-800);
}

/* card detail info */
.auth__detail--view {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    align-items: flex-end;
}

.auth__detail--form {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-16) var(--spacing-24);
}

.auth__detail--group {
    border-bottom: 1px dashed var(--gray-200);
    padding: var(--spacing-4) var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.auth__detail--group:last-child {
    border-bottom: 0;
}

.auth__detail--group label {
    color: var(--gray-500);
    font-size: var(--fs-13);
    font-weight: 500;
    letter-spacing: -0.5px;
}

.auth__detail--group input,
.auth__detail--group input:hover,
.auth__detail--group input:read-only,
.auth__detail--group input:focus {
    width: fit-content !important;
    height: fit-content !important;
    border: 0;
    background: transparent;
    color: var(--gray-900);
    font-size: var(--fs-14);
    text-align: right;
    font-weight: 500;
    padding: var(--spacing-12) 0;
}

.auth__detail--delete {
    position: absolute;
    width: fit-content;
    height: fit-content;
    right: 1rem;
    top: -4.25rem;
    color: var(--gray-400);
    font-size: var(--fs-12);
    font-weight: 500;
    line-height: 1.6rem;
    padding: var(--spacing-8) 0;
    padding-left: var(--spacing-22);
}

.auth__detail--delete::before {
    position: absolute;
    content: '';
    width: 2rem;
    height: 2rem;
    left: 0;
    top: 6px;
    background: url('../images/ico_trashcan.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.6;
    transition: all 0.2s;
}

.auth__detail--delete:hover {
    color: var(--gray-700);
}

.auth__detail--delete:hover::before {
    opacity: 1;
}

/* auth table */
.auth__table {
    padding: var(--spacing-16) 0;
}

/* search */
.list__form {
    margin-top: 0;
}

.list__form form {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}

.list__form-container {
    width: fit-content;
    flex-direction: column;
    flex: 1;
}

.list__form-group,
.list__form-group input {
    width: 100%;
}


/* scrollbar custom */
/* scroll size */
.auth__card--group::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* scroll background */
.auth__card--group::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 10px;
}

/* scrollbar background */
.auth__card--group::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 10px;
}

/* scrollbar hover background */
.auth__card--group::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300);
    transition: all 0.2s;
    cursor: pointer;
}

.auth__card--group::-webkit-scrollbar:disabled {
    display: none;
}


/* ============================ [ mediaquery ] ============================ */
@media screen and (max-width: 930px) {    
    .login__form--qr {
        padding: var(--spacing-80) var(--spacing-48);
        gap: var(--spacing-32);
    }    
}

@media screen and (max-width: 768px) {
    /* login */
    .login__inner {
        padding-bottom: var(--spacing-80);
    }
    
    .login__title {
        padding-top: var(--spacing-16);
    }
       
    .login__form--qr {
        padding: var(--spacing-48) var(--spacing-32);
        flex-direction: column;
    }
    
    .login__qr {
        border: 0;
        padding: 0;
    }
        
    .ip_service select,
    .login__input input {
        font-size: var(--fs-14);
    }
    
    .auth__card {
        flex-direction: column;
    }
    
    .auth__card--list,
    .auth__detail--form {
        width: 100%;
    }
    
    .auth__card--group {
        max-height: 148px;
        padding-right: 0;
    }
    
    .auth__table {
        padding-top: var(--spacing-32);
    }    
    
    /* menu */
    .navBar__container {
        display: none;
    }
    
    .navBar__button {
        display: none;
    }
    
    .navBar__menu-item {
        color: var(--white);
    }
    
    .navBar__button-mobile {
        margin: var(--spacing-16) 0;
    }
    
    .navBar__menu-item:hover, 
    .navBar__menu-item:active, 
    .navBar__menu-item:focus,
    .navBar__menu-item.active {
        color: var(--primarySoft) !important;
    }
    
    .navBar__button-language, 
    .navBar__button-language:focus, 
    .navBar__button-language:read-only{
        width: 100%;
        background: 
            url("../images/ico_language_white.svg") no-repeat left center, 
            url("../images/ico_dropdown02.svg") no-repeat right center;
        background-color: transparent !important;
    }   
}