:root {
	--brand-color: #0b223a;
	--text-color: #1a2a3a;
	--border-light: #dde4ef;
	--bg-light: #f8faff;
}



/* 가로 세그먼트형 탭 컴포넌트 */
.segment-tabs {
	display: flex;
	gap: 10px;
	margin-top: 30px;
	margin-bottom: 35px;
	border-bottom: 2px solid var(--border-light);
}

.segment-tab {
	background: #f1f5f9;
	border: 1px solid var(--border-light);
	border-bottom: none;
	color: #475569;
	font-size: 1rem;
	font-weight: 600;
	padding: 12px 35px;
	cursor: pointer;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	margin-bottom: -2px;
	transition: all 0.15s ease;
}

.segment-tab.active {
	background: var(--brand-color);
	border-color: var(--brand-color);
	color: #ffffff;
}

/* 패널별 상단 독립 타이틀 배지 */
.panel-header-badge {
	text-align: center;
	margin-bottom: 20px;
}

.badge-node {
	display: inline-block;
	background: #0B1F3A;
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 7px 26px;
	border-radius: 20px;
}

/* 상단 3분할 비주얼 그리드 구역 (반응형 변환 제어) */
.grid-layout-3way {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	/* 대화면 PC 기준 3열 정렬 */
	border: 1px solid var(--border-light);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 25px;
}

.visual-cell-item {
	/* min-height: 240px; */
	min-height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.visual-cell-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 각 분할 셀 기본 컬러 배경풀 */
.fill-gradient-a {
	background: linear-gradient(160deg, #1a2a4a, #0D7B8A);
}

.fill-gradient-b {
	background: linear-gradient(160deg, #0B1F3A, #1156A8);
}

.fill-gradient-c {
	background: linear-gradient(160deg, #1a0533, #0D7B8A);
}

.fill-dark-a {
	background: #111827;
}

.fill-light-a {
	background: var(--bg-light);
}

/* 본문 설명 명세 구역 */
.desc-layout-flex {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	/* margin-top: 50px;
	margin-bottom: 25px; */
	/* margin-left: 10%; */
	max-width: 800px;
	/* 이미지 박스와 동일한 폭 제한 */
	margin: 50px auto 25px auto;
	/* 중앙 정렬 처리로 이미지 왼쪽 끝선과 일치 */
}

.desc-content-list {
	flex: 1;
}

.desc-text-line {
	font-size: 13.5px;
	color: var(--text-color);
	line-height: 2.0;
	padding: 1px 0;
	text-align: justify;
}

.desc-side-buffer {
	min-width: 48px;
}

/* 하단 4분할 바둑판 카드 레이아웃 부문 (반응형 변환 제어) */
.grid-layout-4way {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 대화면 PC 기준 4열 횡대 정렬 */
	gap: 15px;
}

.application-card {
	border-radius: 8px;
	height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

.application-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* .card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(11, 31, 58, 0.85);
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    padding: 8px 5px;
    box-sizing: border-box;
} */

/* ==========================================================================
   2분할 가로 균등 비주얼 그리드 레이아웃 (상단 2개, 하단 2개 배치용)
   ========================================================================== */
.grid-layout-2way {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2열 균등 분할로 전체 가로폭 확장 */
	gap: 50px;
	/* 이미지 사이 간격 15px 부여 */
	/* margin-bottom: 50px; */
	max-width: 800px;
	/* max-height: 200px; */
	margin: 0 auto 25px auto;

}

/* 2분할 레이아웃 내부 카드/이미지 규격 */
.grid-layout-2way .visual-cell-item,
.grid-layout-2way .application-card {
	height: 240px;
	/* 이미지 세로 비율 최적화 */
	border-radius: 8px;
	overflow: hidden;
}

.grid-layout-2way img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}



/* ==========================================================================
   2분할 가로 비대칭 그리드 레이아웃
   ========================================================================== */
.grid-layout-2way-aspect {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/* 세로 높이가 서로 다른 두 박스가 억지로 늘어나 잘리지 않도록 정렬 */
	gap: 20px;
	max-width: 800px;
	margin: 0 auto 25px auto;
}

/* 좌측 1:1 사진 영역 (가로 약 45% 배정) */
.grid-layout-2way-aspect .aspect-card-square {
	width: 26%;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background-color: var(--bg-light);
}

/* 우측 가로로 긴 사진 영역 (가로 약 53% 배정) */
.grid-layout-2way-aspect .aspect-card-wide {
	width: 74%;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background-color: var(--bg-light);
}

/* 이미지 잘림 전면 방지 및 원본 비율 그대로 자동 높이 조절 */
.grid-layout-2way-aspect img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	/* 상하좌우 잘림 없이 100% 전면 노출 */
}





/* ==========================================================================\
   해상도별 흐름 최적화 - 반응형 미디어 쿼리(Media Query) 구간
   ========================================================================== */

/* 태블릿 구간 (1024px 이하 해상도) */
@media screen and (max-width: 1024px) {
	.grid-layout-4way {
		grid-template-columns: repeat(2, 1fr);
		/* 4분할 ➔ 2x2 바둑판 정렬 */
		gap: 12px;
	}

	.segment-tab {
		padding: 12px 20px;
		font-size: 0.95rem;
	}
}

/* 모바일 구간 (768px 이하 해상도) */
@media screen and (max-width: 768px) {
	/* .layout-main-title {
		font-size: 1.8rem;
	} */

	.segment-tabs {
		flex-direction: column;
		gap: 0;
		border-bottom: none;
	}

	.segment-tab {
		border-bottom: 1px solid var(--border-light);
		border-radius: 0;
		margin-bottom: 0;
		text-align: center;
	}

	.segment-tab:first-child {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.segment-tab:last-child {
		border-bottom: 2px solid var(--brand-color);
	}

	.grid-layout-3way {
		grid-template-columns: 1fr;
		/* 3분할 수평 ➔ 1열 완전 수직 배열 */
	}

	.visual-cell-item {
		min-height: 200px;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.visual-cell-item:last-child {
		border-bottom: none;
	}

	.desc-layout-flex {
		gap: 0;
	}

	.desc-side-buffer {
		display: none;
		/* 화면 폭 부족 시 우측 가상 여백 버퍼 제외 */
	}

	.grid-layout-4way {
		grid-template-columns: 1fr;
		/* 2x2 바둑판 ➔ 1열 완전 수직 배열 */
	}

	.application-card {
		height: 160px;
	}

	.grid-layout-2way {
		grid-template-columns: 1fr;
		/* 모바일에서는 1열 수직 정렬 */
		gap: 10px;
	}

	.grid-layout-2way .visual-cell-item,
	.grid-layout-2way .application-card {
		height: 180px;
	}

	.grid-layout-2way-aspect {
		flex-direction: column;
		/* 모바일에서는 수직 1열 정렬 */
		gap: 15px;
	}

	.grid-layout-2way-aspect .aspect-card-square,
	.grid-layout-2way-aspect .aspect-card-wide {
		width: 100%;
		/* 모바일에서는 100% 폭 확장 */
	}
}


/* ==========================================================================
   6. 화학 사업영역(대전방지 솔루션) 순차적 탭 시차 애니메이션 정의
   ========================================================================== */

/* 기본 정적 대기 상태: 투명화 및 30px 하향 배치 */
.input-title-area,
.segment-tabs,
.display-panel .panel-header-badge,
.display-panel .grid-layout-3way,
.display-panel .desc-layout-flex,
.display-panel .grid-layout-4way {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3분할 이미지의 미세 줌인 효과 동기화 */
.display-panel .grid-layout-3way .visual-cell-item img {
	transform: scale(0.96);
	transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* [A] 공통 상단 요소 등장 (최초 1회 실행) */
.layout-wrapper.motion_start .input-title-area {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

.layout-wrapper.motion_start .segment-tabs {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

/* [B] 패널 활성화(.motion_start) 시점의 내부 구성원 순차 시차(Delay) 배정 */

/* 1. 패널 독립 타이틀 배지 */
.display-panel.motion_start .panel-header-badge {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

/* 2. 3분할 비주얼 그리드 및 내부 이미지 복원 */
.display-panel.motion_start .grid-layout-3way {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

.display-panel.motion_start .grid-layout-3way .visual-cell-item img {
	transform: scale(1);
	transition-delay: 0.2s;
}

/* 3. 본문 세부 설명 명세 리스트 */
.display-panel.motion_start .desc-layout-flex {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.3s;
}

/* 4. 하단 4분할 바둑판 카드 레이아웃 */
.display-panel.motion_start .grid-layout-4way {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

/* 대기 상태 */
.display-panel .grid-layout-2way {
	/* opacity: 0; */
	transform: translateY(30px);
	transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 상단 2분할 이미지 등장 (0.2s 딜레이) */
.display-panel.motion_start .grid-layout-2way:first-of-type {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

/* 하단 2분할 이미지 등장 (0.4s 딜레이) */
.display-panel.motion_start .grid-layout-2way:last-of-type {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

/* 좌우 비대칭 2분할 이미지 */
.display-panel .grid-layout-2way-aspect {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.display-panel.motion_start .grid-layout-2way-aspect {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}