@charset "UTF-8";
/* =========================================================================
 * orgchart-shape.css — 조직도 도형(.org2) 전용 스타일.
 * 사용자 화면(조직도 탭)과 관리자 미리보기(조직도 관리)가 이 파일 하나를 함께 링크한다.
 * 진실의 원천은 여기 하나뿐이다 — 두 화면 어느 쪽에도 도형 규칙을 복제하지 않는다.
 *
 * 도형 규칙은 퍼블 시안 원본 그대로다(원래 sub_content.css 에 있던 .org2 묶음을 옮겨 왔다).
 * 관리자 화면은 사용자 사이트 CSS(sub.css → sub_content.css)를 읽지 않는다.
 * 미리보기가 실제 화면과 같은 모양이 되려면 두 화면이 함께 읽는 이 파일에 있어야 한다.
 *
 * 파일 순서에 의미가 있다. 아래 순서를 바꾸지 말 것:
 *   ① 퍼블 기본 규칙 → ② 우리 보정 → ③ 퍼블 반응형
 * ③ 이 맨 끝이어야 좁은 화면에서 연결선을 끄는 규칙이 ② 를 이긴다.
 * ========================================================================= */

/* ── 안내 문구 (도형이 아니라 조직도 화면의 알림) ───────────────────── */
.org_notice {
	padding: 16px;
	background: #fff4e5;
	border: 1px solid #e8a33d;
	border-radius: 6px;
	color: #7a4a00;          /* on #fff4e5 = 6.9:1, AA 통과 */
}
/* 검색 전 안내. 장애 알림(.org_notice)의 경고색을 쓰면 오류가 난 것처럼 보이므로 중립색으로 분리한다 */
.org_guide {
	padding: 16px;
	background: #f4f5f6;
	border: 1px solid #8d9299;   /* on #fff = 3.13:1, WCAG 1.4.11 통과 */
	border-radius: 8px;
	color: #1a1a1a;
}

/* ── ① 도형 (퍼블 시안 원본) ────────────────────────────────────────── */
.org-scroll{overflow-x:auto;padding:50px 0}
.org2{--line:#c2cad6;--head:#3f6f88;--room:#eef2f6;--roombd:#e0e6ee;--team:#dde3ea;
    position:relative;width:1000px;margin:0 auto;color:#1e2124;font-size:14px}
.org2 *{box-sizing:border-box}
.org2 .node{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;line-height:1.35;word-break:keep-all}
/* 노드 내부 <a>(링크값): reset.css의 a:link 색을 무시하고 노드 색을 그대로 상속 + 밑줄 제거 */
.org2 .node a{display:inline;color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit}
.org2 .node a:link,.org2 .node a:visited,.org2 .node a:hover,.org2 .node a:focus,.org2 .node a:active{color:inherit;text-decoration:none}

.org2 .spine{display:flex;flex-direction:column;align-items:center}
.org2 .n-board{width:150px;height:150px;border-radius:50%;background:#fff;color:#3a5a9a;font-size:21px;
    border:2px solid #cdd8ec;box-shadow:0 0 0 6px #eef2fa, 0 6px 16px rgba(58,90,154,.12)}
.org2 .n-ceo{width:135px;height:135px;border-radius:50%;color:#fff;font-size:21px;
    background:radial-gradient(circle at 32% 28%, #1a7bb9, #0a5789);box-shadow:0 8px 20px rgba(10,87,137,.35)}
.org2 .n-vice{min-width:220px;height:54px;padding:0 34px;border-radius:28px;color:#fff;font-size:17px;
    background:linear-gradient(180deg,#1c6b85,#155469);box-shadow:0 6px 14px rgba(21,84,105,.3)}
/* 세로 연결선 */
.org2 .link-v{width:1px;background:var(--line)}
.org2 .link-v.h30{height:30px}
.org2 .link-v.h34{height:34px}

/* ---- 감사/윤리감사실 (우측, 이사회→원장 선에서 점선 분기) ---- */
.org2 .audit{position:absolute;top:125px;right:0;width:188px;z-index:2}
.org2 .n-audit{height:50px;border:1px solid #cfd6e0;border-radius:8px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.05)}
.org2 .n-ethics{height:50px;margin-top:10px;border-radius:8px;background:#8a7f1e;color:#fff;box-shadow:0 4px 10px rgba(138,127,30,.25)}
/* 이사회→원장 선(중앙 x450)에서 감사까지 가로 점선 */

/* ---- 하위 본부/실 (가로 버스 연결) ---- */
.org2 .branch{position:relative;display:flex;justify-content:center;width:1000px;margin:32px auto 0;padding-top:34px; font-size:15px}
.org2 .branch::before{content:"";position:absolute;top:-32px;left:50%;transform:translateX(-50%);width:2px;height:32px;background:var(--line)} /* 부원장→버스 */
.org2 .col{position:relative;flex:1;padding:34px 7px 0;display:flex;flex-direction:column;gap:8px}


/* 노드 종류 */
.org2 .n-unit{min-height:52px;border:1px solid #cfd6e0;border-radius:8px;background:#fff;padding:8px;box-shadow:0 3px 8px rgba(0,0,0,.05)}
.org2 .n-head{height:50px;border-radius:8px;background:var(--head);color:#fff;font-size:16px;box-shadow:0 5px 12px rgba(63,111,136,.28)}
.org2 .unit{display:flex;flex-direction:column}
.org2 .n-room{min-height:50px;border:1px solid var(--roombd);background:var(--room);border-radius:8px;padding:10px 8px}
.org2 .unit.has-team .n-room{border-radius:8px 8px 0 0;border-bottom:0}
.org2 .n-team{min-height:34px;background:var(--team);border:1px solid var(--roombd);border-top:0;font-weight:500;font-size:15px;color:#4a5560}
.org2 .n-team:last-child{border-radius:0 0 8px 8px}

/* ── ② 우리 화면 보정 ────────────────────────────────────────────────
   사이트 reset.css 에 `::after, ::before { display:none }` 가 있다.
   위 퍼블 규칙은 연결선 의사요소에 display 를 적지 않아서, 그대로 두면
   줄기·가로 버스·감사 점선이 에러 하나 없이 통째로 사라진다. 여기서 되살린다.
   (선택자 특이도 0,2,1 로 reset 의 0,0,1 을 이긴다 — 로드 순서에 기대지 않는다) */


/* 부원장에서 내려온 줄기(.branch::before)는 .branch 윗변에서 끝난다.
   가로 버스(.col::after)는 그보다 .branch 안쪽 여백만큼 아래에 그려져 둘이 34px 떨어진다.
   퍼블 시안은 위 reset 때문에 선 자체가 안 보여서 이 틈이 드러나지 않았다.
   여백을 없애 줄기 끝과 가로 버스를 맞닿게 한다 — 열 안쪽 여백(.col 의 34px)은 그대로 두어
   가로 버스에서 첫 상자까지 내려오는 세로 토막 자리는 남긴다. */
.org2 .branch { padding-top: 0; }

/* 사용자 화면의 노드는 부서를 고르는 <button> 이다. 퍼블 시안은 <div> 기준이라
   버튼 기본값(회색 바탕·outset 테두리·시스템 글꼴)이 그대로 드러난다.
   :where() 로 특이도를 0 으로 낮춰 두면 위 노드별 규칙(.org2 .n-*)이 순서와 무관하게 언제나 이긴다 —
   규칙 순서를 잘못 잡아 색·테두리가 조용히 지워지는 사고를 구조적으로 막는다. */
:where(.org2) .node {
	margin: 0;
	border: 0 solid transparent;
	background: none;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
/* .col·.unit 은 세로 flex 라 자식이 알아서 가로로 늘어난다.
   .audit 만 일반 블록이어서 버튼이 글자 폭으로 줄어든다 */
:where(.org2) .audit > .node { width: 100%; }
/* 관리자 미리보기는 <div> 라 클릭할 수 없다. 손가락 커서를 지운다 */
.org2 div.node { cursor: default; }

/* 2026-09-28 연결선을 배경 이미지(sub_org_line.png, 5열 고정 좌표) 대신 CSS 로 그린다.
   원장 직속(1열: UAM·국토위성 TF 등)을 부원장 아래처럼 부서마다 한 열씩 두고, 더 등록하면 열이 옆에 늘어난다.
   원장 직속은 배치위치로 원장 왼쪽(.grp-ceo, 부원장 아래 열들 왼쪽)·오른쪽(.grp-ceo-r, 오른쪽)을 가른다.
   JSP 가 .org2 에 --n-l · --n-r(원장 왼쪽·오른쪽 열 수) · --n-all(전체 열 수) 를 넣고, 열을 .grp-ceo / .grp-vice / .grp-ceo-r 로 묶는다.
   2026-09-29 도형 폭은 본문 폭을 그대로 쓴다. 예전처럼 열 수 × 180px 로 고정하면 6열(1080px)이 1920 화면
   본문(안쪽 1078px)보다 2px 넓어 늘 가로 스크롤이 생겼다. 열마다 최소 150px 만 지키고, 그보다 좁아질 때만
   .org-scroll 이 가로 스크롤한다(열을 더 좁히면 부서명이 한 글자씩 꺾인다).
   폭이 고정값이 아니므로 아래 가로선 길이는 px 가 아니라 열·묶음 폭의 비율(%)로 잡는다.
   세로 좌표(133·83·42px)와 이사회·감사 좌표(66·94px)는 도형 규칙 ① 의 크기
   (원장 135·부원장 54·연결 30·.branch margin 32, 이사회 150, 감사 188·top 125)에서 나온 값이다 — 그 크기를 바꾸면 같이 맞춘다. */
.org2 {
	--colw: 150px;
	width: 100%;
	min-width: calc(var(--n-all, 5) * var(--colw));
}
.org2 .branch { width: 100%; }
.org2 .grp { display: flex; position: relative; min-width: 0; }
.org2 .grp-ceo   { flex: var(--n-l) 1 0; }
.org2 .grp-ceo-r { flex: var(--n-r) 1 0; }
.org2 .grp-vice  { flex: calc(var(--n-all) - var(--n-l) - var(--n-r)) 1 0; }
.org2 .grp > .col { flex: 1 1 0; min-width: 0; }
/* 띄어쓰기 없는 긴 부서명(국토위성개발사업추진단)도 상자 안에서 꺾는다. 원장 직속은 긴 사업단·추진단이 많아 한 단계 작게 */
.org2 .grp .node { overflow-wrap: anywhere; }
.org2 .grp-ceo .node, .org2 .grp-ceo-r .node { font-size: 13px; }

/* 선은 넓은 화면에서만 그린다(예전 배경 이미지와 같은 규칙 — 1480px 이하는 선 없이 쌓는다) */
@media (min-width:1481px){
	/* 열마다: 가로선(열 윗변)에서 첫 상자까지 세로선(.col 안쪽 여백 34px) + 자기 몫의 가로선.
	   묶음의 첫 열은 가운데→오른쪽, 끝 열은 왼쪽→가운데, 혼자면 가로선 없음 */
	.org2 .grp > .col::before {
		content: ""; display: block; position: absolute;
		left: 50%; top: 0; width: 1px; height: 34px; background: var(--line);
	}
	.org2 .grp > .col::after {
		content: ""; display: block; position: absolute;
		left: 0; right: 0; top: 0; height: 1px; background: var(--line);
	}
	.org2 .grp > .col:first-child::after { left: 50%; }
	.org2 .grp > .col:last-child::after { right: 50%; }
	.org2 .grp > .col:only-child::after { display: none; }

	/* 부원장 → 부원장 아래 가로선(도형 가운데). 원장 직속이 한쪽에 많아 부원장 줄기가 가로선 밖에 오면
	   가로선을 가운데까지 늘려 줄기와 잇는다(왼쪽 끝·오른쪽 끝 모두).
	   % 는 열 폭 기준이다. 열 폭이 모두 같아(도형 폭 / --n-all) 첫 열 왼쪽에서 도형 가운데까지 = 열 폭 × (--n-all/2 - --n-l) */
	.org2 .branch::before { display: block; width: 1px; }
	.org2 .grp-vice > .col:first-child::after {
		left: min(50%, calc(100% * (var(--n-all) / 2 - var(--n-l))));
	}
	.org2 .grp-vice > .col:last-child::after {
		right: min(50%, calc(100% * (var(--n-all) / 2 - var(--n-r))));
	}
	.org2 .grp-vice > .col:only-child::after {
		display: block;
		left: min(50%, calc(100% * (var(--n-all) / 2 - var(--n-l))));
		right: min(50%, calc(100% * (var(--n-all) / 2 - var(--n-r))));
	}

	/* 원장 → 원장 직속 묶음: 원장 원 아래쪽(가로선 133px 위)에서 묶음 가운데까지 가로, 거기서 가로선까지 세로.
	   가로 길이 = 도형 가운데 - 묶음 가운데 = 묶음 폭 × (--n-all/--n-l - 1) / 2 (% 는 묶음 폭 기준). 왼쪽 묶음은 오른쪽으로, 오른쪽 묶음은 왼쪽으로 뻗는다.
	   원장 원이 선 끝을 덮도록 줄기(.spine)를 위로 올린다 */
	.org2 .grp-ceo::before, .org2 .grp-ceo-r::before {
		content: ""; display: block; position: absolute;
		left: 50%; top: -133px; width: 1px; height: 133px; background: var(--line);
	}
	.org2 .grp-ceo::after {
		content: ""; display: block; position: absolute;
		left: 50%; top: -133px; height: 1px; background: var(--line);
		width: calc(100% * (var(--n-all) / var(--n-l) - 1) / 2);
	}
	.org2 .grp-ceo-r::after {
		content: ""; display: block; position: absolute;
		right: 50%; top: -133px; height: 1px; background: var(--line);
		width: calc(100% * (var(--n-all) / var(--n-r) - 1) / 2);
	}
	.org2 .spine { position: relative; z-index: 1; }

	/* 이사회 → 감사: 이사회 원 테두리(가운데 + 66px, 위에서 42px)에서 감사 상자 가운데 위까지 가로, 거기서 감사 상자 윗변까지 세로.
	   가로선은 도형과 폭이 같은 줄기(.spine)에 그린다 — 감사(.audit)는 188px 짜리라 도형 가운데를 알 수 없다.
	   2026-09-29 세로선이 감사 26px 위에서 끝나 상자와 떨어져 보였다. 상자 윗변까지 내린다(57px → 83px) */
	.org2 .spine::before {
		content: ""; display: block; position: absolute;
		top: 42px; height: 1px; background: var(--line);
		left: calc(50% + 66px);
		right: 94px;
	}
	.org2 .audit::after {
		content: ""; display: block; position: absolute;
		top: -83px; left: 94px; width: 1px; height: 83px; background: var(--line);
	}
}

.org2 button.node:hover { filter: brightness(0.96); }
.org2 button.node:focus-visible {
	outline: 3px solid #0b50d0;   /* on #fff = 6.83:1, AA 통과 */
	outline-offset: 2px;
}

/* ── ③ 퍼블 반응형 (반드시 맨 끝) ────────────────────────────────────
   좁은 화면에서는 열이 세로로 쌓여 좌우 관계가 사라지므로 가로 버스와 세로 토막을 끈다.
   그 display:none 이 ② 의 display:block 을 이기려면 이 블록이 뒤에 있어야 한다 —
   미디어쿼리는 특이도를 올려 주지 않는다. */





@media (max-width:1480px){

	.org-scroll {background:none}
}


@media (max-width:1023px){ .org-scroll{-webkit-overflow-scrolling:touch} }
@media (max-width:767px){
	.org2 .col {gap:15px; padding: 34px 0 0; }
  .org-scroll{overflow-x:hidden;padding:50px 0}
  .org2{width:100%;min-width:0;font-size:13px}
  .org2 .spine,.org2 .branch{margin-left:auto;margin-right:auto}
  /* 감사/윤리감사실: 절대배치 해제 → 스파인 아래 가운데 */
  .org2 .audit{position:static;width:auto;margin:16px auto 0}
  .org2 .n-ethics{margin-top:8px}
  /* 본부/실: 가로 버스 → 세로 스택 */
  .org2 .branch{width:100%;flex-direction:column;align-items:center;gap:16px; margin-top:0px; font-size:14px}
  .org2 .branch::before{top:-22px;height:22px}
  .org2 .col{width:100%;flex:none;padding-top:0}
  /* 2026-09-28 원장·부원장 묶음(.grp)도 열처럼 세로로 쌓는다 */
  .org2 .grp{width:100%;flex:none;flex-direction:column;align-items:center;gap:16px}
  .org2 .grp > .col{width:100%;flex:none}
  .org2 .col::before,.org2 .col::after{display:none}
	.org2 .n-ceo,
	.org2 .audit,
	.org2 .n-vice,
	.org2 .n-board {width:100%; height:auto; border-radius:10px; font-size:18px; padding:15px 0}
}