/**
 * organization.css
 * 의생명연구원 조직도 — 4단계 레벨 디자인 시스템
 *
 * 디자인 원칙:
 *  - Lv1: primary-900 배경 + 흰 텍스트 (최상위)
 *  - Lv2: primary-50 배경 + primary-500 border
 *  - Lv3: primary-25 배경 + primary-300 border
 *  - Lv4: white 배경 + primary-100 border
 *  - 공통: border 2px, radius-md(8px), 연결선 primary-100 2px solid
 *  - 최소 font-size: var(--fs-body) (fs-body)
 */

/* ===================================
   컨테이너
   =================================== */
.org-chart {
  padding: var(--space-8) 0 var(--space-14);
  width: 100%;
  overflow-x: auto;
}

.org-chart__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 1052px;
  width: 100%;
}

/* Tier 섹션(list) 간 여백 */
.org-chart__inner > .org-chart__list + .org-chart__connector {
  height: 32px;
}

/* 4col → 2col-center 사이 커넥터: 보스턴코리아와 같은 높이로 올림 */
.org-chart__trunk-wrap > .org-chart__list--4col + .org-chart__connector {
  height: 0;
}
.org-chart__list--2col-center {
  margin-top: -60px;
}

/* 연속 trunk 컨테이너: branch-row들을 감싸며 중앙에 끊기지 않는 세로선 */
.org-chart__trunk-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  position: relative;
}

/* 중앙 세로선 (전체 높이) */
.org-chart__trunk-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -24px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background-color: var(--color-primary-100);
  pointer-events: none;
  z-index: 0;
}

/* trunk-wrap 안의 branch-row는 자체 ::before 세로선 숨김 (trunk-wrap이 대신 그림) */
.org-chart__trunk-wrap > .org-chart__branch-row::before {
  display: none;
}

/* ===================================
   연결선 — 공통: primary-100, 2px, solid
   =================================== */
.org-chart__connector {
  width: 2px;
  height: 24px;
  background-color: var(--color-primary-100);
  flex-shrink: 0;
}

/* ===================================
   사이드 분기 행
   =================================== */
.org-chart__branch-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  width: 100%;
  position: relative;
}

.org-chart__branch-row::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background-color: var(--color-primary-100);
  pointer-events: none;
}

.org-chart__branch-main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.org-chart__branch-main-connector {
  flex: 1;
  width: 2px;
  background-color: var(--color-primary-100);
}

.org-chart__branch-side {
  grid-column: 3;
  justify-self: start;
  display: flex;
  align-items: center;
}

/* 왼쪽 분기 (IRB 등) */
.org-chart__branch-side--left {
  grid-column: 1;
  justify-self: end;
  flex-direction: row-reverse;
}

.org-chart__branch-hline {
  width: 48px;
  height: 2px;
  background-color: var(--color-primary-100);
  flex-shrink: 0;
}

.org-chart__branch-side-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 280px;
}

/* ===================================
   트리 레이아웃 (좌/중앙trunk/우 3열)
   =================================== */
.org-chart__tree {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  width: 100%;
}

/* 중앙 세로선 (trunk) */
.org-chart__tree-trunk {
  background-color: var(--color-primary-100);
}

/* 좌측 열 */
.org-chart__tree-col--left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-2) 0;
}

/* 우측 열 */
.org-chart__tree-col--right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

/* 노드 + 가로선 한 행 */
.org-chart__tree-node-row {
  display: flex;
  align-items: center;
}

/* 좌측: 노드가 flex:1, hline이 오른쪽 끝 → trunk에 연결 */
.org-chart__tree-col--left .org-chart__tree-node-row .org-node {
  flex: 1;
}

/* 우측: hline이 왼쪽 끝 → trunk에 연결, 노드가 flex:1 */
.org-chart__tree-col--right .org-chart__tree-node-row .org-node {
  flex: 1;
}

/* 좌측 하위 항목 (의생명연구원 아래 임상시험센터·중개의학연구소) */
.org-chart__tree-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: var(--space-12); /* hline 너비만큼 오프셋 → 노드 중앙 정렬 */
}

/* ===================================
   가로 리스트 (하단 병렬 배치)
   =================================== */
.org-chart__list {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
}

.org-chart__list::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% / 4);
  right: calc(100% / 4);
  height: 2px;
  background-color: var(--color-primary-100);
}

.org-chart__list--3col::before {
  left: calc(100% / 6);
  right: calc(100% / 6);
}

/* 2열 중앙 정렬 (4열 가운데 2칸과 동일 크기) */
.org-chart__list--2col-center {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
/* 드롭라인 제거, 수평선을 박스 세로 중앙에 위치 */
.org-chart__list--2col-center > .org-chart__item::before {
  display: none;
}
.org-chart__list--2col-center::before {
  top: 50%;
  transform: translateY(-1px); /* 2px 가로선을 50% 마크 중앙에 정렬 */
}

.org-chart__list--4col::before {
  left: calc(100% / 8);
  right: calc(100% / 8);
}

.org-chart__list--5col::before {
  left: calc(100% / 10);
  right: calc(100% / 10);
}

/* 4col 중앙 아이템(2,3번째): 드롭라인 제거, 세로 중앙 정렬 */
.org-chart__list--4col > .org-chart__item:nth-child(2)::before,
.org-chart__list--4col > .org-chart__item:nth-child(3)::before {
  display: none;
}
.org-chart__list--4col > .org-chart__item:nth-child(2),
.org-chart__list--4col > .org-chart__item:nth-child(3) {
  align-self: center;
}
/* 4col 수평 연결선: item2~item3 박스 세로 중앙을 관통 (sub 제외) */
.org-chart__list--4col:not(.org-chart__list--sub)::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-1px); /* 2px 가로선을 50% 마크 중앙에 정렬 */
  left: calc(3 * 100% / 8);
  right: calc(3 * 100% / 8);
  height: 2px;
  background-color: var(--color-primary-100);
  z-index: 0;
}
/* 4col 중앙 박스: 선 위에 표시 */
.org-chart__list--4col > .org-chart__item:nth-child(2) > .org-node,
.org-chart__list--4col > .org-chart__item:nth-child(3) > .org-node {
  position: relative;
  z-index: 1;
}

.org-chart__list--5col::before {
  left: calc(100% / 10);
  right: calc(100% / 10);
}

.org-chart__list--8col::before {
  left: calc(100% / 16);
  right: calc(100% / 16);
}

.org-chart__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-2);
  position: relative;
  overflow: visible;
}

.org-chart__item::before {
  content: '';
  width: 2px;
  height: 24px;
  background-color: var(--color-primary-100);
  flex-shrink: 0;
}

/* 세로 리스트 (산하 부서) */
.org-chart__item > .org-chart__list {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
}
.org-chart__item > .org-chart__list::before { display: none; }
.org-chart__item > .org-chart__list > .org-chart__item {
  flex: none;
  padding: 0;
}
.org-chart__item > .org-chart__list > .org-chart__item::before { display: none; }

/* 하위 수평 배치 리스트 (--sub): 부모 item 내에서도 수평 유지 */
.org-chart__item > .org-chart__list--sub {
  flex-direction: row;
  justify-content: center;
  gap: 0;
}
.org-chart__item > .org-chart__list--sub::before {
  display: block;
}
.org-chart__item > .org-chart__list--sub > .org-chart__item {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-1);
}
.org-chart__item > .org-chart__list--sub > .org-chart__item::before {
  display: block;
}
.org-chart__item > .org-chart__connector { height: 20px; }

/* lv3 → lv4 사이: 라인 짧게 */
.org-node--lv3 + .org-chart__connector {
  height: 10px;
}

/* lv4 그리드 → 다음 lv3 블록 사이: 간격으로 구분 */
.org-chart__grid + .org-chart__connector {
  height: 32px;
}

/* ===================================
   2열 그리드 (실험실 등)
   =================================== */
.org-chart__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  width: 100%;
}

.org-chart__grid > .org-node:last-child:nth-child(odd) {
  grid-column: 1;
}

/* ===================================
   중앙 정렬 lv2 노드 너비 제한
   =================================== */
.org-chart__inner > .org-node--lv2,
.org-chart__branch-main > .org-node--lv2 {
  width: auto;
  min-width: 120px;
  padding: var(--space-2) var(--space-4);
}

/* ===================================
   노드 공통
   =================================== */
.org-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  width: 100%;
  box-sizing: border-box;
  word-break: var(--word-break-base);
  overflow-wrap: break-word;
  /* 그림자: 평상시 없음, hover 시에만 부드러운 box-shadow */
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.org-node:hover {
  box-shadow: 0 4px 10px rgba(0, 54, 144, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .org-node { transition: none; }
}

/* 텍스트: 기본 줄바꿈 방지, 좁은 공간에서는 허용 */
.org-node__role {
  white-space: nowrap;
}
.org-chart__list--sub .org-node__role {
  white-space: nowrap;
}
.org-chart__list--sub .org-node--lv3 {
  min-width: auto;
  padding: 10px 28px;
}
.org-chart__list--sub .org-node--lv3 .org-node__role {
  font-size: var(--fs-small);
}
/* sub-list 내부 lv2/lv3 박스 폭 통일 (레벨 간 시각적 일관성) */
.org-chart__list--sub .org-node--lv2,
.org-chart__list--sub .org-node--lv3 {
  max-width: 160px;
  margin-left: auto;
  margin-right: auto;
}

/* sub 4col 리스트: 모든 아이템에 드롭라인 표시 + 수평 커넥터 제거 */
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(2)::before,
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(3)::before {
  display: block;
}
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(2),
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(3) {
  padding-top: 0;
}
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(2)::after,
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(3)::after {
  display: none;
}
/* sub 4col 아이템 간격 */
.org-chart__list--sub.org-chart__list--4col > .org-chart__item {
  padding: 0 var(--space-1);
}
/* sub 4col: 가운데 수평 연결선 제거 (상단 수평선만 유지) */
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(2) > .org-node::after,
.org-chart__list--sub.org-chart__list--4col > .org-chart__item:nth-child(3) > .org-node::after {
  display: none;
}

/* ===================================
   Lv1 (root): 최상위
   bg: primary-900, text: white, font: 22px bold
   =================================== */
.org-node--root {
  width: auto;
  min-width: 240px;
  padding: var(--space-4) var(--space-12);
  background-color: var(--color-primary-900);
  border-color: var(--color-primary-900);
  color: var(--color-white);
}
.org-node--root:hover {
  background-color: var(--color-primary-950);
  border-color: var(--color-primary-950);
}
.org-node--root .org-node__role {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.4;
  color: inherit;
}

/* ===================================
   Lv2: 본부/센터
   bg: primary-500, text: white, font: 20px bold
   =================================== */
.org-node--lv2 {
  min-width: 140px;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: var(--color-white);
}
.org-node--lv2:hover {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}
.org-node--lv2 .org-node__role {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.4;
  color: inherit;
}

/* ===================================
   Lv3: 팀/실
   bg: primary-50, border: primary-300, text: primary-900, font: 18px semibold
   =================================== */
.org-node--lv3 {
  min-width: 100px;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-white);
  border-color: var(--color-primary-500);
  color: var(--color-primary-900);
}
.org-node--lv3:hover {
  background-color: var(--color-primary-25);
}
.org-node--lv3 .org-node__role {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  line-height: 1.4;
  color: var(--color-primary-500);
}

/* ===================================
   Lv4: 세부
   bg: white, border: primary-100, text: text-secondary, font: 16px medium
   =================================== */
.org-node--lv4 {
  min-width: 100px;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-white);
  border-color: var(--color-primary-100);
  color: var(--color-text-secondary);
}
.org-node--lv4:hover {
  background-color: var(--color-primary-25);
}
.org-node--lv4 .org-node__role {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls);
  line-height: 1.4;
  color: inherit;
}

/* ===================================
   부수 텍스트 (영문/설명) — 공통
   허용 패턴:
     1) <span class="org-node__desc"> 또는 __sub  (별도 sibling)
     2) <small> 태그 (org-node__role 내부 또는 org-node 직계)
   배경별 컬러는 아래 노드 위계별 분기 규칙에서 처리
   =================================== */
.org-node__desc,
.org-node__sub,
.org-node__role small,
.org-node > small {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls);
  line-height: 1.3;
  margin-top: var(--space-1);
}

/* 파란 배경 (Lv1 root, Lv2): 살짝 연한 흰색 */
.org-node--root .org-node__desc,
.org-node--root .org-node__sub,
.org-node--root .org-node__role small,
.org-node--root > small,
.org-node--lv2 .org-node__desc,
.org-node--lv2 .org-node__sub,
.org-node--lv2 .org-node__role small,
.org-node--lv2 > small {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 흰 배경 (Lv3, Lv4, dashed): 회색 */
.org-node--lv3 .org-node__desc,
.org-node--lv3 .org-node__sub,
.org-node--lv3 .org-node__role small,
.org-node--lv3 > small,
.org-node--lv4 .org-node__desc,
.org-node--lv4 .org-node__sub,
.org-node--lv4 .org-node__role small,
.org-node--lv4 > small,
.org-node--dashed .org-node__desc,
.org-node--dashed .org-node__sub,
.org-node--dashed .org-node__role small,
.org-node--dashed > small {
  color: var(--color-gray-600) !important;
}

/* (제거) 형제 박스 stretch 룰은 자식 sub-list가 있는 박스에서 부모 박스가
   자식까지 모두 먹어버리는 부작용으로 인해 제거.
   대신 list-variant 별로 박스 간격/높이 통일을 별도 룰에서 처리. */

/* ===================================
   8col 박스 시각 분리 (1052 컨테이너 안에서 8박스 가로 균등 분할)
   사용자 정책: 모든 차트 1052에 맞춤. 8박스 row는 박스 폭 자동 축소 + 패딩으로 분리.
   - lv2 기본 min-width 140 무시: 박스가 item 폭에 맞춰 줄어들도록
   - role 폰트도 18→16으로 살짝 축소 (8박스 압축 환경 가독)
   =================================== */
.org-chart__list--8col > .org-chart__item {
  padding: 0 6px;
}
.org-chart__list--8col > .org-chart__item > .org-node--lv2 {
  min-width: 0;
  width: 100%;
  min-height: 140px; /* 글로벌전략기획실(role 2줄+desc 4줄) 자연 높이에 맞춤 */
  justify-content: center; /* 짧은 콘텐츠 박스(QI실, 약동력학실)도 세로 중앙 정렬 */
  padding: 10px var(--space-2);
}
.org-chart__list--8col > .org-chart__item > .org-node--lv2 .org-node__role {
  font-size: var(--fs-body);
  white-space: normal;
  word-break: var(--word-break-base);
  line-height: 1.3;
}

/* ===================================
   7-column 부서 행 (02_ctc 조직도: 7개 부서)
   8col 규칙 미러 + 가로 연결선 inset 100%/14
   =================================== */
.org-chart__list--7col::before {
  left: calc(100% / 14);
  right: calc(100% / 14);
}
.org-chart__list--7col > .org-chart__item {
  padding: 0 6px;
}
.org-chart__list--7col > .org-chart__item > .org-node--lv2 {
  min-width: 0;
  width: 100%;
  min-height: 140px;
  justify-content: center;
  padding: 10px var(--space-2);
}
.org-chart__list--7col > .org-chart__item > .org-node--lv2 .org-node__role {
  font-size: var(--fs-body);
  white-space: normal;
  word-break: var(--word-break-base);
  line-height: 1.3;
}
.org-chart__list--8col > .org-chart__item > .org-node--lv2 .org-node__desc {
  font-size: var(--fs-small);
  line-height: 1.25;
}

/* ===================================
   점선 테두리 노드
   =================================== */
.org-node--dashed {
  background-color: var(--color-white);
  border: none;
  color: var(--color-primary-900);
  background-image:
    repeating-linear-gradient(0deg, var(--color-primary-500), var(--color-primary-500) 4px, transparent 4px, transparent 7px),
    repeating-linear-gradient(90deg, var(--color-primary-500), var(--color-primary-500) 4px, transparent 4px, transparent 7px),
    repeating-linear-gradient(180deg, var(--color-primary-500), var(--color-primary-500) 4px, transparent 4px, transparent 7px),
    repeating-linear-gradient(270deg, var(--color-primary-500), var(--color-primary-500) 4px, transparent 4px, transparent 7px);
  background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}

.org-node--dashed .org-node__role {
  color: var(--color-primary-500);
}

.org-node--dashed:hover {
  background-color: var(--color-primary-25);
}

/* ===================================
   우측 계단형 트리
   좌측 세로선 + 각 노드로 가로선 분기
   │  ┌──────────┐
   ├──┤ 노드1    │
   │  └──────────┘
   │  ┌──────────┐
   ├──┤ 노드2    │
   │  └──────────┘
   │  ┌──────────┐
   └──┤ 노드3    │
      └──────────┘
   =================================== */
.org-chart__side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  padding-left: 50px;
}

/* 기존 전체 세로선 제거 — 아이템별 ::after로 대체 */
.org-chart__side-stack::before {
  display: none;
}

/* 각 노드 아이템 */
.org-chart__side-stack-item {
  position: relative;
}

/* 가로선: 좌측에서 노드까지 (각 아이템 세로 중앙) */
.org-chart__side-stack-item::before {
  content: '';
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-1px); /* 2px 가로선을 50% 마크 중앙에 정렬 */
  width: 50px;
  height: 2px;
  background-color: var(--color-primary-100);
}

/* 세로선: 현재 아이템 중앙 → 다음 아이템 중앙 (마지막 아이템 제외) */
.org-chart__side-stack-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -50px;
  top: calc(50% - 1px); /* 가로 stub와 동일 50% 정렬 */
  bottom: calc(-50% - 12px);
  width: 2px;
  background-color: var(--color-primary-100);
}

/* 중앙 2열 배치 (의학연구협력센터+융합의학과 등) */
.org-chart__pair {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
}

.org-chart__pair .org-node {
  flex: 0 1 200px;
}

/* ===================================
   클릭 가능 노드 (전화번호 보유)
   =================================== */
.org-node[data-tel],
.org-node[data-contacts],
.org-node[data-link] {
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.org-node[data-tel]:hover,
.org-node[data-contacts]:hover,
.org-node[data-link]:hover {
  box-shadow: 0 4px 16px rgba(0, 54, 144, 0.22);
  transform: translateY(-1px);
}

.org-node[data-tel]:focus-visible,
.org-node[data-contacts]:focus-visible,
.org-node[data-link]:focus-visible {
  outline: 3px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* ===================================
   중개의학연구소 하위 4col: 부모 flex 폭 제약 해제
   (중개의학연구소 li가 2-item 행의 50%만 차지해 4개 노드가 겹치는 문제 해결)
   =================================== */
.org-chart__list--sub > .org-chart__item > .org-chart__list--sub.org-chart__list--4col {
    min-width: 440px;
    width: max(100%, 440px);
}

/* ===================================
   연구기획관리실 하위 2개 팀: 부모 item을 flex:2로 확장해 공간 확보
   (sub-list overflow 방식은 인접 노드와 겹치므로, 부모 item 자체를 넓힘)
   =================================== */
.org-chart__list--4col > .org-chart__item--wide {
    flex: 2;
}

/* ===================================
   4col uneven 변형 (2:1:1:1 비율 전용)
   아이템 중심: [1] 20% · [2] 50% · [3] 70% · [4] 90%
   수평 연결선 위치를 새 비율에 맞춰 재배치.
   =================================== */
.org-chart__list--4col--uneven::before {
    left: 20%;
    right: 10%;
}
.org-chart__list--4col--uneven:not(.org-chart__list--sub)::after {
    left: 50%;
    right: 30%;
}

/* ===================================
   1단 4col을 2셀로 운용 (연구기획관리실 + 유효성 클러스터)
   trunk-wrap 직계 4col에 한해 적용 → 중개의학연구소 하위 4col과 격리
   의학연구협력센터/융합의학과는 별도 2col-center 행으로 이동됨
   =================================== */
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item:nth-child(1),
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item:nth-child(2) {
    flex: 1 1 0;
}
.org-chart__trunk-wrap > .org-chart__list--4col::before {
    left: calc(100% / 4);
    right: calc(100% / 4);
}
.org-chart__trunk-wrap > .org-chart__list--4col:not(.org-chart__list--sub)::after {
    display: none;
}
/* 2번 셀: 드롭라인 제거 — side-stack 세로선이 상단 수평선에 직접 연결 */
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item:nth-child(2)::before {
    display: none !important;
}

/* 연구부문 → 1단 사이 트렁크 연결선 연장 */
.org-chart__inner > .org-node--root + .org-chart__connector {
    height: 60px;
}
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item:nth-child(1) > .org-chart__list--sub {
    min-width: 0;
    width: 100%;
}
/* trunk-wrap 내부 커넥터 중앙 정렬 */
.org-chart__trunk-wrap > .org-chart__connector {
    align-self: center;
}

/* 2번 셀 side-stack: 유효성평가센터 가로선이 상단 수평선과 일직선 되도록 위로 올림 */
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item:nth-child(2) > .org-chart__side-stack {
    margin-top: -61.var(--space-2);
}
/* 유효성평가센터(첫 아이템) 가로선 제거 — 상단 수평선이 대신 연결 */
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item:nth-child(2) > .org-chart__side-stack > .org-chart__side-stack-item:first-child::before {
    display: none;
}
/* dashed 노드 크기 조정 */
.org-chart__trunk-wrap .org-chart__side-stack .org-node--dashed {
    padding: var(--space-2) var(--space-4);
    min-width: 100px;
}
.org-chart__trunk-wrap .org-chart__side-stack .org-node--dashed .org-node__role {
    font-size: var(--fs-body);
    line-height: 1.4;
}

/* ===================================
   1단 4col 노드 크기 제한 — 2아이템 flex 분할로 너무 커지는 문제 해결
   (연구기획관리실·유효성 group 노드들이 하위 팀 노드와 비슷한 크기감 유지)
   =================================== */
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item > .org-node {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.org-chart__trunk-wrap > .org-chart__list--4col > .org-chart__item > .org-node--dashed {
    max-width: 260px;
}

/* ===================================
   1단 → 2단 (의학연구협력센터/융합의학과) 간격 확보
   기본 .org-chart__list--2col-center { margin-top: -60px } 오버라이드
   (세로로 긴 유효성 group과 겹치는 문제 해결)
   =================================== */
.org-chart__trunk-wrap > .org-chart__list--4col ~ .org-chart__list--2col-center {
    margin-top: var(--space-6);
}

/* ===================================
   sub 세로 변형 (--col): 트렁크 + 가로 arm 패턴 (side-stack 영감)
   - 트렁크: list 좌측에 세로선 (list ::before)
   - 가로 arm: 각 item 좌측에서 트렁크까지 (item ::before)
   - 자식 박스들은 트렁크의 RIGHT 에 좌측 정렬
   기본 .org-chart__list--sub 가 row(가로) 라서, --col 추가 시 column(세로)로 override.
   =================================== */
.org-chart__item > .org-chart__list--sub.org-chart__list--col {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    padding-left: 60px;
    position: relative;
}
/* 트렁크 (좌측 세로선) — list 시작점에서 마지막 item 중앙까지 */
.org-chart__item > .org-chart__list--sub.org-chart__list--col::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 50%;
    width: 2px;
    background-color: var(--color-primary-100);
    z-index: 0;
    display: block;
}
.org-chart__item > .org-chart__list--sub.org-chart__list--col::after {
    display: none;
}
.org-chart__item > .org-chart__list--sub.org-chart__list--col > .org-chart__item {
    flex: none;
    width: auto;
    padding: 0;
    position: relative;
}
/* 가로 arm — 트렁크 → 박스 LEFT (각 item 좌측에 50px 가로선) */
.org-chart__item > .org-chart__list--sub.org-chart__list--col > .org-chart__item::before {
    content: '';
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-1px);
    width: 50px;
    height: 2px;
    background-color: var(--color-primary-100);
    display: block !important;
    z-index: 0;
}
/* col 모드 노드 폭 통일 */
.org-chart__list--sub.org-chart__list--col .org-node--lv2,
.org-chart__list--sub.org-chart__list--col .org-node--lv3 {
    min-width: 180px;
    max-width: 220px;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    z-index: 1;
}

/* ===================================
   --col 미러 변형 (--col-mirror): 트렁크가 RIGHT, 박스가 LEFT
   - 의생명연구원 좌측 자식(임상시험센터 산하)에 적용해 우측 자식(중개의학연구소 산하)과 좌우 대칭
   =================================== */
.org-chart__item > .org-chart__list--sub.org-chart__list--col.org-chart__list--col-mirror {
    align-items: flex-end;
    padding-left: 0;
    padding-right: 60px;
}
.org-chart__item > .org-chart__list--sub.org-chart__list--col.org-chart__list--col-mirror::before {
    left: auto;
    right: 9px;
}
.org-chart__item > .org-chart__list--sub.org-chart__list--col.org-chart__list--col-mirror > .org-chart__item::before {
    left: auto;
    right: -50px;
}

/* ===================================
   긴 connector (--long): 부모-자식 사이 세로선을 길게 빼서
   인접 컬럼(예: 의생명연구원 자식 sub-tree)과 시각적 충돌 회피
   =================================== */
.org-chart__connector--long {
    height: 80px;
}

/* ===================================
   전화번호 모달 내부 스타일
   =================================== */
.org-tel-modal__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.org-tel-modal__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--color-gray-300);
}

.org-tel-modal__row:last-child {
  border-bottom: none;
}

.org-tel-modal__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

/* 전화번호 + 이메일 세로 2줄 */
.org-tel-modal__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.org-tel-modal__tel,
.org-tel-modal__email {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-primary-700);
  text-decoration: none;
  white-space: nowrap;
}

.org-tel-modal__tel:hover,
.org-tel-modal__email:hover {
  text-decoration: underline;
}

/* 모달 최소 폭 */
#orgTelModal .modal__dialog {
  min-width: 480px;
}

/* 바로가기 없을 때 footer 영역 전체 숨김 */
#orgTelModal .modal__footer:has(> .is-hidden:only-child) {
  display: none;
}

#orgTelGoBtn.is-hidden {
  display: none;
}

@media (max-width: 767px) {
  #orgTelModal .modal__dialog {
    min-width: 0;
    width: 100%;
  }

  .org-tel-modal__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .org-tel-modal__contact {
    align-items: flex-start;
  }
}

/* ===================================
   02_ctc 인력 현황 — 컴팩트 카드 그리드
   (참고 시안 형태 유지, 색상은 프로젝트 토큰/아이콘은 라인 아이콘으로 대체)
   staff-status 한정 — 타 페이지 영향 없음
   =================================== */
.staff-status {
  max-width: 480px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.staff-status__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px var(--space-5);
  background-color: var(--color-primary-900);
  color: var(--color-white);
}
.staff-status__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-block);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.staff-status__brand svg { width: 22px; height: 22px; flex-shrink: 0; }
.staff-status__date {
  font-size: var(--fs-tag);
  color: var(--color-primary-100);
}
.staff-status__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.staff-status__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-gray-200);
  border-right: 1px solid var(--color-gray-200);
}
.staff-status__item:nth-child(3n) { border-right: none; }
.staff-status__icon { color: var(--color-gray-500); flex-shrink: 0; line-height: 0; }
.staff-status__icon svg { width: 26px; height: 26px; }
.staff-status__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.staff-status__label {
  font-size: var(--fs-tag);
  color: var(--color-gray-600);
  white-space: nowrap;
}
.staff-status__value {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary-700);
  line-height: 1.1;
}
.staff-status__total {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-top: 1px solid var(--color-gray-200);
}
.staff-status__total-label,
.staff-status__total-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--space-4);
}
.staff-status__total-label {
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
  font-weight: var(--fw-bold);
}
.staff-status__total-value {
  background-color: var(--color-primary-900);
  color: var(--color-white);
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-extrabold);
}
@media (max-width: 520px) {
  .staff-status { max-width: none; }
  .staff-status__label { white-space: normal; }
}

/* ===================================
   좌측 분기(운영위원회 등): 가로 연결선이 끊겨 보이는 문제 수정
   - 원인: 좌측 분기(grid-column:1)가 DOM상 부센터장(col2) 뒤에 와서
     sparse 자동배치로 2번째 행으로 밀려 부센터장과 세로로 어긋남
   - 해결: 좌측 분기를 명시적으로 같은 행(grid-row:1)에 고정하고
     행을 수직 중앙 정렬 → 부센터장 박스와 같은 높이, 가로선이 박스에 연결
   =================================== */
.org-chart__branch-row:has(.org-chart__branch-side--left) {
  align-items: center;
}
.org-chart__branch-row:has(.org-chart__branch-side--left) > .org-chart__branch-side--left {
  grid-row: 1;
}

/* ===================================
   센터장 ↔ 부센터장 연결선 구간(운영위원회 분기)
   - 구간에 높이를 줘 중앙 세로선이 센터장→부센터장으로 이어지도록 하고
   - 운영위원회를 구간 중앙에 두어 연결선 중간에서 가로로 분기
   =================================== */
.org-chart__branch-row--steering {
  min-height: 96px;
}
/* 운영위원회 박스 오른쪽 끝을 센터장 박스 왼쪽 끝과 일직선으로
   (가로선 = 중앙선~센터장 좌측, 즉 센터장 박스 폭의 절반 ≈ 142px) */
.org-chart__branch-row--steering .org-chart__branch-hline {
  width: 142px;
}