@charset "utf-8";

.register_background{margin: 0;padding: 0;width: 100%;height: 100%;background-color: rgba(224,235,252, 0.6);position: absolute;}

.register_wrap{width: 580px;height: auto;background-color: #fff;position: relative;top: 80px;margin: 0 auto 40px;border-radius: 30px;box-shadow: rgba(0, 36, 134, 0.178) 0px 7px 29px 0px;padding-bottom: 30px;}

.register_header{width: 500px;margin: 0 auto;padding: 30px 0 20px;display: flex;align-items: center;justify-content: space-between;}
.register_header h2{font-size: 22px;font-weight: 700;color: #333;}
.register_header .back_link{font-size: 14px;font-weight: 500;color: #2262C6;text-decoration: none;}
.register_header .back_link:hover{text-decoration: underline;}

.register_form{width: 500px;margin: 0 auto;}

.register_form .form_group{margin-bottom: 15px;}
.register_form .form_group label{display: block;font-size: 14px;font-weight: 600;color: #333;margin-bottom: 6px;}
.register_form .form_group label span{font-size: 12px;font-weight: 400;color: #999;margin-left: 4px;}
.register_form .form_group input,
.register_form .form_group select{width: 100%;padding: 12px;border: 2px solid #F1F2F7;border-radius: 10px;box-sizing: border-box;font-size: 14px;}
.register_form .form_group input::placeholder{color: #BABDCE;font-weight: 500;}
.register_form .form_group input:hover,
.register_form .form_group select:hover{border: 2px solid #333;transition: 0.4s;}
.register_form .form_group input:focus,
.register_form .form_group select:focus{border: 2px solid #2262C6;outline: none;transition: 0.3s;}

.register_form .form_group input.is-invalid{border: 2px solid #dc3545;}
.register_form .form_group .invalid-feedback{display: block;color: #dc3545;font-size: 12px;font-weight: 600;margin-top: 4px;}

.register_form .form_row{display: flex;gap: 15px;}
.register_form .form_row .form_group{flex: 1;}

.register_submit{width: 500px;margin: 20px auto 0;}
.register_submit button{width: 100%;padding: 12px 0;border-radius: 10px;background-image: linear-gradient(to right, #2262C6, #3581F6);color: #fff;font-size: 16px;font-weight: 600;letter-spacing: 1px;border: none;cursor: pointer;}
.register_submit button:hover{background-image: linear-gradient(to right, #3581F6, #599AFF);}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .register_wrap{width: 90%;top: 40px;padding: 0 20px 20px;}
    .register_header{width: 100%;}
    .register_form{width: 100%;}
    .register_form .form_row{flex-direction: column;gap: 0;}
    .register_submit{width: 100%;}
}
@media (max-width: 550px) {
    .register_background{background-color: #fff;}
    .register_wrap{top: 20px;box-shadow: none;}
    .register_header h2{font-size: 18px;}
    .register_submit button{font-size: 14px;}
}