/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/**
 * PC 새 틀(미리 보기) — 챌린지 홈(/challenges/) = 시안 「나″」 · 2026-10-21 · 마크업 inc/pc-frame-challenge.php · 단계 줄 주소(#step=N) js/pcf-challenge.js
 * 운영자 「나가 좋습니다. 다만 … 돈을 내고 배우는 유료 강의 페이지 느낌」 → 2차 「나″」(시안 claude.ai 아티팩트 45iMyBmZhSospPAqJKfsGv — 값은 시안 C:\tmp\pc-frame\hd2\feel\ch-b.css + ch-c.css + ch-d.css 그대로)
 *   + 정본 v4 「먼저 읽기 — 부담 없이」(무료는 외치지 않고 돈이 드는 것만 · 판매 장치 대신 사람 · 학원 말 대신 생활 말).
 * 값은 새 틀에 이미 있는 부품: 배너 = 메인 홈 배너(모서리 20 · 머리말 15 · 제목 40 · 한 줄 17 — .claude/rules/css.md 배너 20 예외 줄 · 10/27 바탕 = 옛 허브 띠 영상 + 「100% 무료」 꼬리표 — 2절) ·
 *   단계 줄 = 옛 허브 러닝 패스 짜임(2026-10-27 운영자 「챌린지 구분은 기존 챌린지 처럼」 — 5절 · 그 전 단계 밑줄 탭) · 카드 = 메인 홈 카드(그림 16:9 8 · 제목 15/600 · 곁 13) · 한마디 칸 = 판 카드(흰 면 + 그림자 · 테두리 없음).
 * 정본 v4 13.4 「챌린지 홈」 · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만).
 */

/* 폰·태블릿(~1024) — 옛 허브 그대로(같은 HTML 에 둘 다 그린다) */
@media (max-width: 1024px) {
	body.pcf-on .pcfch {
		display: none;
	}
}

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 허브 구획은 PC 폭에서 숨긴다(새 화면이 있는 요청만 — body.pcfch-on) ════ */
	body.pcf-on.pcfch-on #page .chv2--hub > section {
		display: none;
	}

	body.pcf-on #page .pcfch {
		width: var(--pcf-w);
		margin: 0 auto;
		padding-bottom: 72px;
		color: var(--gray-900);
		font-size: 14px;
		line-height: 1.5;
	}

	/* 링크·단추 초기화 — 부모 테마 a:hover 파랑 · button 회색 채움이 새지 않게(메인 홈과 같은 막음) */
	body.pcf-on #page :where(.pcfch) a,
	body.pcf-on #page :where(.pcfch) a:hover,
	body.pcf-on #page :where(.pcfch) a:focus,
	body.pcf-on #page :where(.pcfch) a:active {
		color: inherit;
		text-decoration: none;
	}

	body.pcf-on #page :where(.pcfch) button,
	body.pcf-on #page :where(.pcfch) button:hover,
	body.pcf-on #page :where(.pcfch) button:focus {
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		line-height: inherit;
		text-transform: none;
		cursor: pointer;
	}

	body.pcf-on #page .pcfch :where(p, h1, h2, ol, li) {
		margin: 0;
		padding: 0;
	}

	body.pcf-on #page .pcfch ol {
		list-style: none;
	}

	/* ════ 2. 칸 안 배너 — 왼쪽 글 · 오른쪽 최근 완주한 분들의 한마디(그림 자리) ════ */
	body.pcf-on #page .pcfch .pcfch-hero {
		margin-top: 20px;
	}

	body.pcf-on #page .pcfch .pcfch-hero-in {
		position: relative;
		display: grid;
		grid-template-columns: minmax(300px, 1fr) minmax(360px, 480px);
		align-items: center;
		gap: 40px;
		min-height: 360px;
		padding: 28px 56px 28px 64px;
		border-radius: 20px;
		background: var(--gray-50);
		box-sizing: border-box;
	}

	/* 후기가 없을 때 — 메인 홈 첫 배너와 같은 그림을 깐다 */
	body.pcf-on #page .pcfch .pcfch-hero-in--img {
		grid-template-columns: minmax(0, 560px);
		overflow: hidden;
		background: var(--gray-100);
	}

	body.pcf-on #page .pcfch .pcfch-hero-img {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 70% 48%;
	}

	/* 배너 영상 — 2026-10-27 운영자 「회색 배경 대신 영상 재생(이전에 쓰던 영상 활용) 넣고, 100% 무료 강조하면 좋겠습니다」 → 고르기 판 25판 「가」(칸 안 영상 + 머리말 옆 꼬리표)
	   영상 = 옛 허브 띠 assets/challenge-hub/hero.mp4(10초 · 소리 없이 되풀이 · js/pcf-challenge.js 2절) · 덮개 = 옛 띠와 같은 한 색 rgba(13,17,15,.58)(그라디언트 아님) ·
	   글자 = 흰색(옛 띠 값) · 이 배너가 페이지의 강조 구역 한 곳 · 움직임 = .claude/rules/css.md 「움직임」 예외 줄 · 정본 v4 13.4 「챌린지 홈」 1 */
	body.pcf-on #page .pcfch .pcfch-hero-in--v {
		overflow: hidden;
		background: var(--gray-900);
	}

	body.pcf-on #page .pcfch .pcfch-hero-v,
	body.pcf-on #page .pcfch .pcfch-hero-dim {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
	}

	body.pcf-on #page .pcfch .pcfch-hero-v {
		object-fit: cover;
	}

	body.pcf-on #page .pcfch .pcfch-hero-dim {
		background: rgba(13, 17, 15, 0.58);
	}

	body.pcf-on #page .pcfch .pcfch-hero-in--v .pcfch-eb {
		color: rgba(255, 255, 255, 0.86);
	}

	body.pcf-on #page .pcfch .pcfch-hero-in--v .pcfch-t {
		color: var(--surface-white);
	}

	body.pcf-on #page .pcfch .pcfch-hero-in--v :is(.pcfch-s, .pcfch-ppl) {
		color: rgba(255, 255, 255, 0.84);
	}

	body.pcf-on #page .pcfch .pcfch-hero-in--v .pcfch-ppl b {
		color: var(--surface-white);
	}

	body.pcf-on #page .pcfch .pcfch-hero-in--v :is(.pcfch-feed-hd, .pcfch-feed-hd a) {
		color: rgba(255, 255, 255, 0.76);
	}

	body.pcf-on #page .pcfch .pcfch-hero-in--v .pcfch-feed-hd a:hover {
		color: var(--surface-white);
	}

	/* 「100% 무료」 꼬리표 — 머리말 옆(옛 허브 띠 .chv2-hh-free 자리) · 선물 아이콘 + 글자
	   2026-10-27 운영자 「100% 무료 뱃지를 배경색 다른 색상으로. 그리고 100% 무료 앞에 아이콘 하나 넣어봅시다」(25판의 밝은 초록 면을 바꿈) → 흰 면 →
	   고르기 판 26판 「100% 무료 : 나 앰버, 아이콘 선물」(claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa — 나 앰버 · 다 노랑 중) = 옛 허브 띠 꼬리표 색 그대로(앰버 500 + 흰 글자 · 대비 3.1:1 을 보이고 고름)
	   높이 24 · 모서리 6 · 13/700(25판 사진 그대로) · 정본 v4 「부담 없이」 ① 예외 · css.md 「어두운 바탕 위 밝은 초록」 예외 줄(앰버 = 상태색 예외도 같은 줄) */
	body.pcf-on #page .pcfch .pcfch-free {
		display: inline-flex;
		gap: 4px;
		align-items: center;
		height: 24px;
		margin-left: 10px;
		padding: 0 8px;
		border-radius: 6px;
		background: var(--amber-500);
		color: var(--surface-white);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0;
		vertical-align: 1px;
		box-sizing: border-box;
	}

	body.pcf-on #page .pcfch .pcfch-free svg {
		flex: none;
	}

	body.pcf-on #page .pcfch .pcfch-tx {
		position: relative;
		min-width: 0;
	}

	body.pcf-on #page .pcfch .pcfch-eb {
		margin-bottom: 12px;
		color: var(--primary);
		font-size: 15px;
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	body.pcf-on #page .pcfch .pcfch-t {
		color: var(--gray-900);
		font-size: 40px;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: -0.045em;
	}

	body.pcf-on #page .pcfch .pcfch-s {
		margin-top: 14px;
		color: var(--gray-700);
		font-size: 17px;
		font-weight: 500;
	}

	body.pcf-on #page .pcfch .pcfch-cta {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-top: 24px;
	}

	body.pcf-on #page .pcfch a.pcfch-btn {
		display: inline-flex;
		align-items: center;
		height: 44px;
		padding: 0 22px;
		border-radius: 6px;
		background: var(--brand-action);
		color: var(--surface-white);
		font-size: 15px;
		font-weight: 600;
	}

	body.pcf-on #page .pcfch a.pcfch-btn:hover {
		background: var(--brand-hover);
		color: var(--surface-white);
	}

	/* 지금 같이 하는 사람 — 얼굴(최근 참여자) + 인원 */
	body.pcf-on #page .pcfch .pcfch-ppl {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 22px;
		color: var(--gray-700);
		font-size: 14px;
	}

	/* 1,025 폭에서도 한 줄 — 넘치는 몇 px 은 오른쪽 한마디 칸과의 사이(40)에 든다 */
	body.pcf-on #page .pcfch .pcfch-ppl > span:last-child {
		white-space: nowrap;
	}

	body.pcf-on #page .pcfch .pcfch-ppl b {
		color: var(--gray-900);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on #page .pcfch .pcfch-stack {
		display: inline-flex;
	}

	/* 얼굴 = 아바타(완전 원형 허용 자리) · 이름 첫 글자를 깔고 사진이 있으면 덮는다(사진이 안 오면 img 가 스스로 빠진다) */
	body.pcf-on #page .pcfch .pcfch-av {
		position: relative;
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		overflow: hidden;
		border-radius: 50%;
		background: var(--gray-200);
		color: var(--gray-600);
		font-size: 12px;
		font-weight: 600;
		line-height: 1;
	}

	body.pcf-on #page .pcfch .pcfch-av img {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on #page .pcfch .pcfch-av--md {
		width: 32px;
		height: 32px;
	}

	body.pcf-on #page .pcfch .pcfch-stack .pcfch-av {
		margin-left: -8px;
		border: 2px solid var(--gray-50);
		box-sizing: content-box;
	}

	body.pcf-on #page .pcfch .pcfch-stack .pcfch-av:first-child {
		margin-left: 0;
	}

	/* 최근 완주한 분들의 한마디 — 판 카드 셋(흰 면 + 그림자 · 테두리 없음) */
	body.pcf-on #page .pcfch .pcfch-feed {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-width: 0;
	}

	body.pcf-on #page .pcfch .pcfch-feed-hd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 2px 2px;
		color: var(--gray-500);
		font-size: 13px;
		font-weight: 500;
	}

	body.pcf-on #page .pcfch .pcfch-feed-hd a {
		color: var(--gray-500);
		font-weight: 500;
	}

	body.pcf-on #page .pcfch .pcfch-feed-hd a:hover {
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfch .pcfch-fd {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 14px 16px;
		border-radius: 8px;
		background: var(--surface-white);
		box-shadow: var(--shadow-sm);
	}

	body.pcf-on #page .pcfch .pcfch-fd-b {
		min-width: 0;
	}

	body.pcf-on #page .pcfch .pcfch-fd-m {
		display: flex;
		align-items: baseline;
		gap: 6px;
		min-width: 0;
		font-size: 13px;
	}

	body.pcf-on #page .pcfch .pcfch-fd-m b {
		flex: none;
		color: var(--gray-900);
		font-weight: 500;
	}

	body.pcf-on #page .pcfch .pcfch-fd-m span {
		overflow: hidden;
		color: var(--gray-500);
		font-size: 12px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body.pcf-on #page .pcfch .pcfch-fd-t {
		display: -webkit-box;
		margin-top: 3px;
		overflow: hidden;
		color: var(--gray-800);
		font-size: 14px;
		line-height: 1.5;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* 한마디 줄 흐름 — 2026-10-27 운영자 「후기 카드가 하나씩 쏙! 쏙! 올라가면서 위로 올라가게 합니다. 생동감있게」(사진에 한마디 칸을 화살표로 짚어 직접 요청)
	   셋씩 보이고 3초마다 맨 위 카드가 흐려지며 목록이 한 칸 올라가고(0.55초) 아래에서 다음 카드가 튀어 오른다(0.6초 · 살짝 넘쳤다 돌아오는 곡선) — js/pcf-challenge.js 3절 ·
	   마우스를 올리거나 포커스가 안에 있거나 화면 밖 · 다른 탭이면 멈춘다 · js 가 안 돌거나 움직임 줄이기면 처음 셋 그대로 · .claude/rules/css.md 「움직임」 예외 줄 */
	body.pcf-on #page .pcfch .pcfch-feed-ls {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	body.pcf-on #page .pcfch .pcfch-feed-ls > .pcfch-fd:nth-child(n + 4) {
		display: none;
	}

	/* 흐름 켜짐(.is-tick) — 칸 높이 = 카드 셋(카드 높이는 가장 큰 카드에 맞춘 --pcfch-fd-h — 한 줄 후기도 같은 높이라 칸이 흔들리지 않는다) + 사이 둘 + 아래 그림자 4
	   위아래만 자르고 양옆은 그림자 자리를 남긴다 */
	body.pcf-on #page .pcfch .pcfch-feed.is-tick .pcfch-feed-vp {
		height: calc(var(--pcfch-fd-h) * 3 + 24px);
		clip-path: inset(0 -16px);
	}

	body.pcf-on #page .pcfch .pcfch-feed.is-tick .pcfch-feed-ls > .pcfch-fd {
		display: flex;
		height: var(--pcfch-fd-h);
		box-sizing: border-box;
		transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	/* 나가는 카드(맨 위) · 들어올 차례를 기다리는 카드(넷째부터 — 칸 밖이라 보이지 않는다) */
	body.pcf-on #page .pcfch .pcfch-feed.is-tick .pcfch-fd.is-out {
		opacity: 0;
		transform: scale(0.96);
	}

	body.pcf-on #page .pcfch .pcfch-feed.is-tick .pcfch-fd.is-wait {
		opacity: 0;
		transform: translateY(18px) scale(0.92);
	}

	/* ════ 3. 라이브 특별 기수 한 줄 — 메인 챌린지가 신청을 받을 때만 ════ */
	body.pcf-on #page .pcfch .pcfch-live {
		display: grid;
		grid-template-columns: 160px minmax(0, 1fr) auto;
		align-items: center;
		gap: 20px;
		margin-top: 24px;
		padding: 14px 20px 14px 14px;
		border-radius: 8px;
		background: var(--gray-50);
	}

	body.pcf-on #page .pcfch .pcfch-live:hover {
		background: var(--gray-100);
	}

	body.pcf-on #page .pcfch .pcfch-live-th {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on #page .pcfch .pcfch-live-th img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on #page .pcfch .pcfch-live-b {
		display: block;
		min-width: 0;
	}

	body.pcf-on #page .pcfch .pcfch-live-e {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--gray-700);
		font-size: 13px;
		font-weight: 500;
	}

	body.pcf-on #page .pcfch .pcfch-live-e i {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--brand-action);
	}

	body.pcf-on #page .pcfch .pcfch-live-t {
		display: block;
		margin-top: 2px;
		overflow: hidden;
		color: var(--gray-900);
		font-size: 16px;
		font-weight: 600;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body.pcf-on #page .pcfch .pcfch-live-m {
		display: block;
		margin-top: 2px;
		color: var(--gray-500);
		font-size: 13px;
	}

	body.pcf-on #page .pcfch .pcfch-live-go {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		color: var(--gray-700);
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
	}

	/* ════ 4. 구획 머리 ════ */
	body.pcf-on #page .pcfch .pcfch-sec {
		padding-top: 64px;
	}

	/* 배너 단추가 내려오는 자리 — 붙는 메뉴 줄에 가리지 않게 */
	body.pcf-on #page .pcfch .pcfch-list {
		padding-top: 48px;
		scroll-margin-top: calc(var(--nav-height, 56px) + 8px);
	}

	body.pcf-on #page .pcfch .pcfch-hd {
		display: flex;
		align-items: flex-end;
		gap: 12px;
	}

	body.pcf-on #page .pcfch .pcfch-hd-l {
		margin-right: auto;
	}

	body.pcf-on #page .pcfch .pcfch-t2 {
		color: var(--gray-900);
		font-size: 22px;
		font-weight: 600;
		line-height: 33px;
		letter-spacing: -0.02em;
	}

	body.pcf-on #page .pcfch .pcfch-sub {
		margin-top: 2px;
		color: var(--gray-500);
		font-size: 14px;
		line-height: 21px;
	}

	/* 진행 한 줄 — 초록 점 = 진행 점(4.5) */
	body.pcf-on #page .pcfch .pcfch-cohort {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding-bottom: 2px;
		color: var(--gray-700);
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
	}

	body.pcf-on #page .pcfch .pcfch-cohort i {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--brand-action);
	}

	/* 진행 중 점의 반짝임 — 2026-10-27 운영자 「챌린지 진행중 DOT 뒤에 플레어 반짝 효과 넣어주세요」(사진에 점을 화살표로 짚어 직접 요청)
	   2초마다 점 뒤로 같은 초록 빛이 3배까지 퍼지며 흐려지고(::before) 점이 잠깐 빛난다(그림자 빛) · 늘 되풀이 ·
	   다음 달 기수(「11월 챌린지 · 11월 1일 시작」)엔 없다(.is-live 없음) · 움직임 줄이기면 점만 · .claude/rules/css.md 「움직임」 예외 줄 */
	body.pcf-on #page .pcfch .pcfch-cohort.is-live i {
		position: relative;
		animation: pcfch-glint 2s ease-out infinite;
	}

	body.pcf-on #page .pcfch .pcfch-cohort.is-live i::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: var(--brand-action);
		animation: pcfch-flare 2s cubic-bezier(0, 0, 0.2, 1) infinite;
	}

	@keyframes pcfch-flare {
		0% {
			opacity: 0.6;
			transform: scale(1);
		}

		75%,
		100% {
			opacity: 0;
			transform: scale(3);
		}
	}

	@keyframes pcfch-glint {
		0%,
		100% {
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-action) 0%, transparent);
		}

		15% {
			box-shadow: 0 0 8px 2px color-mix(in srgb, var(--brand-action) 55%, transparent);
		}

		50% {
			box-shadow: 0 0 2px 0 color-mix(in srgb, var(--brand-action) 15%, transparent);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		body.pcf-on #page .pcfch .pcfch-cohort.is-live i,
		body.pcf-on #page .pcfch .pcfch-cohort.is-live i::before {
			animation: none;
		}

		body.pcf-on #page .pcfch .pcfch-cohort.is-live i::before {
			opacity: 0;
		}
	}

	body.pcf-on #page .pcfch .pcfch-cohort em {
		color: var(--gray-400);
		font-style: normal;
		font-weight: 400;
	}

	/* ════ 5. 단계 줄(STEP 1 · 2 · 3) — 2026-10-27 운영자 「챌린지 구분은 기존 챌린지 처럼 구분하면 좋겠습니다. 그래야 입문자도 뭘 들어야 할 지 구분하기 쉬울 것 같아요」
	   사진 = 옛 허브 러닝 패스(css/challenge-hub.css .chv2-lp-track — 왼쪽 250 · 사이 40) · 단계 밑줄 탭(10/21)은 걷었다 ·
	   줄 사이 가는 선 · 왼쪽 = STEP(12 초록 · 자간 — 두드림 안내 칸 머리말 .pcfh-promo-e 와 같은 값) · 단계 이름 20/600 · 한 줄 14 회색 / 오른쪽 = 카드 4열(1,280 아래 3열 — 파일 끝) ════ */
	body.pcf-on #page .pcfch .pcfch-steps {
		margin-top: 8px;
	}

	body.pcf-on #page .pcfch .pcfch-step {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
		padding: 28px 0;
		scroll-margin-top: calc(var(--nav-height, 56px) + 8px);
	}

	body.pcf-on #page .pcfch .pcfch-step + .pcfch-step {
		border-top: 1px solid var(--gray-200);
	}

	body.pcf-on #page .pcfch .pcfch-step:last-child {
		padding-bottom: 0;
	}

	body.pcf-on #page .pcfch .pcfch-step-l {
		min-width: 0;
		padding-top: 4px;
	}

	body.pcf-on #page .pcfch .pcfch-step-no {
		color: var(--primary);
		font-size: 12px;
		font-weight: 600;
		line-height: 18px;
		letter-spacing: 0.14em;
	}

	body.pcf-on #page .pcfch .pcfch-step-t {
		margin: 6px 0 0;
		color: var(--gray-900);
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		letter-spacing: -0.02em;
	}

	body.pcf-on #page .pcfch .pcfch-step-d {
		margin-top: 8px;
		color: var(--gray-500);
		font-size: 14px;
		line-height: 22px;
		word-break: keep-all;
	}

	/* ════ 6. 단계 카드 — 메인 홈 카드 값(그림 16:9 8 · 제목 15/600 두 줄 · 곁 13) · 사이 32 16(그 전 5열 격자와 같은 값) ════ */
	body.pcf-on #page .pcfch .pcfch-step-g {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px 16px;
	}

	body.pcf-on #page .pcfch .pcfch-card {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	body.pcf-on #page .pcfch .pcfch-th {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on #page .pcfch .pcfch-th img {
		display: block;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on #page .pcfch .pcfch-ct {
		display: -webkit-box;
		margin-top: 10px;
		overflow: hidden;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 500;
		line-height: 21px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	body.pcf-on #page .pcfch .pcfch-by {
		margin-top: 4px;
		color: var(--gray-500);
		font-size: 13px;
	}

	body.pcf-on #page .pcfch .pcfch-st {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		margin-top: 2px;
		color: var(--gray-500);
		font-size: 13px;
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on #page .pcfch .pcfch-st svg {
		flex: none;
	}

	/* ════ 7. 이렇게 진행돼요 — 작은 그림 + 글 셋 ════ */
	body.pcf-on #page .pcfch .pcfch-how {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		margin-top: 20px;
	}

	body.pcf-on #page .pcfch .pcfch-how-it {
		display: flex;
		align-items: flex-start;
		gap: 16px;
	}

	body.pcf-on #page .pcfch .pcfch-how-it img,
	body.pcf-on #page .pcfch .pcfch-how-ph {
		flex: none;
		width: 132px;
		aspect-ratio: 3 / 2;
		border-radius: 8px;
		background: var(--gray-50);
		object-fit: cover;
	}

	body.pcf-on #page .pcfch .pcfch-how-no {
		color: var(--gray-500);
		font-size: 12px;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on #page .pcfch .pcfch-how-t {
		margin-top: 2px;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 500;
	}

	body.pcf-on #page .pcfch .pcfch-how-d {
		margin-top: 4px;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 1.55;
	}

	/* ════ 8. 맨 아래 한 줄 — 자주 묻는 질문 구획 대신 ════ */
	body.pcf-on #page .pcfch .pcfch-end {
		margin-top: 64px;
		padding-top: 24px;
		border-top: 1px solid var(--gray-200);
		color: var(--gray-500);
		font-size: 14px;
	}

	body.pcf-on #page .pcfch .pcfch-end a {
		color: var(--gray-900);
		font-weight: 500;
	}

	body.pcf-on #page .pcfch .pcfch-end a:hover {
		color: var(--gray-700);
	}
}

@media (min-width: 1025px) {
	/* ════ 9. 홈 아래 옛 구획 셋 — 특별해요 · 완주자들의 이야기 · 자주 묻는 질문(2026-10-24 운영자 「챌린지 새 틀 밑에도 아래 항목 넣어주세요. 특별해요, 완주자 후기, 자주묻는질문」)
	   옛 허브(page-challenge-list-v2.php)의 마크업 · 스크립트(특별해요 펼침 칸 자동 넘김 · 후기 「더 보기」 · 자주 묻는 질문 펼침 — js/challenge-v2-common.js)를 그대로 다시 보이고 새 틀 값만 입힌다 —
	   칸 폭 1,260(로고 선) · 흰 바탕(옛 회색 띠 걷음) · 영어 머리말 걷음(진행 · 소개 화면과 같은 규칙) · 구획 제목 26 왼쪽 · 구획 사이 72 ·
	   특별해요 접힌 칸 = 회색 50 면(흰 바탕 위라 그림자 대신) · 후기 카드는 옛 판 카드 그대로 · 자주 묻는 질문은 칸 폭 그대로 줄 사이 선.
	   10/21 「부담 없이」 때 걷었던 구획이다(정본 v4 13.4 「챌린지 홈」 줄) — 그 위 8절 한 줄(「자주 묻는 질문 구획 대신」)은 숨긴다 ════ */
	body.pcf-on.pcfch-on #page .chv2--hub > section.chv2-hub-why,
	body.pcf-on.pcfch-on #page .chv2--hub > section.chv2-section:has(.chv2-reviews-top),
	body.pcf-on.pcfch-on #page .chv2--hub > section.chv2-section:has(.chv2-faq) {
		display: block;
		width: var(--pcf-w);
		margin: 0 auto;
		padding: 0 0 72px;
		background: none;
	}

	body.pcf-on.pcfch-on #page .pcfch .pcfch-end {
		display: none;
	}

	body.pcf-on.pcfch-on #page .chv2--hub > section .chv2-wrap {
		max-width: none;
		padding: 0;
	}

	body.pcf-on.pcfch-on #page .chv2--hub > section .chv2-eyebrow {
		display: none;
	}

	body.pcf-on.pcfch-on #page .chv2--hub > section .chv2-h2 {
		margin: 0;
		color: var(--gray-900);
		font-size: 26px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.03em;
		text-align: left;
	}

	body.pcf-on.pcfch-on #page .chv2--hub > section .chv2-section-head {
		margin: 0 0 16px;
		text-align: left;
	}

	/* 특별해요 — 펼침 칸 줄(높이 360 그대로) · 접힌 칸 = 회색 50 면 */
	body.pcf-on.pcfch-on #page .chv2-hub-why .chv2-why-panels {
		margin-top: 20px;
	}

	body.pcf-on.pcfch-on #page .chv2-hub-why .chv2-why-panel:not(.is-active) {
		background: var(--gray-50);
		box-shadow: none;
	}

	/* 완주자들의 이야기 — 머리 줄 아래 20 · 평점은 오른쪽 그대로 */
	body.pcf-on.pcfch-on #page .chv2--hub .chv2-reviews-top {
		margin: 0 0 20px;
	}

	/* 자주 묻는 질문 — 칸 폭 그대로(옛 768 가운데 → 1,260) */
	body.pcf-on.pcfch-on #page .chv2--hub .chv2-wrap--narrow,
	body.pcf-on.pcfch-on #page .chv2--hub .chv2-faq {
		max-width: none;
		margin: 0;
	}
}

/* 좁은 PC 폭(1,025~1,279) — 챌린지 홈 단계 줄 왼쪽 220 · 사이 32 · 카드 3열(5절 · 1,025 에서 카드 폭 220 남짓) */
@media (min-width: 1025px) and (max-width: 1279px) {
	body.pcf-on #page .pcfch .pcfch-step {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 32px;
	}

	body.pcf-on #page .pcfch .pcfch-step-g {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}