/*
 * K-FIMS Solution — 슬라이드 11 레이아웃 전용 스타일
 * 배너·카드·플로우 등 공통 요소는 theme.css 유틸리티를 사용하고,
 * 여기에는 통합관리 비주얼 노드 배치와 모듈 그리드만 정의합니다.
 */

/* ===================== 통합관리 비주얼 (중앙 모니터 + 4주체 노드) ===================== */
.kf-sol-visual {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 560px;
}

.kf-sol-art {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 16 / 9;
}

.kf-sol-node {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1px solid #dbe4f2;
	border-radius: 12px;
	padding: 9px 13px;
	box-shadow: 0 10px 24px rgba(18, 42, 90, 0.10);
	font-size: 13px;
	font-weight: 800;
	color: #16295c;
	white-space: nowrap;
}

.kf-sol-node svg {
	width: 18px;
	height: 18px;
	color: #1d4ed8;
	flex: none;
}

.kf-sol-node--tl { top: 4px; left: -6px; }
.kf-sol-node--tr { top: 4px; right: -6px; }
.kf-sol-node--bl { bottom: 8px; left: -6px; }
.kf-sol-node--br { bottom: 8px; right: -6px; }

/* ===================== 6개 관리 모듈 그리드 ===================== */
.kf-sol-modules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 26px;
}

/* ===================== 8단계 스트립 (데스크톱 1행, 좁은 화면 줄바꿈) ===================== */
.kf-sol-strip .f-step {
	min-width: 0;
	font-size: 12.5px;
	padding: 13px 6px;
}

@media not all and (min-width: 1080px) {
	.kf-sol-strip {
		flex-wrap: wrap;
	}

	.kf-sol-strip .f-step {
		flex: 1 1 20%;
		min-width: 104px;
	}
}

/* ===================== 반응형 ===================== */
@media (min-width: 760px) {
	.kf-sol-modules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.kf-sol-modules {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media not all and (min-width: 760px) {
	.kf-sol-modules {
		gap: 10px;
	}

	.kf-sol-modules > div {
		min-width: 0;
		padding: 14px 10px 16px;
		text-align: left;
	}

	.kf-sol-modules > div > svg {
		width: 30px;
		height: 30px;
		margin: 0 0 9px;
	}

	.kf-sol-modules h3 {
		font-size: 13px;
		line-height: 1.42;
	}

	.kf-sol-modules p {
		font-size: 11.5px;
		line-height: 1.6;
	}

	.kf-sol-visual {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		max-width: none;
	}

	.kf-sol-art {
		grid-column: 1 / -1;
	}

	.kf-sol-node {
		position: static;
		justify-content: center;
		white-space: normal;
		text-align: center;
		font-size: 12px;
		padding: 8px 10px;
	}
}