/* ============================================================
   로그인 / 회원가입 페이지 — 태극 디자인 시스템 적용
   (관리자 로그인 admin-login.css와 유사한 카드형 레이아웃, 공개 페이지용)
   ============================================================ */

.auth-page-main {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero);
  padding: var(--space-10) var(--space-5);
}

.auth-container {
  width: 100%;
  max-width: 460px;
}

.auth-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: 0 25px 60px rgba(11, 13, 18, 0.35);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-header .auth-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--gradient-taegeuk);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 1.8rem;
  color: white;
  box-shadow: var(--shadow-blue);
}

.auth-header h1 { font-size: 1.6rem; color: var(--ink); margin-bottom: var(--space-2); }
.auth-header p { color: var(--ink-muted); font-size: 0.92rem; }

.auth-form .form-group input[type="password"],
.auth-form .form-group input[type="date"] {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-primary);
  background: var(--surface);
  color: var(--ink);
  transition: var(--transition);
}
.auth-form .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

.auth-password-field { position: relative; }
.auth-password-field .toggle-password {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 1rem;
}

.auth-error {
  display: none;
  background: var(--accent-light);
  color: var(--accent-dark);
  border: 1px solid var(--color-red-300);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
  align-items: center;
  gap: var(--space-2);
}
.auth-error.show { display: flex; }

.auth-success {
  display: none;
  background: var(--color-green-light, #e6f6ee);
  color: var(--color-green-dark, #157347);
  border: 1px solid var(--color-green-300, #86e0b3);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
  align-items: center;
  gap: var(--space-2);
}
.auth-success.show { display: flex; }

.auth-footer {
  text-align: center;
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-color);
}
.auth-footer p { color: var(--ink-muted); font-size: 0.9rem; }
.auth-footer a { color: var(--primary); font-weight: 700; }

.auth-hint {
  color: var(--ink-muted);
  font-size: 0.8rem;
  margin-top: var(--space-2);
  display: block;
}

@media (max-width: 480px) {
  .auth-card { padding: var(--space-6) var(--space-5); }
}

/* ---------- 체크박스 (이벤트 알림 동의 등) ---------- */
.checkbox-group { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.checkbox-label { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; position: relative; }
.checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-custom {
  width: 20px; height: 20px; border: 2px solid var(--border-color); border-radius: 4px; background: var(--surface);
  transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom { background: var(--primary); border-color: var(--primary); }
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after { content: '✓'; color: #fff; font-size: 13px; font-weight: bold; }
.checkbox-label:hover .checkbox-custom { border-color: var(--primary); }
.checkbox-text { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- 아이디/비밀번호 찾기 페이지 탭 ---------- */
.find-account-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: var(--space-6);
  border-bottom: 2px solid var(--border-color);
}
.find-account-tab-btn {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-muted);
  cursor: pointer;
  text-align: center;
}
.find-account-tab-btn:hover { color: var(--primary); }
.find-account-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.find-account-tab-panel { display: none; }
.find-account-tab-panel.active { display: block; }

.auth-links-row { text-align: right; margin: calc(var(--space-2) * -1) 0 var(--space-5); }
.auth-links-row a { font-size: 0.85rem; color: var(--ink-muted); }
.auth-links-row a:hover { color: var(--primary); }

.auth-options-row { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--space-2) * -1) 0 var(--space-5); flex-wrap: wrap; gap: var(--space-2); }
.auth-options-row .checkbox-label { gap: var(--space-2); }
.auth-options-row .checkbox-text { font-size: 0.85rem; color: var(--ink-muted); }
.auth-options-row .checkbox-custom { width: 18px; height: 18px; }
.auth-options-row a { font-size: 0.85rem; color: var(--ink-muted); }
.auth-options-row a:hover { color: var(--primary); }

/* ---------- 회원가입 약관 동의 코너 ---------- */
.signup-agreements {
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.signup-agreements-divider { height: 1px; background: var(--border-color); margin: 0; }
.signup-agreements .agreement-sub .checkbox-text { font-size: 0.85rem; }
.signup-agreements .agreement-sub .checkbox-custom { width: 18px; height: 18px; }
.signup-agreements .checkbox-text a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.signup-agreements .checkbox-text a:hover { color: var(--primary-dark, var(--primary)); }