/* ==========================================================
   022_biosafety_organization.css
   생물안전위원회 조직도 전용 스타일
   - 좌측 root (서울대학교병원장) → 수평 연결선 → 우측 위원회 그룹 박스
   - 개별 박스는 공용 .org-node / .org-node--lv2 재사용
   - 위원회 그룹 프레임 + 파란 제목은 페이지 전용 확장
   ========================================================== */

.biosafety-org {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
  margin: 0 auto;
  max-width: 900px;
}

/* ── 좌측 루트 (서울대학교병원장) ── */
.biosafety-org__root {
  flex: 0 0 auto;
  width: 200px;
}

/* ── 수평 연결선 (root → committee) ── */
.biosafety-org__connector {
  flex: 0 0 80px;
  height: 2px;
  background: var(--color-primary-500);
}

/* ── 우측 위원회 그룹 박스 ── */
.biosafety-org__committee {
  flex: 0 0 auto;
  width: 420px;
  border: 2px solid var(--color-primary-500);
  border-radius: var(--radius-md);
  padding: 28px var(--space-8);
  background: var(--color-white);
}

.biosafety-org__committee-title {
  margin: 0 0 var(--space-5);
  color: var(--color-primary-700);
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  text-align: center;
}

.biosafety-org__committee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.biosafety-org__committee-item {
  display: block;
}

/* ==========================================================
   반응형 (1020px 이하: 세로 스택)
   ========================================================== */
@media (max-width: 1020px) {
  .biosafety-org {
    flex-direction: column;
    padding: var(--space-6) var(--space-4);
  }

  .biosafety-org__root {
    width: 100%;
    max-width: 300px;
  }

  .biosafety-org__connector {
    flex: 0 0 40px;
    width: 2px;
    height: 40px;
  }

  .biosafety-org__committee {
    width: 100%;
    max-width: 479px;
    padding: var(--space-6) var(--space-5);
  }
}