/* mobile default - demo-a-v2 기준. rf-* 폼 컴포넌트는 components.css SSoT 위임 */
.app { max-width: var(--app-max-width-mobile); }

.brand-center {
  text-align: center;
  margin-top: var(--space-8);
  font-size: var(--text-lg);
  color: var(--color-on-surface-muted);
}

.brand-center strong {
  font-weight: 800;
  color: var(--color-primary-deep);
  font-size: var(--text-xl);
}

.login-form {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-top: var(--space-5);
}

.login-error {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

/* 딥링크(텔레그램) 비로그인 진입 시 auth.js 가 동적 삽입하는 복귀 안내 */
.login-hint {
  margin-bottom: var(--space-3);
  color: var(--color-on-surface-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* tablet: 768px - 로그인 (매트릭스 480px, 토큰 미사용 정상) */
@media (min-width: 768px) {
  .app { max-width: 480px; }
}

/* pc: 1024px - 로그인 (매트릭스 480px) */
@media (min-width: 1024px) {
  .app { max-width: 480px; }
}