@charset "UTF-8";

.process-flow {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		padding-left: 30px;
		margin-top: 32px;
		margin-bottom: 32px;
	}

	.process-flow .step {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	/* --- 상단 화살표(단계) 영역 --- */
	.process-flow .step-header {
		height: 43px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 17px;
		position: relative;
		overflow: hidden;
		padding: 0 14px;
		text-align: center;
	}
	.process-flow .step-header:before {
		content: '';
		position: absolute;
		top: 0;
		left: -30px;
		bottom: 0;
		width: 43px;
		height: 43px;
		border-radius: 25px;
		background-color: #fff;
	}

	/* 각 단계별 배경색 및 도형 형태 (clip-path 사용) */
	.process-flow .step-1 .step-header {
		background: linear-gradient(to right, #25489f, #1e73e8);
		border-radius: 25px;
	}
	.process-flow .step-1 .step-header:before {
		display: none;
	}

	.process-flow .step-2 .step-header {
		background: linear-gradient(to right, #1e73e8, #0091e6);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	.process-flow .step-3 .step-header {
		background: linear-gradient(to right, #0091e6, #30b6e7);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	.process-flow .step-4 .step-header {
		background: linear-gradient(to right, #30b6e7, #35bfe5);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	/* --- 하단 텍스트(설명) 영역 --- */
	.process-flow .step-body {
		margin-top: 20px;
		margin-left: 30px;
		padding-left: 20px;
		border-left: 2px solid;
		min-height: 80px;
	}

	/* 단계별 세로선 색상 */
	.process-flow .step-1 .step-body { border-color: #25489f; }
	.process-flow .step-2 .step-body { border-color: #1e73e8; }
	.process-flow .step-3 .step-body { border-color: #0091e6; }
	.process-flow .step-4 .step-body { border-color: #30b6e7; }

	/* 세부 목록 스타일 */
	.process-flow .step-list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	/* 단계별 텍스트 스타일 */
	.process-flow .step-1 .step-text {
		background: linear-gradient(to right, #25489f, #1e73e8);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}
	.process-flow .step-2 .step-text {
		background: linear-gradient(to right, #1e73e8, #0091e6);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}
	.process-flow .step-3 .step-text {
		background: linear-gradient(to right, #0091e6, #30b6e7);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}
	.process-flow .step-4 .step-text {
		background: linear-gradient(to right, #30b6e7, #35bfe5);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}

	/* 모바일 대응 (화면이 좁아질 경우 세로로 배치) */
	@media (max-width: 765px) {
		.process-flow {
			flex-direction: column;
			gap: 15px;
			margin-top: 16px;
			margin-bottom: 16px;
		}
		.process-flow .step-header {
			border-radius: 25px;
			margin-left: 0;
		}
		.process-flow .step-header:before {
			display: none;
		}
		.process-flow .step-body {
			margin-top: 15px;
			min-height: auto;
		}
	}

	.process-flow-v2 .step-1 .step-header {
		background: linear-gradient(to right, #002782, #2657AC);
		border-radius: 25px;
	}

	.process-flow-v2 .step-2 .step-header {
		background: linear-gradient(to right, #2657AC, #176FD4);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	.process-flow-v2 .step-3 .step-header {
		background: linear-gradient(to right, #176FD4, #0387e1);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	.process-flow-v2 .step-4 .step-header {
		background: linear-gradient(to right, #0387e1, #15addd);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	.process-flow-v2 .step-5 .step-header {
		background: linear-gradient(to right, #15addd, #5fd6f0);
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
	}

	/* 단계별 세로선 색상 */
	.process-flow-v2 .step-1 .step-body { border-color: #002782; }
	.process-flow-v2 .step-2 .step-body { border-color: #2657AC; }
	.process-flow-v2 .step-3 .step-body { border-color: #176FD4; }
	.process-flow-v2 .step-4 .step-body { border-color: #0387e1; }
	.process-flow-v2 .step-5 .step-body { border-color: #15addd; }

	/* 단계별 텍스트 스타일 */
	.process-flow-v2 .step-1 .step-text {
		background: linear-gradient(to right, #002782, #2657AC);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}
	.process-flow-v2 .step-2 .step-text {
		background: linear-gradient(to right, #2657AC, #176FD4);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}
	.process-flow-v2 .step-3 .step-text {
		background: linear-gradient(to right, #176FD4, #0387e1);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}
	.process-flow-v2 .step-4 .step-text {
		background: linear-gradient(to right, #0387e1, #15addd);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}
	.process-flow-v2 .step-5 .step-text {
		background: linear-gradient(to right, #15addd, #5fd6f0);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text; 
	}