@import url('reset.css');

/* ========= common */
.wrap{position: relative; width: 100%;}
.container{position: relative; width: 100%; padding-top: 80px; background: #F0F2F5;}
.inner{position: relative; max-width: 940px; padding:0 20px; margin: 0 auto; padding-top: 48px; padding-bottom: 90px;}
.con_wrap{width: 100%; background: #FFFFFF; border-radius: 10px; margin-bottom: 24px;}

/* ========= input style */
input[type='checkbox']{width: 16px; height: 16px;border-radius: 3px;border: 1px solid #DDD;background: #FFF;vertical-align: middle;}
input[type='checkbox']:checked{background: url(../images/checkbox_on.svg) no-repeat center;}
input[type='text'],input[type='email'],input[type='password'],input[type='tel']{width: 100%; font-size: 16px; border: 0; outline: 0; padding: 18px 16px;border-radius: 12px;border: 1px solid #E9E9E9;background: #FFF;}
input::placeholder{color: #B4BBC9;font-size: 16px;font-weight: 400;letter-spacing: -0.64px;}
input[type='text']:focus,input[type='email']:focus,input[type='tel']:focus,
input[type='password']:focus{border: 1px solid #3B3F47;}

/* ========= button style */
.btn{width: 100%; border-radius: 10px; color: #fff; vertical-align: middle; font-weight: 700;}
.btn.large{height: 43px; font-size: 16px; letter-spacing: -0.16px;}
.btn.small{height: 38px; border-radius: 8px; font-size: 15px; letter-spacing: -0.15px;}
.btn.primary{ background: #4157A5;}
.btn.gray{background: #797D84;} 
.btn:disabled{background: #CCC;}
.btn_text{display: block; margin: 0 auto; color: #A4ABB7;text-align: center;font-size: 14px;font-weight: 500;line-height: 18px; /* 128.571% */letter-spacing: -0.56px;text-decoration-line: underline;}

.btn_block{display: flex;align-items: center;}
.btn_block.center{justify-content: center;}



/* ========= modal style */
.modal_overlay{display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 5000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.60);}
.modal_overlay.active{display: flex;}
.modal_dialog{width: 90%; max-width: 315px; background: #fff; border-radius: 14px;}
.modal_dialog .modal_util{padding: 20px 16px 16px 20px; display: flex; align-items: center; justify-content: space-between;}
.modal_dialog .modal_util span{color: #4157A5;font-size: 16px;font-weight: 600;line-height: 18px;letter-spacing: -0.16px;}
.modal_dialog .modal_util .close_modal{width: 24px; height: 24px;}
.modal_dialog .modal_content{padding: 24px 20px 40px 20px;}

.modal_dialog .modal_content .modal_text_main{margin-bottom: 6px; color: #333;text-align: center;font-size: 18px;font-weight: 600;line-height: 22px; /* 122.222% */letter-spacing: -0.18px;}
.modal_dialog .modal_content .modal_text_sub{margin-bottom: 22px; color: #666;text-align: center;font-size: 15px;font-weight: 400;line-height: 20px; /* 133.333% */letter-spacing: -0.15px;}

.modal_footer{padding: 0 20px 20px 20px;}
.modal_footer .btn_block{gap: 6px;}

/* 로그인 토스트 팝업 */
.login_toast_modal{width: 90%; position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); border-radius: 200px;background: rgba(0, 0, 0, 0.60);display: flex;padding: 16px 26px;justify-content: space-between;align-items: center; gap: 17px;}
.login_toast_modal span{color: #FFF;font-size: 15px;font-weight: 400;line-height: 18px; /* 120% */letter-spacing: -0.15px;}

/* ========= icon */
[class*="icon_"] {display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: 50%; background-size: cover;}
.icon_close_bl{background: url(../images/icon-close-bl.svg)no-repeat center;}
.icon_close_w{background: url(../images/icon-close-w.svg)no-repeat center;}


/* ========= size */
.size_16{width: 16px; height: 16px;}
.size_24{width: 24px; height: 24px;}


/* ========= login */
.login_warp{padding: 0 40px; height: 100%; display: flex; justify-content: center; align-items: center;}
.login_con{width: 100%; max-width: 295px;}
.login_con .logo_box{display: flex; justify-content: center; margin-bottom: 46px;}
.login_con .logo_box img{width: 86px;}

.login_form .input_box{margin-bottom: 8px;}
.login_form .input_box.password{margin-bottom: 14px;}

.login_btn_box{display: flex; justify-content: space-between; align-items: center; margin-bottom: 52px;}

.login_btn_box label{color: #686D76;font-size: 14px;font-weight: 400;letter-spacing: -0.56px; vertical-align: middle;}
.login_btn_box button{color: #686D76;font-size: 14px;font-weight: 400;letter-spacing: -0.56px;}

/* ========= 임시 비밀번호 발급 */
.modal_dialog .modal_content.temporary_pw input[type='text']+:is(input[type='text'], input[type='tel']){margin-top: 6px;} 
.pw_issuance_email{padding: 12px;border-radius: 12px;background: #F5F7FA;font-weight: 500;font-size: 14px; color: #333; line-height: 24px;text-align: center;}
.modal_dialog .modal_content.login_pw_email{padding-bottom: 30px;}
.login_pw_email .btn_text{margin-top: 20px;}
.login_toast_modal .close_modal .icon_close_w{background-size: 10px;}