:root {
		--line: #cacaca;
		--line-w: 2px;
		--g7-col-gap: 16px;
		--g7-gaps-width: 96px; /* column-gap 16px × 6 (7열 사이) */
		--g12-col-gap: 10px;
		--g12-gaps-width: 110px; /* column-gap 10px × 11 (12열 사이) */
		--tier4-h-bridge: 550px; /* 4행 가로선 너비 */
		--tier4-v-bridge: 200px; /* 가로선 끝에서 아래로 이어지는 세로선 높이 */
		--tier4-v-spacing: 98px; /* 끝 세로선 기준 왼쪽 세로선들 사이 간격(선 사이 공간) */
		--box-border: #ebebeb;
		--accent: #d41d4c;
		--text: #1d1d1d;
	}
	* { box-sizing: border-box; }
	body {
		margin: 0;
		font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
		font-size: 15px;
		color: var(--text);
		background: #fff;
	}

	.org-chart {
		max-width: 1200px;
		margin: 0 auto;
	}
	/* about_group 등 본문용: 하단 여백 */
	.org-chart--mb100 {
		margin-bottom: 100px;
	}

	/* 1. CEO — 동그라미 */
	.org-chart__ceo {
		display: flex;
		justify-content: center;
	}
	.org-node--circle {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		border: 10px solid #636363;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		position: relative;
		z-index: 2;
	}
	.org-node--circle strong { font-size: 25px; font-weight: 700; }
	.org-node--circle span { font-size: 25px; color: #000; }

	/* CEO 아래 세로선 */
	.org-chart__ceo-connector {
		height: 40px;
		position: relative;
	}
	.org-chart__ceo-connector::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: var(--line-w);
		height: 100%;
		margin-left: calc(var(--line-w) / -2);
		background: var(--line);
	}

	/* 공통: 7열 그리드 */
	.org-g7 {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 12px 16px;
	}

	/* 2행: 7박스 + 상단 가로선 */
	.org-chart__tier2 {
		position: relative;
		padding-top: 40px;
		margin-top: -40px;
	}
	/* 1·2·4열 박스만: 1열 중심 ~ 4열 중심 가로선 (7열 grid + column-gap 반영) */
	.org-chart__tier2::before {
		content: "";
		position: absolute;
		top: calc(40px - var(--line-w) / 2);
		left: calc((100% - var(--g7-gaps-width)) / 14);
		width: calc(50% - (100% - var(--g7-gaps-width)) / 14);
		height: var(--line-w);
		background: var(--line);
	}

	.org-cell {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
	}
	.org-cell--drop::before {
		content: "";
		width: var(--line-w);
		height: 40px;
		background: var(--line);
		flex-shrink: 0;
	}
	.org-chart__tier2 .org-cell--col1 { grid-column: 1; }
	.org-chart__tier2 .org-cell--col2 { grid-column: 2; }
	.org-chart__tier2 .org-cell--col4 { grid-column: 4; }

	.org-node--box {
		width: 100%;
		min-height: 72px;
		border: 2px solid var(--box-border);
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 10px 8px;
		font-size: 20px;
		font-weight: 500;
		position: relative;
	}
	.org-node--box p {
		margin: 0;
	}
	.org-node--box::before {
		content: "";
		position: absolute;
		top: -2px;
		left: -2px;
		right: -2px;
		height: 8px;
		background: var(--accent);
	}

	/* 3행: 2행 1번 열 아래 */
	.org-chart__tier3 {
		position: relative;
	}
	/* 3행 영역: 7열 그리드 4번째 열(영업부문) 중심 세로선 — gap 반영 시 4열 중심 = 50% */
	.org-chart__tier3::after {
		content: "";
		position: absolute;
		left: calc(50% - var(--line-w) / 2);
		top: 0;
		bottom: 0;
		width: var(--line-w);
		background: var(--line);
		pointer-events: none;
		z-index: 0;
	}
	.org-chart__tier3 .org-cell--drop::before {
		height: 48px;
	}
	.org-chart__tier3 .org-node--box {
		position: relative;
		z-index: 1;
	}

	/* 4행: 2행 4번 열 아래 */
	.org-chart__tier4 .org-cell--drop {
		position: relative;
	}
	.org-chart__tier4 .org-cell--drop::before {
		height: 48px;
	}
	/* 가로선 + 끝 세로선 + 왼쪽으로 100px 간격 세로선 2개(동일 높이·두께) */
	.org-chart__tier4 .org-cell--drop::after {
		content: "";
		position: absolute;
		top: calc(24px - var(--line-w) / 2);
		left: calc(50% + var(--line-w) / 2);
		width: var(--tier4-h-bridge);
		height: calc(var(--tier4-v-bridge) + var(--line-w));
		background:
			linear-gradient(var(--line), var(--line)) 0 0 / 100% var(--line-w) no-repeat,
			linear-gradient(to bottom, var(--line), var(--line)) 100% var(--line-w) / var(--line-w) var(--tier4-v-bridge) no-repeat,
			linear-gradient(to bottom, var(--line), var(--line))
				calc(100% - 2 * var(--line-w) - var(--tier4-v-spacing)) var(--line-w) / var(--line-w) var(--tier4-v-bridge) no-repeat,
			linear-gradient(to bottom, var(--line), var(--line))
				calc(100% - 3 * var(--line-w) - 2 * var(--tier4-v-spacing)) var(--line-w) / var(--line-w) var(--tier4-v-bridge) no-repeat;
		pointer-events: none;
		z-index: 0;
	}

	/* 5행: 12박스 */
	.org-g12 {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 8px var(--g12-col-gap);
	}
	.org-chart__tier5 {
		position: relative;
		margin-top: 50px;
	}
	.org-chart__tier5 .org-node--box {
		width: calc(100% + 5px);
	}
	/* 가로선: 1열 중심~9열 중심 (gap 반영, 첫 박스 세로선과 동일 x) */
	.org-chart__tier5::before {
		content: "";
		position: absolute;
		top: 0;
		left: calc((100% - var(--g12-gaps-width)) / 24 - var(--line-w) / 2);
		width: calc((100% - var(--g12-gaps-width)) * 8 / 12 + 8 * var(--g12-col-gap));
		height: var(--line-w);
		background: var(--line);
	}
	/* 4행(7열 4열) 세로선 오른쪽 → 200px 가로선 */
	.org-chart__tier5-bridge {
		position: absolute;
		top: 0;
		left: calc(50% + var(--line-w) / 2);
		width: 200px;
		height: var(--line-w);
		background: var(--line);
		pointer-events: none;
		z-index: 0;
	}
	.org-chart__tier5::after {
		content: "";
		position: absolute;
		left: calc(50% - var(--line-w) / 2);
		top: -50px;
		bottom: 130px;
		width: var(--line-w);
		background: var(--line);
		pointer-events: none;
		z-index: 0;
	}
	.org-cell--r5::before {
		content: "";
		width: var(--line-w);
		height: 48px;
		background: var(--line);
		flex-shrink: 0;
	}
	.org-chart__tier5 .org-g12 > .org-cell:nth-child(10).org-cell--r5::before,
	.org-chart__tier5 .org-g12 > .org-cell:nth-child(11).org-cell--r5::before,
	.org-chart__tier5 .org-g12 > .org-cell:nth-child(12).org-cell--r5::before {
		display: none;
	}
	.org-chart__tier5 .org-g12 > .org-cell:nth-child(10).org-cell--r5,
	.org-chart__tier5 .org-g12 > .org-cell:nth-child(11).org-cell--r5,
	.org-chart__tier5 .org-g12 > .org-cell:nth-child(12).org-cell--r5 {
		justify-content: flex-end;
	}

	/* 윗줄에 박스 없음: 가로선 중앙에서 좌·우 분기 */
	.org-cell--branch-left {
		position: relative;
	}
	.org-cell--branch-left::after {
		content: "";
		position: absolute;
		top: calc(20px - var(--line-w) / 2);
		right: 50%;
		width: 50%;
		height: var(--line-w);
		background: var(--line);
	}
	.org-cell--branch-right {
		position: relative;
	}
	.org-cell--branch-right::after {
		content: "";
		position: absolute;
		top: calc(20px - var(--line-w) / 2);
		left: 50%;
		width: 50%;
		height: var(--line-w);
		background: var(--line);
	}

	/* 좁은 화면: 조직도만 단순 그리드 (조직도 블록 내부에만 적용) */
	@media (max-width: 900px) {
		.org-chart .org-g7 { grid-template-columns: repeat(2, 1fr); }
		.org-chart .org-chart__tier2 .org-cell--col1,
		.org-chart .org-chart__tier2 .org-cell--col2,
		.org-chart .org-chart__tier2 .org-cell--col4 { grid-column: auto; }
		.org-chart .org-chart__tier2::before { display: none; }
		.org-chart .org-chart__tier3::after { display: none; }
		.org-chart .org-chart__tier4 .org-cell--drop::after { display: none; }
		.org-chart .org-g12 { grid-template-columns: repeat(3, 1fr); }
		.org-chart .org-chart__tier5::before,
		.org-chart .org-chart__tier5::after,
		.org-chart .org-chart__tier5-bridge { display: none; }
	}

	/* 가로 1263px 이하: 조직도 너비 1200px 고정 + 가로 스크롤로 연결선 레이아웃 유지 */
	@media (max-width: 1263px) {
		.org-chart {
			width: 1200px;
			min-width: 1200px;
			max-width: 1200px;
		}
		.org-chart .org-g7 {
			grid-template-columns: repeat(7, minmax(0, 1fr));
			gap: 12px 16px;
		}
		.org-chart .org-chart__tier2 .org-cell--col1 { grid-column: 1; }
		.org-chart .org-chart__tier2 .org-cell--col2 { grid-column: 2; }
		.org-chart .org-chart__tier2 .org-cell--col4 { grid-column: 4; }
		.org-chart .org-chart__tier2::before { display: block; }
		.org-chart .org-chart__tier3::after { display: block; }
		.org-chart .org-chart__tier4 .org-cell--drop::after { display: block; }
		.org-chart .org-g12 {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: 8px var(--g12-col-gap);
		}
		.org-chart .org-chart__tier5::before,
		.org-chart .org-chart__tier5::after,
		.org-chart .org-chart__tier5-bridge { display: block; }
		.cont-box .inner:has(.org-chart) {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}
	}