/* ===============================
     visit_policy_content.jsp 전용 CSS
 =============================== */
/* 두 번째 섹션부터 윗부분에 선을 추가 (첫 번째 섹션은 제외) */
.policy-section + .policy-section {
  margin-top: 30px;
  /* 선 위쪽 여백 */
  padding-top: 30px;
  /* 선 아래쪽 여백 */
  border-top: 1px solid #ddd;
  /* 연한 회색 실선 */
}

/* 테이블 가독성을 위해 상단 헤더 색상 살짝 조정 (선택사항) */
.table.table-bordered thead.thead-light th {
  background-color: #f8f9fa;
  text-align: center;
}

/* 모든 p 태그의 상하 간격을 줄임 */
.policy-content p {
  margin-top: 10px;
  /* 위쪽 간격 */
  margin-bottom: 10px;
  /* 아래쪽 간격 */
  line-height: 1.6;
  /* 줄 간격 (취향에 따라 1.4~1.6 추천) */
}

.policy-section p.ml-3 {
  margin-top: 5px;
  /* 위쪽 간격 제거 */
  margin-bottom: 5px;
  /* 아래쪽 간격을 5px로 고정 (원하는 만큼 조절) */
  line-height: 1.5;
  /* 줄 자체의 높이도 조절하면 더 촘촘해집니다 */
}

.policy-content ol.mb-4 {
  border: 1px solid #000;
  /* 검은색 실선 테두리 */
  padding: 20px 20px 20px 40px;
  /* 안쪽 여백 (상 우 하 좌) */
  border-radius: 4px;
  /* 모서리를 살짝 부드럽게 (선택사항) */
  background-color: #f9f9f9;
  /* 배경색을 살짝 넣으면 더 눈에 띕니다 (선택사항) */
  font-weight: bold;
}

.policy-content ol.mb-4 li {
  margin-bottom: 12px;
  /* 숫자를 키울수록 간격이 넓어집니다 */
  line-height: 1.6;
  /* 줄 간격도 살짝 넓혀주면 훨씬 보기 편해요 */
}

.policy-content {
  padding-left: 40px;
  padding-right: 40px;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .policy-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* 제목 간격 */
.policy-content h4 {
  font-weight: bold;
}

.policy-content h5 {
  margin-top: 2rem;
  font-weight: 600;
}

/* 리스트 가독성 */
.policy-content ol,
.policy-content ul {
  padding-left: 1.2rem;
}

/* 테이블 여백 */
.policy-content table {
  margin-top: 10px;
  margin-bottom: 20px;
}

/* 섹션 내부 첫 요소 간격 보정 */
.policy-section > p:first-of-type,
.policy-section > ul:first-of-type,
.policy-section > table:first-of-type {
  margin-top: 0.8rem;
}
/* [추가] 테이블 반응형 처리 */
.policy-content table {
  width: 100%;
  table-layout: fixed; /* 테이블 너비 고정하여 화면 밖으로 나가는 것 방지 */
  word-break: break-all; /* 긴 영문/숫자 줄바꿈 처리 */
  font-size: 0.85rem; /* 모바일에서는 표 글씨를 약간 작게 */
}

/* [추가] 모바일 전용 상세 설정 */
@media (max-width: 768px) {
  .policy-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* 모바일에서 테이블의 th 너비가 너무 넓으면 글자가 세로로 길어지므로 자동 조절 */
  .policy-content table th {
    width: auto !important;
    padding: 8px 4px !important;
  }

  /* 4열 테이블(보호책임자 부분)은 모바일에서 너무 좁으므로 스크롤 허용 */
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}