/* ==========================================================
   010_intro.css
   임상연구윤리센터 > 부서 소개 페이지 전용 스타일
   - HRPP 거버넌스: 원형 시안을 tree형 4단으로 재구성
     (집행위 → 통합HRPP → 5개 기관 → 전문위)
   - 공용 .org-node 박스 재사용, 레이아웃만 페이지 전용
   - 연락처 표 컬럼 폭 조정
   ========================================================== */


/* ============================================================
   HRPP 거버넌스 (방사형 허브 인포그래픽 / Hub & Spoke)
   - 가운데 통합 HRPP 강조 원 (primary-900 배경, 집행위/전문위 통합 3단)
   - 5개 spoke은 인라인 SVG 백그라운드 layer로 그려짐
   - 5각형 5방위에 5개 기관 카드 박스 배치
   - 공용 .org-node 의존 없음 (페이지 전용 자립)
   ============================================================ */
/* 거버넌스 차트 외곽 박스 */
.hrpp-governance__frame {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-8);
  margin-top: var(--gap-layout-h2-body);
  background: var(--color-white);
}

.hrpp-governance {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}

/* spoke 백그라운드 layer (인라인 SVG, viewBox 800x600 = 컨테이너 비율) */
.hrpp-governance__spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hrpp-governance__spokes line {
  stroke: var(--color-primary-300);
  stroke-width: 2;
  stroke-linecap: round;
}
.hrpp-governance__spoke-dot {
  fill: var(--color-primary-500);
}

/* 통합 HRPP 중앙 노드 (강조 원형, 집행위/전문위 통합 3단) */
.hrpp-governance__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--color-primary-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 28px;
  z-index: 2;
  box-shadow: none;
}

/* 집행위/전문위 (박스 안 위·아래 보조 라벨) */
.hrpp-governance__center-committee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.hrpp-governance__center-committee-text {
  color: var(--color-primary-100);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2px;
  line-height: 1.2;
  white-space: nowrap;
}
.hrpp-governance__center-committee-arrow {
  color: var(--color-primary-100);
  font-size: var(--fs-small);
  line-height: 1;
}

/* 통합 HRPP 메인 텍스트 */
.hrpp-governance__center-text {
  color: var(--color-white);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

/* 5개 기관 노드 (카드형 박스) */
.hrpp-governance__institutions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hrpp-governance__institution {
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--color-white);
  border: 2px solid var(--color-primary-500);
  border-radius: 50%;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-gray-900);
  text-align: center;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transform: translate(-50%, -50%);
  box-shadow: none;
}

/* 5각형 배치 (viewBox 800x600 좌표를 % 변환, 가운데 50%/50% 기준) */
/* 의과대 — 12시 (400, 60) → (50%, 10%) */
.hrpp-governance__institution--top {
  top: 10%;
  left: 50%;
}
/* 서울대학교병원 — 72° (628, 226) → (78.5%, 37.7%) */
.hrpp-governance__institution--tr {
  top: 37.7%;
  left: 78.5%;
}
/* 분당 서울대학교병원 — 144° (541, 494) → (67.6%, 82.3%) */
.hrpp-governance__institution--br {
  top: 82.3%;
  left: 67.6%;
}
/* 서울특별시 보라매병원 — 216° (259, 494) → (32.4%, 82.3%) */
.hrpp-governance__institution--bl {
  top: 82.3%;
  left: 32.4%;
}
/* 서울대학교병원 강남센터 — 288° (172, 226) → (21.5%, 37.7%) */
.hrpp-governance__institution--tl {
  top: 37.7%;
  left: 21.5%;
}

/* ── 반응형: 767px 이하 → spoke 숨김, 세로 스택 ── */
@media (max-width: 767px) {
  .hrpp-governance__frame {
    padding: var(--space-5);
  }
  .hrpp-governance {
    aspect-ratio: auto;
    max-width: 100%;
    padding: var(--space-4) 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }
  .hrpp-governance__spokes {
    display: none;
  }
  .hrpp-governance__center,
  .hrpp-governance__institution,
  .hrpp-governance__institution--top,
  .hrpp-governance__institution--tr,
  .hrpp-governance__institution--br,
  .hrpp-governance__institution--bl,
  .hrpp-governance__institution--tl {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }
  .hrpp-governance__center {
    width: 200px;
    height: 200px;
  }
  .hrpp-governance__institutions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    width: 100%;
    padding: 0 var(--space-4);
  }
  .hrpp-governance__institution {
    width: auto;
    height: auto;
    border-radius: 12px;
    padding: 14px var(--space-3);
    white-space: normal;
  }
  .hrpp-governance__institution--top {
    grid-column: 1 / -1;
  }
}



/* ============================================================
   연락처 섹션 (content-body__title + .table.table--striped 반복)
   ============================================================ */
.contact-section + .contact-section {
  margin-top: var(--gap-layout-page-header); /* var(--space-10) */
}

/* 연락처 표 컬럼 폭 */
.table .col-task    { width: 58%; }
.table .col-contact { width: 42%; }

/* 좁은 화면에서 셀 내용 줄바꿈 허용 */
.table .col-task,
.table .col-contact {
  word-break: var(--word-break-base);
}