/*===== // 약관동의 // =====*/
.bg_potion {
    background: url('../main_img/main_bg_img.png') no-repeat right center / 50%;
}
.join-wrapper {}
.join_banner {
    padding: 80px 0;
    background: var(--main-gd);   
}
.join_main_wrap {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
.join_main_wrap .banner_text_box {
    flex: 1;
    color: #fff;
    display: flex;
    flex-direction: column;
    background: url(../main_img/main_bg_img.png) no-repeat right 8px center;
    background-size: 60%;
}

.join_main_wrap .auth_wrap {
    width: 376px;
    flex-shrink: 0;
}
.join_main_wrap .auth_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 36px 24px 40px;
    box-shadow: var(--shadow-card);
}
.auth_head {
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.auth_head h2 {
    font-size: 24px;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 8px;
}
.auth_head p {
    color: var(--gray-color);
    margin-bottom: 12px;
}
.auth_body h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--main-color);
    padding-bottom: 16px;
}

.join_feature {
    color: var(--sub-Light);
    background-color: rgba(0, 0, 0, .5);
    border-radius: 8px;
    border: 1px solid rgba(233, 235, 238, 0.6);
    padding: 16px;
    /* margin-top: 40px; */
    margin-top: auto
}
.join_feature .feature_txt {
    max-width: 50%;
}
.join_feature .feature_txt .feature_tit {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.join_feature .feature_txt p {
    font-size: 14px;
    word-break: keep-all;
    line-height: 1.5;
    letter-spacing: 0;
}


/*===== // 약관동의 // =====*/
.join_agree_wrap {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
}
/*** 체크박스 커스텀 ***/
.join_chk_sub {
    padding-left: 16px;
    margin-top: 12px;
}
.join_chk_sub_box {
    margin-bottom: 12px;
}
.join_chk_sub_box:last-of-type {
    margin-bottom: 0;
}
.join_agree_wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}
.join_agree_wrap label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.join_chk_sub_box label span b {
    color: #DF0000;
}
.join_arrow_box {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid #888;
    border-radius: 2px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.join_arrow_box i {
    color: #fff;
    opacity: 0;
}
.join_agree_wrap input[type="checkbox"]:checked + label .join_arrow_box {
    border-color: var(--main-color);
    background: var(--main-color);
}
.join_agree_wrap input[type="checkbox"]:checked + label .join_arrow_box i {
    opacity: 1;
}
.join_chk_sub_box.has_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.join_chk_sub_box.has_btn label {
    flex: 1;
    min-width: 0;
}
.btn_view {
    flex-shrink: 0;
    border: 0;
}

/* 하단 안내 멘트 */
.agree_notice {
    font-size: 14px;
    margin: 12px 0;
    position: relative;
    padding-left: 14px;
    line-height: 1.5;
    word-break: keep-all;
}
.agree_notice::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #333;
}

.btn_agree {
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 12px 4px;
    background-color: var(--main-color);
    border-color: var(--main-color);
    transition: all 0.3s ease;
}
.btn_agree:hover {
    background-color: var(--sub-color);
    border-color: var(--sub-color);
    box-shadow: 0 6px 14px rgba(21, 91, 202, 0.25);
}

/*===== // 로그인 // =====*/
.join-wrapper .login_input_wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.join-wrapper .btn_login {
    background: var(--main-color);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    border-color: transparent;
    padding: 12px 0;
}
.join-wrapper .login_form .sns_login {
    padding-bottom: 0;
    border-bottom: 0;
}

/*===== //로그인 - 혜택// =====*/
.gold_benefit {
    margin-top: 20px;
    background-color: #FEF9EE;
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--shadow-card);
}
.gold_benefit h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--gold)
}
.gold_benefit ul {
    display: flex;
}
.gold_benefit ul li {
    flex: 1;
    border-right: 1px solid var(--gold);
    color: var(--main-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.gold_benefit ul li:last-child {
    border-right: 0;
}
.gold_benefit ul li span {
    display: block;
    word-break: keep-all;
    text-align: center;
    line-height: 1.5;
}
.gold_benefit ul li i {
    font-size: 2rem;
}
.gold_benefit .bth_gold {
    display: block;
    font-weight: 700;
    color: var(--brown_txt);
    padding: 16px 4px;
    text-align: center;
    border: 1px solid #D3B498;
    background: var(--gold-btn-gd);
    border-radius: 4px;
}

/*===== //회원가입 join_form // =====*/
.auth_tab_list {
    width: 100%;
    display: flex;
    gap: 8px;
}
.auth_tab_list li {
    flex: 1;
}
.auth_tab_list li button {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 10px 8px;
    background-color: #fff;
}
.auth_tab_list li button i {
    font-size: 24px;
}
.auth_tab_list li button span {
    line-height: 1.5;
    font-size: 14px;
}
.auth_tab_list li.active button {
    color: #fff;
    background-color: var(--main-color);
}
.auth_tab_list li.naver_tab button i {
    color: #00CE29;
}
.auth_tab_list li.kakao_tab button i {
    color: #3c1e1e;
}
.auth_tab_list li.active button i {
    color: #fff;
}

.auth_form_container {
    width: 100%;
    margin-top: 10px;
}
.tab_item {
    display: none;
}
.tab_item.active {
    display: block;
}
.auth_form_container .tab_form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth_form_container .input_box input {
    /* height: 100%; */
    height: 40px;
    flex: 1;
    min-width: 0;
    border: 1px solid transparent;
}
.auth_form_container .input_box {
    /* height: 40px; */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
}
.auth_form_container .input_box i {
    color: var(--main-color);
    margin-right: 4px;
}
.hidden_box {
    display: none;
}
.auth_form_container .correct_txt {
    font-size: 13px;
    padding-top: 4px;
    display: none;
}
.auth_form_container .correct_txt .flex_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}
.btn_resend {
    color: var(--sub-color);
    text-decoration: underline;
    border: 0;
    padding: 0;
}

#m_hp1 {
    width: 48px;
    flex-grow: 0;
    flex-shrink: 0;
}
.btn_action {
    font-size: 14px;
    color: #fff;
    /* padding: 4px 8px; */
    padding: 8px;
    border: 0;
    height: 100%;
    background-color: var(--sub-color);
    margin-left: 4px;
}
.auth_form_container .form_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.auth_form_container ::placeholder {
    font-size: 14px;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: not-allowed;
    background-color: #eee;
    padding: 4px;
    border-radius: 4px;
}
.auth_form_container input:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent !important;
    outline: none;
}

.email_row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.email_row .input_box {
    min-width: 0;
}
.email_row .input_box:last-child {
    border: 0;
    padding: 0;
}
.auth_form_container .email_row .input_box:last-of-type {
    border: 1px solid var(--border-color);
}
.email_form_group select {
    width: 100%;
    font-size: 14px;
}
.auth_form_container .btn_submit {
    width: 100%;
    background: var(--main-color);
    font-weight: 400;
    padding: 12px 4px;
    border-radius: 4px;
}

.auth_form_container .form_row {
    background-color: beige;
    display: flex;
    gap: 4px;
}
.auth_form_container .input_box .label {
    flex: 0 0 80px;
    color: var(--main-color);
}
.auth_form_container .birth_row,
.auth_form_container .gender_row {
    gap: 10px;
}

.birth_row .birth_input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    min-width: 0;
}
/* 달력
.btn_cal_icon {
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: red;
    padding: 4px;
} */
.auth_form_container .input_box .btn_cal_icon i {
    margin-right: 0;
}


.gender_radios {
    flex: 1;
    display: flex;
    gap: 4px;
    height: 100%;
}
.gender_radios input[type="radio"] {
    display: none;
}
.gender_radios label {
    height: 40px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    color: var(--gray-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.gender_radios input[type="radio"]:checked + label {
    color: #fff;
    border-color: var(--main-color);
    background-color: var(--main-color);;
}
.auth_form_container .hidden_box {
    display: none;
}


/*===== //회원가입 완료 join_ok// =====*/
.joinok-wrapper { 
    min-height: calc(100vh - 300px);
    background: var(--main-gd);
    display: flex;
    align-items: center;
    justify-content: center;
}
.joinok-wrapper > .inner_wrap {width: 100%}
.join_ok_card {
    width: 100%;
    max-width: 580px;
    padding: 36px 24px;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
    margin: 0 auto;
}
.join_ok_card .iconbox i {
    font-size: 3rem;
    color: var(--sub-color);
}
.join_ok_card .result_tit {
    font-size: 24px;
    font-weight: 700;
    color: var(--sub-color);
    margin: 16px 0;
}
.join_ok_card .result_txt {
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 32px;
}
.join_ok_card .result_notice {
    color: var(--gray-color);
    font-weight: 600;
    line-height: 1.5;
    padding: 4px 12px;
    background-color: var(--sub-Dark);
    border-radius: 20px;
    margin-bottom: 32px;
}
.join_ok_card .btn_login {
    display: block;
    width: 100%;
    max-width: 240px;
    color: #fff;
    font-weight: 500;
    padding: 12px 8px;
    border-radius: 4px;
    background-color: var(--main-color);
    margin: 0 auto;
    transition: all 0.3s ease;
}
.join_ok_card .btn_login:hover {
    background-color: var(--sub-color);
    border-color: var(--sub-color);
    box-shadow: 0 6px 14px rgba(21, 91, 202, 0.25);
}