@charset "utf-8";

/* 회원 페이지 공통 - 마크업 member/login.php · member/join.php · member/find.php.
   인풋·체크박스·버튼은 css/common.css 원본을 그대로 쓰고 여기서는 폭과 배치만 잡는다 */
.member-section .inner {max-width: 748px !important; row-gap: var(--space-48) !important;}
.member-section .login-tit {text-align: center;}

.member-section.login-section .inner {max-width: 490px !important;}
.member-section .login-option {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 12px;}
.member-section .check-item {min-height: unset;}
.member-section .login-find {font-size: var(--fs-15);}

.member-section .login-error {margin-top: var(--fs-16); text-align: center;}
.member-section .login-submit {margin-top: var(--space-48);}

.member-section .login-join {display: flex; align-items: center; justify-content: center; column-gap: 8px; margin-top: var(--fs-20); text-align: center; color: var(--color-gray6);}
.member-section .login-join a {color: var(--color-static1); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s;}
.member-section .login-join a:hover {color: var(--color-static2);}

.member-section .sns-login {margin-top: var(--space-48);}
.member-section .sns-login-tit {margin-bottom:  var(--space-24); display: flex; align-items: center; column-gap: var(--space-24); color: var(--color-gray8);}
.member-section .sns-login-tit::before,
.member-section .sns-login-tit::after {content: ''; flex: 1 1 auto; height: 1px; background-color: var(--color-gray3);}

/* ── 회원가입 · 찾기 공통 ────────────────────────────────── */

/* 라디오로 열고 닫는 입력칸 - .input-item 이 flex 라서 [hidden] 을 따로 막는다 */
.member-section .input-item[hidden] {display: none;}

/* 인풋 + 우측 버튼 - 중복확인 · 인증요청 · 재전송 · 인증하기 */
.member-section .input-wrap {width: 100%;}
.member-section .input-wrap .custom-input {flex: 1 1 auto; min-width: 0;}
.member-section .input-wrap .square-btn {flex: none; min-width: 120px;}
.member-section .input-help {margin-top: 8px; color: var(--color-gray6);}

/* 이메일 - 아이디 @ 도메인 */
.member-section .email-wrap {align-items: center;}
.member-section .email-wrap .custom-select {flex: 1 1 auto; min-width: 0;}
.member-section .email-wrap .email-at {flex: none; color: var(--color-gray8);}
/* 선택 전에는 placeholder 색으로 보여준다. option[value=""] + required 조합이라 :invalid 로 잡힌다 */
.member-section .custom-select:invalid {color: var(--color-gray5);}

/* ── 회원가입 ───────────────────────────────────────────── */

.member-section .join-tit {text-align: center;}
.member-section .join-desc {margin-top: 12px; text-align: center; color: var(--color-gray6);}
.member-section .join-form {margin-top: var(--space-60);}

/* 비밀번호 표시 토글 - 마크업 .pw-field > input + button[data-pw-toggle], js/member.js initPwToggle() 참고 */
.member-section .pw-field {position: relative; flex: 1 1 auto; min-width: 0;}
.member-section .pw-field .custom-input {padding-right: 52px;}
.member-section .pw-toggle {position: absolute; top: 50%; right: 4px; width: 44px; height: 44px; transform: translateY(-50%); background-image: url(/img/eye-ico.svg); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; transition: opacity 0.2s;}
.member-section .pw-toggle:hover {opacity: 0.7;}
.member-section .pw-toggle.active {background-image: url(/img/eye-off-ico.svg);}

/* 휴대폰 인증 - 타이머는 인풋 안 오른쪽. .input-wrap 이 flex 라서 [hidden] 을 따로 막는다 */
.member-section .cert-wrap {margin-top: var(--fs-12);}
.member-section .cert-wrap[hidden] {display: none;}
.member-section .cert-field {position: relative; flex: 1 1 auto; min-width: 0;}
.member-section .cert-field .custom-input {padding-right: 84px;}
.member-section .cert-timer {position: absolute; top: 50%; right: var(--fs-20); transform: translateY(-50%); color: var(--color-static1);}
.member-section .cert-timer[hidden] {display: none;}

/* 약관동의 */
.member-section .terms {margin-top: var(--space-60);}
.member-section .terms-tit {color: var(--color-gray9);}
.member-section .terms-all {margin-top: var(--space-30); padding-bottom: var(--fs-20); border-bottom: 1px solid var(--color-gray3);}
.member-section .terms-all .check-item {min-height: 44px;}
.member-section .terms-list {margin-top: var(--fs-12);}
.member-section .terms-item {display: flex; align-items: center; justify-content: space-between; column-gap: 12px;}
.member-section .terms-item .check-item {min-height: 44px;}
.member-section .terms-mark {color: var(--color-gray6);}
.member-section .terms-view {flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; transition: background-color 0.2s;}
.member-section .terms-view:hover {background-color: var(--color-gray2);}

.member-section .join-error {margin-top: var(--fs-20); text-align: center;}
.member-section .join-submit {margin-top: var(--space-48);}

/* ── 아이디 · 비밀번호 찾기 ──────────────────────────────── */

.member-section .find-tit {text-align: center;}
.member-section .find-desc {color: var(--color-gray8);}

.member-section .find-box .tab-list {column-gap: 0;}
.member-section .find-box .tab-list .tab {flex: 1;}
.member-section .find-box .tab-content {padding-top: var(--space-48);}

/* 인증 방법 - 기본 라디오. 터치 영역 44px 를 다시 살린다 */
.member-section .find-method {margin-top: var(--space-30);}
.member-section .find-method .radio-list {column-gap: var(--space-24);}
.member-section .find-method .check-item {min-height: 44px;}

.member-section .find-field {margin-top: var(--space-48);}
.member-section .find-submit {margin-top: var(--space-48);}

/* 조회 결과 - 서버가 hidden 을 떼면 보인다 */
.member-section .find-result {margin-top: var(--space-48);}
.member-section .find-result-tit {display: flex; align-items: center; column-gap: var(--space-24); color: var(--color-gray8);}
.member-section .find-result-tit::before,
.member-section .find-result-tit::after {content: ''; flex: 1 1 auto; height: 1px; background-color: var(--color-gray3);}
.member-section .result-box {display: flex; align-items: center; justify-content: center; column-gap: var(--fs-20); margin-top: var(--space-24); padding: var(--space-40) var(--fs-20); border: 1px solid var(--color-gray3); border-radius: var(--radius);}
.member-section .result-box[hidden] {display: none;}
.member-section .result-ico {flex: none;}
.member-section .result-txt {color: var(--color-gray8);}
.member-section .result-id {display: inline-block; color: var(--color-gray9);}
.member-section .find-login {margin-top: var(--space-30); text-align: center;}
.member-section .find-login a {color: var(--color-gray9); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s;}
.member-section .find-login a:hover {color: var(--color-static1);}

@media screen and (max-width: 480px) {
    .member-section .login-tit {margin-bottom: var(--space-40);}

    .member-section .input-wrap .square-btn {min-width: 88px; padding-inline: var(--fs-12);}
    .member-section .email-wrap {flex-wrap: wrap; row-gap: 8px;}
    .member-section .email-wrap .custom-input {flex: 1 1 100%;}
    .member-section .cert-field .custom-input {padding-right: 76px;}

    .member-section .result-box {flex-direction: column; row-gap: var(--fs-12); text-align: center;}
}