/* ===================================
   imt-intro.css
   융합의학기술원(IMT) 부서소개 > 소개 페이지 전용 스타일
   범위: 07_icmit/010_intro.html 한정
   =================================== */

/* ============================================
   1. 미션·비전 — BRI 표준 .mv-section.mv-mission/.mv-vision 사용
   페이지 고유 (헤드라인 강조 하이라이트)만 정의
   ============================================ */
.page-imt-intro .vm-headline__highlight {
  color: var(--color-primary-700);
}

/* 오시는 길 — 사진 비율 그대로 전폭 채움 (aspect-ratio 해제, height auto) */
.page-imt-intro .facility-map {
  aspect-ratio: auto;
  background-color: transparent;
}

.page-imt-intro .facility-map img {
  width: 100%;
  height: auto;
  object-fit: initial;
}

/* "대표전화" 4글자 라벨이 56px 기본값에 안 맞아 줄바꿈 발생 → 80px로 확장 */
.page-imt-intro .directions-detail__item dt {
  width: 80px;
}

/* ============================================
   2. 인사말 — BRI 표준 .greeting + .greeting-quote 공용 룰에 위임
   (페이지 prefix override 제거됨, 모든 사이트 BRI 통일)
   ============================================ */

/* 사인 이미지 — 서명 옆 표시 */
.page-imt-intro .greeting__signature {
  display: flex;
  align-items: center;
  gap: var(--gap-card-icon-text);
}

.page-imt-intro .greeting__signature-img {
  width: 80px;
  height: auto;
}

/* ============================================
   3. 연락처 표
   rowspan 셀로 인해 td의 border-bottom이 row 경계가 아닌 rowspan 끝에서만 그려져
   중간 구분선이 끊겨 보임 → tr 에 border-bottom 적용해 모든 행 경계에 선 그림.
   ============================================ */
.page-imt-intro .contact-info-section .table--label th[scope="row"] {
  font-weight: var(--fw-semibold);
}

.page-imt-intro .contact-info-section .table--label tbody tr {
  border-bottom: 1px solid var(--color-gray-100);
}

.page-imt-intro .contact-info-section .table--label tbody tr:last-child {
  border-bottom: 1px solid var(--color-gray-300);
}

.page-imt-intro .contact-info-section .contact-link {
  color: var(--color-gray-800);
  word-break: break-all;
}

.page-imt-intro .contact-info-section .contact-tel {
  white-space: nowrap;
}

/* ============================================
   4. 오시는 길
   ============================================ */
.page-imt-intro .directions {
  display: grid;
  grid-template-columns: minmax(320px, 480px) 1fr;
  gap: var(--gap-form-divider);
  align-items: start;
}

.page-imt-intro .directions__photo {
  margin: 0;
}

.page-imt-intro .directions__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
}

.page-imt-intro .directions__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-layout-tab-content);
}

.page-imt-intro .directions__group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-button-group);
}

.page-imt-intro .directions__group-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

.page-imt-intro .directions__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-button-group);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-imt-intro .directions__list li {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-gray-800);
}

.page-imt-intro .directions__contact {
  margin-top: var(--gap-button-group);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-300);
  display: flex;
  flex-direction: column;
  gap: var(--gap-button-group);
}

.page-imt-intro .directions__contact-item {
  display: flex;
  gap: var(--gap-inline-icon);
  font-size: var(--fs-small);
  color: var(--color-gray-800);
}

.page-imt-intro .directions__contact-label {
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
  flex-shrink: 0;
  min-width: 60px;
}

/* ============================================
   문의안내 박스 (014/013과 동일 패턴)
   ============================================ */
.page-imt-intro .contact-info {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--gap-layout-tab-content);
  column-gap: var(--gap-form-divider);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background-color: var(--color-gray-100);
}

.page-imt-intro .contact-info__item {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline-icon);
}

.page-imt-intro .contact-info__label {
  color: var(--color-gray-700);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}

.page-imt-intro .contact-info__value {
  color: var(--color-gray-900);
}

/* ============================================
   모바일
   ============================================ */
@media (max-width: 767px) {
  .page-imt-intro .vm-headline {
    font-size: var(--fs-title-md);
  }

  .page-imt-intro .greeting,
  .page-imt-intro .directions {
    grid-template-columns: 1fr;
    gap: var(--gap-layout-tab-content);
  }
}