@charset "utf-8";
/* Research > Research Projects */

:root {
	--c_goal1: #2e9fdc;   /* 1 · 2그룹 (라이트 블루) */
	--c_goal2: #14356e;   /* 메커니즘 · 플랫폼 (네이비) */
	--c_goal3: #6a5ac9;   /* 최종 성과 (퍼플) */
	--c_gnum: #f08a24;    /* 그룹 뱃지 (오렌지) */
	--gf-line: #dfe6ef;
}

/* ======================================================
   목표 타이틀
   ====================================================== */
.goal-title { margin: 56px 0 30px; text-align: center; }
.goal-title .tag {
	position: relative;
	display: inline-flex; align-items: center; height: 48px; padding: 0 22px;
	border-radius: 100px;
	background: linear-gradient(100deg, var(--c_goal1), var(--c_base1));
	font-size: var(--fs24); font-weight: 800; color: #fff; letter-spacing: -0.02em;
	box-shadow: 0 10px 24px rgba(11,73,156,.24);
}
/* 태그 좌 · 우로 뻗는 가는 선 */
.goal-title .tag:before, .goal-title .tag:after {
	content: ""; position: absolute; top: 50%; width: 60px; height: 1px; background: var(--border1);
}
.goal-title .tag:before { right: 100%; margin-right: 18px; }
.goal-title .tag:after { left: 100%; margin-left: 18px; }

.goal-title h4 { margin-top: 16px; font-size: var(--fs36); font-weight: 800; color: #111; letter-spacing: -0.04em; line-height: 1.3; }
.goal-title h4 em { position: relative; z-index: 1; font-style: normal; color: var(--c_base1); }

/* ======================================================
   연구 흐름도 (PC : 가로 4단)
   ====================================================== */
.goal-flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
	gap: 8px;
	align-items: stretch;
}

/* 단계 사이 오른쪽 방향 화살표 */
.gf-arrow {
	align-self: center; width: 30px; height: 36px;
	background: 50% 50% / 26px 32px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40' fill='%23f0a13c'%3E%3Cpath d='M0 6h13V0l13 20-13 20v-6H0z'/%3E%3C/svg%3E");
}

/* 세로 1열 (1 · 2그룹 카드 2장) */
.gf-col { display: flex; flex-direction: column; gap: 10px; }

/* 카드 : 상단 헤더 + 본문 */
.gf-card {
	display: flex; flex-direction: column; flex: 1;
	border: 1px solid var(--border1); border-radius: 14px; background: #fff;
	overflow: hidden; transition: var(--ani);
}
.gf-card:hover { box-shadow: 0 16px 34px rgba(17,38,73,.13); transform: translateY(-4px); }

/* 헤더 : 단계별 컬러 · 높이 통일 */
.gf-head {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 88px; padding: 14px 12px; text-align: center; color: #fff;
}
.gf-head.c-blue { background: linear-gradient(150deg, #48aeea, #2e8fd4); }
.gf-head.c-navy { background: linear-gradient(150deg, #21529c, var(--c_goal2)); }
.gf-head.c-purple { background: linear-gradient(150deg, #8375e0, var(--c_goal3)); }
.gf-head h5 { font-size: var(--fs24); font-weight: 800; color: inherit; line-height: 1.38; letter-spacing: -0.045em; }
.gf-head .gnum {
	display: inline-flex; align-items: center; height: 30px; margin-bottom: 7px; padding: 0 13px;
	border-radius: 100px; background: var(--c_gnum);
	font-size: var(--fs16); font-weight: 800; color: #fff; letter-spacing: -0.02em;
}

/* 본문 */
.gf-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 16px 14px; background: #f7f9fc; }

/* 이미지 삽입 영역 (직접 교체) */
.gf-img { display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #fff; border: 1px solid #e5eaf1; overflow: hidden; }
.gf-img img { width: 100%; height: 100%; object-fit: contain; }
.gf-img.r-wide { aspect-ratio: 16/9; }
.gf-img.r-tall { aspect-ratio: 16/10; }

/* 이미지 캡션 */
.gf-cap.center { text-align: center; }
.gf-cap b { display: block; font-size: var(--fs16); font-weight: 800; color: #1b2b3d; line-height: 1.4; letter-spacing: -0.035em; }
.gf-cap .eng { display: block; margin-top: 4px; font-size: var(--fs14); color: #7a869a; line-height: 1.45; }

/* --- STEP 2 : 2개 유닛 세로 배치 --- */
.gf-unit { display: flex; flex-direction: column; flex: 1; gap: 9px; }
.gf-unit + .gf-unit { padding-top: 12px; border-top: 1px dashed var(--gf-line); }
.gf-label { display: block; padding: 8px 10px; border-radius: 7px; font-size: var(--fs18); font-weight: 800; line-height: 1.3; letter-spacing: -0.04em; text-align: center; }
.gf-label em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; }
.gf-label.line { border: 1px solid rgba(34,181,115,.42); background: rgba(34,181,115,.10); color: #12784a; }
.gf-label.line em { color: #4a9c78; }
.gf-label.fill { background: linear-gradient(120deg, #2b62b4, var(--c_goal2)); color: #fff; }
.gf-label.fill em { color: rgba(255,255,255,.75); }

/* --- STEP 3 · 4 : 본문 소제목 --- */
.gf-subtit { padding-bottom: 10px; border-bottom: 1px dashed var(--gf-line); font-size: var(--fs18); font-weight: 800; color: var(--c_goal2); text-align: center; line-height: 1.4; letter-spacing: -0.04em; }

/* --- STEP 3 : 플랫폼 이미지 + 디바이스 --- */
/* 남는 높이를 채우는 이미지 박스 (직접 교체) */
.gf-img.r-fill { flex: 1; min-height: 190px; }

/* 카드 내부 : 플랫폼 → 디바이스 연결 화살표 */
.gf-arrow-in {
	flex: none; align-self: center; width: 26px; height: 20px;
	background: 50% 50% / 26px 20px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26' fill='%23f0a13c'%3E%3Cpath d='M6 0h28v13h6L20 26 0 13h6z'/%3E%3C/svg%3E");
}

.gf-device { text-align: center; }
.gf-device .gf-img { margin-bottom: 8px; }
.gf-device b { font-size: var(--fs16); font-weight: 800; color: var(--c_goal2); letter-spacing: -0.02em; }

/* --- STEP 4 : Subject 3행 --- */
.gf-subject { display: flex; flex-direction: column; flex: 1; gap: 12px; }
.gf-subject > li { display: flex; flex-direction: column; flex: 1; text-align: center; }
.gf-subject .gf-img { flex: 1; margin-bottom: 6px; }
.gf-subject b { font-size: var(--fs14); font-weight: 800; color: #1b2b3d; letter-spacing: -0.02em; }

/* ======================================================
   연구그룹별 세부 연구내용 — 타이틀
   ====================================================== */
.rg-title { margin: 76px 0 28px; text-align: center; }
.rg-title h4 { font-size: var(--fs36); font-weight: 800; color: #111; letter-spacing: -0.04em; line-height: 1.3; }
.rg-title h4 em { font-style: normal; color: var(--c_base1); }
.rg-title p { margin-top: 12px; font-size: var(--fs16); color: #667; line-height: 1.7; }

/* ======================================================
   연구그룹별 세부 연구내용 — 탭 버튼
   ====================================================== */
.rg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.rg-tab {
	position: relative;
	display: flex; align-items: center; justify-content: center; gap: 14px;
	min-height: 78px; padding: 14px 20px;
	border: 1px solid var(--border1); border-radius: 14px; background: #fff;
	text-align: left; transition: var(--ani); cursor: pointer;
}
.rg-tab:hover { border-color: rgba(11,73,156,.35); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,38,73,.10); }

/* 선택된 탭 하단 화살표 (패널과 연결) */
.rg-tab:after {
	content: ""; position: absolute; left: 50%; top: 100%;
	width: 0; height: 0; margin-left: -9px;
	border: 9px solid transparent; border-top-color: transparent;
	opacity: 0; transition: opacity .25s ease;
}

.rg-tab .gnum {
	flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 13px;
	border-radius: 100px; background: var(--bg1);
	font-size: var(--fs16); font-style: normal; font-weight: 800; color: var(--c_base1); letter-spacing: -0.02em;
	transition: var(--ani);
}
.rg-tab .txt { min-width: 0; }
.rg-tab b { display: block; font-size: var(--fs24); font-weight: 800; color: #22303f; letter-spacing: -0.04em; line-height: 1.35; transition: var(--ani); }
.rg-tab .eng { display: block; margin-top: 3px; font-size: var(--fs16); font-style: normal; font-weight: 500; color: #8892a4; letter-spacing: -0.01em; transition: var(--ani); }

/* 활성 탭 : 그룹별 컬러 */
.rg-tab.on { border-color: transparent; transform: none; }
.rg-tab.on b, .rg-tab.on .eng { color: #fff; }
.rg-tab.on .eng { color: rgba(255,255,255,.8); }
.rg-tab.on .gnum { background: rgba(255,255,255,.22); color: #fff; }
.rg-tab.on:after { opacity: 1; }

/* organization.html 의 .grp-card .grp-head 와 동일한 그룹 컬러 사용 */
.rg-tab.g1.on { background: linear-gradient(140deg, var(--c_base1), var(--c_base3)); box-shadow: 0 14px 30px rgba(11,73,156,.28); border:none;}
.rg-tab.g2.on { background: linear-gradient(140deg, var(--c_base4), var(--c_base1)); box-shadow: 0 14px 30px rgba(41,132,216,.26); border:none;}
.rg-tab.g3.on { background: linear-gradient(140deg, var(--c_base2), #12784a); box-shadow: 0 14px 30px rgba(34,181,115,.26); border:none;}

/* 화살표 : 각 그라디언트의 끝 컬러와 일치 */
.rg-tab.g1.on:after { border-top-color: var(--c_base3); }
.rg-tab.g2.on:after { border-top-color: var(--c_base1); }
.rg-tab.g3.on:after { border-top-color: #12784a; }

/* ======================================================
   연구그룹별 세부 연구내용 — 인포그래픽 패널
   ====================================================== */
.rg-panels { margin-top: 22px; padding: 26px; border: 1px solid var(--border1); border-radius: 18px; background: #fff; }
.rg-panel { display: none; }
.rg-panel.on { display: block; animation: rgFade .35s ease both; }
.rg-panel picture { display: block; }
.rg-panel img { display: block; width: 100%; height: auto; border-radius: 10px; }

@keyframes rgFade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ======================================================
   반응형
   ====================================================== */
/* 태블릿 : 흐름도 2 × 2 배치 (화살표 숨김) */
@media (max-width: 1249px) {
	.goal-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.gf-arrow { display: none; }
	.gf-head { min-height: 78px; }
	.gf-head h5 {  }
	.gf-body { gap: 14px; padding: 18px 16px; }
	.gf-cap b { }
	.gf-cap .eng {  }
	.gf-img.r-fill { min-height: 220px; }
}

@media (max-width: 1199px) {
	.rg-tab { gap: 10px; min-height: 72px; padding: 12px 14px; }
	.rg-tab .gnum { padding: 0 11px; }
	.rg-tab b { }
	.rg-panels { padding: 18px; }
}

/* 태블릿 : 탭 세로 2줄 (1 · 2그룹 → 3그룹) */
@media (max-width: 991px) {
	.rg-tabs { grid-template-columns: repeat(2, 1fr); }
	.rg-tabs .rg-tab.g3 { grid-column: 1 / -1; }
}

/* 모바일 : 1열 세로 흐름 (화살표 아래 방향) */
@media (max-width: 767px) {
	.goal-title { margin: 44px 0 26px; }
	.goal-title .tag:before, .goal-title .tag:after { width: 28px; }
	.goal-title h4 { }

	.goal-flow { display: flex; flex-direction: column; gap: 0; }
	.gf-arrow {
		display: block; align-self: center; width: 34px; height: 26px; margin: 12px 0;
		background-size: 26px 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26' fill='%23f0a13c'%3E%3Cpath d='M6 0h28v13h6L20 26 0 13h6z'/%3E%3C/svg%3E");
	}
	.gf-col { gap: 16px; }
	.gf-head { min-height: 0; padding: 15px 16px; }
	.gf-head h5 {  }
	.gf-body { padding: 16px; }
	.gf-img.r-wide, .gf-img.r-tall { aspect-ratio: 16/8; }
	.gf-img.r-fill { flex: none; min-height: 0; aspect-ratio: 16/11; }
	.gf-cap { text-align: center; }
	.gf-arrow-in { width: 30px; height: 23px; margin: 2px 0; background-size: 30px 23px; }
	.gf-subject > li { flex: none; }
	.gf-subject .gf-img { flex: none; }

	.rg-title { margin: 52px 0 22px; }
	.rg-title h4 { }
	.rg-title p {  }

	/* 탭 1열 : 뱃지 + 텍스트 가로 유지, 높이 축소 */
	.rg-tabs { grid-template-columns: 1fr; gap: 8px; }
	.rg-tabs .rg-tab.g3 { grid-column: auto; }
	.rg-tab { justify-content: flex-start; min-height: 0; padding: 12px 14px; border-radius: 12px; }
	.rg-tab:hover { transform: none; box-shadow: none; }
	.rg-tab:after { display: none; }
	.rg-tab b {  }
	.rg-tab .eng {}

	.rg-panels { margin-top: 16px; padding: 12px; border-radius: 14px; }
}