@charset "UTF-8";

.member .table:before {content:none}

/* 로그인 */
.board_box.type1.login .form {position: relative; width: 50rem; max-width: 100%; margin: 3rem auto; padding-bottom: 1px; padding-right: 10rem;}
.board_box.type1.login .form_textbox {margin-bottom: -1px;}
.board_box.type1.login .form_textbox:focus,
.board_box.type1.login .form_textbox:active {position: relative; z-index: 0;}
.board_box.type1.login .btn {position: absolute; right: 0; bottom: 0; width: 10rem; height: 100%; background-color: #484c58; color: #fff;}
.board_box.type1.login .member-btn  {display: block; position: relative; z-index: 0; width: 50rem; max-width: 100%; margin: 0 auto;}
.board_box.type1.login .member-btn::before {position: absolute; left: 0; top: 50%; z-index: -1; width: 100%; height: 1px; background-color: #ddd; content: '';}
.board_box.type1.login .btn_find{display:inline-block; padding: 0 1rem; background-color: #f8f8f8;}
.board_box.type1.login .sns_login {width:56rem; max-width:100%; margin:0 auto 3rem}
.board_box.type1.login .sns_login a {width:44%}
.board_box.type1 .join_out textarea {width:100%; max-width:55rem; height:10rem; margin-top:2.5rem; padding:1rem 1.5rem}

/* 아이디/비밀번호 찾기 */
.board_box.type1.find .form {width: 60rem; max-width: 100%; margin: 2rem auto 0; padding-top: 2rem; border-top: 1px solid #ddd;}
.board_box.type1.find .board_btns {margin-top: 1.5rem;}
.board_box.type1.find .board_btns .btn {min-width: 15rem;}

/* 회원가입 절차 */
.member_step {display: table; overflow: hidden; width: 100%; border: 1px solid #484c58; table-layout: fixed;}
.member_step li {background-color:#fff; display: table-cell; position: relative; height: 6rem; padding-left: 2rem; font-weight: 600; text-align: center; vertical-align: middle;}
.member_step li::after {position: absolute; right: -0.6rem; z-index: 1; top: 50%; width: 6rem; height: 6rem; margin-top: -0.5em; border-right: 1px solid #484c58; border-top: 1px solid #484c58; background-color: #fff; content: ''; transform: scaleX(0.7) rotate(45deg) translateY(-50%);}
.member_step li:last-child::after {display: none;}
.member_step .active {background-color: #484c58; color: #fff;}
.member_step .active::after {background-color: #484c58;}
.member_step small {margin-right: 0.5rem; font-size: 1.6rem; font-weight: 300;}

.sns_login a{height:5rem; border:1px solid #333; line-height:4.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.6rem; display:inline-block; min-width:10.5rem; padding:0 2rem; background-color:#333; color:#fff; text-align:center; vertical-align:middle; -webkit-transition:all 0.2s; transition:all 0.2s; font-weight:500; margin:0 0.25rem}
.sns_login .vvYellow {border:1px solid #fee500 !important}
.sns_login .ltGreen {border:1px solid #03c75a !important}
.sns_login .vvYellow:hover,
.sns_login .ltGreen:hover {background-color:#fff !important; border:1px solid #333 !important; color:#333 !important}

/*회원탈퇴*/
.join_out {width:100%; max-width:50rem; margin:0 auto}
.join_out .form_select {width:100%; margin-bottom:0.5rem; margin-top:2rem}

@media (max-width: 580px)
{
    /* 회원가입 절차 */
    .member_step small {display: block; margin-top: 0.25rem; line-height: 1;}

    /* 로그인 */
    .board_box.type1.login .sns_login {width:100%}
    .board_box.type1.login .sns_login a {width:100%}
}


/* ===== 회원가입 약관 동의 화면 ===== */
.panel_join {width:100%; max-width:80rem; margin:0rem auto; padding:0 1.5rem;}

/* 상단 안내 영역 */
.panel_join .info_content {text-align:center; margin-bottom:3rem;}
.panel_join .info_content h4 {font-size:2.4rem; font-weight:700; color:#222; margin-bottom:1rem;}
.panel_join .info_content p {color:#666; line-height:1.6;}

/* STEP 표시 */
.panel_join .join_step {display:flex; justify-content:center; gap:1rem; margin-top:2.5rem;}
.panel_join .join_step div {flex:1; max-width:18rem; padding:0.5rem 0; border:1px solid #ddd; border-radius:0.6rem; background-color:#f8f8f8; color:#999; text-align:center;}
.panel_join .join_step div span { font-weight:600;}
.panel_join .join_step div.on {background-color:#484c58; border-color:#484c58; color:#fff;}

/* 약관 박스 */
.panel_join .agree-area {margin-bottom:2.5rem;}
.panel_join .agree-area h4 {font-size:1.5em; font-weight:700; color:#222; margin-bottom:1rem;}
.panel_join .agree-content {height:22rem; overflow-y:auto; padding:1.5rem 2rem; border:1px solid #ddd; border-radius:0.6rem; background-color:#fafafa; line-height:1.7; color:#555;}
.panel_join .agree-content p {word-break:keep-all;}

/* 동의 체크박스 */
.panel_join .check_area {margin-top:1.2rem; text-align:right;}
.panel_join .check_area label {display:inline-flex; align-items:center; cursor:pointer; color:#333;}
.panel_join .check_area input[type="checkbox"] {width:1em; height:1em; margin-right:0.6rem; cursor:pointer;}

/* 하단 버튼 */
.panel_join .btn_area {text-align:center; margin-top:3rem;}
.panel_join .btn_area a {display:inline-flex; align-items:center; justify-content:center; min-width:20rem; padding:1rem 2rem; background-color:#484c58; color:#fff; font-weight:600; border-radius:0.6rem; transition:background-color 0.2s;}
.panel_join .btn_area a:hover {background-color:#2f323b;}
.panel_join .btn_area a i {margin-left:0.6rem;}

/* 모바일 대응 */
@media (max-width:580px) {
    .panel_join {padding:0 1.2rem; box-sizing:border-box;}
    .panel_join .info_content h4 {font-size:2rem;}

    /* STEP - 한 줄 3개 유지, 넘침 방지 */
    .panel_join .join_step {gap:0.6rem;}
    .panel_join .join_step div {flex:1 1 0; max-width:none; min-width:0; padding:0.9rem 0;}
    .panel_join .join_step div span {font-size:1.3rem;}

    /* 약관 박스 넘침 방지 */
    .panel_join .agree-area,
    .panel_join .agree-content {box-sizing:border-box; max-width:100%;}
    .panel_join .agree-content {height:18rem; padding:1.2rem; word-break:break-all;}

    .panel_join .btn_area a {width:100%; min-width:0; box-sizing:border-box;}
}

/* ===== 회원가입 상단 비주얼 (교육신청 페이지와 동일) ===== */
#sub_wp .subvisual h3,
#sub_wp .subvisual h2 {
    padding:125px 0;
    font-size:2.5em;
    text-align:center;
    color:#000;
    font-family:'NanumSquareNeoHeavy';
}
@media screen and (max-width:500px){
    #sub_wp .subvisual h3,
    #sub_wp .subvisual h2 {
        padding:50px 0 !important;
    }
}


/* ===== 회원가입 정보입력 폼 (STEP 3) ===== */
.join_container {width:100%; max-width:60rem; margin:0 auto;}
.join_container .form_row {display:flex; align-items:flex-start; padding:1.6rem 0; border-bottom:1px solid #eee;}
.join_container .form_row > label {flex:0 0 13rem; padding-top:0.8rem; font-weight:600; color:#333;}
.join_container .form_row > label.req::before {content:'* '; color:#e23a3a;}
.join_container .row_field {flex:1; min-width:0;}
.join_container input[type="text"],
.join_container input[type="password"],
.join_container select {padding:0 1rem; border:1px solid #ccc; border-radius:0.4rem; box-sizing:border-box; vertical-align:middle;}
.join_container input[type="text"],
.join_container input[type="password"] {width:100%;}

/* 아이디 + 중복확인 */
.join_container .input_with_btn {display:flex; gap:0.6rem;}
.join_container .input_with_btn input {flex:1;}
.join_container .btn_check {flex:0 0 auto; padding:0 1.4rem; background-color:#484c58; color:#fff; border:0; border-radius:0.4rem; font-weight:500; cursor:pointer; white-space:nowrap;}

/* 안내문구 */
.join_container .field_guide {margin-top:0.6rem; line-height:1.6; color:#888;}

/* 휴대번호 / 연락처 */
.join_container .phone_group {display:flex; align-items:center; gap:0.6rem;}
.join_container .phone_group select {flex:0 0 9rem;}
.join_container .phone_group input {flex:1; text-align:center;}
.join_container .phone_group .dash {color:#999;}

/* 이메일 */
.join_container .email_group {display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;}
.join_container .email_group input {flex:1; min-width:12rem;}
.join_container .email_group .at {color:#666;}
.join_container .email_group select {flex:0 0 11rem;}

/* 주소 */
.join_container .address_group {display:flex; flex-direction:column; gap:0.6rem;}
.join_container .address_group .zip_row {display:flex; gap:0.6rem;}
.join_container .address_group .zip_row input {flex:0 0 14rem;}
.join_container .btn_zip {flex:0 0 auto; padding:0 1.4rem; background-color:#484c58; color:#fff; border:0; border-radius:0.4rem; cursor:pointer; white-space:nowrap;}
.join_container .address_group .addr_full {width:100%;}

/* 저장 버튼 */
.panel_join .btn_area .btn.type2 {min-width:20rem;}

@media (max-width:580px){
    .join_container .form_row {flex-direction:column; gap:0.6rem;}
    .join_container .form_row > label {flex:none; padding-top:0;}
    .join_container .phone_group select {flex:0 0 8rem;}
    .join_container .email_group {flex-wrap:wrap;}
    .join_container .email_group input,
    .join_container .email_group select {flex:1 1 100%;}
    .join_container .address_group .zip_row input {flex:1;}
}


/* ===== 회원가입 완료 화면 ===== */
.panel_join.step_4 {text-align:center;}
.join_completion {max-width:60rem; margin:0 auto; padding:0rem 1.5rem;}
.join_completion .content_wrap h4 {font-size:2.4rem; font-weight:700; color:#222; margin-bottom:1.5rem;}
.join_completion .content_wrap p {color:#666; line-height:1.7;}
.join_completion .btn_area {margin-top:3rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;}
.join_completion .btn_area a {display:inline-flex; align-items:center; justify-content:center; min-width:18rem; padding:1rem 2rem; border-radius:0.6rem; font-weight:600;}
.join_completion .btn_area a.btn.type1 {background-color:#484c58; color:#fff;}
.join_completion .btn_area a.btn.type2 {background-color:#fff; border:1px solid #484c58; color:#484c58;}
@media (max-width:580px){
    .join_completion .btn_area a {width:100%; min-width:0;}
}


/* ===== 통합 로그인 공통 폭 ===== */
.content_info,
.content_member_login,
.content_auth {max-width:40rem; margin-left:auto; margin-right:auto;}

/* 일반 로그인 폼 */
.content_member_login {margin-bottom:2.5rem; padding:0 1.5rem; box-sizing:border-box;}
.content_member_login .login_input input {display:block; width:100%; height:4.2rem; margin-bottom:0.6rem; padding:0 1.2rem; border:1px solid #ccc; border-radius:0.4rem; font-size:1.4rem; line-height:4.2rem; color:#222; background:#fff; box-sizing:border-box;}
.content_member_login .login_input input[type="password"] {font-family:Verdana, Tahoma, "Malgun Gothic", sans-serif; letter-spacing:0.15em;}
.content_member_login .btn_login {width:100%; height:4.4rem; margin-top:0.4rem; background-color:#484c58; color:#fff; border:0; border-radius:0.4rem; font-size:1.5rem; font-weight:600; cursor:pointer; transition:background-color .2s;}
.content_member_login .btn_login:hover {background-color:#2f323b;}
.content_member_login .login_links {margin-top:1.4rem; text-align:center; font-size:1.4rem;}
.content_member_login .login_links a {color:#555;}
.content_member_login .login_links a:hover {text-decoration:underline;}
.content_member_login .login_links .bar {margin:0 1rem; color:#ccc;}

/* SNS 구분선 */
.content_auth {padding:2rem 0 1.5rem; box-sizing:border-box;}
.content_auth .auth_divider {position:relative; margin:0 auto 2rem; text-align:center;}
.content_auth .auth_divider::before {content:''; position:absolute; left:0; top:50%; width:100%; height:1px; background:#ddd;}
.content_auth .auth_divider span {position:relative; padding:0 1.2rem; background:#fff; color:#888; font-size:50px;}

/* SNS 버튼 */
.content_auth ul {display:flex; gap:1rem;}
.content_auth ul li {flex:1; min-width:0;}
.content_auth .auth_wrap {padding:1.5rem; border:1px solid #eee; border-radius:0.6rem; text-align:center; height:100%; box-sizing:border-box;}
.content_auth .auth_wrap .auth_tit {font-size:1.6rem; font-weight:700; margin-bottom:0.8rem;}
.content_auth .auth_wrap .auth_info {font-size:1.3rem; color:#777; line-height:1.5; margin-bottom:1.2rem;}
.content_auth .auth_wrap a {
    display:flex !important;
    align-items:center;
    justify-content:center;
    height:4.4rem;
    padding:0 1rem;
    border-radius:0.4rem;
    font-size:1.4rem;
    font-weight:600;
    color:#fff;
    line-height:1;
    white-space:nowrap;
    box-sizing:border-box;
}
/* 화살표 강제 제거 */
.content_auth .auth_wrap a::after,
.content_auth .auth_wrap a::before {content:'' !important; display:none !important;}
.content_auth .auth_wrap a i,
.content_auth .auth_wrap a span {display:none !important;}

.content_auth .auth02 .auth_wrap a {background-color:#03c75a;}
.content_auth .auth03 .auth_wrap a {background-color:#fee500; color:#3a1d1d;}

/* ===== 통합 로그인 모바일 대응 (통합) ===== */
@media (max-width:580px){
    /* 폭 100% */
    .content_info,
    .content_member_login,
    .content_auth {max-width:100%;}

    /* 로그인 하단 링크 - 세로 정렬, 구분선 숨김 */
    .content_member_login .login_links {display:flex; flex-direction:column; gap:0.8rem;}
    .content_member_login .login_links .bar {display:none;}

    /* SNS 버튼 - 세로로 쌓되 높이 고정 (두꺼워짐 방지) */
    .content_auth ul {flex-direction:column;}
    .content_auth .auth_wrap a {
        height:4.4rem !important;
        min-height:4.4rem;
        font-size:1.4rem;
        white-space:nowrap;
        padding:0 1rem;
    }
}