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

:root {
	--c_lim1: #2fae6f;   /* 한계 그룹 헤더 (그린) */
	--c_lim2: #12784a;   /* 한계 그룹 헤더 (딥그린) */
	--c_solve: #14356e;  /* 해결책 헤더 (네이비) */
	--pdg-line: #dfe6ef;
}

/* ======================================================
   패러다임 전환 타이틀
   ====================================================== */
.pdg-title { margin: 60px 0 32px; text-align: center; }
.pdg-title h4 { font-size: var(--fs36); font-weight: 800; color: #111; letter-spacing: -0.04em; line-height: 1.3; }
.pdg-title h4 em { font-style: normal; color: var(--c_base1); }
.pdg-title p { margin-top: 12px; font-size: var(--fs18); color: #667; line-height: 1.6; letter-spacing: -0.02em; }


.page-lead { font-size: var(--fs30); }
/* ======================================================
   전체 배치 (PC : 한계 → 제어 실패 → 해결책)
   ====================================================== */
.pdg-wrap {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) 96px minmax(0, 2.5fr);
	align-items: stretch; margin-top:40px;
}

/* ======================================================
   좌 : 기존 패러다임의 한계
   ====================================================== */
.pdg-limit { display: flex; flex-direction: column; min-width: 0; }

/* 한계 타이틀 */
.pl-tit { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pl-tit .ico {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(140deg, var(--c_lim1), var(--c_lim2));
	font-size: var(--fs18); font-weight: 800; color: #fff; line-height: 1;
}
.pl-tit .txt { min-width: 0; }
.pl-tit b { display: block; font-size: var(--fs24); font-weight: 800; color: #111; letter-spacing: -0.04em; line-height: 1.3; }
.pl-tit span { display: block; margin-top: 3px; font-size: var(--fs16); color: #8892a4; letter-spacing: -0.02em; }

/* 한계 카드 3장 */
.pl-list { display: flex; flex-direction: column; flex: 1; gap: 16px; }
.pl-list > li { display: flex; flex-direction: column; flex: 1; transition: var(--ani); }
.pl-list > li:hover { transform: translateY(-4px); }

.pl-head {
	padding: 12px 18px; border-radius: 10px 10px 0 0;
	background: linear-gradient(115deg, var(--c_lim1), var(--c_lim2));
	color: #fff; text-align: center;
}
.pl-head b { display: block; font-size: var(--fs30); font-weight: 800; letter-spacing: -0.04em; line-height: 1.35; }
.pl-head .eng { display: block; margin-top: 2px; font-size: var(--fs20); font-weight: 500; color: rgba(255,255,255,.82); letter-spacing: -0.01em; }

.pl-body {
	display: flex; align-items: center; flex: 1; gap: 12px;
	padding: 14px; border: 1px solid var(--border1); border-top: 0; border-radius: 0 0 10px 10px;
	background: #fff;
}
.pl-body .pdg-img { flex: 0 0 44%; }
.pl-txt { flex: 1; min-width: 0; text-align: center; }
.pl-txt b { display: block; font-size: var(--fs18); font-weight: 800; color: #1b2b3d; letter-spacing: -0.03em; }
.pl-txt p { margin-top: 5px; font-size: var(--fs16); color: #667; line-height: 1.6; letter-spacing: -0.02em; }

/* ======================================================
   중앙 : 제어 실패
   ====================================================== */
.pdg-fail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; padding-top:60px;}
.pdg-fail p { font-size: var(--fs18); font-weight: 800; color: #33475f; text-align: center; line-height: 1.5; letter-spacing: -0.04em; }

/* 꺾인 회색 화살표 (/images/research/goals_arrow.png)
   a1 : 위에서 아래로 / a2 : 아래에서 위로 (상하 반전) */
.pf-arrow { flex: none; display: block; width: 56px; height:25%; }
.pf-arrow img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pf-arrow.a2 { transform: scaleY(-1); }

/* ======================================================
   우 : 해결책
   ====================================================== */
.pdg-solve {
	display: flex; flex-direction: column; min-width: 0;
	border: 1px solid var(--border1); border-radius: 14px; background: #f4f6f9; overflow: hidden;
}

.ps-head {
	display: flex; align-items: center; gap: 14px;
	padding: 4px 24px;
	background: linear-gradient(110deg, #21529c, var(--c_solve));
	color: #fff;
}
.ps-head b { flex: none; font-size: var(--fs36); font-weight: 800; letter-spacing: -0.04em; }
.ps-head span { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.36); font-size: var(--fs36); font-weight: 400; letter-spacing: -0.04em; line-height: 1.4; }

.ps-body { flex: 1; display: flex; padding: 22px 22px 0; }
.ps-body .pdg-img { flex: 1; }

.ps-foot { padding: 18px 22px 22px; }
.ps-foot b {
	display: block; padding: 4px 20px; border-radius: 9px 9px 0 0;
	background: linear-gradient(110deg, #3a9de8, var(--c_base4));
	font-size: var(--fs30); font-weight: 800; color: #fff; text-align: center; letter-spacing: -0.04em;
}
.ps-foot p {
	padding: 8px 20px; border: 1px solid var(--border1); border-top: 0; border-radius: 0 0 9px 9px;
	background: #fff;
	font-size: var(--fs24); font-weight: 700; color: var(--c_solve); text-align: center; line-height: 1.5; letter-spacing: -0.04em;
}
.ps-foot .mo-br { display: none; }

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

/* ======================================================
   반응형
   ====================================================== */
@media (max-width: 1399px) {
	.pdg-wrap { grid-template-columns: minmax(0, 0.82fr) 76px minmax(0, 2.3fr); }
	.pl-body { flex-direction: column; align-items: stretch; gap: 10px; }
	.pl-body .pdg-img { flex: none; }
	.ps-head { padding: 14px 18px; }
	.ps-body { padding: 18px 18px 0; }
	.ps-foot { padding: 14px 18px 18px; }
}

/* 태블릿 : 세로 스택 (한계 3열 → 제어 실패 → 해결책) */
@media (max-width: 1099px) {
	.pdg-wrap { grid-template-columns: 1fr; }

	.pl-list { flex-direction: row; }
	.pl-list > li { flex: 1 1 0; min-width: 0; }
	.pl-body { flex-direction: row; align-items: center; gap: 12px; }
	.pl-body .pdg-img { flex: 0 0 42%; }

	/* 스택 시 : 꺾인 화살표 이미지 대신 카드마다 아래 방향 화살표 */
	.pf-arrow { display: none; }

	.pl-list > li { position: relative; padding-bottom: 32px; }
	.pl-list > li:after {
		content: ""; position: absolute; left: 50%; bottom: 2px;
		width: 26px; height: 22px; margin-left: -13px;
		background: 50% 50% / 26px 22px no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22' fill='%23c2c2c2'%3E%3Cpath d='M8 0h10v10h8L13 22 0 10h8z'/%3E%3C/svg%3E");
	}

	.pdg-fail { flex-direction: row; justify-content: center; padding:16px 12px; background:#33475f; border-radius:8px; margin-top:12px; }
	.pdg-fail p { font-weight: 700; color: #fff; letter-spacing: -0.03em; }
	.pdg-fail br { display: none; }
	.pdg-solve {margin-top:30px;}
}

@media (max-width: 900px) {
	.pl-body { flex-direction: column; align-items: stretch; }
	.pl-body .pdg-img { flex: none; }
}

/* 모바일 : 전체 1열 */
@media (max-width: 767px) {
	.pdg-title { margin: 44px 0 24px; }

	.pl-tit { margin-bottom: 14px; }

	.pl-list { flex-direction: column; gap: 14px; }
	.pl-head { padding: 12px 16px; }
	.pl-body { flex-direction: row; align-items: center; padding: 12px; }
	.pl-body .pdg-img { flex: 0 0 40%; }
	.pl-list > li:hover { transform: none; }

	/* 1열 배치이므로 화살표는 마지막 카드(3그룹) 아래에만 노출 */
	.pl-list > li { padding-bottom: 0; }
	.pl-list > li:after { display: none; }
	.pl-list > li:last-child { padding-bottom: 30px; }
	.pl-list > li:last-child:after { display: block; }

	.pdg-fail { flex-direction: column; padding:16px 12px; }

	.pdg-solve { border-radius: 12px; }
	.ps-head { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
	.ps-head span { padding-left: 0; border-left: 0; }
	.ps-body { padding: 14px 14px 0; }
	.pdg-img.r167 { aspect-ratio: 16/11; }
	.ps-foot { padding: 12px 14px 14px; }
	.ps-foot b { padding: 10px 14px; }
	.ps-foot p { padding: 14px; }
	.ps-foot .mo-br { display: block; }
}