@charset "UTF-8";
/* ============================================================================
   saju-policy-modal.css — 약관·정책 모달 (개인정보처리방침 / 이용약관 / 환불정책)
   Material 3 Dialog 규격. 허브 레이아웃([layout]sjh.jsp)이 로드한다.

   ★ 왜 이 파일이 생겼나 (2026-08-29 CEO 제보)
     세 모달은 sjuF.css 의 `.saju-page .modal-*` 스타일을 쓰려고 만들어졌는데,
     레이아웃에서 `.saju-page` 래퍼 '바깥'에 놓여 있어 그 규칙이 전혀 걸리지 않았다.
     결과: 배경 없는 투명 박스 + 본문은 묵색 글자 → 90% 검정 스크림 위에서
     아무것도 안 보임(특히 모바일). 래퍼를 옮기는 대신, 레이아웃 소유의 독립 스타일을
     둬서 1.0 화면(.saju-page)에 영향 없이 이 세 개만 M3 로 정리한다.

   ★ 규격
     - PC  : Basic dialog — 중앙 정렬 카드, 아이보리 surface, radius 28, elevation 3
     - 모바일: Full-screen dialog — 화면 전체, 헤더 고정, 본문만 스크롤
     - 스크림: M3 scrim(on-surface 32%) 기준으로 낮춤. 종전 rgba(0,0,0,.9)는
              대비가 과해 카드 경계가 사라져 있었다.
     - display 는 jQuery .show()/closeModal() 이 인라인으로 제어한다.
       그래서 여기서 display 를 !important 로 잠그면 안 된다.
   ========================================================================== */

.sjh-policy-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(26, 31, 46, 0.62);        /* 묵색 스크림 */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 40px 16px;
  box-sizing: border-box;
}

/* ── M3 Dialog surface ───────────────────────────────────────────────────── */
.sjh-policy-modal .modal-content {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-bg-base, #F2EDE3);
  color: var(--color-text-ink, #1A1F2E);
  border: 0;
  border-radius: 28px;                        /* M3 large */
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18);
  padding: 0;
  text-align: left;
  overflow: hidden;
}

/* 헤더 — 스크롤해도 제목과 닫기가 남는다 */
.sjh-policy-modal .modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 20px 24px 14px;
  background: var(--color-bg-base, #F2EDE3);
  border-bottom: 1px solid rgba(26, 31, 46, 0.10);
}
.sjh-policy-modal .modal-title {
  margin: 0;
  font-family: var(--font-sans, 'Pretendard', 'Apple SD Gothic Neo', sans-serif);
  font-size: 22px;                            /* M3 headline-small */
  line-height: 1.36;
  font-weight: 700;
  color: var(--color-text-ink, #1A1F2E);
}

/* 닫기 — M3 Icon button(40px 터치 타깃 + state layer) */
.sjh-policy-modal .modal-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-steel, #5C6670);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sjh-policy-modal .modal-close:hover { background: rgba(26,31,46,0.08); color: var(--color-text-ink, #1A1F2E); }
.sjh-policy-modal .modal-close:focus-visible { outline: 2px solid var(--color-amber, #D4A24C); outline-offset: 2px; }

/* ── 본문 — 법적 고지라 길다. 가독성 우선(body-medium 상향) ───────────────── */
.sjh-policy-modal .modal-body-container {
  padding: 20px 24px 28px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-ink, #1A1F2E);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 원격(sjuF0190~0192.ajax)에서 오는 마크업은 다크 화면 기준 색을 품고 올 수 있다.
   여기서 명시적으로 되돌린다 — 안 그러면 같은 '안 보임' 이 재발한다. */
.sjh-policy-modal .modal-body-container,
.sjh-policy-modal .modal-body-container * { color: inherit; }
.sjh-policy-modal .modal-body-container h1,
.sjh-policy-modal .modal-body-container h2,
.sjh-policy-modal .modal-body-container h3,
.sjh-policy-modal .modal-body-container h4 {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.sjh-policy-modal .modal-body-container h1:first-child,
.sjh-policy-modal .modal-body-container h2:first-child,
.sjh-policy-modal .modal-body-container h3:first-child { margin-top: 0; }
.sjh-policy-modal .modal-body-container p  { margin: 0 0 12px; }
.sjh-policy-modal .modal-body-container ul,
.sjh-policy-modal .modal-body-container ol { margin: 0 0 12px; padding-left: 20px; }
.sjh-policy-modal .modal-body-container li { margin: 0 0 6px; }
.sjh-policy-modal .modal-body-container a  { color: #8A6A22; text-underline-offset: 2px; }  /* 아이보리 위 황등은 대비 미달 → 톤다운 */
.sjh-policy-modal .modal-body-container table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.sjh-policy-modal .modal-body-container th,
.sjh-policy-modal .modal-body-container td { border: 1px solid rgba(26,31,46,0.16); padding: 8px 10px; text-align: left; }
.sjh-policy-modal .modal-body-container th { background: rgba(26,31,46,0.05); font-weight: 700; }
.sjh-policy-modal .no-review { padding: 24px 0; text-align: center; color: var(--color-steel, #5C6670); }

/* ── 모바일: M3 Full-screen dialog ───────────────────────────────────────── */
@media (max-width: 600px) {
  .sjh-policy-modal { padding: 0; background: rgba(26, 31, 46, 0.62); }
  .sjh-policy-modal .modal-content {
    max-width: none;
    min-height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sjh-policy-modal .modal-header { padding: 14px 16px 12px; }
  .sjh-policy-modal .modal-title  { font-size: 19px; }
  .sjh-policy-modal .modal-body-container { padding: 16px 16px 40px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sjh-policy-modal, .sjh-policy-modal .modal-content { transition: none; }
}