@charset "utf-8";
/* 발전지원재단 > 조직도 */

.orgchart-wrap{padding:12px 0 8px}
.orgchart__note{
  max-width:520px;margin:28px auto 0;padding:14px 20px;border-radius:var(--radius-m);
  background:var(--surface);border:1px solid var(--line);
  text-align:center;font-size:13.5px;line-height:1.7;color:var(--text-mid);word-break:keep-all;
}
.orgchart{
  display:flex;flex-direction:column;align-items:center;padding:4px 0;
}
.orgbox{
  min-width:150px;padding:14px 24px;border-radius:var(--radius-m);
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-s);
  text-align:center;font-size:15px;font-weight:800;color:var(--text);line-height:1.4;
}
.orgbox small{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin-top:2px}
.orgbox--top{
  background:linear-gradient(140deg,var(--brand),var(--navy));border-color:transparent;color:#fff;
  box-shadow:0 10px 24px rgba(59,117,192,.28);
}
.orgbox--top small{color:rgba(255,255,255,.78)}
.orgbox--sub{font-size:14px;font-weight:700;color:var(--brand-strong);border-color:var(--sky)}

/* ── 조직도 칸에 마우스를 올렸을 때 ────────────────────────────────
   칸이 4px 떠오르고 테두리가 파래지며 그림자가 깊어집니다.
   어느 자리를 보고 있는지 눈으로 짚어 드립니다.

   맨 위 이사장 칸은 이미 파란 바탕이라 테두리 대신 그림자만 깊게
   해서 같은 정도로 도드라지게 합니다.

   조직도 칸은 누르는 단추가 아니라 자리 이름을 적어 둔 칸이라,
   도드라지게만 하고 다른 동작은 넣지 않았습니다.                    */
.orgbox{
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.orgbox:hover{
  transform:translateY(-4px);
  border-color:var(--brand);
  box-shadow:0 14px 26px rgba(15,45,80,.18),
             0 0 0 3px rgba(0,116,176,.14);
}
.orgbox--top:hover{
  border-color:transparent;
  box-shadow:0 18px 34px rgba(59,117,192,.42);
}

/* ── 직원소개 표에서도 같은 방식으로 ──────────────────────────────
   줄이 여럿이라 눈이 옆줄로 새기 쉽습니다. 마우스가 놓인 줄만 옅게
   칠하고 왼쪽에 파란 띠를 세워, 지금 읽는 줄을 붙잡아 줍니다.
   글자색은 그대로라 읽기 쉬움은 달라지지 않습니다.                  */
.staff-table tbody tr th,
.staff-table tbody tr td{transition:background-color .18s, box-shadow .18s}
.staff-table tbody tr:hover th,
.staff-table tbody tr:hover td{background-color:var(--sky-soft)}
.staff-table tbody tr:hover th{box-shadow:inset 4px 0 0 var(--brand)}

/* 화면이 움직이면 어지러우신 분들께는 칸을 띄우지 않고
   테두리와 그림자만 바꿔 알려 드립니다. */
@media (prefers-reduced-motion:reduce){
  .orgbox:hover{transform:none}
}

.orgline{width:2px;height:28px;background:var(--line-strong)}

/* 여러 갈래로 나뉘는 행: 위쪽 가로 연결선 + 각 가지의 세로 연결선 */
.orgrow{
  display:flex;align-items:flex-start;justify-content:center;gap:28px;position:relative;
  padding-top:28px;flex-wrap:wrap;width:100%;
}
.orgrow__bar{
  position:absolute;top:0;left:var(--branch-inset,17%);right:var(--branch-inset,17%);
  height:2px;background:var(--line-strong);
}
.orgrow__branch{display:flex;flex-direction:column;align-items:center;position:relative}
.orgrow__branch::before{
  content:"";position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  width:2px;height:28px;background:var(--line-strong);
}

.orggrid{
  display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:16px 20px;max-width:640px;width:100%;
}

@media (max-width:640px){
  .orggrid{grid-template-columns:1fr;max-width:280px}
  .orgrow{flex-direction:column;align-items:center;gap:24px;padding-top:0}
  .orgrow__bar{display:none}
  .orgrow__branch::before{display:none}
  .orgrow__branch{gap:0}
}

/* ---------- 직원소개 표 ----------
   표가 놓이는 .section 바탕이 연한 하늘빛(--bg-alt)이라, 머리글과 첫 칸에
   같은 색을 쓰면 표가 배경에 묻혀 칸이 보이지 않았습니다. 정관 페이지의 표와
   같은 방식으로 — 본문은 흰 카드, 머리글은 바탕보다 뚜렷하게 진한 하늘빛,
   첫 칸은 그 중간 — 으로 잡아 칸이 눈에 들어오게 했습니다. */
.staff-table{
  margin-top:8px;overflow-x:auto;border-radius:var(--radius-l);
  border:1px solid var(--line-strong);background:var(--surface);
  box-shadow:var(--shadow-s);
}
.staff-table table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;background:var(--surface)}
.staff-table th,.staff-table td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.staff-table thead th{
  background:#dbe8f2;font-weight:800;color:var(--navy);font-size:12.5px;text-align:left;
  border-bottom:1px solid var(--line-strong);
}
.staff-table tbody th{
  background:#edf3f8;font-weight:700;color:var(--text);text-align:left;white-space:nowrap;
}
.staff-table tbody td{background:var(--surface)}
.staff-table td.phone{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand-strong);white-space:nowrap;
}
.staff-table td.phone a{color:inherit}
.staff-table td.phone a:hover{text-decoration:underline}
.staff-table ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.staff-table li{
  position:relative;padding-left:14px;font-size:13.5px;line-height:1.6;color:var(--text-mid);word-break:keep-all;
}
.staff-table li::before{content:"·";position:absolute;left:0;color:var(--sky)}
.staff-table tbody tr:last-child th,.staff-table tbody tr:last-child td{border-bottom:none}