/* 굵기 = 2026-10-24 한 단계 가볍게 적용판(fw-map) */
/**
 * PC 새 틀(미리 보기) — 무료 강의 탭 「공식 교재」 · 2026-10-20
 * 운영자 「나, 27건 유지」(시안 claude.ai 아티팩트 JKLhyTiTxh4kDKhF5bbhc7 나 앱스토어형)
 *   = 맨 위 한 줄(표지 132 · 책 이름 32 · 한 줄 소개 · 지은이 · 이어지는 무료 클래스 글 링크 | [예제 파일 받기]) → 숫자 다섯 칸 → 독자 후기 가로 줄(한 화면 두 줄 6장 · ‹ ›)
 *     → 두 단: 목차 | 책 정보 · 사러 가기(공용 부품 .pcf-group · .pcf-row · .pcf-btn — css/pcf-ui.css · 정본 v4 7.14)
 *   10/21 운영자 「독자후기를 더 많이 보여주세요 · 이어지는 무료 클래스 밑에 두지 말고, 위에 잘 보이는 곳으로」 — 후기 3장 → 두 줄 6장 · 무료 클래스 오른쪽 단 맨 아래 → 맨 위 한 줄
 * 마크업 inc/pc-frame-book.php · 넘김 js/pcf-book.js · 정본 v4 13.5 · 14장(새 틀 CSS = body.pcf-on 아래 · PC 1025~ 만)
 * 글자 = 새 틀 「한 단계 작게」(정본 5.2 — 책 이름 32 = 페이지 첫 줄 40 의 한 단계 아래 · 구획 제목 22 · 곁 정보 13 · 줄 높이 1.5)
 * 정본과 다른 점 하나 — 후기 줄 ‹ › 32 둥근 넘김 단추(.pcfb-ar = 메인 홈 구획 머리에 있던 32 원과 같은 모양 — 메인 홈은 10/29 줄 양 끝 40 흰 원으로 옮김 · .claude/rules/css.md 「완전 원형」 넘김 원 예외 자리)
 * 초기화는 :where() 로(부품 규칙을 이기지 않게 — 10/20 새 홈에서 마우스 올림 테두리가 지워진 함정)
 */

/* 폰·태블릿(~1024) — 옛 공식 교재 화면 그대로 */
@media (max-width: 1024px) {
	body.pcf-on .pcfb {
		display: none;
	}
}

@media (min-width: 1025px) {
	/* ════ 1. 자리 — 옛 교재 · 후기 벽은 PC 폭에서 숨긴다(새 화면이 있을 때만 — body.pcfb-on) ════ */
	body.pcfb-on #page #lecture-home .lh-main > :not(.pcfb) {
		display: none;
	}

	body.pcf-on #page .pcfb {
		padding: 8px 0 56px;
		color: var(--gray-900);
		font-size: 14px;
		line-height: 1.5;
	}

	body.pcf-on #page .pcfb :where(h2, p, ol, dl, dt, dd) {
		margin: 0;
		padding: 0;
	}

	body.pcf-on #page .pcfb :where(ol) {
		list-style: none;
	}

	body.pcf-on #page .pcfb .pcfb-book + .pcfb-book {
		margin-top: 96px;
	}

	body.pcf-on #page .pcfb .pcfb-sec {
		margin-top: 64px;
	}

	body.pcf-on #page .pcfb .pcfb-hd {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;
	}

	body.pcf-on #page .pcfb .pcfb-h2 {
		margin-right: auto;
		font-size: 22px;
		font-weight: 600;
		line-height: 33px;
		letter-spacing: -0.02em;
	}

	body.pcf-on #page .pcfb .pcfb-stars {
		color: var(--rating-star);
		letter-spacing: 1px;
	}

	body.pcf-on #page .pcfb .pcfb-stars i {
		color: var(--gray-300);
		font-style: normal;
	}

	/* ════ 2. 맨 위 한 줄 — 표지 · 이름 · 한 줄 소개 · 지은이 | [예제 파일 받기] ════ */
	body.pcf-on #page .pcfb .pcfb-top {
		display: flex;
		align-items: center;
		gap: 32px;
	}

	body.pcf-on #page .pcfb .pcfb-cover {
		display: block;
		flex: none;
	}

	body.pcf-on #page .pcfb .pcfb-cover img {
		display: block;
		width: 132px;
		height: auto;
		border-radius: var(--radius-sm);
		box-shadow: 0 10px 24px rgba(24, 24, 24, 0.18), 0 2px 6px rgba(24, 24, 24, 0.08);
	}

	body.pcf-on #page .pcfb .pcfb-info {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.pcf-on #page .pcfb .pcfb-t {
		color: var(--gray-900);
		font-size: 32px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -0.035em;
	}

	body.pcf-on #page .pcfb .pcfb-d {
		margin-top: 8px;
		color: var(--gray-700);
		font-size: 15px;
		line-height: 1.6;
	}

	body.pcf-on #page .pcfb .pcfb-m {
		margin-top: 6px;
		color: var(--gray-500);
		font-size: 13px;
	}

	/* 이 책과 이어지는 무료 클래스 — 지은이 아래 글 링크(10/21 운영자 「회색 배경 너무 딱딱 · 버튼 대신 라벨」 → 시안 claude.ai 아티팩트 Uje2sFvFbUUeiWmSct67KJ 「가 글 링크」 —
	   처음 넣은 회색 칸 단추를 걷었다): 칸 · 면 없이 ▷ 이름 14/600 + 곁 정보 13 회색 + › · 둘 사이 가는 세로 선 · 마우스 올림 = 이름 밑줄.
	   주 단추는 오른쪽 [예제 파일 받기] 하나 그대로. 1,100 폭 아래는 처음부터 두 줄로 쌓는다(한 줄에서 줄이 바뀌면 세로 선이 줄 첫머리에 남는다).
	   링크 글자색 · 밑줄은 테마의 a:hover 파랑 · 밑줄이 새지 않게 여기서 다시 건다 */
	body.pcf-on #page .pcfb .pcfb-cls {
		margin-top: 16px;
	}

	body.pcf-on #page .pcfb .pcfb-cls-k {
		color: var(--gray-500);
		font-size: 12px;
	}

	body.pcf-on #page .pcfb .pcfb-clsrow {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-top: 8px;
	}

	@media (min-width: 1100px) {
		body.pcf-on #page .pcfb .pcfb-clsrow {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 8px 0;
		}

		body.pcf-on #page .pcfb .pcfb-clsrow a.pcfb-cl + a.pcfb-cl {
			margin-left: 18px;
			padding-left: 18px;
			border-left: 1px solid var(--gray-200);
		}
	}

	body.pcf-on #page .pcfb a.pcfb-cl,
	body.pcf-on #page .pcfb a.pcfb-cl:hover,
	body.pcf-on #page .pcfb a.pcfb-cl:focus {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--gray-900);
		font-size: 14px;
		font-weight: 500;
		line-height: 22px;
		text-decoration: none;
	}

	/* 마우스 올림 이름 밑줄은 걷었다 — 2026-10-21 운영자 「a 태그에 밑줄 들어가지 않게」(css/pcf.css 맨 끝 절 · 정본 v4 4.5) */

	body.pcf-on #page .pcfb a.pcfb-cl:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

	body.pcf-on #page .pcfb .pcfb-cl svg {
		flex: none;
		color: var(--gray-500);
	}

	body.pcf-on #page .pcfb .pcfb-cl svg:last-child {
		color: var(--gray-400);
	}

	body.pcf-on #page .pcfb .pcfb-cl-s {
		color: var(--gray-500);
		font-size: 13px;
		font-weight: 400;
	}

	body.pcf-on #page .pcfb .pcfb-cta {
		display: flex;
		flex: none;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	body.pcf-on #page .pcfb .pcfb-cta a.pcf-btn--primary {
		color: var(--surface-white);
	}

	body.pcf-on #page .pcfb .pcfb-cta-s {
		color: var(--gray-500);
		font-size: 12px;
	}

	/* ════ 3. 숫자 다섯 칸 — 위아래 가는 선 · 칸 사이 세로 선(앱스토어 앱 정보 줄) ════ */
	body.pcf-on #page .pcfb .pcfb-strip {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		margin-top: 36px;
		padding: 20px 0;
		border-top: 1px solid var(--gray-200);
		border-bottom: 1px solid var(--gray-200);
	}

	body.pcf-on #page .pcfb .pcfb-cell {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		min-width: 0;
		text-align: center;
	}

	body.pcf-on #page .pcfb .pcfb-cell + .pcfb-cell::before {
		content: "";
		position: absolute;
		top: 8px;
		bottom: 8px;
		left: 0;
		width: 1px;
		background: var(--gray-200);
	}

	body.pcf-on #page .pcfb .pcfb-ck {
		color: var(--gray-500);
		font-size: 12px;
		font-weight: 500;
	}

	body.pcf-on #page .pcfb .pcfb-cv {
		color: var(--gray-900);
		font-size: 22px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.03em;
	}

	body.pcf-on #page .pcfb .pcfb-cs {
		color: var(--gray-500);
		font-size: 12px;
	}

	/* ════ 4. 독자 후기 가로 줄 — 한 화면 세 칸 × 두 줄 = 6장(10/21 운영자 「더 많이」 — 그 전 한 줄 3장) · 회색 면 칸(7.14 · 8) · ‹ › 32 둥근 넘김(메인 홈과 같은 모양 — 머리 주석) ════ */
	body.pcf-on #page .pcfb .pcfb-arr {
		display: flex;
		gap: 8px;
	}

	body.pcf-on #page .pcfb .pcfb-ar {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 0;
		border: 1px solid var(--gray-300);
		border-radius: 50%;
		background: var(--surface-white);
		color: var(--gray-700);
		cursor: pointer;
	}

	body.pcf-on #page .pcfb .pcfb-ar:hover {
		border-color: var(--gray-400);
		background: var(--surface-white);
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfb .pcfb-ar[disabled] {
		border-color: var(--gray-200);
		color: var(--gray-300);
		cursor: default;
	}

	body.pcf-on #page .pcfb .pcfb-ar:focus-visible {
		outline: 2px solid var(--gray-900);
		outline-offset: 2px;
	}

	/* 넘길 것이 없으면(후기가 3장 이하) 단추를 숨긴다 — js/pcf-book.js 가 .is-static 을 단다 */
	body.pcf-on #page .pcfb .pcfb-sec.is-static .pcfb-arr {
		display: none;
	}

	/* 두 줄 = 줄 둘을 정해 두고 세로 먼저 채운다(위아래 두 장이 한 칸) — ‹ › 는 한 화면(세 칸 = 6장)씩 민다(js/pcf-book.js) */
	body.pcf-on #page .pcfb .pcfb-rvrow {
		display: grid;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: calc((100% - 2 * 16px) / 3);
		grid-auto-flow: column;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	body.pcf-on #page .pcfb .pcfb-rvrow::-webkit-scrollbar {
		display: none;
	}

	body.pcf-on #page .pcfb .pcfb-rvrow:focus-visible {
		outline: 2px solid var(--gray-900);
		outline-offset: 4px;
	}

	body.pcf-on #page .pcfb .pcfb-rv {
		display: flex;
		flex-direction: column;
		gap: 8px;
		box-sizing: border-box;
		min-width: 0;
		padding: 18px 20px;
		border-radius: 8px;
		background: var(--gray-100);
		scroll-snap-align: start;
	}

	body.pcf-on #page .pcfb .pcfb-rv-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
	}

	body.pcf-on #page .pcfb .pcfb-rv-plat {
		color: var(--gray-500);
		font-size: 12px;
	}

	body.pcf-on #page .pcfb .pcfb-rv-t {
		display: -webkit-box;
		overflow: hidden;
		color: var(--gray-800);
		font-size: 14px;
		line-height: 1.6;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	body.pcf-on #page .pcfb .pcfb-rv-by {
		margin-top: auto;
		color: var(--gray-500);
		font-size: 12px;
	}

	/* ════ 5. 두 단 — 목차 | 책 정보 · 사러 가기 · 무료 클래스(묶음 칸은 공용 부품 그대로) ════ */
	body.pcf-on #page .pcfb .pcfb-cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	body.pcf-on #page .pcfb .pcfb-toc .pcf-row {
		justify-content: flex-start;
		gap: 14px;
		font-size: 15px;
	}

	body.pcf-on #page .pcfb .pcfb-ch {
		flex: none;
		width: 30px;
		color: var(--gray-500);
		font-size: 13px;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	body.pcf-on #page .pcfb .pcfb-cht {
		min-width: 0;
	}

	body.pcf-on #page .pcfb .pcfb-facts dt {
		font-weight: 400;
	}

	body.pcf-on #page .pcfb .pcf-group .pcf-row__value {
		font-size: 15px;
	}

	body.pcf-on #page .pcfb .pcfb-lab {
		margin-top: 24px;
	}

	body.pcf-on #page .pcfb a.pcf-row {
		color: var(--gray-900);
	}

	body.pcf-on #page .pcfb a.pcf-row svg {
		flex: none;
		margin-left: 6px;
		color: var(--gray-400);
	}
}