/*
	설치 위치 가이드 (/guide/install) 전용
	- guide.css 다음에 로드. 공통 컴포넌트(.guide-section / .guide-table / .guide-cta-*)는 guide.css.
	- 색·간격·서체는 style.css :root 토큰만.
*/

/* =========================================================================
   1절 증상 진입
   ========================================================================= */
.guide-install .guide-symptom-jump {
	margin-bottom: var(--spacing-3);
}
.guide-symptom-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	padding: var(--spacing-7) var(--spacing-8);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-4);
	background: var(--white);
}
.guide-symptom-section .guide-equipment-title {
	display: flex;
	align-items: center;
	padding-left: 0;
	border-left: none;
}
.guide-symptom-point {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-2) var(--spacing-3);
	font-size: var(--text-body-lg);
	line-height: 1.5;
	color: var(--text-primary);
}
.guide-symptom-point-label {
	display: inline-block;
	padding: var(--spacing) var(--spacing-3);
	border-radius: var(--radius);
	background: var(--blue-100);
	font-size: var(--text-body-sm);
	font-weight: 600;
	line-height: 1.3333;
	color: var(--blue-900);
	white-space: nowrap;
}
.guide-symptom-point-value {
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--secondary);
}
.guide-symptom-point-value a {
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 근거(비공개)·▸ 메모 줄 — 샘플에서만 노출 */
.guide-src {
	margin: 0;
}
.guide-src .tl-internal {
	display: inline-block;
	padding: var(--spacing-2) var(--spacing-3);
	line-height: 1.5;
}

/* =========================================================================
   2절 계통도 (인라인 SVG)
   ========================================================================= */
.guide-diagram {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	margin: 0;
}
.guide-diagram-canvas {
	width: 100%;
	padding: var(--spacing-6);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-4);
	background: var(--white);
	overflow: hidden;
}
.guide-diagram-canvas svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 1200px;
	margin: 0 auto;
	font-family: var(--font-paperlogy), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.guide-diagram-canvas svg text {
	font-size: 14px;
	fill: var(--text-primary);
	user-select: none;
}
.guide-diagram-canvas svg .gd-box {
	fill: var(--gray-100);
	stroke: var(--gray-300);
	stroke-width: 1.5;
}
.guide-diagram-canvas svg .gd-box--pipe {
	fill: var(--white);
	stroke: var(--gray-400);
	stroke-dasharray: 6 4;
}
.guide-diagram-canvas svg .gd-box--filter {
	fill: var(--blue-050);
	stroke: var(--secondary);
	stroke-width: 2.5;
}
.guide-diagram-canvas svg .gd-box-label {
	font-size: 15px;
	font-weight: 600;
	text-anchor: middle;
	dominant-baseline: middle;
}
.guide-diagram-canvas svg .gd-box--filter + .gd-box-label {
	fill: var(--secondary);
}
.guide-diagram-canvas svg .gd-flow {
	fill: none;
	stroke: var(--gray-400);
	stroke-width: 2.5;
}
.guide-diagram-canvas svg .gd-arrow-head {
	fill: var(--gray-400);
}
.guide-diagram-canvas svg .gd-tick {
	stroke: var(--gray-300);
	stroke-width: 1.5;
}
.guide-diagram-canvas svg .gd-point circle {
	fill: var(--white);
	stroke: var(--secondary);
	stroke-width: 2;
}
.guide-diagram-canvas svg .gd-point .gd-point-num {
	font-size: 18px;
	font-weight: 600;
	fill: var(--secondary);
	text-anchor: middle;
	dominant-baseline: central;
}
.guide-diagram-canvas svg .gd-point .gd-point-name {
	font-size: 13px;
	font-weight: 600;
	text-anchor: middle;
}
.guide-diagram-canvas svg .gd-point .gd-point-sub {
	font-size: 11px;
	fill: var(--text-secondary);
	text-anchor: middle;
}
.guide-diagram-canvas svg .gd-point .gd-point-prio {
	font-size: 11px;
	font-weight: 600;
	fill: var(--text-secondary);
	text-anchor: middle;
}
.guide-diagram-canvas svg .gd-point.is-primary circle {
	fill: var(--secondary);
}
.guide-diagram-canvas svg .gd-point.is-primary .gd-point-num {
	fill: var(--white);
}
.guide-diagram-canvas svg .gd-point.is-primary .gd-point-name,
.guide-diagram-canvas svg .gd-point.is-primary .gd-point-prio {
	fill: var(--secondary);
}
.guide-diagram-canvas svg .gd-point.is-primary .gd-point-prio {
	font-size: 12px;
}
.guide-diagram-canvas svg .gd-bad-line {
	fill: none;
	stroke: var(--red-text);
	stroke-width: 2;
	stroke-dasharray: 7 5;
}
.guide-diagram-canvas svg .gd-bad-head {
	fill: var(--red-text);
}
.guide-diagram-canvas svg .gd-bad-x {
	font-size: 26px;
	font-weight: 700;
	fill: var(--red-text);
	text-anchor: middle;
	dominant-baseline: central;
}
.guide-diagram-canvas svg .gd-bad-x-bg {
	fill: var(--white);
	stroke: var(--red-text);
	stroke-width: 2;
}
.guide-diagram-canvas svg .gd-bad-label {
	font-size: 13px;
	font-weight: 600;
	fill: var(--red-text);
	text-anchor: middle;
}
.guide-diagram-canvas svg .gd-bracket {
	fill: none;
	stroke: var(--red-text);
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
}
.guide-diagram-caption {
	max-width: 960px;
	font-size: var(--text-body-lg);
	line-height: 1.75;
	color: var(--text-primary);
}
.guide-diagram-sub {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	max-width: 960px;
	margin: 0;
	padding: var(--spacing-5) var(--spacing-6);
	border-radius: var(--radius-3);
	background: var(--gray-100);
}
.guide-diagram-sub-label {
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--text-primary);
}
.guide-diagram-sub figcaption {
	font-size: var(--text-body-md);
	line-height: 1.6;
	color: var(--text-secondary);
}

/* --- 그림 v2 추가분 (2026-09-08) --------------------------------------- */
/* 사용 장비 박스 강조 — ⑤ 가 바로 앞에 붙는 자리 */
.guide-diagram-canvas svg .gd-box--use {
	fill: var(--blue-050);
	stroke: var(--blue-500);
	stroke-width: 2;
}
/* ⑤ 「가장 먼저」 알약 */
.guide-diagram-canvas svg .gd-pill {
	fill: var(--secondary);
}
.guide-diagram-canvas svg .gd-pill-text {
	font-size: 13px;
	font-weight: 600;
	fill: var(--white);
	text-anchor: middle;
	dominant-baseline: central;
}
/* 「여기서 다시 물이 생김」 */
.guide-diagram-canvas svg .gd-drop-label {
	font-size: 12px;
	fill: var(--text-secondary);
	text-anchor: middle;
}
/* 번호를 누르면 #point-n 으로 이동 */
.guide-diagram-canvas svg a { cursor: pointer; }
.guide-diagram-canvas svg a:hover .gd-point circle {
	fill: var(--blue-100);
}
.guide-diagram-canvas svg a:hover .gd-point.is-primary circle {
	fill: var(--primary);
}
.guide-diagram-canvas svg a:focus-visible .gd-point circle {
	stroke-width: 4;
}
/* 세로 흐름(모바일)에서 라벨은 원 오른쪽 */
.guide-diagram-canvas svg .gd-point .gd-point-name--left,
.guide-diagram-canvas svg .gd-point .gd-point-prio--left {
	text-anchor: start;
}
.guide-diagram-canvas--mobile svg {
	max-width: 380px;
	margin: 0 auto;
}

/* 그림 라벨 병기 (그림 안 글자에 의존하지 않도록 HTML 텍스트로도 낸다) */
.guide-diagram-legend {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	max-width: 960px;
}
.guide-diagram-legend-flow {
	font-weight: 600;
	color: var(--text-secondary);
}
.guide-diagram-legend-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--spacing-3);
}
.guide-diagram-legend-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing);
	padding: var(--spacing-4);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
	background: var(--white);
	transition: var(--transition);
}
.guide-diagram-legend-item:hover {
	border-color: var(--primary);
	background: var(--blue-050);
}
.guide-diagram-legend-item.is-primary {
	border-color: var(--secondary);
	background: var(--blue-050);
}
.guide-diagram-legend-num {
	font-size: var(--text-body-lg);
	font-weight: 600;
	color: var(--secondary);
}
.guide-diagram-legend-label {
	font-size: var(--text-body-md);
	font-weight: 600;
}
.guide-diagram-legend-prio {
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}
.guide-diagram-legend-item.is-primary .guide-diagram-legend-prio {
	font-weight: 600;
	color: var(--secondary);
}
.guide-diagram-bad-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}
.guide-diagram-bad-list li {
	font-size: var(--text-body-md);
	line-height: 1.6;
	color: var(--text-secondary);
}
.guide-diagram-bad-mark {
	font-weight: 700;
	color: var(--red-text);
}

/* =========================================================================
   설치 포인트별 설명 — 포인트마다 카드 하나(사진 1장 + 내용)
   ========================================================================= */
.guide-point-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-6);
}
.guide-point-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	padding: var(--spacing-7);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-4);
	background: var(--white);
}
/* ⑤ 는 한 줄을 다 쓴다. 넓은 화면에서는 사진 왼쪽 · 내용 오른쪽 */
.guide-point-card.is-primary {
	grid-column: 1 / -1;
	border-color: var(--secondary);
	background: var(--blue-050);
}
@media (min-width: 1025px) {
	.guide-point-card.is-primary {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-5) var(--spacing-7);
		align-items: start;
	}
	.guide-point-card.is-primary .guide-point-head {
		grid-column: 1 / -1;
	}
	.guide-point-card.is-primary .guide-media {
		max-width: 100%;
	}
}
.guide-point-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-3);
}
.guide-point-num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--secondary);
	border-radius: var(--radius-6);
	font-size: var(--text-body-lg);
	font-weight: 600;
	color: var(--secondary);
	background: var(--white);
}
.guide-point-card.is-primary .guide-point-num {
	background: var(--secondary);
	color: var(--white);
}
.guide-point-name {
	margin-right: auto;
}
.guide-point-prio {
	display: inline-block;
	padding: var(--spacing) var(--spacing-3);
	border-radius: var(--radius);
	background: var(--gray-100);
	font-size: var(--text-body-sm);
	font-weight: 600;
	line-height: 1.3333;
	color: var(--text-secondary);
	white-space: nowrap;
}
.guide-point-card.is-primary .guide-point-prio {
	background: var(--secondary);
	color: var(--white);
}
.guide-point-fields {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--spacing-3) var(--spacing-4);
	margin: 0;
}
.guide-point-fields dt {
	padding-top: 2px;
	font-size: var(--text-body-sm);
	font-weight: 500;
	line-height: 1.3333;
	color: var(--text-third);
}
.guide-point-fields dd {
	margin: 0;
	font-size: var(--text-body-md);
	line-height: 1.6;
	color: var(--text-primary);
}

/* 연결 조합·드레인 카드 안 사진 자리 */
.guide-option-card .guide-media {
	margin-bottom: var(--spacing-2);
}
.guide-option-pick {
	color: var(--text-secondary);
}

/* =========================================================================
   표 (3절 7열 · 4절 부품표 · 6절 · 8절)
   ========================================================================= */
.guide-table--wide {
	min-width: 1240px;
}
.guide-table--wide th:nth-child(2),
.guide-table--wide td:nth-child(2),
.guide-table--wide th:nth-child(3),
.guide-table--wide td:nth-child(3) {
	min-width: 150px;
}
.guide-table--wide th:nth-child(7),
.guide-table--wide td:nth-child(7) {
	min-width: 190px;
}
.guide-table--wide th:nth-child(5),
.guide-table--wide td:nth-child(5) {
	min-width: 260px;
}
.guide-table--wide th:nth-child(6),
.guide-table--wide td:nth-child(6) {
	min-width: 220px;
}
.guide-table .guide-cell-point {
	font-weight: 600;
	white-space: nowrap;
	color: var(--secondary);
}
.guide-table .guide-cell-prio {
	font-weight: 600;
	white-space: nowrap;
}
.guide-table .guide-cell-num {
	text-align: right;
	white-space: nowrap;
}
.guide-table .guide-cell-quiet {
	color: var(--text-secondary);
}
/* 표 안의 비공개 열 — td/th 는 table-cell 로 되돌린다 */
.guide-table th.tl-internal,
.guide-table td.tl-internal {
	display: table-cell;
	padding: var(--spacing-4) var(--spacing-5);
	border-radius: 0;
	line-height: 1.5;
}
.guide-table th.tl-internal {
	background: var(--gray-100);
}
.guide-table--internal {
	min-width: 800px;
}
.guide-table--internal th,
.guide-table--internal td {
	font-size: var(--text-body-sm);
	color: var(--gray-400);
}

/* =========================================================================
   4절 체결 방법
   ========================================================================= */
.guide-sub {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}
.guide-sub-title {
	padding-left: var(--spacing-4);
	border-left: 3px solid var(--secondary);
	color: var(--text-primary);
}
.guide-option-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-5);
}
/* 카드가 2장인 묶음(연결 조합 — 2026-10-22 OPTION 03 삭제) */
.guide-option-grid.is-2 {
	grid-template-columns: repeat(2, 1fr);
}
.guide-option-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	padding: var(--spacing-6);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-4);
	background: var(--white);
}
.guide-option-label {
	font-size: var(--text-body-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--secondary);
}
.guide-option-title {
	color: var(--text-primary);
}
.guide-option-card p {
	font-size: var(--text-body-md);
	line-height: 1.7;
	color: var(--text-primary);
}
/* 연결 조합 카드 — 「권장 연결」 머리표를 파란 둥근 표지로(권장 포인트 표 1순위 표지와 같은 모양),
   카드 맨 아래 가는 선 아래 한 줄(2026-11-10 커플러 강조 나안 강한 판). 드레인 카드는 쓰지 않는다 */
.guide-option-label.is-badge {
	align-self: flex-start;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--white);
	background: var(--secondary);
}
.guide-option-card p.guide-option-note {
	margin-top: auto;
	padding-top: var(--spacing-4);
	border-top: 1px solid var(--color-stroke);
	color: var(--text-primary);
}
.guide-option-card p.guide-option-note strong {
	font-weight: 700;
}
.guide-option-card p a,
.guide-prose-note a,
.guide-reco-note a {
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   7절 체크리스트
   ========================================================================= */
.guide-check-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	max-width: 960px;
	counter-reset: guide-check;
}
.guide-check-list li {
	position: relative;
	padding-left: 40px;
	font-size: var(--text-body-lg);
	line-height: 1.75;
	color: var(--text-primary);
	counter-increment: guide-check;
}
.guide-check-list li::before {
	content: counter(guide-check);
	position: absolute;
	left: 0;
	top: 0.2em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-6);
	background: var(--blue-100);
	font-size: var(--text-body-sm);
	font-weight: 600;
	line-height: 1;
	color: var(--blue-900);
}

/* 9절 CTA 전화 */
.guide-cta-aside a {
	color: var(--text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 미결 (샘플 전용) */
.guide-install-internal {
	gap: var(--spacing-5);
}
.guide-install-internal .guide-section-title {
	color: var(--gray-400);
}

/* =========================================================================
   Breakpoints
   ========================================================================= */
@media (max-width: 1024px) {
	.guide-option-grid,
	.guide-option-grid.is-2 {
		grid-template-columns: 1fr;
	}
	.guide-point-cards {
		grid-template-columns: 1fr;
	}
	.guide-diagram-legend-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.guide-symptom-section {
		gap: var(--spacing-3);
		padding: var(--spacing-5);
	}
	.guide-symptom-section .guide-equipment-title {
		font-size: var(--text-body-lg);
		line-height: 1.5;
	}
	.guide-symptom-point,
	.guide-symptom-point-value {
		font-size: var(--text-body-md);
	}
	/* 모바일은 세로 흐름 SVG 를 쓰므로 가로 스크롤이 필요 없다 */
	.guide-diagram-canvas {
		padding: var(--spacing-3);
	}
	.guide-diagram-canvas--mobile svg {
		min-width: 0;
	}
	.guide-diagram-legend-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.guide-point-fields {
		grid-template-columns: 1fr;
		gap: var(--spacing-2);
	}
	.guide-point-fields dt {
		padding-top: var(--spacing-3);
	}
	.guide-point-fields dt:first-child {
		padding-top: 0;
	}
	.guide-point-card {
		gap: var(--spacing-4);
		padding: var(--spacing-5);
	}
	.guide-diagram-caption,
	.guide-check-list li,
	.guide-diagram-sub-label {
		font-size: var(--text-body-md);
		line-height: 1.6;
	}
	.guide-option-card {
		padding: var(--spacing-5);
	}
	.guide-check-list li {
		padding-left: 34px;
	}
	.guide-check-list li::before {
		width: 22px;
		height: 22px;
	}
}

/* =========================================================================
   사진·그림·영상 연결분 (2026-09-08)
   - 한 장 그림은 인라인 SVG 대신 파일(img)로 넣는다 → PC/모바일 두 파일을 CSS로 전환
   - 2단(그림+사진) · 3단(연결 사진·설치 과정) 그리드, 모바일 1단
   ========================================================================= */

/* 그림(figure)은 잘리면 안 된다 — cover 대신 contain, 바탕은 흰색 */
.guide-install .guide-media--figure .guide-media-frame {
	background: var(--white);
}
.guide-install .guide-media--figure .guide-media-img {
	object-fit: contain;
}

/* --- 한 장 그림 (install-diagram.svg / install-diagram-m.svg) ----------- */
/* 입체 그림(2026-11-06)은 자체 바탕이 있어 틀과 여백 없이 그림 비율 그대로 둔다 */
.guide-diagram-figure--m .guide-media {
	max-width: 420px;
	margin: 0 auto;
}
/* 768px 초과는 가로형, 이하는 세로형 */
.guide-diagram-figure--m {
	display: none;
}

/* --- 그림 아래 2단: 실제 설치 모습 사진 + 프리필터 보조 그림 ------------- */
.guide-diagram-pair {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-6);
	align-items: start; /* 2026-09-09: 보조 그림 자리(2줄)가 사진 높이만큼 늘어나 빈 회색면이 생기던 것을 막는다 */
}
.guide-diagram-pair > .guide-media {
	max-width: 100%;
}
.guide-diagram-pair .guide-diagram-sub {
	max-width: 100%;
	height: auto;
	align-self: center; /* 2026-09-30: 사진(16:9)보다 낮은 박스가 위에 붙어 아래로 약 250px 비던 것 → 사진 높이의 가운데 */
}

/* --- 설치 주체: 문장 | 영상 2단 (2026-09-30) ------------------------------ */
.guide-who-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--spacing-6);
	align-items: start;
}
.guide-who-row > .guide-media {
	max-width: 100%;
}

/* --- 3단 사진 그리드 (연결 사진 3장 · 설치 과정 3장) -------------------- */
.guide-media-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-5);
}
.guide-media-grid-3 > .guide-media {
	max-width: 100%;
}

/* --- 포인트 카드 안 사진 — 카드가 사진에 밀리지 않게 높이를 묶는다 ------- */
.guide-point-card .guide-media {
	max-width: 100%;
}
.guide-point-card .guide-media-frame:not(.is-empty) {
	max-height: 380px;
}
.guide-point-card.is-primary .guide-media-frame:not(.is-empty) {
	max-height: 460px;
}

/* --- Breakpoints ------------------------------------------------------- */
@media (max-width: 1024px) {
	.guide-media-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.guide-diagram-pair,
	.guide-who-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.guide-diagram-figure--pc {
		display: none;
	}
	.guide-diagram-figure--m {
		display: block;
	}
	.guide-diagram-figure .guide-media-frame {
		padding: var(--spacing-3);
	}
	.guide-media-grid-3 {
		grid-template-columns: 1fr;
	}
	.guide-point-card .guide-media-frame:not(.is-empty),
	.guide-point-card.is-primary .guide-media-frame:not(.is-empty) {
		max-height: none;
	}
	/* 2~3열 표는 모바일 폭 안에 넣는다(공통 .guide-table 최소 폭 640px 때문에 가격·인치 열이 첫 화면에서 잘리던 것, 2026-09-30) */
	.guide-parts-table,
	.guide-hose-table,
	.guide-na-table {
		min-width: 0;
	}
	.guide-parts-table th,
	.guide-hose-table th,
	.guide-na-table th {
		white-space: normal;
	}
	.guide-na-table .guide-cell-point {
		white-space: normal;
		width: 34%;
	}
}

/* =========================================================================
   테슬론 설치 권장 포인트 — 그림 바로 아래 표(2026-11-06 사이트 표로 재구성)
   ========================================================================= */
.guide-reco {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}
.guide-reco-note {
	color: var(--text-secondary);
}
/* 설치 비용과 절감 효과 — 2026-11-11 매니저 가안: 권장 포인트 표·영상 뒤로 옮긴 묶음. 요약 두 문단(둘째 문단 핵심만 굵게·보조색) */
.guide-costgroup {
	margin-top: var(--spacing-10);
}
.guide-cost-lead {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}
.guide-cost-lead p {
	margin: 0;
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: var(--text-primary);
}
.guide-cost-lead strong {
	font-weight: 700;
	color: var(--secondary);
}
.guide-reco-table {
	border: 0;
	border-top: 2px solid var(--text-primary);
}
.guide-reco-table th {
	padding: var(--spacing-3) var(--spacing-5);
	font-size: var(--text-body-md);
	font-weight: 600;
	text-align: left;
	color: var(--text-secondary);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-stroke);
}
.guide-reco-table td {
	padding: var(--spacing-5);
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--color-stroke);
}
.guide-reco-table tr.is-p1 td {
	background: var(--blue-050);
}
.guide-reco-prio {
	width: 96px;
	white-space: nowrap;
}
.guide-reco-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: var(--text-body-sm);
	font-weight: 600;
	line-height: 1.6;
	color: var(--text-secondary);
	background: var(--gray-100);
}
.guide-reco-table tr.is-p1 .guide-reco-badge {
	color: var(--white);
	background: var(--secondary);
}
.guide-reco-name {
	width: 190px;
}
.guide-reco-name a {
	font-weight: 700;
	color: var(--text-primary);
	text-decoration: none;
}
.guide-reco-name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.guide-reco-num {
	color: var(--secondary);
}
.guide-reco-sub {
	display: block;
	margin-top: 2px;
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}
.guide-reco-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.guide-reco-list li {
	position: relative;
	padding-left: 12px;
	font-size: var(--text-body-md);
	line-height: 1.6;
	color: var(--text-primary);
}
.guide-reco-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gray-400, #999);
}
/* 모바일: 표를 좌우로 밀지 않고 위치별 묶음으로 쌓는다 */
@media (max-width: 767px) {
	.guide-reco-table,
	.guide-reco-table tbody,
	.guide-reco-table tr,
	.guide-reco-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}
	.guide-reco-table thead {
		display: none;
	}
	.guide-reco-table tr {
		padding: var(--spacing-4) var(--spacing-4);
		border-bottom: 1px solid var(--color-stroke);
	}
	.guide-reco-table tr.is-p1 {
		background: var(--blue-050);
	}
	.guide-reco-table td {
		padding: 0;
		border: 0;
		background: transparent !important;
	}
	.guide-reco-table td.guide-reco-prio,
	.guide-reco-table td.guide-reco-name {
		display: inline-block;
		width: auto;
		margin-right: var(--spacing-2);
		vertical-align: middle;
	}
	.guide-reco-sub {
		display: inline;
		margin-left: 4px;
	}
	.guide-reco-table td[data-label] {
		margin-top: var(--spacing-3);
	}
	.guide-reco-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: var(--text-body-sm);
		font-weight: 600;
		color: var(--text-secondary);
	}
}

/* =========================================================================
   압력 손실(차압) 감소와 컴프레셔 전력 절감 — 권장 포인트 표 바로 아래(#power-note)
   2026-11-10 매니저(8번 가안). 두 칸 비교 → 월 전기료별 표(연간 절감액 강조) → 필터 1대 비용 한 줄 → 각주.
   표 ⑤ 개선 효과의 별표(.psim-mark)를 누르면 이 블록으로 온다. 금액 칸은 줄바꿈 금지
   ========================================================================= */
.psim {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	margin-top: var(--spacing-6);
	padding-top: var(--spacing-6);
	border-top: 1px solid var(--color-stroke);
	scroll-margin-top: 120px;
}
.psim-title {
	margin: 0;
	font-size: var(--text-heading-sm);
	font-weight: 700;
	line-height: 1.4;
	color: var(--text-primary);
}
.psim-star {
	margin-right: 4px;
	font-size: inherit;
	font-weight: inherit;
	color: var(--secondary);
}
.psim-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-4);
}
.psim-pair > div {
	padding: var(--spacing-4) var(--spacing-5);
	border-radius: var(--radius-2);
	background: var(--gray-100);
}
.psim-pair > div.is-tl {
	background: var(--blue-050);
}
.psim-pair-label {
	display: block;
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}
.psim-pair strong {
	display: block;
	margin: 2px 0 4px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--text-primary);
}
.psim-pair > div.is-tl strong {
	color: var(--secondary);
}
.psim-pair p {
	margin: 0;
	font-size: var(--text-body-md);
	line-height: 1.65;
	color: var(--text-secondary);
}
.psim-pair p + p {
	margin-top: 4px;
}
.psim-pair p b {
	font-weight: 700;
	color: var(--text-primary);
}
.psim-cap {
	margin: 0;
	font-size: var(--text-body-md);
	font-weight: 600;
	color: var(--text-primary);
}
.psim-table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--text-primary);
}
.psim-table th {
	padding: var(--spacing-3) var(--spacing-5);
	font-size: var(--text-body-md);
	font-weight: 600;
	text-align: left;
	color: var(--text-secondary);
	background: transparent;
	border-bottom: 1px solid var(--color-stroke);
}
.psim-table th.is-hl {
	font-weight: 700;
	color: var(--text-primary);
}
.psim-table td {
	padding: var(--spacing-4) var(--spacing-5);
	font-size: var(--text-body-md);
	color: var(--text-primary);
	border-bottom: 1px solid var(--color-stroke);
}
.psim-table td.num {
	font-variant-numeric: tabular-nums;
}
.psim-table tr.is-base td {
	background: var(--blue-050);
}
/* 연간 절감액 — 큰 굵은 글씨(보조색) */
.psim-table td.yr strong {
	font-size: 18px;
	font-weight: 700;
	color: var(--secondary);
	white-space: nowrap;
}
.psim-lab {
	display: block;
	font-size: var(--text-body-sm);
	font-weight: 400;
	color: var(--text-secondary);
}
/* 필터 1대 비용 막대 — 연 구독료를 앞에 두어 바로 위 연간 절감액과 비교 */
.psim-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-2) var(--spacing-6);
	padding: var(--spacing-4) var(--spacing-5);
	border-radius: var(--radius-2);
	background: var(--gray-100);
}
.psim-price-head {
	font-size: var(--text-body-md);
	font-weight: 700;
	color: var(--text-primary);
}
.psim-price-item {
	font-size: var(--text-body-md);
	color: var(--text-primary);
	white-space: nowrap;
}
.psim-price-item strong {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
}
.psim-price-sub {
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}
/* 적용 조건 — 각주에서 떼어 왼쪽 보조색 줄 상자로. 핵심 구절만 굵게 */
.psim-cond {
	padding: var(--spacing-4) var(--spacing-5);
	border-left: 3px solid var(--secondary);
	background: var(--blue-050);
}
.psim-cond-head,
.psim-basis-head {
	margin: 0 0 var(--spacing-2);
	font-size: var(--text-body-md);
	font-weight: 700;
	color: var(--text-primary);
}
.psim-cond ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding-left: 18px;
}
.psim-cond li {
	list-style: disc;
	font-size: var(--text-body-md);
	line-height: 1.65;
	color: var(--text-primary);
}
.psim-cond b {
	font-weight: 700;
}
.psim-basis-head {
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}
.psim-notes {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.psim-notes li {
	position: relative;
	padding-left: 12px;
	font-size: var(--text-body-sm);
	line-height: 1.6;
	color: var(--text-secondary);
}
.psim-notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gray-400, #999);
}
/* 권장 포인트 표 ⑤ 「차압 감소로 컴프레셔 전력 절감」 뒤 별표 링크 */
.guide-reco-list a.psim-mark {
	margin-left: 2px;
	font-weight: 700;
	color: var(--secondary);
	text-decoration: none;
}
@media (max-width: 768px) {
	.psim-pair {
		grid-template-columns: minmax(0, 1fr);
	}
	.psim-pair strong {
		font-size: 20px;
	}
	.psim-table th,
	.psim-table td {
		padding: var(--spacing-3) var(--spacing-2);
		font-size: var(--text-body-sm);
	}
	.psim-table td.num,
	.psim-table td:first-child {
		white-space: nowrap;
	}
	.psim-table td.yr strong {
		font-size: 15px;
	}
	.psim-lab {
		white-space: normal;
	}
	.psim-price {
		flex-direction: column;
		gap: 2px;
	}
	.guide-cost-lead p {
		font-size: var(--text-body-md);
	}
}

.guide-title-note {
	margin-left: var(--spacing-2);
	font-size: var(--text-body-lg);
	font-weight: 500;
	color: var(--text-secondary);
}

/* 체결 부품 구매 링크를 표 앞에(2026-11-09 매니저) */
.guide-parts-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-3) var(--spacing-5);
}
.guide-parts-buy p {
	font-size: var(--text-body-md);
	color: var(--text-secondary);
}

/* ⑤ 말단 카드 — 사진 세 장 + 사진마다 짧은 설명(2026-11-09 매니저, 시안 묶음 2).
   넓은 화면: 카드 폭 전체에 세 장 한 줄, 내용은 그 아래. 768px 이하: 한 장씩 세로로 */
.guide-point-photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spacing-4);
	width: 100%;
}
.guide-point-photos > .guide-media {
	max-width: 100%;
	margin: 0;
}
.guide-point-photos .guide-media-frame:not(.is-empty) {
	max-height: none;
}
.guide-point-photos .guide-media-caption {
	margin-top: var(--spacing-2);
}
@media (min-width: 1025px) {
	.guide-point-card.is-primary .guide-point-photos,
	.guide-point-card.is-primary .guide-point-photos ~ .guide-point-fields {
		grid-column: 1 / -1;
	}
}
@media (max-width: 768px) {
	.guide-point-photos {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--spacing-5);
	}
}