/* @import url(./_reset.css); */

:root { 
    --brandColor: #184992;
    --brandColor2: #555555;
    --brandColor3: #8aa9e1;
    --brandColor4: #7a7f88;
    --borderColor: #ddd;
    --menuBg: #4f7fc9;
    --menuThis: #fff;
    --tableColor: #edf3fd;
    --menuColor: #3f66a1;
    --red: #db2410;
    --btnPadding: 7px 20px;
} 
button.btn-reset-scon { border: 0; cursor: pointer; background: 0; }

/* 공통 */
.d-none-scon { display: none; }
.d-block-scon { display: block; }
.w-full-scon { width: 100% !important; }
.h-full-scon { height: 100% !important; }
.h-100px-scon { height: 100px !important; }
.p-1-scon { padding: .25rem !important; }
.p-2-scon { padding: .5rem !important; }
.p-3-scon { padding: .75rem !important; }
.p-4-scon { padding: 1rem !important; }
.p-5-scon { padding: 1.25rem !important; }
.text-center-scon { text-align: center !important; }
.text-right-scon { text-align: right !important; }
.text-left-scon { text-align: left !important; }

/* 버튼 */
.btn-scon { 
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: var(--btnPadding); background: #fff; color: var(--menuColor); border: 1px solid var(--brandColor); border-radius: 5px; font-size: 15px; font-weight: 600; transition: all 0.15s; } 
.btn-scon img {
    max-width: 45px;
}
.btn-scon.red-scon { background: #fff; color: #333;     background: #e7e7e7;
    margin-left: auto;
    display: block;
    border: 0; }
.btn-scon:hover { background: #eef0ff; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px; color: var(--menuColor); } 
.btn-scon.red-scon:hover { background: #cfcfcf; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px; color: #333; font-weight: 600;} 
.btn_area-scon { display: flex; align-items: center; gap: 15px; }
.base-font-scon { font-size: 15px !important; font-weight: 400 !important;}



/* ========== 모달 ========== */
.modal-scon { display: none; z-index: 1000;  } 
.modal-scon.show {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.modal_area-scon { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 500px; width: 90%; background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15); } 
.modal_area-scon .modal_header-scon { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; } 
.modal_area-scon .modal_title-scon { font-size: 20px; font-weight: 700; } 
.modal_area-scon button.close-scon { font-size: 30px; font-weight: 200; cursor: pointer; } 
.modal_area-scon .modal_body-scon { background: #fff; padding: 0 15px 20px 15px; } 

.modal_area-scon .input_wrap-scon { flex: 1; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } 
.modal_area-scon .input_wrap-scon label { width: 120px; text-align: center; font-size: 16px; font-weight: 600; cursor: default; } 
.modal_area-scon .input_wrap-scon input, .modal_area-scon .input_wrap-scon select, .modal_area-scon .input_wrap-scon textarea { flex: 1; padding: 10px 15px; font-size: 16px; font-weight: 300; border: 1px solid var(--borderColor); border-radius: 5px; } 
.modal_area-scon .input_wrap-scon select { background: url(../images/arrow_down.svg) no-repeat 95% 50%/9px; } 
.modal_area-scon.input_wrap-scon select option { text-align: center; } 

.modal_area-scon .modal_body-scon.select_wrap-scon, .modal_area-scon .modal_body-scon .calender_wrap-scon { padding: 0; gap: 0; } 

.modal_area-scon.modal-sm-scon { 
    position: fixed;
    left: 5px;
    bottom: 0;
    top: auto;
    max-width: 300px;
    transform: unset;
    z-index: 1000; 
}

.modal-scon:has(.modal-ldow-sconn) { background-color: transparent; }


@media (max-width: 785px) {

}
@media (max-width: 586px) {
    .modal_area-scon.modal-sm-scon {
        max-width: unset;
        width: calc(100% - 10px);
    }
}