@charset "utf-8";

.transition-box {
	margin: 50px 0;
	padding: 45px;
	background: #f8fbfa;
	border: 1px solid #dde9e3;
	border-radius: 22px;
}

.transition-title {
	text-align: center;
	margin-bottom: 40px;
}

.transition-title h3 {
	margin: 0;
	font-size: 34px;
	color: #1f6b4e;
	font-weight: 700;
}

.transition-title p {
	margin-top: 12px;
	color: #666;
	font-size: 17px;
}

.transition-flow {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flow-card {
	flex: 1;
	background: #fff;
	border-radius: 18px;
	padding: 35px 28px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
	border-top: 5px solid #39b27d;
	min-height: 270px;
	box-sizing: border-box;
}

/* 📌 숫자와 타이틀을 한 줄로 묶어줄 헤더 영역 스타일 추가 */
.flow-card .card-header {
	display: flex;
	align-items: center;
	gap: 15px; /* 숫자와 타이틀 사이 간격 */
	margin-bottom: 18px;
}

.flow-card .num {
	width: 42px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	border-radius: 50%;
	background: #39b27d;
	color: #fff;
	font-weight: 700;
	flex-shrink: 0; /* 숫자가 찌그러지지 않도록 고정 */
	margin-bottom: 0; /* 기존 마진 초기화 */
}

.flow-card h4 {
	margin: 0;
	color: #1d5d46;
	font-size: 22px; /* 카드 크기에 맞게 미세 조정 */
}

.flow-card p {
	margin: 0;
	color: #555;
	line-height: 1.9;
	word-break: keep-all;
}

.flow-arrow {
	flex: 0 0 60px;
	text-align: center;
	font-size: 38px;
	color: #58b88d;
	font-weight: 300;
}

@media (max-width: 900px) {
	.transition-box {
		padding: 25px;
	}
	.transition-flow {
		flex-direction: column;
		gap: 20px;
	}
	.flow-arrow {
		transform: rotate(90deg);
	}
	.flow-card {
		width: 100%;
		min-height: auto;
	}
}