@charset "utf-8";

/* RLCNF Auth — design-system.md §3.9 (로그인 / 회원가입 / 찾기 / 가입 결과)
 * 셸(.rl-mnav-enabled .at-container) 안 본문 단일 출처. wrapper 자체는 좌우 padding·max-width를
 * 셸에 위임. 비카드 요소만 padding-inline: var(--rl-sp-1) — 형제 페이지(rl_note_archive·
 * rl_mock_result·rl_quick_archive)와 동일 컨벤션.
 * 토큰만 사용. raw hex 0건, 임의 px은 §8.5.3 P1~P4 + §3.9.6 P2 메트릭.
 * 소셜 버튼은 modal.css의 .rl-btn-social 단일 출처 재사용.
 */

/* ── §3.9.1 페이지 레이아웃 ── */

.rl-auth-page {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-6);
    font-family: var(--rl-font-family);
    color: var(--rl-text);
}

/* ── 헤더(.rl-archive-header 패턴 정합) ── */

.rl-auth-hero {
    padding-inline: var(--rl-sp-1);
}
.rl-auth-hero__title {
    font-size: var(--rl-fs-h2);
    font-weight: 700;
    color: var(--rl-ink);
    letter-spacing: var(--rl-ls-h2);
    margin: 0 0 var(--rl-sp-2);
    line-height: var(--rl-lh-snug);
}
.rl-auth-hero__lead {
    font-size: var(--rl-fs-body-sm);
    color: var(--rl-text-3);
    line-height: var(--rl-lh-normal);
    margin: 0;
}

/* ── 중앙 액션 스택 (카드) ── */

.rl-auth-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-6);
    background: var(--rl-surface-elev);
    border-radius: var(--rl-r-lg);
    padding: var(--rl-sp-6) var(--rl-sp-5);
    border: 1px solid var(--rl-line-2);
}
.rl-auth-stack__socials {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-3);
}

/* "또는" 디바이더 — 좌우 line + 가운데 텍스트 */
.rl-auth-divider {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-3);
    color: var(--rl-text-3);
    font-size: var(--rl-fs-caption);
}
.rl-auth-divider::before,
.rl-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rl-line-2);
}

/* ── 보조 폼 (ID/PW · 가입 필드) ── */

.rl-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-3);
}
.rl-auth-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-1);
}
/* hidden 행은 확실히 숨김 — [hidden]의 UA display:none이 위 display:flex에 specificity로 밀리는 것 방지
   (소셜 이메일 요약/입력 토글에서 hidden 처리). */
.rl-auth-form__row[hidden] {
    display: none;
}
.rl-auth-form__label {
    padding-inline: var(--rl-sp-1);
    font-size: var(--rl-fs-label);
    color: var(--rl-text-2);
    font-weight: 500;
}
.rl-auth-form__req {
    color: var(--rl-bad);
    margin-left: var(--rl-sp-1);
}
.rl-auth-form__input {
    width: 100%;
    height: var(--rl-h-btn-md);
    padding: 0 var(--rl-sp-4);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-md);
    background: var(--rl-surface);
    color: var(--rl-text);
    font-size: var(--rl-fs-body);
    font-family: inherit;
    transition: border-color var(--rl-dur-micro) var(--rl-ease-out),
                box-shadow var(--rl-dur-micro) var(--rl-ease-out);
}
.rl-auth-form__input::placeholder {
    color: var(--rl-text-4);
}
.rl-auth-form__input:focus {
    outline: none;
    border-color: var(--rl-primary);
    box-shadow: 0 0 0 3px var(--rl-primary-soft);
}
/* §3.2.2 Textarea — input 토큰 공유, 높이 가변(min 2×버튼 높이) + 세로 리사이즈. */
textarea.rl-auth-form__input {
    height: auto;
    min-height: calc(var(--rl-h-btn-md) * 2);
    padding: var(--rl-sp-3) var(--rl-sp-4);
    line-height: var(--rl-lh-normal);
    resize: vertical;
}
/* §3.2.3 Select — native picker(모바일) + 커스텀 우측 chevron(OS 기본 화살표는 위치 제어 불가라
   appearance 제거 후 rl_icon_chevron_down을 wrap에 절대배치). input과 동일 토큰. */
.rl-auth-form__select-wrap {
    position: relative;
}
select.rl-auth-form__select {
    width: 100%;
    height: var(--rl-h-btn-md);
    /* 우측은 chevron(14) + 좌우 여백 확보 — 텍스트가 chevron을 침범하지 않게 sp-8(48) 예약. */
    padding: 0 var(--rl-sp-8) 0 var(--rl-sp-4);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-md);
    background: var(--rl-surface);
    color: var(--rl-text);
    font-size: var(--rl-fs-body);
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--rl-dur-micro) var(--rl-ease-out),
                box-shadow var(--rl-dur-micro) var(--rl-ease-out);
}
select.rl-auth-form__select:focus {
    outline: none;
    border-color: var(--rl-primary);
    box-shadow: 0 0 0 3px var(--rl-primary-soft);
}
select.rl-auth-form__select.is-invalid {
    border-color: var(--rl-bad);
}
/* chevron — 우측 sp-4(14) 안쪽으로 띄워 모서리에 붙지 않게. 보조 톤(text-4), 클릭 통과. */
.rl-auth-form__select-chevron {
    position: absolute;
    top: 50%;
    right: var(--rl-sp-4);
    transform: translateY(-50%);
    display: inline-flex;
    pointer-events: none;
    color: var(--rl-text-4);
}
/* 힌트는 가입 흐름의 보조 정보 — 시각 톤 약화로 "주의사항 많은 서비스" 인상 방지.
   에러(__error)와 톤 구분 명확: 에러는 캡션+bad, 힌트는 micro+text-4. */
.rl-auth-form__hint {
    margin: 0;
    padding-inline: var(--rl-sp-1);
    font-size: var(--rl-fs-micro);
    color: var(--rl-text-4);
}
.rl-auth-form__error {
    margin: 0;
    padding-inline: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    color: var(--rl-bad);
    line-height: var(--rl-lh-snug);
}
/* invalid 상태 input — bad 톤 border + soft focus ring으로 시각 위치 단서. */
.rl-auth-form__input.is-invalid,
.rl-auth-page--center .rl-auth-form__input.is-invalid,
#captcha.captcha #captcha_key.is-invalid {
    border-color: var(--rl-bad) !important;
}
.rl-auth-form__input.is-invalid:focus,
.rl-auth-page--center .rl-auth-form__input.is-invalid:focus,
#captcha.captcha #captcha_key.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--rl-bad-soft);
}

/* 소셜 이메일 요약 — 소셜이 정상 이메일 제공 시 input 대신 "{email}으로 시작해요 · 변경" 확인 행.
   마지막 확인 단계 톤(가벼운 surface-2 행), '변경'은 primary 텍스트 액션. */
.rl-auth-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rl-sp-3);
    margin: 0;
    padding: var(--rl-sp-3) var(--rl-sp-4);
    background: var(--rl-surface-2);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-md);
    font-size: var(--rl-fs-body-sm);
    color: var(--rl-text-2);
    line-height: var(--rl-lh-snug);
}
.rl-auth-summary__text {
    min-width: 0;
    word-break: break-all;
}
.rl-auth-summary__text strong {
    color: var(--rl-text);
    font-weight: 600;
}
.rl-auth-summary__edit {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--rl-primary);
    font-size: var(--rl-fs-caption);
    font-weight: 600;
    cursor: pointer;
    padding: var(--rl-sp-1) var(--rl-sp-2);
    font-family: inherit;
}
.rl-auth-summary__edit:hover,
.rl-auth-summary__edit:focus-visible {
    text-decoration: underline;
}

/* submit 버튼 — design-system §3.1 primary 톤 정합 */
.rl-auth-form__submit {
    position: relative; /* .is-loading 스피너(::after) 기준 */
    /* 텍스트 중앙 — button뿐 아니라 <a>(완료화면 '확인' 등)로 쓰여도 좌측·상단 정렬 깨짐 없이 중앙. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--rl-h-btn-md);
    border: none;
    border-radius: var(--rl-r-md);
    background: var(--rl-primary);
    color: var(--rl-on-primary);
    font-size: var(--rl-fs-body);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--rl-dur-micro) var(--rl-ease-out),
                transform var(--rl-dur-micro) var(--rl-ease-out);
    margin-top: var(--rl-sp-2);
}
.rl-auth-form__submit:hover {
    background: var(--rl-primary-hover);
}
.rl-auth-form__submit:active {
    transform: scale(0.99);
}
/* 비활성 — 이메일 미입력/필수 약관 미동의 시(소셜 가입 마무리). 사유는 버튼 아래 안내문.
   register_form 버튼은 비활성화되지 않으므로 영향 없음. */
.rl-auth-form__submit:disabled,
.rl-auth-form__submit:disabled:hover {
    background: var(--rl-line-2);
    color: var(--rl-text-4);
    cursor: not-allowed;
    transform: none;
}
/* 제출 진행 상태 — design-system §3.1.1 loading / §3.5.7 Spinner.
   라벨을 transparent로 비워 버튼 폭을 유지(레이아웃 점프 방지)하고 currentColor(on-primary)
   2px 링 스피너를 중앙에 회전. 폼 실제 submit 시점에만 .is-loading 부여(중복 클릭도 차단).
   `.rl-auth-page` 스코프로 page-scoped `.rl-auth-page--center .rl-auth-form__submit`(color 재지정)을 이긴다. */
.rl-auth-page .rl-auth-form__submit.is-loading {
    color: transparent;
    pointer-events: none;
}
.rl-auth-page .rl-auth-form__submit.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15em;
    height: 1.15em;
    margin: -0.575em 0 0 -0.575em;
    border: 2px solid var(--rl-on-primary);
    border-right-color: transparent;
    border-radius: var(--rl-r-full);
    animation: rl-auth-spin 0.7s linear infinite;
}
@keyframes rl-auth-spin {
    to { transform: rotate(360deg); }
}

.rl-auth-form__submit--secondary {
    background: var(--rl-surface);
    color: var(--rl-text);
    border: 1px solid var(--rl-line-2);
}
.rl-auth-form__submit--secondary:hover {
    background: var(--rl-surface-2);
}

/* Progressive reveal 확장 영역 — form gap(sp-5)을 내부 row 간격으로 그대로 흐르게.
   hidden 속성 유지 위해 :not([hidden])으로 visible 시에만 flex 적용. */
.rl-auth-form__more:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-5);
}
/* 모든 form row — scrollIntoView({block:'start'}) 시 sticky 앱바 + iOS safe-area 보정.
   progressive reveal·error scroll 등 모든 스크롤 트리거에 일괄 적용.
   safe-top dual-fallback(§2.9.1): 토큰 부재 셸에서도 raw env()로 회귀 방지. */
.rl-auth-form__row {
    scroll-margin-top: calc(var(--rl-safe-top, env(safe-area-inset-top, 0px)) + var(--rl-h-appbar, 52px) + var(--rl-sp-6));
}


/* ── 보조 링크 / 하단 안내 ── */

.rl-auth-foot {
    padding-inline: var(--rl-sp-1);
    text-align: center;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-4);
    line-height: var(--rl-lh-relaxed);
}
/* footer 안 약관 링크 — 시각 더 연하게, hit area 36 유지 (§3.1.5) */
.rl-auth-page--center .rl-auth-foot a.rl-auth-link,
.rl-auth-page--center .rl-auth-foot a.rl-auth-link:link,
.rl-auth-page--center .rl-auth-foot a.rl-auth-link:visited {
    font-size: var(--rl-fs-caption);
    font-weight: 400;
    color: var(--rl-text-4);
}
.rl-auth-page--center .rl-auth-foot a.rl-auth-link:hover,
.rl-auth-page--center .rl-auth-foot a.rl-auth-link:active {
    color: var(--rl-text-3);
}
.rl-auth-foot__hint {
    margin: 0 0 var(--rl-sp-2);
}
.rl-auth-foot__links {
    display: flex;
    justify-content: center;
    gap: var(--rl-sp-4);
    flex-wrap: wrap;
}
/* §3.1.5 Text Link Hit Area 정책 정합 — 박스화 패턴.
   메트릭: height 36 / padding 0 12 / radius 10 / fs-label 13 · 500 / surface-2 hover.
   text-decoration none (§1.14 a 앱형 도구 톤).
   specificity 함정 회피: `a.rl-auth-link:link/:visited/:hover/:active` 패턴으로 0,1,1 확보. */
a.rl-auth-link,
a.rl-auth-link:link,
a.rl-auth-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--rl-h-btn-sm);
    padding: 0 var(--rl-sp-3);
    border-radius: var(--rl-r-sm);
    font-size: var(--rl-fs-label);
    font-weight: 500;
    color: var(--rl-text-3);
    text-decoration: none;
    transition: background-color var(--rl-dur-micro) var(--rl-ease-out),
                color var(--rl-dur-micro) var(--rl-ease-out);
}
a.rl-auth-link:hover,
a.rl-auth-link:active {
    color: var(--rl-text-2);
    background: var(--rl-surface-2);
}
a.rl-auth-link:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: 2px;
}

.rl-auth-stack__aux {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--rl-sp-4);
    margin-top: var(--rl-sp-1);
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
    flex-wrap: wrap;
}
.rl-auth-stack__aux a {
    color: var(--rl-text-3);
}
.rl-auth-stack__aux a:hover {
    color: var(--rl-text-2);
}

/* ── §3.9.3 약관 동의 partial ── */

/* 약관 영역 — 가입 흐름의 부담 최소화 위해 외곽 padding·gap·구분선·체크박스 모두 압축.
   전체 동의는 구분선 대신 미세 padding-bottom으로만 약하게 분리. */
.rl-auth-terms {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-1);
    padding: var(--rl-sp-3);
    background: var(--rl-surface);
    border-radius: var(--rl-r-md);
    border: 1px solid var(--rl-line);
}
.rl-auth-terms__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rl-sp-2);
}
.rl-auth-terms__row--all {
    padding-bottom: var(--rl-sp-2);
    border-bottom: 1px solid var(--rl-line);
}
.rl-auth-terms__label {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-2);
    cursor: pointer;
    font-size: var(--rl-fs-body-sm);
    color: var(--rl-text);
    flex: 1;
    line-height: var(--rl-lh-snug);
}
.rl-auth-terms__label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rl-primary);
    margin: 0;
    flex-shrink: 0;
}
/* 개별 약관 텍스트 — 조용한 톤(400). 계약서 인상 회피, 전체 동의만 강조. */
.rl-auth-terms__text {
    color: var(--rl-text);
    font-weight: 400;
}
/* 전체 동의 마스터만 살짝 강조(600 — strong 기본 700보다 한 단계 낮춤). */
.rl-auth-terms__row--all strong {
    font-weight: 600;
}
/* 필수/선택은 미세 칩 라벨 — 약관 텍스트보다 시선 덜 끌도록 micro 톤. */
.rl-auth-terms__req,
.rl-auth-terms__opt {
    display: inline-block;
    padding: 0 var(--rl-sp-1);
    margin-right: var(--rl-sp-1);
    border-radius: var(--rl-r-xs);
    font-size: var(--rl-fs-micro);
    font-weight: 500;
    line-height: 1.6;
    vertical-align: baseline;
}
.rl-auth-terms__req {
    background: var(--rl-bad-soft);
    color: var(--rl-bad);
}
.rl-auth-terms__opt {
    background: var(--rl-surface-2);
    color: var(--rl-text-3);
}
/* 약관 섹션 인라인 에러 — 박스 안쪽 sp-1 위 띄움, 모달 대체 위치 단서. */
.rl-auth-terms__error {
    margin-top: var(--rl-sp-1);
}
/* 약관 섹션 자체도 scrollIntoView 시 safe-top + 앱바 보정 (form row와 동일 단일 출처). */
.rl-auth-terms {
    scroll-margin-top: calc(var(--rl-safe-top, env(safe-area-inset-top, 0px)) + var(--rl-h-appbar, 52px) + var(--rl-sp-6));
}
/* 약관 행 보조 액션 — 버튼처럼 강조하지 않고 "보기 ›" 가벼운 톤. 기본 상태 밑줄 없음(법률 문서 인상 회피). */
.rl-auth-terms__detail {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    background: transparent;
    border: none;
    color: var(--rl-text-3);
    font-size: var(--rl-fs-caption);
    cursor: pointer;
    padding: var(--rl-sp-1) var(--rl-sp-2);
    font-family: inherit;
}
/* chevron — 보조 톤(text-4, 연한 회색). "보기" 텍스트(text-3)보다 약하게 — 설정 메뉴 인상 회피. */
.rl-auth-terms__detail .rl-chevron-right {
    color: var(--rl-text-4);
    flex-shrink: 0;
}
/* hover/focus-visible만 a11y 어포던스로 톤 강조 + 약한 underline. 기본 노출엔 밑줄 없음. */
.rl-auth-terms__detail:hover,
.rl-auth-terms__detail:focus-visible {
    color: var(--rl-text-2);
    text-decoration: underline;
}

/* 약관 본문 — 풀스크린 바텀시트(.rl-sheet-modal #rlAuthTermsModal) 본문 long-content.
   시트 셸(.rl-sheet-container/-body/-footer)·슬라이드·occlusion·스크롤락은 modal.css + modal-util.js
   단일 출처(quick.php 해설 #explain-modal과 동일). 여기선 본문 타이포만 정의. */
/* 약관 본문 doc — 타이포·박스 리셋·줄바꿈은 terms-doc.css `.rl-terms-doc pre`(단일 출처)가 담당.
   파셜이 #rlAuthTermsModalBody에 .rl-terms-doc 부여 + terms-doc.css 적재 → 시트가 같은 규칙 공유.
   여기선 시트 컨텍스트 보정만: 헤더 아래 상단 호흡(좌우·하단 패딩은 .rl-sheet-body, 문서 패딩 .rl-terms-page는 시트 미적용). */
#rlAuthTermsModalBody {
    padding-top: var(--rl-sp-2);
}
/* 시트 footer 안 auth 제출 버튼 — footer 자체 padding이 상단 호흡 담당, 버튼 기본 margin-top 제거. */
.rl-sheet-footer .rl-auth-form__submit {
    margin-top: 0;
}

/* ──────────────────────────────────────────────
   §3.9.7 .rl-auth-page--center — Confident Korean Utility (centered Auth flows: login·password_lost)
   tonal 정합: 큰 hero 타이포 + lifted card + 톤된 input/submit.
   viewport 수직 fill(런치패드 중앙 배치)은 별도 .rl-auth-page--launchpad로 분리 — login만 추가 부여.
   login-only 자식 셀렉터(.rl-btn-social·.rl-auth-pw·.rl-auth-divider)는
   password_lost에 해당 자식이 없어 자연 비활성.
   ────────────────────────────────────────────── */

.rl-auth-page--center {
    gap: var(--rl-sp-4);
    padding-bottom: var(--rl-safe-bottom, env(safe-area-inset-bottom, 0px));
}

/* viewport vfill — login 한정 (런치패드 중앙 배치).
   82px = 앱바(52) + .at-content padding(6 + 24). safe-area-inset-top은 iOS 신 앱 transparent
   status bar에서 누적되어 별도 차감 필수. box-sizing: border-box로 padding을 min-height 안에
   포함시켜 content-box 기본값의 overflow 방지. password_lost는 폼 + captcha로 자연 높이를
   넘길 수 있어 viewport vfill 미적용 — 상단 정렬. */
.rl-auth-page--launchpad {
    box-sizing: border-box;
    min-height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    justify-content: center;
}
/* 키보드 열림(App Shell) — 런치패드 vfill·중앙정렬 해제. 중앙정렬 기준은 100dvh라 키보드로 줄어든
   .at-body(앱바↔키보드) 안에서 폼(카드 하단)을 키보드 뒤로 밀어낸다. 상단 정렬·자연 높이로 전환해
   App Shell 내부 스크롤이 포커스 입력을 키보드 위로 올린다(닫히면 원복). kb-open=#thema_wrapper 단일 출처. */
#thema_wrapper.rl-mnav-kb-open .rl-auth-page--launchpad {
    min-height: 0;
    justify-content: flex-start;
}

/* hero — display 타이포 + 수직 스택 (정렬은 modifier 추가에 따름).
   기본은 좌측 정렬(form 페이지 톤). launchpad가 함께 부여되면 중앙 정렬. */
.rl-auth-page--center .rl-auth-hero {
    display: flex;
    flex-direction: column;
    gap: var(--rl-sp-3);
}
.rl-auth-page--launchpad .rl-auth-hero {
    align-items: center;
    text-align: center;
}
.rl-auth-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: var(--rl-sp-1) var(--rl-sp-3);
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    border-radius: var(--rl-r-full);
    font-size: var(--rl-fs-caption);
    font-weight: 600;
    letter-spacing: var(--rl-ls-tight);
}
.rl-auth-hero__display {
    font-size: var(--rl-fs-h2);
    font-weight: 700;
    color: var(--rl-ink);
    letter-spacing: var(--rl-ls-h2);
    line-height: 1.25;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.rl-auth-page--center .rl-auth-hero__lead {
    font-size: var(--rl-fs-body);
    color: var(--rl-text-2);
    line-height: var(--rl-lh-relaxed);
    margin: 0;
}
/* form 페이지(launchpad 미부여) — 타이틀과 lead 간 시각 압축 + lead 톤 다운 */
.rl-auth-page--center:not(.rl-auth-page--launchpad) .rl-auth-hero {
    gap: var(--rl-sp-1);
}
.rl-auth-page--center:not(.rl-auth-page--launchpad) .rl-auth-hero__lead {
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
    line-height: var(--rl-lh-normal);
}

/* 카드 — 약한 컨테이너 톤. 상하 14 / 좌우 16 대칭.
   border line-2(약화) + shadow 제거 — 앱바·본문 셸과 "박스 안 박스" 시각 누적 회피. */
.rl-auth-page--center .rl-auth-stack {
    border-radius: var(--rl-r-xl);
    padding: var(--rl-sp-4) var(--rl-sp-5);
    border: 1px solid var(--rl-line-2);
}

/* 소셜 버튼 — h-btn-lg(52) + 로고+텍스트 한 묶음 가운데 정렬 (flex 한 줄) */
.rl-auth-page--center .rl-btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rl-sp-1);
    height: var(--rl-h-btn-lg);
    padding: 0 var(--rl-sp-5);
    border-radius: var(--rl-r-md);
    font-size: var(--rl-fs-h3);
    font-weight: 500;
    letter-spacing: var(--rl-ls-tight);
    line-height: 1;
}
.rl-auth-page--center .rl-btn-social__label {
    line-height: 1;
}
/* 아이콘 영역 28px 고정폭 (icon 24×24 안 가운데). 카카오 말풍선 시각 무게 흡수 → 텍스트 밀림 해소. */
.rl-auth-page--center .rl-btn-social__icon {
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rl-auth-page--center .rl-btn-social__icon svg {
    width: 24px;
    height: 24px;
}
/* 카카오는 brand 톤 유지(weight 600) — 1순위 CTA 시각 위계 */
.rl-auth-page--center .rl-btn-kakao {
    font-weight: 600;
}
/* modal.css의 `.rl-btn-social { margin-bottom: sp-2 }` cascade 차단 — V2는 flex gap만 사용 */
.rl-auth-page--center .rl-btn-social {
    margin-bottom: 0;
}

/* Google/Apple outline — 카카오(1순위 CTA) 양보를 위해 기본 border는 연하게 (line-2).
   텍스트도 한 톤 부드럽게 (text-2). hover/active 시에만 border 진하게 (text-4). */
.rl-auth-page--center .rl-btn-google {
    border-color: var(--rl-line-2);
    color: var(--rl-text-2);
}
.rl-auth-page--center .rl-btn-google:hover,
.rl-auth-page--center .rl-btn-google:active {
    border-color: var(--rl-text-4);
}

/* Apple 흰 outline 통일 — 검정 무게 회피.
   modal.css의 `.rl-btn-apple { color: var(--rl-on-primary) !important }` cascade를 V2 한정 override. */
.rl-auth-page--center .rl-btn-apple {
    background: var(--rl-surface-elev);
    color: var(--rl-text-2) !important;
    border: 1px solid var(--rl-line-2);
}
.rl-auth-page--center .rl-btn-apple:hover {
    background: var(--rl-surface-2);
    border-color: var(--rl-text-4);
    filter: none;
}
.rl-auth-page--center .rl-btn-apple:active {
    border-color: var(--rl-text-4);
}
.rl-btn-social__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rl-btn-social__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.rl-btn-social__label {
    text-align: left;
}
.rl-btn-social__badge {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--rl-sp-2);
    background: var(--rl-primary-soft);
    color: var(--rl-primary);
    border-radius: var(--rl-r-full);
    font-size: var(--rl-fs-micro);
    font-weight: 600;
    letter-spacing: var(--rl-ls-tight);
    line-height: var(--rl-lh-snug);
    opacity: 0.95;
}
/* 카카오 위 brand 토큰 — 추천 뱃지가 노란 위에서도 보이도록 surface-elev + primary text */
.rl-btn-kakao .rl-btn-social__badge {
    background: var(--rl-surface-elev);
    color: var(--rl-primary);
}

/* 카드 안 세로 흐름 — gap을 상하 padding과 동일(sp-3 12)로 통일 */
.rl-auth-page--center .rl-auth-stack {
    gap: var(--rl-sp-3);
}

/* "또는" divider — 약화 + margin 0 (stack.gap 16 그대로 흡수) */
.rl-auth-page--center .rl-auth-divider {
    margin: 0;
    font-size: var(--rl-fs-micro);
    font-weight: 500;
    color: var(--rl-text-4);
    letter-spacing: var(--rl-ls-tight);
}

/* 카드 안 마지막 약관 링크 행 — 보조 정보 톤 (시각 작게 + hit area 36 유지 §3.1.5) */
.rl-auth-stack__terms {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--rl-sp-1);
    color: var(--rl-text-4);
    font-size: var(--rl-fs-caption);
}
/* §3.1.5: 시각 크기와 hit area 분리 — 약관 링크 시각만 한 단계 더 약하게 */
.rl-auth-page--center .rl-auth-stack__terms a.rl-auth-link,
.rl-auth-page--center .rl-auth-stack__terms a.rl-auth-link:link,
.rl-auth-page--center .rl-auth-stack__terms a.rl-auth-link:visited {
    padding: 0 var(--rl-sp-2);
    font-size: var(--rl-fs-caption);
    font-weight: 400;
    color: var(--rl-text-4);
}
.rl-auth-page--center .rl-auth-stack__terms a.rl-auth-link:hover,
.rl-auth-page--center .rl-auth-stack__terms a.rl-auth-link:active {
    color: var(--rl-text-3);
}

/* ── §3.9.7 .rl-auth-pw — ID/PW disclosure 패턴 (native details/summary) ── */
.rl-auth-pw {
    margin: 0;
}
/* summary 토글 — 보조 톤 (소셜 우선). 접힘/펼침 모두 같은 행 */
.rl-auth-pw__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rl-sp-2);
    height: var(--rl-h-btn-sm);
    padding: 0 var(--rl-sp-4);
    border-radius: var(--rl-r-sm);
    cursor: pointer;
    list-style: none;
    color: var(--rl-text-2);
    font-size: var(--rl-fs-caption);
    font-weight: 500;
    letter-spacing: var(--rl-ls-tight);
    user-select: none;
    transition: background-color var(--rl-dur-micro) var(--rl-ease-out),
                color var(--rl-dur-micro) var(--rl-ease-out);
}
.rl-auth-pw__toggle::-webkit-details-marker { display: none; }
.rl-auth-pw__toggle::marker { content: ''; }
.rl-auth-pw__toggle:hover {
    color: var(--rl-text-2);
    background: var(--rl-surface-2);
}
.rl-auth-pw__toggle:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: 2px;
}
.rl-auth-pw__toggle-chevron {
    width: 10px;
    height: 10px;
    color: var(--rl-text-2);
    transition: transform var(--rl-dur-base) var(--rl-ease-out);
}
.rl-auth-pw[open] .rl-auth-pw__toggle-chevron {
    transform: rotate(180deg);
}

/* 펼침 시 폼/보조 링크 — toggle과 별도 그룹 간격 + fade-in 애니메이션 */
.rl-auth-pw[open] .rl-auth-form {
    margin-top: var(--rl-sp-4);
    animation: rl-auth-pw-reveal var(--rl-dur-base) var(--rl-ease-out) both;
}
.rl-auth-pw[open] .rl-auth-stack__aux {
    margin-top: var(--rl-sp-3);
    animation: rl-auth-pw-reveal var(--rl-dur-base) var(--rl-ease-out) both;
    animation-delay: 60ms;
}
@keyframes rl-auth-pw-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .rl-auth-pw[open] .rl-auth-form,
    .rl-auth-pw[open] .rl-auth-stack__aux {
        animation: none;
    }
}
.rl-auth-page--center .rl-auth-divider::before,
.rl-auth-page--center .rl-auth-divider::after {
    background: var(--rl-line);
}

/* 소셜 직후 작은 안내문 — 보조 톤 + 위아래 margin 음수로 stack.gap 부분 흡수 (시각 12px) */
.rl-auth-social-note {
    margin: calc(-1 * var(--rl-sp-1)) 0;
    text-align: center;
    font-size: var(--rl-fs-micro);
    color: var(--rl-text-4);
    line-height: var(--rl-lh-snug);
}

/* divider 직후 폼 그룹 라벨 — "기존 아이디로 로그인" 컨텍스트 회수 (보조 위계) */
.rl-auth-group-label {
    margin: 0;
    font-size: var(--rl-fs-caption);
    font-weight: 500;
    color: var(--rl-text-3);
    letter-spacing: var(--rl-ls-tight);
}
/* form 페이지 (password_lost) — 라벨↔입력 그룹 내(sp-1=4)와 그룹↔그룹(sp-5=20)
   비율 1:5로 group separation 신호. sp-6(24)은 다소 느슨해 한 단계 압축. */
.rl-auth-page--center .rl-auth-form {
    gap: var(--rl-sp-5);
}

/* launchpad(login)는 PW disclosure 보조 톤이라 row 간격 더 컴팩트(sp-2). */
.rl-auth-page--launchpad .rl-auth-form {
    gap: var(--rl-sp-2);
}
/* input — 진짜 흰색 surface-elev + line-2 border (disabled 인지 회피) */
.rl-auth-page--center .rl-auth-form__input {
    background: var(--rl-surface-elev);
    border-color: var(--rl-line-2);
    height: var(--rl-h-btn-md);
    font-size: var(--rl-fs-body-sm);
}
.rl-auth-page--center .rl-auth-form__input::placeholder {
    color: var(--rl-text-3);
}
.rl-auth-page--center .rl-auth-form__input:focus {
    background: var(--rl-surface-elev);
    border-color: var(--rl-primary);
}
/* Chrome/Safari autofill — 강제 파란 톤 차단 (선택 상태로 오인 회피) */
.rl-auth-page--center .rl-auth-form__input:-webkit-autofill,
.rl-auth-page--center .rl-auth-form__input:-webkit-autofill:hover,
.rl-auth-page--center .rl-auth-form__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--rl-surface-elev) inset !important;
    -webkit-text-fill-color: var(--rl-text) !important;
    caret-color: var(--rl-text);
}

/* ID/PW submit — filled primary CTA.
   접힌 상태에선 노출 안 되고, 펼침 시 "사용자가 아이디 로그인 의도"라 완료 버튼은 명확해야 함. */
.rl-auth-page--center .rl-auth-form__submit {
    height: var(--rl-h-btn-md);
    font-size: var(--rl-fs-body);
    font-weight: 600;
    letter-spacing: var(--rl-ls-tight);
    border-radius: var(--rl-r-md);
    margin-top: var(--rl-sp-2);
    box-shadow: none;
    background: var(--rl-primary);
    color: var(--rl-on-primary);
    border: none;
}
/* form 페이지(launchpad 미부여, password_lost·register_form) — 캡차 안내문/마지막
   필드 → 최종 CTA로 넘어가기 전 한 숨. sp-3(12)로 form gap보다 한 칸 위. */
.rl-auth-page--center:not(.rl-auth-page--launchpad) .rl-auth-form__submit {
    margin-top: var(--rl-sp-3);
}
.rl-auth-page--center .rl-auth-form__submit:hover {
    background: var(--rl-primary-hover);
}
/* 비활성(저장 게이트 등) — 위 center 배경 규칙이 base `.rl-auth-form__submit:disabled`를 specificity로 덮으므로
   같은 스코프에서 disabled 톤을 명시(0,3,0)해 되살린다(변경 전/무효 시 회색 비활성). */
.rl-auth-page--center .rl-auth-form__submit:disabled,
.rl-auth-page--center .rl-auth-form__submit:disabled:hover {
    background: var(--rl-line-2);
    color: var(--rl-text-4);
    cursor: not-allowed;
    transform: none;
}

/* 보조 링크 행 */
.rl-auth-page--center .rl-auth-stack__aux {
    justify-content: space-between;
    gap: var(--rl-sp-2);
    margin-top: 0;
}

/* foot 톤 정합 */
.rl-auth-page--center .rl-auth-foot {
    color: var(--rl-text-4);
}

/* sound_only — 시각 숨김 + 스크린리더 노출 */
.rl-auth-page--center .rl-auth-form__label.sound_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 가입 결과 vfill — 앱바 미노출 단독 화면, 카드를 viewport 수직 중앙에 배치.
   launchpad(login)는 앱바(52px)가 safe-area-top을 흡수하지만, 본 화면은 앱바가 없어
   safe-area-top/bottom을 섹션 패딩으로 직접 흡수한다(노치·홈 인디케이터 침범 차단).
   6px + sp-6 = 셸 .at-content의 padding-top/bottom 단일 출처(page-shell §2-b).
   box-sizing border-box로 safe-area 패딩을 min-height 안에 포함 → 합산 100dvh 유지. */
.rl-auth-page--vcenter {
    box-sizing: border-box;
    min-height: calc(100dvh - 6px - var(--rl-sp-6));
    justify-content: center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: var(--rl-safe-bottom, env(safe-area-inset-bottom, 0px));
}

/* ── 가입 결과 — Round Result Card 톤 정합 (centered hero + 단일 CTA) ── */
.rl-auth-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rl-sp-5);
    padding: var(--rl-sp-8) var(--rl-sp-5);
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-lg);
    text-align: center;
    /* 진입 시 살짝 떠오르며 등장 — 과한 축하 모션 없이 완료감만. 12px=sp-3, 200ms=dur-base. */
    animation: rl-auth-result-enter var(--rl-dur-base) var(--rl-ease-out) both;
}
@keyframes rl-auth-result-enter {
    from { opacity: 0; transform: translateY(var(--rl-sp-3)); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .rl-auth-result,
    .rl-auth-result__badge { animation: none; }
    .rl-auth-result__badge svg polyline { stroke-dashoffset: 0; animation: none; }
    .rl-auth-result__burst { display: none; }
}
/* 완료 체크 배지 — 파란 원 + 흰 체크. 제목 위 작은 원형(48=sp-8, 체크 24=sp-6).
   완료 핑: 배지가 살짝 튀어나오고(0.85→1.05→1) 체크 선이 그려진 뒤 작은 점 8개가
   0.5초 퍼졌다 사라진다. 폭죽/색종이/잔존 반짝이는 의도적으로 배제 — "완료됐고 다음 단계로"
   신호만. burst 점 위치 기준이 되도록 position: relative. */
.rl-auth-result__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rl-sp-8);
    height: var(--rl-sp-8);
    border-radius: var(--rl-r-full);
    background: var(--rl-primary);
    color: var(--rl-on-primary);
    animation: rl-auth-badge-pop var(--rl-dur-emph) var(--rl-ease-out) both;
}
@keyframes rl-auth-badge-pop {
    0%   { transform: scale(0.85); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.rl-auth-result__badge svg {
    width: var(--rl-sp-6);
    height: var(--rl-sp-6);
}
/* 체크 선 드로잉 — pathLength=1 정규화 후 dashoffset 1→0. pop 직후 살짝 지연. */
.rl-auth-result__badge svg polyline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rl-auth-check-draw var(--rl-dur-base) var(--rl-ease-out) 140ms both;
}
@keyframes rl-auth-check-draw {
    to { stroke-dashoffset: 0; }
}
/* 점 8개 확산 — 배지 중심에서 45° 간격으로 sp-6 만큼 퍼지며 페이드아웃. 각도는 인라인 --i. */
.rl-auth-result__burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.rl-auth-result__burst i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--rl-sp-1);
    height: var(--rl-sp-1);
    margin: calc(var(--rl-sp-1) / -2) 0 0 calc(var(--rl-sp-1) / -2);
    border-radius: var(--rl-r-full);
    background: var(--rl-primary);
    opacity: 0;
    animation: rl-auth-burst 500ms var(--rl-ease-out) 120ms both;
}
@keyframes rl-auth-burst {
    0%   { opacity: 0; transform: rotate(calc(var(--i) * 45deg)) translateY(0) scale(1); }
    30%  { opacity: 0.9; }
    100% { opacity: 0; transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--rl-sp-6) * -1)) scale(0.5); }
}
.rl-auth-result__title {
    font-size: var(--rl-fs-h2);
    font-weight: 700;
    color: var(--rl-ink);
    letter-spacing: var(--rl-ls-h2);
    margin: 0;
}
.rl-auth-result__lead {
    font-size: var(--rl-fs-body);
    color: var(--rl-text-2);
    margin: 0;
    line-height: var(--rl-lh-relaxed);
}
.rl-auth-result__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--rl-h-btn-lg);
    border-radius: var(--rl-r-md);
    background: var(--rl-primary);
    color: var(--rl-on-primary);
    font-size: var(--rl-fs-bodylg);
    font-weight: 600;
    text-decoration: none;
    margin-top: var(--rl-sp-2);
}
.rl-auth-result__cta:hover {
    background: var(--rl-primary-hover);
    color: var(--rl-on-primary);
}