@charset "utf-8";
/* ============================================================
   대상 : 기관소개 > 조직도 (/about/organization)
   변경 : 시안이 정의하지 않은 3개 클래스만 보완
   이유 : 조직도 마크업은 시안 클래스(.org_chart/.hq_col/.staff_table/.staff_modal …)를
          그대로 쓰므로 스타일 대부분은 시안 sub.css 가 처리한다.
          다만 아래 3개는 시안에 없어서 보정이 필요하다:
            .staff_row   — 시안은 정적 10명이라 <tr> 에 클래스가 없었다
            .staff_detail— 모달 원본(숨김). 🔴 안 숨기면 표에 상세가 통째로 쏟아진다
            .node_sub    — '(이사회)' 같은 부기명. 실데이터에만 있다

   ⚠ 시안 원본 CSS(sub.css)는 수정하지 않는다(개발규약).
   ============================================================ */

/* 🔴 모달 원본 — 반드시 숨긴다.
   시안 JS 가 이 안의 innerHTML 을 #staffModalBody 로 복사해 띄운다.
   [hidden] 속성만 믿으면 안 된다: display 를 주는 규칙이 뒤에 오면 무력화된다.
   ⚠ .org_chart 안의 이사장·원장 노드에도 같은 원본이 들어간다(.exec_detail).
      안 숨기면 차트 노드가 상세 dl 때문에 세로로 늘어난다. */
.staff_table .staff_detail,
.org_chart .staff_detail,
.staff_detail[hidden] {
	display: none !important;
}

/* 차트의 이사장·원장 노드 — 클릭 가능함을 보인다(시안은 cursor 만 준다) */
.organization_wrap .exec_trigger:focus-visible {
	outline: 3px solid var(--main-color, #123c74);
	outline-offset: 3px;
}

/* 🔴 클릭으로 하단 목록을 필터하는 노드 — 포인터 + hover 강조(발주처 요청).
   본부(.node_hq[data-hq]) / 팀(.teams li[data-hq]) / 원장직속실(.node_side[data-hq]).
   감사(.node_static)는 data 속성이 없어 여기 안 걸린다 → 기본 커서 유지. */
.organization_wrap [data-hq] {
	cursor: pointer;
	transition: filter 0.12s, background 0.12s;
}
.organization_wrap .node_hq[data-hq]:hover,
.organization_wrap .node_side[data-hq]:hover {
	filter: brightness(1.12);
}
.organization_wrap .teams li[data-hq]:hover {
	background: #eef1f7;
	color: var(--main-color, #123c74);
}
.organization_wrap [data-hq]:focus-visible {
	outline: 3px solid var(--main-color, #123c74);
	outline-offset: 2px;
}
/* 감사 — 클릭 대상이 아님을 커서로도 보인다 */
.organization_wrap .node_static {
	cursor: default;
}

/* 모달 안으로 복사된 사진 — 시안 .img_box 는 래퍼 하위 셀렉터라 여기선 안 걸린다.
   photo_path 가 채워지면 그때 쓰인다(현재는 전부 NULL 이라 렌더되지 않음). */
.staff_modal_body .exec_photo {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.staff_modal_body .exec_photo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* 검색 필터로 숨긴 행 — JS 가 row.hidden = true 로 처리한다 */
.staff_table .staff_row[hidden] {
	display: none;
}

/* 행 hover — 상세 버튼이 있는 행이라 클릭 가능함을 보인다 */
.staff_table .staff_row:hover {
	background: #f7f8fa;
}

/* 🔴 이름 열 정렬 규칙을 두지 않는다 — 시안(sub.css .staff_table th,td)의 text-align:left 를
   그대로 상속받아야 헤더 '이름'과 값의 좌측 축이 맞는다. 시안 .s_name 도 색·굵기만 지정하고
   정렬은 건드리지 않는다. 예전에 여기 text-align:center 를 덧붙여 두어 이름 길이에 따라
   시작 위치가 제각각이었다(김수철·사공전·박희성 …). 굵기·색은 시안 sub.css 가 이미 준다. */

/* 차트 노드의 부기명 — '이사장 (이사회)', '[영천분원] …' */
.node_sub {
	display: block;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 0.2rem;
}

/* 검색 결과 없음 */
.staff_empty {
	padding: 4rem 0;
	text-align: center;
	color: #888a9e;
}

/* 최초 로딩 안내 — 목록 대신 "부서를 선택하세요" (발주처 요청).
   필터가 적용되면 JS 가 이 요소를 제거하고 표를 보인다. */
.staff_hint {
	padding: 4rem 0;
	text-align: center;
	color: #888a9e;
	font-size: 0.9375rem;
}

/* 하단 구성원 목록 페이징 — 직원 111명이라 페이지 단위로 자른다(발주처 요청).
   🔴 전용 스타일을 두지 않는다. organ.js 가 시안 공통 마크업
   (.board_foot > nav.pagination > a.page_num/.page_arrow)을 그대로 만들고,
   디자인은 시안 sub.css(2023~2060 + 반응형 2154~)가 사이트 전체에 한 벌로 준다.
   예전의 .staff_paging + <button> 전용 규칙은 조직도만 텍스트형 페이징이 되게 만들어 걷어냈다. */

@media (max-width: 768px) {
	.organization_wrap .node_lead .exec_thumb,
	.organization_wrap .node_dir .exec_thumb { width: 3.75rem; height: 3.75rem; }
}

/* 모달 본문 — 상세 6종이 dl 로 들어온다 */
.staff_modal_body dl > div {
	display: flex;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line-color, #e7e7e7);
	font-size: 0.9375rem;
	line-height: 1.7;
}
.staff_modal_body dl > div:last-child {
	border-bottom: 0;
}
.staff_modal_body dt {
	flex: 0 0 5.625rem;
	color: #6c7075;
	font-weight: 500;
}
.staff_modal_body dd {
	flex: 1 1 auto;
	margin: 0;
	color: #222;
	word-break: break-word;
}

@media (max-width: 768px) {
	.staff_modal_body dl > div { flex-direction: column; gap: 0.2rem; }
	.staff_modal_body dt { flex: 0 0 auto; }
}

/* 부서 칸 — 본부명(.s_dept_hq)은 팀이 같이 있으면 숨기고 팀명만 보인다 (2026-10-20 수정사항).
   팀 없는 직원(이사장·원장·본부장·직속실)은 본부명이 곧 부서명이라 혼자일 때만 남기고 팀명처럼 진하게. */
.staff_table .s_dept_hq:not(:only-child) { display: none; }
.staff_table .s_dept_hq:only-child {
	font-size: inherit;
	color: var(--sub-tit-color);
	font-weight: 500;
	margin-bottom: 0;
}
@media screen and (max-width: 900px) {
	/* 모바일: 라벨 옆 오른쪽 정렬(sub.css 는 .s_dept_hq 에 margin-left:auto) — 본부명이 빠지니 팀명이 이어받는다 */
	.staff_table .s_dept_team { margin-left: auto; }
}

/* 감사 → 윤리감사실 세로선 (2026-10-19 발주처 #8 "기존 조직도 사용") ─────────────
   대상 : 조직도 차트 — ktdi_organ_page.sql 이 상위부서가 '감사'인 직속실(윤리감사실)을 원장 아래 줄 오른쪽(.node_audit)에 두고,
          감사 노드에 .has_drop 을 단다.
   변경 : 감사 노드 아래로 세로선을 내린다. 길이는 노드 높이를 계산하지 않고 넉넉히(12rem) — 끝은 뒤에 그려지는
          윤리감사실 흰 상자에 가려진다(같은 z-index 의 뒤 형제 branch 가 위에 그려짐).
   이유 : 오른쪽 두 상자는 둘 다 .branch_r(같은 70px 곁가지)이라 가로 위치가 정확히 같다 → 선 하나로 잇는다.
   ⚠ 1201px 이상만 — 1024~1200 은 원장 상자가 가로로 꽉 차(sub.css width:100%) 선이 원장을 가로지르고,
      1024 이하는 곁가지가 세로 스택으로 접힌다. */
@media screen and (min-width: 1201px) {
	.organization_wrap .node.has_drop { position: relative; }
	.organization_wrap .node.has_drop::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 100%;
		width: 2px;
		height: 9.6rem;
		margin-left: -1px;
		background: var(--org-line);
	}
}
/* 1024px 이하 — 곁가지가 세로 스택으로 접히면 원장 아래 두 직속실(왼쪽·오른쪽 branch)이 간격 없이 붙는다.
   branch 안쪽 간격(sub.css gap:10px)과 같게 벌린다. */
@media screen and (max-width: 1024px) {
	.organization_wrap .ln_v.has_branch .branch + .branch { margin-top: 10px; }
}