@charset "utf-8";
/* Introduction > Organization */

/* ======================================================
   계층 구분 라벨
   ====================================================== */
.org-lab { position: relative; margin: 60px 0 30px; text-align: center; }
.sec-tit + .org-lab { margin-top: 10px; }
.org-lab:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--border1); }
.org-lab > span { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; background: #fff; }
.org-lab .eng { font-size: var(--fs16); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--c_base2); }
.org-lab b { font-size: var(--fs24); font-weight: 800; color: #111; letter-spacing: -0.03em; }

/* 계층 사이 연결선 */
.org-stem { display: block; width: 2px; height: 38px; margin: 0 auto; background: var(--border1); }

/* ======================================================
   TIER 01 — 센터장 / 거버넌스
   ====================================================== */
/* 운영위원회(.gov-main) 컬럼과 동일 폭 — .org-gov 의 1.6fr / (0.78+1.6+0.78)fr, 좌우 gap 26px×2 */
.org-top {
	width: calc((100% - 52px) * 1.6 / 3.16); margin: 0 auto;
	padding: 34px 30px; border-radius: 20px; text-align: center; color: #fff;
	background: linear-gradient(115deg, var(--c_base3), var(--c_base1) 58%, var(--c_base4));
	box-shadow: 0 20px 46px rgba(11,73,156,.28);
}
.org-top .eng { display: block; font-size: var(--fs16); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--c_base5); }
.org-top strong { display: block; margin-top: 8px; font-size: var(--fs36); font-weight: 800; letter-spacing: -0.05em; line-height: 1.3; }
.org-top p { margin-top: 8px; font-size: var(--fs18); color: rgba(255,255,255,.78); letter-spacing: -0.03em; }

.org-gov { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr) minmax(0, .78fr); gap: 26px; align-items: center; }

/* 좌 · 우 위원회 */
.gov-side { position: relative; padding: 26px 18px; border: 1px solid var(--border1); border-radius: 16px; background: #fff; text-align: center; transition: var(--ani); }
.gov-side:hover { border-color: rgba(11,73,156,.42); box-shadow: 0 16px 34px rgba(17,38,73,.10); transform: translateY(-4px); }
.gov-side b { display: block; font-size: var(--fs24); font-weight: 800; color: var(--c_base1); letter-spacing: -0.04em; }
.gov-side .eng { display: block; margin-top: 7px; font-size: var(--fs16); color: #8892a4; letter-spacing: -0.01em; }
/* 중앙과 잇는 점선 */
.gov-side:after { content: ""; position: absolute; top: 50%; width: 26px; border-top: 1px dashed #c3ccd9; }
.gov-side.l:after { left: 100%; }
.gov-side.r:after { right: 100%; }

/* 운영위원회 */
.gov-main { border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 18px 40px rgba(11,73,156,.14); }
.gov-main .tit { display: block; padding: 15px 16px; background: linear-gradient(110deg, var(--c_base1), var(--c_base4)); text-align: center; font-size: var(--fs24); font-weight: 800; color: #fff; letter-spacing: -0.04em; }
.gov-info { padding: 8px 26px 12px; }
.gov-info li { display: flex; align-items: center; gap: 16px; padding: 13px 0; }
.gov-info li + li { border-top: 1px dashed var(--border1); }
.gov-info em { flex: none; width: 84px; height: 32px; border-radius: 100px; background: rgba(11,73,156,.08); font-size: var(--fs16); font-weight: 800; color: var(--c_base1); text-align: center; line-height: 32px; letter-spacing: -0.02em; }
.gov-info span { font-size: var(--fs18); font-weight: 600; color: #22303f; line-height: 1.6; letter-spacing: -0.03em; }

/* ======================================================
   TIER 02 — 지원조직
   ====================================================== */
.org-support { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sup-card { display: flex; align-items: baseline; gap: 14px; padding: 26px 30px; border: 1px solid rgba(41,132,216,.3); border-radius: 16px; background: var(--bg1); transition: var(--ani); }
.sup-card:hover { border-color: var(--c_base4); box-shadow: 0 16px 34px rgba(17,38,73,.10); transform: translateY(-4px); }
.sup-card b { flex: none; font-size: var(--fs24); font-weight: 800; color: var(--c_base1); letter-spacing: -0.04em; }
.sup-card span { font-size: var(--fs18); color: #667; letter-spacing: -0.02em; }

/* ======================================================
   TIER 03 — 연구조직
   ====================================================== */
.org-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grp-card { display: flex; flex-direction: column; border: 1px solid var(--border1); border-radius: 18px; background: #fff; overflow: hidden; transition: var(--ani); }
.grp-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(17,38,73,.12); }

.grp-head { padding: 20px 22px; text-align: center; color: #fff; }
.grp-head .eng { display: block; font-size: var(--fs16); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.grp-head strong { display: block; margin-top: 6px; font-size: var(--fs24); font-weight: 800; letter-spacing: -0.04em; }
.grp-card.g1 .grp-head { background: linear-gradient(140deg, var(--c_base1), var(--c_base3)); }
.grp-card.g2 .grp-head { background: linear-gradient(140deg, var(--c_base4), var(--c_base1)); }
.grp-card.g3 .grp-head { background: linear-gradient(140deg, var(--c_base2), #12784a); }

.grp-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 20px 22px 24px; }
.grp-body .cnt { padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px dashed var(--border1); font-size: var(--fs16); font-weight: 600; color: #8892a4; letter-spacing: -0.02em; }
.grp-body .cnt b { font-weight: 800; color: var(--c_base1); }
.grp-card.g3 .grp-body .cnt b { color: #12784a; }

/* margin-bottom:auto — 연구진 수가 달라도 버튼 위치를 카드 하단으로 정렬 */
.mem-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: auto; }
.mem-list li { padding: 13px 6px; border-radius: 10px; background: #f7f9fc; text-align: center; font-size: var(--fs20); font-weight: 800; color: #22303f; letter-spacing: -0.02em; transition: var(--ani); }
.mem-list li:hover { background: rgba(11,73,156,.08); color: var(--c_base1); }
.grp-card.g3 .mem-list li:hover { background: rgba(34,181,115,.12); color: #12784a; }

/* Research Details 버튼 */
.grp-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; height: 46px; margin-top: 18px; padding: 0 14px;
	border: 1px solid var(--border1); border-radius: 100px; background: #fff;
	font-size: var(--fs16); font-weight: 800; color: #667; letter-spacing: .02em;
	cursor: pointer; transition: var(--ani);
}
.grp-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: var(--ani); }
.grp-btn:hover, .grp-btn:focus-visible { border-color: var(--c_base3); background: var(--c_base3); color: #fff; box-shadow: 0 10px 22px rgba(11,73,156,.22); }
.grp-card.g2 .grp-btn:hover, .grp-card.g2 .grp-btn:focus-visible { border-color:var(--c_base1); background: var(--c_base1); box-shadow: 0 10px 22px rgba(18,120,74,.22); }
.grp-card.g3 .grp-btn:hover, .grp-card.g3 .grp-btn:focus-visible { border-color: #12784a; background: #12784a; box-shadow: 0 10px 22px rgba(18,120,74,.22); }
.grp-btn:hover svg, .grp-btn:focus-visible svg { transform: scale(1.12); }

/* ======================================================
   연구그룹 상세 인포그래픽 레이어팝업
   ====================================================== */
body.rd-lock { overflow: hidden; }

.rd-pop { position: fixed; left: 0; top: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 30px 20px; }
.rd-pop[hidden] { display: none; }

.rd-dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(6,20,44,.72); opacity: 0; transition: opacity .25s ease; }
.rd-pop.on .rd-dim { opacity: 1; }

.rd-box {
	position: relative; display: flex; flex-direction: column;
	width: 100%; max-width: 1480px; max-height: 100%;
	border-radius: 18px; background: #fff; overflow: hidden; outline: none;
	box-shadow: 0 30px 70px rgba(6,20,44,.4);
	opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .25s ease, transform .25s ease;
}
.rd-pop.on .rd-box { opacity: 1; transform: none; }

.rd-head { flex: none; position: relative; display: flex; align-items: baseline; gap: 14px; padding: 20px 70px 20px 30px; background: linear-gradient(110deg, var(--c_base1), var(--c_base4)); color: #fff; }
.rd-head .eng { font-size: var(--fs13); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.rd-head strong { font-size: var(--fs22); font-weight: 800; letter-spacing: -0.04em; }

.rd-close { position: absolute; top: 50%; right: 20px; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; transition: var(--ani); }
.rd-close:before, .rd-close:after { content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 2px; margin: -1px 0 0 -8.5px; border-radius: 2px; background: #fff; }
.rd-close:before { transform: rotate(45deg); }
.rd-close:after { transform: rotate(-45deg); }
.rd-close:hover, .rd-close:focus-visible { background: rgba(255,255,255,.32); transform: rotate(90deg); }

.rd-body { flex: 1 1 auto; padding: 26px 30px 30px; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.rd-panel { display: none; }
.rd-panel.on { display: block; }
.rd-panel img { display: block; width: 100%; height: auto; }

/* 특별프로그램 트랙 */
.org-track {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
	margin-top: 24px; padding: 24px 30px; border: 1px dashed rgba(201,133,24,.6); border-radius: 16px;
	background: rgba(238,170,42,.09); text-align: center;
}
.org-track .badge { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 100px; background: linear-gradient(110deg, #e0940f, #c07414); font-size: var(--fs18); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.org-track b { font-size: var(--fs24); font-weight: 800; color: #9c650c; letter-spacing: -0.04em; }
.org-track .eng { font-size: var(--fs16); color: #a8853f; letter-spacing: -0.01em; }

/* ======================================================
   반응형
   ====================================================== */
@media (max-width: 1249px) {
	.org-lab { margin: 46px 0 26px; }
	.org-stem { height: 30px; }

	/* 운영위원회가 전폭으로 바뀌므로 센터장도 전폭 */
	.org-top { width: auto; padding: 28px 24px; }

	/* 운영위원회를 상단으로, 두 위원회는 하단 2열 */
	.org-gov { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.gov-main { grid-column: 1 / -1; order: -1; }
	.gov-side:after { display: none; }

	.org-support { gap: 20px; }
	.sup-card { padding: 22px 24px; }

	.org-groups { gap: 20px; }
	.grp-body { padding: 18px 18px 20px; }
	.mem-list { gap: 8px; }
	.grp-btn { height: 44px; margin-top: 16px; }

	.rd-pop { padding: 20px 16px; }
	.rd-head { padding: 17px 60px 17px 22px; }
	.rd-close { right: 14px; }
	.rd-body { padding: 20px 22px 24px; }
}

@media (max-width: 767px) {
	.org-lab { margin: 40px 0 22px; }
	.org-lab > span { flex-direction: column; gap: 3px; padding: 0 16px; }
	.org-stem { height: 24px; }

	.org-top { padding: 24px 18px; border-radius: 14px; }

	.org-gov { grid-template-columns: 1fr; gap: 14px; }
	.gov-main { border-radius: 14px; }
	.gov-main .tit { padding: 13px 14px; }
	.gov-info { padding: 6px 18px 10px; }
	.gov-info li { gap: 12px; padding: 11px 0; }
	.gov-info em { width: 72px; }
	.gov-side { padding: 20px 16px; border-radius: 14px; }

	.org-support { grid-template-columns: 1fr; gap: 12px; }
	.sup-card { flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; border-radius: 14px; text-align: center; }

	.org-groups { grid-template-columns: 1fr; gap: 14px; }
	.grp-card { border-radius: 14px; }
	.grp-head { padding: 16px 18px; }
	.mem-list { grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.mem-list li { padding: 12px 4px; }
	.grp-btn { height: 42px; margin-top: 14px; }

	/* 레이어팝업 — 세로형 이미지 기준으로 전체화면에 가깝게 */
	.rd-pop { padding: 0; }
	.rd-box { max-width: none; height: 100%; max-height: 100%; border-radius: 0; }
	.rd-head { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 56px 14px 18px; }
	.rd-close { width: 34px; height: 34px; margin-top: -17px; right: 12px; }
	.rd-body { padding: 14px 14px 24px; }

	.org-track { flex-direction: column; gap: 8px; margin-top: 16px; padding: 22px 18px; border-radius: 14px; }
}