@charset 'UTF-8';
/*
  파일명: join.css
  작성자: 김도희
  최초작성일: 2025-04-30
  수정자: 김도희
  수정일: 2025-04-30
  설명: 이 파일은 회원가입 페이지 스타일 관련 css 파일 입니다. 
*/

.join .header{display: flex; height: 300px; align-items: center; justify-content: center; flex-direction: column; flex-shrink: 0; background-image: linear-gradient(97deg, #f9fbff 10%, #eaf2ff 36%, #dce4ff 73%, #edf1ff 96%);}
.join .header .title{font-size: 36px;font-weight: bold;line-height: 0.92;color: #363c43;}
.join .header .desc{margin-top: 20px; font-size: 20px;font-weight: 400;line-height: 1.2;color: #777e87;}

.join .contents{padding: 60px 0 160px;}
.join .contents .inner-wrap{width: 1072px; margin: 0 auto;}
/* 회원가입 버튼 */
.join .contents .inner-wrap .btn-wrap{margin-top: 120px; text-align: center;}
.join .contents .inner-wrap .btn-wrap .btn-join{width: 336px;height: 56px;font-size: 20px;font-weight: bold;}

/* 회원가입 페이지 상단 메세지 */
.join .contents .info-msg{display: flex;align-items: center;height: 56px;flex-direction: column;justify-content: center; background-image: linear-gradient(to right, #f5f7ff, #e5ebff 55%, #f5f7ff);}
.join .contents .info-msg .title{font-size: 20px;font-weight: bold;line-height: 1.2;text-align: center;color: #363c43;}

/* 회원가입 페이지 form 제목 */
.join .contents .form-title{display: flex;align-items: center; height: 56px; border-bottom: 2px solid #e1e4ea;font-size: 20px;font-weight: bold;line-height: 1.2;color: #000;}
.join .contents .form-title .req{font-size: 16px;}
.join .contents .form-sub-title{height: 52px;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;padding: 0 20px;background-color: #f4f5f5;font-size: 16px;font-weight: bold;color: #363c43;}

/* 회원가입 페이지 라디오 리스트 */
.join .contents .radio-group {}
.join .contents .radio-group .radio{display: inline-flex; align-items: center; flex-wrap: wrap; width: 24%; margin-bottom: 32px;}
.join .contents .radio-group .radio input:checked + label::after{top: 6px;}
.join .contents .radio-group .radio.other{width: 50%;}
.join .contents .radio-group .radio input[type="text"]{margin-top: 0; margin-left: 20px;}

/* 회원가입 페이지 플랜 리스트 */
.join .contents .plan-list {list-style-type: none;display: flex;flex-wrap: wrap;}
.join .contents .plan-list li {display: inline-block;width: 13%;margin-bottom: 24px;}
.join .contents .plan-list li.checkbox + li.checkbox{margin-left: 0;}
.join .contents .plan-list .checkbox.type2.plan-all {display: block;width: 100%;margin-right: 0; margin-bottom: 0;}

/* 회원가입 약관동의 */
.join .contents .agree_list{width: 324px;}
.join .contents .agree_list li{margin: 16px 0 0; display: flex; align-items: center; justify-content: space-between;}
.join .contents .agree_list a{display: flex; align-items: center; height: 32px; padding: 0 14px; flex-shrink: 0; border-radius: 6px; border: 1px solid #475267; font-size: 12px;font-weight: bold;color: #363c43;}

.loading-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.loading-box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 20px;
}
.loading-box img {
    max-width: 100px;
    height: auto;
}
body.loading {
    overflow: hidden;
}

.email-check {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid #475267;
    font-size: 12px;
    font-weight: bold;
    color: #363c43;
}
.password-check {
    display: none;
    color: #3ecb3e;
    margin-top: 2px;
    text-align: right;
}
.consent-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #e1e4ea;
}