/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/**
 * PC 새 틀(미리 보기) — 수강 후기(/reviews/) · 2026-10-24 운영자 「수강후기 나′ 로 합니다」(고르기 판 claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa 2판 나′ —
 *   「많아 보였으면 · 수치로 강조 · 챌린지별 탭은 부족」)
 * 마크업 = inc/pc-frame-challenge.php 7절(.pcfchr — 옛 머리 .reviews-hero 바로 앞) · 더 보기 · 긴 글 펼치기 · 흐름 멈춤 = js/pcf-challenge-reviews.js
 * 짜임 = 칸 1,260 · 가운데 머리(머리말 15 · 큰 숫자 한 문장 40 · 한 줄 17 · [챌린지 둘러보기]) → 흐르는 후기 두 줄(양 끝 흐려짐) → 「최근 남긴 후기」(옛 칸처럼 줄 맞춘 3열 · 별점).
 * ⚠️ 움직임 = 흐르는 두 줄(늘 흐름 · 위 줄 90초 · 아래 줄 110초 한 바퀴 · 마우스를 올리면 멈춤 · 움직임 줄이기면 멈춘 채) = .claude/rules/css.md 움직임 예외 줄(운영자 10/24 「나′」).
 * ⚠️ 그라디언트 = 흐르는 두 줄 양 끝 흐려짐(mask-image) = .claude/rules/css.md 그라디언트 예외 줄(운영자 10/25 「수강후기 양 끝에 그라데이션으로 처리」).
 * ⚠️ 움직임 둘째 = 「최근 남긴 후기」 칸이 화면에 처음 들어올 때 한 번 아래에서 올라오기(5절 끝 · 멤버십 혜택 SLIDE IN 과 같은 값) = .claude/rules/css.md 움직임 예외 줄(운영자 10/25 「항목들 보일 때마다 밑에서 스르륵 올라오게」).
 * 절: 1 자리(옛 머리 · 칸 숨김) · 2 머리 · 3 흐르는 두 줄 · 4 흐르는 줄 칸 · 5 「최근 남긴 후기」 · 더 보기 · 6 1024 이하
 * 정본 v4 13.5 「수강 후기」 · 「먼저 읽기 — 부담 없이」 ② 예외(누적 숫자) · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만 · !important 없음).
 */

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 머리(.reviews-hero) · 옛 칸(.reviews-section) 숨김 · 칸 1,260 ════ */
	body.pcf-on .pcfchr ~ .reviews-hero,
	body.pcf-on .pcfchr ~ .reviews-section {
		display: none;
	}

	body.pcf-on .pcfchr {
		box-sizing: border-box;
		width: 100%;
		max-width: var(--pcf-w, 1260px);
		margin: 0 auto;
		padding: 32px 0 96px;
	}

	/* ════ 2. 머리 — 가운데 · 큰 숫자 한 문장(숫자는 옛 화면 표시값 그대로) ════ */
	body.pcf-on .pcfchr-hero {
		padding: 24px 0 40px;
		text-align: center;
	}

	body.pcf-on .pcfchr-eb {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.5;
		color: var(--gray-700);
	}

	body.pcf-on .pcfchr-hero h1 {
		margin: 12px 0 0;
		font-size: 40px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -.03em;
		color: var(--gray-900);
	}

	body.pcf-on .pcfchr-num {
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on .pcfchr-sub {
		margin: 14px 0 0;
		font-size: 17px;
		line-height: 1.6;
		color: var(--gray-600);
	}

	body.pcf-on .pcfchr-sub b {
		font-weight: 600;
		color: var(--gray-900);
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on .pcfchr-cta {
		margin-top: 24px;
	}

	/* ════ 3. 흐르는 두 줄 — 같은 칸을 두 번 이어 그려 반만큼 밀면 끝없이 이어진다(-50%) · 위 줄 왼쪽 · 아래 줄 오른쪽 ════
	   양 끝 120 = 흐려짐(10/25 「양 끝에 그라데이션」 — 칸 끝에서 칼로 자른 듯 잘리던 카드가 흐려지며 들고 난다 · 가림판의 투명도만 쓰므로 색 값은 뜻이 없다) */
	body.pcf-on .pcfchr-flow {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin: 0 0 56px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent);
	}

	body.pcf-on .pcfchr-lane {
		overflow: hidden;
	}

	body.pcf-on .pcfchr-track {
		display: flex;
		gap: 14px;
		width: max-content;
		animation: pcfchr-flow 90s linear infinite;
	}

	body.pcf-on .pcfchr-lane.is-rev .pcfchr-track {
		animation-duration: 110s;
		animation-direction: reverse;
	}

	body.pcf-on .pcfchr-flow:hover .pcfchr-track,
	body.pcf-on .pcfchr-flow.is-paused .pcfchr-track {
		animation-play-state: paused;
	}

	/* ════ 4. 흐르는 줄 칸 — 챌린지 소개 「참가자 후기」 칸 값(선 1px · 8 · 16 18 · 얼굴 32 — 사진 없으면 첫 글자) · 340 · 글 세 줄까지 ════ */
	body.pcf-on .pcfchr-card {
		display: grid;
		flex: 0 0 340px;
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 12px;
		box-sizing: border-box;
		width: 340px;
		padding: 16px 18px;
		border: 1px solid var(--gray-200);
		border-radius: 8px;
		background: var(--surface-white);
	}

	body.pcf-on .pcfchr-av {
		position: relative;
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		overflow: hidden;
		border-radius: 50%;
		background: var(--gray-100);
		color: var(--gray-600);
		font-size: 13px;
		font-weight: 600;
	}

	body.pcf-on .pcfchr-av img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on .pcfchr-cb {
		min-width: 0;
	}

	body.pcf-on .pcfchr-m {
		margin: 0;
		font-size: 13px;
		line-height: 19px;
		color: var(--gray-500);
	}

	body.pcf-on .pcfchr-m b {
		font-weight: 500;
		color: var(--gray-900);
	}

	body.pcf-on .pcfchr-m2 {
		margin: 1px 0 0;
		overflow: hidden;
		font-size: 12.5px;
		line-height: 18px;
		color: var(--gray-500);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.pcf-on .pcfchr-m2 span + span::before {
		content: "·";
		margin: 0 5px;
		color: var(--gray-300);
	}

	body.pcf-on .pcfchr-b {
		display: -webkit-box;
		margin: 4px 0 0;
		overflow: hidden;
		font-size: 14px;
		line-height: 22.4px;
		color: var(--gray-800);
		word-break: keep-all;
		overflow-wrap: anywhere;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	/* ════ 5. 「최근 남긴 후기」 — 10/25 「기존처럼 정렬된 목록 · 별점도」: 옛 칸 짜임(얼굴 48 + 이름 · 챌린지 / 별점 / 글 다섯 줄 / 며칠 전) 3열 · 줄마다 높이를 맞춘다 ·
	   다섯 줄 넘는 글 = [더 보기] · 칸을 눌러도 펼침(옛 칸과 같음 — js 2절 .is-long · .is-open) · 값 = 새 틀(모서리 8 · 선 1px · 이름 15/500 · 곁 정보 13 gray-500) ════ */
	body.pcf-on .pcfchr-wh {
		margin: 0 0 16px;
		font-size: 22px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: -.02em;
		color: var(--gray-900);
	}

	body.pcf-on .pcfchr-wall {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	body.pcf-on .pcfchr-w {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-width: 0;
		padding: 24px;
		border: 1px solid var(--gray-200);
		border-radius: 8px;
		background: var(--surface-white);
	}

	body.pcf-on .pcfchr-w.is-long,
	body.pcf-on .pcfchr-w.is-open {
		cursor: pointer;
	}

	body.pcf-on .pcfchr-wt {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	body.pcf-on .pcfchr-w .pcfchr-av {
		flex: 0 0 48px;
		width: 48px;
		height: 48px;
		font-size: 17px;
	}

	body.pcf-on .pcfchr-wn {
		margin: 0;
		overflow: hidden;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.4;
		color: var(--gray-900);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.pcf-on .pcfchr-wn b {
		font-weight: inherit;
	}

	body.pcf-on .pcfchr-wn a {
		color: inherit;
		text-decoration: none;
	}

	body.pcf-on .pcfchr-wn a:hover {
		text-decoration: underline;
	}

	body.pcf-on .pcfchr-wc {
		margin: 2px 0 0;
		overflow: hidden;
		font-size: 13px;
		line-height: 1.5;
		color: var(--gray-500);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 별점 = 저장된 값만(채운 별 --rating-star · 나머지 gray-200) — 받은 적 없는 후기는 줄째 없다 */
	body.pcf-on .pcfchr-st {
		display: flex;
		gap: 2px;
		margin: 16px 0 0;
		color: var(--gray-200);
	}

	body.pcf-on .pcfchr-st svg {
		flex: 0 0 16px;
	}

	body.pcf-on .pcfchr-st .is-on {
		color: var(--rating-star);
	}

	body.pcf-on .pcfchr-wb {
		display: -webkit-box;
		margin: 12px 0 0;
		overflow: hidden;
		font-size: 14px;
		line-height: 22.4px;
		color: var(--gray-700);
		word-break: keep-all;
		overflow-wrap: anywhere;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
	}

	body.pcf-on .pcfchr-wt + .pcfchr-wb {
		margin-top: 16px;
	}

	body.pcf-on .pcfchr-w.is-open .pcfchr-wb {
		display: block;
		-webkit-line-clamp: unset;
	}

	body.pcf-on .pcfchr-wf {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 12px;
	}

	body.pcf-on .pcfchr-wa {
		font-size: 13px;
		line-height: 1.5;
		color: var(--gray-500);
	}

	body.pcf-on .pcfchr-tog {
		display: none;
		margin: 0 0 0 auto;
		padding: 0;
		border: 0;
		border-radius: 2px;
		background: none;
		color: var(--gray-500);
		font: inherit;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.5;
		cursor: pointer;
	}

	body.pcf-on .pcfchr-w.is-long .pcfchr-tog,
	body.pcf-on .pcfchr-w.is-open .pcfchr-tog {
		display: block;
	}

	body.pcf-on .pcfchr-tog:hover {
		color: var(--gray-900);
	}

	body.pcf-on .pcfchr-tog:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	/* 아래에서 올라오기 — 10/25 2차 「항목들 보일 때마다 밑에서 스르륵 올라오게」: 칸이 화면에 처음 들어올 때 한 번, 28px 아래에서 올라오며 나타난다
	   (0.7초 · 함께 들어온 칸은 0.09초씩 차례로 — 멤버십 혜택 SLIDE IN · PPT 깔맞춤과 같은 값 · js 3절 · 되풀이 없음 · 「더 보기」로 붙은 칸도).
	   숨김은 .is-sl 안에서만 — 구획 첫 줄 스크립트가 그리기 전에 붙인다(움직임 줄이기 · IntersectionObserver 없음이면 안 붙어 처음부터 다 보인다).
	   js 가 안 돌면(.is-ready 없음) 3초 뒤 저절로 보인다. */
	body.pcf-on .pcfchr-wallsec.is-sl .pcfchr-w {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	}

	body.pcf-on .pcfchr-wallsec.is-sl:not(.is-ready) .pcfchr-w {
		animation: pcfchr-sl-safe 0s 3s forwards;
	}

	body.pcf-on .pcfchr-wallsec.is-sl .pcfchr-w.is-in {
		opacity: 1;
		transform: none;
	}

	@keyframes pcfchr-sl-safe {
		to {
			opacity: 1;
			transform: none;
		}
	}

	body.pcf-on .pcfchr-more {
		margin-top: 24px;
		text-align: center;
	}

	body.pcf-on .pcfchr-morebtn[aria-busy="true"] {
		cursor: progress;
		opacity: .6;
	}

	body.pcf-on .pcfchr-end {
		margin: 0;
		font-size: 14px;
		color: var(--gray-500);
	}

	body.pcf-on .pcfchr-end[hidden] {
		display: none;
	}

	@keyframes pcfchr-flow {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-50%);
		}
	}
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	body.pcf-on .pcfchr-track {
		animation: none;
	}

	/* 보는 중에 설정을 바꿔도 */
	body.pcf-on .pcfchr-wallsec.is-sl .pcfchr-w {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

/* ════ 6. 1024 이하 — 새 틀 칸은 늘 숨긴다(폰 · 태블릿 = 옛 화면) ════ */
@media (max-width: 1024px) {
	body.pcf-on .pcfchr {
		display: none;
	}
}