/* =============================================
 *  로그인 오버레이 스타일
 *  =============================================
 *  사이트 접속 시 표시되는 로그인 화면의 스타일입니다.
 *  배경은 블러 처리되고, 중앙에 로그인 폼이 나타납니다.
 */

/* === 앱 블러 처리 (로그인 전) === */
/* 로그인하지 않았을 때 앱 전체에 블러 효과를 적용합니다 */
.app-container--locked {
  filter: blur(12px) saturate(0.5);  /* 12px 블러 + 채도 낮춤 */
  pointer-events: none;              /* 클릭 불가능하게 */
  user-select: none;                 /* 텍스트 선택 불가능 */
  transition: filter 0.5s ease;      /* 블러 해제 시 부드러운 전환 */
}

/* 로그인 후 블러 해제 애니메이션 */
.app-container--unlocking {
  filter: blur(0) saturate(1);
  pointer-events: auto;
  user-select: auto;
}


/* === 로그인 오버레이 (전체 화면 덮개) === */
.login-overlay {
  position: fixed;
  inset: 0;                          /* 화면 전체 덮음 */
  z-index: 1000;                     /* 모든 요소 위에 표시 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15); /* 살짝 투명한 흰색 배경 */
  backdrop-filter: blur(2px);        /* 배경 추가 블러 */
  animation: fadeIn 0.4s ease;
}

/* 로그인 오버레이 닫힐 때 애니메이션 */
.login-overlay--hiding {
  animation: loginFadeOut 0.5s ease forwards;
}

@keyframes loginFadeOut {
  from { opacity: 1; }
  to { opacity: 0; pointer-events: none; }
}


/* === 로그인 카드 (중앙 폼) === */
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 20px 40px -8px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);   /* 미세한 테두리 효과 */
  padding: var(--space-10);
  animation: loginCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* 카드 등장 애니메이션 (아래에서 위로 + 스케일) */
@keyframes loginCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 카드 상단 장식선 (주황색 그라데이션) */
.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-primary));
}


/* === 로그인 헤더 영역 === */
.login-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

/* 로고 아이콘 (큰 원형) */
.login-logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  box-shadow: 0 4px 12px rgba(232, 145, 58, 0.3);
}

.login-logo .material-icons-outlined {
  font-size: 28px;
  color: var(--color-text-inverse);
}

/* 제목 */
.login-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

/* 부제목 */
.login-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}


/* === 로그인 폼 === */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* 패스워드 입력 필드 컨테이너 */
.login-input-group {
  position: relative;
}

/* 패스워드 입력 필드 */
.login-input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) 44px; /* 왼쪽에 아이콘 공간 */
  font-size: var(--font-size-md);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
  outline: none;
}

.login-input:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg-primary);
  box-shadow: 0 0 0 3px rgba(232, 145, 58, 0.12);
}

.login-input::placeholder {
  color: var(--color-text-tertiary);
}

/* 입력 필드 왼쪽 잠금 아이콘 */
.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-text-tertiary);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.login-input:focus ~ .login-input-icon {
  color: var(--color-primary);
}

/* 로그인 버튼 */
.login-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 145, 58, 0.35);
}

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

/* 로그인 버튼 로딩 상태 */
.login-btn--loading {
  pointer-events: none;
  opacity: 0.8;
}


/* === 에러 메시지 === */
.login-error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  animation: shake 0.4s ease;
}

.login-error--visible {
  display: flex;
}

.login-error .material-icons-outlined {
  font-size: 16px;
  flex-shrink: 0;
}

/* 에러 시 흔들림 애니메이션 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 에러 시 입력 필드 테두리 빨갛게 */
.login-input--error {
  border-color: var(--color-error) !important;
  animation: shake 0.4s ease;
}


/* === 하단 안내 텍스트 === */
.login-footer {
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  line-height: 1.5;
}


/* === 반응형 (모바일) === */
@media (max-width: 480px) {
  .login-card {
    margin: var(--space-4);
    padding: var(--space-6);
  }

  .login-logo {
    width: 48px;
    height: 48px;
  }

  .login-logo .material-icons-outlined {
    font-size: 24px;
  }
}