body {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}

/* 최상위 컨테이너 */
.login-page {
  width: 640px;
  height: 618px;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
}

/* 판다마켓 Img  */
.form-image {
  width: 396px;
  height: 132px;
  margin: 0 auto 20px;
}

/* 사용자가 판다마켓 눌렀을 때 이벤트가 있음을 예측할 수 있게 하는 hover (홈페이지로 이동) */
.form-image:hover {
  cursor: pointer;
}

/* 로그인/회원가입을 감싸는 요소 */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form label {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  width: 100%;
  height: 98px;
  font-weight: 700;
  gap: 16px;
}

.form input {
  width: 100%;
  height: 48px;
  padding: 12px 24px;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  background-color: #f3f4f6;
  font-size: 1.6rem;
  outline: none;
}

/* placeholder 스타일링 */
.form input::placeholder {
  color: #9ca3af;
  opacity: 0.5;
  font-size: 1.6rem;
  font-weight: 400;
}

/* password input과 i 태그를 감싼 부모 Div 배치 */
.password-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* password */
.password-box input {
  width: 100%;
  padding-right: 40px;
}

/* password 비밀번호 showing 요소 */
.toggle-password {
  position: absolute;
  right: 12px;
  cursor: pointer;
}

.toggle-password:hover {
  color: #3692ff;
}

/* 로그인/회원가입 버튼 auth-button */
.auth-button {
  width: 100%;
  height: 56px;
  background-color: #9ca3af;
  color: #f3f4f6;
  font-size: 2rem;
  font-weight: 600;
  border: none;
  border-radius: 25px;
  /* cursor: pointer; */
  margin-top: 10px;
}

/* 간편 로그인 배치 */
.easy-login {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 74px;
  padding: 16px 23px;
  background-color: #e6f2ff;
  border-radius: 8px;
  margin-top: 30px;
}

.easy-login span {
  align-content: center;
  font-size: 1.6rem;
  font-weight: 500;
}

.easy-login-icon {
  display: flex;
  width: 100px;
  height: 42px;
  align-content: center;
  gap: 16px;
}

.easy-login-icon a img {
  width: 42px;
  height: 42px;
}

.message-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  /* 카카오톡 이나 구글 접속 하고 다시 되돌아왔을 때 스타일이 적용되지 않는 문제 해결 */
  min-height: 24px;
  gap: 4px;
  margin-top: 30px;
}

/* 하단 로그인/회원가입 링크 */
.message {
  font-size: 1.4rem;
  color: #1f2937;
  font-weight: 500;
}

.message a {
  color: #3692ff;
  font-weight: 500;
  font-size: 1.4rem;
}

.input-error {
  border: 1.5px solid #f74747 !important;
}

/* 태블릿과 PC에서는 동일한 스타일을 유지하므로 별도 스타일 변경 없음 */
/* 아이패드 에어를 기준으로 구현하였습니다. (820 x 1180) */
@media (max-width: 1199px) {
}

/* 모바일 반응형 구현 */
/* iPhone 12 Pro를 기준으로 구현하였습니다. (390 x 844) */
@media (max-width: 767px) {
  .login-page {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .form-image {
    width: 198px;
    height: 66px;
  }

  .form {
    width: 100%;
  }

  .form input {
    width: 100%;
  }

  .password-box {
    width: 100%;
  }

  .auth-button {
    width: 100%;
  }

  .easy-login {
    width: 100%;
  }

  .message-box {
    width: 100%;
  }
}