/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/**
 * PC 새 틀(미리 보기) — 챌린지 소개(/challenges/{slug}/lobby/ 7편) · 2026-10-24 운영자 「"가"로 합니다」 · 마크업 inc/pc-frame-challenge.php 4절 · 누르기 js/pcf-challenge-intro.js
 *   (시안 claude.ai 아티팩트 HEU958oeEpkXt8USF1d84U — 값은 시안 C:\tmp\pc-frame\hd2\feel\chi.css 그대로 · 본문 차례와 카드 말은 운영자가 고친 대로)
 * 부품 = 새 틀 클래스 소개 그대로(css/live-classes.css .aih .mlC-* · css/pcf-class-detail.css .pcfcd-* — 폭 1,260 · 본문 872 · 사이 48 · 카드 340 · 폰 · 태블릿에선 새 화면이 숨는다).
 * 이 파일 = ① 옛 소개(.chv2--intro)를 PC 폭에서 숨기기 ② 챌린지에만 있는 칸(사람 줄 · 알림 단추 · 카드 「제공해요」 줄) ③ 본문 = 옛 소개 구획 그대로(4절 — 2026-10-26).
 * ⚠️ 띠 왼쪽 그라데이션(.mlC-band::before)은 클래스 소개 띠의 예외 자리를 같이 쓴다 — .claude/rules/css.md 그라데이션 예외 줄(10/24 챌린지 소개를 더함).
 * 정본 v4 13.5 「챌린지 소개」 · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만).
 */

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 소개는 PC 폭에서 숨긴다(새 화면이 있는 요청만 — body.pcfchi-on) ════ */
	body.pcf-on.pcfchi-on .chv2--intro {
		display: none;
	}

	body.pcf-on .pcfchi {
		margin: 0;
	}

	/* 본문 첫 구획 = 카드 윗선과 같은 높이(클래스 소개의 「배우는 것」 상자 자리 32) */
	body.pcf-on .pcfchi .mlC-body > :first-child {
		margin-top: 32px;
	}

	/* ════ 2. 띠 — 소개 영상(소리 없이 되풀이 · 첫 화면 = 2초 장면 그림 — 2026-10-26 운영자 「여기 영상 재생되게 · 틀은 그대로」 · 클래스 소개 띠 그림과 같은 자리 · 같은 모양) · 사람 줄 · 끝난 기수 한 줄 ════ */
	body.pcf-on .pcfchi .mlC video.mlC-bandbg {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(100% - var(--bx) - 221px);
		height: 100%;
		object-fit: cover;
		object-position: 100% 50%;
	}

	body.pcf-on .pcfchi .pcfchi-ppl {
		margin-top: 18px;
	}

	body.pcf-on .pcfchi .pcfchi-st {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		margin-top: 18px;
		color: color-mix(in srgb, var(--surface-white) 82%, transparent);
		font-size: 14px;
	}

	/* ════ 3. 카드 — 단추(링크 · 알림 단추 · 누를 수 없는 칸) · 내 학습 기록 ════ */
	body.pcf-on .pcfchi .mlC .mlC-cart svg {
		margin-right: 6px;
	}

	body.pcf-on .pcfchi .mlC button.mlC-cart {
		cursor: pointer;
	}

	/* 알림 신청 완료 = 「확인됨」(성공 표시 — 회색 「누를 수 없음」이 아니다 · 옛 소개 is-done 과 같은 뜻) */
	body.pcf-on .pcfchi .mlC button.mlC-cart:disabled,
	body.pcf-on .pcfchi .mlC button.mlC-cart:disabled:hover {
		background: var(--color-success-bg);
		color: var(--color-success-text);
		cursor: default;
	}

	body.pcf-on .pcfchi .mlC span.mlC-cart.is-off {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		margin-top: 18px;
		border-radius: 6px;
		background: var(--gray-100);
		color: var(--gray-500);
		font-size: 16px;
		font-weight: 600;
	}

	body.pcf-on .pcfchi .pcfchi-rec {
		margin-top: 8px;
		text-align: center;
		font-size: 13px;
	}

	body.pcf-on .pcfchi .mlC .pcfchi-rec a {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		color: var(--gray-700);
		font-weight: 500;
	}

	/* 「이 챌린지는 이런 걸 제공해요」 줄 아이콘 = 회색 칸(30 · 모서리 8) 안 선 아이콘(Lucide 16 · 선 1.75) — 10/24 운영자 아이콘 시안 「나」
	   (가 선 그대로 · 다 초록 두 톤 · 라 입체 그림 가운데서 고름 · 색 면이 아닌 회색 100 칸이라 정본 안) */
	body.pcf-on .pcfchi .mlC-inc.pcfchi-inc {
		gap: 10px;
	}

	body.pcf-on .pcfchi .pcfchi-inc li {
		grid-template-columns: 30px minmax(0, 1fr);
	}

	body.pcf-on .pcfchi .pcfchi-inc li > svg {
		box-sizing: content-box;
		width: 16px;
		height: 16px;
		padding: 7px;
		border-radius: 8px;
		background: var(--gray-100);
		color: var(--gray-700);
		stroke-width: 1.75;
	}

	/* ════ 4. 본문 = 옛 소개 구획 그대로 — 2026-10-26 운영자 「모두에게 켜기 전에, 챌린지 소개 페이지 수정합니다. 지금 스타일을 거의 그대로 비슷하게 따라가면 좋겠어요」(옛 소개 사진 일곱 장)
	   부품 = 옛 .chv2-*(css/challenge-intro.css) · 값(색 · 그림자 · 모서리 12 · 글꼴 · 줄 간격)은 .chv2 틀(css/challenge-v2-common.css — 마크업이 .chv2.pcfchi-o 로 감싼다)
	   여기 = ① 틀 — 형광펜 값(옛 .chv2--intro 에만 있다) · 구획 사이 88 · 회색 띠 대신 흰 바탕(오른쪽 카드가 따라오는 두 칸이라 화면 가득 띠를 두지 않는다)
	          ② 본문 칸(872 · 화면이 좁으면 600 안팎)에 맞춰 옛 고정 폭(특징 그림 430 · 추천 큰 카드 452)을 비율로
	          ③ 후기 카드 · 칸 = 옛 .chv2-review · .chv2-review-grid 와 같은 값의 새 이름(옛 js 가 옛 이름의 「첫」 칸만 지켜본다 — inc/pc-frame-challenge.php 4절 본문 주석) ════ */
	body.pcf-on .pcfchi .pcfchi-o {
		--chv2-hl: #ffd100; /* 형광펜 — 옛 .chv2--intro 와 같은 값 */
		background: transparent;
	}

	body.pcf-on .pcfchi .pcfchi-o-sec + .pcfchi-o-sec {
		margin-top: 88px;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-center .chv2-eyebrow {
		display: block;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-section-head .chv2-lead {
		margin-top: 12px;
	}

	/* 특징 카드 = 그림자 대신 회색 면(면 카드 — 정본 v4 7.4 · 2026-10-26 운영자 「그림자는 빼고 다르게」 — 흰 바탕 위 흰 카드 + 큰 그림자가 떠 보였다) */
	body.pcf-on .pcfchi .pcfchi-o .chv2-in-sig {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		background: var(--gray-50);
		box-shadow: none;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-in-sig.pcfchi-o-solo {
		grid-template-columns: minmax(0, 1fr);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-fy-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	body.pcf-on .pcfchi .pcfchi-rvg.is-more {
		padding-top: 18px;
	}

	body.pcf-on .pcfchi .pcfchi-rv {
		display: flex;
		flex-direction: column;
		padding: 24px;
		border-radius: var(--r-card);
		background: var(--surface-white);
		box-shadow: var(--card-sm);
	}

	/* ④ 새 틀 본문 칸 정리(css/live-classes.css .aih .mlC :where(h1, h2, h3, p, ul …) { margin: 0; padding: 0; color: inherit } · .aih .mlC ul { list-style: none } — 세기 0,2,0)가
	      옛 부품의 글자 색 · 사이 · 목록 점을 지운다 → 옛 값(css/challenge-v2-common.css · challenge-intro.css 그대로)을 여기서 다시 */
	body.pcf-on .pcfchi .pcfchi-o .chv2-eyebrow {
		margin: 0 0 12px;
		color: var(--primary-link);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-h2 {
		color: var(--ink);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-in-sig-body .chv2-h2 {
		margin-top: 2px;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-reviews-title .chv2-h2 {
		margin-top: 4px;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-h3 {
		color: var(--strong);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-in-feature-body .chv2-h3 {
		margin-bottom: 8px;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-lead,
	body.pcf-on .pcfchi .pcfchi-o .chv2-in-feature-d {
		color: var(--body);
	}

	body.pcf-on .pcfchi .pcfchi-o p.chv2-in-sig-text {
		margin: 12px 0 0;
		color: var(--body);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-fy-eyebrow {
		margin: 0;
		color: var(--primary-500);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-fy-h2 {
		margin: 10px 0 0;
		color: var(--gray-900);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-fy-lead {
		margin: 12px 0 0;
		color: color-mix(in srgb, var(--gray-500) 25%, var(--gray-600));
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-fy-hero-t {
		margin: 12px 0 0;
		color: var(--text-white);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-fy-item-t {
		margin: 6px 0 0;
		color: var(--gray-800);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-review-body {
		margin-bottom: 18px;
		color: var(--body-2);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-cur-sub {
		margin: 14px 0 0;
		color: color-mix(in srgb, var(--gray-500) 25%, var(--gray-600));
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-cur-t {
		color: var(--ink);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-in-reward-t {
		margin: 18px 0 0;
		color: var(--strong);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-in-reward-d {
		margin: 8px 0 0;
		color: var(--body);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-in-step-t {
		margin: 16px 0 0;
		color: var(--gray-900);
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-in-step-d {
		margin: 6px 0 0;
		color: color-mix(in srgb, var(--gray-500) 75%, var(--gray-600));
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-rich p {
		margin: 0 0 .7em;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-rich :is(ul, ol) {
		margin: .3em 0 .8em;
		padding-left: 1.35em;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-rich ul {
		list-style: disc;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-rich ol {
		list-style: decimal;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-rich > :first-child {
		margin-top: 0;
	}

	body.pcf-on .pcfchi .pcfchi-o .chv2-rich > :last-child {
		margin-bottom: 0;
	}
}