/* =====================================================================
 * 조직도 — 이미지 대신 HTML·CSS 로 그린다.
 *
 * 왜 이미지를 버렸나
 *   1177x637 PNG 라 확대하거나 고해상도 화면에서 보면 글자가 뭉갠다.
 *   색도 초록·주황·노랑에 도시 실루엣 배경이라 사이트의 파란 계열 테마와 따로 논다.
 *   조직이 바뀔 때마다 원본 파일을 찾아 다시 만들어야 하는 것도 문제였다.
 *   글자로 그리면 어느 배율에서도 선명하고, 조직 변경은 JSP 한 줄 수정으로 끝난다.
 *   검색엔진과 스크린리더에도 조직 구조가 그대로 읽힌다.
 *
 * 색은 사이트 강조색 #106EEA 에서 뽑았다(제목 h2 와 같은 색).
 * ===================================================================== */

.org-chart {
	--org-accent: #106eea;
	--org-line: #cfdcf0;
	--org-text: #1f2937;
	--org-muted: #5b6b7f;
	overflow-x: auto;              /* 조직도는 가로로 넓다. 페이지 자체가 아니라 여기서만 스크롤한다. */
	padding: 1rem 0 2.5rem;
	-webkit-overflow-scrolling: touch;
}

.org-chart ul {
	display: flex;
	justify-content: center;
	padding-top: 1.75rem;
	position: relative;
	margin: 0;
	list-style: none;
}

/* 바깥 ul 이 내용만큼 넓어야 .org-chart 의 가로 스크롤이 실제로 걸린다.
   이게 없으면 컨테이너 폭에 눌려 오른쪽 가지가 잘려 나간다. */
.org-chart > ul {
	min-width: max-content;
}

.org-chart li {
	position: relative;
	padding: 1.75rem 0.22rem 0;
	list-style: none;
	text-align: center;
}

/* 형제 사이를 잇는 가로선 — 각 항목 위로 반쪽씩 그려 이어 붙인다. */
.org-chart li::before,
.org-chart li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	width: 50%;
	height: 1.75rem;
	border-top: 2px solid var(--org-line);
}

.org-chart li::after {
	right: auto;
	left: 50%;
	border-left: 2px solid var(--org-line);
}

/* 형제가 하나뿐이면 가로선이 필요 없다(세로선만 남긴다). */
.org-chart li:only-child::before,
.org-chart li:only-child::after {
	display: none;
}

.org-chart li:only-child {
	padding-top: 0;
}

/* 줄 양 끝은 바깥쪽 가로선을 지운다 — 안 지우면 선이 허공으로 뻗는다. */
.org-chart li:first-child::before,
.org-chart li:last-child::after {
	border: 0 none;
}

.org-chart li:last-child::before {
	border-right: 2px solid var(--org-line);
	border-radius: 0 6px 0 0;
}

.org-chart li:first-child::after {
	border-radius: 6px 0 0 0;
}

/* 부모에서 자식 줄로 내려가는 세로선 */
.org-chart ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 2px solid var(--org-line);
	width: 0;
	height: 1.75rem;
}

.org-node {
	display: inline-block;
	/* 두 줄까지 허용하되 한글 단어 중간은 끊지 않는다.
	   keep-all 이 없으면 "Solution 개발 / 팀" 처럼 조사만 떨어져 나간다.
	   한 줄로 고정하면 말단 8개 때문에 가로 1438px 이 되어 컨테이너를 넘는다. */
	white-space: normal;
	word-break: keep-all;
	width: 5.9rem;
	padding: 0.6rem 0.5rem;
	border-radius: 10px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	background: #fff;
	color: var(--org-text);
	border: 1px solid var(--org-line);
	box-shadow: 0 1px 2px rgba(16, 110, 234, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.org-node:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(16, 110, 234, 0.14);
}

/* 대표이사 — 하나뿐이라 채워서 눈이 먼저 가게 한다. */
.org-node.org-lv1 {
	width: auto;
	white-space: nowrap;
	background: var(--org-accent);
	border-color: var(--org-accent);
	color: #fff;
	font-size: 1.05rem;
	padding: 0.8rem 1.5rem;
	box-shadow: 0 4px 14px rgba(16, 110, 234, 0.28);
}

/* 본부·연구소 — 위쪽 굵은 선으로 단계를 나눈다. */
.org-node.org-lv2 {
	width: auto;
	white-space: nowrap;
	border-top: 3px solid var(--org-accent);
	font-size: 0.98rem;
}

/* 부서 */
.org-node.org-lv3 {
	background: #f4f8fe;
	border-color: #dbe7f8;
	font-size: 0.92rem;
}

/* 팀 — 가장 아래 단계라 가장 옅게. */
.org-node.org-lv4 {
	background: #fff;
	border-style: dashed;
	color: var(--org-muted);
	font-weight: 500;
	font-size: 0.88rem;
}

/* 좁은 화면 — 가로 트리는 읽을 수 없다. 세로 목록으로 접어 들여쓰기로 단계를 보인다. */
@media (max-width: 1199.98px) {
	.org-chart {
		overflow-x: visible;
	}

	.org-chart ul {
		display: block;
		padding-top: 0;
		padding-left: 1.1rem;
	}

	.org-chart > ul {
		padding-left: 0;
	}

	.org-chart li {
		padding: 0.35rem 0 0.35rem 1.1rem;
		text-align: left;
	}

	/* 가로 트리용 연결선을 세로 목록용으로 바꾼다. */
	.org-chart li::before,
	.org-chart li::after {
		top: 0;
		left: 0;
		right: auto;
		width: 1.1rem;
		height: 100%;
		border: 0 none;
		border-left: 2px solid var(--org-line);
		border-radius: 0;
	}

	.org-chart li::after {
		height: 1.4rem;
		border-bottom: 2px solid var(--org-line);
		border-radius: 0 0 0 6px;
	}

	.org-chart li:last-child::before {
		height: 1.4rem;
		border-right: 0 none;
	}

	.org-chart > ul > li::before,
	.org-chart > ul > li::after {
		display: none;
	}

	.org-chart ul ul::before {
		display: none;
	}

	.org-node {
		display: block;
		min-width: 0;
		width: 100%;
		white-space: normal;   /* 세로 목록에서는 줄바꿈이 자연스럽다. */
		padding: 0.55rem 0.85rem;
	}
}

/* 움직임을 줄이도록 설정한 사용자에게는 hover 이동을 끈다. */
@media (prefers-reduced-motion: reduce) {
	.org-node,
	.org-node:hover {
		transition: none;
		transform: none;
	}
}