/* src/main/webapp/resources/css/termsModal.css */

/* ---- 오버레이 ---- */
.terms-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(38,44,56,0.44);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

/* ---- 모달 본체(4:3 비율, 1920 기준 중앙) ---- */
.terms-modal-content {
  /* width: 1080px; */
  width: 1240px;
  max-width: 92vw;
  min-width: 340px;
  height: 80vh;
  max-height: 90vh;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 6px 36px rgba(30, 40, 60, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;     /* 중요! */
  position: relative;
}

/* ---- 헤더 ---- */
.terms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #1854ad 30%, #5694df 100%);
  color: #fff;
  padding: 0 32px;
  height: 68px;
  flex-shrink: 0;
  position: relative;
}

.terms-modal-header h2 {
  font-size: 1.33rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin: 0;
  color: #fff;
}
.terms-modal-header h3 {
  font-size: 1.3rem;
  font-weight: 500;
  /* margin: 0; */
  color: #fff;
}

.terms-close-header-btn {
  font-size: 2.2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 10px;
  margin-left: 10px;
  opacity: 0.82;
  transition: color 0.15s, opacity 0.13s;
}
.terms-close-header-btn:hover { color: #f9ea62; opacity: 1; }

/* ---- 바디(본문/사이드메뉴 래핑) ---- */
.terms-modal-body-wrap {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: 0;
  background: #fff;
}

/* ---- 사이드 메뉴 ---- */
.terms-side-menu {
  /* width: 210px; */
  min-width: 300px;
  background: #f8fafd;
  border-right: 1px solid #e3eaf2;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.terms-side-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.terms-side-menu li {
  padding: 15px 20px 10px 20px;
  cursor: pointer;
  color: #25436b;
  background: none;
  transition: background 0.15s, color 0.14s;
  font-size: 1.09rem;
  font-weight: 400;
  border-left: 5px solid transparent;
  border-radius: 0 15px 15px 0;
  margin-bottom: 4px;
}
.terms-side-menu li.active, .terms-side-menu li:hover {
  background: #e8f1fd;
  color: #1c6fe8;
  border-left: 5px solid #1659c7;
}

/* ---- 약관 본문 영역(스크롤) ---- */
.terms-content-area {
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 20px 20px 20px;
  overflow-y: auto;
  /* height: 100%; */
  max-height: unset;
  font-size: 1rem;
  color: #2d3343;
  background: #fff;
  line-height: 1.82;
}
.terms-content-area h2 {
  margin-bottom: 50px;
  font-size: 1.4rem;
  color: #1954ae;
  font-weight: 500;
  text-align: center;
}
.chapter {
  font-size: 1.17rem;
  margin-top: 2.2em;
  color: #288;
  font-weight: 500;
}
.terms-content-area h3 {
  font-size: 1.05rem;
 /*  margin-top: 2.2em; */
  /* color: #288; */
  font-weight: 500;
  margin-bottom: 0px;
}
.terms-content-area p, .terms-content-area ul, .terms-content-area ol {
  margin: 0px;
  /* margin-bottom: 1.2em; */
  /* font-size: 0.9rem; */
  font-weight: 300;
  letter-spacing: 0.07rem;
}
/* .terms-content-area ul, .terms-content-area ol {
  padding-left: 21px;
} */

/* ---- custom ---- */
.custom-ol {
  list-style: none;
  counter-reset: custom-num;
  padding-left: 0px;
}
.custom-ol > li {
  counter-increment: custom-num;
  position: relative;
  /* margin-bottom: 0.9em; */
  padding-left: 2em;
}
.custom-ol > li::before {
  content: counter(custom-num) ") ";
  position: absolute;
  left: 0;
  top: 0;
  /* color: #174a8a; */
  font-weight: 300;
}

/* ---- 푸터 ---- */
.terms-modal-footer {
  padding: 0 32px 0 0;
  height: 58px;
  background: #f2f7fb;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #e3eaf2;
  flex-shrink: 0;
}

.terms-close-footer-btn {
  font-size: 1.04rem;
  background: linear-gradient(90deg, #5dade2 30%, #348BEE 100%);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 22px;
  padding: 10px 25px; /* 버튼 크기를 위해 패딩 추가 (조정 가능) */
  cursor: pointer; /* 클릭 가능한 요소임을 나타내기 위해 추가 */
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* 전환 효과 시간 조정 */
}

.terms-close-footer-btn:hover,
.terms-close-footer-btn:focus {
  /* hover 시에도 그라디언트를 유지하면서 색상을 변경 */
  background: linear-gradient(90deg, #b2a4e2 30%, #d6c9f7 100%); /* #d6c9f7를 시작으로 다른 연한 색상과 그라디언트 */
  color: #348BEE; /* 텍스트 색상은 그대로 유지 또는 변경 */
  box-shadow: 0 4px 15px rgba(52, 139, 238, 0.3); /* 그림자 효과 강화 */
  outline: none; /* 포커스 시 기본 아웃라인 제거 (선택 사항) */
}
/* .terms-close-footer-btn {
  background: #2057a4;
  color: #fff;
  font-size: 1.08rem;
  border-radius: 9px;
  padding: 9px 28px;
  margin: 0 0 0 12px;
  box-shadow: 0 2px 12px rgba(36,66,116,0.06);
  border: none;
  opacity: 0.82;
  transition: background 0.17s;
}
.terms-close-footer-btn:hover {
  background: #114d8d;
  color: #f6d54d;
} */

/* ---- 반응형 ---- */
@media (max-width: 1350px) {
  .terms-modal-content { width: 96vw; height: 78vh; min-width: 0; }
  .terms-side-menu { width: 145px; font-size: 0.99rem; }
  .terms-content-area { padding: 22px 4vw 22px 4vw; }
}
@media (max-width: 900px) {
  .terms-modal-content { flex-direction: column; width: 99vw; min-width: 0; max-width: 100vw; height: 98vh; }
  .terms-side-menu { width: 100%; min-width: 0; flex-direction: row; border-right: none; border-bottom: 1px solid #eee; padding: 0; }
  .terms-side-menu ul { display: flex; }
  .terms-side-menu li { padding: 10px 12px; font-size: 0.93rem; border-left: none; border-bottom: 3px solid transparent;}
  .terms-side-menu li.active, .terms-side-menu li:hover { background: #e8f1fd; color: #1659c7; border-bottom: 3px solid #1659c7;}
  .terms-content-area { max-height: 60vh; padding: 13px 5vw 13px 5vw;}
  .terms-modal-header, .terms-modal-footer { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 520px) {
  .terms-content-area { padding: 4vw 2vw 4vw 2vw; font-size: 0.98rem;}
}

/* ---- 스크롤바(크롬/엣지) ---- */
.terms-content-area::-webkit-scrollbar { width: 7px; }
.terms-content-area::-webkit-scrollbar-thumb { background: #c5d7ed; border-radius: 10px; }
.terms-content-area::-webkit-scrollbar-track { background: #eef4fb; }