/* ══════════════════════════════════════════════════════════════════════════
   로그인 · 회원가입 화면 (2026-08-19 리뉴얼)
   좌: 브랜드 패널(사진 + 한 줄 카피) / 우: 입력 카드.  모바일은 한 줄로 접힌다.
   ⚠ 브랜드 패널은 사진 위라 항상 다크다 → 색을 직접 지정한다(토큰 금지).
     입력 카드 쪽은 반대로 토큰만 써서 라이트/다크를 그대로 따라간다.
   ⚠ 폼 요소(.ro-field/.ro-checkbox/_SocialAuth)는 account.css 가 이미 스타일을 갖고 있다.
     여기서는 그 위에 레이아웃과 마감만 얹는다 — 중복 정의하지 말 것.
   ⚠ 전역 `section { padding: 80px 0 }` 을 상속하므로 padding 을 직접 리셋한다.
   ══════════════════════════════════════════════════════════════════════════ */

.ro-auth {
    padding: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: calc(100svh - var(--ro-hdr-h, 64px));
    background: var(--ro-bg, #fff);
}

/* ── 왼쪽: 브랜드 패널 ────────────────────────────────────────────────── */
.ro-auth__brand {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(40px, 5vw, 72px);
    color: #fff;
    background: #0b1220;
}
.ro-auth__brand::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: url("/img/hero/home-runners-1280.webp");
    background-size: cover; background-position: 58% 40%;
}
.ro-auth__brand::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(160deg, rgba(5,9,16,.9) 0%, rgba(5,9,16,.62) 45%, rgba(5,9,16,.82) 100%);
}
.ro-auth__brand > * { position: relative; z-index: 2; }

.ro-auth__logo { display: inline-block; }
.ro-auth__logo img { display: block; height: 34px; width: auto; }

.ro-auth__slogan {
    margin: clamp(24px, 3vw, 40px) 0 0;
    font-size: clamp(26px, 2.6vw, 40px); font-weight: 900;
    line-height: 1.24; letter-spacing: -.03em; word-break: keep-all;
    text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.ro-auth__slogan em { font-style: normal; color: #a8e02f; }
.ro-auth__sub {
    margin: 14px 0 0; max-width: 34ch;
    font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.8); word-break: keep-all;
}

.ro-auth__points { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 12px; }
.ro-auth__points li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.92); }
.ro-auth__points svg { width: 20px; height: 20px; flex-shrink: 0; color: #a8e02f; }

.ro-auth__mascot {
    position: absolute; right: clamp(24px, 3vw, 48px); bottom: clamp(20px, 3vw, 40px);
    z-index: 2; width: clamp(72px, 8vw, 108px); height: auto;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

/* ── 오른쪽: 입력 패널 ────────────────────────────────────────────────── */
.ro-auth__panel {
    display: flex; align-items: center; justify-content: center;
    padding: clamp(28px, 4vw, 64px) clamp(16px, 4vw, 48px);
    background: var(--ro-bg, #fff);
}
.ro-auth__card { width: 100%; max-width: 400px; }

.ro-auth__title {
    margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 900;
    letter-spacing: -.03em; color: var(--ro-text, #1a2233);
}
.ro-auth__lede {
    margin: 10px 0 clamp(22px, 2.6vw, 30px);
    font-size: 14px; line-height: 1.65; color: var(--ro-text-sub, #64748b); word-break: keep-all;
}

/* 알림(세션 만료·오류) */
.ro-auth__alert {
    margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--ro-danger-200, #fecaca);
    background: var(--ro-danger-50, #fef2f2);
    color: var(--ro-danger-700, #b91c1c);
    font-size: 13.5px; line-height: 1.6;
}
.ro-auth__alert--warn {
    border-color: var(--ro-warn-200, #fed7aa);
    background: var(--ro-warn-50, #fff7ed);
    color: var(--ro-warn-800, #9a3412);
}
.ro-auth__alert small { display: block; margin-top: 3px; font-size: 12px; opacity: .85; }

/* 유지/비밀번호 찾기 줄 */
.ro-auth__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 4px 0 20px;
}
.ro-auth__link { font-size: 13px; font-weight: 600; color: var(--ro-text-sub, #64748b); text-decoration: none; }
.ro-auth__link:hover { color: var(--ro-primary-600, #3b6ef5); text-decoration: underline; }

/* 구분선 — "간편로그인" */
.ro-auth__divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0 16px;
    font-size: 12.5px; font-weight: 700; color: var(--ro-text-sub, #94a3b8);
}
.ro-auth__divider::before,
.ro-auth__divider::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--ro-border, #e6e9f0);
}

/* 가입 유도 */
.ro-auth__signup {
    margin-top: 22px; padding: 14px; border-radius: 14px;
    border: 1px solid var(--ro-border, #e6e9f0);
    background: var(--ro-surface, #fff);
    text-align: center; font-size: 13.5px; color: var(--ro-text-sub, #64748b);
}
.ro-auth__signup a { font-weight: 800; color: var(--ro-primary-600, #3b6ef5); text-decoration: none; }
.ro-auth__signup a:hover { text-decoration: underline; }

.ro-auth__legal {
    margin-top: 18px; font-size: 11.5px; line-height: 1.7;
    color: var(--ro-text-sub, #94a3b8); text-align: center;
}
.ro-auth__legal a { color: inherit; text-decoration: underline; }

/* ── 모바일 ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ro-auth { grid-template-columns: 1fr; min-height: 0; }
    /* 브랜드 패널은 사진 띠로 접는다 — 세로 공간을 폼에 양보한다 */
    .ro-auth__brand {
        padding: 26px 20px 24px;
        min-height: 190px; justify-content: flex-end;
    }
    .ro-auth__brand::before { background-position: 60% 34%; }
    .ro-auth__slogan { margin-top: 14px; font-size: clamp(22px, 6.4vw, 28px); }
    .ro-auth__sub { display: none; }
    .ro-auth__points { display: none; }
    .ro-auth__mascot { width: 64px; right: 16px; bottom: 14px; }
    .ro-auth__panel { padding: 26px 16px 44px; align-items: flex-start; }
    .ro-auth__card { max-width: 440px; }
}

/* 다크 — 카드 주변이 흰색으로 뜨지 않게 표면만 맞춘다 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ro-auth,
    :root:not([data-theme="light"]) .ro-auth__panel { background: var(--ro-bg, #0d1117); }
    :root:not([data-theme="light"]) .ro-auth__signup { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.10); }
    :root:not([data-theme="light"]) .ro-auth__divider::before,
    :root:not([data-theme="light"]) .ro-auth__divider::after { background: rgba(255,255,255,.12); }
}
:root[data-theme="dark"] .ro-auth,
:root[data-theme="dark"] .ro-auth__panel { background: var(--ro-bg, #0d1117); }
:root[data-theme="dark"] .ro-auth__signup { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.10); }
:root[data-theme="dark"] .ro-auth__divider::before,
:root[data-theme="dark"] .ro-auth__divider::after { background: rgba(255,255,255,.12); }