/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/**
 * PC 새 틀(미리 보기) — 메인 홈 PC 화면 · 2026-10-19
 * 운영자 「덜 딱딱하게」 2차 「패캠형이 좋습니다」(첫 화면 배너) · 3차 「인프런 형이 좋겠습니다」(배너 아래 모양) · 4차 구획 차례(운영자가 직접 적음)
 *   = 첫 화면 → 최근 영상 → 클래스(정규 + 멤버십 한 줄) → 커뮤니티 → 멤버십 강의(라이브 다시보기) → 1분 쇼츠 → 전체 강의
 *   광고 줄(.oa-mxband)은 뺐다(같은 날 운영자 「홈페이지에서 광고 섹션 뺍시다」) — PC 폭에서만 숨긴다(반응형 광고라 숨은 칸은 구글이 요청하지 않는다 · 폰은 옛 홈 그대로라 남는다)
 *   10/21 첫 화면 배너 슬라이더 → 「첫 화면 칸」(같은 칸 안에서 처음이라면 여기부터 · 토요일 라이브 · 팝업 배너 소식이 7초마다 바뀜 — 운영자 「광고 느낌」 → 3차 「이렇게 진행합시다」 ·
 *       시안 claude.ai 아티팩트 JTTRnueVsjvZYsP5ggc5HM) · 길잡이 상자는 그 첫 칸 「처음이라면 여기부터」로 옮겨 걷었다
 *   10/25 첫 화면 칸 → 첫 줄 「처음 시작하기」 가로 카드(운영자 「COURSERA 느낌이 좋네요」 · 고르기 판 claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa 12판 가1 · 2절)
 * 시안 claude.ai 아티팩트 6BKKca3aKvStAgHeYiKKFP 판 3(시안 사진의 값 — 칸 1,260 · 제목 22/700 · 설명 14 · 알약 36 · 카드 그림 16:9)
 * 마크업 inc/pc-frame-home.php · 움직임 js/pcf-home.js · 정본 v4 13.4 허브 홈 · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만)
 * 「정본과 다른 점」(시안 카드에 적어 보이고 고름) = .claude/rules/css.md 예외 줄:
 *   첫 줄 카드 모서리 12 · 테두리 카드 · 줄 양 끝 흰 원 40 · 알약 탭·단추 · 둥근 넘김 단추 · 알약 탭 검은 채움
 *   (배너 넘김 원 · 쪽수 알약 · 5초 밀기 · 길잡이 상자 그라데이션 테두리는 10/21 · 첫 화면 칸 모서리 20 · 자동으로 바뀜 · 탭 밑줄 차오름은 10/25 걷었다)
 *   회색·모서리(인프런 회색 #212529·#868E96 · 모서리 4·6)는 정본 값(무채 사다리 · 그림 8 · 꼬리표 6)으로 옮겼다
 * 2026-10-20 무료 강의 탭 목록(.pcfl — inc/pc-frame-lecture.php)도 같은 카드·격자·쪽 번호·안내 칸을 쓴다 → 그 규칙과 링크·단추 초기화는 .pcfl 까지 건다.
 *   부품 규칙 = :is(.pcf-home, .pcfl)(특이도 그대로 — 홈 계산값 5,180개 전후 같음) · 초기화 = :where(.pcf-home, .pcfl)(한 단 낮춤 —
 *   :hover·:focus 판이 부품 규칙을 이겨 마우스를 올리면 쪽 번호·넘김 원의 테두리와 알약 탭의 테두리·안쪽 여백이 지워지던 것을 고침)
 * 같은 날 무료 강의 탭 「클래스」(.pcfc — inc/pc-frame-class.php · 무료 정규 클래스 + 멤버십 클래스 카드 격자)도 같은 카드 · 격자 · 「…보기 ›」 · 별점을 쓴다
 *   → 카드 · 격자 규칙 = :is(.pcf-home, .pcfl, .pcfc) · 초기화 = :where(.pcf-home, .pcfl, .pcfc) · 「…보기 ›」 · 별점 = :is(.pcf-home, .pcfc)(특이도 그대로)
 *   (그 탭 1차 C 판의 챕터 카드 줄 · 넘김 단추도 :is(.pcf-home, .pcfc) 였다 — 2차 「나」 판에서 줄이 없어져 줄 · 넘김 규칙은 .pcf-home 으로 되돌렸다)
 */

/* 폰·태블릿(~1024) — 옛 홈(모바일 앱 틀) 그대로 */
@media (max-width: 1024px) {
	body.pcf-on .pcf-home {
		display: none;
	}
}

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 구획은 모두 숨긴다(광고 줄 .oa-mxband 도 · 라이브 방송 히어로 .mv3-livehero 도 — 방송은 첫 줄 맨 앞 라이브 카드 · 10/21 첫 화면 칸 → 10/25 첫 줄) · 차례 = order ════ */
	body.pcf-on #page .mv3 {
		display: flex;
		flex-direction: column;
	}

	body.pcf-on #page .mv3 > :not(.pcf-home) {
		display: none;
	}

	body.pcf-on #page .pcf-home {
		display: contents;
	}

	body.pcf-on #page .pcf-home .pcfh-s-start { order: 1; }
	body.pcf-on #page .pcf-home .pcfh-s-recent { order: 2; }
	body.pcf-on #page .pcf-home .pcfh-s-class { order: 3; }
	body.pcf-on #page .pcf-home .pcfh-s-comm { order: 5; }
	body.pcf-on #page .pcf-home .pcfh-s-live { order: 6; }
	body.pcf-on #page .pcf-home .pcfh-s-shorts { order: 7; }
	body.pcf-on #page .pcf-home .pcfh-s-all { order: 8; padding-bottom: 120px; }

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

	body.pcf-on #page :where(.pcf-home, .pcfl, .pcfc) button,
	body.pcf-on #page :where(.pcf-home, .pcfl, .pcfc) button:hover,
	body.pcf-on #page :where(.pcf-home, .pcfl, .pcfc) 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 :where(.pcf-home, .pcfl, .pcfc) svg {
		flex: none;
	}

	/* ════ 2. 첫 줄 「처음 시작하기」 — 가로 카드 한 줄(2026-10-25 운영자 「COURSERA 느낌이 좋네요」 · 고르기 판 claude.ai 아티팩트 JYMqawQB9zEVUW42W9W3Fa 12판 가1)
	   카드 = Coursera 「최근 본 강좌」: 흰 면 · 테두리 1 회색 200 · 모서리 12(예외 줄) · 안쪽 8 · 왼쪽 그림 16:9 185 × 102(모서리 8) · 오른쪽 곁 이름 13 · 제목 15/500 두 줄 · 아래 곁 줄 13
	   한 화면 3장(409 × 120) · 넘치면 줄 양 끝 흰 원 40 ‹ ›(js 1절 — 13.2 「카드 줄」 넘김과 같은 모양) · 소식 포스터(정사각)는 위쪽 제목부터 · 처음이라면 카드는 길 셋 줄
	   (10/21~25 의 회색 첫 화면 칸 · 3초마다 바뀜 · 탭 밑줄 차오름은 걷었다) ════ */
	body.pcf-on #page .pcf-home .pcfh-sec.pcfh-s-start { /* 3절 구획 공통(위 64)보다 앞에 있어 한 단 높인다 */
		padding-top: 32px;
	}

	body.pcf-on #page .pcf-home .pcfh-st-wrap {
		position: relative;
	}

	body.pcf-on #page .pcf-home .pcfh-st-c {
		display: flex;
		gap: 16px;
		min-width: 0;
		height: 120px;
		padding: 8px;
		border: 1px solid var(--gray-200);
		border-radius: 12px;
		background: var(--surface-white);
		color: var(--gray-900);
		box-sizing: border-box;
	}

	body.pcf-on #page .pcf-home a.pcfh-st-c:hover,
	body.pcf-on #page .pcf-home .pcfh-st-c--p:hover {
		border-color: var(--gray-300);
	}

	body.pcf-on #page .pcf-home .pcfh-st-th {
		display: block;
		flex: none;
		width: 185px;
		height: 102px;
		overflow: hidden;
		border-radius: 8px;
		background: var(--gray-100);
	}

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

	body.pcf-on #page .pcf-home .pcfh-st-th img.is-poster {
		object-position: 50% 0;
	}

	/* 그림 영역 — 관리 화면(배너 관리 › 소식 배너)에서 네모를 끌고 확대해 고른 곳만 보인다(2026-10-26 운영자 「정사각형 사진 중 어느 영역을 보여줄 지 선택」 · inc/pc-frame-home.php oppadu_pcfh_focus_style)
	   --a = 그림 가로 ÷ 세로 · --x · --y = 보이는 네모 가운데(그림에 대한 비율) · --z = 확대 · --c = 칸 185 ÷ 102
	   --w = 그림 폭 ÷ 칸 폭(칸보다 납작한 그림도 칸 높이를 채우게) · --h = 그림 높이 ÷ 칸 높이 · 가장자리 밖이 보이지 않게 clamp
	   ⚠️ 관리 화면 미리 보기(plugins/oppadu-management/modules/top-banner/assets/css/admin.css .opb-fc · js 의 네모 크기)와 같은 공식 — 고치면 셋을 같이 */
	body.pcf-on #page .pcf-home .pcfh-st-th.pcfh-fc {
		position: relative;
		--c: 1.8137;
		--w: calc(var(--z, 1) * max(1, var(--a, 1) / var(--c)));
		--h: calc(var(--w) * var(--c) / var(--a, 1));
	}

	body.pcf-on #page .pcf-home .pcfh-st-th.pcfh-fc img {
		position: absolute;
		top: clamp(calc((1 - var(--h)) * 100%), calc((0.5 - var(--y, 0) * var(--h)) * 100%), 0%);
		left: clamp(calc((1 - var(--w)) * 100%), calc((0.5 - var(--x, 0.5) * var(--w)) * 100%), 0%);
		width: calc(var(--w) * 100%);
		max-width: none;
		height: auto;
	}

	body.pcf-on #page .pcf-home .pcfh-st-b {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: 4px 8px 2px 0;
	}

	body.pcf-on #page .pcf-home .pcfh-st-l {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		overflow: hidden;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 18px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 라이브 점 — 지금 위치처럼 초록 하나(옛 첫 화면 칸 라이브 머리말 점과 같은 값) */
	body.pcf-on #page .pcf-home .pcfh-st-dot {
		flex: none;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--brand-action);
	}

	body.pcf-on #page .pcf-home .pcfh-st-t {
		display: -webkit-box;
		margin-top: 4px;
		overflow: hidden;
		font-size: 15px;
		font-weight: 500;
		line-height: 21px;
		letter-spacing: -0.01em;
		word-break: keep-all;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	body.pcf-on #page .pcf-home .pcfh-st-m {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-top: auto;
		overflow: hidden;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 18px;
		white-space: nowrap;
	}

	body.pcf-on #page .pcf-home .pcfh-st-ls {
		display: flex;
		flex-direction: column;
		gap: 3px;
		margin-top: 6px;
	}

	body.pcf-on #page .pcf-home .pcfh-st-ls a {
		display: block;
		overflow: hidden;
		color: var(--gray-500);
		font-size: 13px;
		line-height: 19px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body.pcf-on #page .pcf-home .pcfh-st-ls a b {
		color: var(--gray-900);
		font-weight: 500;
	}

	body.pcf-on #page .pcf-home .pcfh-st-ls a:hover {
		color: var(--gray-900);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* 줄 양 끝 ‹ › — 흰 원 40(그림자 + 회색 200 한 겹) · 줄 가운데 높이 · 넘칠 때만(js 1절이 hidden 을 바꾼다) */
	body.pcf-on #page .pcf-home .pcfh-st-ar {
		position: absolute;
		top: 50%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		border-radius: 50%;
		background: var(--surface-white);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--gray-200);
		color: var(--gray-900);
	}

	body.pcf-on #page .pcf-home .pcfh-st-ar[data-dir="-1"] {
		left: -20px;
	}

	body.pcf-on #page .pcf-home .pcfh-st-ar[data-dir="1"] {
		right: -20px;
	}

	body.pcf-on #page .pcf-home .pcfh-st-ar[hidden] {
		display: none;
	}

	body.pcf-on #page .pcf-home .pcfh-s-start :focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	/* ════ 3. 구획 공통 — 칸 1,260 · 위 64(첫 줄 「처음 시작하기」만 32) · 머리(제목 22/700 · 설명 14 회색 · 오른쪽 끝 전체보기·넘김·정렬) ════ */
	body.pcf-on #page .pcf-home .pcfh-sec {
		position: relative;
		width: var(--pcf-w);
		margin: 0 auto;
		padding-top: 64px;
		color: var(--gray-900);
		box-sizing: border-box;
	}

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

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

	body.pcf-on #page .pcf-home .pcfh-t2 {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		color: var(--gray-900);
		font-size: 22px;
		font-weight: 600;
		line-height: 33px;
		letter-spacing: -0.02em;
	}

	body.pcf-on #page .pcf-home .pcfh-s-all .pcfh-t2 {
		font-size: 20px;
		line-height: 26px;
	}

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

	body.pcf-on #page :is(.pcf-home, .pcfc) .pcfh-more {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		color: var(--gray-700);
		font-size: 14px;
		font-weight: 500;
	}

	body.pcf-on #page :is(.pcf-home, .pcfc) .pcfh-more:hover {
		color: var(--gray-900);
	}

	/* 넘김 단추 — 머리 오른쪽 32 원(테두리) */
	body.pcf-on #page .pcf-home .pcfh-arr {
		display: flex;
		gap: 8px;
	}

	body.pcf-on #page .pcf-home .pcfh-ar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: 1px solid var(--gray-300);
		border-radius: 50%;
		color: var(--gray-500);
		box-sizing: border-box;
	}

	body.pcf-on #page .pcf-home .pcfh-ar:hover {
		color: var(--gray-900);
	}

	body.pcf-on #page .pcf-home .pcfh-ar[disabled] {
		opacity: 0.35;
		cursor: default;
	}

	/* 알약 탭(커뮤니티 — 선택 = 검정 채움) */
	body.pcf-on #page .pcf-home .pcfh-pills {
		display: flex;
		gap: 8px;
		margin-top: 16px;
	}

	body.pcf-on #page .pcf-home .pcfh-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 36px;
		padding: 0 14px;
		border: 1px solid var(--gray-300);
		border-radius: 9999px;
		background: var(--surface-white);
		color: var(--gray-700);
		font-size: 14px;
		font-weight: 500;
		box-sizing: border-box;
	}

	body.pcf-on #page .pcf-home .pcfh-pill.is-on {
		border-color: var(--gray-900);
		background: var(--gray-900);
		color: #fff;
	}

	/* ════ 4. 카드 줄 — 한 화면 N장 · 넘치면 옆으로 민다(스크롤 막대 숨김)
	   position: relative = 카드 안 화면 낭독용 글자(.screen-reader-text — 절대 위치)가 줄 밖 구획을 기준으로 잡혀 문서가 가로로 넘치지 않게(10/19 실측 +486) ════ */
	body.pcf-on #page .pcf-home .pcfh-row {
		position: relative;
		display: grid;
		grid-auto-columns: calc((100% - 4 * 16px) / 5);
		grid-auto-flow: column;
		gap: 16px;
		margin-top: 20px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	body.pcf-on #page .pcf-home .pcfh-row::-webkit-scrollbar {
		display: none;
	}

	body.pcf-on #page .pcf-home .pcfh-row > * {
		scroll-snap-align: start;
	}

	body.pcf-on #page .pcf-home .pcfh-row--4 {
		grid-auto-columns: calc((100% - 3 * 16px) / 4);
	}

	body.pcf-on #page .pcf-home .pcfh-row--6 {
		grid-auto-columns: calc((100% - 5 * 16px) / 6);
	}

	/* 카드 — 그림 16:9(8) · 제목 15/600 두 줄 · (멤버십 카드만 「자물쇠 멤버십」) · 조회·길이·올린 때 · New/새 클래스 꼬리표 */
	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-card {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-th {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-th img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-th--v {
		aspect-ratio: 9 / 16;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-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;
	}

	/* 돈이 드는 칸만 표시 — 멤버십 클래스 카드의 「자물쇠 멤버십」(inc/pc-frame-home.php oppadu_pcfh_paid)
	   2026-10-21 「오빠두 엑셀 ✓」(.pcfh-by · 확인 원 .pcfh-ok) · 「무료」/「위캔두 멤버십」 가격 줄(.pcfh-pr)을 걷었다 — 정본 v4 「먼저 읽기 — 부담 없이」 */
	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pm {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		margin-top: 4px;
		color: var(--gray-700);
		font-size: 12px;
		font-weight: 500;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pm svg {
		color: var(--gray-500);
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-st {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 8px;
		margin-top: 4px;
		color: var(--gray-500);
		font-size: 12px;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-st > span {
		display: inline-flex;
		align-items: center;
		gap: 3px;
	}

	/* 새 콘텐츠 꼬리표 — 그림 안 오른쪽 위(강의 「New」 · 멤버십 클래스 「새 클래스」 · 배지 12/600 · 6 · 초록 채움)
	   2026-10-23 운영자 「새 클래스 뱃지는 썸네일 안으로 — 우상단 또는 우하단」 → 오른쪽 위(오른쪽 아래는 영상 길이 자리) · 강의 「New」도 같은 자리(같은 홈 바로 위 줄).
	   그 전 = 곁 줄 아래 꼬리표 줄(.pcfh-tags · .pcfh-tag). 같은 날 멤버십 카드 별점(.pcfh-rate ★ 평균 (건수))은 「뺍니다」 — 정본 v4 「부담 없이」 ② */
	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-th-new {
		position: absolute;
		top: 8px;
		right: 8px;
		padding: 3px 8px;
		border-radius: 6px;
		background: var(--brand-action);
		color: var(--text-white);
		font-size: 12px;
		font-weight: 500;
		line-height: 18px;
	}

	/* ════ 5. 멤버십 강의(토요일 라이브 다시보기) — 그림 위 방송일 · [다시보기] 테두리 단추 ════ */
	body.pcf-on #page .pcf-home .pcfh-lv {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	body.pcf-on #page .pcf-home .pcfh-lv .pcfh-ct {
		min-height: 42px;
	}

	body.pcf-on #page .pcf-home .pcfh-date {
		position: absolute;
		top: 8px;
		left: 8px;
		padding: 3px 8px;
		border-radius: 6px;
		background: rgba(24, 24, 24, 0.9);
		color: #fff;
		font-size: 12px;
		font-weight: 600;
	}

	body.pcf-on #page .pcf-home .pcfh-btn2 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 36px;
		margin-top: 10px;
		border: 1px solid var(--gray-300);
		border-radius: 6px;
		color: var(--gray-700);
		font-size: 13px;
		font-weight: 500;
		box-sizing: border-box;
	}

	body.pcf-on #page .pcf-home .pcfh-btn2:hover {
		border-color: var(--gray-400);
		color: var(--gray-900);
	}

	/* (6. 길잡이 상자 — 10/21 첫 화면 칸 「처음이라면 여기부터」로 옮기며 걷었다 · 그 전 판 C:\tmp\pc-frame\hd2\bak-1021-hero\) */

	/* ════ 7. 커뮤니티 — 테두리 카드 넷(오른쪽 위 얼굴 48) ════ */
	body.pcf-on #page .pcf-home .pcfh-mc {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-height: 230px;
		padding: 20px;
		border: 1px solid var(--gray-200);
		border-radius: 8px;
		box-sizing: border-box;
	}

	body.pcf-on #page .pcf-home .pcfh-mc-top {
		display: flex;
		gap: 4px;
		min-height: 20px;
	}

	body.pcf-on #page .pcf-home .pcfh-mc-tag {
		padding: 2px 6px;
		border-radius: 6px;
		background: var(--gray-100);
		color: var(--gray-700);
		font-size: 11px;
		font-weight: 500;
		line-height: 16px;
	}

	body.pcf-on #page .pcf-home .pcfh-mc-tag--g {
		padding: 1px 5px;
		border: 1px solid var(--gray-300);
		background: none;
	}

	body.pcf-on #page .pcf-home .pcfh-mc-t {
		display: -webkit-box;
		padding-right: 56px;
		overflow: hidden;
		color: var(--gray-900);
		font-size: 16px;
		font-weight: 600;
		line-height: 23px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	body.pcf-on #page .pcf-home .pcfh-mc-by {
		color: var(--gray-500);
		font-size: 13px;
	}

	body.pcf-on #page .pcf-home .pcfh-mc-x {
		display: -webkit-box;
		overflow: hidden;
		color: var(--gray-700);
		font-size: 13px;
		line-height: 20px;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	body.pcf-on #page .pcf-home .pcfh-mc-av {
		position: absolute;
		top: 20px;
		right: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		overflow: hidden;
		border-radius: 50%;
		background: var(--gray-200);
		color: var(--gray-700);
		font-size: 18px;
		font-weight: 600;
	}

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

	/* ════ 7-2. 함께 공부하는 사람들 — 커뮤니티 칸 오른쪽 묶음 칸(2026-10-21 운영자 「가」 · 정본 v4 7.14 「오른쪽 칸 = 묶음 칸」 — 회색 100 · 8 · 칸 안 줄 선)
	   마크업 inc/pc-frame-home.php oppadu_pcfh_people · 접속 수 30초마다 js/pcf-home.js 6절. 한마디가 없으면 칸째 없고 글 카드는 넷 그대로 ════ */
	body.pcf-on #page .pcf-home .pcfh-comm-in {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		align-items: start;
		gap: 32px;
	}

	body.pcf-on #page .pcf-home .pcfh-comm-l {
		min-width: 0;
	}

	body.pcf-on #page .pcf-home .pcfh-row--3 {
		grid-auto-columns: calc((100% - 2 * 16px) / 3);
	}

	/* 알약 탭 줄(위 16)과 같은 높이에서 시작 */
	body.pcf-on #page .pcf-home .pcfh-pp {
		margin-top: 16px;
		border-radius: 8px;
		background: var(--gray-100);
	}

	body.pcf-on #page .pcf-home .pcfh-pp-hd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 14px 16px 6px;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-h {
		margin: 0;
		color: var(--gray-900);
		font-size: 15px;
		font-weight: 600;
	}

	/* 접속 점 = 진행 점(초록 · 4.5) */
	body.pcf-on #page .pcf-home .pcfh-pp-now {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		color: var(--gray-600);
		font-size: 13px;
		white-space: nowrap;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-now[hidden] {
		display: none;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-now i {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--brand-action);
	}

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

	body.pcf-on #page .pcf-home .pcfh-pp-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-list li {
		position: relative;
		margin: 0;
	}

	/* 칸 안 줄 선 — 줄 사이에만 · 글자 시작선(얼굴 32 + 사이 12 + 왼쪽 16)까지 들여 */
	body.pcf-on #page .pcf-home .pcfh-pp-list li + li::before {
		content: "";
		position: absolute;
		top: 0;
		right: 16px;
		left: 60px;
		height: 1px;
		background: var(--gray-200);
	}

	body.pcf-on #page .pcf-home .pcfh-pp-row {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding: 10px 16px;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-b {
		display: block;
		min-width: 0;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-m {
		display: flex;
		align-items: baseline;
		gap: 5px;
		min-width: 0;
		overflow: hidden;
		color: var(--gray-500);
		font-size: 12px;
		white-space: nowrap;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-m b {
		overflow: hidden;
		color: var(--gray-900);
		font-size: 13px;
		font-weight: 500;
		text-overflow: ellipsis;
	}

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

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

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

	body.pcf-on #page .pcf-home .pcfh-pp-ft {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 10px 16px 14px;
		border-top: 1px solid var(--gray-200);
		color: var(--gray-700);
		font-size: 13px;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-att {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-att b {
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-stack {
		display: inline-flex;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-stack .pcfh-pp-av {
		width: 24px;
		height: 24px;
		margin-left: -6px;
		border: 2px solid var(--gray-100);
		font-size: 11px;
		box-sizing: content-box;
	}

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

	body.pcf-on #page .pcf-home .pcfh-pp-go {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		color: var(--gray-900);
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
	}

	body.pcf-on #page .pcf-home .pcfh-pp-go:hover {
		color: var(--gray-700);
	}

	/* ════ 8. 전체 강의 — 5열 격자 · 첫 칸 멤버십 알림 · 인기순(처음)/최신순 · 쪽 번호 ════ */
	body.pcf-on #page .pcf-home .pcfh-sort {
		display: flex;
		gap: 12px;
	}

	body.pcf-on #page .pcf-home .pcfh-so {
		color: var(--gray-500);
		font-size: 13px;
	}

	body.pcf-on #page .pcf-home .pcfh-so.is-on {
		color: var(--gray-900);
		font-weight: 600;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 32px 16px;
		margin-top: 20px;
		transition: opacity 0.15s ease;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-grid.is-busy {
		opacity: 0.45;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-promo {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-height: 100%;
		padding: 22px 20px;
		overflow: hidden;
		border-radius: 8px;
		background: var(--primary-50);
		box-sizing: border-box;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-promo-e {
		color: var(--primary);
		font-size: 12px;
		font-weight: 600;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-promo-t {
		color: var(--gray-900);
		font-size: 18px;
		font-weight: 700;
		line-height: 26px;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-promo-s {
		color: var(--gray-700);
		font-size: 13px;
		line-height: 20px;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-promo img {
		position: absolute;
		right: 12px;
		bottom: 12px;
		width: 90px;
		height: 90px;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pages {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin-top: 48px;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pg {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		height: 32px;
		padding: 0 6px;
		border: 1px solid var(--gray-300);
		border-radius: 6px;
		color: var(--gray-700);
		font-size: 13px;
		box-sizing: border-box;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pg:hover {
		border-color: var(--gray-400);
		color: var(--gray-900);
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pg.is-on {
		border-color: var(--brand-action);
		background: var(--brand-action);
		color: #fff;
		font-weight: 600;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pg[disabled] {
		opacity: 0.4;
		cursor: default;
	}

	body.pcf-on #page :is(.pcf-home, .pcfl, .pcfc) .pcfh-pgd {
		width: 24px;
		color: var(--gray-500);
		text-align: center;
	}
}

/* 첫 줄 — 좁은 PC 폭(1,025~1,199)은 한 화면 2장(카드 340 에선 그림 185 옆 글 칸이 115 로 줄어 제목이 잘렸다 · 10/25) · 셋째부터 › */
@media (min-width: 1025px) and (max-width: 1199px) {
	body.pcf-on #page .pcf-home .pcfh-st-wrap .pcfh-row {
		grid-auto-columns: calc((100% - 16px) / 2);
	}
}