/*
	업종별 설치 가이드 (/guide, /guide/{slug}, /guide/install)
	- 뷰가 main.css 다음에 이 파일을 <link> 한다. main.css 의 .section-title / .heading-* / .mobile-only / .care-faq-* 를 재사용.
	- 색·간격·서체는 style.css :root 토큰만 쓴다.
	- 브레이크포인트는 사이트 관례: 1440(패딩) · 1024(햄버거) · 768(모바일) · 480/360(좁은 폰)
*/

/* =========================================================================
   page frame
   ========================================================================= */
.guide-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
	padding-top: var(--breadcrumb-h);   /* 브레드크럼(absolute) 높이만큼 비움 */
}
.guide-page [id] {
	scroll-margin-top: calc(var(--header-h) + var(--spacing-5));  /* 고정 헤더 아래 가림 방지 */
}

.guide-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding: 60px 0;
	border-bottom: 1px solid var(--color-stroke);
}
.guide-section:last-child {
	border-bottom: none;
}
.guide-section-header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}
.guide-section-title {
	color: var(--text-primary);
}
.guide-section-lead {
	color: var(--text-secondary);
}
.guide-section-note {
	color: var(--text-secondary);
}
.guide-section-more {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	flex-wrap: wrap;
}
.guide-eyebrow {
	color: var(--secondary);
}

/* 내부 표식: [본사 확인]·[자료 없음]·[가정]·[게시판]·괄호 근거 — 샘플에서만 노출 */
.tl-internal {
	display: inline;
	padding: 0 var(--spacing-2);
	border-radius: var(--radius);
	background: var(--gray-100);
	font-size: var(--text-body-sm);
	font-weight: 400;
	line-height: 1.3333;
	color: var(--text-secondary);   /* gray-400 은 gray-100 배경에서 읽히지 않아 gray-500 으로 */
	vertical-align: baseline;
}
li.tl-internal {
	display: list-item;
	padding: var(--spacing-2) var(--spacing-3);
}
/* components.css 의 `.btn + :not(.btn--tertiary, .btn--text) { color: white }` 가
   버튼 바로 뒤에 오는 표식·힌트를 흰 글씨로 만든다 → 되돌린다 */
.guide-page .btn + .tl-internal,
.guide-page .btn + .guide-cta-hint {
	color: var(--text-secondary);
}

/* 링크형 버튼: <a class="btn"> 는 a:link 색상 규칙에 밀리므로 여기서 되돌린다 */
.guide-page a.btn,
.guide-page a.btn:link,
.guide-page a.btn:visited {
	color: var(--white);
}
.guide-page a.btn--tertiary,
.guide-page a.btn--tertiary:link,
.guide-page a.btn--tertiary:visited,
.guide-page a.btn--text,
.guide-page a.btn--text:link,
.guide-page a.btn--text:visited {
	color: var(--text-primary);
}
.guide-page a.btn--tertiary:hover,
.guide-page a.btn--text:hover {
	color: var(--secondary);
}
.guide-link-arrow .icon svg {
	width: 20px;
	height: 20px;
}
.guide-link-arrow .icon svg path {
	stroke: currentColor;
	transition: var(--transition);
}

/* =========================================================================
   hero (허브 블록 1) · headline (업종 페이지 1)
   허브 상단은 products/main.php 의 섹션 규칙(.section-header > .section-title + .section-description,
   상하 80px)을 그대로 따른다. 큰 사진·영상 없이 eyebrow · h1 · 서브카피 2줄 · 텍스트 링크 2개.
   ========================================================================= */
.guide-hero {
	gap: var(--spacing-8);
	padding: 80px 0 60px;
}
.guide-headline {
	gap: var(--spacing-6);
}
.guide-hero .section-header {
	gap: var(--spacing-7);
}
.guide-hero-title {
	max-width: 960px;
	color: var(--text-primary);
	word-break: keep-all;
}
.guide-hero-sub {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	max-width: 856px;
}
.guide-hero-sub .body-xl {
	font-weight: 400;
	line-height: 1.6;
	color: var(--text-secondary);
	word-break: keep-all;
}
/* style.css 의 * { font-size: body-md } 때문에 문장 안 굵은 글씨가 14px 로 작아진다 — 가이드 전 페이지에서 주변 글씨 크기를 따르게 한다(2026-10-22) */
.guide-page strong {
	font-size: inherit;
}
.guide-hero-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-3) var(--spacing-6);
}
/* 내부 메모 줄 — 블록 맨 아래에만 두어 첫 화면에서 눈에 띄지 않게 한다 */
.guide-internal-line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-2);
	margin-top: calc(-1 * var(--spacing-4));
	opacity: 0.8;
}
.guide-internal-line:empty {
	display: none;
}
/* 표식 숨김 상태(guide-page--clean: 공개이거나 ?internal=1 이 없을 때). 헬퍼가 표식을 비우지만 혹시 남는 것도 그리지 않는다 */
.guide-page--clean .tl-internal,
.guide-page--clean .guide-src,
.guide-page--clean .guide-faq-src,
.guide-page--clean .guide-internal-line,
.guide-page--clean .guide-internal-notes,
.guide-page--clean .guide-install-internal {
	display: none !important;
}
.guide-src:empty,
.guide-faq-src:empty {
	display: none;
}

.guide-industry-title {
	color: var(--text-primary);
}
/* 업종 페이지 헤드라인(2026-09-09 v4) — 업종명 eyebrow · 회사 문장 h1 · 서브카피 · 대표 사진 */
.guide-headline-text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	max-width: 960px;
}
.guide-headline-title {
	color: var(--text-primary);
	word-break: keep-all;
}
.guide-headline-quote {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	margin: 0;
	padding-left: var(--spacing-6);
	border-left: 4px solid var(--secondary);
}
.guide-headline-quote cite {
	font-style: normal;
	color: var(--text-third);
}
.guide-headline-sub {
	max-width: 856px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--text-secondary);
	word-break: keep-all;
}

/* 업종 탭 (업종 페이지 상단) */
.guide-tabs {
	width: 100%;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.guide-tabs::-webkit-scrollbar {
	display: none;
}
.guide-tabs-list {
	display: flex;
	gap: var(--spacing-2);
	width: max-content;
	min-width: 100%;
	padding: var(--spacing-5) 0 0;
	border-bottom: 1px solid var(--color-stroke);
}
.guide-tabs-item a {
	display: block;
	padding: var(--spacing-4) var(--spacing-5);
	border-bottom: 2px solid transparent;
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--text-secondary);
	white-space: nowrap;
}
.guide-tabs-item a:hover {
	color: var(--secondary);
}
.guide-tabs-item.active a {
	border-bottom-color: var(--secondary);
	color: var(--secondary);
}

/* 목차 (설치 가이드) */
.guide-toc-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-3);
}
.guide-toc-list a {
	display: inline-block;
	padding: var(--spacing-2) var(--spacing-4);
	border: 1px solid var(--color-stroke);
	border-radius: 100px;
	font-size: var(--text-body-md);
	color: var(--text-secondary);
}
.guide-toc-list a:hover {
	border-color: var(--secondary);
	color: var(--secondary);
}

/* =========================================================================
   업종 카드 6장 (허브 블록 2)
   ========================================================================= */
.guide-industry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-7);
}
.guide-industry-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	height: 100%;
	padding: var(--spacing-8);
	border-radius: var(--radius-5);
	background: var(--gray-100);
	transition: var(--transition);
}
.guide-industry-card::before {   /* products/main.php .product-item 과 같은 그라데이션 테두리 */
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: var(--radius-5);
	background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-100) 42.31%, var(--gray-200) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: var(--transition);
}
.guide-industry-card:hover {
	background: var(--white);
	box-shadow: 0 2px 10px 0 rgba(28, 86, 255, 0.4);
}
.guide-industry-card:hover::before {
	padding: 3px;
	background: linear-gradient(180deg, var(--primary) 0%, var(--blue-500) 42.31%, var(--primary) 100%);
}
.guide-industry-head {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-3);
	flex-wrap: wrap;
}
.guide-industry-name {
	color: var(--text-primary);
}
.guide-industry-sub {
	color: var(--text-third);
}
.guide-industry-problem {
	flex: 1;
	font-weight: 500;
	line-height: 1.6;
	color: var(--text-primary);
	word-break: keep-all;
}
.guide-industry-equipment {
	color: var(--text-secondary);
}
.guide-industry-equipment .guide-dot {
	color: var(--gray-300);
}
.guide-industry-foot {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	padding-top: var(--spacing-5);
	border-top: 1px solid var(--color-stroke);
}
.guide-industry-more {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--secondary);
}
.guide-industry-more .icon svg {
	width: 18px;
	height: 18px;
}
.guide-industry-more .icon svg path {
	stroke: var(--secondary);
}
/* 공개 전 업종 카드 — 링크 없음, 「공개 예정」 (config guide_open) */
.guide-industry-card.is-upcoming:hover {
	background: var(--gray-100);
	box-shadow: none;
}
.guide-industry-card.is-upcoming:hover::before {
	padding: 1px;
	background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-100) 42.31%, var(--gray-200) 100%);
}
.guide-industry-more.is-upcoming {
	font-weight: 500;
	color: var(--text-third);
}
.guide-preview-figure.is-static:hover .guide-media-frame {
	border-color: var(--color-stroke);
	box-shadow: none;
}

/* =========================================================================
   증상 버튼 7개 (허브 블록 3)
   ========================================================================= */
.guide-symptom-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-4);
}
.guide-symptom-btn {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	width: 100%;
	padding: var(--spacing-5) var(--spacing-6);
	border: 2px solid var(--color-stroke);
	border-radius: var(--radius-3);
	background: var(--white);
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--text-primary);
	transition: var(--transition);
}
.guide-symptom-btn:hover {
	border-color: var(--secondary);
	color: var(--secondary);
}
.guide-symptom-num {
	flex-shrink: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-6);
	background: var(--blue-100);
	font-size: var(--text-body-md);
	font-weight: 600;
	line-height: 1;
	color: var(--blue-900);
}
.guide-symptom-label {
	flex: 1;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
.guide-symptom-btn .icon {
	flex-shrink: 0;
	display: inline-flex;
}
.guide-symptom-btn .icon svg {
	width: 20px;
	height: 20px;
}
.guide-symptom-btn .icon svg path {
	stroke: var(--gray-400);
	transition: var(--transition);
}
.guide-symptom-btn:hover .icon svg path {
	stroke: var(--secondary);
}

/* 설치 가이드 1절: 증상 소절 */
.guide-symptom-sections {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.guide-symptom-section .guide-symptom-num {
	margin-right: var(--spacing-3);
	vertical-align: middle;
}

/* =========================================================================
   설치 위치 가이드 미리보기 (허브 블록 4) — 그림(md 640) | 영상(sm 420) 2단, 모바일 1단
   ========================================================================= */
.guide-preview-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-7);
}
.guide-preview-figure {
	display: block;
	width: 100%;
	max-width: 960px;
}
.guide-preview-figure .guide-media-frame {
	border: 1px solid var(--color-stroke);
	transition: var(--transition);
}
.guide-preview-figure:hover .guide-media-frame {
	border-color: var(--secondary);
	box-shadow: var(--shadow-card);
}
.guide-preview-video {
	width: 100%;
	max-width: 100%;   /* 2026-11-09 매니저: 영상은 PC 에서 크게 — 크기는 media_slot 의 is-fit 이 화면 높이로 정한다 */
}
.guide-preview-row .guide-media {
	max-width: 100%;
}

/* =========================================================================
   빈 상태 · 최신 사례 (허브 블록 5)
   ========================================================================= */
.guide-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-10) var(--spacing-6);
	border: 1px dashed var(--gray-250);
	border-radius: var(--radius-4);
	background: var(--color-surface);
	text-align: center;
}
.guide-empty .body-lg {
	color: var(--text-secondary);
}
.guide-empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-4);
	margin-top: var(--spacing-3);
}
.guide-latest-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-6);
}
.guide-latest-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	padding: var(--spacing-5);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-4);
	background: var(--white);
	transition: var(--transition);
}
.guide-latest-card:hover {
	border-color: var(--secondary);
	box-shadow: var(--shadow-card);
}
.guide-latest-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-2);
	background: var(--gray-100);
}
.guide-latest-title {
	color: var(--text-primary);
}

/* =========================================================================
   CTA 띠 (허브 블록 5 · 업종 8 · 설치 가이드 9)
   ========================================================================= */
.guide-cta-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-7);
}
.guide-cta-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
.guide-cta-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	padding: var(--spacing-9);
	border-radius: var(--radius-5);
	background: var(--blue-050);
}
.guide-cta-title {
	color: var(--text-primary);
}
.guide-cta-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}
.guide-cta-body .body-lg {
	color: var(--text-secondary);
}
.guide-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--spacing-5);
	margin-top: auto;
}
.guide-cta-action {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}
.guide-cta-hint {
	color: var(--text-secondary);   /* text-third(gray-400) 는 카드 배경(gray-100)에서 읽히지 않음 */
}
.guide-cta-aside {
	color: var(--text-secondary);
}
.guide-cta-aside a.guide-cta-textlink,
.guide-cta-aside a.guide-cta-textlink:link,
.guide-cta-aside a.guide-cta-textlink:visited {
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* 프로모션 고정 문구(D9) — 섹션 헤더 안 보조 줄 */
.guide-cta-promo {
	display: inline-block;
	align-self: flex-start;
	padding: var(--spacing-2) var(--spacing-4);
	border-radius: var(--radius);
	background: var(--blue-100);
	font-weight: 500;
	color: var(--blue-900);
}

/* =========================================================================
   본문 문단 · 표 · 목록 (업종 페이지 2~5 · 설치 가이드)
   ========================================================================= */
/* 문단 간격은 넉넉히(2026-09-09 v4: 텍스트 밀도 낮게) */
.guide-prose {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
	max-width: 960px;
}
.guide-prose p,
.guide-prose li {
	font-size: var(--text-body-lg);
	line-height: 1.75;
	color: var(--text-primary);
}
.guide-prose a,
.guide-model-list a,
.guide-table a,
.guide-case a {
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.guide-prose-note {
	padding: var(--spacing-5) var(--spacing-6);
	border-radius: var(--radius-3);
	background: var(--gray-100);
	color: var(--text-secondary) !important;
}

.guide-table-wrap {
	width: 100%;
	overflow-x: auto;
}
.guide-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
}
.guide-table th,
.guide-table td {
	padding: var(--spacing-4) var(--spacing-5);
	border: 1px solid var(--color-stroke);
	font-size: var(--text-body-md);
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
}
.guide-table th {
	background: var(--gray-100);
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
}
.guide-table td {
	color: var(--text-primary);
}
.guide-points-table .guide-points-point {
	font-weight: 600;
	white-space: nowrap;
}
.guide-points-table .guide-points-site {
	color: var(--text-secondary);
}

.guide-model-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	max-width: 960px;
}
/* 강조 줄(2026-10-22 매니저 — 「호스·피팅·밸브는 기본 구성에 포함되지 않습니다」) */
.guide-model-list li.is-warn {
	color: var(--red-text);
}
.guide-model-list li {
	position: relative;
	padding-left: var(--spacing-6);
	font-size: var(--text-body-lg);
	line-height: 1.75;
	color: var(--text-primary);
}
.guide-model-list li::before {
	content: "";
	position: absolute;
	left: var(--spacing-2);
	top: 0.8em;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-6);
	background: var(--secondary);
}

/* =========================================================================
   적용 제품 — 사진(좌, sm 420) + 특장점 카드 그리드(우). 모바일 1단 (2026-09-09 v4)
   ========================================================================= */
.guide-product-block {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	align-items: start;
	gap: var(--spacing-9);
}
.guide-product-block.is-text-only {
	grid-template-columns: minmax(0, 960px);
}
.guide-product-media .guide-media {
	max-width: 100%;
}
.guide-product-text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-7);
}
.guide-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-5);
}
.guide-feature-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	padding: var(--spacing-7);
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-4);
	background: var(--white);
}
.guide-feature-title {
	color: var(--text-primary);
	word-break: keep-all;
}
.guide-feature-text {
	line-height: 1.6;
	color: var(--text-secondary);
	word-break: keep-all;
}

/* 업종 선택 절(2026-11-03 식품·HACCP — 콘텐츠 파일에 haccp·uses 키가 있을 때만 쓰임) */
.guide-feature-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}
.guide-feature-num {
	font-weight: 600;
	color: var(--secondary);
}
/* 3장 카드 + 카드 위 사진(2026-11-03 치과·의료 「진료 현장에서 압축공기 응축수가 일으키는 문제」) */
.guide-feature-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
.guide-feature-card.has-photo {
	gap: 0;
	padding: 0;
	overflow: hidden;
}
.guide-feature-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--gray-100);
}
.guide-feature-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	padding: var(--spacing-3) var(--spacing-7) var(--spacing-7);
}
.guide-quote-box {
	margin: 0;
	padding: var(--spacing-6) var(--spacing-7);
	border-radius: var(--radius-3);
	background: var(--gray-100);
}
.guide-prose .guide-pill {
	align-self: flex-start;
	padding: 10px var(--spacing-5);
	border-radius: 999px;
	background: var(--secondary);
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.5;
	color: var(--white);
}
.guide-prose .guide-source-note {
	font-size: var(--text-body-md);
	line-height: 1.5;
	color: var(--text-secondary);
}

/* 장비별 안내 — 소제목 · 사진(md) · 문단. 절 사이 간격 넉넉히 */
.guide-equipment-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
}
.guide-equipment {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
}
.guide-equipment-title {
	padding-left: var(--spacing-4);
	border-left: 3px solid var(--secondary);
	color: var(--text-primary);
}

/* =========================================================================
   사례 카드
   ========================================================================= */
.guide-case-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: dense;   /* 줄 전체 영상 카드 앞뒤로 카드가 혼자 남지 않게 빈칸을 채운다 */
	gap: var(--spacing-6);
}
/* 사진 우선 레이아웃 — 카드 맨 위가 사진(또는 사진 자리), 그 아래 본문 */
.guide-case {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-4);
	background: var(--white);
}
/* 사진 없는 카드가 사진 카드와 한 줄에 오면 grid 기본(stretch)으로 늘어나 본문 아래가 빈다 → 내용 높이로 */
.guide-case.is-no-photo {
	align-self: start;
}
.guide-case-photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	background: var(--color-stroke);
}
.guide-case-photos.is-multi {
	grid-template-columns: repeat(2, 1fr);
}
.guide-case-photos .guide-media {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	background: var(--white);
}
.guide-case-photos .guide-media-frame,
.guide-case-photos .guide-media-slot {
	border-radius: 0;
}
.guide-case-photos .guide-media-caption {
	flex: 1;
	margin: 0;
	padding: var(--spacing-3) var(--spacing-5);
	background: var(--white);
}
/* 카드 사진은 업종·사진 원본 비율과 관계없이 3:2 한 칸으로 맞춘다(2026-10-28 카드 크기 통일) */
.guide-case-photos .guide-media-frame:not(.is-empty) {
	aspect-ratio: 3 / 2;
}
/* 2장을 나란히 놓을 때는 원본 비율이 달라도 사진 자리 높이를 맞춘다.
   (4:3 사진과 1:1 사진이 한 줄에 오면 아래 설명 줄이 서로 어긋나 보인다) */
.guide-case-photos.is-multi .guide-media-frame {
	aspect-ratio: 4 / 3;
	height: auto;
}
.guide-case-photos.is-multi .guide-media-frame.is-empty .guide-media-slot {
	height: 100%;
	max-height: none;
}
.guide-case-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	padding: var(--spacing-7);
}
/* 영상 사례 카드 — 줄 전체를 차지하고 왼쪽에 세로 영상, 오른쪽에 본문(2026-11-03 기타 제조 보문인쇄) */
.guide-case.has-video {
	grid-column: 1 / -1;
	flex-direction: row;
}
.guide-case-video {
	flex: 0 0 300px;
	background: var(--gray-900, #1a1a1a);
}
.guide-case-video .guide-media {
	max-width: 100%;
	margin: 0;
}
.guide-case-video .guide-media-frame {
	border-radius: 0;
}
.guide-case-video .guide-media-video {
	object-fit: cover;
}
.guide-case.has-video .guide-case-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--spacing-8);
}
.guide-case-desc {
	margin: 0;
	color: var(--text-secondary);
}
.guide-case.is-na {
	border-color: var(--red-bg);
	background: #FFFBFB;
}
.guide-case-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-3);
}
.guide-case-badge {
	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-case-badge.is-na {
	background: var(--red-bg);
	color: var(--red-text);
}
.guide-case-month {
	color: var(--text-third);
}
.guide-case-title {
	color: var(--text-primary);
}
.guide-case-fields {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--spacing-3) var(--spacing-4);
	margin: 0;
}
.guide-case-fields dt {
	padding-top: 2px;
	font-size: var(--text-body-sm);
	font-weight: 500;
	line-height: 1.3333;
	color: var(--text-third);
}
.guide-case-fields dd {
	margin: 0;
	font-size: var(--text-body-md);
	line-height: 1.6;
	color: var(--text-primary);
}
/* 증상은 고객 말을 따옴표로 강조해 생동감을 준다 */
.guide-case-fields dd.guide-case-symptom {
	font-weight: 500;
}
.guide-case-fields dd.guide-case-symptom q {
	font-size: var(--text-body-lg);
	font-weight: 600;
	line-height: 1.5;
}
.guide-case-fields dd.guide-case-result {
	font-weight: 500;
}
.guide-case q {
	quotes: "“" "”";
	font-style: normal;
	font-weight: 500;
	color: var(--blue-900);
}
.guide-case-notes {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
	padding-top: var(--spacing-3);
	border-top: 1px dashed var(--color-stroke);
}
.guide-case-notes li.tl-internal {
	padding: 0;
	background: transparent;
}

/* =========================================================================
   FAQ (care-faq 마크업 재사용) · 미결
   ========================================================================= */
.guide-faq {
	max-width: 960px;
	margin: 0;
}
.guide-faq-src {
	margin-top: var(--spacing-3);
}
.guide-internal-notes ul {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	padding-left: var(--spacing-5);
}
.guide-internal-notes li.tl-internal {
	list-style: disc;
	padding: 0;
	background: transparent;
}
.guide-todo {
	display: inline-block;
	padding: var(--spacing-3) var(--spacing-4);
}

/* =========================================================================
   사진·영상 자리 (partials/media_slot.php)
   원고의 [사진: …] · [영상: …] · [그림: …] 표식을 옮긴 것.
   파일이 있으면 img/video, 없으면 같은 비율의 점선 자리 박스.
   ========================================================================= */
/* 사진 크기 공통 규칙(2026-09-09, 매니저 피드백 2 — 모든 가이드 페이지에 적용)
   - wide 760px · md 640px · sm 420px. 본문 폭 안에서 왼쪽 정렬(가운데 정렬 아님).
   - 카드 안(업종 카드 썸네일·사례 카드·포인트 카드)은 카드 폭 100% 로 덮어쓴다.
   - 캡션 12.5px 회색. */
.guide-media {
	width: 100%;
	margin: 0;
}
.guide-media.is-xl    { max-width: 960px; }   /* 가로로 긴 배너(치과 대표 사진, 2026-11-03) */
.guide-media.is-wide  { max-width: 760px; }
.guide-media.is-md    { max-width: 640px; }
.guide-media.is-sm    { max-width: 420px; }
.guide-media.is-xs    { max-width: 280px; }   /* 세로 현장 영상(2026-11-06) */
/* 영상은 본문 폭을 다 쓰되 한 화면에 다 들어오게 화면 높이로 제한(2026-11-09 매니저: PC 에서 너무 작다).
   200px = 머리글·캡션 여유. 세로 영상은 너무 작아지지 않게 최소 320px */
.guide-media.guide-media--video.is-fit      { max-width: 100%; }
.guide-media.guide-media--video.is-fit.is-land { max-width: min(100%, max(640px, calc((100vh - 200px) * 16 / 9))); }
.guide-media.guide-media--video.is-fit.is-std  { max-width: min(100%, max(560px, calc((100vh - 200px) * 4 / 3))); }
.guide-media.guide-media--video.is-fit.is-port { max-width: min(100%, max(320px, calc((100vh - 200px) * 9 / 16))); }

.guide-media-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-3);
	background: var(--gray-100);
}
.guide-media-frame.is-16x9 { aspect-ratio: 16 / 9; }
.guide-media-frame.is-12x5 { aspect-ratio: 12 / 5; }   /* 설치 위치 그림 SVG(1200×500) */
.guide-media-frame.is-4x3  { aspect-ratio: 4 / 3; }
.guide-media-frame.is-3x2  { aspect-ratio: 3 / 2; }
.guide-media-frame.is-5x4  { aspect-ratio: 5 / 4; }
.guide-media-frame.is-1x1  { aspect-ratio: 1 / 1; }
.guide-media-frame.is-10x3 { aspect-ratio: 10 / 3; }
.guide-media-frame.is-9x16 { aspect-ratio: 9 / 16; }   /* 세로로 찍은 현장 영상(기타 제조 사례 카드) */
.guide-media-frame.is-auto { aspect-ratio: auto; }     /* 입체 그림(2026-11-06): 넓은 화면·모바일 그림의 비율이 달라 그림 비율을 그대로 쓴다 */
.guide-media-frame.is-auto .guide-media-img { height: auto; }
.guide-media-row:has(.guide-media-frame.is-auto) { grid-template-columns: minmax(0, 1fr); }

.guide-media-img,
.guide-media-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 아직 파일이 없는 자리 박스는 높이를 묶는다.
   비율대로 두면 960px 폭에서 540px 짜리 빈 상자가 되어 글이 멀어진다.
   실제 사진·영상이 들어가면 is-empty 가 빠지고 원래 비율로 돌아간다. */
.guide-media-frame.is-empty {
	aspect-ratio: auto;
	height: auto;
	background: transparent;
}
.guide-media-frame.is-empty .guide-media-slot {
	height: auto;
	min-height: 132px;
	max-height: 220px;
}
.guide-industry-thumb .guide-media-frame.is-empty .guide-media-slot {
	min-height: 132px;
	max-height: 168px;
}

/* 자리 박스 — 점선, 「사진 자리 / 영상 자리 / 그림 자리」 + 설명 회색 글씨 */
.guide-media-slot {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-2);
	width: 100%;
	height: 100%;
	padding: var(--spacing-5);
	border: 1px dashed var(--gray-250);
	border-radius: var(--radius-3);
	background: var(--color-surface);
	text-align: center;
}
.guide-media-slot-kind {
	font-weight: 600;
	color: var(--text-secondary);
}
.guide-media--video .guide-media-slot-kind { color: var(--blue-700); }
.guide-media--figure .guide-media-slot-kind { color: var(--secondary); }
.guide-media-slot-desc {
	max-width: 520px;
	color: var(--gray-400);
	line-height: 1.5;
}
.guide-media-slot-id.tl-internal {
	padding: 0 var(--spacing-2);
}
.guide-media-caption {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
	margin-top: var(--spacing-3);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--text-secondary);
}
.guide-media-caption .body-sm {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--text-secondary);
}
/* 자리 박스 여러 개를 나란히 */
.guide-media-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-5);
}
.guide-media-row > * {
	min-width: 0;
}
/* 사진 여러 장 + 공통 설명 한 줄(콘텐츠 media 의 type 'row') */
.guide-media-group {
	width: 100%;
	max-width: 640px;
}
.guide-media-group .guide-media-row {
	gap: var(--spacing-3);
}
/* 2026-11-10 세차 드라잉존 설치 전·후처럼 두 장을 크게 나란히(size 'xl') */
.guide-media-group--xl {
	max-width: 960px;
}
.guide-media-group--xl .guide-media.is-md {
	max-width: none;
}

/* 그림(figure)은 잘리면 안 된다 — 사진과 달리 cover 대신 contain, 바탕은 흰색.
   원고 비율과 SVG 비율이 어긋나도 라벨이 잘려 나가지 않게 한다. */
.guide-media--figure .guide-media-frame:not(.is-empty) {
	background: var(--white);
}
.guide-media--figure .guide-media-img {
	object-fit: contain;
}

/* =========================================================================
   영상 · 업종 카드 썸네일
   ========================================================================= */
/* 세로로 찍은 현장 영상이 16:9 자리에서 잘리지 않게 전체를 보여준다 */
.guide-media--video .guide-media-frame {
	background: var(--gray-900, #1a1a1a);
}
/* 세로 영상은 자리와 비율이 같아 꽉 채운다 */
.guide-media-frame.is-9x16 .guide-media-video {
	object-fit: cover;
}
.guide-media-video {
	object-fit: contain;
}
.guide-industry-thumb {
	width: 100%;
	margin-bottom: var(--spacing-2);
}
.guide-industry-thumb .guide-media-slot {
	padding: var(--spacing-4);
}
/* 업종 카드 썸네일 — 카드 폭 100% · 4:3 · 비율 안에서 잘라 채운다(cover). 공통 최대 폭 규칙보다 우선 */
.guide-industry-thumb .guide-media,
.guide-industry-thumb .guide-media.is-wide,
.guide-industry-thumb .guide-media-frame {
	width: 100%;
	max-width: 100%;
}
.guide-industry-thumb .guide-media-frame {
	aspect-ratio: 4 / 3;
}
.guide-industry-thumb .guide-media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   Breakpoints
   ========================================================================= */
@media (max-width: 1440px) {
	.guide-page {
		padding-left: var(--spacing-5);
		padding-right: var(--spacing-5);
	}
}

/* tablet: 헤더가 햄버거로 바뀌고 main 좌우 패딩이 0이 된다 */
@media (max-width: 1024px) {
	.guide-page {
		padding-top: var(--spacing-8);   /* 브레드크럼 없음(768 이하)이라도 헤더 아래 여백 */
	}
	.guide-industry-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-5);
	}
	.guide-symptom-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.guide-latest-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.guide-media-row {
		grid-template-columns: minmax(0, 1fr);   /* 1fr 이면 모바일 640px 그림이 칸을 넓혀 페이지가 가로로 넘친다(2026-09-30) */
	}
	.guide-cta-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.guide-case-grid {
		grid-template-columns: 1fr;
	}
	.guide-product-block {
		gap: var(--spacing-7);
	}
	.guide-feature-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* mobile */
@media (max-width: 768px) {
	.guide-page {
		padding-top: var(--spacing-6);
	}
	.guide-section {
		gap: var(--spacing-6);
		padding: 40px 0;
	}
	.guide-hero {
		padding: 40px 0;
	}
	/* main.css 가 768 이하에서 .section-header 를 가운데 정렬한다(메인 페이지용) → 허브는 왼쪽 정렬 유지 */
	.guide-hero .section-header,
	.guide-hero .section-description {
		align-items: flex-start;
		gap: var(--spacing-5);
	}
	.guide-hero .section-description .heading-xl {
		text-align: left;
	}
	.guide-hero-title,
	.guide-headline-title,
	.guide-headline-quote .heading-xl {
		font-size: var(--text-heading-md);   /* 24px */
		line-height: 1.3;
	}
	.guide-headline-text {
		gap: var(--spacing-4);
	}
	/* 적용 제품: 사진 위, 특장점 카드 아래 1단 */
	.guide-product-block,
	.guide-product-block.is-text-only {
		grid-template-columns: 1fr;
		gap: var(--spacing-6);
	}
	.guide-feature-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-4);
	}
	.guide-feature-card {
		padding: var(--spacing-5);
	}
	.guide-feature-card.has-photo .guide-feature-body {
		padding: var(--spacing-3) var(--spacing-5) var(--spacing-5);
	}
	.guide-equipment-list {
		gap: var(--spacing-8);
	}
	.guide-preview-row,
	.guide-preview-row.is-single {
		grid-template-columns: minmax(0, 1fr);   /* 그림·영상 세로 1단. 1fr 이면 640px 그림이 칸을 넓혀 페이지가 가로로 넘친다(2026-09-30) */
	}
	.guide-preview-figure,
	.guide-preview-video {
		max-width: 100%;
		min-width: 0;
	}
	.guide-section-title,
	.guide-industry-title {
		font-size: var(--text-heading-md);
		line-height: 1.166;
	}
	.guide-hero-sub .body-xl,
	.guide-headline-sub {
		font-size: var(--text-body-lg);
		line-height: 1.5;
	}
	.guide-section-lead,
	.guide-prose p,
	.guide-prose li,
	.guide-model-list li,
	.guide-cta-body .body-lg,
	.guide-industry-problem {
		font-size: var(--text-body-md);
		line-height: 1.6;
	}
	.guide-industry-grid {
		grid-template-columns: 1fr;   /* 모바일: 업종 카드 1열 (매니저 피드백 2026-09-09) */
		gap: var(--spacing-4);
	}
	.guide-industry-card {
		gap: var(--spacing-4);
		padding: var(--spacing-6);
	}
	.guide-industry-name {
		font-size: var(--text-heading-sm);
		line-height: 1.2;
	}
	.guide-symptom-list {
		grid-template-columns: 1fr;   /* 증상 버튼 1열 세로 나열 */
		gap: var(--spacing-3);
	}
	.guide-symptom-btn {
		padding: var(--spacing-4) var(--spacing-5);
		font-size: var(--text-body-md);
	}
	.guide-cta-grid,
	.guide-cta-grid--3 {
		grid-template-columns: 1fr;   /* CTA 두 칸 세로 */
		gap: var(--spacing-5);
	}
	.guide-cta-card {
		gap: var(--spacing-5);
		padding: var(--spacing-7) var(--spacing-6);
	}
	.guide-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.guide-cta-action .btn {
		width: 100%;
	}
	.guide-latest-grid {
		grid-template-columns: 1fr;
	}
	.guide-empty {
		padding: var(--spacing-8) var(--spacing-5);
	}
	.guide-case-body {
		gap: var(--spacing-4);
		padding: var(--spacing-5);
	}
	.guide-case-photos.is-multi {
		grid-template-columns: 1fr;
	}
	.guide-case.has-video {
		flex-direction: column;
	}
	.guide-case-video {
		flex: none;
	}
	.guide-case-video .guide-media {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
	.guide-case.has-video .guide-case-body {
		padding: var(--spacing-5);
	}
	.guide-media-row {
		grid-template-columns: minmax(0, 1fr);   /* 1fr 이면 모바일 640px 그림이 칸을 넓혀 페이지가 가로로 넘친다(2026-09-30) */
	}
	.guide-media.is-wide,
	.guide-media.is-md,
	.guide-media.is-sm {
		max-width: 100%;   /* 모바일은 본문 폭에 맞춘다 */
	}
	.guide-case-fields {
		grid-template-columns: 1fr;
		gap: var(--spacing-2);
	}
	.guide-case-fields dt {
		padding-top: var(--spacing-3);
	}
	.guide-case-fields dt:first-child {
		padding-top: 0;
	}
	.guide-table th,
	.guide-table td {
		padding: var(--spacing-3) var(--spacing-4);
		font-size: var(--text-body-sm);
	}
	.guide-tabs-item a {
		padding: var(--spacing-3) var(--spacing-4);
		font-size: var(--text-body-md);
	}
}

@media (max-width: 480px) {
	.guide-industry-head {
		flex-direction: column;
		gap: var(--spacing);
	}
}

/* 대표 사진 옆 세로 영상(기타 제조, 2026-11-06) */
.guide-hero-pair {
	display: grid;
	grid-template-columns: min(45%, max(320px, calc((100vh - 200px) * 9 / 16))) minmax(0, 1fr);   /* 2026-11-09 매니저: 세로 영상이 핵심 — 왼쪽에 화면 높이만큼 크게 */
	gap: var(--spacing-7);
	align-items: start;
}
.guide-hero-pair .guide-media--photo { max-width: 100%; }   /* 사진은 남은 칸을 꽉 채워 영상과 사이가 뜨지 않게 */
.guide-hero-pair .guide-media--video { order: -1; }
@media (max-width: 767px) {
	.guide-hero-pair {
		grid-template-columns: minmax(0, 1fr);
	}
	.guide-hero-pair .guide-media--video {
		margin: 0 auto;
	}
}
/* 파일 없는 자리를 공개 화면에서 뺀 뒤 비는 줄·칸은 접는다(2026-09-30) */
.guide-page--clean .guide-media-row:not(:has(figure)) {
	display: none;
}

/* 구독 신청·상담: 구독·구매 비교표, 에어건 칸 */
.guide-cta-grid--care {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
.guide-cta-grid--one {
	grid-template-columns: minmax(0, 760px);
}
.guide-compare-note {
	font-size: var(--text-body-md);
	line-height: 1.6;
	color: var(--text-secondary);
}
/* 2026-11-10 매니저 A안: 흰 칸·파란 칸·회색 머리칸을 빼고 선만 남긴 평면 표(오른쪽 에어핀 목록과 같은 「선으로 나눈 목록」).
   줄 머리가 칸 왼쪽 끝에서 시작해 표·안내문·버튼의 왼쪽 기준선이 하나로 맞는다. 시안 .claude/qa/mock1110/hubl-A.css */
.guide-compare {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}
.guide-compare th,
.guide-compare td {
	padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) 0;
	font-size: var(--text-body-md);
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	color: var(--text-secondary);
	background: transparent;
	border-bottom: 1px solid var(--color-stroke);
}
.guide-compare thead th:first-child,
.guide-compare tbody th {
	width: 96px;
	white-space: nowrap;
	color: var(--text-secondary);
}
.guide-compare thead th {
	padding-top: 0;
	padding-bottom: var(--spacing-3);
	font-size: var(--text-body-lg);
	font-weight: 700;
	color: var(--text-primary);
	border-bottom: 2px solid var(--gray-600);
	border-radius: 0;
}
.guide-compare thead th.is-care {
	color: var(--secondary);
	border-bottom-color: var(--secondary);
}
.guide-compare tbody th {
	font-weight: 500;
}
.guide-compare td.is-care {
	color: var(--text-primary);
}
.guide-compare td.is-care strong {
	color: var(--secondary);
}
.guide-compare strong {
	display: block;
	font-size: var(--text-body-lg);
	font-weight: 700;
	color: var(--text-primary);
}
.guide-compare td span {
	display: block;
	font-size: var(--text-body-sm);
}
.guide-handy {
	display: flex;
	flex-direction: column;
	margin: 0;
	border-top: 1px solid var(--color-stroke);
}
.guide-handy > div {
	padding: var(--spacing-3) 0;
	border-bottom: 1px solid var(--color-stroke);
}
.guide-handy dt {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-3);
	font-size: var(--text-body-md);
	font-weight: 700;
	color: var(--text-primary);
}
.guide-handy dt span {
	font-weight: 600;
	white-space: nowrap;
}
.guide-handy dd {
	margin: 2px 0 0;
	font-size: var(--text-body-md);
	line-height: 1.5;
	color: var(--text-secondary);
}
.guide-cta-minor {
	padding-top: var(--spacing-5);
	border-top: 1px solid var(--color-stroke);
}
.guide-cta-minor-title {
	margin: 0 0 2px;
	font-size: var(--text-body-sm);
	font-weight: 600;
	color: var(--text-secondary);
}
.guide-cta-minor p {
	font-size: var(--text-body-sm);
	line-height: 1.6;
	color: var(--text-secondary);
}
.guide-cta-minor a {
	white-space: nowrap;
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 1024px) {
	.guide-cta-grid--care {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 480px) {
	.guide-compare thead th:first-child,
	.guide-compare tbody th {
		width: 56px;
	}
	.guide-compare th,
	.guide-compare td {
		padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0;
	}
	.guide-compare thead th {
		padding-top: 0;
	}
}

/* 구독 칸: 상자 안 상자를 없앤다(2026-11-09 매니저) — 카드 배경을 빼고 표만 남김 */
.guide-cta .guide-cta-card {
	padding: 0;
	border-radius: 0;
	background: transparent;
}
.guide-cta-grid--care {
	gap: 0;
	align-items: start;   /* 2026-11-10 매니저 A안: 두 칸 높이를 억지로 맞추지 않는다 */
}
/* 버튼은 칸 바닥 고정을 풀고 각 칸 내용 바로 아래에(A안) */
.guide-cta .guide-cta-actions {
	margin-top: 0;
}
.guide-cta .guide-cta-body {
	gap: var(--spacing-5);
}
.guide-cta .guide-handy {
	margin-top: var(--spacing-2);
}
/* 칸 제목 아래 작은 줄(제품·구독/구매) — 2026-11-10 매니저 H4 가안. 카드 간격(20px)을 줄여 제목에 붙인다 */
.guide-cta-sub {
	margin-top: -12px;
	color: var(--text-secondary);
}
.guide-cta-grid--care > .guide-cta-card + .guide-cta-card {
	padding-left: var(--spacing-9);
	margin-left: var(--spacing-9);
	border-left: 1px solid var(--color-stroke);
}
@media (max-width: 1024px) {
	.guide-cta-grid--care > .guide-cta-card + .guide-cta-card {
		padding: var(--spacing-7) 0 0;
		margin: var(--spacing-7) 0 0;
		border-left: 0;
		border-top: 1px solid var(--color-stroke);
	}
}

/* 구독·구매 핵심 차이 한두 줄(2026-11-09 매니저 — 구독 버튼이 렌탈 안내 페이지를 건너뛰므로) */
.guide-compare-lead {
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: var(--text-primary);
}

/* 구독 안내 문장 끝 「자세한 조건」 링크(2026-11-09 매니저) */
.guide-compare-more {
	font-size: var(--text-body-md);
	color: var(--text-secondary);
}
.guide-compare-more a {
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   2026-11-10 매니저 검수 반영
   ========================================================================= */
/* 허브 머리말 두 줄 — 줄 앞 「효과」「설치」 작은 꼬리표(H1 나안) */
.guide-hero-sub .guide-hero-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.guide-hero-tag {
	flex: none;
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--color-stroke);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--text-primary);
}
@media (max-width: 768px) {
	.guide-hero-tag {
		font-size: 13px;
	}
}
/* 줄바꿈 금지 덩어리 — 「(ISO 12500-4 인증)」이 하이픈 뒤에서 갈라지지 않게 */
.guide-nowrap {
	white-space: nowrap;
}

/* 업종 페이지 그림·영상을 본문 전체 폭으로 통일(X4 다안). 시안 .claude/qa/mock1110/mpc/gen.py 의 x4-c
   - 그림(figure)은 본문 전체 폭(원본 1920 폭이라 화질 손실 없음). 사진 폭 규칙(9/9 결정)은 그대로
   - 연이은 영상 2개는 같은 높이로 한 줄(partials/media_pair.php). 768px 미만은 지금처럼 1단
   - 캡션 12.5 → 15px */
.guide-industry .guide-media--figure.is-xl {
	max-width: 100%;
}
.guide-media-pair {
	display: grid;
	grid-template-columns: var(--pair-cols, repeat(2, minmax(0, 1fr)));
	gap: var(--spacing-5);
	align-items: start;
}
.guide-media-pair > .guide-media.guide-media--video {
	max-width: none;
	min-width: 0;
}
@media (max-width: 767px) {
	.guide-media-pair {
		grid-template-columns: minmax(0, 1fr);
	}
	.guide-media-pair > .guide-media.guide-media--video.is-fit.is-port {
		max-width: min(100%, max(320px, calc((100vh - 200px) * 9 / 16)));
	}
}
.guide-industry .guide-media-caption,
.guide-industry .guide-media-caption .body-sm {
	font-size: 15px;
	line-height: 1.55;
}

/* 사례 카드가 1장뿐일 때 가로형(사진 왼쪽 56%, 글 오른쪽) — C4 가안. 모바일(768 이하)은 세로 그대로 */
@media (min-width: 769px) {
	.guide-case-grid:has(> .guide-case:only-child:not(.has-video)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.guide-case:only-child:not(.has-video):not(.is-no-photo) {
		flex-direction: row;
	}
	.guide-case:only-child:not(.has-video):not(.is-no-photo) .guide-case-photos {
		flex: 0 0 56%;
	}
	.guide-case:only-child:not(.has-video):not(.is-no-photo) .guide-case-photos .guide-media-frame:not(.is-empty) {
		aspect-ratio: 4 / 3;
	}
	.guide-case:only-child:not(.has-video):not(.is-no-photo) .guide-case-body {
		flex: 1;
		min-width: 0;
		align-self: center;
		padding: var(--spacing-9);
	}
}

/* 제조 범용 맨 위: 대표 사진 아래 현장 정보 상자(기타-3 나안) — 콘텐츠 파일 hero_facts 가 있을 때만 */
.guide-hero-pair.has-facts {
	align-items: stretch;
}
.guide-hero-side {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.guide-hero-facts {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: var(--spacing-6);
	padding: 28px var(--spacing-8);
	border-radius: var(--radius-4);
	background: var(--blue-050);
}
.guide-hero-facts-title {
	margin: 0 0 var(--spacing-5);
	color: var(--blue-900);
}
.guide-hero-facts-list {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px var(--spacing-5);
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}
.guide-hero-facts-list dt {
	color: var(--text-secondary);
}
.guide-hero-facts-list dd {
	margin: 0;
	color: var(--text-primary);
}
@media (max-width: 767px) {
	.guide-hero-facts {
		flex: none;
		padding: var(--spacing-6);
	}
	.guide-hero-facts-list {
		grid-template-columns: 80px minmax(0, 1fr);
	}
}