@charset "utf-8";
/* People > Collaboration */

:root {
	--c_intl: #5b53c9;   /* 국제협력 포인트 컬러 */
}

/* ======================================================
   협력 구조도 (Hub)
   ====================================================== */
.collabo-hub {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"ftl core ftr"
		"sleft core sright"
		"fbl core fbr";
	align-items: center;
	gap: 20px 36px;
	padding: 50px 40px;
	border-radius: 24px;
	background: linear-gradient(135deg, #f4f8fd 0%, #eef3fa 55%, #f3f1fb 100%);
	overflow: hidden;
}
.collabo-hub:before {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 520px; height: 520px; margin: -260px 0 0 -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(41,132,216,.14) 0%, rgba(41,132,216,0) 68%);
	pointer-events: none;
}

/* 중앙 코어 */
.hub-core { grid-area: core; position: relative; z-index: 2; display: flex; justify-content: center; }
.hub-core .core-circle {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 210px; height: 210px; border-radius: 50%;
	background: linear-gradient(140deg, var(--c_base4) 0%, var(--c_base1) 55%, var(--c_base3) 100%);
	color: #fff; text-align: center;
	box-shadow: 0 22px 52px rgba(11,73,156,.34), 0 0 0 14px rgba(255,255,255,.6);
}
.hub-core .core-circle b { font-size: var(--fs30); font-weight: 800; letter-spacing: -0.02em; }
.hub-core .core-circle em { margin-top: 6px; font-size: var(--fs16); font-weight: 500; color: rgba(255,255,255,.85); font-style: normal; }

/* 좌 · 우 라벨 */
.hub-side {
	position: relative; z-index: 2;
	font-size: var(--fs24); font-weight: 800; letter-spacing: -0.03em; line-height: 1.35;
}
.hub-side.left { grid-area: sleft; text-align: right; color: var(--c_base1); }
.hub-side.right { grid-area: sright; text-align: left; color: var(--c_intl); }

/* 흐름 카드 */
.hub-flow {
	position: relative; z-index: 2;
	/* 4개 박스 크기 동일하게 고정 */
	width: 100%; max-width: 330px; min-height: 96px;
	display: flex; align-items: center; justify-content: center; gap: 14px;
	padding: 18px 56px;
	border-radius: 14px; border: 1px solid rgba(255,255,255,.9);
	background: rgba(255,255,255,.92);
	box-shadow: 0 10px 26px rgba(17,38,73,.08);
}
.hub-flow p { font-size: var(--fs16); font-weight: 800; color: #22303f; line-height: 1.5; letter-spacing: -0.03em; text-align: center; }
/* 화살표 : 코어(안쪽) 방향 가장자리에 고정 → 텍스트는 박스 정중앙 유지 */
.hub-flow .arrow {     position: absolute;
    top: 50%;
    margin-top: -20px;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: 50% 50% / 24px 24px no-repeat;}
.hub-flow .arrow.in { background-color: rgba(11,73,156,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230b499c'%3E%3Cpath d='M13.2 5.6 11.8 7l4 4H4v2h11.8l-4 4 1.4 1.4L19.6 12z'/%3E%3C/svg%3E"); }
.hub-flow .arrow.out { background-color: rgba(91,83,201,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b53c9'%3E%3Cpath d='M13.2 5.6 11.8 7l4 4H4v2h11.8l-4 4 1.4 1.4L19.6 12z'/%3E%3C/svg%3E"); }
.hub-flow.f-tl { grid-area: ftl; justify-self: end; }
.hub-flow.f-bl { grid-area: fbl; justify-self: end; }
.hub-flow.f-tr { grid-area: ftr; justify-self: start; }
.hub-flow.f-br { grid-area: fbr; justify-self: start; }
/* 왼쪽 박스 : 화살표 오른쪽(코어 방향) / 오른쪽 박스 : 화살표 왼쪽(코어 방향) */
.hub-flow.f-tl .arrow, .hub-flow.f-bl .arrow { right: 22px; }
.hub-flow.f-tr .arrow, .hub-flow.f-br .arrow { left: 22px; transform: rotate(180deg); }

/* ======================================================
   협력 섹션 공통
   ====================================================== */
.collabo-sec { margin-top: 80px; }
.collabo-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 20px; margin-bottom: 34px; border-bottom: 2px solid #111; }
.collabo-head .badge {
	display: inline-flex; align-items: center; height: 42px; padding: 0 26px;
	border-radius: 100px; font-size: var(--fs20); font-weight: 800; color: #fff; letter-spacing: -0.03em;
}
.collabo-head .badge.dom { background: linear-gradient(120deg, var(--c_base1), var(--c_base3)); box-shadow: 0 10px 24px rgba(11,73,156,.24); }
.collabo-head .badge.int { background: linear-gradient(120deg, #7a72e0, var(--c_intl)); box-shadow: 0 10px 24px rgba(91,83,201,.24); }
.collabo-head p { flex: 1; min-width: 240px; font-size: var(--fs16); color: #667; line-height: 1.7; }

/* 국내 : 박스 그리드 */
.collabo-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.net-box { padding: 28px 26px 30px; border: 1px solid var(--border1); border-radius: 18px; background: #fff; transition: var(--ani); }
.net-box:hover { border-color: rgba(11,73,156,.3); box-shadow: 0 20px 44px rgba(17,38,73,.10); }
.net-box.wide { grid-column: 1 / -1; }
.net-tit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px dashed var(--border1); }
.net-tit strong { font-size: var(--fs20); font-weight: 800; color: #111; letter-spacing: -0.03em; }
.net-tit .eng { font-size: var(--fs13); font-weight: 600; color: #9aa4b4; letter-spacing: .04em; }

/* 한약 소재 / 대학 협력 : 이름 + 소속 (텍스트 전용) */
.logo-list, .univ-list { display: grid; gap: 16px; }
.logo-list { grid-template-columns: repeat(2, 1fr); }
.univ-list { grid-template-columns: repeat(8, 1fr); }
.logo-list > li, .univ-list > li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 82px; padding: 18px 12px; border-radius: 12px; background: #fafbfd; transition: var(--ani); }
.logo-list > li:before, .univ-list > li:before { content: ""; position: absolute; left: 50%; top: 0; width: 26px; height: 3px; margin-left: -13px; border-radius: 0 0 3px 3px; background: var(--c_base2); opacity: .55; transition: var(--ani); }
.logo-list > li:hover, .univ-list > li:hover { background: var(--bg1); transform: translateY(-3px); }
.logo-list > li:hover:before, .univ-list > li:hover:before { width: 44px; margin-left: -22px; opacity: 1; }
.logo-list b, .univ-list b { font-size: var(--fs16); font-weight: 800; color: #111; letter-spacing: -0.03em; }
.logo-list .org, .univ-list .org { margin-top: 5px; font-size: var(--fs13); color: #8892a4; }

/* 기술 / 기관 협력 : 기관명 + 담당자 + 내용 (텍스트 전용) */
.net-list > li { position: relative; padding-left: 15px; }
.net-list > li:before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--c_base1); opacity: .3; transition: var(--ani); }
.net-list > li:hover:before { opacity: 1; }
.net-list > li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f0f2f6; }
.net-list > li + li:before { top: 22px; }
.net-list .info { min-width: 0; }
.net-list .info b { display: block; font-size: var(--fs17); font-weight: 800; color: #111; letter-spacing: -0.03em; line-height: 1.35; }
.net-list .info .abbr { display: inline-block; margin-left: 2px; font-size: var(--fs12); font-weight: 800; color: var(--c_base1); letter-spacing: .04em; }
.net-list .info p { position: relative; margin-top: 7px; padding-left: 13px; font-size: var(--fs15); color: #667; line-height: 1.6; }
.net-list .info p:before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--c_base2); }
.net-list .info p em { display: inline-block; margin-right: 6px; font-style: normal; font-weight: 800; color: #333; }

/* ======================================================
   국제 협력
   ====================================================== */
.collabo-sec.intl .collabo-body { display: block; }
.intl-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.intl-list > li { display: flex; flex-direction: column; padding: 26px 26px 28px; border: 1px solid var(--border1); border-radius: 18px; background: #fff; transition: var(--ani); }
.intl-list > li:hover { border-color: rgba(91,83,201,.35); box-shadow: 0 20px 44px rgba(17,38,73,.10); transform: translateY(-4px); }

.intl-list .inst { position: relative; padding: 0 0 18px 15px; border-bottom: 1px dashed var(--border1); }
.intl-list .inst:before { content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 26px; border-radius: 4px; background: var(--c_intl); }
.intl-list .inst .txt { min-width: 0; }
.intl-list .inst b { display: block; font-size: var(--fs18); font-weight: 800; color: #111; letter-spacing: -0.03em; line-height: 1.3; }
.intl-list .inst .area { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 100px; background: rgba(91,83,201,.09); font-size: var(--fs12); font-weight: 800; color: var(--c_intl); letter-spacing: .04em; }

.intl-list .member { flex: 1; padding-top: 18px; }
.intl-list .member > li { position: relative; padding-left: 15px; }
.intl-list .member > li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f2f6; }
.intl-list .member .info { min-width: 0; }
.intl-list .member .info b { position: relative; display: block; font-size: var(--fs17); font-weight: 800; color: #111; letter-spacing: -0.02em; }
.intl-list .member .info b:before { content: ""; position: absolute; left: -15px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c_intl); }
.intl-list .member .info p { margin-top: 6px; font-size: var(--fs15); color: #667; line-height: 1.6; }

/* ======================================================
   협력 문의
   ====================================================== */
.collabo-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-top: 80px; padding: 40px 44px; border-radius: 20px; background: var(--bg1); }
.collabo-cta h5 { font-size: var(--fs26); font-weight: 800; color: #111; letter-spacing: -0.03em; }
.collabo-cta p { margin-top: 10px; font-size: var(--fs16); color: #667; line-height: 1.7; }
.collabo-cta .btn { flex: 0 0 auto; }

/* ======================================================
   반응형
   ====================================================== */
@media (max-width: 1199px) {
	.collabo-hub { gap: 16px 24px; padding: 44px 28px; }
	.hub-core .core-circle { width: 180px; height: 180px; }
	.hub-flow { max-width: 290px; min-height: 88px; padding: 15px 48px; }
	.hub-flow.f-tl .arrow, .hub-flow.f-bl .arrow { right: 16px; }
	.hub-flow.f-tr .arrow, .hub-flow.f-br .arrow { left: 16px; }
	.collabo-body { grid-template-columns: repeat(2, 1fr); }
	.univ-list { grid-template-columns: repeat(4, 1fr); }
	.intl-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
	/* 구조도 : 세로 스택 */
	.collabo-hub {
		grid-template-columns: 1fr;
		grid-template-areas:
			"sleft"
			"ftl"
			"fbl"
			"core"
			"ftr"
			"fbr"
			"sright";
		gap: 26px;
		padding: 36px 24px;
	}
	.collabo-hub:before { display: none; }
	.hub-side { text-align: center !important; font-size: var(--fs20); }
	.hub-side.left { margin-bottom: 4px; }
	.hub-side.right { margin-top: 4px; }
	.hub-core { margin: 12px 0; }
	/* 화살표가 놓이는 쪽에 여백을 더 줘서 텍스트와 겹치지 않게 */
	.hub-flow { max-width: 460px; min-height: 104px; margin: 0 auto; padding: 24px 20px; }
	.hub-flow.f-tl, .hub-flow.f-bl, .hub-flow.f-tr, .hub-flow.f-br { justify-self: center; flex-direction: row; }
	.hub-flow.f-tl, .hub-flow.f-bl { padding-bottom: 46px; }
	.hub-flow.f-tr, .hub-flow.f-br { padding-top: 46px; }

	/* 세로 스택 : 화살표를 박스 상/하단 경계 '가로 중앙'에 배치
	   ※ 1199px 의 .hub-flow.f-tr .arrow (0,3,0) 를 덮어야 하므로 같은 명시도로 작성 */
	/* 실용화 가속화(위) → 코어 방향 아래로 */
	.hub-flow.f-tl .arrow, .hub-flow.f-bl .arrow {
		left: 50%; right: auto; top: auto; bottom: 10px;
		margin: 0 0 0 -15px; transform: rotate(90deg);
	}
	/* 글로벌 선도그룹(아래) → 코어 방향 위로 */
	.hub-flow.f-tr .arrow, .hub-flow.f-br .arrow {
		left: 50%; right: auto; bottom: auto; top: 10px;
		margin: 0 0 0 -15px; transform: rotate(-90deg);
	}
	/* 아래로 뻗는 화살표가 다음 박스에 가리지 않도록 */
	.hub-flow.f-tl { z-index: 4; }

	.collabo-sec { margin-top: 60px; }
	.hub-flow .arrow {width: 28px;
    height: 28px;
    border-radius: 50%;
    background: 50% 50% / 16px 16px no-repeat;}
}

@media (max-width: 767px) {
	.collabo-body { grid-template-columns: 1fr; }
	.net-box { padding: 22px 20px 24px; }
	.logo-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.univ-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.intl-list { grid-template-columns: 1fr; }
	.intl-list > li { padding: 22px 20px 24px; }
	.collabo-head { gap: 10px; }
	.collabo-head .badge { height: 38px; padding: 0 20px; }
	.collabo-cta { flex-direction: column; align-items: flex-start; margin-top: 60px; padding: 28px 22px; }
	
}