/**
 * 큐 11 — O-03 개인회생 / O-04 개인파산 전용 스타일.
 * 이 파일은 큐 11 작업자가 단독 소유한다. 다른 큐는 쓰지 않는다.
 * 공통 스타일(버튼·폼·헤더·푸터·커스텀 위젯)은 style.css 에 있다.
 */

/* responsive-grid: 좌측 본문 + 우측 상담폼 */
body .lo-service-grid {
	align-items: flex-start;
}

/**
 * Elementor 4.2.1 의 컨테이너 flex-size=grow 는 flex:1 0 auto (shrink 0) 로 계산돼
 * 좌측 본문이 우측 400px 폼을 밀어내고 가로 오버플로가 난다.
 * 컨테이너 width 컨트롤이 --width 를 출력하지 않아 데이터 쪽으로는 교정이 안 되므로
 * 폭 배분은 이 파일에서 확정한다.
 */
body .lo-left-col {
	flex: 1 1 0% !important;
	min-width: 0;
	max-width: 100%;
}

/* 우측 상담폼: sticky. Elementor Free 컨테이너는 position:sticky 컨트롤이 없어 클래스로 보강 */
body .lo-right-col {
	position: sticky;
	top: 100px;
	align-self: flex-start;
	flex: 0 0 400px !important;
	width: 400px;
	max-width: 100%;
}

/* step-row 본문 칸도 같은 이유 — 안 잠그면 170px 이미지 칸이 카드 밖으로 밀려난다 */
body .lo-step-content {
	flex: 1 1 0% !important;
	min-width: 0;
}

body .lo-step-img {
	flex: 0 0 170px !important;
}

/* step-card: pill 배지가 겹치는 기준이 되는 위치 컨텍스트 보정 */
body .lo-step-card {
	position: relative;
	overflow: visible;
}

body .lo-step-pill {
	white-space: nowrap;
}

/**
 * compare-table (O-04 전용): 행=컨테이너, 칸=text-editor 위젯.
 * inline style HTML 은 wptexturize 가 따옴표를 말아 올려 그대로 노출되므로 쓰지 않는다.
 * 칸 폭·구분선·헤더 배경은 전부 여기서 준다.
 */
/* 행 사이 기본 gap 을 죽여야 표처럼 붙는다 (시안 행 높이 ~60px) */
body .lo-compare-rows > .e-con-inner,
body .lo-compare-rows {
	gap: 0 !important;
}

/* 배경·테두리·셀 여백·타이포는 전부 Elementor 네이티브 설정으로 옮겼다. 여기 남는 건 폭 배분뿐 */
body .lo-cmp-row > .elementor-widget {
	margin: 0;
}

body .lo-cmp-row .elementor-widget-container > p {
	margin: 0;
}

/* 컨테이너 width 컨트롤이 --width 를 출력하지 않는 건 위 lo-left-col 과 같은 이유 */
body .lo-cmp-label {
	flex: 0 0 150px !important;
}

body .lo-cmp-a,
body .lo-cmp-b {
	flex: 1 1 0% !important;
	min-width: 0;
}

/* 태블릿(<=1024px): 좌우 그리드 유지, 여백만 축소 */
@media (max-width: 1024px) {
	body .lo-service-grid {
		gap: 32px;
	}
}

/* 모바일(<768px): 세로 스택, 우측 폼 sticky 해제, step-card 이미지 축 전환 */
@media (max-width: 768px) {
	body .lo-right-col {
		position: static;
		top: auto;
		flex: 1 1 auto !important;
		width: 100% !important;
	}

	body .lo-step-row,
	body .lo-step-row > .e-con-inner {
		flex-direction: column !important;
	}

	body .lo-step-img {
		flex: 1 1 auto !important;
		width: 100% !important;
	}

	body .lo-cmp-label,
	body .lo-cmp-a,
	body .lo-cmp-b {
		flex: 1 1 auto !important;
		width: 100%;
	}

	body .lo-compare-rows > .elementor-widget-text-editor .elementor-widget-container > div > div {
		flex: 1 1 100% !important;
	}
}