@charset "UTF-8";
html {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
  /* [1. 배경 수정] 시안의 몽환적인 그라데이션 재현 */
  background: radial-gradient(circle at 10% 20%, rgba(253, 249, 209, 0.8) 0%, transparent 40%), radial-gradient(circle at 90% 10%, rgba(212, 233, 247, 0.8) 0%, transparent 40%), radial-gradient(circle at 85% 85%, rgba(247, 225, 181, 0.8) 0%, transparent 40%), radial-gradient(circle at 15% 80%, rgba(226, 244, 216, 0.8) 0%, transparent 40%), #ffffff;
}

/* [2. 카드 컨테이너 추가] 하얀색 중앙 박스 */
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px; /* 시안 비율에 맞춰 너비 상향 */
  background: #ffffff; /* 카드 배경 하얀색 */
  padding: 50px 40px; /* 내부 여백 넉넉히 */
  border-radius: 20px; /* 시안의 둥근 모서리 */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); /* 부드러운 그림자 */
}

.login-title {
  margin-bottom: 40px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px; /* 로고와 글자 사이 간격 최적화 */
}
.login-title img {
  width: 45px; /* 시안 비율에 맞춰 조정 */
  height: 45px;
  object-fit: contain;
}
.login-title span {
  font-size: 1.8rem; /* 시안 느낌의 크기 */
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
}

.login-input-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px; /* 간격 조절 */
}
.login-input-group .login-label {
  margin-bottom: 10px;
  font-size: 14px;
  color: #333; /* 조금 더 선명한 검정색 */
  font-weight: 600;
}
.login-input-group {
  /* input 스타일 보정 */
}
.login-input-group input {
  width: 100%;
  height: 41px;
  padding: 12 16px;
  background-color: #FBF9F9; /* 시안처럼 연한 회색 배경 */
  border: 1px solid #FBF9F9;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}
.login-input-group input::placeholder {
  color: #ccc;
}
.login-input-group input:focus {
  border-color: #008ECB;
  background-color: #fff;
}

.find-password-link {
  margin: 8px 0 24px 0; /* 위치 조정 */
  text-align: center;
  font-size: 13px;
  color: #999; /* 시안처럼 조금 더 연한 회색 */
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.find-password-link:hover {
  color: #666;
  text-decoration: underline;
}

.login-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
  /* [기본: 비활성화 상태] */
  background-color: #e2e2e2 !important; /* 연한 회색 */
  color: #fff !important;
  cursor: not-allowed; /* 마우스 커서를 '금지' 모양으로 */
  pointer-events: none; /* 클릭 안 되게 막기 */
  /* [활성화 상태] .active 클래스가 붙었을 때 */
}
.login-btn.active {
  background-color: #008ECB !important; /* 시안의 파란색 */
  cursor: pointer;
  pointer-events: auto; /* 클릭 가능하게 */
}
.login-btn.active:hover {
  background-color: #006894 !important;
  transform: translateY(-1px);
}

/*# sourceMappingURL=login.css.map */