/*
 * LightContItemPrdDtlMdType1/2/3 모달 전용 CSS
 */

/* -----------------------------------------------------------
 * 폰트 정규화
 * 사이트 reset.css가 `body, table, button, input, select, textarea`에
 * Noto Sans KR을 직접 지정해 두어, 모달 내부 표/입력 요소가 Pretendard로
 * 렌더되지 않는 문제를 해결한다. (font-weight 차이로 보장내용 모달의
 * 'h3'·테이블 라인이 퍼블본과 다르게 보이던 원인)
 * ----------------------------------------------------------- */
.light-cont-item-prd-dtl-md-type1,
.light-cont-item-prd-dtl-md-type1 *,
.light-cont-item-prd-dtl-md-type2,
.light-cont-item-prd-dtl-md-type2 *,
.light-cont-item-prd-dtl-md-type3,
.light-cont-item-prd-dtl-md-type3 * {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", "Helvetica Neue", sans-serif !important;
}

/* -----------------------------------------------------------
 * Type1 보장내용 모달 — 계약별 미니 테이블 첫 줄 상단 border 강조
 * border-collapse: collapse 환경에서 <tr>가 <table>보다 우선순위가 높아
 * `<table class="border-t border-text-primary">`(검정)을 `<tr class="border-[#DCDCDE]">`(회색)이
 * 덮어쓰는 문제 해결. 첫 row의 top border 색만 검정으로 강제.
 * ----------------------------------------------------------- */
.light-cont-item-prd-dtl-md-type1 tbody tr:first-child {
  border-top-color: #1d1d1f !important;
}

/* -----------------------------------------------------------
 * Type2 가입예시 — iOS 가로스크롤 버그 회피용 스크롤바 숨김
 * 퍼블본(LightContItemPrdDtlMdType2.html:1065~1074) 원본 그대로
 * ----------------------------------------------------------- */
.light-cont-item-prd-dtl-md-type2,
.light-cont-item-prd-dtl-md-type2 * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.light-cont-item-prd-dtl-md-type2::-webkit-scrollbar,
.light-cont-item-prd-dtl-md-type2 *::-webkit-scrollbar {
  display: none;
}

.premium-table-scroll {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.premium-table-body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* -----------------------------------------------------------
 * Type3 가입시 알아야할 사항
 * API HTML 청크(noticeInfo)에 인라인 `width: 480px`이 박혀 있어
 * 모달과 컨텐츠 사이에 공백이 생긴다. 폭을 모달 너비로 맞춤.
 * ----------------------------------------------------------- */
.light-cont-item-prd-dtl-md-type3 table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto;
}