/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/* PC 새 틀(미리 보기) — 멤버십 묶음(inc/pc-frame-membership.php). 새 틀 요청에서만 실린다.
   정본 = design_handoff_oppadu_design_system_v4/oppadu-design-guide-v4.md 13장 · 14.6(세 세션 동시 — 이 파일 = 멤버십 세션).
   ⛔ 모든 규칙은 body.pcf-on 아래 + @media (min-width: 1025px). 멤버십은 자료실과 같은 「.aih 틀」(css/pcf.css)을 탄다 —
   그 절은 두 묶음이 같이 쓰니 멤버십에만 걸 규칙은 이 파일에 둔다. */

@media (min-width: 1025px) {
	/* ════ 1. 재생 화면 — 사이트 머리글 · 하위 메뉴 없이 ════
	   2026-10-23 운영자 「재생시에는 위에 네비게이션 탭을 표시 안하는게 좋겠습니다」(10/21 클래스 통일 2차 시안 B 「머리글 없음」 · claude.ai 아티팩트 TePnetgC5KwuzW28WDz8bp).
	   몸 클래스 pcfms-play = 멤버십 클래스 재생 · 라이브 다시보기 글 · 정규 클래스 영상(inc/pc-frame-membership.php oppadu_pcfms_kind).
	   옛 틀도 이 화면들에서 머리글을 숨긴다(css/live-player.css · css/post-real-excel.css) — 화면 윗줄(‹ 뒤로 · 이름)이 길을 대신한다.
	   머리글 높이 변수도 0 으로 — 화면 높이에 맞추는 앱 칸(라이브 다시보기 .lp-wrap — css/pcf.css)과 붙는 칸 · 알림이 맨 위(관리자 막대 아래)부터 */
	body.pcf-on.pcfms-play .pcf-r1,
	body.pcf-on.pcfms-play .pcf-r2,
	body.pcf-on.pcfms-play .pcf-sub {
		display: none;
	}

	body.pcf-on.pcfms-play {
		--pcf-r1-h: 0px;
		--nav-height: 0px;
		--pcf-sub-h: 0px;
	}
}

/* ════ 2. 라이브 다시보기 글 — 클래스 재생과 같은 강의실(.mlR · css/live-player.css) ════
   2026-10-23 운영자 「라이브 다시보기 글 모양 → 이 라이브 목차」(시안 claude.ai 아티팩트 MoQSkiPBjQJVAW5xqjzkM8 「가」).
   마크업 = inc/pc-frame-membership.php 2절(post-live-template.php 옛 재생기 .lp-wrap 바로 뒤) · 동작 = js/pcf-membership.js.
   PC(1025~)만 강의실 · 그 아래 폭은 옛 화면 그대로(강의실은 숨는다). 질문 피드 · 자막 · 보충 자료 · 관련 강의는 옛 칸을 옮겨 온 것(아이디 · 옛 동작 그대로) — 모양만 강의실에 맞춘다.
   값은 강의실 부품 값(본문 14 · 소제목 16/700 · 그림 8 · 단추 6) */
.pcfms-room {
	display: none;
}

@media (min-width: 1025px) {
	body.pcf-on.pcfms-live .pcfms-room {
		display: block;
	}

	body.pcf-on.pcfms-live #page .lp-wrap {
		display: none;
	}

	/* 머리글이 없어 오른쪽 목차 칸은 맨 위(관리자 막대가 있으면 그 아래)에 붙는다 — live-player.css 의 61 · 93 은 옛 머리글 기준 */
	body.pcf-on .pcfms-room {
		--lr-top: var(--pcf-ab-h);
	}

	/* 윗줄 — 「라이브 다시보기」 + 회차 번호(흐린 글자) */
	body.pcf-on .pcfms-room .pcfms-tnum {
		flex: none;
		margin-left: -4px;
		font-size: 14px;
		white-space: nowrap;
		color: color-mix(in srgb, var(--surface-white) 68%, transparent);
	}

	/* 개요 — 제목 아래 한 줄(라이브 N회 · 방송일 · 조회) · 스크랩(클래스 재생의 [이 회차 다 봤어요] 자리와 같은 단추) */
	body.pcf-on .pcfms-room .pcfms-when {
		margin-top: 6px;
		font-size: 13.5px;
		color: var(--text-muted);
	}

	body.pcf-on .pcfms-room .pcfms-bm svg {
		color: var(--gray-500);
	}

	/* 이 라이브가 든 클래스 한 줄 */
	body.pcf-on .pcfms-room .pcfms-cls {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 14px;
		padding: 13px 16px;
		border: 1px solid var(--gray-200);
		border-radius: 8px;
		font-size: 14px;
		color: var(--gray-700);
	}

	body.pcf-on .pcfms-room .pcfms-cls > svg {
		flex: none;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-cls a {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		margin-left: auto;
		font-weight: 500;
		white-space: nowrap;
		color: var(--gray-900);
	}

	/* 개요 아래 칸 — 버전 안내 · 보충 자료 · 함께 보면 좋은 강의(옛 「라이브정보」 탭 · 있을 때만) */
	body.pcf-on .pcfms-room .pcfms-sec {
		margin-top: 30px;
	}

	body.pcf-on .pcfms-room .pcfms-sec h3 {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.45;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-ver {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 6px 12px;
		margin: 12px 0 0;
		font-size: 14px;
	}

	body.pcf-on .pcfms-room .pcfms-ver dt {
		color: var(--text-muted);
	}

	body.pcf-on .pcfms-room .pcfms-ver dd {
		margin: 0;
		color: var(--gray-900);
	}

	/* 보충 자료 — 옛 번호 목록(style.css .numbered-list · 파란 번호 원)과 관련 글 카드([related_posts] .post-item · 테두리 12)를 강의 카드 줄로 */
	body.pcf-on .pcfms-room .pcfms-sub .lp-info-section-body {
		padding: 0;
		font-size: 14px;
	}

	body.pcf-on .pcfms-room .pcfms-sub .numbered-list {
		margin: 12px 0 0;
	}

	body.pcf-on .pcfms-room .pcfms-sub .numbered-list ol li:not(.post-item) {
		margin: 0 0 18px;
	}

	body.pcf-on .pcfms-room .pcfms-sub .numbered-list ol li:not(.post-item)::before {
		width: 1.6em;
		height: auto;
		margin-top: 0;
		margin-left: -2em;
		border-radius: 0;
		background: none;
		font-size: 14px;
		font-weight: 600;
		line-height: inherit;
		text-align: right;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-sub .numbered-list ol li > strong {
		display: block;
		font-weight: 500;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-sub .related-post-list-box {
		margin: 10px 0 0;
	}

	body.pcf-on .pcfms-room .pcfms-sub .post-list {
		gap: 10px;
		margin: 0;
	}

	body.pcf-on .pcfms-room .pcfms-sub .post-item,
	body.pcf-on .pcfms-room .pcfms-sub .post-item:hover {
		align-items: center;
		gap: 14px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		transform: none;
	}

	body.pcf-on .pcfms-room .pcfms-sub .postcontent .content {
		display: none;
	}

	/* style.css 「.numbered-list img { margin-top: 20px }」 — 카드 그림이 글보다 20 내려가 줄이 어긋났다 */
	body.pcf-on .pcfms-room .pcfms-sub .numbered-list img {
		margin-top: 0;
	}

	body.pcf-on .pcfms-room .pcfms-sub .postcontent .category {
		font-size: 12.5px;
		color: var(--text-muted);
	}

	body.pcf-on .pcfms-room .pcfms-sub .postcontent .title {
		font-size: 14px;
		font-weight: 500;
		line-height: 1.45;
		color: var(--gray-900);
	}

	/* 함께 보면 좋은 강의 — 옛 한 줄 목록(.lp-recommend-*)을 그림 카드 3열로 · 「무료영상」 · 「관련영상」 꼬리표는 뺀다(정본 v4 「부담 없이」 — 무료는 외치지 않는다) */
	body.pcf-on .pcfms-room .pcfms-rel .lp-recommend-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		margin-top: 12px;
	}

	body.pcf-on .pcfms-room .pcfms-rel .lp-recommend-item,
	body.pcf-on .pcfms-room .pcfms-rel .lp-recommend-item:hover {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		min-width: 0;
		padding: 0;
		background: none;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-rel .lp-recommend-thumb {
		width: 100%;
		border-radius: 8px;
	}

	body.pcf-on .pcfms-room .pcfms-rel .lp-recommend-badge {
		display: none;
	}

	body.pcf-on .pcfms-room .pcfms-rel .lp-recommend-title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.45;
	}

	/* 질문 · 스크립트 탭 — 옛 탭 칸을 그대로 옮겨 왔다(늘 보이게 — 칸을 보이고 숨기는 것은 강의실 탭) */
	body.pcf-on .pcfms-room .lp-tab-pane {
		display: block;
	}

	/* 강의실 부품의 「.mlR a { color: inherit }」(css/live-player.css)이 옮겨 온 옛 채운 단추 글자색까지 덮어 초록 바탕에 짙은 글자가 됐다 — 옛 값으로(live-page.css .lp-login-btn) */
	body.pcf-on .pcfms-room a.lp-login-btn,
	body.pcf-on .pcfms-room a.lp-login-btn:hover {
		color: var(--surface-white);
	}

	body.pcf-on .pcfms-room .pcfms-sc #lp-script-container {
		max-height: calc(100vh - var(--pcf-ab-h) - 200px);
		padding: 8px;
		border: 1px solid var(--gray-200);
		border-radius: 8px;
	}

	/* 오른쪽 「목차」 — 이 라이브 목차 한 줄 목록(묶음 머리 없이 늘 펼침) · 옛 회차의 묶음 제목 줄(「1교시 · …」)은 장면 줄 사이 작은 회색 머리 */
	body.pcf-on .pcfms-room .mlR-sideh b {
		display: inline-flex;
		align-items: baseline;
	}

	body.pcf-on .pcfms-room .pcfms-cnt {
		margin-left: 8px;
		font-size: 13px;
		font-weight: 400;
		color: var(--text-muted);
	}

	body.pcf-on .pcfms-room .pcfms-solo {
		border-bottom: 0;
	}

	body.pcf-on .pcfms-room .pcfms-solo .mlR-chs {
		display: block;
		padding: 6px 0 16px;
	}

	body.pcf-on .pcfms-room .pcfms-grp {
		margin: 10px 16px 2px 18px;
		padding-top: 10px;
		border-top: 1px solid var(--gray-100);
		font-size: 12.5px;
		font-weight: 600;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-grp:first-child {
		margin-top: 4px;
		padding-top: 4px;
		border-top: 0;
	}

	body.pcf-on .pcfms-room .pcfms-noch {
		margin: 0;
		padding: 16px;
		font-size: 14px;
		color: var(--text-muted);
	}

	/* 손님 · 멤버 아님 — 라이브 표지엔 큰 글씨가 있어 잠금 안내와 겹친다 → 표지를 옅게(클래스 재생은 글씨 없는 띠 그림이라 그대로) */
	body.pcf-on .pcfms-room .mlR-lockbg {
		opacity: 0.2;
	}
}

/* ════ 3. 수강 완료 — 「○ 수강완료」 ════
   2026-10-21 운영자 3차 「50% 안내 · 다 봤어요 둘 다 별로 → 그냥 ○ 수강완료(빈 동그라미)」 · 2차 「완료 = 실제 재생 50%」.
   [이 회차 다 봤어요] 테두리 단추 자리에 빈 동그라미 + 「수강완료」 한 줄(테두리 · 바탕 없음). 다 보면(실제 재생 50% · 눌러서도) 초록 체크 동그라미 — 성공 색(결과 · 상태).
   마크업 = js/pcf-membership.js 0절 · 2절(멤버십 클래스 재생 .mlR-done → .pcfms-done) */
@media (min-width: 1025px) {
	body.pcf-on .mlR .pcfms-done {
		gap: 6px;
		padding: 0 10px;
		background: none;
		box-shadow: none;
		color: var(--gray-600);
		font-weight: 500;
	}

	body.pcf-on .mlR .pcfms-done svg {
		color: var(--gray-400);
	}

	body.pcf-on .mlR .pcfms-done:hover {
		background: var(--gray-50);
		color: var(--gray-900);
	}

	body.pcf-on .mlR .pcfms-done.is-done {
		background: none;
		color: var(--color-success-text);
	}

	body.pcf-on .mlR .pcfms-done.is-done svg {
		color: var(--color-success);
	}

	/* 볼 수 없는 회차(잠금 안내가 뜬 회차)엔 두지 않는다 — js 2절이 hidden(옛 .mlR-done 의 inline-flex 가 hidden 을 이기므로) */
	body.pcf-on .mlR .pcfms-done[hidden] {
		display: none;
	}

	/* 로그인 · 클래스 시작 전 안내 한 줄의 링크(「클래스를 시작하면」) — 강의실 부품 .mlR a { color: inherit } 위에 본문 링크 색 */
	body.pcf-on .mlR .mlR-done-note a {
		font-weight: 500;
		color: var(--primary);
	}
}

/* ════ 4. 정규 클래스 영상 — 같은 강의실(10/21 클래스 통일 2차 시안 B 값 그대로 — 시안 파일 cu-player.css) ════
   2026-10-23 운영자 「정규 클래스 영상 → 네, 바꿉니다」. 마크업 = inc/pc-frame-membership.php 3절(single-class-video.php 옛 .re-lesson 바로 뒤) · 동작 = js/pcf-membership.js 3절.
   PC(1025~)만 강의실 · 그 아래 폭은 옛 화면 그대로 */
@media (min-width: 1025px) {
	body.pcf-on.pcfms-reg .pcfms-room {
		display: block;
	}

	/* 옛 강의 화면만 — 셀프 퀴즈 서랍 판(aside.re-qd-panel.re-lesson · main 밖)도 같은 이름이라 본문 칸의 자식으로 좁힌다(10/23 — 넓게 걸었다가 서랍이 막만 뜨고 비었다) */
	body.pcf-on.pcfms-reg #page #main > .re-lesson {
		display: none;
	}

	/* 오른쪽 강의 목록 — 강의 상태 ✓ 다 봄(성공 색) · ▶ 지금(초록 — 지금 위치) · ○ 아직 */
	body.pcf-on .pcfms-room .pcfms-ls {
		align-items: flex-start;
	}

	body.pcf-on .pcfms-room .pcfms-st {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 22px;
		padding-top: 1px;
		color: var(--gray-300);
	}

	body.pcf-on .pcfms-room .pcfms-ls.is-done .pcfms-st {
		color: var(--color-success);
	}

	body.pcf-on .pcfms-room .pcfms-ls.is-on:not(.is-done) .pcfms-st {
		color: var(--primary);
	}

	/* ▶ 재생 삼각형만 채운다 — 지금 강의가 이미 다 본 강의면 ✓ 동그라미(채우면 초록 점이 된다) */
	body.pcf-on .pcfms-room .pcfms-ls.is-on:not(.is-done) .pcfms-st svg {
		fill: currentColor;
	}

	/* 교재 — 한 칸(머리 = 교재 N쪽 + [교재 구매하기 ↗](바깥 서점 새 창) · 아래 = 쪽마다 한 줄) */
	body.pcf-on .pcfms-room .pcfms-book {
		margin-top: 12px;
		padding: 14px 16px;
		border: 1px solid var(--gray-200);
		border-radius: 8px;
		font-size: 14px;
		color: var(--gray-700);
	}

	body.pcf-on .pcfms-room .pcfms-bkh {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	body.pcf-on .pcfms-room .pcfms-bkh > svg {
		flex: none;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-bkh b {
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-bklist {
		display: grid;
		gap: 4px;
		margin: 8px 0 0;
		padding: 0 0 0 28px;
		list-style: none;
	}

	body.pcf-on .pcfms-room .pcfms-bklist li {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 8px;
		line-height: 1.55;
	}

	body.pcf-on .pcfms-room .pcfms-bklist i {
		font-style: normal;
		font-variant-numeric: tabular-nums;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-bkbuy {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 4px;
		height: 34px;
		margin-left: auto;
		padding: 0 12px;
		border: 1px solid var(--gray-200);
		border-radius: 6px;
		background: var(--surface-white);
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-bkbuy:hover {
		background: var(--gray-50);
	}

	body.pcf-on .pcfms-room .pcfms-bkbuy svg {
		color: var(--gray-500);
	}

	/* 이 강의를 보고 나면 */
	body.pcf-on .pcfms-room .pcfms-goal ul {
		display: grid;
		gap: 8px;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
	}

	body.pcf-on .pcfms-room .pcfms-goal li {
		display: grid;
		grid-template-columns: 18px minmax(0, 1fr);
		gap: 10px;
		font-size: 14px;
		line-height: 1.55;
		color: var(--gray-700);
	}

	body.pcf-on .pcfms-room .pcfms-goal li svg {
		margin-top: 2px;
		color: var(--primary);
	}

	/* 이 강의 목차 — 두 열 · 누르면 그 장면부터 · 재생 중인 장면은 초록 글자(지금 위치) */
	body.pcf-on .pcfms-room .pcfms-tl h3 i {
		margin-left: 8px;
		font-size: 13px;
		font-style: normal;
		font-weight: 400;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-tl ol {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 28px;
		margin: 10px 0 0;
		padding: 0;
		list-style: none;
	}

	body.pcf-on .pcfms-room .pcfms-tl a {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 8px;
		padding: 7px 0;
		font-size: 14px;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-tl a.is-on {
		font-weight: 600;
		color: var(--primary);
	}

	body.pcf-on .pcfms-room .pcfms-tlt {
		font-variant-numeric: tabular-nums;
		color: var(--gray-500);
	}

	/* 셀프 퀴즈 — 오른쪽 칸(10/23 운영자 「영상 옆 오른쪽 칸」 → 「앱 짜임」 → 퀴즈 칸 「가 · 진한 아이콘 + [풀기]」 — 시안 claude.ai 아티팩트 Sn5QpmumuM5QURR2GbtivW)
	   퀴즈 칸 자리 = 지금 강의 줄 밑(10/25 운영자 「그 해당 강의 밑에 · 바로 보고 풀 수 있도록」 → 15판(claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa) 「가는 너무 높고, 나는 너무 낮은 것 같아요. 가/나 중간 정도로」)
	   = 회색 칸 한 줄 44(가 = 두 줄 62 · 나 = 칸 없는 한 줄 28) · 강의 글자 시작선(50)에 맞춰 들임 · 진한 아이콘 칸 28 + 「퀴즈 N문제 · 한 줄」 + 검은 [풀기] 32
	   (사이트 채움 단추는 초록 — 검정은 .claude/rules/css.md 예외 줄) · 퀴즈 칸 = 앱 짜임(정본 v4 7.14 — 회색 묶음 칸 · 칸 안 줄 선 · 회색 면 단추) · 초록은 정답 표시(성공 색)만 */
	body.pcf-on .pcfms-room .pcfms-qzpin {
		margin: 2px 16px 12px 50px;
	}

	/* 지금 강의가 목록에 없을 때(드문 경우)만 — 「강의 내용」 머리 밑 */
	body.pcf-on .pcfms-room .mlR-side > .pcfms-qzpin {
		margin: 12px;
	}

	body.pcf-on .pcfms-room .pcfms-qzp {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 6px 6px 6px 8px;
		border-radius: 8px;
		background: var(--gray-100);
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-qzp-ic {
		display: grid;
		flex: none;
		place-items: center;
		width: 28px;
		height: 28px;
		border-radius: 6px;
		background: var(--gray-900);
		color: var(--surface-white);
	}

	body.pcf-on .pcfms-room .pcfms-qzp-tx {
		display: flex;
		flex: 1;
		align-items: baseline;
		gap: 6px;
		min-width: 0;
		white-space: nowrap;
	}

	body.pcf-on .pcfms-room .pcfms-qzp-tx b {
		flex: none;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: -.01em;
	}

	body.pcf-on .pcfms-room .pcfms-qzp-tx span {
		overflow: hidden;
		font-size: 13px;
		color: var(--gray-500);
		text-overflow: ellipsis;
	}

	body.pcf-on .pcfms-room .pcfms-qzp-tx span::before {
		content: "· ";
	}

	body.pcf-on .pcfms-room .pcfms-qzp-go {
		flex: none;
		min-height: 32px;
		margin: 0;
		padding: 0 14px;
		border: 0;
		border-radius: 6px;
		background: var(--gray-900);
		font: inherit;
		font-size: 13.5px;
		font-weight: 500;
		color: var(--surface-white);
		cursor: pointer;
	}

	body.pcf-on .pcfms-room .pcfms-qzp-go:hover {
		background: var(--gray-800);
	}

	body.pcf-on .pcfms-room .pcfms-qzp-go:focus-visible,
	body.pcf-on .pcfms-room .pcfms-numq:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	/* 개요 숫자 줄 「N문제 셀프 퀴즈」 — 누르면 퀴즈 창 */
	body.pcf-on .pcfms-room .pcfms-numq {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		color: inherit;
		text-align: left;
		cursor: pointer;
	}

	body.pcf-on .pcfms-room .pcfms-numq:hover b {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* ════ 셀프 퀴즈 창 — 가운데 창(10/25 4차 운영자 「퀴즈 클릭하면 가운데 팝업 뜨고, 하나씩 정답 나오는게 아니라, 문제 한 번에 쑥~ 풀고 결과 + 정답 나오도록 · 정답 화면은 토스처럼 애니메이션」)
	   그 전(10/23) = 오른쪽 칸이 퀴즈로 바뀌고 한 문제씩 바로 정답. 동작 = js/pcf-membership.js 3절 · 틀 = inc/pc-frame-membership.php 3절 <dialog>.
	   창 = 정본 창 모서리 12 · 폭 600 · 높이 화면 − 64 까지(몸만 굴러감) · 머리(작은 줄 13 + 강의 이름 18 · 닫기 36) · 아래 줄(남은 수 + [채점하기] = 사이트 채운 단추 44).
	   보기 = 앱 짜임 묶음 칸(정본 v4 7.14 — 회색 100 · 칸 안 줄 선) · 고르면 오른쪽 검은 동그라미 ✓(답이 여럿이면 네모 6) — 초록은 [채점하기] · 정답 표시(성공 색)만.
	   문제 = 번호 칸 26(검정 · 결과면 ✓ 성공 색 / ✕ 오류 색) + 굵은 문제 글 16/600 · 몸은 글 시작선에 맞춰 들임 · 문제 사이 = 창 끝까지 닿는 선(10/26 「각 문제간 구분이 잘 안되네요」).
   결과 = 맞힌 수 고리 120(성공 색) + 한 줄 22 + 문제마다 ✓/✕ 번호 칸 · 정답(성공 색) · 내 답(오류 색) · 풀이(회색 50 칸) · [다시 풀기](회색 면) [다음 강의](채운 단추).
	   움직임 = 결과를 처음 그릴 때 한 번(.is-anim — 고리가 튀어나오며 차오름 · 숫자 올라감(js) · 다 맞히면 ✓ 그려짐 + 꽃가루 · 한 줄 · 문제가 차례로 올라옴 · 배지 튀어나옴) + 창 열림 0.22초 ·
	   움직임 줄이기면 모두 끈다 — .claude/rules/css.md 움직임 예외 줄(토스처럼 — 운영자 직접 요청). */
	body.pcf-on .pcfms-room .pcfms-qzd {
		box-sizing: border-box;
		width: min(600px, calc(100vw - 48px));
		max-width: none;
		height: auto;
		max-height: calc(100dvh - 64px);
		margin: auto;
		padding: 0;
		overflow: hidden;
		border: 0;
		border-radius: 12px;
		background: var(--surface-white);
		box-shadow: var(--shadow-lg);
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-qzd::backdrop {
		background: var(--overlay);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in {
		position: relative;
		display: flex;
		flex-direction: column;
		max-height: calc(100dvh - 64px);
	}

	body.pcf-on .pcfms-room .pcfms-qzd button:focus-visible,
	body.pcf-on .pcfms-room .pcfms-qzd a:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	/* 머리 */
	body.pcf-on .pcfms-room .pcfms-qzd-h {
		display: flex;
		flex: none;
		align-items: flex-start;
		gap: 12px;
		padding: 20px 16px 16px 24px;
		border-bottom: 1px solid var(--gray-200);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-ht {
		flex: 1;
		min-width: 0;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-k {
		display: block;
		font-size: 13px;
		font-weight: 500;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-h h2 {
		margin: 2px 0 0;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: -.01em;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-x {
		display: grid;
		flex: none;
		place-items: center;
		width: 36px;
		height: 36px;
		margin: -6px 0 0;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: none;
		color: var(--gray-700);
		cursor: pointer;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-x:hover {
		background: var(--gray-100);
		color: var(--gray-900);
	}

	/* 몸 — 굴러가는 칸 */
	body.pcf-on .pcfms-room .pcfms-qzd-b {
		flex: 1 1 auto;
		min-height: 0;
		padding: 0 24px 28px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* 문제 하나 — 번호 칸 + 굵은 문제 글 · 몸(그림 · 보기 · 풀이)은 문제 글 시작선(36)에 맞춰 들임 · 문제 사이 = 창 끝까지 닿는 선 + 위아래 32
	   (10/26 운영자 「푸는 화면에서 각 문제간 구분이 잘 안되네요」 — 그 전 = 작은 회색 「Q1」 + 보통 굵기 글 · 사이 24 · 선 없음) */
	body.pcf-on .pcfms-room .pcfms-qzi {
		padding-top: 24px;
	}

	body.pcf-on .pcfms-room .pcfms-qzi + .pcfms-qzi {
		margin: 32px -24px 0;
		padding: 32px 24px 0;
		border-top: 1px solid var(--gray-200);
	}

	body.pcf-on .pcfms-room .pcfms-qzi-q {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0 0 14px;
	}

	/* 번호 칸 26 — 푸는 화면 = 검은 칸 흰 숫자 · 결과 = 맞음 성공 색 ✓ / 틀림 오류 색 ✕ */
	body.pcf-on .pcfms-room .pcfms-qzi-no {
		display: inline-grid;
		flex: none;
		place-items: center;
		width: 26px;
		height: 26px;
		border-radius: 6px;
		background: var(--gray-900);
		font-size: 14px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		color: var(--surface-white);
	}

	body.pcf-on .pcfms-room .pcfms-qzi.is-ok .pcfms-qzi-no {
		background: var(--color-success);
	}

	body.pcf-on .pcfms-room .pcfms-qzi.is-no .pcfms-qzi-no {
		background: var(--color-danger);
	}

	body.pcf-on .pcfms-room .pcfms-qzi-t {
		flex: 1;
		min-width: 0;
		padding-top: 1px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.55;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-qzi-t em {
		display: inline-block;
		margin-left: 6px;
		padding: 1px 7px;
		border-radius: 6px;
		background: var(--gray-100);
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 1.5;
		vertical-align: 1px;
		color: var(--gray-700);
	}

	body.pcf-on .pcfms-room .pcfms-qzi-b {
		margin-left: 36px;
	}

	body.pcf-on .pcfms-room .pcfms-qz-imgb {
		display: block;
		width: 100%;
		margin: 0 0 12px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: none;
		cursor: zoom-in;
	}

	body.pcf-on .pcfms-room .pcfms-qz-img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 8px;
		box-shadow: 0 0 0 1px var(--gray-200);
	}

	/* 보기 — 한 회색 칸 안에 줄로(칸 안 줄 선 · 왼쪽 16 들여) */
	body.pcf-on .pcfms-room .pcfms-qz-opts {
		display: flex;
		flex-direction: column;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		width: 100%;
		min-height: 50px;
		margin: 0;
		padding: 12px 16px;
		border: 0;
		border-radius: 0;
		background: transparent;
		font: inherit;
		font-size: 15px;
		line-height: 1.5;
		text-align: left;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room button.pcfms-qz-opt {
		cursor: pointer;
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt:first-child {
		border-radius: 8px 8px 0 0;
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt:last-child {
		border-radius: 0 0 8px 8px;
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt:only-child {
		border-radius: 8px;
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt + .pcfms-qz-opt::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 16px;
		height: 1px;
		background: var(--gray-200);
	}

	body.pcf-on .pcfms-room button.pcfms-qz-opt:hover {
		background: var(--gray-200);
	}

	body.pcf-on .pcfms-room .pcfms-qz-ot {
		display: grid;
		flex: 1;
		gap: 8px;
		min-width: 0;
	}

	body.pcf-on .pcfms-room .pcfms-qz-oimg {
		display: block;
		max-width: 100%;
		height: auto;
		border-radius: 6px;
	}

	body.pcf-on .pcfms-room .pcfms-qz-mk {
		display: grid;
		flex: none;
		place-items: center;
		width: 22px;
		height: 22px;
	}

	/* 푸는 화면 — 빈 동그라미 → 고르면 검은 동그라미 ✓(답이 여럿이면 네모 6) */
	body.pcf-on .pcfms-room button.pcfms-qz-opt .pcfms-qz-mk {
		box-sizing: border-box;
		border: 1.5px solid var(--gray-300);
		border-radius: 50%;
		background: var(--surface-white);
		color: transparent;
	}

	body.pcf-on .pcfms-room .pcfms-qz-opts.is-multi button.pcfms-qz-opt .pcfms-qz-mk {
		border-radius: 6px;
	}

	body.pcf-on .pcfms-room button.pcfms-qz-opt.is-sel .pcfms-qz-mk {
		border-color: var(--gray-900);
		background: var(--gray-900);
		color: var(--surface-white);
	}

	body.pcf-on .pcfms-room button.pcfms-qz-opt.is-sel .pcfms-qz-ot {
		font-weight: 600;
	}

	/* 결과 화면 — 정답 ✓ 성공 색 · 고른 틀린 답 ✕ 오류 색 · 나머지 흐리게 · 꼬리표 「정답」 「내 답」 */
	body.pcf-on .pcfms-room .pcfms-qz-opt.is-ok {
		font-weight: 600;
		color: var(--color-success-text);
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt.is-ok .pcfms-qz-mk {
		color: var(--color-success);
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt.is-no .pcfms-qz-mk {
		color: var(--color-danger);
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt.is-dim {
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-qz-tag {
		flex: none;
		font-size: 12px;
		font-style: normal;
		font-weight: 600;
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt.is-ok .pcfms-qz-tag {
		color: var(--color-success-text);
	}

	body.pcf-on .pcfms-room .pcfms-qz-opt.is-no .pcfms-qz-tag {
		color: var(--color-danger-text);
	}

	body.pcf-on .pcfms-room .pcfms-qzi-ex {
		margin-top: 10px;
		padding: 12px 14px;
		border-radius: 8px;
		background: var(--gray-50);
	}

	body.pcf-on .pcfms-room .pcfms-qzi-ex b {
		display: block;
		margin-bottom: 4px;
		font-size: 13px;
		font-weight: 600;
		color: var(--gray-700);
	}

	body.pcf-on .pcfms-room .pcfms-qzi-ex p {
		margin: 0;
		font-size: 14px;
		line-height: 1.65;
		white-space: pre-line;
		color: var(--gray-700);
	}

	/* 아래 줄 — 남은 수 + [채점하기] · 결과면 [다시 풀기] [다음 강의] */
	body.pcf-on .pcfms-room .pcfms-qzd-f {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 20px 14px 24px;
		border-top: 1px solid var(--gray-200);
		background: var(--surface-white);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-f.is-end {
		justify-content: flex-end;
		gap: 8px;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-left {
		font-size: 14px;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-go,
	body.pcf-on .pcfms-room .pcfms-qzd-sub {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		box-sizing: border-box;
		min-width: 112px;
		height: 44px;
		margin: 0;
		padding: 0 20px;
		border: 0;
		border-radius: 6px;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-go,
	body.pcf-on .pcfms-room a.pcfms-qzd-go:hover {
		background: var(--brand-action);
		color: var(--surface-white);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-go:hover {
		background: var(--brand-hover);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-go:disabled {
		background: var(--gray-200);
		color: var(--gray-500);
		cursor: default;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-sub {
		background: var(--gray-100);
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-sub:hover {
		background: var(--gray-200);
	}

	/* 결과 머리 — 맞힌 수 고리 120 · 한 줄 22 · 덧말 14 */
	body.pcf-on .pcfms-room .pcfms-qzr {
		display: grid;
		justify-items: center;
		margin: 0 -24px;
		padding: 32px 24px 24px;
		border-bottom: 1px solid var(--gray-200);
		text-align: center;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-ring {
		position: relative;
		display: grid;
		place-items: center;
		width: 120px;
		height: 120px;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-c {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-c circle {
		fill: none;
		stroke-width: 10;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-tr {
		stroke: var(--gray-100);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-pg {
		stroke: var(--color-success);
		stroke-linecap: round;
		stroke-dasharray: 100 100;
		stroke-dashoffset: calc(100 - var(--pct));
	}

	body.pcf-on .pcfms-room .pcfms-qzr.is-all .pcfms-qzr-tr {
		stroke: var(--color-success-bg);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-n {
		margin: 0;
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-n b {
		font-size: 36px;
		font-weight: 700;
		letter-spacing: -.02em;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-n span {
		margin-left: 3px;
		font-size: 16px;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-ck {
		width: 56px;
		height: 56px;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-ck path {
		fill: none;
		stroke: var(--color-success);
		stroke-width: 2.6;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-dasharray: 100;
		stroke-dashoffset: 0;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-t {
		margin: 18px 0 0;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: -.02em;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-s {
		margin: 6px 0 0;
		font-size: 14px;
		color: var(--gray-500);
	}

	/* 꽃가루 — 다 맞혔을 때 고리 가운데서 사방으로 한 번(조각 자리 = js · 색 = 초록 셋 + 회색 900) */
	body.pcf-on .pcfms-room .pcfms-qzr-burst {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		pointer-events: none;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-burst i {
		position: absolute;
		top: -3px;
		left: -4px;
		width: 9px;
		height: 6px;
		border-radius: 2px;
		background: var(--brand-action);
		opacity: 0;
	}

	body.pcf-on .pcfms-room .pcfms-qzr-burst i:nth-child(4n+2) {
		background: var(--brand-bright);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-burst i:nth-child(4n+3) {
		background: var(--primary-300);
	}

	body.pcf-on .pcfms-room .pcfms-qzr-burst i:nth-child(4n) {
		width: 5px;
		height: 5px;
		background: var(--gray-900);
	}

	/* 그림 크게 — 창 안 덮개 */
	body.pcf-on .pcfms-room .pcfms-qzd-zoom {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: grid;
		place-items: center;
		margin: 0;
		padding: 24px;
		border: 0;
		background: var(--overlay-strong);
		cursor: zoom-out;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-zoom img {
		display: block;
		max-width: 100%;
		max-height: 100%;
		border-radius: 8px;
	}

	/* ── 움직임 — 창 열림 · 결과 처음 그림(.is-anim) ── */
	body.pcf-on .pcfms-room .pcfms-qzd[open] .pcfms-qzd-in {
		animation: pcfms-qz-in 220ms cubic-bezier(.2, .8, .2, 1);
	}

	body.pcf-on .pcfms-room .pcfms-qzd[open]::backdrop {
		animation: pcfms-qz-fade 200ms ease-out;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzr-ring {
		animation: pcfms-qz-pop 560ms cubic-bezier(.34, 1.56, .64, 1) both;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzr-pg {
		animation: pcfms-qz-ring 900ms cubic-bezier(.22, .8, .3, 1) 150ms both;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzr-ck path {
		animation: pcfms-qz-draw 420ms ease-out 650ms both;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzr-burst i {
		animation: pcfms-qz-burst 1000ms cubic-bezier(.15, .7, .3, 1) 780ms both;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzr-t {
		animation: pcfms-qz-up 420ms cubic-bezier(.2, .8, .2, 1) 420ms both;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzr-s {
		animation: pcfms-qz-up 420ms cubic-bezier(.2, .8, .2, 1) 500ms both;
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzi {
		animation: pcfms-qz-up 460ms cubic-bezier(.2, .8, .2, 1) both;
		animation-delay: calc(620ms + var(--i, 0) * 90ms);
	}

	body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim .pcfms-qzi-no {
		animation: pcfms-qz-pop 480ms cubic-bezier(.34, 1.56, .64, 1) both;
		animation-delay: calc(760ms + var(--i, 0) * 90ms);
	}

	@keyframes pcfms-qz-in {
		from {
			opacity: 0;
			transform: translateY(10px) scale(.98);
		}
	}

	@keyframes pcfms-qz-fade {
		from {
			opacity: 0;
		}
	}

	@keyframes pcfms-qz-pop {
		from {
			opacity: 0;
			transform: scale(.4);
		}
	}

	@keyframes pcfms-qz-ring {
		from {
			stroke-dashoffset: 100;
		}
	}

	@keyframes pcfms-qz-draw {
		from {
			stroke-dashoffset: 100;
		}
	}

	@keyframes pcfms-qz-up {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}

	@keyframes pcfms-qz-burst {
		0% {
			opacity: 0;
			transform: translate(0, 0) rotate(0) scale(.6);
		}

		8%,
		70% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translate(var(--dx), calc(var(--dy) + 36px)) rotate(var(--r)) scale(1);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		body.pcf-on .pcfms-room .pcfms-qzd[open] .pcfms-qzd-in,
		body.pcf-on .pcfms-room .pcfms-qzd[open]::backdrop,
		body.pcf-on .pcfms-room .pcfms-qzd-in.is-anim * {
			animation: none;
		}
	}

	/* 보충 강의 · 사용 버전 · 정오표 */
	body.pcf-on .pcfms-room .pcfms-rel2 a {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 10px;
		font-size: 14px;
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-room .pcfms-rel2 a svg {
		flex: none;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-ver2 {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 26px;
		font-size: 13px;
		color: var(--gray-500);
	}

	body.pcf-on .pcfms-room .pcfms-ver2 svg {
		flex: none;
	}

	body.pcf-on .pcfms-room .pcfms-body {
		margin-top: 10px;
		font-size: 14px;
		line-height: 1.7;
		color: var(--gray-700);
	}

	/* 클래스 소개 탭 끝 — 소개 화면으로 */
	body.pcf-on .pcfms-room .pcfms-amore {
		margin-top: 28px;
	}

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

	body.pcf-on .pcfms-room .pcfms-amore a:hover {
		color: var(--gray-900);
	}
}

/* ════ 5. 목록 둘 — 라이브 다시보기 · 멤버십 클래스(inc/pc-frame-membership.php 4절 · js/pcf-membership.js 4절) ════
   2026-10-23 운영자 「가 · 무료 강의 목록과 같은 짜임 + 검색란」(시안 claude.ai 아티팩트 HLTNxqJJ7xrymNikmWTLtU) → 「탭줄 오른쪽으로 합시다」(F8vPgwUb575TuSadSRp3yz ㄱ).
   부품 모양은 무료 강의 목록 것 그대로 — 한 줄 · 정렬 = css/pcf-lecture.css · 카드 · 격자 · 쪽 번호 = css/pcf-home.css · 구획 머리 = css/pcf-class.css(목록 칸에 .pcfl.pcfc 를 함께 단다) ·
   찾기 칸 = 공용 부품 css/pcf-ui.css .pcf-listq. 이 절은 그 밖만 — 옛 목록 숨김 · 첫 줄 위 8 · [hidden] · 맨 아래 한 줄 · 멤버십 클래스 왼쪽 칸 · 클래스 줄.
   멤버십 클래스만 같은 날 운영자 「이름도 길고 분류가 많아서 좌측 탭으로 예전 스타일로」 — 위 한 줄(분류 아홉 + 찾기 칸) 대신 왼쪽 칸(찾기 칸 + 분류 한 줄씩) →
   「클래스는 좌측 패널 두고, 1행을 가로로 길게 클래스 정보」 → 「다 · 회차 이름」 = 오른쪽은 한 줄에 클래스 하나(첫 방문자를 위한 추천 클래스만 카드 · [닫기]) */
@media (max-width: 1024px) {
	body.pcf-on .pcfms-l {
		display: none;
	}
}

@media (min-width: 1025px) {
	/* 옛 목록(.mlL — 왼쪽 거르기 칸 + 줄 목록)은 그대로 그리고 PC 폭에서 숨긴다(폰 · 태블릿 = 옛 목록) */
	body.pcf-on.pcfms-list #page .mlL[data-ll] {
		display: none;
	}

	/* 하위 메뉴 줄 아래 = 한 줄 — 무료 강의 전체 강의 · 클래스 탭과 같은 8(정본 13.5 「무료 강의 탭」 2 · .aih 틀 첫 내용 32 — css/pcf.css 의 예외) ·
	   2026-10-25 탭 줄 46 → 50(css/pcf-lecture.css 2절 — 찾기 칸 아래 여백) 에 맞춰 6(탭 글자 · 찾기 칸 자리는 그대로 · 줄 선만 2 내려간다) ·
	   멤버십 클래스는 한 줄이 없어(왼쪽 칸) 틀 그대로 32 */
	body.pcf-on.pcfms-list--live #page .aih-main {
		padding-top: 6px;
	}

	/* [hidden] — 카드 · 격자 · 쪽 번호는 부품 규칙(display: flex · grid)이 숨김 속성을 이긴다 */
	body.pcf-on #page .pcfms-l .pcfh-card[hidden],
	body.pcf-on #page .pcfms-l .pcfh-grid[hidden],
	body.pcf-on #page .pcfms-l .pcfh-pages[hidden],
	body.pcf-on #page .pcfms-l .pcfms-none[hidden],
	body.pcf-on #page .pcfms-l .pcfms-wide[hidden] {
		display: none;
	}

	/* 격자 — 한 줄 바로 아래 28(무료 강의와 같다) · 구획 안 = 구획 머리 아래 20(클래스 탭과 같다 — .pcfl 의 28 이 덮지 않게) */
	body.pcf-on #page .pcfms-l > .pcfl-bar + .pcfh-grid {
		margin-top: 28px;
	}

	body.pcf-on #page .pcfms-l .pcfc-grp > .pcfh-grid {
		margin-top: 20px;
	}

	/* 찾는 중 0 인 탭 흐리게 = 라이브 css/pcf-lecture.css 2절(:is(.pcfl, .pcfc) .pcfl-cat.is-zero) · 클래스 왼쪽 칸은 아래 · 맨 아래 한 줄 모양 = 공용 부품 css/pcf-ui.css .pcf-listwide */

	/* 「없어요」 줄(위아래 64)이 보이면 맨 아래 한 줄은 그 바로 아래에 */
	body.pcf-on #page .pcfms-l .pcfms-none:not([hidden]) ~ .pcf-listwide {
		margin-top: 0;
	}

	/* ── 멤버십 클래스 = 왼쪽 칸 + 오른쪽 목록(2026-10-23 운영자 「멤버십 클래스만 — 좌측 탭으로 예전 스타일로」) ──
	   틀 = 정본 v4 13.2 「왼쪽 메뉴를 남길 땐 가운데 칸 안에서」(마이 대시보드와 같다 — 따라 내려오는 칸은 붙는 메뉴 줄 아래 24) · 칸 240(7.7) + 사이 32 ·
	   오른쪽 격자 4열(카드 235 — 다른 화면 한 줄 다섯 239 와 거의 같은 크기) */
	body.pcf-on #page .pcfms-lt {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	body.pcf-on #page .pcfms-side {
		position: sticky;
		top: calc(var(--nav-height) + var(--pcf-ab-h) + 24px);
	}

	body.pcf-on #page .pcfms-side .pcf-listq {
		width: 100%;
	}

	/* 분류 한 줄씩 — 40 · 모서리 8 · 14/400(7.7 메뉴 칸) · 수 = 오른쪽 13 회색 · 마우스 올림 = 회색 100 면(7.7 — 지금 칸엔 안 건다) ·
	   지금 칸 = 회색 200 면 + 굵은 검정(정본 4.5 「같은 목록을 거르는 칩 · 탭」 = 흑백 — 옛 왼쪽 메뉴의 연한 초록 면은 다른 화면으로 가는 메뉴의 「지금 위치」 몫) */
	body.pcf-on #page .pcfms-cats {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-top: 16px;
	}

	/* ⚠️ .pcfms-l 까지 — css/pcf-home.css 단추 초기화(:where(.pcf-home, .pcfl, .pcfc) button:hover · :focus — 여백 0 · 모서리 0)가
	   한 단계 낮은 선택자를 마우스 올림 · 누른 뒤(포커스)에 이겨 글자가 칸 왼쪽에 붙었다(10/23 실측) */
	body.pcf-on #page .pcfms-l .pcfms-cat {
		display: flex;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		width: 100%;
		height: 40px;
		margin: 0;
		padding: 0 12px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--gray-700);
		font: inherit;
		font-size: 14px;
		line-height: 1.4;
		text-align: left;
		cursor: pointer;
		transition: background-color var(--transition-fast);
	}

	body.pcf-on #page .pcfms-cat b {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		font-weight: 400;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.pcf-on #page .pcfms-cat small {
		flex: none;
		color: var(--gray-400);
		font-size: 13px;
		font-variant-numeric: tabular-nums;
	}

	body.pcf-on #page .pcfms-cat:not(.is-on):hover {
		background: var(--gray-100);
	}

	body.pcf-on #page .pcfms-cat.is-on {
		background: var(--gray-200);
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfms-cat.is-on b {
		font-weight: 500;
	}

	body.pcf-on #page .pcfms-cat.is-on small {
		color: var(--gray-600);
	}

	body.pcf-on #page .pcfms-cat:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: -2px;
	}

	/* 찾는 중 0 인 분류 — 흐리게(라이브 위 한 줄 탭과 같은 뜻) */
	body.pcf-on #page .pcfms-cat.is-zero {
		color: var(--gray-400);
	}

	body.pcf-on #page .pcfms-cat.is-zero small {
		color: var(--gray-300);
	}

	/* 주제별 모음 앞 가는 선 — 분류가 아니라 여러 클래스에서 고른 묶음 */
	body.pcf-on #page .pcfms-cats-sep {
		height: 1px;
		margin: 7px 12px;
		background: var(--gray-200);
	}

	/* 오른쪽 — 첫 방문자를 위한 추천 클래스(10/23 운영자 — 그 전 「처음이라면 여기부터」) = 카드 한 줄 4열(관리 화면 차례 앞 넷 — 옛 목록도 한 줄에 드는 만큼만) · 머리 오른쪽 [닫기] ·
	   분류 · 찾기 머리 = 이름 22/700 + 수 15 회색(옛 목록 「전체 클래스 26개」 자리 · 구획 머리와 같은 .pcfc-ghd) */
	body.pcf-on #page .pcfms-start .pcfh-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.pcf-on #page .pcfms-start .pcfh-card:nth-child(n+5) {
		display: none;
	}

	body.pcf-on #page .pcfms-l .pcfms-mh[hidden] {
		display: none;
	}

	body.pcf-on #page .pcfms-mh small {
		margin-left: 8px;
		color: var(--gray-500);
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0;
	}

	/* [닫기] — 회색 글자 + ×(화면 링크와 같은 회색 — 정본 4.5) · 선택자에 .pcfms-l 까지(css/pcf-home.css 단추 초기화가 :hover · :focus 에 이기지 않게) */
	body.pcf-on #page .pcfms-l .pcfms-rec-x {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 4px;
		height: 30px;
		margin: 0 0 2px;
		padding: 0 8px 0 6px;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: var(--gray-500);
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		cursor: pointer;
		transition: background-color var(--transition-fast), color var(--transition-fast);
	}

	body.pcf-on #page .pcfms-l .pcfms-rec-x:hover {
		background: var(--gray-100);
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfms-l .pcfms-rec-x:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	/* 닫았으면(쿠키 oppadu_pcfms_rec=0 — inc/pc-frame-membership.php oppadu_pcfms_rec_keep 가 그리기 전에 <html> 에 표시) 구획째 숨김 · 전체 클래스가 맨 위로
	   (아래 줄 = .pcfc .pcfc-grp:not([hidden]) + .pcfc-grp 의 72 를 이기려고 클래스를 하나 더) */
	html.pcfms-rec-off body.pcf-on #page .pcfms-l .pcfms-start {
		display: none;
	}

	html.pcfms-rec-off body.pcf-on #page .pcfms-l .pcfc-grp.pcfms-start + .pcfc-grp {
		margin-top: 0;
	}

	/* 클래스 한 줄(10/23 운영자 「1행을 가로로 길게 클래스 정보」 → 「다 · 회차 이름」 — 시안 claude.ai 아티팩트 8UgFGKxb5Mk8q2FMgz3Z9U) —
	   그림 240 + 이름 17/700 · 한 줄 소개 14 · 회차 이름 두 칸 13.5 · 곁 정보 13 회색 · 줄 사이 가는 선 · 마우스 올림 = 회색 50 면(정본 7.14 그릇 없는 글 목록과 같은 결 —
	   면은 줄 밖 16 까지 · 그림 · 글 시작선은 구획 머리와 같다). ⚠️ 정본 13.5 「그림이 있는 목록은 카드 격자」와 다르다 — 운영자가 견줘 보고 고름(정본 13.5 멤버십 목록 둘) */
	body.pcf-on #page .pcfms-l .pcfms-rows {
		display: flex;
		flex-direction: column;
		margin: 4px -16px 0;
	}

	body.pcf-on #page .pcfms-l .pcfms-row {
		position: relative;
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 0 24px;
		align-items: start;
		padding: 16px;
		border-radius: 8px;
		color: inherit;
		text-decoration: none;
		transition: background-color var(--transition-fast);
	}

	body.pcf-on #page .pcfms-l .pcfms-rows[hidden],
	body.pcf-on #page .pcfms-l .pcfms-row[hidden] {
		display: none;
	}

	body.pcf-on #page .pcfms-l .pcfms-row + .pcfms-row::before {
		content: "";
		position: absolute;
		top: 0;
		right: 16px;
		left: 16px;
		height: 1px;
		background: var(--gray-200);
	}

	body.pcf-on #page .pcfms-l .pcfms-row:hover {
		background: var(--gray-50);
	}

	body.pcf-on #page .pcfms-l .pcfms-row:hover::before,
	body.pcf-on #page .pcfms-l .pcfms-row:hover + .pcfms-row::before {
		opacity: 0;
	}

	body.pcf-on #page .pcfms-l .pcfms-row:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 0;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-b {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding-top: 1px;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-t {
		overflow: hidden;
		color: var(--gray-900);
		font-size: 17px;
		font-weight: 600;
		line-height: 25px;
		letter-spacing: -0.01em;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-sub {
		margin-top: 4px;
		overflow: hidden;
		color: var(--gray-600);
		font-size: 14px;
		line-height: 21px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 회차 이름 — 두 칸 · 넷까지(더 있으면 셋 + 「외 N개 회차」) · 앞 표시(1회 · 1강 · 보너스 — 관리 화면 회차 이름표 그대로)는 회색 굵게 */
	body.pcf-on #page .pcfms-l .pcfms-row-ses {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3px 24px;
		margin-top: 10px;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-s {
		overflow: hidden;
		color: var(--gray-700);
		font-size: 13.5px;
		line-height: 21px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-s b {
		margin-right: 7px;
		color: var(--gray-500);
		font-weight: 500;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-more {
		color: var(--gray-500);
	}

	/* 곁 정보 한 줄 — 13 회색 · 사이 가운뎃점 · Premium = 카드와 같은 보석 + 글자 */
	body.pcf-on #page .pcfms-l .pcfms-row-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 10px;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 20px;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-meta > span + span::before {
		content: "·";
		margin: 0 6px;
		color: var(--gray-400);
		font-weight: 400;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-pm {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		color: var(--gray-700);
		font-size: 12.5px;
		font-weight: 500;
	}

	body.pcf-on #page .pcfms-l .pcfms-row-pm svg {
		color: var(--gray-500);
	}
}

/* 좁은 PC 폭(1,025~1,199) — 추천 클래스 카드는 한 줄 셋(넷이면 카드 175 안팎으로 작아진다) · 클래스 줄 그림 200 */
@media (min-width: 1025px) and (max-width: 1199px) {
	body.pcf-on #page .pcfms-start .pcfh-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.pcf-on #page .pcfms-start .pcfh-card:nth-child(n+4) {
		display: none;
	}

	body.pcf-on #page .pcfms-l .pcfms-row {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 0 20px;
	}
}

/* ════ 6. 멤버십 찾기 결과(/membership/?q= — inc/pc-frame-membership.php 6절 · js/pcf-membership.js 6절) ════
   2026-10-23 운영자 「가 · 탭 줄 + 찾기 칸」(시안 claude.ai 아티팩트 WswgcWM4Wwsx23kofbHBMR) — 제목 + 한 줄 → 탭 줄(묶음 · 찾은 수) + 오른쪽 찾기 칸 → 묶음(전체 = 앞 몇 개 · 탭 = 전부).
   부품은 5절 목록 둘 · 무료 강의 목록 것 그대로(.pcfl-bar · .pcfh-card · .pcfms-row · .pcfc-ghd · .pcfh-pages · 찾기 칸 .pcf-listq) · 책 카드 = 옛 찾기 결과 .msh-ts-g(css/membership.css).
   이 절은 그 밖만 — 옛 결과 숨김 · 제목 · 사이 · 「N개 모두 보기 ›」 · 책 6열 · 「↳ 찾은 곳」 · [hidden] · 찾은 것이 없을 때. 폰 · 태블릿은 이 칸이 5절 첫 줄(.pcfms-l)로 숨고 옛 결과 그대로 */
@media (min-width: 1025px) {
	/* 옛 결과(.mshs — 두 칸 줄 목록 · 「오빠두 ·」 · 별점)는 그대로 그리고 PC 폭에서 숨긴다 */
	body.pcf-on.pcfms-search #page .mshs {
		display: none;
	}

	/* 제목 26/700 + 한 줄 15 · 탭 줄 위 20 · 첫 묶음 위 28(무료 강의 목록 한 줄 아래와 같다) — 시안 값 */
	body.pcf-on #page .pcfms-sq-hd h1 {
		margin: 0;
		color: var(--gray-900);
		font-size: 26px;
		font-weight: 600;
		line-height: 36px;
		letter-spacing: -0.02em;
	}

	body.pcf-on #page .pcfms-sq-hd p {
		margin: 4px 0 0;
		color: var(--gray-600);
		font-size: 15px;
		line-height: 22px;
	}

	/* 18 = 그 전 20 에서 탭 줄 46 → 50(10/25) 에 맞춰 2 줄임 — 탭 글자 자리는 그대로 */
	body.pcf-on #page .pcfms-sq .pcfl-bar {
		margin-top: 18px;
	}

	body.pcf-on #page .pcfms-sq-body {
		margin-top: 28px;
	}

	/* 묶음 사이 64 — 보이는 묶음끼리만(탭에선 하나만 보여 0) */
	body.pcf-on #page .pcfms-sg:not([hidden]) ~ .pcfms-sg {
		margin-top: 64px;
	}

	/* [hidden] — 구획 머리(flex) · 책 카드(flex — css/membership.css .msh .msh-ts-g)는 부품 규칙이 숨김 속성을 이긴다(라이브 카드 · 클래스 줄 · 쪽 번호는 5절) */
	body.pcf-on #page .pcfms-sq .pcfms-sg[hidden],
	body.pcf-on #page .pcfms-sq .pcfc-ghd[hidden],
	body.pcf-on #page .pcfms-sq .msh-ts-g[hidden] {
		display: none;
	}

	/* 구획 머리 = 이름 22/700 + 수 15 회색(5절 분류 머리 .pcfms-mh 와 같은 값) · 오른쪽 「N개 모두 보기 ›」 = 그 탭으로(화면 링크 — 회색 500 · 올림 900, 정본 4.5) */
	body.pcf-on #page .pcfms-sq .pcfc-h2 small {
		margin-left: 8px;
		color: var(--gray-500);
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0;
	}

	/* ⚠️ .pcfms-l 까지 — css/pcf-home.css 단추 초기화(:where(…) button:hover · :focus)가 마우스 올림 · 누른 뒤에 이기지 않게(5절 분류 칸과 같은 까닭) */
	body.pcf-on #page .pcfms-l .pcfms-sall {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 2px;
		margin: 0 0 4px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--gray-500);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 21px;
		cursor: pointer;
		transition: color var(--transition-fast);
	}

	body.pcf-on #page .pcfms-l .pcfms-sall:hover {
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfms-l .pcfms-sall:focus-visible {
		outline: var(--pcf-ui-focus);
		outline-offset: 2px;
	}

	/* 머리 아래 — 클래스 줄은 5절 그대로(4) · 라이브 격자 · 책 20 / 탭에서 머리가 숨으면 0(탭 줄 아래 28 만) */
	body.pcf-on #page .pcfms-sq .pcfc-ghd + .pcfh-grid,
	body.pcf-on #page .pcfms-sq .pcfc-ghd + .pcfms-sbooks {
		margin-top: 20px;
	}

	body.pcf-on #page .pcfms-sq .pcfc-ghd[hidden] + .pcfh-grid,
	body.pcf-on #page .pcfms-sq .pcfc-ghd[hidden] + .pcfms-sbooks,
	body.pcf-on #page .pcfms-sq .pcfc-ghd[hidden] + .pcfms-rows {
		margin-top: 0;
	}

	/* 쇼츠 보충 자료 = 옛 찾기 결과의 책 카드 한 줄 여섯(옛 .mshs-books 는 칸 180 자동) */
	body.pcf-on #page .pcfms-sbooks {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 24px 16px;
	}

	/* 「↳ 찾은 곳」 — 이름에 찾는 말이 다 들어 있지 않을 때만(클래스 = 회차 · 목차 · 배우는 것 / 라이브 = 목차) · 한 줄 · 넘치면 … */
	body.pcf-on #page .pcfms-hit {
		display: flex;
		align-items: center;
		gap: 5px;
		min-width: 0;
		margin-top: 8px;
		color: var(--gray-800);
		font-size: 13.5px;
		line-height: 20px;
	}

	body.pcf-on #page .pcfms-hit svg {
		flex: none;
		color: var(--gray-400);
	}

	body.pcf-on #page .pcfms-hit > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.pcf-on #page .pcfh-card .pcfms-hit {
		margin-top: 5px;
		font-size: 12.5px;
		line-height: 18px;
	}

	/* 찾은 것이 없을 때 — 탭 줄 아래 가운데(무료 강의 「강의가 없어요」 .pcfl-none 의 위아래 64 와 같은 결) */
	body.pcf-on #page .pcfms-sq-none {
		padding: 64px 0;
		text-align: center;
	}

	body.pcf-on #page .pcfms-sq-none b {
		display: block;
		color: var(--gray-900);
		font-size: 17px;
		font-weight: 600;
		line-height: 25px;
	}

	body.pcf-on #page .pcfms-sq-none p {
		margin: 6px 0 0;
		color: var(--gray-500);
		font-size: 14px;
		line-height: 21px;
	}
}

/* ════ 7. 멤버십 홈(/membership/ — inc/pc-frame-membership.php 7절 · js/pcf-membership.js 7절) ════
   2026-10-23 운영자 「가 · 딱 맞게」 · 「바로가기 줄 걷기」(시안 claude.ai 아티팩트 QyaUwWs7LAUmhEvUuVJzn6) — 마크업은 옛 홈 그대로(css/membership.css 「홈」 절).
   선반 셋(새로 나온 클래스 304 · 많이 본 클래스 368 · 라이브 다시보기 272)을 같은 4열로 칸에 딱 맞춘다(1,260 = 303 × 4 + 사이 16 × 3 — 잘린 카드 없음 · 정본 v4 13.2 「카드 줄」) ·
   맨 아래 「바로 가기」 줄은 숨긴다(단추마다 머리 띠 · 하위 메뉴 · 선반 「전체 보기 ›」에 같은 길이 있다) · 카드 곁 줄의 별점 · 난이도 조각(.pcfms-pcoff — PHP 7절이 감쌈)도 숨긴다.
   폰 · 태블릿은 옛 홈 그대로 */
@media (min-width: 1025px) {
	body.pcf-on.pcfms-home .msh .msh-ap-sc > :is(.msh-ap-big, .msh-ap-wide, .msh-ap-lv) {
		flex: 0 0 calc((100% - 48px) / 4);
	}

	body.pcf-on.pcfms-home .msh .msh-ap-quick,
	body.pcf-on .pcfms-pcoff {
		display: none;
	}
}

/* ════ 8. 멤버십 혜택(/membership/?view=benefits — inc/pc-frame-membership.php 7절 oppadu_pcfms_ben) ════
   2026-10-23 운영자 「맞춤」 · 「[인기]만 뺌」(시안 claude.ai 아티팩트 9A8G88KBHLwpjVsdM4Tk7g 가) — 가운데 정렬 짜임 그대로(css/membership.css 「멤버십 혜택」 절).
   그림 카드 · 「결제는 유튜브에서」 띠 · 비교표를 칸 1,260 에 맞춘다(옛 1,080 가운데 — 넓은 화면에서 머리글 · 하위 메뉴보다 90 안쪽이었고, 표 아래 한 줄만 칸 왼쪽에 붙어 어긋났다 → 이제 모두 같은 선).
   비교표 Plus 「인기」 꼬리표는 7절 .pcfms-pcoff 로 숨는다. 폰 · 태블릿은 지금 그대로 */
@media (min-width: 1025px) {
	body.pcf-on.pcfms-ben .msh .msh-bf :is(.msh-bf-gets, .msh-bf-ease, .msh-bf-tbl) {
		max-width: none;
	}
}

/* ════ 9. 클래스 상세 띠 · 재생 화면 「클래스 소개」 칸의 별점 줄(inc/pc-frame-membership.php 8절 oppadu_pcfms_band_meta) ════
   2026-10-23 운영자 「가 둘다 뺌」(시안 claude.ai 아티팩트 CTxPcx6P3vLisSCeZEHreL) — 옛 줄(별점 첫째 자리 · 「아직 평가 없음」 · 「열람 N번」 · 「만든 사람」)은 7절 .pcfms-pcoff 로 숨고,
   PC 판(별점 실제 평균 둘째 자리 · 평가가 없으면 줄째 없음)이 든 hidden 껍데기를 PC 폭에서만 꺼낸다 — display: contents 라 띠 줄 간격은 옛 .mlC-r · .mlR-ameta 여백 그대로.
   폰 · 태블릿은 껍데기가 hidden 그대로라 옛 줄만 보인다 */
@media (min-width: 1025px) {
	body.pcf-on .pcfms-pcon[hidden] {
		display: contents;
	}
}

/* ── 10. 멤버십 홈 — 멤버는 큰 띠 없이 · 하위 메뉴 줄 오른쪽 끝 연동 상태 한 줄(2026-10-24 운영자 「멤버는 띠 없이 · 아닌 분은 큰 띠」 — 고르기 판 8판 6 · 7 「다」)
   줄 = inc/pc-frame-membership.php 10절(연동된 Plus · Premium 만 · 머리글 하위 메뉴 줄 끝 훅) · 띠 숨김 = 띠 안에 「✓ … 멤버로 연동돼 있어요」 줄(.msh-ap-hl.is-ok)이 있을 때만 ·
   연동 안내 창(#ms-connect)은 js 10절이 멤버십 칸 맨 위로 옮긴다(띠와 같이 숨지 않게) — 이 줄 바로 아래 오른쪽. 폰 · 태블릿(~1024)은 옛 화면(줄 숨김 · 띠 그대로) ── */
@media (max-width: 1024px) {
	body.pcf-on .pcf-sub .pcfms-mst {
		display: none;
	}
}
@media (min-width: 1025px) {
	body.pcf-on .pcf-sub .pcfms-mst {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 6px;
		margin-left: auto;
		color: var(--gray-600);
		font-size: 13px;
		white-space: nowrap;
	}
	body.pcf-on .pcf-sub .pcfms-mst > svg {
		flex: none;
		width: 15px;
		height: 15px;
		color: var(--color-success);
	}
	body.pcf-on .pcf-sub .pcfms-mst b {
		color: var(--gray-900);
		font-weight: 500;
	}
	body.pcf-on .pcf-sub .pcfms-mst i {
		margin: 0 2px;
		color: var(--gray-300);
		font-style: normal;
	}
	body.pcf-on .pcf-sub .pcfms-mst .pcfms-mst-a {
		display: inline;
		height: auto;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		color: var(--gray-500);
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
	}
	body.pcf-on .pcf-sub .pcfms-mst .pcfms-mst-a:hover,
	body.pcf-on .pcf-sub .pcfms-mst .pcfms-mst-a[aria-expanded="true"] {
		color: var(--gray-900);
	}
	body.pcf-on .pcf-sub .pcfms-mst .pcfms-mst-a:focus-visible {
		border-radius: 4px;
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}
	body.pcf-on .msh .msh-hd:has(.msh-ap-hl.is-ok) {
		display: none;
	}
	body.pcf-on .msh .msh-hd:has(.msh-ap-hl.is-ok) + .msh-ap-shelf {
		margin-top: 8px;
	}
	body.pcf-on .msh .aih-main:has(> #ms-connect.pcfms-mst-info) {
		position: relative;
	}
	body.pcf-on .msh .aih-main > #ms-connect.pcfms-mst-info {
		position: absolute;
		top: 8px;
		right: 0;
		left: auto;
		z-index: 6;
		width: 380px;
		transform: none;
	}
}

/* ════ 11. 정규 클래스 강의실 질문 칸(질문 탭 — 옛 댓글 플러그인 칸 #oppadu-comments 을 옮겨 온 것 · inc/pc-frame-membership.php 3절 · js 3절 「질문 칸 말」)
   2026-10-25 운영자 「클래스 화면 질문 입력창이 기존 스타일 그대로 사용해서 어색하네요. 개선합니다」 → 커뮤니티 댓글 칸(10/24 「가 회색면」 — css/pcf-community.css 6절)과 같은 꼴:
   흰 판 · 테두리 · 12 · 초록 2px 머리 밑줄 · 말풍선 아이콘을 걷고 회색 100 면 입력칸(8 · 쓰는 동안 흰 면 + 초록 2px 한 겹) · 단추 = 7.3 값 · 칸 위 = 탭 줄 아래 40 · 플러그인 마크업 · 동작은 그대로 ════ */
@media (min-width: 1025px) {
	/* 칸 위 = 개요 칸과 같은 자리(탭 줄 아래 32) · 옛 플러그인 위아래 48 은 뺀다 */
	body.pcf-on .pcfms-qa2 .re-panel {
		padding: 0;
	}

	body.pcf-on .pcfms-qa2 #oppadu-comments {
		margin: 0;
	}

	/* 머리 줄 = 「질문 N」 18/600 + 개수 회색 · 오른쪽 별점 · 초록 밑줄 · 아이콘 걷음(초록 = 단추 · 지금 위치 · 본문 링크만 — 정본 4.5) */
	body.pcf-on .pcfms-qa2 .oc-summary {
		margin: 0 0 16px;
		padding: 0;
		border-bottom: 0;
	}

	body.pcf-on .pcfms-qa2 .oc-summary-title {
		gap: 0;
		color: var(--gray-900);
		font-size: 18px;
		font-weight: 600;
		letter-spacing: -0.02em;
	}

	body.pcf-on .pcfms-qa2 .oc-summary-title > svg {
		display: none;
	}

	body.pcf-on .pcfms-qa2 .oc-count {
		margin-left: 6px;
		color: var(--gray-500);
		font-weight: 400;
	}

	body.pcf-on .pcfms-qa2 .oc-rating-avg {
		color: var(--gray-900);
		font-size: 14px;
		font-weight: 600;
	}

	body.pcf-on .pcfms-qa2 .oc-rating-count {
		color: var(--gray-500);
		font-size: 13px;
	}

	/* 쓰기 칸 — 판(흰 면 · 테두리 · 12)을 걷고 회색 면 입력칸 하나(커뮤니티 댓글 칸 「가 회색면」과 같은 꼴 — css/pcf-community.css 6절) */
	body.pcf-on .pcfms-qa2 .oc-form-wrap,
	body.pcf-on .pcfms-qa2 .oc-reply-form .oc-form,
	body.pcf-on .pcfms-qa2 .oc-edit-form .oc-form {
		margin: 0 0 8px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	body.pcf-on .pcfms-qa2 .oc-reply-form .oc-form,
	body.pcf-on .pcfms-qa2 .oc-edit-form .oc-form {
		margin: 12px 0 0;
	}

	/* 평점 줄 = 칸 이름(13/400 회색 — 7.14 .pcf-label) + 별 */
	body.pcf-on .pcfms-qa2 .oc-form-rating {
		gap: 10px;
		margin: 0 0 10px;
	}

	body.pcf-on .pcfms-qa2 .oc-form-rating label {
		color: var(--gray-500);
		font-size: 13px;
		font-weight: 400;
	}

	/* 입력칸 = 회색 100 면 · 8 · 테두리 투명 1 · 쓰는 동안 흰 면 + 초록 2px 한 겹 */
	body.pcf-on .pcfms-qa2 .oc-editor {
		border: 1px solid transparent;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on .pcfms-qa2 .oc-editor:focus-within {
		background: var(--surface-white);
		outline: 2px solid var(--primary);
		outline-offset: -2px;
	}

	body.pcf-on .pcfms-qa2 .oc-editor-area {
		min-height: 104px;
		padding: 14px 16px;
		color: var(--gray-900);
		font-size: 15px;
		line-height: 1.7;
	}

	body.pcf-on .pcfms-qa2 .oc-editor-area:empty:before {
		color: var(--gray-500);
	}

	/* 단추 줄 — 파일 첨부 = 회색 면 보조(36 · 6 · 마우스 올림 회색 200 — 옛 초록 테두리 없음) · 올리기 = 채운 단추(7.3 — 42 · 6 · 14/500) · 취소 = 회색 면 보조 42 */
	body.pcf-on .pcfms-qa2 .oc-form-actions {
		margin-top: 10px;
	}

	body.pcf-on .pcfms-qa2 .oc-btn-file {
		gap: 6px;
		height: 36px;
		padding: 0 12px;
		border: 0;
		border-radius: 6px;
		background: var(--gray-100);
		color: var(--gray-700);
		font-size: 14px;
		font-weight: 500;
		box-sizing: border-box;
	}

	body.pcf-on .pcfms-qa2 .oc-btn-file:hover {
		background: var(--gray-200);
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-qa2 .oc-btn-submit,
	body.pcf-on .pcfms-qa2 .oc-btn-cancel {
		min-height: 42px;
		margin: 0;
		padding: 0 22px;
		border: 0;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
	}

	body.pcf-on .pcfms-qa2 .oc-btn-cancel {
		background: var(--gray-100);
		color: var(--gray-900);
	}

	body.pcf-on .pcfms-qa2 .oc-btn-cancel:hover {
		background: var(--gray-200);
	}

	body.pcf-on .pcfms-qa2 .oc-btn-submit:active,
	body.pcf-on .pcfms-qa2 .oc-btn-cancel:active {
		transform: translateY(1px);
	}

	/* 손님 = 회색 면 입력칸 모양의 한 줄(커뮤니티 손님 줄과 같다) */
	body.pcf-on .pcfms-qa2 .oc-login-notice {
		margin: 0 0 8px;
		padding: 14px 16px;
		border: 0;
		border-radius: 8px;
		background: var(--gray-100);
		color: var(--gray-500);
		font-size: 15px;
		line-height: 1.6;
		text-align: left;
	}

	body.pcf-on .pcfms-qa2 .oc-login-notice a {
		color: var(--gray-900);
		font-weight: 500;
	}

	/* 더 보기 = 회색 면 보조 단추(테두리 없음) */
	body.pcf-on .pcfms-qa2 .oc-btn-load-more {
		min-height: 42px;
		padding: 0 22px;
		border: 0;
		border-radius: 6px;
		background: var(--gray-100);
		color: var(--gray-900);
		font-size: 14px;
		font-weight: 500;
	}

	body.pcf-on .pcfms-qa2 .oc-btn-load-more:hover {
		background: var(--gray-200);
	}
}

/* ── 12. 멤버십 홈 — 큰 띠 오른쪽 「최근 가입한 멤버」 카드(inc/pc-frame-membership.php 12절 · js 12절)
   2026-10-26 운영자 「다, 목록카드로 합시다 · 단어는 최근 가입한 멤버」(시안 claude.ai 아티팩트 BXnV568DHhQd1Mi9gyLqfA 「다」 — GoFundMe 모금 화면 오른쪽 카드) — 시안 값 그대로:
   띠(검정 · 교재 그림 그대로) 위 오른쪽 흰 판 340 · 위아래 36 · 오른쪽 40 · 안쪽 20 · 모서리 16 · 그림자 / 제목 17/700 · 한 줄 13 회색 500 /
   줄 52 = 얼굴 36(사진이 없으면 첫 글자 — 커뮤니티 얼굴 색) · 닉네임 14/600 · 「Plus · 4시간 전」 13 회색 500 / 목록 위 14 · 아래 34 흐려짐.
   .claude/rules/css.md 예외 줄 셋(카드 16 · 그림자 / 위아래 흐려짐 / 계속 올라가는 움직임). 폰 · 태블릿(~1024)은 카드 없음 ── */
@media (max-width: 1024px) {
	body.pcf-on .msh-hd .pcfms-nm {
		display: none;
	}
}
@media (min-width: 1025px) {
	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm {
		position: absolute;
		top: 36px;
		right: 40px;
		bottom: 36px;
		z-index: 2;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 340px;
		padding: 20px 20px 0;
		border-radius: 16px;
		background: var(--surface-white);
		box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
		color: var(--gray-900);
		text-align: left;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-t {
		margin: 0;
		color: var(--gray-900);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: normal;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-s {
		margin: 4px 0 0;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 1.5;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-vp {
		position: relative;
		flex: 1 1 auto;
		min-height: 0;
		margin-top: 10px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 34px), transparent);
		mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 34px), transparent);
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-tr {
		will-change: transform;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-row {
		display: flex;
		align-items: center;
		gap: 12px;
		height: 52px;
		margin: 0;
		padding: 0;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-av {
		position: relative;
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		overflow: hidden;
		border-radius: 50%;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-av img {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-rt {
		min-width: 0;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-rt b {
		display: block;
		overflow: hidden;
		color: var(--gray-900);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body.pcf-on.pcfms-home .msh .msh-hd .pcfms-nm-rt > span {
		display: block;
		margin-top: 2px;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 1.4;
	}
}