/* ===================================
   ctc-facility.css
   임상시험센터 시설 소개 페이지(015) 전용 스타일
   범위: page-ctc-facility 한정
   =================================== */

/* 탭 패널 안 내용 상단 여백 — 탭 내부 첫 요소 마진 보정 */
.page-ctc-facility .tabs__panel > .content-block__text:first-child {
  margin-top: var(--space-4);
}

/* 탭 패널 안 icon-link-card-grid 상단 여백 */
.page-ctc-facility .tabs__panel > .icon-link-card-grid {
  margin-top: var(--space-5);
}

/* ===================================
   시설 소개 모달/패널 표 — 장문 셀 줄바꿈
   .table 전역 규칙(white-space:nowrap + overflow:hidden + ellipsis) 때문에
   기능 등 장문 셀이 한 줄로 잘리는 문제 해제. (시설소개 페이지 한정)
   table-layout은 fixed(전역) 유지 → colgroup(col-w-160) 라벨 열 너비 보존.
   =================================== */
.page-ctc-facility .modal__body .table tbody th,
.page-ctc-facility .modal__body .table tbody td,
.page-ctc-facility .tabs__panel .table tbody th,
.page-ctc-facility .tabs__panel .table tbody td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* ===================================
   시설 사진 갤러리 — 이미지 준비 전 플레이스홀더 슬롯
   (실제 사진 수령 시 각 item을 <img>로 교체)
   =================================== */
.page-ctc-facility .facility-gallery {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.page-ctc-facility .facility-gallery--2 {
  grid-template-columns: repeat(2, 1fr);
}
.page-ctc-facility .facility-gallery--3 {
  grid-template-columns: repeat(3, 1fr);
}
.page-ctc-facility .facility-gallery__item {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-500);
  font-size: var(--fs-small);
  overflow: hidden;
}
/* 실제 사진이 들어간 슬롯 — 이미지가 영역을 꽉 채우고 점선 테두리 제거 */
.page-ctc-facility .facility-gallery__item:has(img) {
  background: none;
  border: 1px solid var(--color-gray-200);
}
.page-ctc-facility .facility-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .page-ctc-facility .facility-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 모달 내 시설 갤러리 ──────────────────────────────
   모달은 .page-ctc-facility 래퍼 밖(body 레벨)에 렌더되어 위 스코프 규칙이 적용되지 않음.
   모달 갤러리를 균일 그리드로 정렬하되, 사진이 잘리지 않도록 자연 비율 유지(cover 크롭 미사용). */
.modal .facility-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.modal .facility-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.modal .facility-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.modal .facility-gallery__item {
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
}
.modal .facility-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .modal .facility-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ── 요청: 외래·코어랩 갤러리 사진이 4:3 프레임에서 잘리지 않고 전체가 보이도록 (cover→contain) ── */
.page-ctc-facility .facility-gallery[aria-label*="외래"] .facility-gallery__item img,
.page-ctc-facility .facility-gallery[aria-label*="코어랩"] .facility-gallery__item img {
  object-fit: contain;
}