@charset "UTF-8";
/* ════════════════════════════════════════════════
   검색 조건 : 가운데 정렬
════════════════════════════════════════════════ */
.list-filter {
  align-items: center;
}
.list-filter__row--detail {
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.list-filter__actions--desktop {
  flex-shrink: 0;
}

/* 태블릿: 셀렉트 + 검색 버튼 한 줄 유지 */
@media (min-width: 768px) and (max-width: 1279px) {
  .list-filter__row--detail {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .list-filter__row--detail .list-filter__field--region {
    flex: 0 1 auto;
    width: auto;
  }
  .list-filter__row--detail .list-filter__selects {
    display: flex;
    width: auto;
  }
  .list-filter__actions--desktop {
    display: flex;
  }
  .list-filter__actions--mobile {
    display: none;
  }
}

/* 모바일: 셀렉트 2열 + 검색 버튼 아래(구분선) */
@media (max-width: 767px) {
  .list-filter {
    align-items: stretch;
  }
  .list-filter__row--detail {
    display: contents;
  }
  .list-filter__field--region {
    width: 100%;
  }
  .list-filter__selects {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .list-filter__select {
    width: 100%;
    flex-basis: auto;
  }
  .list-filter__actions--desktop {
    display: none;
  }
  .list-filter__actions--mobile {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 19px;
    border-top: 1px solid #d6e0eb;
  }
  .list-filter__actions--mobile .list-button {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════
   PC 테이블 합계 행 배경색
════════════════════════════════════════════════ */
.bg_th {
  background: #f0f7fc;
}

/* ════════════════════════════════════════════════
   표 상단 기준일 타이틀
════════════════════════════════════════════════ */
.acdnt-table-title {
  font-size: 0.9rem;
  color: #555;
  text-align: right;
  margin: 0 0 6px;
}

/* ════════════════════════════════════════════════
   차트 영역
   - PC  : .chart_wrap       → 바 차트 (기본 표시)
   - 모바일 : .chart_wrap_mobile → 도넛 차트 (기본 숨김)
   ※ JS applyResponsiveLayout 이 jQuery .hide()/.show() 로 제어
     → 인라인 style 로 덮으므로 여기선 초기값만 정의
════════════════════════════════════════════════ */
.chart_wrap        { display: block; }
.chart_wrap_mobile { display: none; padding: 16px 0 8px; }

/* 차트 안내 문구 */
.chart_wrap_mobile .chart-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #d35400;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #fff8f2;
  border: 1px solid #f0c090;
  border-radius: 6px;
}
/* 도넛 차트 래퍼
   ─ 너비만 고정, 높이는 Chart.js 가 aspect-ratio=1 로 자동 산정
   ─ canvas 에 CSS height 를 강제하지 않아야 Chart.js 가 1:1 을 유지함 */
.chart_wrap_mobile .chart-canvas-box {
  width: min(80vw, 300px);
  margin: 0 auto;
}
/* canvas 에 width 만 제한 — height 는 Chart.js 가 결정 */
.chart_wrap_mobile .chart-canvas-box canvas {
  max-width: 100%;
}

/* ════════════════════════════════════════════════
   데이터 테이블 영역
   - PC  : .acdnt-table-desktop → 매트릭스  (기본 표시)
   - 모바일 : .acdnt-table-mobile  → 수직 2열 (기본 숨김)
   ※ style.css @media(max-width:1024px) .data-table-wrap{display:none} 대응:
     JS 가 직접 인라인 style 을 세팅하므로 CSS !important 불필요
     → .acdnt-table-desktop 에 초기 display:block 만 지정
════════════════════════════════════════════════ */
.acdnt-table-desktop { display: block; }
.acdnt-table-mobile  { display: none; overflow-x: visible; }

/* 모바일 테이블 스타일 (data-table-wrap 클래스 미사용 → style.css 간섭 없음) */
.acdnt-table-mobile table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: #333;
  font-size: 15px;
  border-top: 2px solid #466eaf;
}
.acdnt-table-mobile table th,
.acdnt-table-mobile table td {
  padding: 10px 14px;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
}
.acdnt-table-mobile table td.left { text-align: left; }
.acdnt-table-mobile table thead th,
.acdnt-table-mobile table tfoot th {
  background: #f0f7fc;
  font-weight: 600;
}

/* ════════════════════════════════════════════════
   CSS 미디어쿼리 방어선 — JS .hide()/.show() 와 이중 적용
   style.css 에 !important 가 있어도 이 규칙이 후순위이므로 우선 적용
════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  .chart_wrap           { display: none   !important; }
  .chart_wrap_mobile    { display: block  !important; }
  .acdnt-table-desktop  { display: none   !important; }
  .acdnt-table-mobile   { display: block  !important; }
}
/* style.css @media(max-width:1024px)의 .data-table-wrap{display:none} 을
   769px~1024px 구간에서 무력화 — JS 가 inline style 로 덮으므로 여기선 불필요
   (JS 가 먼저 실행되지 않는 SSR 혹은 NoScript 대비 CSS 방어선) */
@media screen and (min-width: 769px) {
  .acdnt-table-desktop { display: block !important; }
}

/* ==========================================================================
   중대사고 상세 현황 (acdntDetailList)
   ========================================================================== */

/* 요약 정보 */
.accident-detail__summary {
  margin-bottom: 32px;
}

.accident-detail__count {
  font-size: 16px;
  color: #555555;
}

.accident-detail__count strong {
  font-weight: 700;
  color: #111111;
}

/* 사고원인 그룹 */
.accident-group {
  margin-bottom: 56px;
}

.accident-group__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  padding: 14px 20px;
  margin-bottom: 20px;
  background-color: #f5f7fb;
  border-left: 4px solid #1c5fad;
  border-radius: 0 8px 8px 0;
}

.accident-group__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 사고 카드 */
.accident-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  border: 1px solid #d9dde8;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
}

/* 이미지 영역 */
.accident-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f7;
  min-height: 240px;
  overflow: hidden;
}

.accident-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.accident-card__no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 240px;
  font-size: 14px;
  color: #999999;
  background-color: #f0f2f7;
}

/* 정보 테이블 영역 */
.accident-card__content {
  overflow: hidden;
}

.accident-card__table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.accident-card__table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.accident-card__table th,
.accident-card__table td {
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.6;
  border: 1px solid #d9dde8;
  vertical-align: middle;
  word-break: keep-all;
}

.accident-card__table tr:first-child th,
.accident-card__table tr:first-child td {
  border-top: none;
}

.accident-card__table th {
  background-color: #f5f7fb;
  font-weight: 600;
  color: #333333;
  white-space: nowrap;
  text-align: left;
  width: 140px;
}

.accident-card__table td {
  color: #444444;
}

.accident-card__col--label {
  width: 140px;
}

.accident-card__cell--multiline {
  white-space: pre-line;
  vertical-align: top;
  line-height: 1.75;
}

/* 반응형 */
@media (max-width: 1024px) {
  .accident-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .accident-group__heading {
    font-size: 19px;
    padding: 12px 16px;
  }
}

@media (max-width: 768px) {
  .accident-card {
    grid-template-columns: 1fr;
  }

  .accident-card__media {
    min-height: 200px;
  }

  .accident-group__heading {
    font-size: 17px;
    padding: 10px 14px;
    margin-bottom: 14px;
  }

  .accident-group {
    margin-bottom: 40px;
  }

  .accident-card__table th {
    width: 110px;
    white-space: normal;
    font-size: 14px;
    padding: 10px 12px;
  }

  .accident-card__table td {
    font-size: 14px;
    padding: 10px 12px;
  }
}