/* /adm/css/login.css */

/* 기본 스타일 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

body, html {
  height: 100%;
  width: 100%;
  overflow: hidden; /* 배경 애니메이션에 스크롤이 생기지 않도록 */
  position: relative;
  background-color: #1e1e1ec5; /* 기본 배경색 어둡게 설정 */
}

/* 파티클 배경 */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 배경으로 설정 */
}

/* 로그인/등록 래퍼 */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative; /* z-index 설정을 위해 relative로 설정 */
  z-index: 1; /* 로그인/등록 폼이 배경 위에 표시되도록 설정 */
}

/* 로그인/등록 박스 */
.login-box {
  background: rgba(30, 30, 30, 0.85); /* 어두운 배경과 높은 불투명도 */
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(8.5px);
  -webkit-backdrop-filter: blur(8.5px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 350px;
  text-align: center;
  color: #ffffff; /* 텍스트 색상 흰색으로 유지 */
}

.login-box h2 {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box h2 i {
  margin-right: 10px;
  color: #02e0b0;
  font-size: 28px;
}

/* 입력 그룹 */
.input-group {
  margin-bottom: 20px;
  text-align: left;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #ffffff;
}

.input-group i {
  margin-right: 8px;
  color: #02e0b0;
}

.input-group input {
  width: 100%;
  padding: 10px 15px;
  border: none;
  border-radius: 25px;
  outline: none;
  font-size: 14px;
  transition: background 0.3s, box-shadow 0.3s;
  background: rgba(255, 255, 255, 0.1); /* 더 어두운 배경 */
  color: #ffffff;
}

.input-group input::placeholder {
  color: #cccccc;
}

.input-group input:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 버튼 스타일 */
.login-form button {
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  background: #02e0b0;
  color: #1e1e1e; /* 버튼 텍스트 색상 어둡게 */
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form button:hover {
  background: #017c62;
  transform: translateY(-2px);
}

.login-form button i {
  margin-right: 8px;
}

/* 메시지 박스 */
.message-box {
  margin-top: 15px;
  padding: 10px;
  border-radius: 5px;
  display: none; /* 초기에는 숨김 */
}

.message-box.success {
  background-color: rgba(0, 128, 0, 0.2);
  color: #006400;
}

.message-box.error {
  background-color: rgba(255, 0, 0, 0.2);
  color: #8B0000;
}

.message-box.info {
  background-color: rgba(0, 0, 255, 0.2);
  color: #00008B;
}
/* 메시지 박스 기본 스타일 */
.message-box {
  display: none; /* 기본적으로 숨김 */
  padding: 15px;
  border-radius: 5px;
  margin-top: 15px;
  font-size: 14px;
}

/* 성공 메시지 스타일 */
.message-box.success {
  background-color: #d4edda; /* 연한 초록색 배경 */
  color: #155724;            /* 어두운 초록색 텍스트 */
  border: 1px solid #c3e6cb; /* 연한 초록색 테두리 */
}

/* 오류 메시지 스타일 */
.message-box.error {
  background-color: #f8d7da; /* 연한 빨간색 배경 */
  color: #721c24;            /* 어두운 빨간색 텍스트 */
  border: 1px solid #f5c6cb; /* 연한 빨간색 테두리 */
}

/* 정보 메시지 스타일 (선택 사항) */
.message-box.info {
  background-color: #d1ecf1; /* 연한 파란색 배경 */
  color: #0c5460;            /* 어두운 파란색 텍스트 */
  border: 1px solid #bee5eb; /* 연한 파란색 테두리 */
}

/* 메시지 박스 애니메이션 */
.message-box.fade-in {
  animation: fadeIn 0.5s;
}

.message-box.fade-out {
  animation: fadeOut 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.social-login {
  text-align: center;
  margin-top: 20px;
}

.social-login p {
  margin-bottom: 10px;
  font-weight: 500;
}

.kakao-login-button img {
  width: 100%;
  max-width: 250px;
  cursor: pointer;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/homepage/images/introbg.png');
  /* ← 배경 이미지 경로 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  /* 투명도 50% */
  z-index: -1;
  /* 내용보다 뒤에 깔리도록 */
}