/* =====================================================
   login.css - 로그인 페이지 전용 스타일
   사용: theme.css + component.css + login.css
   ===================================================== */

/* ── 기본 리셋 ───────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

/* ── body ────────────────────────────────────────────── */
.login-body {
  min-height:100vh;
  display:flex; align-items:stretch;
  background:var(--body-bg);
  font-family:var(--font-family);
}

/* ── 전체 래퍼 ───────────────────────────────────────── */
.login-wrap {
  display:flex; width:100%; min-height:100vh;
  align-items:center; justify-content:center;
  background:var(--body-bg);
}

/* ── 로그인 폼 패널 (카드형 가운데) ──────────────────── */
.login-form-panel {
  width:100%; max-width:420px;
  background:var(--card-bg);
  border-radius:16px;
  border:1px solid var(--border-color);
  box-shadow:0 8px 32px rgba(0,0,0,0.10);
  padding:40px;
}
.login-form-inner { width:100%; }

/* 로고 */
.login-logo {
  display:flex; align-items:center; gap:10px;
  margin-bottom:28px; justify-content:center;
}
.login-logo-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff;
}
.login-logo-text {
  font-size:20px; font-weight:800;
  color:var(--text-main); letter-spacing:-0.5px;
}

/* 폼 타이틀 */
.login-form-title {
  font-size:24px; font-weight:800; color:var(--text-main);
  margin-bottom:6px; letter-spacing:-0.5px;
}
.login-form-sub {
  font-size:13px; color:var(--text-muted); margin-bottom:28px;
}

/* ── 알림 박스 ────────────────────────────────────────── */
.login-alert {
  display:flex; align-items:center; gap:8px;
  background:#fff5f5; border:1px solid #fecaca;
  border-radius:8px; padding:10px 14px;
  margin-bottom:16px;
  font-size:13px; color:var(--color-red);
  animation:shakeX .4s ease;
}
.login-alert i { flex-shrink:0; }

@keyframes shakeX {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-6px); }
  40%      { transform:translateX(6px); }
  60%      { transform:translateX(-4px); }
  80%      { transform:translateX(4px); }
}

/* ── 필드 ─────────────────────────────────────────────── */
.login-field { margin-bottom:16px; }
.login-label {
  display:block; font-size:12px; font-weight:700;
  color:var(--text-sub); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:0.5px;
}

.login-input-wrap { position:relative; }
.login-input-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--text-muted); pointer-events:none;
}
.login-input {
  width:100%; padding:12px 40px 12px 38px;
  border:1.5px solid var(--border-color); border-radius:8px;
  font-size:14px; color:var(--text-main);
  background:var(--body-bg); outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
  font-family:var(--font-family);
}
.login-input:focus {
  border-color:var(--primary);
  background:var(--card-bg);
  box-shadow:0 0 0 3px rgba(3,199,90,0.12);
}
.login-input::placeholder { color:var(--text-muted); }

/* 비밀번호 토글 */
.login-pw-toggle {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:15px; padding:2px;
  transition:color .15s;
}
.login-pw-toggle:hover { color:var(--text-sub); }

/* ── 옵션 (아이디 저장 / 비밀번호 찾기) ─────────────── */
.login-options {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.login-remember {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text-sub); cursor:pointer;
}
.login-remember input { accent-color:var(--primary); }
.login-find-link {
  font-size:13px; color:var(--text-muted);
  text-decoration:none; transition:color .15s;
}
.login-find-link:hover { color:var(--primary); }

/* ── 로그인 버튼 ──────────────────────────────────────── */
.login-btn {
  width:100%; padding:13px;
  background:var(--primary); color:#fff;
  border:none; border-radius:8px;
  font-size:15px; font-weight:700; cursor:pointer;
  font-family:var(--font-family); letter-spacing:0.3px;
  transition:background .2s, transform .1s, box-shadow .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 14px rgba(3,199,90,0.30);
}
.login-btn:hover {
  background:var(--primary-dark);
  box-shadow:0 6px 20px rgba(3,199,90,0.35);
  transform:translateY(-1px);
}
.login-btn:active { transform:translateY(0); }
.login-btn:disabled { opacity:0.7; cursor:not-allowed; transform:none; }

/* 로딩 스피너 */
.login-spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── 하단 푸터 ────────────────────────────────────────── */
.login-footer { margin-top:28px; text-align:center; }
.login-footer-text { font-size:13px; color:var(--text-muted); margin-bottom:0; }
.login-link {
  color:var(--primary); font-weight:700;
  text-decoration:none; transition:color .15s;
}
.login-link:hover { color:var(--primary-dark); text-decoration:underline; }
.login-footer-divider {
  height:1px; background:var(--border-color);
  margin:16px 0;
}
.login-footer-notice {
  font-size:12px; color:var(--text-muted);
  line-height:1.7;
}

/* ══════════════════════════════════════════════════════
   반응형
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .login-form-panel { border-radius:0; border:none; box-shadow:none; padding:30px 24px; min-height:100vh; }
  .login-wrap { align-items:stretch; }
  .login-form-title { font-size:20px; }
}