/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/**
 * PC 새 틀(미리 보기) — 클래스 소개(정규 · 멤버십 같은 짜임) · 2026-10-21 · 마크업 inc/pc-frame-class-detail.php · 누르기 js/pcf-class-detail.js
 * 운영자 「기준모양 : 멤버십형」 → 2차 「소개화면을 위 네비게이션 너비에 맞춰주세요 · 정규클래스는 교재 구매 유도 버튼」 → 3차 실시간 알림 「움직이게」 · 「맨 아래 큰 시작 단추 뺍니다」
 *   (시안 claude.ai 아티팩트 TePnetgC5KwuzW28WDz8bp — 값은 시안 C:\tmp\pc-frame\hd2\feel\cu-detail.css 그대로)
 * 부품은 멤버십 상세 그대로(css/live-classes.css .aih .mlC-*) — 이 파일 = ① 폭(머리글과 같은 1,260 · 멤버십 상세도) ② 정규에만 있는 칸(.pcfcd-*) ③ 옛 소개(.oclz)를 PC 폭에서 숨기기.
 * ⚠️ 움직임 예외 한 자리 — 실시간 학습 줄의 사람 줄이 4초마다 바뀜(.pcfcd-live-it · js 4절 · 마우스 · 포커스면 멈춤 · 움직임 줄이기면 안 바뀜) = .claude/rules/css.md 움직임 예외 줄.
 * 정본 v4 13장(클래스 소개) · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만).
 */

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

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 소개는 PC 폭에서 숨긴다(새 화면이 있는 요청만 — body.pcfcd-on) · 폭 = 머리글과 같은 1,260 ════
	   본문 720 → 872 · 사이 48 · 카드 340 · 양옆 여백 0(로고 · 메뉴와 같은 왼쪽 선 — 정본 v4 6.7). 멤버십 상세(.aih.msh 안 .mlC--det)도 같은 규칙 */
	body.pcf-on.pcfcd-on #page .oclz {
		display: none;
	}

	body.pcf-on #page .aih .mlC--det {
		--dl: 0px;
		--dm: 872px;
	}

	/* 신청 단추 — 옛 템플릿 단추 함수가 신청 전 회원에게는 <button> 을 준다(손님 = 로그인 링크 · 신청한 회원 = 이어서 학습하기 링크). 링크 단추와 같은 모양 */
	body.pcf-on .pcfcd .mlC button.mlC-cart {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 48px;
		margin-top: 18px;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: var(--brand-action);
		color: var(--surface-white);
		font-size: 16px;
		font-weight: 600;
	}

	body.pcf-on .pcfcd .mlC button.mlC-cart:hover {
		background: var(--brand-hover);
	}

	body.pcf-on .pcfcd .mlC .is-loading {
		opacity: .6;
		pointer-events: none;
	}

	body.pcf-on .pcfcd .mlC a.mlC-now {
		gap: 8px;
	}

	/* 무료 클래스 카드는 가격 줄 없이 한 줄 안내부터(10/23 운영자 「하나씩 확인」 4 「뺍니다」) — 가격 줄 밑 간격(6)을 빼 카드 위 여백을 22 로 */
	body.pcf-on .pcfcd .mlC-buy > .mlC-pnote:first-child {
		margin-top: 0;
	}

	/* ════ 2. 실시간 학습 줄 — 띠 안 정보 줄 밑 한 줄 · 초록 점 = 어두운 바탕 위 라이브 점(--brand-bright) · 동그라미 = 아바타(이름 첫 글자 · 사진이 있으면 사진) ════ */
	body.pcf-on .pcfcd .pcfcd-live {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 10px;
		margin-top: 18px;
		color: color-mix(in srgb, var(--surface-white) 82%, transparent);
		font-size: 14px;
	}

	body.pcf-on .pcfcd .pcfcd-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--brand-bright);
	}

	body.pcf-on .pcfcd .pcfcd-avs {
		display: inline-flex;
	}

	body.pcf-on .pcfcd .pcfcd-avs i {
		position: relative;
		display: grid;
		place-items: center;
		width: 26px;
		height: 26px;
		margin-left: -7px;
		overflow: hidden;
		border: 2px solid var(--gray-900);
		border-radius: 50%;
		background: var(--gray-600);
		color: var(--surface-white);
		font-size: 11px;
		font-style: normal;
		font-weight: 600;
	}

	body.pcf-on .pcfcd .pcfcd-avs i:first-child {
		margin-left: 0;
	}

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

	body.pcf-on .pcfcd .pcfcd-live-n b {
		color: var(--surface-white);
		font-weight: 600;
	}

	body.pcf-on .pcfcd .pcfcd-sep {
		opacity: .55;
	}

	/* 사람 줄 — 같은 칸에 겹쳐 두고 지금 줄만 보인다(4초마다 다음 · 0.35초 위로 바뀜) */
	body.pcf-on .pcfcd .pcfcd-live-ls {
		display: inline-grid;
	}

	body.pcf-on .pcfcd .pcfcd-live-it {
		grid-area: 1 / 1;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity .35s ease, transform .35s ease;
		white-space: nowrap;
	}

	body.pcf-on .pcfcd .pcfcd-live-it.is-on {
		opacity: 1;
		transform: none;
	}

	body.pcf-on .pcfcd .pcfcd-live-it.is-out {
		opacity: 0;
		transform: translateY(-6px);
	}

	/* ════ 3. 카드 — 교재 구매(정규만 · 「이 클래스에 포함」 밑) ════ */
	body.pcf-on .pcfcd .pcfcd-tb {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 12px;
		align-items: center;
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid var(--gray-200);
	}

	body.pcf-on .pcfcd .mlC .pcfcd-tb img {
		width: 46px;
		height: auto;
		border-radius: 3px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	}

	body.pcf-on .pcfcd .pcfcd-tb-t b {
		display: block;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 600;
	}

	body.pcf-on .pcfcd .pcfcd-tb-t span {
		display: block;
		margin-top: 2px;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 1.5;
	}

	body.pcf-on .pcfcd .mlC a.pcfcd-tbbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 44px;
		margin-top: 12px;
		border: 1px solid var(--gray-200);
		border-radius: 6px;
		background: var(--surface-white);
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 600;
	}

	body.pcf-on .pcfcd .mlC a.pcfcd-tbbtn:hover {
		background: var(--gray-50);
	}

	body.pcf-on .pcfcd .mlC a.pcfcd-tbbtn .ol-icon--external-link {
		color: var(--gray-500);
	}

	/* ════ 4. 본문 — 정규에만 있는 칸(있을 때만) · 제목 24/700 · 카드 8 · 선 gray-200 · 본문 14(멤버십 상세 값) ════ */
	body.pcf-on .pcfcd .pcfcd-sec {
		margin-top: 40px;
	}

	body.pcf-on .pcfcd .pcfcd-sec h2 {
		font-size: 24px;
		font-weight: 600;
	}

	/* 클래스 소개 — 처음엔 첫 칸의 글만(둘째 칸부터 · 소개 그림은 [더 보기] 안) */
	body.pcf-on .pcfcd .pcfcd-ib {
		margin-top: 18px;
	}

	body.pcf-on .pcfcd .pcfcd-ib + .pcfcd-ib {
		margin-top: 28px;
		padding-top: 28px;
		border-top: 1px solid var(--gray-200);
	}

	body.pcf-on .pcfcd .pcfcd-ib h3 {
		color: var(--gray-900);
		font-size: 18px;
		font-weight: 600;
		line-height: 1.45;
	}

	body.pcf-on .pcfcd .pcfcd-ib-sub {
		margin-top: 6px;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.6;
	}

	body.pcf-on .pcfcd .pcfcd-ib-body {
		margin-top: 8px;
		color: var(--gray-700);
		font-size: 14px;
		line-height: 1.75;
	}

	body.pcf-on .pcfcd .mlC .pcfcd-ib :where(p + p) {
		margin-top: 10px;
	}

	body.pcf-on .pcfcd .mlC .pcfcd-ib img {
		max-width: 100%;
		height: auto;
		margin-top: 16px;
		border-radius: 8px;
	}

	body.pcf-on .pcfcd .pcfcd-ib mark {
		background: var(--brand-marker);
		color: inherit;
	}

	body.pcf-on .pcfcd .pcfcd-intro:not(.is-open) .pcfcd-ib--more,
	body.pcf-on .pcfcd .mlC .pcfcd-intro:not(.is-open) .pcfcd-ib img {
		display: none;
	}

	body.pcf-on .pcfcd .mlC .pcfcd-morebtn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		height: 44px;
		margin: 18px 0 0;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: var(--surface-white);
		box-shadow: inset 0 0 0 1px var(--gray-300);
		color: var(--gray-900);
		font-size: 14px;
		font-weight: 500;
	}

	body.pcf-on .pcfcd .mlC .pcfcd-morebtn:hover {
		background: var(--gray-50);
	}

	body.pcf-on .pcfcd .pcfcd-intro.is-open .pcfcd-morebtn svg {
		transform: rotate(180deg);
	}

	/* 클래스 내용 — 미리보기 꼬리표 · 신청 전 잠긴 강의(링크 없음) */
	body.pcf-on .pcfcd .pcfcd-pv {
		margin-left: 8px;
		padding: 2px 6px;
		border-radius: 6px;
		background: var(--gray-100);
		color: var(--gray-700);
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		white-space: nowrap;
	}

	body.pcf-on .pcfcd .mlC .pcfcd-lock {
		color: var(--gray-600);
	}

	body.pcf-on .pcfcd .mlC .pcfcd-lock > svg {
		color: var(--gray-400);
	}

	/* 연계 교재 */
	body.pcf-on .pcfcd .pcfcd-bk {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 22px;
		align-items: center;
		margin-top: 18px;
		padding: 22px;
		border: 1px solid var(--gray-200);
		border-radius: 8px;
	}

	body.pcf-on .pcfcd .mlC .pcfcd-bk img {
		width: 112px;
		height: auto;
		border-radius: 4px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
	}

	body.pcf-on .pcfcd .pcfcd-bk-t b {
		color: var(--gray-900);
		font-size: 17px;
		font-weight: 600;
	}

	body.pcf-on .pcfcd .pcfcd-bk-t p {
		margin-top: 6px;
		color: var(--gray-700);
		font-size: 14px;
		line-height: 1.6;
	}

	body.pcf-on .pcfcd .pcfcd-bk-t .pcfcd-bk-n {
		color: var(--gray-500);
		font-size: 13px;
	}

	body.pcf-on .pcfcd .pcfcd-bk-act {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px 18px;
		margin-top: 14px;
	}

	body.pcf-on .pcfcd .mlC .pcfcd-bk-act a.pcfcd-tbbtn {
		display: inline-flex;
		height: 42px;
		margin-top: 0;
		padding: 0 16px;
	}

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

	body.pcf-on .pcfcd .mlC a.pcfcd-more:hover {
		color: var(--gray-900);
	}

	/* 이런 분께 추천해요 */
	body.pcf-on .pcfcd .pcfcd-rec ol {
		display: grid;
		gap: 10px;
		margin: 18px 0 0;
		padding: 0;
		list-style: none;
		counter-reset: pcfcd-rec;
	}

	body.pcf-on .pcfcd .pcfcd-rec li {
		display: grid;
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
		color: var(--gray-700);
		font-size: 14px;
		line-height: 1.6;
		counter-increment: pcfcd-rec;
	}

	body.pcf-on .pcfcd .pcfcd-rec li::before {
		content: counter(pcfcd-rec);
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: var(--gray-100);
		color: var(--gray-900);
		font-size: 12px;
		font-weight: 600;
	}

	/* 자주 묻는 질문 */
	body.pcf-on .pcfcd .pcfcd-faq h2 {
		margin-bottom: 8px;
	}

	body.pcf-on .pcfcd .pcfcd-q {
		border-bottom: 1px solid var(--gray-200);
	}

	body.pcf-on .pcfcd .mlC .pcfcd-q > button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		padding: 16px 0;
		border: 0;
		background: none;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 500;
		text-align: left;
	}

	body.pcf-on .pcfcd .pcfcd-q > button svg {
		color: var(--gray-500);
	}

	body.pcf-on .pcfcd .pcfcd-q.is-open > button svg {
		transform: rotate(180deg);
	}

	body.pcf-on .pcfcd .pcfcd-q > p {
		display: none;
		padding: 0 0 16px;
		color: var(--gray-700);
		font-size: 14px;
		line-height: 1.7;
	}

	body.pcf-on .pcfcd .pcfcd-q.is-open > p {
		display: block;
	}

	/* ════ 5. 미리보기 창 — 창 모서리 12(정본) · 누르면 유튜브 재생기를 그때 넣는다 ════ */
	body.pcf-on .pcfcd-modal {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: grid;
		place-items: center;
	}

	body.pcf-on .pcfcd-modal[hidden] {
		display: none;
	}

	body.pcf-on .pcfcd-modal-bg {
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / .72);
	}

	body.pcf-on .pcfcd-modal-box {
		position: relative;
		width: min(960px, 86vw);
	}

	body.pcf-on .pcfcd-modal-v {
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 12px;
		background: #000;
	}

	body.pcf-on .pcfcd-modal-v iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}

	body.pcf-on .pcfcd .pcfcd-modal-x {
		position: absolute;
		top: -44px;
		right: 0;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--surface-white);
		cursor: pointer;
	}
}

/* 움직임 줄이기 — 사람 줄은 첫 사람 그대로(js 도 넘기지 않는다) */
@media (prefers-reduced-motion: reduce) {
	body.pcf-on .pcfcd .pcfcd-live-it {
		transition: none;
	}
}