/**
 * kiesgf — 레이아웃
 * breakpoint 는 991 / 767 두 개만 사용한다.
 */

/* ==========================================================================
   Container
   ========================================================================== */

/*
 * --k-container-max 는 "내용 폭"이다. box-sizing:border-box 라서 max-width 에 그대로 넣으면
 * 좌우 padding 24 가 안쪽을 갉아먹어 내용이 1152 로 좁아진다(시안 실측은 1200).
 * padding 을 더한 값을 max-width 로 준다.
 */
.k-container {
	width: 100%;
	max-width: calc( var(--k-container-max) + var(--k-container-pad) * 2 );
	margin: 0 auto;
	padding-left: var(--k-container-pad);
	padding-right: var(--k-container-pad);
}

.k-container--narrow {
	max-width: calc( 800px + var(--k-container-pad) * 2 );
}

/* ==========================================================================
   Section
   ========================================================================== */

.k-section {
	padding-top: var(--k-space-section);
	padding-bottom: var(--k-space-section);
}

.k-section--tight {
	padding-top: var(--k-space-4xl);
	padding-bottom: var(--k-space-4xl);
}

.k-section--subtle {
	background-color: var(--k-bg-subtle);
}

.k-section--muted {
	background-color: var(--k-bg-muted);
}

.k-section--brand {
	background-color: var(--k-bg-brand);
	color: var(--k-text-inverse);
}

.k-section--brand-subtle {
	background-color: var(--k-bg-brand-subtle);
}

.k-section--accent-subtle {
	background-color: var(--k-bg-accent-subtle);
}

/* 섹션 헤더(제목 + 부제) */
.k-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-md);
	margin-bottom: var(--k-space-3xl);
}

/* ==========================================================================
   Grid
   ========================================================================== */

.k-grid {
	display: grid;
	gap: var(--k-space-lg);
	grid-template-columns: 1fr;
}

.k-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.k-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ==========================================================================
   Split — 좌우 2단(이미지 + 카피)
   ========================================================================== */

.k-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--k-space-3xl);
	align-items: center;
}

/* 데스크톱에서 이미지가 오른쪽인 변형 */
.k-split--reverse .k-split__media {
	order: 2;
}

.k-split__media > img {
	width: 100%;
	border-radius: var(--k-radius-lg);
}

.k-split__body {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-md);
}

/* ==========================================================================
   유틸 — 가로 스크롤 허용 래퍼 (표 / 프로세스 스텝)
   ========================================================================== */

.k-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.k-stack {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-md);
}

.k-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-space-sm);
}

/* ==========================================================================
   태블릿 이하 (<= 991)
   ========================================================================== */

@media (max-width: 991px) {
	.k-grid--3,
	.k-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 세로 스택 + 이미지 우선 */
	.k-split {
		grid-template-columns: 1fr;
		gap: var(--k-space-xl);
	}

	.k-split__media,
	.k-split--reverse .k-split__media {
		order: -1;
	}

	.k-section__head {
		margin-bottom: var(--k-space-2xl);
	}
}

/* ==========================================================================
   모바일 (<= 767)
   ========================================================================== */

@media (max-width: 767px) {
	.k-section {
		padding-top: var(--k-space-3xl);
		padding-bottom: var(--k-space-3xl);
	}

	.k-section--tight {
		padding-top: var(--k-space-2xl);
		padding-bottom: var(--k-space-2xl);
	}

	.k-grid--2,
	.k-grid--3,
	.k-grid--4 {
		grid-template-columns: 1fr;
	}
}