/* 인증 화면 공용 — 로그인 · 회원가입 · 아이디 찾기 · 비밀번호 찾기.
 *
 * ## 왜 네 화면이 한 파일인가
 *
 * 전에는 `login.css` · `register.css` · `forgot_id.css` · `forgot_password.css` 가 각각
 * 있었는데, 내용의 90% 가 **글자 하나까지 같은 복사본**이었다(입력 오버라이드·구분선·
 * Google 버튼·`.input-with-btn`·타이머·인증 배지). 복사본은 반드시 한쪽만 고쳐진다 —
 * 실제로 그렇게 어긋난 채로 굴러왔다. 네 화면은 **같은 한 벌의 껍데기**를 쓰므로 CSS 도
 * 한 벌만 둔다. 화면마다 다른 것은 마크업(어떤 필드가 있는지)이지 스타일이 아니다.
 *
 * ## 색은 여기서 정하지 않는다
 *
 * 전부 `hsl(var(--...))` 만 쓴다. 값은 `app-theme.css` 의 `body.app` 블록이 준다 —
 * 셸(토폴로지·llmopt)과 **같은 토큰**이라 로그인 화면이 본 화면과 저절로 같은 색이 된다.
 * 여기에 색을 직접 적으면 그 순간 다시 갈라진다.
 *
 * 로드 순서: `base.css` → `app-theme.css` → `accounts/auth.css`.
 */

/* ---- 껍데기 -------------------------------------------------------------- */
/* 카드를 화면 가운데에 둔다. 전에는 폭 480px 를 왼쪽 정렬로 세로 가득 채워서, 넓은
   모니터에서 내용이 화면 위쪽에 붙은 채 오른쪽이 통째로 비어 보였다. */
body.app.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    box-sizing: border-box;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    /* 머리의 틸 띠가 카드 모서리를 넘지 않게 한다. */
    overflow: hidden;
    box-shadow: 0 18px 48px hsl(0 0% 0% / 0.45);
}

/* 카드 머리 = 셸의 브랜드 띠. 규칙 자체는 `app-theme.css` 의 `.brand, .auth-head` 가 준다. */
.auth-head { justify-content: space-between; }

/* 틸 바탕 위의 보조 링크. 흰색을 조금 낮춰 브랜드보다 뒤로 물린다(3.9:1 이상 유지). */
.auth-head .auth-away {
    font-size: 12.5px;
    color: hsl(var(--primary-foreground) / 0.82);
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
/* `base.css` 의 `a:hover` (0,1,1) 가 이겨서 틸 바탕 위 글자가 틸이 되는 것을 막는다. */
.auth-head .auth-away:hover {
    color: hsl(var(--primary-foreground));
    text-decoration: underline;
}

.auth-body { padding: 22px 20px; }

/* ---- 제목 ---------------------------------------------------------------- */
/* `base.css` 의 `.page-header` (1.875rem / 900 / 음수 자간)는 마케팅 히어로용이다. 셸의
   상단바 제목이 16px/700 인데 로그인만 30px/900 이면 같은 서비스로 안 읽힌다. */
.auth-title { margin-bottom: 18px; }
.auth-title h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
    color: hsl(var(--foreground));
}
.auth-title p {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: hsl(var(--muted-foreground));
}

/* ---- 폼 ------------------------------------------------------------------ */
/* `base.css` 의 `.form-section` 은 그 자체가 카드(배경·테두리·그림자)다. 이미 카드 안이라
   그대로 두면 카드 위에 카드가 얹혀 경계가 두 겹으로 보인다. 껍데기만 벗기고 여백은 살린다. */
.auth-card .form-section {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.form-group:last-child { margin-bottom: 0; }

/* `base.css` 는 `input[type=text]` 만 잡는다 — email·password 는 브라우저 기본으로 남는다. */
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    outline: none;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="text"]:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-group input[type="email"]::placeholder,
.form-group input[type="password"]::placeholder,
.form-group input[type="text"]::placeholder {
    color: hsl(var(--muted-foreground));
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* 제출 버튼은 셸 안의 주요 동작과 같은 틸이다 (`base.css .btn-primary` + 테마 토큰). */
.btn-full { margin-top: 4px; }

/* 입력 + 버튼 가로 배치 (인증코드 발송/확인) */
.input-with-btn {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-btn input {
    flex: 1;
    min-width: 0;
}

.input-with-btn .btn {
    white-space: nowrap;
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    font-size: 0.813rem;
}

/* 인증 후 이메일 입력 잠금 — 다크에서는 «파묻힌 면(--background)» 보다 **밝은** 쪽이
   잠긴 것처럼 보인다. 편집 가능한 입력은 눌려 있고, 잠긴 입력은 면과 같은 높이다. */
input[readonly] {
    background: hsl(var(--card)) !important;
    color: hsl(var(--muted-foreground)) !important;
    cursor: not-allowed;
    border-color: hsl(var(--border)) !important;
}

input[readonly]:focus {
    box-shadow: none !important;
    border-color: hsl(var(--border)) !important;
}

/* 인증 완료 배지 */
#verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: hsl(var(--positive) / 0.18);
    color: hsl(var(--positive-strong));
    margin-bottom: 16px;
}

#verified-badge::before {
    content: '\2713';
    font-weight: 700;
}

/* 타이머 */
.timer {
    font-size: 0.813rem;
    color: hsl(var(--destructive-strong));
    font-weight: 500;
    margin-left: 8px;
}

/* ---- 구분선 -------------------------------------------------------------- */
.divider {
    display: flex;
    align-items: center;
    margin: 18px 0;
    gap: 12px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: hsl(var(--border));
}

.divider span {
    font-size: 0.75rem;
    color: hsl(var(--subtle-foreground));
    white-space: nowrap;
}

/* ---- Google 로그인 ------------------------------------------------------- */
/* GIS 공식 버튼 마운트. 버튼 자체의 테마(다크)는 `js/accounts/google_signin.js` 가 정한다 —
   iframe 안이라 CSS 가 닿지 않는다. */
#g-signin {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

/* 클라이언트 ID 미설정 시의 비활성 대체 버튼. */
.google-login-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    cursor: not-allowed;
    opacity: 0.6;
    transition: background 0.2s, border-color 0.2s;
}

.google-login-btn svg { flex-shrink: 0; }

.google-login-msg {
    margin: 8px 0 0;
    font-size: 0.813rem;
    color: hsl(var(--destructive-strong));
    text-align: center;
}

/* ---- 카드 발 ------------------------------------------------------------- */
/* 보조 이동(아이디 찾기·회원가입)은 본문과 선으로 나눠 «본 동작이 아님» 을 드러낸다. */
.auth-foot {
    padding: 14px 20px;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--background) / 0.4);
    text-align: center;
}

.auth-foot .forgot-links {
    font-size: 0.813rem;
    margin-bottom: 8px;
}

.auth-foot .forgot-links a {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
}

.auth-foot .forgot-links a:hover {
    text-decoration: underline;
    color: hsl(var(--foreground));
}

.auth-foot .link-divider {
    color: hsl(var(--border-strong));
    margin: 0 8px;
}

.auth-foot .cross-link {
    font-size: 0.813rem;
    color: hsl(var(--muted-foreground));
}

.auth-foot .cross-link a {
    color: hsl(var(--primary-text));
    text-decoration: none;
    font-weight: 600;
}

.auth-foot .cross-link a:hover { text-decoration: underline; }

/* ---- 결과 카드 (아이디 찾기) --------------------------------------------- */
.result-card {
    text-align: center;
    padding: 32px 20px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
}

.result-icon { margin-bottom: 14px; line-height: 0; }

.result-label {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

.result-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--primary-text));
    margin: 12px 0;
    word-break: break-all;
}

.result-login-btn {
    margin-top: 22px;
    display: inline-flex;
    text-decoration: none;
}

/* ---- 좁은 화면 ----------------------------------------------------------- */
@media (max-width: 520px) {
    body.app.auth { padding: 0; align-items: stretch; }
    .auth-card {
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .auth-body { flex: 1; }
    .input-with-btn { flex-direction: column; align-items: stretch; }
    .input-with-btn .btn { width: 100%; }
}