/* ===== 기본 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, sans-serif;
    background: #fafafa;
    color: #18181b;
    padding-top: 60px;
}
a { text-decoration: none; color: inherit; }
input, button { font-family: inherit; }

/* ===== 공통 버튼 ===== */
.btn-main {
    display: block; width: 100%; height: 48px; border: none; border-radius: 10px;
    background: #e23744; color: #fff; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: background .15s; text-align: center; line-height: 48px;
}
.btn-main:hover { background: #c92f3a; }
.btn-ghost {
    height: 48px; padding: 0 22px; border: 1px solid #ddd; border-radius: 10px;
    background: #fff; color: #54545c; font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn-ghost:hover { background: #f6f6f7; }
.btn-sub {
    height: 44px; padding: 0 16px; border: none; border-radius: 8px; white-space: nowrap;
    background: #18181b; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-sub:hover { background: #333; }

/* ===== 인증 페이지 (로그인/회원가입) ===== */
.auth-page {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    width: 100%; min-height: calc(100vh - 60px); padding: 40px 20px;
}
.auth {
    display: flex; width: 100%; max-width: 880px; min-height: 540px;
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.06); border: 1px solid #ededee;
}
.auth-l {
    width: 42%; background: linear-gradient(150deg, #e23744, #b3202c);
    color: #fff; padding: 48px 40px; display: flex; flex-direction: column;
}
.auth-logo { font-size: 24px; font-weight: 800; color: #fff; }
.auth-tag { font-size: 27px; font-weight: 800; line-height: 1.35; margin-top: 40px; }
.auth-msg { font-size: 14px; line-height: 1.6; margin-top: 16px; opacity: .9; }
.spines { display: flex; gap: 7px; margin-top: auto; }
.spines .sp { width: 13px; height: 60px; background: rgba(255,255,255,.25); border-radius: 3px; }
.spines .sp:nth-child(odd) { height: 76px; background: rgba(255,255,255,.4); }

.auth-r { flex: 1; padding: 46px 44px; display: flex; flex-direction: column; }
.auth-bar { width: 40px; height: 4px; border-radius: 2px; background: #e23744; margin-bottom: 18px; }
.auth-title { font-size: 25px; font-weight: 800; }
.auth-desc { font-size: 13.5px; color: #9a9aa2; margin: 8px 0 26px; }

/* 입력 필드 (아이콘형) */
.ifield {
    display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 15px;
    border: 1px solid #e3e3e6; border-radius: 11px; margin-bottom: 13px; transition: border .15s;
}
.ifield:focus-within { border-color: #e23744; }
.ifield i { font-size: 19px; color: #9a9aa2; }
.ifield input { flex: 1; border: none; outline: none; font-size: 14.5px; background: none; }

.error-msg { color: #e23744; font-size: 13px; margin: 0 0 12px; }
.links { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; font-size: 13px; color: #54545c; }
.links a:hover { color: #e23744; }
.links span { color: #ddd; }
.bottom-link { text-align: center; margin-top: 20px; font-size: 13.5px; color: #54545c; }
.bottom-link a { color: #e23744; font-weight: 600; }

/* ===== 회원가입 스텝 ===== */
.stepper { display: flex; align-items: center; margin-bottom: 28px; }
.step-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-dot .num {
    width: 30px; height: 30px; border-radius: 50%; background: #ededee; color: #9a9aa2;
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.step-dot .lbl { font-size: 11.5px; color: #9a9aa2; }
.step-dot.active .num { background: #e23744; color: #fff; }
.step-dot.active .lbl { color: #18181b; font-weight: 600; }
.step-dot.done .num { background: #18181b; color: #fff; }
.step-bar { flex: 1; height: 2px; background: #ededee; margin: 0 8px 18px; }
.step-bar.done { background: #18181b; }

.step-panel { display: none; }
.step-panel.show { display: block; }
.step-actions { display: flex; gap: 10px; margin-top: 22px; }
.step-actions .btn-main { flex: 1; }

/* 약관 */
.terms { border: 1px solid #ededee; border-radius: 12px; padding: 18px; }
.terms-all { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; cursor: pointer; }
.terms-line { height: 1px; background: #ededee; margin: 14px 0; }
.terms-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #54545c; cursor: pointer; margin-bottom: 11px; }
.terms-item:last-child { margin-bottom: 0; }
.req-tag { color: #e23744; }
.opt-tag { color: #9a9aa2; }

/* 폼 행 */
.form-row { margin-bottom: 16px; }
.form-row > label { display: block; font-size: 13px; font-weight: 600; color: #18181b; margin-bottom: 7px; }
.form-row input[type=text], .form-row input[type=password],
.form-row input[type=email], .form-row input[type=date] {
    width: 100%; height: 46px; padding: 0 14px; border: 1px solid #e3e3e6;
    border-radius: 10px; font-size: 14px; outline: none; transition: border .15s;
}
.form-row input:focus { border-color: #e23744; }
.input-btn-wrap { display: flex; gap: 8px; }
.input-btn-wrap input { flex: 1; }
.gender-wrap { display: flex; gap: 20px; padding: 4px 0; }
.gender-wrap label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }

.check-msg { font-size: 12.5px; margin-top: 6px; }
.check-msg.available { color: #1a8a4a; }
.check-msg.unavailable { color: #e23744; }

/* ===== 카드형 페이지 (찾기/완료) ===== */
.card-page {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    width: 100%; min-height: calc(100vh - 60px); padding: 40px 20px;
}
.card-box {
    width: 100%; max-width: 400px; background: #fff; border-radius: 18px;
    border: 1px solid #ededee; box-shadow: 0 10px 40px rgba(0,0,0,.05);
    padding: 44px 36px; text-align: center;
}
.card-icon { font-size: 52px; margin-bottom: 14px; }
.card-icon.success { color: #1a8a4a; }
.card-title { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.card-desc { font-size: 14px; color: #54545c; line-height: 1.6; margin-bottom: 24px; }
.card-box .ifield { text-align: left; }
.card-box .btn-main { margin-bottom: 14px; }
.card-sub-link { font-size: 13.5px; color: #9a9aa2; }
.card-sub-link:hover { color: #e23744; }
.result-box {
    background: #f6f6f7; border: 1px solid #ededee; border-radius: 10px;
    padding: 18px; font-size: 20px; font-weight: 800; color: #18181b; margin-bottom: 24px;
}

/* ===== 마이페이지 ===== */
.mypage-layout {
    display: flex; gap: 28px; max-width: 1000px; margin: 0 auto; padding: 40px 20px;
    align-items: flex-start;
}
.mp-side {
    width: 220px; background: #fff; border: 1px solid #ededee; border-radius: 14px;
    padding: 22px 16px; flex-shrink: 0;
}
.mp-side-title { font-size: 16px; font-weight: 800; padding: 0 8px 14px; }
.mp-side a {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px;
    font-size: 14px; color: #54545c; cursor: pointer;
}
.mp-side a:hover { background: #f6f6f7; }
.mp-side a.active { background: #fdecee; color: #e23744; font-weight: 600; }
.mp-side a i { font-size: 19px; }

.mp-content {
    flex: 1; background: #fff; border: 1px solid #ededee; border-radius: 14px; padding: 32px 30px;
}
.mp-alert { padding: 12px 16px; border-radius: 9px; font-size: 13.5px; margin-bottom: 18px; }
.mp-alert.error { background: #fdecee; color: #e23744; }
.mp-alert.success { background: #eafaf0; color: #1a8a4a; }

.mp-profile { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #ededee; margin-bottom: 24px; }
.mp-avatar {
    width: 60px; height: 60px; border-radius: 50%; background: #e23744; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
}
.mp-profile-info { flex: 1; }
.mp-name { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; }
.mp-badge { font-size: 11px; font-weight: 600; color: #e23744; background: #fdecee; padding: 3px 9px; border-radius: 20px; }
.mp-id { font-size: 13px; color: #9a9aa2; margin-top: 3px; }
.mp-edit-btn {
    height: 38px; padding: 0 16px; border: 1px solid #e3e3e6; border-radius: 9px; background: #fff;
    font-size: 13px; font-weight: 600; color: #54545c; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.mp-edit-btn:hover { background: #f6f6f7; }

.mp-rows { display: flex; flex-direction: column; }
.mp-row { display: flex; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid #f3f3f4; }
.mp-label { width: 130px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #9a9aa2; }
.mp-label i { font-size: 17px; }
.mp-value { font-size: 14.5px; color: #18181b; line-height: 1.5; }
.mp-sub { font-size: 12.5px; color: #9a9aa2; }

.mp-edit { display: flex; flex-direction: column; gap: 16px; }
.mp-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.mp-field input[type=text], .mp-field input[type=password],
.mp-field input[type=email], .mp-field input[type=date] {
    width: 100%; height: 46px; padding: 0 14px; border: 1px solid #e3e3e6;
    border-radius: 10px; font-size: 14px; outline: none;
}
.mp-field input:focus { border-color: #e23744; }
.mp-optional { font-size: 12px; font-weight: 400; color: #9a9aa2; }
.mp-actions { display: flex; gap: 10px; margin-top: 8px; }
.mp-actions .btn-main { flex: 1; }
.mp-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid #ededee; text-align: right; }
.mp-delete2 { font-size: 13px; color: #9a9aa2; }
.mp-delete2:hover { color: #e23744; }

/* ===== 반응형 ===== */
@media (max-width: 768px) {
    .auth { flex-direction: column; max-width: 420px; }
    .auth-l { width: 100%; padding: 32px; }
    .spines { display: none; }
    .mypage-layout { flex-direction: column; }
    .mp-side { width: 100%; }
}