/* 1. 기본 변수 덮어쓰기 */
:root {
  --bs-font-sans-serif: 'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* 2. data-bs-theme=light 상태에서도 덮어쓰기 (Bootstrap이 이 셀렉터로 다시 설정하니까 재정의) */
:root[data-bs-theme=light] {
  --bs-font-sans-serif: 'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* 3. 실제 렌더링에 확실히 반영 */
html, body {
  font-family: 'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* src/main/resources/static/css/login/login-modal.css (하이브리드 최종 버전) */

/* ============================================= */
/* 1. 부트스트랩 모달을 오른쪽 슬라이드 패널로 바꾸는 코드 */
/* ============================================= */

/* 부트스트랩의 기본 페이드 효과를 사용하지 않음 */
#loginModal.modal.fade {
  opacity: 1;
}

/* 모달 대화창(패널)의 위치와 애니메이션 정의 */
#loginModal .modal-dialog {
  position: fixed;
  top: 0;
  right: -400px; /* 처음엔 화면 밖 오른쪽에 숨김 */
  margin: 0;
  width: 380px; /* 네가 원했던 너비 */
  height: 100vh; /* 화면 전체 높이 */
  max-width: none;
  transform: none; /* 부트스트랩의 위치 조정 기능 비활성화 */
  transition: right 0.4s ease-in-out; /* 부드러운 슬라이드 효과 */
}

/* 모달이 나타날 때(.show) 오른쪽으로 슬라이드하며 등장 */
#loginModal.modal.show .modal-dialog {
  right: 0;
}

/* 모달 내용물이 패널을 꽉 채우도록 설정 */
#loginModal .modal-content {
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* 부트스트랩의 기본 헤더/바디 스타일 수정 */
#loginModal .modal-header {
  border-bottom: none;
  position: absolute; /* 닫기 버튼을 오른쪽 위로 보내기 위함 */
  top: 5px;
  right: 5px;
  z-index: 10;
}
#loginModal .modal-body {
  padding: 40px 30px;
  overflow-y: auto; /* 내용이 길어지면 스크롤바 생성 */
}


/* ============================================= */
/* 2. 네가 원래 만들었던 내부 디자인 스타일 (그대로 유지) */
/* ============================================= */
#loginModal h3 {
  margin-bottom: 30px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}

#loginModal label {
  font-size: 13px;
  margin-bottom: 6px;
  display: block;
  color: #444;
}

#loginModal input[type="text"],
#loginModal input[type="password"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

#loginModal .password-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

#loginModal .password-row a {
  font-size: 12px;
  color: #4a76fd;
  text-decoration: none;
}

#loginModal .login-button {
  width: 100%;
  padding: 12px;
  background-color: #4a76fd;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 10px;
}

#loginModal .login-button:hover {
  background-color: #365ee6;
}

#loginModal .join-info {
  text-align: center;
  margin-top: 25px;
  font-size: 13px;
}

#loginModal .join-info a {
  color: #4a76fd;
  font-weight: bold;
  text-decoration: none;
}

#loginModal .join-info a:hover {
  color: #365ee6;
  text-decoration: underline;
}

/* 로그인 후 정보창 스타일 */
#loginModal .user-info-box {
  text-align: center;
  margin-top: 20px;
}

#loginModal .user-info-box p {
  margin: 8px 0;
  font-size: 16px;
}

#loginModal .btn-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

#loginModal .info-button,
#loginModal .logout-button {
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

#loginModal .info-button {
  background-color: #f0f0f0;
  color: #333;
}

#loginModal .logout-button {
  background-color: #ff6f61;
  color: white;
}

/* static/css/generic-modal.css (최종 수정본) */

/* ✅ 1. 모든 모달이 공유하는 어두운 배경 */
.generic-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* 화면 너비 꽉 채우기 */
  height: 100%; /* 화면 높이 꽉 채우기 */
  background-color: rgba(0, 0, 0, 0);
  z-index: 1000; /* 모달보다는 아래, 페이지 내용보다는 위 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 평소에는 클릭 안 되게 */
}
.generic-overlay.show {
  opacity: 1;
  pointer-events: auto; /* show 클래스가 붙으면 클릭 가능하게 */
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 */
}

/* ✅ 2. 모달 기본 스타일 (가운데 정렬) */
.generic-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 500px;
  max-width: 90vw;
  height: auto;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  z-index: 1001; /* 오버레이보다 항상 위에 있도록 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.generic-modal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
}
.generic-modal.wide {
  width: 800px;
}

/* ✅ 3. 닫기 버튼 스타일 복구 */
.generic-modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  line-height: 1;
  z-index: 10; /* 내용물보다 위에 있도록 */
}

/* 모달 내부 컨텐츠 스타일 */
.generic-modal-content {
  padding: 20px 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.generic-modal-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-right: 20px;
  text-align: center;
}
.generic-modal-body {
  flex-grow: 1;
}
.generic-modal-footer {
  margin-top: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}