/* ═══════════════ auth 공용 — 로그인 · 회원가입 · 비번찾기 · 가입완료 ═══════════════ */

/* auth 페이지는 화면 중앙 카드 레이아웃 (auth.css는 auth 4페이지에서만 로드) */
body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 48px 20px;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.auth { width: 100%; max-width: 440px; animation: fadeUp 0.4s ease; }

/* 브랜드 마크 */
.auth-brand {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 18px; font-weight: 800; letter-spacing: -0.4px;
    color: var(--ink); text-decoration: none; margin-bottom: 18px;
}
.auth-brand .bx {
    width: 48px; height: 48px; object-fit: contain; flex-shrink: 0;
}
.auth--wide .auth-brand { flex-direction: column; gap: 6px; }

/* 타이틀 */
.auth-head { text-align: center; margin-bottom: 32px; }
.auth-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; word-break: keep-all; }
.auth-head p { font-size: 15px; color: var(--muted); margin-top: 10px; line-height: 1.65; word-break: keep-all; }

/* 폼 카드 */
.auth-card {
    background: var(--surface); border-radius: var(--r-lg);
    box-shadow: var(--shadow-rest); padding: 36px 34px;
}

/* 카드 내 상태 전환 (비번찾기 입력 ↔ 안내) */
.state { display: none; }
.state.show { display: block; animation: fadeUp 0.3s ease; }

/* 필드 */
.field { margin-bottom: 20px; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.field label { font-size: 14.5px; font-weight: 700; }
.field > label { display: block; margin-bottom: 9px; }
.field-input { position: relative; }
.field input {
    width: 100%; height: 52px; padding: 0 16px;
    font: inherit; font-size: 15.5px; color: var(--ink);
    background: #F8FAFC; border: 1.5px solid var(--line); border-radius: var(--r-md);
    outline: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.field input::placeholder { color: #94A3B8; }
.field input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[type="password"] { padding-right: 48px; letter-spacing: 2px; }
.field .err { display: none; font-size: 13px; color: var(--danger); margin-top: 7px; }
.field.invalid .err { display: block; }
.field.invalid input { border-color: var(--danger); }

/* 비밀번호 표시 토글 */
.eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border: none; background: none; cursor: pointer;
    color: #94A3B8; display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.eye:hover { color: var(--ink); background: #F1F5F9; }

/* 주 버튼 */
.auth-submit {
    width: 100%; height: 54px; margin-top: 6px;
    font: inherit; font-size: 16.5px; font-weight: 700; color: #fff;
    background: var(--accent); border: none; border-radius: var(--r-md); cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.auth-submit:hover { background: var(--accent-deep); }
.auth-submit:active { transform: scale(0.99); }

/* 보조 버튼 (테두리형) */
.auth-secondary {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 52px;
    font: inherit; font-size: 15px; font-weight: 700; text-decoration: none;
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
    color: var(--ink); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.auth-secondary:hover { background: #F8FAFC; }

/* 필드 아래 작은 링크 (비밀번호를 잊으셨나요?) */
.field-find { font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.field-find:hover { color: var(--ink); text-decoration: underline; }
.auth-find { text-align: center; margin-top: 16px; }

/* 구분선 */
.auth-or {
    display: flex; align-items: center; gap: 14px;
    margin: 26px 0; color: #94A3B8; font-size: 12.5px; font-weight: 600;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* 소셜 로그인 */
.social { display: flex; flex-direction: column; gap: 11px; }
.social-btn {
    height: 52px; border-radius: var(--r-md); cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: filter 0.15s, background 0.15s;
}
.social-btn svg { flex: none; }
.social-google { background: #fff; border-color: var(--line); color: var(--ink); }
.social-google:hover { background: #F8FAFC; }
.social-naver { background: #03C75A; color: #fff; }
.social-naver:hover { filter: brightness(0.95); }
.social-kakao { background: #FEE500; color: #191919; }
.social-kakao:hover { filter: brightness(0.96); }
.social-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* 소셜 준비 중 안내 */
.social-note {
    display: none; text-align: center; font-size: 13.5px; color: var(--muted);
    background: #F8FAFC; border: 1.5px solid var(--line); border-radius: 10px;
    padding: 11px 14px; margin-top: 12px;
}
.social-note.show { display: block; animation: fadeUp 0.25s ease; }

/* 안내 상태 (비번찾기 등) */
.notice-mark {
    width: 74px; height: 74px; border-radius: 50%; background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
    margin: 4px auto 26px; color: var(--accent);
}
.notice-box {
    background: #F8FAFC; border: 1.5px solid var(--line); border-radius: var(--r-md);
    padding: 18px 20px; text-align: center; margin-bottom: 14px;
}
.notice-box .t { font-size: 13px; color: var(--muted); margin-bottom: 6px; word-break: keep-all; }
/* 한글 안내는 띄어쓰기 기준으로 줄바꿈(keep-all), 긴 이메일 주소는 필요 시에만 줄바꿈(overflow-wrap) */
.notice-box .em { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; word-break: keep-all; overflow-wrap: anywhere; }
.notice-box .em a { color: var(--accent); text-decoration: none; }
.notice-box .em a:hover { text-decoration: underline; }

/* 하단 링크 */
.auth-foot { text-align: center; margin-top: 28px; font-size: 14.5px; color: var(--muted); }
.auth-foot a { color: var(--ink); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { color: var(--accent); }
.auth-foot.links { display: flex; align-items: center; justify-content: center; gap: 14px; }
.auth-foot.links a { color: var(--muted); font-weight: 600; }
.auth-foot.links a:hover { color: var(--accent); }
.auth-foot .d { color: #CBD5E1; }

/* ═══════════════ 회원가입 (register) ═══════════════ */

.auth--wide { max-width: 520px; }   /* 가입 폼 */
.auth--md { max-width: 460px; }     /* 가입 완료 */

/* 스테퍼 */
.stepper { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 30px; }
.stepper .st { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; }
.stepper .st .c {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    background: #E2E8F0; color: #94A3B8;
    transition: background 0.25s, color 0.25s;
}
.stepper .st .l { font-size: 12.5px; font-weight: 600; color: #94A3B8; transition: color 0.25s; }
.stepper .st.active .c { background: var(--accent); color: #fff; }
.stepper .st.active .l { color: var(--ink); font-weight: 700; }
.stepper .st.done .c { background: var(--accent-soft); color: var(--accent); }
.stepper .st.done .l { color: var(--muted); }
.stepper .bar { flex: 1; max-width: 72px; height: 2px; background: #E2E8F0; margin-top: 16px; transition: background 0.25s; }
.stepper .bar.done { background: var(--accent); }

/* 스텝 패널 */
.panel { display: none; }
.panel.show { display: block; animation: fadeUp 0.3s ease; }
.panel h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; }
.panel .sub { font-size: 14.5px; color: var(--muted); margin-top: 8px; margin-bottom: 28px; word-break: keep-all; overflow-wrap: break-word; }

.field label .req { color: var(--danger); }
.field label .opt { color: var(--muted); font-weight: 500; }

/* 이메일 중복 확인 */
.field-row { display: flex; gap: 10px; }
.field-row .field-input { flex: 1; }
.btn-check {
    flex: none; height: 52px; padding: 0 18px;
    font: inherit; font-size: 14px; font-weight: 700;
    color: var(--accent-deep); background: var(--accent-soft);
    border: none; border-radius: var(--r-md); cursor: pointer;
    transition: filter 0.15s;
}
.btn-check:hover { filter: brightness(0.96); }
.btn-check:disabled { opacity: 0.55; cursor: default; }

/* 성공 메시지 */
.ok-msg { display: none; font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 7px; }
.ok-msg.show { display: block; }

/* 비밀번호 규칙 실시간 체크리스트 — 입력할 때마다 규칙별 충족 여부 표시 */
.pwcheck { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 10px; padding: 0; list-style: none; }
.pwcheck li {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: #94A3B8;
    transition: color 0.15s;
}
.pwcheck li svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.45; transition: opacity 0.15s; }
.pwcheck li.met { color: var(--accent); }
.pwcheck li.met svg { opacity: 1; }
/* '다음' 검증 실패 시 아직 충족 못한 항목을 빨강으로 강조 */
.field.invalid .pwcheck li:not(.met) { color: var(--danger); }
.field.invalid .pwcheck li:not(.met) svg { opacity: 0.7; }

/* 약관 동의 (스크롤 박스 + 원형 체크) */
.agree-all {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 4px 0 16px; border-bottom: 1.5px solid var(--ink);
    margin-bottom: 24px; cursor: pointer;
}
.agree-all .t { font-size: 16px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; word-break: keep-all; }
.agree-sec { margin-bottom: 22px; }
.agree-sec-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-bottom: 12px; cursor: pointer;
}
.agree-sec-head .t { font-size: 15.5px; font-weight: 800; word-break: keep-all; overflow-wrap: break-word; }
.agree-sec-head .t .req { font-size: 13px; font-weight: 700; color: var(--accent); margin-left: 8px; }
.agree-box {
    height: 150px; overflow-y: auto;
    background: #F8FAFC; border: 1.5px solid var(--line); border-radius: var(--r-md);
    padding: 16px 18px; font-size: 13px; line-height: 1.75; color: #475569;
    word-break: keep-all;
}
.agree-box b { color: var(--ink); }
.agree-box p + p { margin-top: 10px; }

.ccheck {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid #CBD5E1; background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #CBD5E1; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ccheck.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 스텝 이동 버튼 */
.panel-btns { display: flex; gap: 12px; margin-top: 28px; }
.btn-next {
    flex: 2; height: 54px;
    font: inherit; font-size: 16.5px; font-weight: 700; color: #fff;
    background: var(--accent); border: none; border-radius: var(--r-md); cursor: pointer;
    transition: background 0.15s, transform 0.15s, opacity 0.15s;
}
.btn-next:hover { background: var(--accent-deep); }
.btn-next:active { transform: scale(0.99); }
.btn-next:disabled { opacity: 0.4; cursor: not-allowed; background: var(--accent); }
.btn-prev {
    flex: 1; height: 54px;
    font: inherit; font-size: 16px; font-weight: 700; color: var(--ink);
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer;
    transition: background 0.15s;
}
.btn-prev:hover { background: #F8FAFC; }

/* ═══════════════ 가입 완료 (signup_complete) ═══════════════ */

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

.done-card {
    background: var(--surface); border-radius: var(--r-lg);
    box-shadow: var(--shadow-rest); padding: 52px 40px 44px;
    text-align: center;
}
.done-mark { width: 92px; height: 92px; margin: 0 auto 28px; animation: pop 0.5s ease 0.15s backwards; }
.done-mark circle {
    fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5;
    stroke-dasharray: 283; stroke-dashoffset: 283;
    animation: draw 0.9s ease forwards 0.2s;
}
.done-mark path {
    fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: draw 0.45s ease forwards 1.0s;
}
.done-card h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.7px; word-break: keep-all; }
.done-card .sub {
    font-size: 15.5px; color: var(--muted); line-height: 1.7;
    margin-top: 14px; word-break: keep-all;
}
.done-card .sub b { color: var(--accent); font-weight: 700; }
.done-btns { display: flex; flex-direction: column; gap: 11px; margin-top: 32px; }
.btn-primary-lg {
    height: 54px; display: flex; align-items: center; justify-content: center;
    font-size: 16.5px; font-weight: 700; color: #fff; text-decoration: none;
    background: var(--accent); border-radius: var(--r-md);
    transition: background 0.15s, transform 0.15s;
}
.btn-primary-lg:hover { background: var(--accent-deep); }
.btn-primary-lg:active { transform: scale(0.99); }

@media (max-width: 480px) {
    .auth-card { padding: 28px 22px; }
    .auth-head h1 { font-size: 26px; }
    .panel h2 { font-size: 21px; }
    .stepper .st { width: 72px; }
    .stepper .bar { max-width: 40px; }
    .done-card { padding: 40px 24px 34px; }
    .done-card h1 { font-size: 23px; }
}