/* =====================================================================
   subpage.css — 서브페이지 공용
   layout.css 토큰·유틸리티(.container/.section/.sec-title/.btn)를 재사용한다.

   용도: 골격(스켈레톤) 단계의 서브페이지 6종이 공통으로 쓰는 블록.
     · .sub-hero      — 페이지 상단 타이틀 영역
     · .sub-tab       — 탭 내비게이션 (보조금 등 탭 구조 페이지)
     · .sub-prep      — "준비중" 안내 (내용 미확정 페이지)
     · .sub-figure    — 이미지 + 캡션
     · .sub-table     — 표(가격표 등)
     · .sub-cta       — 하단 전화 유도

   ★ 헤더 오프셋을 여기서 더하지 않는다.
     실제 사이트는 HFE 헤더(.ehf-header)가 문서 흐름에서 자리를 차지하므로
     추가 오프셋을 주면 빈 띠가 생긴다(홈에서 71px 실측한 함정).

   설계 기준(고령 사용자): 본문 19px 기준 / 대비 4.5:1 이상 / 탭 영역 44px 이상
   ===================================================================== */

/* ---------------- 상단 타이틀 ---------------- */
.sub-hero {
	background: var(--color-bg-cream);
	text-align: center;
	padding: 88px 0;
}
.sub-hero .sec-desc {
	margin-left: auto;
	margin-right: auto;
	max-width: 52ch;
}
@media (max-width: 900px) {
	.sub-hero { padding: 56px 0; }
}

/* ---------------- 탭 내비게이션 ---------------- */
.sub-tab {
	border-bottom: 1px solid var(--color-line-2);
	background: var(--color-bg);
}
.sub-tab__list {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.sub-tab__btn {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: 0 28px;
	font-size: 18.5px;
	font-weight: 600;
	color: var(--color-text-sub);
	border-bottom: 3px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.sub-tab__btn:hover { color: var(--color-primary); }
.sub-tab__btn.is-on {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	font-weight: 700;
}
@media (max-width: 560px) {
	.sub-tab__list { gap: 0; }
	.sub-tab__btn { flex: 1 1 auto; justify-content: center; padding: 0 14px; font-size: 17px; }
}

/* 탭 패널 */
.sub-panel[hidden] { display: none; }

/* ---------------- 준비중 안내 ---------------- */
/* 내용이 아직 확정되지 않은 페이지. 링크는 살아 있어야 하므로 404 대신 이 블록을 둔다. */
.sub-prep {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	background: var(--color-bg-card);
	border: 1px solid var(--color-line-2);
	border-radius: 18px;
	padding: 56px 32px;
}
.sub-prep__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px; height: 72px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--color-line-2);
	color: var(--color-primary);
}
.sub-prep__ico svg { width: 34px; height: 34px; }
.sub-prep__title {
	margin-top: 22px;
	font-size: 26px;
	color: var(--color-primary-deep);
}
.sub-prep__desc {
	margin-top: 14px;
	font-size: 18.5px;
	line-height: 1.8;
	color: var(--color-text-sub);
}
.sub-prep__actions {
	margin-top: 30px;
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
@media (max-width: 560px) {
	.sub-prep { padding: 40px 20px; }
	.sub-prep__title { font-size: 22px; }
	.sub-prep__desc { font-size: 17px; }
	.sub-prep__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------- 이미지 + 캡션 ---------------- */
.sub-figure { margin: 0; }
.sub-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid var(--color-line-2);
}
.sub-figure figcaption {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-text-sub);
	text-align: center;
}

.sub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 900px) { .sub-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px) { .sub-grid { grid-template-columns: 1fr; } }

/* ---------------- 표 ---------------- */
/* 가로가 좁을 때는 표 자체가 스크롤되게 한다(페이지 전체가 밀리지 않도록) */
.sub-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-line-2);
	border-radius: 14px;
	background: #fff;
}
.sub-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: 18px;
}
.sub-table th,
.sub-table td {
	padding: 16px 18px;
	text-align: center;
	line-height: 1.7;
	border-bottom: 1px solid var(--color-line-2);
}
.sub-table thead th {
	background: var(--color-primary-deep);
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}
.sub-table tbody tr:last-child th,
.sub-table tbody tr:last-child td { border-bottom: 0; }
.sub-table tbody tr:nth-child(even) { background: var(--color-bg-cream); }
.sub-table th[scope="row"] {
	font-weight: 700;
	color: var(--color-primary-deep);
	background: var(--color-bg-cream-2);
	white-space: nowrap;
}
.sub-table .is-num { font-weight: 700; color: var(--color-primary); }

/* 표 아래 주의문구 */
.sub-note {
	margin-top: 18px;
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--color-text-sub);
}
.sub-note strong { color: var(--color-text); }

/* ---------------- 정의형 목록 (안내 항목) ---------------- */
.sub-dl {
	background: #fff;
	border: 1px solid var(--color-line-2);
	border-radius: 16px;
	overflow: hidden;
}
.sub-dl__row {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 18px;
	padding: 22px 28px;
	font-size: 18.5px;
	line-height: 1.75;
}
.sub-dl__row + .sub-dl__row { border-top: 1px solid var(--color-line-2); }
.sub-dl__row dt { font-weight: 700; color: var(--color-primary-deep); }
.sub-dl__row dd { color: var(--color-text); }
.sub-dl__row a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-primary);
	font-weight: 700;
}
@media (max-width: 560px) {
	.sub-dl__row { grid-template-columns: 1fr; gap: 4px; padding: 18px 20px; }
}

/* ---------------- 단계 안내 (신청 절차 등) ---------------- */
.sub-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	counter-reset: step;
}
@media (max-width: 900px) { .sub-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sub-steps { grid-template-columns: 1fr; } }

.sub-step {
	background: #fff;
	border: 1px solid var(--color-line-2);
	border-radius: 16px;
	padding: 28px 24px;
	text-align: center;
}
.sub-step__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
}
.sub-step__title {
	margin-top: 16px;
	font-size: 20px;
	color: var(--color-primary-deep);
}
.sub-step__desc {
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-text-sub);
}

/* ---------------- 하단 전화 유도 ---------------- */
.sub-cta {
	background: var(--color-primary-deep);
	color: var(--color-text-on-dark);
	text-align: center;
	padding: 64px 0;
}
.sub-cta__title {
	font-size: 32px;
	color: #fff;
	line-height: 1.4;
}
.sub-cta__desc {
	margin-top: 14px;
	font-size: 18.5px;
	line-height: 1.8;
	color: var(--color-text-on-dark-sub);
}
.sub-cta__tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 26px;
	min-height: 60px;
	padding: 16px 40px;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.sub-cta__tel:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
	.sub-cta { padding: 48px 0; }
	.sub-cta__title { font-size: 25px; }
	.sub-cta__tel { font-size: 21px; padding: 15px 30px; }
}