/* ============================================================
 * 호미클럽 — 로그인 (소셜 + 이메일, 추후 커뮤니티 진입)
 * ============================================================ */

.login-main {
  display: grid; place-items: center;
  padding: var(--space-12) var(--space-4) var(--space-16);
}

.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.login-card h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2); font-weight: 700; text-align: center;
  letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-2);
}
/* 커뮤니티(클럽) 준비 중 안내 */
.login-notice {
  background: var(--ink-100);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.login-notice p { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-700); }
.login-notice strong { color: var(--ink-900); font-weight: 700; }

/* 오류 안내 (레드 토큰 부재 → cook 주황 = 기존 .err 관례) */
.login-error {
  border: 1px solid var(--dot-cook); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-900);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  font-size: var(--fs-meta);
}

/* 이메일 폼 */
.login-form { display: grid; gap: var(--space-4); }
.login-form label {
  display: block; margin-bottom: var(--space-1);
  font-family: var(--font-heading); font-size: var(--fs-caption); font-weight: 600; color: var(--ink-700);
}
.login-form input {
  width: 100%; height: 46px; padding: 0 var(--space-4);
  border: 1px solid var(--ink-300); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink-900);
  background: var(--surface);
}
.login-form input:focus { outline: none; border-color: var(--ink-700); }
.login-submit {
  height: 48px; border: 0; border-radius: var(--radius-md);
  background: var(--ink-900); color: var(--ink-0);
  font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; margin-top: var(--space-1);
  transition: background var(--t-fast) var(--ease);
}
.login-submit:hover { background: var(--ink-700); }

.login-foot { text-align: center; font-size: var(--fs-meta); color: var(--ink-500); margin: var(--space-6) 0 0; }
.login-foot a { color: var(--ink-900); font-weight: 600; text-decoration: underline; }
.login-submit:active { background: var(--ink-700); }   /* 터치 눌림 피드백 */

/* 모바일 — 입력 16px (iOS 포커스 자동줌 차단) */
@media (max-width: 767px) {
  .login-form input { font-size: 16px; }
}