/* ===================================
   imt-device.css
   융합의학기술원(IMT) 전주기의료기기연구센터 페이지 전용 스타일
   범위: 07_icmit/014_device.html 한정
   =================================== */

.page-imt-device .content-body__section .content-body__title + .device-gallery,
.page-imt-device .content-body__section .content-body__title + .device-figure,
.page-imt-device .content-body__section .content-body__title + .content-block__image,
.page-imt-device .content-body__section .content-body__title + .table-wrap,
.page-imt-device .content-body__section .content-body__title + .content-block__text {
  margin-top: var(--gap-card-icon-text);
}

/* 인프라/시설 갤러리 — 2열 (시제품제작 보유 장비) */
.page-imt-device .device-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-card-icon-text);
}

.page-imt-device .device-gallery figure {
  margin: 0;
}

.page-imt-device .device-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-gray-100);
}

.page-imt-device .device-gallery figcaption {
  margin-top: var(--gap-button-group);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-gray-600);
}

/* 단일 device-figure (--wide/--narrow) 제거 — 표준 .content-block__image (--frame, --sm)으로 마이그레이션 완료
   .device-figure base 규칙은 --side-by-side 컨테이너용으로만 유지 */
.page-imt-device .device-figure {
  margin: 0;
}

/* 갤러리 ↔ 표 사이 여백 */
.page-imt-device .device-gallery + .table-wrap,
.page-imt-device .content-block__image + .table-wrap {
  margin-top: var(--gap-layout-h2-body);
}

/* 인허가 절차 — 1·2등급 / 3·4등급 2열 */
.page-imt-device .device-figure--side-by-side {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-card-icon-text);
}

.page-imt-device .device-figure--side-by-side figure {
  margin: 0;
  text-align: center;
}

.page-imt-device .device-figure--side-by-side img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-gray-50);
}

.page-imt-device .device-figure--side-by-side figcaption {
  margin-top: var(--gap-button-group);
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  font-weight: var(--fw-medium);
}


/* 사용적합성 엔지니어링 프로세스 SVG 플로우차트 */
.page-imt-device .uep-flowchart {
  width: 100%;
  height: auto;
  display: block;
}

/* 인허가 절차 SVG 다이어그램 (1열, 카드 박스) */
.page-imt-device .regulatory-diagram {
  margin: var(--gap-layout-h3-body) 0 0;
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.page-imt-device .regulatory-diagram svg {
  width: 100%;
  min-width: 600px;
  height: auto;
  display: block;
}

/* 모바일: 갤러리 1열, 인허가 절차 1열, 문의 세로 배치 */
@media (max-width: 767px) {
  .page-imt-device .device-gallery,
  .page-imt-device .device-figure--side-by-side {
    grid-template-columns: 1fr;
  }

}

/* 사용적합성 엔지니어링 프로세스 SVG — 노드/뱃지/텍스트/연결선 */
.uep-box {
  fill: var(--color-white);
  stroke: var(--color-primary-900);
  stroke-width: 1.5;
}
.uep-badge {
  fill: var(--color-white);
  stroke: var(--color-gray-400);
  stroke-width: 1;
}
.uep-txt {
  font-family: var(--font-family);
  font-size: var(--fs-tag);
  fill: var(--color-text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
}
.uep-badge-txt {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-gray-600);
  text-anchor: middle;
  dominant-baseline: middle;
}
.uep-ln { stroke: var(--color-gray-400); stroke-width: 1.5; fill: none; }

/* 평가 수행 절차 타임라인 SVG — 주석/기간/막대/숫자/메모/원/박스/선 */
.ut-annot   { font-family: var(--font-family); font-size: var(--fs-small); fill: var(--color-gray-500); text-anchor: middle; }
.ut-period  { font-family: var(--font-family); font-size: var(--fs-small); fill: var(--color-gray-700); text-anchor: middle; }
.ut-bar     { font-family: var(--font-family); font-size: var(--fs-body); font-weight: bold; fill: var(--color-white); text-anchor: middle; dominant-baseline: middle; }
.ut-num     { font-family: var(--font-family); font-size: var(--fs-small); font-weight: bold; fill: var(--color-white); text-anchor: middle; dominant-baseline: central; }
.ut-note    { font-family: var(--font-family); font-size: var(--fs-small); fill: var(--color-gray-800); text-anchor: middle; dominant-baseline: central; }
.ut-circle  { fill: var(--color-primary-900); stroke: none; }
.ut-box     { fill: var(--color-white); stroke: var(--color-gray-400); stroke-width: 1; }
.ut-dash    { stroke: var(--color-gray-500); stroke-width: 1; stroke-dasharray: 4,3; fill: none; }
.ut-bracket { stroke: var(--color-gray-500); stroke-width: 1; fill: none; }

/* 인허가 절차 플로우차트 SVG — 박스/텍스트/연결선 */
.cf-box { fill: var(--color-white); stroke: var(--color-primary-900); stroke-width: 1.5; }
.cf-txt {
  font-family: var(--font-family);
  font-size: 13px;
  fill: var(--color-text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
}
.cf-ln { stroke: var(--color-gray-400); stroke-width: 1.5; fill: none; }