:root {
	--brand-color: #0b223a;
	--text-color: #334155;
	--border-light: #e2e8f0;
	--bg-light: #f8fafc;
}

/* 전체 컨테이너 및 헤더 간섭 보호선 */
.lab_page_wrapper {
	width: 100%;
	background-color: #ffffff;
	padding-top: 80px;
	box-sizing: border-box;
}

.lab_container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px;
	/* 반응형용 양옆 20px 패딩 지정 */
	box-sizing: border-box;
}

/* 메인 대타이틀 스타일 */
.lab_container .lab_main_title {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--brand-color);
	text-align: center;
	line-height: 1.4;
	margin-bottom: 50px;
	letter-spacing: -1px;
}

.lab_main_title span {
	display: block;
	font-size: 1.05rem;
	color: #666666;
	font-weight: 500;
	margin-top: 8px;
	letter-spacing: 0;
}

/* 섹션 소타이틀 */
.lab_subtitle {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--brand-color);
	margin: 0 0 20px 0;
	padding-left: 10px;
	border-left: 4px solid var(--brand-color);
}

/* ==========================================================================
   상단 단락: [좌글 / 우사진 1:1 비율] flex Grid 디자인 
   ========================================================================== */
.lab_top_flex_box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/* 사진 높이에 맞게 여백 없이 Tight 밀착 */
	margin-bottom: 60px;
	gap: 40px;
}

/* 좌측 텍스트 정보 존 (1:1 비율을 위해 50% 배정) */
.lab_top_flex_box .lab_info_text_zone {
	width: calc(50% - 20px);
	/* gap 40px의 절반을 제외한 정확한 1:1 너비 */
	flex-shrink: 0;
}

.lab_info_text_zone .lab_lead_text {
	font-size: 1.1rem;
	color: var(--text-color);
	line-height: 1.8;
	margin: 0 0 30px 0;
	text-align: justify;
	word-break: keep-all;
}

/* 명세 데이터 그리드 */
.lab_info_text_zone .lab_detail_grid dl {
	margin: 0 0 20px 0;
	padding: 15px 20px;
	background-color: var(--bg-light);
	border: 1px solid var(--border-light);
	border-radius: 4px;
}

.lab_detail_grid dl dt {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--brand-color);
	margin-bottom: 6px;
}

.lab_detail_grid dl dt i {
	margin-right: 6px;
}

.lab_detail_grid dl dd {
	margin: 0;
	font-size: 1rem;
	color: #475569;
	line-height: 1.5;
}

.lab_detail_grid dl dd.sub_desc {
	font-size: 0.9rem;
	color: #64748b;
	margin-top: 4px;
}

/* 우측 이미지 구역 (1:1 비율을 위해 50% 배정) */
.lab_top_flex_box .lab_media_zone {
	width: calc(50% - 20px);
	/* gap 40px의 절반을 제외한 정확한 1:1 너비 */
	flex-grow: 0;
	/* 불필요하게 늘어나는 현상 방지 */
}

.lab_media_zone .lab_photo_box {
	width: 100%;
	height: auto;
	/* 상하 여백 없이 사진 높이에 밀착 */
	border: 1px solid var(--border-light);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.lab_photo_box img {
	width: 100%;
	height: auto;
	/* 원본 1261x644 비율 완전 보존 */
	display: block;
}

/* ==========================================================================
   하단 단락: 모든 인증서 첨부 바둑판 배열 격자 (자동 반응형 갯수 조절)
   ========================================================================== */
.lab_bottom_cert_zone {
	width: 100%;
	border-top: 1px solid var(--border-light);
	padding-top: 50px;
}

.lab_bottom_cert_zone .cert_grid_list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;

	/* 
	   [핵심] 최소 200px 폭을 보장하며 창 크기에 맞춰 1열~최대 5열까지 자동 계산
	*/
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.cert_grid_list li {
	width: 100%;
	box-sizing: border-box;
}

.cert_grid_list .cert_img_card {
	width: 100%;
	height: 300px;
	/* 카드 기본 세로 높이 */
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	background-color: #ffffff;
	padding: 10px;
	box-sizing: border-box;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cert_img_card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.cert_img_card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* 문서 비율 깨짐 방지 */
	display: block;
}

/* ==========================================================================
   반응형 미디어 쿼리 (상단 단락 수직 전환 및 모바일 높이 미세 조정)
   ========================================================================== */

/* 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
	.lab_top_flex_box {
		flex-direction: column;
		gap: 30px;
	}

	.lab_top_flex_box .lab_info_text_zone,
	.lab_top_flex_box .lab_media_zone {
		width: 100%;
	}
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
	.lab_container {
		padding: 40px 15px;
	}

	.lab_container .lab_main_title {
		font-size: 1.8rem;
		margin-bottom: 30px;
	}

	.lab_bottom_cert_zone .cert_grid_list {
		gap: 12px;
		/* 모바일 화면에서는 최소 폭을 140px로 줄여 무조건 2개씩 깔끔하게 나오도록 설정 */
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}

	.cert_grid_list .cert_img_card {
		height: 220px;
		/* 모바일용 카드 높이 축소 */
		padding: 6px;
	}
}


/* ==========================================================================
   애니메이션 효과 (Fade-in Up Motion)
   ========================================================================== */

/* 1. 기본 정적 대기 상태 (투명화 및 하향 대기) */
.lab_container .lab_main_title,
.lab_top_flex_box .lab_info_text_zone,
.lab_top_flex_box .lab_media_zone,
.lab_bottom_cert_zone .lab_subtitle,
.lab_bottom_cert_zone .cert_grid_list li {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. 모션 발동 (.motion_start) 시 순차 시차(Delay) 적용 */

/* 대타이틀 */
.lab_page_wrapper.motion_start .lab_main_title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

/* 상단 1:1 존 (좌측 개요 텍스트 -> 우측 연구소 사진) */
.lab_page_wrapper.motion_start .lab_info_text_zone {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.25s;
}

.lab_page_wrapper.motion_start .lab_media_zone {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

/* 하단 인증내역 섹션 소타이틀 */
.lab_page_wrapper.motion_start .lab_bottom_cert_zone .lab_subtitle {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.5s;
}

/* 하단 인증서 카드 목록 전체 */
.lab_page_wrapper.motion_start .cert_grid_list li {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.6s;
}