/* ============================================================
   조직도 — 수직 트리
   레퍼런스 실측(한국저작권위원회·대한상공회의소):
   위에서 아래로 내려오는 트리, 연결선이 ㄴ자로 꺾여 부모→자식을 잇는다.
   지휘계통 밖의 기구(감사·고문단)는 좌우로 떼어 놓는다.
   ============================================================ */
.tree {
  --ln: #BCC9C4;
  --drop: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
  padding: 4px 0 8px;
}
.tree > * { flex-shrink: 0; }

/* ---- 박스 ---- */
.tbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 152px;
  padding: 13px 22px;
  border-radius: 6px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.tbox em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: .8;
}
.tbox--head { background: var(--brand); color: #fff; min-width: 168px; font-size: 17px; }
.tbox--out {
  background: #fff;
  color: var(--ink-accent);
  border: 1px solid var(--brand);
  min-width: 132px;
  padding: 11px 18px;
  font-size: 14px;
}
.tbox--unit { background: var(--ink); color: #fff; width: 100%; font-size: 15px; }

/* ---- 세로 낙하선 ---- */
.tree__drop { width: 1px; height: var(--drop); background: var(--ln); }

/* ---- 층 ---- */
.tree__lv { display: flex; align-items: center; justify-content: center; }

/* 좌우로 떨어진 기구 + 잇는 가로선 */
.tree__aside { position: relative; display: flex; align-items: center; }
.tree__aside--l { padding-right: 46px; }
.tree__aside--r { padding-left: 46px; }
.tree__aside::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 46px;
  height: 1px;
  background: var(--ln);
}
.tree__aside--l::after { right: 0; }
.tree__aside--r::after { left: 0; }
/* 1층: 이사장을 중앙에 두기 위해 좌측에 빈 칸을 만든다 */
.tree__lv--1 { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto; align-items: center; }
.tree__lv--1 .tbox--head { grid-column: 2; grid-row: 1; }
.tree__lv--1 .tree__aside--r { grid-column: 3; grid-row: 1; align-items: center; }
/* 2층도 같은 3분할 격자 */
.tree__lv--2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.tree__lv--2 .tree__aside--l { grid-column: 1; grid-row: 1; justify-content: flex-end; }
.tree__lv--2 .tbox--head { grid-column: 2; grid-row: 1; }
.tree__lv--2 .tree__aside--r { grid-column: 3; grid-row: 1; }

/* ---- 3갈래 분기 ---- */
.tree__fork {
  --gap: 20px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: var(--gap);
  width: 100%;
  max-width: 860px;
  padding-top: var(--drop);
}
/* 가로 연결 바 */
/* 가로 바: 첫 칸 중심 ~ 마지막 칸 중심.
   3열 + gap 을 감안해 calc 로 정확히 맞춘다 (% 만 쓰면 gap 만큼 어긋난다). */
.tree__fork::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - var(--gap) * 2) / 6);
  right: calc((100% - var(--gap) * 2) / 6);
  height: 1px;
  background: var(--ln);
}
.tree__col { position: relative; display: flex; flex-direction: column; align-items: center; }
/* 각 부문으로 내려오는 선 */
.tree__col::before {
  content: "";
  position: absolute;
  top: calc(var(--drop) * -1);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: var(--drop);
  background: var(--ln);
}
/* 부문 → 하위 목록 사이 짧은 선 */
.tree__stub { width: 1px; height: 18px; background: var(--ln); }

/* ---- 하위 목록 ---- */
.tree__leaf {
  list-style: none;
  margin: 0;
  width: 100%;
  display: grid;
  gap: 8px;
}
.tree__leaf li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
  transition: border-color 150ms ease;
}
.tree__leaf li:hover { border-color: var(--brand); color: var(--ink-accent); }
.tree__leaf em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-3);
}

/* ---- 범례 ---- */
.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: -0.012em;
  color: var(--ink-3);
}
.chart__legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart__legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.chart__legend .is-head { background: var(--brand); }
.chart__legend .is-out  { background: #fff; border: 1px solid var(--brand); }
.chart__legend .is-unit { background: var(--ink); }

/* ============================================================
   860px 이하 — 좌우 기구를 아래로 내리고 세로로 편다
   ============================================================ */
@media (max-width: 860px) {
  .tree { --drop: 20px; }
  .tree__lv, .tree__lv--1 { flex-direction: column; gap: 12px; }
  .tree__aside--l, .tree__aside--r,
  .tree__lv--1 .tree__aside--r { padding: 0; }
  .tree__aside::after,
  .tree__lv--1 .tree__aside--r::after { display: none; }
  /* 좌우 기구는 본체 아래로 */
  .tree__lv--1 { flex-direction: column-reverse; }

  .tree__fork {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 420px;
    padding-top: var(--drop);
  }
  .tree__fork::before { left: 50%; right: auto; width: 1px; height: 0; }
  .tree__col::before { display: none; }
  .tree__col + .tree__col { padding-top: var(--drop); }
  .tree__col + .tree__col::before {
    display: block;
    top: 0;
    height: var(--drop);
  }
  .tbox, .tbox--head, .tbox--unit, .tbox--out { min-width: 0; width: 100%; }
  .tree__leaf li { text-align: left; }
}

/* ============================================================
   기구별 역할 표
   ============================================================ */
.org-roles { width: 100%; border-collapse: collapse; font-size: 15px; }
.org-roles caption { text-align: left; font-size: 13px; color: var(--ink-3); padding-bottom: 12px; }
.org-roles th, .org-roles td {
  text-align: left; padding: 16px 18px;
  border-bottom: 1px solid var(--rule); vertical-align: top;
  letter-spacing: -0.012em;
}
.org-roles thead th {
  background: var(--paper); font-size: 13px; font-weight: 600;
  color: var(--ink-3); border-bottom: 1px solid var(--rule-strong);
}
.org-roles tbody th { width: 168px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.org-roles td { color: var(--ink-2); line-height: 1.75; }
.org-roles tbody tr:last-child th, .org-roles tbody tr:last-child td { border-bottom: none; }

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }

@media (max-width: 700px) {
  .org-roles tbody th { width: auto; white-space: normal; }
  .org-roles th, .org-roles td { padding: 13px 14px; }
}

/* 선을 물리 픽셀에 스냅시킨다 — 소수 좌표에서 흐릿해지는 것을 막는다 */
.tree__drop,
.tree__stub,
.tree__aside::after,
.tree__fork::before,
.tree__col::before {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.tree__col::before { transform: translateX(-50%) translateZ(0); }

/* 감사 층 — 지휘계통 밖. 중앙 세로선 옆에 붙는다 */
.tree__lv--audit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  position: relative;
}
/* 중앙을 지나는 세로선 (이사장 → 협회장) */
.tree__lv--audit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ln);
  transform: translateX(-50%) translateZ(0);
}
.tree__lv--audit .tree__aside--r { grid-column: 3; grid-row: 1; }

@media (max-width: 860px) {
  .tree__lv--audit { grid-template-columns: 1fr; }
  .tree__lv--audit::before { display: none; }
  .tree__lv--audit .tree__aside--r { grid-column: 1; }
}

/* ---------- 임원진 ----------
   직위를 위에 작게, 이름을 크게 둔다. 이력은 추후 .ppl__bio 로 붙는다.
   사진이 없으므로 아바타 자리를 만들지 않는다 — 빈 원은 미완성으로 보인다. */
.ppl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.ppl__item {
  background: #fff;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
}
/* 마지막 줄이 덜 찼을 때 회색 빈칸이 드러나지 않게 폭을 늘린다 */

.ppl__role {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-accent);
}
.ppl__name {
  margin: 5px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.038em;
  color: var(--ink);
}
.ppl__note {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.68;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.ppl__bio {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  list-style: none;
  /* 이력 줄 수가 사람마다 달라도 카드 높이는 같게 유지한다.
     현재 최대 2줄 — 줄이 늘면 이 값을 함께 올려야 한다. */
  min-height: 66px;
}
.ppl__bio li {
  position: relative;
  padding-left: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.ppl__bio li + li { margin-top: 3px; }
.ppl__bio li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 3px;
  height: 3px;
  background: var(--ink-3);
}

@media (max-width: 1100px) {
  .ppl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  /* 2열에서는 3열 기준 규칙을 끄고 다시 잡는다 */
}
@media (max-width: 560px) {
  .ppl { grid-template-columns: 1fr; }
  .ppl__item { padding: 22px 20px 24px; }
}

/* 트리 리프 안의 담당자 이름 */
.tree__leaf li b {
  font-weight: 700;
  color: var(--ink-accent);
}

/* 부문별 담당 업무 표의 담당자 열 */
.org-roles__who {
  width: 96px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink) !important;
}
@media (max-width: 640px) {
  .org-roles__who { width: auto; }
}

/* 리프의 직위+이름은 한 줄에 둔다 (부모가 column flex 라 형제로 두면 줄이 갈라진다) */
.tree__leaf .tl {
  display: block;
  white-space: nowrap;
}

/* 박스 안의 사람 이름 — 부제(.tbox em)보다 또렷하게 */
.tbox__who {
  opacity: 1;
  font-weight: 600;
}

/* 아직 선임되지 않은 자리 */
.ppl__name--open {
  color: var(--ink-3);
  font-weight: 600;
}
/* 이름이 비어 있어도 줄 높이는 유지한다 — 없으면 카드 높이가 어긋난다 */
.ppl__name:empty::before {
  content: "";
  display: inline-block;
}
.org-roles__who--open { color: var(--ink-3) !important; font-weight: 500; }

/* 아직 선임되지 않은 자리 */
.ppl__item--vacant {
  background: var(--paper);
  align-items: center;
  justify-content: center;
  /* 내용이 한 줄뿐이라 그냥 두면 짜부라진다 — 이름+이력 카드와 같은 높이로 */
  min-height: 174px;
}
.ppl__vacant {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-3);
}