/* ==========================================================================
   Global Custom Styles for GITSAM Quarto Website
   ========================================================================== */

/* 모든 화면에서 한글 단어가 음절 단위로 쪼개지지 않도록 단어 단위 줄바꿈 보존 */
table,
.table {
  word-break: keep-all;
}

/* ==========================================================================
   Mobile Responsive Table Handling (Viewport <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Quarto 마크다운 테이블 자체를 가로 스크롤 블록 컨테이너로 전환 */
  table.table,
  .table:not(.dataframe) {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  /* Pandoc이 생성한 <col style="width: 20%"> 식의 강제 백분율 폭 오버라이드 */
  table.table col,
  .table:not(.dataframe) col {
    width: auto !important;
  }

  /* 헤더 및 데이터 셀의 패딩과 수직 정렬 정돈 */
  table.table th,
  table.table td,
  .table:not(.dataframe) th,
  .table:not(.dataframe) td {
    white-space: normal;
    vertical-align: middle;
    padding: 0.55rem 0.75rem;
  }

  /* 첫 번째 열: 시기/일자 (줄바꿈 방지) */
  table.table th:first-child,
  table.table td:first-child,
  .table:not(.dataframe) th:first-child,
  .table:not(.dataframe) td:first-child {
    min-width: 90px;
    white-space: nowrap;
  }

  /* 두 번째 열: 사건 명칭 */
  table.table th:nth-child(2),
  table.table td:nth-child(2),
  .table:not(.dataframe) th:nth-child(2),
  .table:not(.dataframe) td:nth-child(2) {
    min-width: 110px;
  }

  /* 세 번째 이상 열: 서술형 상세 설명 (충분한 최소 너비 부여) */
  table.table th:nth-child(n+3),
  table.table td:nth-child(n+3),
  .table:not(.dataframe) th:nth-child(n+3),
  .table:not(.dataframe) td:nth-child(n+3) {
    min-width: 155px;
  }
}

/* 범용 반응형 래퍼 지원 */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}