/* =========================================================================
 * 인증 페이지 보조 스타일.
 * 메인 화면(base.css)의 클래스(.cm-card, .cm-btn, .cm-input, .cm-field, .cm-label)를
 * 그대로 사용하고, 인증 페이지 전용 레이아웃(.auth-page, .auth-card)만 여기서 정의.
 * 색상값 직접 사용 금지 - tokens.css 변수만 사용.
 * ========================================================================= */

/* 인증 페이지 풀스크린 배경 + 중앙 배치 */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    padding: var(--space-6);
}

/* 인증 카드 - base.css 의 .cm-card 디자인을 따라가되 너비/여백을 인증 화면에 맞춰 확장 */
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8);
}

/* 브랜드 영역 */
.auth-card__brand {
    text-align: center;
    margin-bottom: var(--space-6);
}
.auth-card__brand h1 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
}
.auth-card__brand h1 .cm-accent { color: var(--color-accent); }
.auth-card__brand p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* 카드 안 섹션 제목 */
.auth-card__title {
    margin: 0 0 var(--space-5) 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

/* 폼 - .cm-field 들의 간격을 키운 컨테이너 */
.auth-form { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.auth-form .cm-input,
.auth-form .cm-textarea,
.auth-form .cm-select {
    width: 100%;
    padding: 10px 12px;
}
.auth-form .cm-textarea { min-height: 88px; font-family: inherit; }
.auth-form .cm-btn { width: 100%; justify-content: center; padding: 10px 14px; }
.auth-form__help {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* 카드 하단 보조 링크 (회원가입/비밀번호 재설정) */
.auth-links {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
}
.auth-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
}
.auth-links a:hover { color: var(--color-accent); text-decoration: underline; }

/* 메시지 박스 - 토큰 색상만 사용 */
.auth-msg {
    margin: var(--space-4) 0 0 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    display: none;
}
.auth-msg.is-show { display: block; }
.auth-msg--error {
    background: var(--color-accent-bg);
    color: var(--color-accent-strong);
    border: 1px solid var(--color-accent-soft);
}
.auth-msg--info {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.auth-msg--success {
    background: var(--color-surface-alt);
    color: var(--color-success);
    border: 1px solid var(--color-border);
}