/* 로그인 페이지 전용 — style.css와 독립 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body.login { overflow-x: hidden; max-width: 100vw; }

:root {
  --lg-primary: #f18b88;
  --lg-primary-hover: #e77470;
  --lg-primary-deep: #d4655d;
  --lg-accent: #f9a06b;
  --lg-text: #1f2937;
  --lg-muted: #8b7a78;
  --lg-hint: #e5948f;
  --lg-input-bg: #fdf7f6;
  --lg-input-border: #f5d8d5;
  --lg-input-placeholder: #d8a9a6;
  --lg-card-bg: #ffffff;
  --lg-bg-1: #ffd6d0;
  --lg-bg-2: #ffe7d0;
  --lg-bg-3: #fff3ec;
  --lg-danger: #dc2626;
  --lg-danger-bg: #fee2e2;
  --lg-danger-border: #fecaca;
}

html { font-size: 100%; }

body.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: var(--lg-text);
  background:
    radial-gradient(60rem 40rem at 12% 8%, rgba(255, 196, 184, 0.65), transparent 60%),
    radial-gradient(50rem 36rem at 88% 92%, rgba(255, 218, 180, 0.55), transparent 60%),
    radial-gradient(38rem 28rem at 90% 12%, rgba(255, 240, 220, 0.6), transparent 65%),
    linear-gradient(135deg, var(--lg-bg-1) 0%, var(--lg-bg-3) 50%, var(--lg-bg-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: var(--lg-card-bg);
  border-radius: 1.75rem;
  padding: 3.25rem 2.75rem 2.75rem;
  box-shadow:
    0 1.75rem 4rem rgba(228, 116, 110, 0.22),
    0 0.375rem 1.25rem rgba(249, 160, 107, 0.10),
    0 0 0 0.0625rem rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.375rem;
  background: linear-gradient(90deg, #f9a06b 0%, #f18b88 55%, #d4685f 100%);
}

.login-logo {
  display: block;
  height: 3.5rem;
  width: auto;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0.375rem 0.75rem rgba(241, 139, 136, 0.22));
}

.login-title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.login-sub {
  text-align: center;
  color: var(--lg-muted);
  font-size: var(--text-base);
  margin-bottom: 2.25rem;
  position: relative;
  z-index: 1;
}

.login-alert {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  margin-bottom: 1rem;
  background: var(--lg-danger-bg);
  color: var(--lg-danger);
  border: var(--border-width, 0.0625rem) solid var(--lg-danger-border);
  position: relative;
  z-index: 1;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  z-index: 1;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--lg-text);
}

.login-form input {
  padding: 0.95rem 1.05rem;
  border: var(--border-width, 0.0625rem) solid var(--lg-input-border);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  font-family: inherit;
  background: var(--lg-input-bg);
  color: var(--lg-text);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.login-form input::placeholder {
  color: var(--lg-input-placeholder);
}

.login-form input:focus {
  outline: none;
  border-color: var(--lg-primary);
  background: #ffffff;
  box-shadow: 0 0 0 0.25rem rgba(241, 139, 136, 0.15);
}

.login-btn {
  margin-top: 0.65rem;
  padding: 1rem 1rem;
  background: linear-gradient(135deg, var(--lg-accent) 0%, var(--lg-primary) 55%, var(--lg-primary-hover) 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow:
    0 0.75rem 1.5rem rgba(241, 139, 136, 0.32),
    0 0.125rem 0.375rem rgba(228, 116, 110, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.login-btn:hover {
  filter: brightness(1.04);
  box-shadow:
    0 1rem 2rem rgba(228, 116, 110, 0.4),
    0 0.25rem 0.5rem rgba(212, 101, 93, 0.22);
  transform: translateY(-0.0625rem);
}

.login-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.login-hint {
  text-align: center;
  margin-top: 1.75rem;
  color: var(--lg-hint);
  font-size: 0.75rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 30rem) {
  .login-card { padding: 2.5rem 1.6rem 2rem; border-radius: 1.5rem; }
  .login-logo { height: 2.85rem; }
  .login-title { font-size: var(--text-xl); }
}

/* 작은 모바일 — 340px 안전선 (≤ 360px) */
@media (max-width: 22.5rem) {
  body.login { padding: 0.9rem; }
  .login-card { padding: 1.9rem 1.1rem 1.5rem; border-radius: 1.25rem; }
  .login-logo { height: 2.4rem; }
  .login-title { font-size: 1.15rem; }
  .login-sub {
    font-size: 0.82rem;
    margin-bottom: 1.6rem;
    word-break: keep-all;
    line-height: 1.4;
  }
  .login-form input { font-size: 0.88rem; padding: 0.7rem 0.85rem; }
  .login-btn { padding: 0.8rem; font-size: var(--text-base); }
  .login-hint { font-size: 0.72rem; word-break: keep-all; }
}