@charset "utf-8";
/* ============================================================
   교정 절차 (guide_step)
   ============================================================ */

/* 단계 흐름 : 카드 사이에 화살표를 둔다 */
.sw-flow {
	display: grid;
	grid-template-columns: repeat(var(--cols, 5), 1fr);
	gap: 3.2rem;
	counter-reset: flow;
}

/* 열 수는 클래스로 지정 (반응형에서 덮어쓰기 위해 인라인 style 은 쓰지 않는다) */
.sw-flow-5 { --cols: 5; }
.sw-flow-6 { --cols: 6; }

.sw-flow li {
	position: relative;
	padding: 3.2rem 1.6rem 3rem;
	border-radius: var(--sw-radius);
	background: #fff;
	border: 1px solid var(--sw-line);
	text-align: center;
}

/* 단계 번호 */
.sw-flow li::before {
	counter-increment: flow;
	content: "STEP " counter(flow, decimal-leading-zero);
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--sw-blue);
	margin-bottom: 1.6rem;
}

/* 다음 단계 화살표 */
.sw-flow li + li::after {
	content: "\f285";
	font-family: "bootstrap-icons";
	position: absolute;
	top: 50%;
	left: -2.6rem;
	transform: translateY(-50%);
	font-size: 2rem;
	color: var(--sw-blue-pale);
}

/* 마지막 단계(발급)는 강조 */
.sw-flow li:last-child {
	background: var(--sw-blue);
	border-color: var(--sw-blue);
}

.sw-flow li:last-child::before,
.sw-flow li:last-child strong,
.sw-flow li:last-child p {
	color: #fff;
}

.sw-flow li:last-child .ico {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.sw-flow .ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 6.4rem;
	height: 6.4rem;
	border-radius: 50%;
	background: var(--sw-panel);
	color: var(--sw-blue);
	font-size: 2.8rem;
	margin-bottom: 1.8rem;
}

.sw-flow strong {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--sw-ink);
	word-break: keep-all;
}

.sw-flow p {
	margin-top: 1rem;
	font-size: 1.45rem;
	line-height: 1.6;
	color: var(--sw-mute);
	word-break: keep-all;
}

/* 견적요청 안내 + 신청 버튼 */
.sw-step-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3.2rem;
	padding: 3.6rem 4rem;
	border-radius: var(--sw-radius);
	background: var(--sw-panel);
	border: 1px solid #e2ebf5;
}

.sw-step-cta h4 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--sw-ink);
}

.sw-step-cta p {
	margin-top: 1rem;
	font-size: 1.6rem;
	line-height: 1.7;
	color: var(--sw-txt);
}

.sw-step-cta .sw-btns {
	flex-shrink: 0;
}

/* ------------------------------------------------------------
   반응형
   ------------------------------------------------------------ */
@media screen and (max-width: 1280px) {
	.sw-flow-5,
	.sw-flow-6 {
		--cols: 3;
	}

	/* 줄이 바뀌는 칸에는 화살표를 숨긴다 */
	.sw-flow li:nth-child(3n + 1)::after {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.sw-flow-5,
	.sw-flow-6 {
		--cols: 1;
		gap: 3.6rem;
	}

	/* 한 줄씩 쌓이므로 화살표를 위쪽(아래 방향)으로 */
	.sw-flow li + li::after,
	.sw-flow li + li:nth-child(3n + 1)::after {
		display: block;
		content: "\f282";
		top: -2.9rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.sw-step-cta {
		flex-direction: column;
		align-items: stretch;
		padding: 2.8rem 2.2rem;
	}
}