/* ==========================================================================
   (주)투어수다 - 회원가입약관 동의 (skin/member/basic/register.skin.php)
   docs/기획/회원가입-기획서.md, docs/디자인/회원가입-디자인가이드.md 기준
   색상/폰트/카드·버튼·인풋 스펙은 gnb.css(:root 변수, .suda-login-* 시리즈)를
   그대로 재사용하고, 이 파일에는 약관동의 화면 전용 요소만 정의한다.
   (2026-09-19: 가입방법 선택/SMS 인증 단계는 범위 제외되어 관련 스타일 삭제)
   ========================================================================== */

/* 그누보드가 서브페이지마다 자동으로 붙이는 기본 제목과 중복되어 숨김 */
#container_title{ display: none; }

.suda-join{
    max-width: 480px;
    margin: 0 auto;
}

.suda-join-title{
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0 0 32px;
    color: var(--suda-gray-900);
    text-align: center;
}

/* 이메일 인증 화면 - 여기서 인증한 이메일이 곧 아이디가 된다는 사전 고지 */
.suda-join-email-precheck{
    font-size: 13px;
    line-height: 1.6;
    color: var(--suda-gray-500);
    text-align: center;
    margin: -20px 0 28px;
}

/* ---------- 약관동의 리스트 카드 ---------- */
.suda-join-terms{
    border: 1px solid var(--suda-gray-200);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
}
.suda-join-terms-all{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--suda-gray-50);
}
.suda-join-terms-all-label{
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 15px;
    color: var(--suda-gray-900);
    cursor: pointer;
}
.suda-join-terms-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: 0;
    color: var(--suda-gray-400);
    font-size: 18px;
    cursor: pointer;
    transition: transform .15s ease;
}
.suda-join-terms.is-collapsed .suda-join-terms-toggle{ transform: rotate(-90deg); }
.suda-join-terms.is-collapsed .suda-join-terms-list{ display: none; }

.suda-join-term-row{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--suda-gray-100);
}
.suda-join-term-row-label{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--suda-gray-900);
    cursor: pointer;
}
.suda-join-term-tag{ font-size: 12px; color: var(--suda-gray-400); font-weight: 400; }
.suda-join-term-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--suda-gray-400);
    font-size: 16px;
}
.suda-join-term-link:hover{ color: var(--suda-blue); }

/* 체크박스는 사이트 공통 .suda-form-check(css/gnb.css)를 그대로 쓴다 */

/* 마케팅 활용 동의 하위 채널(이메일/문자/카카오톡) */
.suda-join-term-sub{
    padding: 0 18px 14px 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.suda-join-term-sub label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--suda-gray-500);
    cursor: pointer;
}
/* 필수 미체크 상태로 "다음"을 눌렀을 때 흔들림 강조 */
.suda-join-term-row.suda-join-shake{ animation: sudaJoinShake .3s ease; }
@keyframes sudaJoinShake{
    0%, 100%{ transform: translateX(0); }
    25%{ transform: translateX(-4px); }
    75%{ transform: translateX(4px); }
}

/* (2026-10-24) .suda-join-next(다음/회원가입/정보수정 버튼)는 css/gnb.css 로 옮김 - K-컬처 제휴 문의 버튼과 공용 */

/* ---------- 이메일 인증 화면 (register_email_verify.php, 2026-09-19 3차) ---------- */
#sudaEmailInputPhase .suda-login-field{ margin-bottom: 20px; }

.suda-join-email-notice{
    font-size: 14px;
    line-height: 1.6;
    color: var(--suda-gray-700);
    text-align: center;
    margin: 0 0 28px;
}
.suda-join-email-notice b{ color: var(--suda-gray-900); }

.suda-join-otp-boxes{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.suda-join-otp-boxes input{
    width: 44px;
    height: 52px;
    box-sizing: border-box;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    background: var(--suda-gray-50);
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    color: var(--suda-gray-900);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.suda-join-otp-boxes input:focus{
    outline: none;
    border-color: var(--suda-blue) !important;
    box-shadow: 0 0 0 3px rgba(65,84,255,.12);
    background: #fff;
}
.suda-join-otp-boxes input:disabled{ opacity: .6; }
.suda-join-otp-boxes.is-error input{ border-color: var(--suda-red) !important; }

.suda-join-otp-resend{
    font-size: 13px;
    color: var(--suda-gray-500);
    line-height: 1.6;
    text-align: center;
    margin: 0;
}
.suda-join-otp-resend button{
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--suda-blue);
    text-decoration: underline;
    cursor: pointer;
}
.suda-join-otp-resend button:disabled{ color: var(--suda-gray-400); text-decoration: none; cursor: not-allowed; }

.suda-join-otp-checking{
    font-size: 13px;
    color: var(--suda-gray-500);
    text-align: center;
    margin: 16px 0 0;
}

.suda-join-otp-error{
    font-size: 12px;
    color: var(--suda-red);
    text-align: center;
    margin: -8px 0 16px;
    display: none;
}
.suda-join-otp-error.is-show{ display: block; }

/* ---------- 회원가입 완료 화면 (register_result.skin.php, 하나투어 참고) ---------- */
#reg_result.suda-reg-result{
    /* 상단 여백을 .suda-join 기본(56px)보다 더 넓게 */
    padding-top: 120px;
    text-align: center;
    background: none;
    border: 0;
    border-radius: 0;
}
#reg_result.suda-reg-result .result_txt{
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    color: var(--suda-gray-500);
}
#reg_result.suda-reg-result #result_email{
    margin: 20px 0;
    padding: 14px 20px;
    border-top: 1px solid var(--suda-gray-100);
    border-bottom: 1px solid var(--suda-gray-100);
    background: var(--suda-gray-50);
    border-radius: 12px;
    line-height: 1.8;
    text-align: left;
}
#reg_result.suda-reg-result #result_email span{ color: var(--suda-gray-500); }
#reg_result.suda-reg-result #result_email strong{ color: var(--suda-gray-900); margin-left: 8px; }

.btn_confirm_reg{ max-width: 480px; margin: 48px auto 0; }
.btn_confirm_reg .reg_btn_submit{
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    line-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--suda-blue) !important;
}
.btn_confirm_reg .reg_btn_submit:hover{ background: var(--suda-blue-dark) !important; }

/* ---------- 회원정보 입력 화면 (skin/member/basic/register_form.skin.php, 하나투어 참고 재구성) ---------- */
.register{ max-width: 640px; padding: 64px 0 100px; }

.suda-reginfo-title-wrap{ text-align: center; margin-bottom: 32px; }

/* 사이트 공통 top-tltBox(css/gnb.css)는 1280px 폭 페이지용이라 padding-inline 48px가 있는데,
   여기(.suda-join 480px / .register 640px)처럼 좁은 카드 레이아웃 안에 쓰면 폭/여백이 안 맞는다.
   제목 아래 32px 여백만 남기고 폭/좌우패딩은 없앤다. */
.suda-join .top-tltBox,
.register .top-tltBox{ max-width: none; padding: 0 0 32px; }

/* .register .btn_confirm이 이제 flex(gap)로 배치되므로(skin/member/basic/style.css),
   버튼이 1개뿐인 지금은 flex:1이 자연스럽게 폭 100%를 채운다 - float/width 강제가 더 필요없다. */

/* 신규가입 화면은 박스 테두리/배경 없이 흰 배경으로 (회원정보 수정 화면은 기존 박스 스타일 유지) */
.suda-reginfo .register_form_inner{ background: none; border: none; border-radius: 0; }

/* 진짜 범인: skin/member/basic/style.css의 #fregisterform .form_01 div{margin:0 0 20px}
   (id+class+element라 특이도가 매우 높음) 가 이 화면에서 만드는 모든 div(로그인필드 래퍼,
   이름/성별 묶음, 개인정보 그룹 등)마다 20px씩 여백을 얹고 있었다. 이 화면 범위에서 완전히 무력화하고
   간격은 오직 gap으로만 통제한다. */
#fregisterform .form_01.suda-reginfo div{ margin: 0; }

/* 로그인 모달(gnb.css)은 그대로 두고, 이 파일이 적용되는 다른 화면(약관동의/이메일 인증/정보입력)의
   인풋만 흰 배경 + 포커스 시 그림자 없음으로 변경한다. (로그인 모달과 같은 페이지에 공존해도 영향 없도록 스코프 한정) */
/* (2026-10-24) 흰 배경 + 포커스 그림자 없음 규칙은 css/gnb.css 로 옮김 (K-컬처 제휴 문의 폼과 공용, .suda-login-field--plain) */

/* 회원정보 수정 화면은 이름(가입 시 확정)이 readonly로 내려온다 - 다른 흰 배경 인풋과
   똑같이 두면 입력 가능한 필드처럼 보여 혼동을 주므로 살짝 회색으로 구분한다. */
.suda-join .suda-login-field input[readonly],
.suda-reginfo .suda-login-field input[readonly]{ background: var(--suda-gray-50); color: var(--suda-gray-500); }

/* 로그인 팝업처럼 인풋 안에 아이콘이 들어가는 필드는 아이콘과 안 겹치도록 그 방향 패딩을 더 준다.
   (예: 이메일 인증 화면의 메일 아이콘 - 왼쪽 / 정보입력 화면의 초록 체크 아이콘 - 오른쪽) */
.suda-join .suda-login-field:has(.suda-icon) input,
.suda-reginfo .suda-login-field:has(.suda-icon) input{ padding-left: 44px; }
.suda-join .suda-login-field:has(.suda-field-check) input,
.suda-reginfo .suda-login-field:has(.suda-field-check) input{ padding-right: 44px; }

/* default.css의 .frm_input{box-shadow:inset 0 1px 1px rgba(0,0,0,.075)} 안쪽 그림자 제거 */
.suda-join .frm_input,
.suda-reginfo .frm_input{ box-shadow: none; -webkit-box-shadow: none; }

/* default.css의 .required{background-image:url(require.png) 우측상단 빨간 * } 를 이 화면들에서는 제거.
   필수 여부는 이미 초록 체크/제출버튼 비활성화로 표시되므로 별도 아이콘이 불필요하다. */
.suda-join .required,
.suda-reginfo .required{ background-image: none !important; }

.suda-reginfo-sub{
    font-size: 14px;
    color: var(--suda-gray-500);
    text-align: center;
    margin: -20px 0 0;
}

/* skin/member/basic/style.css의 .register_form_inner ul{padding:20px}(class+element 선택자라
   .suda-reginfo-list{padding:0}보다 우선순위가 높아 이겨버림) 를 확실히 무력화 */
.suda-reginfo .register_form_inner ul.suda-reginfo-list{ padding: 0; }
/* 필드 간 간격은 margin-bottom:15px로 통제한다 (li margin은 레거시 규칙과 충돌하므로
   특이도가 더 높은 .suda-reginfo-list .suda-field-row로 명시해서 이긴다) */
.suda-reginfo-list{ display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
.suda-reginfo-list .suda-field-row{ margin: 0 0 15px; width: 100%; }
.suda-reginfo-list .suda-field-row:last-child{ margin-bottom: 0; }

/* 필드 간 간격을 항상 동일하게: 안내문구(.suda-field-msg)가 비어있을 땐 자리를 차지하지 않도록 */
.suda-field-msg:empty{ display: none; margin: 0; min-height: 0; }

/* 이름/생년월일/휴대폰번호 묶음 - li가 아닌 div로 구성해서
   default.css/style.css의 div/li 마진 레거시 규칙과 절대 얽히지 않게 한다 */
.suda-personal-group{ display: flex; flex-direction: column; }
/* #fregisterform .form_01.suda-reginfo div{margin:0}(위쪽, 소셜 leak 방지용)가 특이도가 더 높아
   이 안의 div들 margin을 0으로 밀어버리므로 #fregisterform까지 포함해서 특이도를 맞춘다 */
/* 위 #fregisterform .form_01.suda-reginfo div{margin:0}이 element(div)까지 붙어 특이도가
   (1,2,1)로 더 높아서 그냥 특이도로는 못 이긴다 - margin-bottom만 !important로 확정한다 */
#fregisterform .suda-personal-group .suda-personal-row{ margin-bottom: 15px !important; }
#fregisterform .suda-personal-group .suda-personal-row:last-child{ margin-bottom: 0 !important; }
.suda-personal-row.is-valid .suda-field-check{ display: flex; }

.suda-name-gender-row{ display: flex; align-items: center; gap: 20px; }
.suda-name-field{ flex: 1; min-width: 0; }
/* 성별 선택 - 약관동의 화면의 체크박스처럼 박스 없이 라디오 버튼만 노출 */
.suda-gender-field{ display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.suda-gender-radio{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--suda-gray-900);
    cursor: pointer;
}
/* 라디오 자체는 사이트 공통 .suda-form-check(css/gnb.css)를 그대로 쓴다 */

.suda-field-check{
    position: absolute;
    right: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #22c55e;
}
.suda-field-row.is-valid .suda-field-check{ display: flex; }

.suda-field-msg{
    font-size: 12px;
    margin: 6px 2px 0;
    min-height: 14px;
    color: var(--suda-gray-500);
}
/* 회원가입/회원정보수정 두 화면 공용 - 박스(배경+테두리) 없이 색글자 텍스트로만 표시한다. */
.suda-field-msg.is-error{ color: var(--suda-red); }
.suda-field-msg.is-ok{ color: #22c55e; }

/* 비밀번호 입력 규칙 안내 - 에러 메시지와 달리 항상 고정으로 보여주는 문구라 :empty 축소 없이 둔다 */
.suda-field-hint{ font-size: 12px; margin: 6px 2px 0; color: var(--suda-gray-500); }

/* ---------- 자동등록방지(캡차) - 타이틀/구분선 없이, 다른 입력요소와 통일된 디자인으로 재구성 ----------
   DOM 순서(img, input, mp3버튼, reload버튼, info)는 kcaptcha.lib.php 그대로 두고
   flex order로만 "이미지+새로고침" / "입력창+음성듣기" 두 그룹으로 재배치한다. */
/* flex의 flex-grow가 fieldset 컨테이너 안에서 기대대로 안 늘어나는 문제가 있어
   grid로 바꿔서 가운데 입력창 칸(1fr)이 남는 폭을 전부 확실히 차지하도록 고정했다. */
#captcha{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "img input mp3 reload" "info info info info";
    align-items: center;
    gap: 8px;
    width: 100% !important;
    border: 0;
    padding: 0;
    margin: 0;
}
#captcha #captcha_img{
    grid-area: img;
    height: 52px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    vertical-align: middle;
    background: var(--suda-gray-50);
}
#captcha #captcha_key{
    grid-area: input;
    height: 52px;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    letter-spacing: normal;
    vertical-align: middle;
}
#captcha #captcha_key:focus{ outline: none; border-color: var(--suda-blue) !important; box-shadow: none; }
#captcha #captcha_mp3{ grid-area: mp3; }
#captcha #captcha_reload{ grid-area: reload; }
#captcha #captcha_mp3,
#captcha #captcha_reload{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid var(--suda-gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--suda-gray-500);
    text-indent: 0;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
#captcha #captcha_mp3:hover,
#captcha #captcha_reload:hover{
    color: var(--suda-blue);
    border-color: var(--suda-blue);
    background: var(--suda-gray-50);
}
#captcha #captcha_mp3 svg,
#captcha #captcha_reload svg{ width: 18px; height: 18px; }
#captcha #captcha_info{
    grid-area: info;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--suda-gray-500);
    letter-spacing: normal;
}

/* ---------- 아이디/비밀번호 찾기 (password_lost.skin.php, 하나투어 accounts.hanatour.com/find/id 참고) ---------- */
.suda-find-tabs{
    display: flex;
    border-bottom: 1px solid var(--suda-gray-200);
    margin-bottom: 32px;
}
.suda-find-tab{
    display: block;
    flex: 1;
    background: none;
    border: 0;
    padding: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--suda-gray-400);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.suda-find-tab.is-active{ color: var(--suda-gray-900); border-bottom-color: var(--suda-blue); }

.suda-find-methods{
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}
.suda-find-method-radio{
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 4px;
    border: 1px solid var(--suda-gray-200);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--suda-gray-500);
    cursor: pointer;
}
.suda-find-method-radio input{ position: absolute; opacity: 0; pointer-events: none; }
.suda-find-method-radio:has(input:checked){
    border-color: var(--suda-blue);
    background: rgba(65,84,255,.06);
    color: var(--suda-blue);
}

/* 필드 간 간격은 margin이 아니라 gap 하나로만 통제한다 (개별 margin-bottom을 중첩해서 쌓으면
   .suda-name-gender-row처럼 내부에 .suda-login-field를 감싼 행에서 margin이 두 번 겹쳐 간격이
   과하게 벌어지는 문제가 생긴다 - register_form.php에서 이미 한 번 겪은 것과 같은 종류의 버그) */
.suda-find-fields{ display: flex; flex-direction: column; gap: 15px; }

.suda-find-hp-row{
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.suda-find-hp-row .suda-login-field{ flex: 1; min-width: 0; margin-bottom: 0; }

.suda-login-field.is-valid .suda-field-check{ display: flex; }

.suda-find-timer{ font-size: 12px; font-weight: 700; color: var(--suda-blue); margin: -6px 0 0; }
.suda-find-hp-btn{
    flex-shrink: 0;
    width: 112px;
    border: 1px solid var(--suda-gray-200);
    border-radius: 12px;
    background: var(--suda-gray-50);
    font-size: 13px;
    font-weight: 700;
    color: var(--suda-gray-700);
    cursor: pointer;
}
.suda-find-hp-btn:disabled{ color: var(--suda-gray-400); cursor: not-allowed; }

.suda-find-captcha{ margin: 4px 0 24px; }

/* .suda-join-otp-error는 원래 register_email_verify.php에서 OTP 6칸 입력 바로 아래
   붙여서(margin-top:-8px) 쓰던 것인데, 여기서는 .suda-find-fields(gap:15px) 바로 다음이라
   음수 마진이 위 필드 행과 겹쳐 잘려 보인다. 이 화면에서만 양수 여백으로 되돌린다. */
.suda-find-page .suda-join-otp-error{ margin-top: 8px; }

.suda-find-method-body .suda-join-next{ margin-top: 24px; }

/* 아이디 찾기 결과 화면 - 하나투어처럼 별도 화면으로 전환되는 흐름만 참고하고,
   디자인은 register_result.skin.php(가입완료 화면)에서 이미 쓰던 .suda-join-title + .suda-reginfo-sub
   조합을 그대로 재사용한다. */
.suda-find-result-page{ padding-top: 8px; }
.suda-find-result-value{
    font-size: 20px;
    font-weight: 700;
    color: var(--suda-gray-900);
    text-align: center;
    margin: 28px 0;
    padding: 16px;
    background: var(--suda-gray-50);
    border-radius: 12px;
}

.suda-find-cert-notice{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: var(--suda-gray-50);
    border-radius: 12px;
    margin-bottom: 24px;
}
.suda-find-cert-notice strong{ display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--suda-gray-900); }
.suda-find-cert-notice strong svg{ width: 16px; height: 16px; color: var(--suda-gray-500); flex-shrink: 0; }
.suda-find-cert-notice p{ margin: 0; font-size: 13px; line-height: 1.6; color: var(--suda-gray-500); }

/* ---------- 회원 비밀번호 확인 (member_confirm.skin.php, 하나투어 스타일 톤으로 재구성) ---------- */
.suda-confirm-email-box{ margin: 24px 0; }
.suda-confirm-password-field{ margin-bottom: 20px; }

/* ---------- 반응형 (사이트 공통 1024/768/480 3단 기준, px÷breakpoint×100 vw 변환) ---------- */

@media screen and (max-width:1024px) {
    .suda-join{ padding-top: 5.47vw; padding-inline: 5vw; padding-bottom: 9.38vw; }
    #sudaEmailInputPhase .suda-login-field{ margin-bottom: 1.95vw; }
    .suda-join-title{ font-size: 2.73vw; margin-bottom: 3.13vw; }
    .suda-join-email-precheck{ font-size: 1.27vw; margin: -1.95vw 0 2.73vw; }
    .suda-join-terms{ margin-bottom: 3.13vw; }
    .suda-join-terms-all{ padding-block: 1.37vw; padding-inline: 1.76vw; }
    .suda-join-terms-all-label{ font-size: 1.46vw; gap: 1.17vw; }
    .suda-join-terms-toggle{ width: 2.73vw; height: 2.73vw; font-size: 1.76vw; }
    .suda-join-term-row{ gap: 1.17vw; padding-block: 1.37vw; padding-inline: 1.76vw; }
    .suda-join-term-row-label{ font-size: 1.46vw; gap: 0.59vw; }
    .suda-join-term-tag{ font-size: 1.17vw; }
    .suda-join-term-link{ width: 2.34vw; height: 2.34vw; font-size: 1.56vw; }
    .suda-join-term-sub{ padding-block: 1.37vw; padding-inline-start: 4.49vw; gap: 0.78vw; }
    .suda-join-term-sub label{ font-size: 1.27vw; gap: 0.59vw; }
    /* (2026-10-24) .suda-join-next 크기는 css/gnb.css 로 옮김 */
    .suda-join-email-notice{ font-size: 1.37vw; margin-bottom: 2.73vw; }
    .suda-join-otp-boxes{ gap: 0.78vw; margin-bottom: 1.56vw; }
    .suda-join-otp-boxes input{ width: 4.30vw; height: 5.08vw; font-size: 2.34vw; }
    .suda-join-otp-resend{ font-size: 1.27vw; }
    .suda-join-otp-checking{ font-size: 1.27vw; margin-top: 1.56vw; }
    .suda-join-otp-error{ font-size: 1.17vw; margin-bottom: 1.56vw; }

    #reg_result.suda-reg-result{ padding-top: 11.72vw; }
    #reg_result.suda-reg-result .result_txt{ font-size: 1.37vw; }
    #reg_result.suda-reg-result #result_email{ margin: 1.95vw 0; padding: 1.37vw 1.95vw; border-radius: 1.17vw; }
    .btn_confirm_reg{ margin: 4.69vw auto 0; }

    /* (2026-10-24) .suda-join/.suda-reginfo 인풋 좌우 여백은 css/gnb.css 로 옮김 */
    .suda-reginfo-sub{ font-size: 1.37vw; margin: -1.95vw 0 0; }
    .suda-field-check{ right: 1.37vw; width: 1.95vw; height: 1.95vw; }
    .suda-reginfo-list .suda-field-row{ margin-bottom: 1.46vw; }
    #fregisterform .suda-personal-group .suda-personal-row{ margin-bottom: 1.46vw !important; }
    .suda-field-msg{ font-size: 1.17vw; margin: 0.59vw 0.20vw 0; min-height: 1.37vw; }
    .suda-field-hint{ font-size: 1.17vw; margin: 0.59vw 0.20vw 0; }

    .register{ padding: 6.25vw 5vw 9.77vw; }
    .suda-reginfo-title-wrap{ margin-bottom: 3.13vw; }
    .suda-join .top-tltBox,
    .register .top-tltBox{ padding: 0 0 3.13vw; }
    .suda-name-gender-row{ gap: 1.95vw; }
    .suda-gender-field{ gap: 1.56vw; }
    .suda-gender-radio{ gap: 0.59vw; font-size: 1.46vw; }

    #captcha{ gap: 0.78vw; }
    /* 다른 인풋(.suda-login-field input)은 480px 전까지 높이/글자크기를 안 줄이므로 자동등록방지도 맞춘다 */
    #captcha #captcha_img{ border-radius: 1.17vw; margin: 0 0.39vw 0 0; }
    #captcha #captcha_key{ min-width: 11.72vw; padding: 0 1.56vw; border-radius: 1.17vw; margin: 0 0.39vw; }
    #captcha #captcha_mp3,
    #captcha #captcha_reload{ border-radius: 0.98vw; }
    #captcha #captcha_info{ font-size: 1.17vw; margin: 0.78vw 0 0; }

    .suda-find-tabs{ margin-bottom: 3.13vw; }
    .suda-find-tab{ padding-bottom: 1.56vw; font-size: 1.66vw; }
    .suda-find-methods{ gap: 0.78vw; margin-bottom: 2.73vw; }
    .suda-find-method-radio{ padding: 1.17vw 0.39vw; border-radius: 0.98vw; font-size: 1.27vw; }
    .suda-find-fields{ gap: 1.46vw; }
    .suda-find-hp-row{ gap: 0.78vw; }
    .register .btn_confirm{ gap: 0.78vw; }
    .suda-find-hp-btn{ width: 10.94vw; border-radius: 1.17vw; font-size: 1.27vw; }
    .suda-find-captcha{ margin: 0.39vw 0 2.34vw; }
    .suda-find-page .suda-join-otp-error{ margin-top: 0.78vw; }
    .suda-find-timer{ font-size: 1.17vw; margin-top: -0.59vw; }
    .suda-find-method-body .suda-join-next{ margin-top: 2.34vw; }

    .suda-find-result-page{ padding-top: 0.78vw; }
    .suda-find-result-value{ font-size: 1.95vw; margin: 2.73vw 0; padding: 1.56vw; border-radius: 1.17vw; }
    .suda-find-cert-notice{ gap: 0.78vw; padding: 1.56vw 1.76vw; border-radius: 1.17vw; margin-bottom: 2.34vw; }
    .suda-find-cert-notice strong{ gap: 0.59vw; font-size: 1.37vw; }
    .suda-find-cert-notice strong svg{ width: 1.56vw; height: 1.56vw; }
    .suda-find-cert-notice p{ font-size: 1.27vw; }

    .suda-confirm-email-box{ margin: 2.34vw 0; }
    .suda-confirm-password-field{ margin-bottom: 1.95vw; }
}

@media screen and (max-width:768px) {
    .suda-join{ padding-top: 7.29vw; padding-inline: 5vw; padding-bottom: 12.50vw; }
    #sudaEmailInputPhase .suda-login-field{ margin-bottom: 2.60vw; }
    .suda-join-title{ font-size: 3.65vw; margin-bottom: 4.17vw; }
    .suda-join-email-precheck{ font-size: 1.69vw; margin: -2.60vw 0 3.65vw; }
    .suda-join-terms{ margin-bottom: 4.17vw; }
    .suda-join-terms-all{ padding-block: 1.82vw; padding-inline: 2.34vw; }
    .suda-join-terms-all-label{ font-size: 1.95vw; gap: 1.56vw; }
    .suda-join-terms-toggle{ width: 3.65vw; height: 3.65vw; font-size: 2.34vw; }
    .suda-join-term-row{ gap: 1.56vw; padding-block: 1.82vw; padding-inline: 2.34vw; }
    .suda-join-term-row-label{ font-size: 1.95vw; gap: 0.78vw; }
    .suda-join-term-tag{ font-size: 1.56vw; }
    .suda-join-term-link{ width: 3.13vw; height: 3.13vw; font-size: 2.08vw; }
    .suda-join-term-sub{ padding-block: 1.82vw; padding-inline-start: 5.99vw; gap: 1.04vw; }
    .suda-join-term-sub label{ font-size: 1.69vw; gap: 0.78vw; }
    /* (2026-10-24) .suda-join-next 크기는 css/gnb.css 로 옮김 */
    .suda-join-email-notice{ font-size: 1.82vw; margin-bottom: 3.65vw; }
    .suda-join-otp-boxes{ gap: 1.04vw; margin-bottom: 2.08vw; }
    .suda-join-otp-boxes input{ width: 5.73vw; height: 6.77vw; font-size: 3.13vw; }
    .suda-join-otp-resend{ font-size: 1.69vw; }
    .suda-join-otp-checking{ font-size: 1.69vw; margin-top: 2.08vw; }
    .suda-join-otp-error{ font-size: 1.56vw; margin-bottom: 2.08vw; }

    #reg_result.suda-reg-result{ padding-top: 15.63vw; }
    #reg_result.suda-reg-result .result_txt{ font-size: 1.82vw; }
    #reg_result.suda-reg-result #result_email{ margin: 2.60vw 0; padding: 1.82vw 2.60vw; border-radius: 1.56vw; }
    .btn_confirm_reg{ margin: 6.25vw auto 0; }

    /* (2026-10-24) .suda-join/.suda-reginfo 인풋 좌우 여백은 css/gnb.css 로 옮김 */
    .suda-reginfo-sub{ font-size: 1.82vw; margin: -2.60vw 0 0; }
    .suda-field-check{ right: 1.82vw; width: 2.60vw; height: 2.60vw; }
    .suda-reginfo-list .suda-field-row{ margin-bottom: 1.95vw; }
    #fregisterform .suda-personal-group .suda-personal-row{ margin-bottom: 1.95vw !important; }
    .suda-field-msg{ font-size: 1.56vw; margin: 0.78vw 0.26vw 0; min-height: 1.82vw; }
    .suda-field-hint{ font-size: 1.56vw; margin: 0.78vw 0.26vw 0; }

    .register{ padding: 8.33vw 5vw 13.02vw; }
    .suda-reginfo-title-wrap{ margin-bottom: 4.17vw; }
    .suda-join .top-tltBox,
    .register .top-tltBox{ padding: 0 0 4.17vw; }
    .suda-name-gender-row{ gap: 2.60vw; }
    .suda-gender-field{ gap: 2.08vw; }
    .suda-gender-radio{ gap: 0.78vw; font-size: 1.95vw; }

    #captcha{ gap: 1.04vw; }
    #captcha #captcha_img{ border-radius: 1.56vw; margin: 0 0.52vw 0 0; }
    #captcha #captcha_key{ min-width: 15.63vw; padding: 0 2.08vw; border-radius: 1.56vw; margin: 0 0.52vw; }
    #captcha #captcha_mp3,
    #captcha #captcha_reload{ border-radius: 1.30vw; }
    #captcha #captcha_info{ font-size: 1.56vw; margin: 1.04vw 0 0; }

    .suda-find-tabs{ margin-bottom: 4.17vw; }
    .suda-find-tab{ padding-bottom: 2.08vw; font-size: 2.21vw; }
    .suda-find-methods{ gap: 1.04vw; margin-bottom: 3.65vw; }
    .suda-find-method-radio{ padding: 1.56vw 0.52vw; border-radius: 1.30vw; font-size: 1.69vw; }
    .suda-find-fields{ gap: 1.95vw; }
    .suda-find-hp-row{ gap: 1.04vw; }
    .register .btn_confirm{ gap: 1.04vw; }
    .suda-find-hp-btn{ width: 14.58vw; border-radius: 1.56vw; font-size: 1.69vw; }
    .suda-find-captcha{ margin: 0.52vw 0 3.13vw; }
    .suda-find-page .suda-join-otp-error{ margin-top: 1.04vw; }
    .suda-find-timer{ font-size: 1.56vw; margin-top: -0.78vw; }
    .suda-find-method-body .suda-join-next{ margin-top: 3.13vw; }

    .suda-find-result-page{ padding-top: 1.04vw; }
    .suda-find-result-value{ font-size: 2.60vw; margin: 3.65vw 0; padding: 2.08vw; border-radius: 1.56vw; }
    .suda-find-cert-notice{ gap: 1.04vw; padding: 2.08vw 2.34vw; border-radius: 1.56vw; margin-bottom: 3.13vw; }
    .suda-find-cert-notice strong{ gap: 0.78vw; font-size: 1.82vw; }
    .suda-find-cert-notice strong svg{ width: 2.08vw; height: 2.08vw; }
    .suda-find-cert-notice p{ font-size: 1.69vw; }

    .suda-confirm-email-box{ margin: 3.13vw 0; }
    .suda-confirm-password-field{ margin-bottom: 2.60vw; }
}

@media screen and (max-width:480px) {
    .suda-join{ padding-top: 11.67vw; padding-inline: 5vw; padding-bottom: 20.00vw; }
    #sudaEmailInputPhase .suda-login-field{ margin-bottom: 4.17vw; }
    .suda-join-title{ font-size: 5.83vw; margin-bottom: 6.67vw; }
    .suda-join-email-precheck{ font-size: 2.71vw; margin: -4.17vw 0 5.83vw; }
    .suda-join-terms{ margin-bottom: 6.67vw; }
    .suda-join-terms-all{ padding-block: 2.92vw; padding-inline: 3.75vw; }
    .suda-join-terms-all-label{ font-size: 3.13vw; gap: 2.50vw; }
    .suda-join-terms-toggle{ width: 5.83vw; height: 5.83vw; font-size: 3.75vw; }
    .suda-join-term-row{ gap: 2.50vw; padding-block: 2.92vw; padding-inline: 3.75vw; }
    .suda-join-term-row-label{ font-size: 3.13vw; gap: 1.25vw; }
    .suda-join-term-tag{ font-size: 2.50vw; }
    .suda-join-term-link{ width: 5.00vw; height: 5.00vw; font-size: 3.33vw; }
    .suda-join-term-sub{ padding-block: 2.92vw; padding-inline-start: 9.58vw; gap: 1.67vw; }
    .suda-join-term-sub label{ font-size: 2.71vw; gap: 1.25vw; }
    /* (2026-10-24) .suda-join-next 크기는 css/gnb.css 로 옮김 */
    .suda-join-email-notice{ font-size: 2.92vw; margin-bottom: 5.83vw; }
    .suda-join-otp-boxes{ gap: 1.67vw; margin-bottom: 3.33vw; }
    .suda-join-otp-boxes input{ width: 9.17vw; height: 10.83vw; font-size: 5.00vw; }
    .suda-join-otp-resend{ font-size: 2.71vw; }
    .suda-join-otp-checking{ font-size: 2.71vw; margin-top: 3.33vw; }
    .suda-join-otp-error{ font-size: 2.50vw; margin-bottom: 3.33vw; }

    #reg_result.suda-reg-result{ padding-top: 25.00vw; }
    #reg_result.suda-reg-result .result_txt{ font-size: 2.92vw; }
    #reg_result.suda-reg-result #result_email{ margin: 4.17vw 0; padding: 2.92vw 4.17vw; border-radius: 2.50vw; }
    .btn_confirm_reg{ margin: 10.00vw auto 0; }

    /* (2026-10-24) .suda-join/.suda-reginfo 인풋 좌우 여백은 css/gnb.css 로 옮김 */
    .suda-reginfo-sub{ font-size: 2.92vw; margin: -4.17vw 0 0; }
    .suda-field-check{ right: 2.92vw; width: 4.17vw; height: 4.17vw; }
    .suda-reginfo-list .suda-field-row{ margin-bottom: 3.13vw; }
    #fregisterform .suda-personal-group .suda-personal-row{ margin-bottom: 3.13vw !important; }
    .suda-field-msg{ font-size: 2.50vw; margin: 1.25vw 0.42vw 0; min-height: 2.92vw; }
    .suda-field-hint{ font-size: 2.50vw; margin: 1.25vw 0.42vw 0; }

    .register{ padding: 13.33vw 5vw 20.83vw; }
    .suda-reginfo-title-wrap{ margin-bottom: 6.67vw; }
    .suda-join .top-tltBox,
    .register .top-tltBox{ padding: 0 0 6.67vw; }
    .suda-name-gender-row{ gap: 4.17vw; flex-wrap: wrap; }
    .suda-gender-field{ gap: 3.33vw; }
    .suda-gender-radio{ gap: 1.25vw; font-size: 3.13vw; }

    #captcha{ gap: 1.67vw; }
    #captcha #captcha_img{ height: 10.83vw; border-radius: 2.50vw; margin: 0 0.83vw 0 0; }
    #captcha #captcha_key{ height: 10.83vw; min-width: 25.00vw; padding: 0 3.33vw; font-size: 3.13vw; border-radius: 2.50vw; margin: 0 0.83vw; }
    #captcha #captcha_mp3,
    #captcha #captcha_reload{ width: 9.17vw; height: 9.17vw; border-radius: 2.08vw; }
    #captcha #captcha_mp3 svg,
    #captcha #captcha_reload svg{ width: 3.75vw; height: 3.75vw; }
    #captcha #captcha_info{ font-size: 2.50vw; margin: 1.67vw 0 0; }

    .suda-find-tabs{ margin-bottom: 6.67vw; }
    .suda-find-tab{ padding-bottom: 3.33vw; font-size: 3.54vw; }
    .suda-find-methods{ gap: 1.67vw; margin-bottom: 5.83vw; }
    .suda-find-method-radio{ padding: 2.50vw 0.83vw; border-radius: 2.08vw; font-size: 2.71vw; }
    .suda-find-fields{ gap: 3.13vw; }
    .suda-find-hp-row{ gap: 1.67vw; }
    .register .btn_confirm{ gap: 1.67vw; }
    .suda-find-hp-btn{ width: 23.33vw; border-radius: 2.50vw; font-size: 2.71vw; }
    .suda-find-captcha{ margin: 0.83vw 0 5.00vw; }
    .suda-find-page .suda-join-otp-error{ margin-top: 1.67vw; }
    .suda-find-timer{ font-size: 2.50vw; margin-top: -1.25vw; }
    .suda-find-method-body .suda-join-next{ margin-top: 5.00vw; }

    .suda-find-result-page{ padding-top: 1.67vw; }
    .suda-find-result-value{ font-size: 4.17vw; margin: 5.83vw 0; padding: 3.33vw; border-radius: 2.50vw; }
    .suda-find-cert-notice{ gap: 1.67vw; padding: 3.33vw 3.75vw; border-radius: 2.50vw; margin-bottom: 5.00vw; }
    .suda-find-cert-notice strong{ gap: 1.25vw; font-size: 2.92vw; }
    .suda-find-cert-notice strong svg{ width: 3.33vw; height: 3.33vw; }
    .suda-find-cert-notice p{ font-size: 2.71vw; }

    .suda-confirm-email-box{ margin: 5.00vw 0; }
    .suda-confirm-password-field{ margin-bottom: 4.17vw; }
}

/* ---------- 소셜로그인 스킨 leak 방지 ----------
   로그인 모달의 소셜로그인 버튼 때문에 skin/social/style.css가 전역(모든 페이지 head)에 로드되는데,
   그 안의 `#fregisterform p`/`#fregisterform h2` 규칙이 ID 선택자라 특이도가 매우 높아서
   (id+element = 101) 이 화면의 suda-join-title/suda-reginfo-sub/suda-field-msg/suda-field-hint를
   전부 덮어써 버렸다(진한 핑크 박스 + 흰 굵은 글씨 + 왼쪽정렬 밑줄 타이틀로 보이던 원인).
   같은 #fregisterform 안에서 클래스를 하나 더 얹어 특이도(id+class > id+element)로 이긴다. */
#fregisterform .suda-join-title,
#fregisterform .top-tltBox h2{ font-size: 28px; text-align: center; padding: 0; border-bottom: none; }
#fregisterform .suda-reginfo-sub,
#fregisterform .top-tltBox p,
#fregisterform .suda-field-msg,
#fregisterform .suda-field-hint,
#fregisterform .suda-consent-edit-help{
    position: static;
    height: auto;
    line-height: inherit;
    font-weight: 400;
    background: none;
    border-radius: 0;
}
#fregisterform .suda-reginfo-sub:before,
#fregisterform .top-tltBox p:before,
#fregisterform .suda-field-msg:before,
#fregisterform .suda-field-hint:before,
#fregisterform .suda-consent-edit-help:before{ content: none; }

#fregisterform .suda-reginfo-sub,
#fregisterform .top-tltBox p{ font-size: 14px; color: var(--suda-gray-500); text-align: center; margin: 8px 0 0; }
#fregisterform .suda-field-msg{ font-size: 12px; margin: 6px 2px 0; min-height: 14px; color: var(--suda-gray-500); text-align: left; }
#fregisterform .suda-field-msg.is-error{ color: var(--suda-red); }
#fregisterform .suda-field-msg.is-ok{ color: #22c55e; }
#fregisterform .suda-field-hint{ font-size: 12px; margin: 6px 2px 0; color: var(--suda-gray-500); text-align: left; }

@media (max-width: 1024px) {
    #fregisterform .suda-join-title,
    #fregisterform .top-tltBox h2{ font-size: 2.73vw; }
    #fregisterform .suda-reginfo-sub,
    #fregisterform .top-tltBox p{ font-size: 1.37vw; margin-top: 0.78vw; }
    #fregisterform .suda-field-msg{ font-size: 1.17vw; margin: 0.59vw 0.20vw 0; min-height: 1.37vw; }
    #fregisterform .suda-field-hint{ font-size: 1.17vw; margin: 0.59vw 0.20vw 0; }
}
@media (max-width: 768px) {
    #fregisterform .suda-join-title,
    #fregisterform .top-tltBox h2{ font-size: 3.65vw; }
    #fregisterform .suda-reginfo-sub,
    #fregisterform .top-tltBox p{ font-size: 1.82vw; margin-top: 1.04vw; }
    #fregisterform .suda-field-msg{ font-size: 1.56vw; margin: 0.78vw 0.26vw 0; min-height: 1.82vw; }
    #fregisterform .suda-field-hint{ font-size: 1.56vw; margin: 0.78vw 0.26vw 0; }
}
@media (max-width: 480px) {
    #fregisterform .suda-join-title,
    #fregisterform .top-tltBox h2{ font-size: 5.83vw; }
    #fregisterform .suda-reginfo-sub,
    #fregisterform .top-tltBox p{ font-size: 2.92vw; margin-top: 1.67vw; }
    #fregisterform .suda-field-msg{ font-size: 2.50vw; margin: 1.25vw 0.42vw 0; min-height: 2.92vw; }
    #fregisterform .suda-field-hint{ font-size: 2.50vw; margin: 1.25vw 0.42vw 0; }
}

/* register.skin.php(약관동의)는 form id가 fregisterform이 아니라 fregister라서 같은 소셜 leak이
   #fregister h2{text-align:left;padding:20px;border-bottom...}로 따로 걸린다 - 똑같이 특이도로 이긴다 */
#fregister .top-tltBox h2{ font-size: 28px; text-align: center; padding: 0; border-bottom: none; }
@media (max-width: 1024px) { #fregister .top-tltBox h2{ font-size: 2.73vw; } }
@media (max-width: 768px) { #fregister .top-tltBox h2{ font-size: 3.65vw; } }
@media (max-width: 480px) { #fregister .top-tltBox h2{ font-size: 5.83vw; } }

/* SUDA CUSTOM (2026-10-24): 회원정보 수정 - 수신 동의 (가입 1단계 약관과 같은 .suda-join-term-* 모양, extend/suda_member_consent.extend.php)
   #fregisterform .form_01.suda-reginfo div{margin:0} 보다 우선하도록 #fregisterform 을 붙인다. 안내 문구는 입력칸 아래 안내(.suda-field-hint)와 같은 글자 */
#fregisterform .form_01.suda-reginfo .suda-consent-edit{ margin: 36px 0 24px; }
#fregisterform .form_01.suda-reginfo .suda-consent-edit-title{ margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--suda-gray-900); }
.suda-consent-date{ margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--suda-gray-400); }
#fregisterform .form_01.suda-reginfo .suda-consent-edit-help{ margin: 8px 2px 0; padding: 0; border: 0; font-size: 12px; line-height: 1.5; color: var(--suda-gray-500); text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
@media screen and (max-width:1024px){
    #fregisterform .form_01.suda-reginfo .suda-consent-edit{ margin: 3.52vw 0 2.34vw; }
    #fregisterform .form_01.suda-reginfo .suda-consent-edit-title{ margin-bottom: 1.17vw; font-size: 1.76vw; }
    .suda-consent-date{ font-size: 1.17vw; }
    #fregisterform .form_01.suda-reginfo .suda-consent-edit-help{ margin: 0.78vw 0.2vw 0; font-size: 1.17vw; }
}
@media screen and (max-width:768px){
    #fregisterform .form_01.suda-reginfo .suda-consent-edit{ margin: 4.69vw 0 3.13vw; }
    #fregisterform .form_01.suda-reginfo .suda-consent-edit-title{ margin-bottom: 1.56vw; font-size: 2.34vw; }
    .suda-consent-date{ font-size: 1.56vw; }
    #fregisterform .form_01.suda-reginfo .suda-consent-edit-help{ margin: 1.04vw 0.26vw 0; font-size: 1.56vw; }
}
@media screen and (max-width:480px){
    #fregisterform .form_01.suda-reginfo .suda-consent-edit{ margin: 7.5vw 0 5vw; }
    #fregisterform .form_01.suda-reginfo .suda-consent-edit-title{ margin-bottom: 2.5vw; font-size: 3.75vw; }
    .suda-consent-date{ font-size: 2.5vw; }
    #fregisterform .form_01.suda-reginfo .suda-consent-edit-help{ margin: 1.67vw 0.42vw 0; font-size: 2.5vw; }
}

/* SUDA CUSTOM (2026-10-24): 회원정보 수정(register_form.php?w=u)만 .register 안쪽 여백 없앰 - 회원가입 정보입력은 그대로.
   태블릿·모바일은 입력칸이 화면 끝에 붙지 않게 좌우 바깥 여백(margin)으로 둔다 */
.register.register--edit{ padding: 0; }
@media screen and (max-width:1024px){
    .register.register--edit{ padding: 0; width: calc(100% - 10vw); margin-left: auto; margin-right: auto; }
}