/* KoreaGenie 리뉴얼 로그인/회원가입 (집중형) — 확정 시안 docs/design/auth-v3.html [P6-1] */
/* md3-tokens.css / md3-components.css 토큰·컴포넌트 재사용. 인라인 style 금지. */

/* ===== 집중형 헤더 (로고 + 언어) ===== */
.auth-top {
    display: flex;
    align-items: center;
    height: 64px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 16px;
}
.auth-header {
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
}
.auth-top .logo img { height: 32px; display: block; }
.auth-top .sp { flex: 1; }

/* ===== 본문 래퍼 / 카드 ===== */
.auth-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
}
.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--md-surface-container);
    border-radius: var(--r-xl);
    padding: 32px;
}
.auth-h {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}
.auth-sub {
    text-align: center;
    color: var(--md-on-surface-variant);
    font-size: .9rem;
    margin: 4px 0 22px;
}

/* ===== 로그인/회원가입 탭 ===== */
.auth-tabs {
    display: flex;
    background: var(--md-surface-container-high);
    border-radius: var(--r-full);
    padding: 4px;
    margin-bottom: 22px;
}
.auth-tabs button {
    flex: 1;
    min-height: 44px;
    border-radius: var(--r-full);
    font-weight: 600;
    color: var(--md-on-surface-variant);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.auth-tabs button.sel {
    background: var(--md-primary);
    color: #fff;
}

/* ===== 소셜 버튼 ===== */
.social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 4px;
}
.social .sb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--r-full);
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-weight: 500;
    font-size: .92rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
.social .sb .slogo {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}
.social .sb .slogo svg { display: block; }

/* ===== 구분선 ===== */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--md-on-surface-variant);
    font-size: .8rem;
    margin: 18px 0;
}
.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--md-outline-variant);
}

/* ===== 폼 보조 행 ===== */
.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    margin: -4px 0 14px;
}
.row-between a {
    color: var(--md-primary);
    font-weight: 600;
    text-decoration: none;
}
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--md-on-surface-variant);
    cursor: pointer;
}
.check input {
    width: 18px;
    height: 18px;
    accent-color: var(--md-primary);
}
.check-agree { margin: 2px 0 14px; }

/* ===== 로그인 실패 메시지 ===== */
.auth-error {
    background: var(--md-error-container, rgba(231, 76, 60, .1));
    color: var(--md-on-error-container, #b3261e);
    border-radius: var(--r-sm);
    padding: 12px 16px;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 14px;
}

/* ===== 푸터 안내 ===== */
.auth-foot {
    text-align: center;
    font-size: .88rem;
    color: var(--md-on-surface-variant);
    margin-top: 18px;
}
.auth-foot a {
    color: var(--md-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-bottom {
    border-top: 1px solid var(--md-outline-variant);
    padding: 20px 0;
    text-align: center;
    color: var(--md-on-surface-variant);
    font-size: .8rem;
}
.auth-bottom a { color: var(--md-on-surface-variant); }

/* ===== 비밀번호 재설정 3스텝 스텝퍼 — 확정 시안 docs/design/reset-v3.html [P6-2] ===== */
.steps-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 22px;
    flex-wrap: wrap;
}
.steps-top .s {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--md-on-surface-variant);
}
.steps-top .s .n {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--md-outline);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}
.steps-top .s.active { color: var(--md-on-surface); }
.steps-top .s.active .n {
    background: var(--md-primary);
    color: #fff;
    border-color: transparent;
}
.steps-top .bar {
    flex: 1;
    height: 1px;
    background: var(--md-outline-variant);
    min-width: 20px;
}

/* 시안: 스텝퍼 중앙 정렬 + 짧은 연결 바 (인라인 style 대체) */
.reset-steps { justify-content: center; }
.reset-steps .bar { max-width: 30px; }

/* 시안: 단계 안내 문구 (좌측 정렬, 입력 아래) */
.reset-hint {
    margin: 0 0 16px;
    text-align: left;
}

/* ===== 소셜 가입(register-social) 전용 ===== */
.row.gx { display: flex; gap: 12px; }
.row.gx > * { flex: 1; min-width: 0; }
.field-readonly input { background: var(--md-surface-variant); color: var(--md-on-surface-variant); cursor: default; }
.field-select { margin-bottom: 16px; text-align: left; }
.field-select > label { display: block; margin-bottom: 6px; font-size: .82rem; color: var(--md-on-surface-variant); }
.field-select select {
    width: 100%; padding: 14px 16px; border: 1px solid var(--md-outline);
    border-radius: 8px; background: var(--md-surface); color: var(--md-on-surface);
    font-size: 1rem; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23625b71' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.field-select select:focus { outline: none; border: 2px solid var(--md-primary); padding: 13px 15px; }
.rs-agree-all-row { font-weight: 600; margin-bottom: 8px; }
.rs-policy { border: 1px solid var(--md-outline-variant); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.rs-policy-head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 8px 14px;
}
.rs-policy-head .check { margin: 0; flex: 1; }
.rs-policy-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.rs-policy-toggle .material-symbols-rounded { color: var(--md-on-surface-variant); transition: transform .2s; }
.rs-policy-toggle[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }
.rs-policy-body { max-height: 240px; overflow-y: auto; padding: 12px 14px; border-top: 1px solid var(--md-outline-variant); font-size: .82rem; color: var(--md-on-surface-variant); line-height: 1.5; }
.auth-center { text-align: center; }
.success-ic { display: flex; justify-content: center; margin-bottom: 8px; }
.success-ic .material-symbols-rounded { font-size: 56px; color: var(--md-primary); }