/* ============================================================
   조직도 — 수직 트리
   레퍼런스 실측(한국저작권위원회·대한상공회의소):
   위에서 아래로 내려오는 트리, 연결선이 ㄴ자로 꺾여 부모→자식을 잇는다.
   지휘계통 밖의 기구(감사·고문단)는 좌우로 떼어 놓는다.
   ============================================================ */
.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; }
}