/* ===================================================================
   피터캣클럽 — Books & Class (개발명세서 3·4 · 상세 3~8.png / 목록 9.png)

   상세: 1회차 데모(검수 합격) demo.css 의 Books & Class 규칙을 .pc-bc 안으로 한정해
   그대로 옮겼다(5-5~5-8). 800px 시안 × 1.6(1회차 Q8).
   목록: 9.png × 1.6, 추정값(롤아웃 spec AC-C-10).
   롤아웃 C단계 astra-child renewal-books-class.css 와 같은 규칙(Astra 폭 해제 규칙만 뺌) + 빈 썸네일 칸.
   색은 tokens.css 변수만.
   =================================================================== */

/* ===================
   3. Layout — 블록 초기화
   =================== */

.pc-bc,
.pc-bcl {
	display: block;
	width: 100%;
	margin: 0;
	font-family: var(--pc-font);
	color: var(--pc-ink);
}

.pc-bc h1,
.pc-bc h2,
.pc-bc h3,
.pc-bc p,
.pc-bc ul,
.pc-bcl h2,
.pc-bcl h3,
.pc-bcl p,
.pc-bcl ul {
	margin: 0;
	padding: 0;
}

.pc-bc ul,
.pc-bcl ul {
	list-style: none;
}

.pc-bc img,
.pc-bcl img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pc-bc :is(a, button, [tabindex]):focus-visible,
.pc-bcl :is(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--pc-white);
}

/* 텍스트 버튼(목업 .pc-btn) — lms-common.css 의 같은 이름 규칙과 무관하게 전부 정한다 */
.pc-bc .pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: 15px 34px;
	border: 0;
	border-radius: var(--pc-radius-pill);
	box-shadow: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-15);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--pc-dur-fast) ease, box-shadow var(--pc-dur-fast) ease;
}

.pc-bc .pc-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--pc-shadow-btn-hover);
}

.pc-bc .bc-hero__cta,
.pc-bc .bc-hero__cta:hover,
.pc-bc .bc-hero__cta:focus {
	background: var(--pc-purple-deep);
	color: var(--pc-on-dark);
}

/* 헤더 "Books & Class" 아래 사이드내비 (8.png, show_sidenav 가 켜진 상품) */
.pc-header .bc-sidenav {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 105;
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	margin-top: var(--pc-space-3);
	white-space: nowrap;
}

.pc-header .bc-sidenav a {
	display: block;
	padding: 0 8px;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-14);
	line-height: 1.7;
	color: var(--pc-ink-body);
	text-decoration: none;
}

.pc-header .bc-sidenav a[lang="en"] {
	font-family: var(--pc-font-en);
}

.pc-header .bc-sidenav a:hover,
.pc-header .bc-sidenav a[aria-current="page"] {
	color: var(--pc-ink);
	text-decoration: underline;
}

/* ===================
   5. Sections — 상품 상세 (1회차 데모 규칙)
   =================== */

/* 5-5. 히어로 — 800px 시안 좌표 × 1.6 */
.pc-bc .bc-hero {
	display: grid;
	/* 시안 비율(전체 폭 기준): 여백 8.9% · 썸네일 41% · 간격 2.9% · 텍스트 40%.
	   그리드 %는 여백을 뺀 폭(91.1%) 기준이라 나눠서 환산한다. */
	grid-template-columns: 45% 43.9%;
	column-gap: 3.18%;
	align-items: start;
	padding: 112px 0 0 8.9%;
}

.pc-bc .bc-hero__thumb {
	aspect-ratio: 1 / 1;
	border-radius: var(--pc-radius-none);
}

.pc-bc .bc-hero__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pc-bc .bc-hero__body {
	padding-top: var(--pc-space-5);
}

.pc-bc .bc-hero__title {
	font-family: var(--pc-font);
	font-size: var(--pc-fs-48);
	font-weight: 700;
	line-height: var(--pc-lh-tight);
	color: var(--pc-black);
	text-wrap: balance;
}

.pc-bc .bc-hero__subtitle {
	margin: var(--pc-space-2) 0 var(--pc-space-5);
	font-family: var(--pc-font-en);
	font-size: var(--pc-fs-20);
	font-weight: 400;
	line-height: 1.4;
	color: var(--pc-black);
}

.pc-bc .bc-hero__desc {
	display: grid;
	gap: var(--pc-space-3);
	max-width: 26em;
	margin-bottom: var(--pc-space-6);
	font-size: var(--pc-fs-16);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-body);
}

/* 5-6. 종이 인덱스 탭 */
.pc-bc .bc-tabs {
	display: flex;
	margin-top: 92px;
}

.pc-bc .bc-tab {
	width: 240px;
	height: 59px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
	background: var(--pc-surface-tab-idle);
	font-family: var(--pc-font-en);
	font-size: var(--pc-fs-24);
	font-style: italic;
	line-height: 1;
	color: var(--pc-on-dark);
	cursor: pointer;
	transition: background-color var(--pc-dur-fast) ease;
}

.pc-bc .bc-tab:hover,
.pc-bc .bc-tab:focus {
	color: var(--pc-on-dark);
	background: var(--pc-surface-tab-idle);
}

/* clip-path 가 바깥 외곽선을 잘라내므로 탭은 안쪽에 외곽선을 그린다 */
.pc-bc .bc-tab:focus-visible {
	outline-color: var(--pc-on-dark);
	outline-offset: -8px;
	box-shadow: none;
}

.pc-bc .bc-tab[aria-selected="true"],
.pc-bc .bc-tab[aria-selected="true"]:hover,
.pc-bc .bc-tab[aria-selected="true"]:focus {
	color: var(--pc-black);
}

.pc-bc .bc-tab[aria-selected="true"]:focus-visible {
	outline-color: var(--pc-black);
}

.pc-bc #tab-taste[aria-selected="true"] {
	background: var(--pc-surface-taste);
}

.pc-bc #tab-info[aria-selected="true"] {
	background: var(--pc-surface-info);
}

.pc-bc #tab-story[aria-selected="true"] {
	background: var(--pc-surface-story);
}

/* 5-7. 패널 */
.pc-bc .bc-panel {
	padding: 48px var(--pc-space-8) 64px;
	color: var(--pc-black);
}

.pc-bc .bc-panel[hidden] {
	display: none;
}

.pc-bc .bc-panel--taste {
	background: var(--pc-surface-taste);
}

.pc-bc .bc-panel--info {
	padding: 40px 75px 48px 51px;
	background: var(--pc-surface-info);
}

.pc-bc .bc-panel--story {
	padding: 36px 20px 36px 36px;
	background: var(--pc-surface-story);
}

.pc-bc .bc-taste {
	display: grid;
	gap: 40px;
}

.pc-bc .bc-panel__heading {
	margin-bottom: var(--pc-space-3);
	font-size: var(--pc-fs-24);
	font-weight: 700;
	line-height: var(--pc-lh-tight);
	color: var(--pc-black);
}

.pc-bc .bc-panel__line {
	font-size: var(--pc-fs-16);
	line-height: var(--pc-lh-body);
	color: var(--pc-black);
	overflow-wrap: anywhere;
}

/* Info — 6행 고정 표 (4.png) */
.pc-bc .bc-info {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pc-fs-16);
	color: var(--pc-black);
}

.pc-bc .bc-info tr {
	height: 70px;
}

.pc-bc .bc-info th,
.pc-bc .bc-info td {
	padding: 0 var(--pc-space-4);
	text-align: left;
	vertical-align: middle;
}

.pc-bc .bc-info th {
	width: 167px; /* 표 왼쪽 51 + 167 = 라벨/값 경계 x 218 (4.png 경계 x≈136/800 × 1.6) */
	padding-left: var(--pc-space-1);
	font-weight: 700;
	border-right: var(--pc-line-width) solid var(--pc-line);
}

.pc-bc .bc-info td {
	font-weight: 400;
}

.pc-bc .bc-info tr + tr > * {
	border-top: var(--pc-line-width) solid var(--pc-line);
}

/* Story — 흰 카드에 에세이 1편 (5.png). 본문은 관리자 편집기(wysiwyg) 출력 */
.pc-bc .bc-story {
	display: grid;
	gap: var(--pc-space-5);
	padding: var(--pc-space-5) var(--pc-space-4);
	background: var(--pc-surface-card);
	border-radius: var(--pc-radius-none);
}

.pc-bc .bc-story > h2,
.pc-bc .bc-story > h3 {
	font-size: var(--pc-fs-24);
	font-weight: 700;
	line-height: var(--pc-lh-tight);
	color: var(--pc-ink);
}

.pc-bc .bc-story > p {
	font-size: var(--pc-fs-16);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-body);
}

.pc-bc .bc-story img {
	width: 100%;
	height: auto;
}

/* 5-8. 관련 글 캐러셀 — 카드 = 글 링크(썸네일 1:1 + 제목), 3장씩 넘김 */
.pc-bc .bc-carousel {
	position: relative;
	container-type: inline-size;
	margin-top: 108px;
	padding-bottom: var(--pc-space-9);
}

.pc-bc .bc-carousel__list {
	display: flex;
	/* 시안 비율(전체 폭 기준): 여백 9.6% · 카드 23.75% · 간격 5.12%. 목록 폭(90.4%) 기준으로 환산 */
	gap: 5.66%;
	margin-left: 9.6%;
}

.pc-bc .bc-card {
	width: 26.27%;
	flex: none;
}

.pc-bc .bc-card__link {
	display: block;
	color: var(--pc-ink);
	text-decoration: none;
}

.pc-bc .bc-card__thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: var(--pc-line-width) solid var(--pc-line-placeholder);
}

.pc-bc .bc-card__thumb.has-img {
	border: 0;
}

.pc-bc .bc-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-bc .bc-card__title {
	display: -webkit-box;
	margin-top: var(--pc-space-3);
	overflow: hidden;
	font-size: var(--pc-fs-16);
	color: var(--pc-ink);
	text-align: center;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pc-bc .bc-card__link:hover .bc-card__title {
	text-decoration: underline;
}

.pc-bc .bc-carousel__prev,
.pc-bc .bc-carousel__next {
	position: absolute;
	top: calc(11.875cqw - 25.5px);
	display: flex;
	align-items: center;
	width: 44px;
	height: 51px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.pc-bc .bc-carousel__prev:hover,
.pc-bc .bc-carousel__next:hover,
.pc-bc .bc-carousel__prev:focus,
.pc-bc .bc-carousel__next:focus {
	background: transparent;
}

.pc-bc .bc-carousel__prev[aria-disabled="true"],
.pc-bc .bc-carousel__next[aria-disabled="true"] {
	cursor: default;
}

.pc-bc .bc-carousel__prev {
	left: 72px;
	justify-content: flex-start;
}

.pc-bc .bc-carousel__next {
	right: 66px;
	justify-content: flex-end;
}

.pc-bc .bc-carousel__prev svg,
.pc-bc .bc-carousel__next svg {
	width: 24px;
	height: 51px;
}

.pc-bc .bc-carousel__prev svg path,
.pc-bc .bc-carousel__next svg path {
	fill: var(--pc-purple-deep);
}

@media (min-width: 768px) {
	.pc-bc .bc-card.is-off {
		display: none;
	}
}

/* ===================
   5. Sections — 목록 (9.png × 1.6, 추정)
   =================== */

.pc-bcl {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--pc-space-8) var(--pc-space-7) var(--pc-space-9);
}

.pc-bcl .bcl-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pc-bcl .bcl-section + .bcl-section {
	margin-top: var(--pc-space-9);
}

.pc-bcl .bcl-section:target,
.pc-bcl .bcl-section[id] {
	scroll-margin-top: var(--pc-space-5);
}

.pc-bcl .bcl-illust--door {
	width: 160px;
}

.pc-bcl .bcl-illust--schrodinger {
	width: 213px;
}

.pc-bcl .bcl-title {
	margin-top: var(--pc-space-5);
	font-family: var(--pc-font-en);
	font-size: var(--pc-fs-48);
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pc-pink-sub);
	text-align: center;
}

.pc-bcl .bcl-intro {
	display: grid;
	gap: var(--pc-space-5);
	margin-top: var(--pc-space-5);
	font-size: var(--pc-fs-14);
	font-weight: 700;
	line-height: 1.7;
	color: var(--pc-black);
	text-align: center;
}

/* 큰 카드: 좌 이미지 1:1 + 우 검정 패널 (544 : 653) */
.pc-bcl .bcl-feature {
	display: grid;
	grid-template-columns: 544fr 653fr;
	width: 100%;
	margin-top: 72px;
	background: var(--pc-black);
}

.pc-bcl .bcl-feature__thumb,
.pc-bcl .bcl-card__thumb,
.pc-bcl .bcl-idea__thumb {
	display: block;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08); /* 이미지가 없을 때 어두운 카드 위 빈 칸 */
}

.pc-bcl .bcl-feature__thumb {
	aspect-ratio: 1 / 1;
}

.pc-bcl .bcl-feature__thumb img,
.pc-bcl .bcl-card__thumb img,
.pc-bcl .bcl-idea__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-bcl .bcl-feature__panel {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-4);
	min-width: 0;
	padding: var(--pc-space-7) var(--pc-space-6) var(--pc-space-6);
	color: var(--pc-on-dark);
}

.pc-bcl .bcl-feature__title {
	font-size: var(--pc-fs-42);
	font-weight: 700;
	line-height: var(--pc-lh-tight);
	letter-spacing: -0.01em;
}

.pc-bcl .bcl-feature__title a,
.pc-bcl .bcl-card__title a,
.pc-bcl .bcl-idea__title a {
	/* 터치 영역만 위아래로 넓힘(검수 F8: 한 줄 제목 링크 높이 19) — 배치는 그대로 */
	padding-block: 13px;
	margin-block: -13px;
	color: var(--pc-on-dark);
	text-decoration: none;
}

.pc-bcl .bcl-feature__title a:hover,
.pc-bcl .bcl-card__title a:hover,
.pc-bcl .bcl-idea__title a:hover {
	color: var(--pc-on-dark);
	text-decoration: underline;
}

.pc-bcl .bcl-feature__desc {
	font-size: var(--pc-fs-14);
	line-height: 1.7;
	color: var(--pc-on-dark);
}

.pc-bcl .bcl-feature__timer {
	margin-top: auto;
}

.pc-bcl .bcl-feature__label {
	display: flex;
	align-items: center;
	gap: var(--pc-space-2);
	font-size: var(--pc-fs-14);
	font-weight: 700;
	color: var(--pc-coral);
}

.pc-bcl .bcl-feature__icon {
	display: inline-block;
	width: 32px;
	height: 20px;
}

.pc-bcl .bcl-countdown {
	font-family: var(--pc-font-en);
	font-size: 72px;
	font-weight: 500;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--pc-coral);
	white-space: nowrap;
}

/* 알림 버튼 — 노랑 pill, 딥퍼플 글자 */
.pc-bcl .bcl-notify {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-space-2);
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: var(--pc-space-3) var(--pc-space-5);
	border: 0;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-yellow-sub);
	box-shadow: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-15);
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-purple-deep);
	cursor: pointer;
	transition: transform var(--pc-dur-fast) ease, box-shadow var(--pc-dur-fast) ease;
}

.pc-bcl .bcl-notify--wide {
	min-height: 64px;
	font-size: var(--pc-fs-20);
}

.pc-bcl .bcl-notify:hover,
.pc-bcl .bcl-notify:focus {
	background: var(--pc-yellow-sub);
	color: var(--pc-purple-deep);
	transform: translateY(-2px);
	box-shadow: var(--pc-shadow-btn-hover);
}

.pc-bcl .bcl-notify[disabled] {
	cursor: progress;
	transform: none;
}

.pc-bcl .bcl-notify.is-done {
	cursor: default;
}

.pc-bcl .bcl-bell {
	flex: none;
	fill: var(--pc-purple-deep);
}

.pc-bcl .bcl-status {
	min-height: 1.5em;
	font-size: var(--pc-fs-14);
	font-weight: 700;
	line-height: 1.5;
	color: var(--pc-yellow-sub);
}

.pc-bcl .bcl-status:empty {
	min-height: 0;
}

.pc-bcl .bcl-status a {
	color: var(--pc-yellow-sub);
	text-decoration: underline;
}

/* 작은 카드 3열 (간격 27) */
.pc-bcl .bcl-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 27px;
	width: 100%;
	margin-top: 60px;
}

.pc-bcl .bcl-card {
	display: flex;
	flex-direction: column;
	padding: 19px;
	background: var(--pc-black);
}

.pc-bcl .bcl-card__thumb {
	aspect-ratio: 7 / 6;
}

.pc-bcl .bcl-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--pc-space-3);
	padding-top: var(--pc-space-4);
}

.pc-bcl .bcl-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-3);
}

.pc-bcl .bcl-card__badge {
	display: inline-block;
	padding: 2px var(--pc-space-2);
	background: var(--pc-coral);
	font-size: var(--pc-fs-12);
	font-weight: 700;
	line-height: 1.6;
	color: var(--pc-black);
}

.pc-bcl .bcl-card__date {
	font-size: var(--pc-fs-12);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--pc-coral);
}

.pc-bcl .bcl-card__title {
	font-size: var(--pc-fs-16);
	font-weight: 700;
	line-height: 1.45;
	color: var(--pc-on-dark);
}

.pc-bcl .bcl-card .bcl-notify {
	margin-top: auto;
}

/* 슈뢰딩거 카드 3열 (가로 48 · 세로 61), 바탕 진초록 → 보라 → 버건디 → 버건디 → 진초록 → 보라 */
.pc-bcl .bcl-ideas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 61px 48px;
	width: 100%;
	margin-top: 64px;
}

.pc-bcl .bcl-ideas.is-collapsed .bcl-idea--extra {
	display: none;
}

.pc-bcl .bcl-idea {
	--pc-idea-bg: var(--pc-green-deep);
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-3);
	padding: 16px;
	background: var(--pc-idea-bg);
}

.pc-bcl .bcl-idea--purple {
	--pc-idea-bg: var(--pc-purple);
}

.pc-bcl .bcl-idea--burgundy {
	--pc-idea-bg: var(--pc-burgundy);
}

.pc-bcl .bcl-idea__thumb {
	aspect-ratio: 1 / 1;
}

.pc-bcl .bcl-idea__count {
	font-size: var(--pc-fs-12);
	line-height: 1.5;
	color: var(--pc-yellow-sub);
}

.pc-bcl .bcl-idea__title {
	font-size: var(--pc-fs-16);
	font-weight: 700;
	line-height: 1.45;
	color: var(--pc-on-dark);
}

.pc-bcl .bcl-idea__vote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin: auto 0 0;
	padding: var(--pc-space-2) var(--pc-space-5);
	border: 0;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-yellow-sub);
	box-shadow: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-15);
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-idea-bg);
	cursor: pointer;
	transition: transform var(--pc-dur-fast) ease, box-shadow var(--pc-dur-fast) ease;
}

.pc-bcl .bcl-idea__vote:hover,
.pc-bcl .bcl-idea__vote:focus {
	background: var(--pc-yellow-sub);
	color: var(--pc-idea-bg);
	transform: translateY(-2px);
	box-shadow: var(--pc-shadow-btn-hover);
}

/* 빈 상태 — 다음 행동 안내 */
.pc-bcl .bcl-empty {
	width: 100%;
	max-width: 640px;
	margin-top: 48px;
	padding: var(--pc-space-7) var(--pc-space-5);
	border: var(--pc-line-width) solid var(--pc-black);
	text-align: center;
}

.pc-bcl .bcl-empty__title {
	font-size: var(--pc-fs-20);
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-bcl .bcl-empty__desc {
	margin-top: var(--pc-space-2);
	font-size: var(--pc-fs-15);
	line-height: 1.7;
	color: var(--pc-ink-muted);
}

.pc-bcl .bcl-empty__desc a {
	color: var(--pc-ink);
	text-decoration: underline;
}

/* ===================
   5-9. 시안 비율 (데스크톱 ≥1024) — 2026-09-15
   --u = 시안 PNG 1px (site.css). 옛 값은 "× 1.6 추정"이라 제목·본문·표지가 시안 비율의 0.55~0.7배였다.
   좌표·크기는 9.png(목록)·6~8.png(상세 히어로)·3.png(탭·패널)을 격자로 잰 값.
   =================== */

/* 2026-09-16 80% 축소: --u 가 시안 1px × 0.8(site.css)로 바뀌어 전부 같은 비율로 줄어든다.
   작은 글씨는 max(px 하한, 시안값) — 본문 16 · 보조 13~15 · 버튼 14.
   히어로는 시안 캔버스(800u) 상자를 가운데에 둔다(전폭 기준 좌표를 쓰면 줄어든 만큼 왼쪽으로 쏠림). */
@media (min-width: 1024px) {
	/* 2026-09-16 폭 통일: 탭·패널·캐러셀은 max-width 가 없어 화면 전폭(1440 에서 1440px)으로 퍼졌다.
	   본문 전체를 시안 폭 800u(1440 에서 1152px) 가운데로 묶어 목록 .pc-bcl 과 같은 경계를 갖게 한다. */
	main.pc-bc {
		max-width: calc(var(--u) * 800);
		margin-inline: auto;
	}

	/* ── 상세 히어로 (6.png: 표지 x 141..332 y 150..418, 글 x 422..) ── */
	.pc-bc .bc-hero {
		grid-template-columns: calc(var(--u) * 191) minmax(0, 1fr);
		column-gap: calc(var(--u) * 90);
		max-width: calc(var(--u) * 800);
		margin-inline: auto;
		/* 2026-09-16 왼쪽 여백 141u → 목록과 같은 30u. 표지 시작선이 아래 탭·패널 글과 맞는다 */
		padding: calc(var(--u) * 150 - var(--pc-header-h)) calc(var(--u) * 30) 0;
	}

	.pc-bc .bc-hero__thumb:has(img) {
		aspect-ratio: auto;
	}

	.pc-bc .bc-hero__thumb:has(img) img {
		height: auto;
	}

	.pc-bc .bc-hero__body {
		padding-top: calc(var(--u) * 3);
	}

	.pc-bc .bc-hero__title {
		font-size: calc(var(--u) * 42);
	}

	.pc-bc .bc-hero__subtitle {
		margin: calc(var(--u) * 12) 0 calc(var(--u) * 34);
		font-size: max(16px, calc(var(--u) * 17));
	}

	.pc-bc .bc-hero__desc {
		gap: calc(var(--u) * 9);
		max-width: max(290px, calc(var(--u) * 225));
		margin-bottom: calc(var(--u) * 30);
		font-size: max(16px, calc(var(--u) * 13));
		line-height: 1.62;
	}

	.pc-bc .bc-hero__cta {
		width: calc(var(--u) * 141);
		height: calc(var(--u) * 36);
		min-height: 44px;
		padding: 0;
		font-size: max(14px, calc(var(--u) * 14));
	}

	/* ── 탭 (3.png: 150 × 36, 글자 20) ── */
	.pc-bc .bc-tabs {
		margin-top: calc(var(--u) * 57);
	}

	.pc-bc .bc-tab {
		width: calc(var(--u) * 150);
		height: max(44px, calc(var(--u) * 36));
		font-size: max(16px, calc(var(--u) * 20));
	}

	/* ── 패널 (3.png: 왼쪽 40, 소제목 24, 본문 12 · 줄 20) ── */
	/* 2026-09-16 좌우 여백은 목록과 같은 30u 로 통일(위아래는 시안 값 그대로) */
	.pc-bc .bc-panel {
		padding: calc(var(--u) * 35) calc(var(--u) * 30) calc(var(--u) * 40);
	}

	.pc-bc .bc-panel--info {
		padding: calc(var(--u) * 25) calc(var(--u) * 30) calc(var(--u) * 30);
	}

	.pc-bc .bc-panel--story {
		padding: calc(var(--u) * 22) calc(var(--u) * 30);
	}

	.pc-bc .bc-taste {
		gap: calc(var(--u) * 32);
	}

	.pc-bc .bc-panel__heading {
		margin-bottom: calc(var(--u) * 16);
		font-size: max(18px, calc(var(--u) * 24));
	}

	.pc-bc .bc-panel__line,
	.pc-bc .bc-info,
	.pc-bc .bc-story > p {
		font-size: max(16px, calc(var(--u) * 12));
		line-height: 1.67;
	}

	.pc-bc .bc-info tr {
		height: calc(var(--u) * 44);
	}

	.pc-bc .bc-info th {
		width: max(120px, calc(var(--u) * 104));
	}

	.pc-bc .bc-story > h2,
	.pc-bc .bc-story > h3 {
		font-size: max(18px, calc(var(--u) * 20));
	}

	/* ── 관련 글 캐러셀 ── */
	.pc-bc .bc-carousel {
		margin-top: calc(var(--u) * 68);
	}

	.pc-bc .bc-card__title {
		font-size: max(15px, calc(var(--u) * 12));
	}

	/* ── 목록 (9.png: 내용 x 30..770) ── */
	.pc-bcl {
		max-width: calc(var(--u) * 800);
		padding: calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * 90);
	}

	.pc-bcl .bcl-section + .bcl-section {
		margin-top: calc(var(--u) * 57);
	}

	.pc-bcl .bcl-illust--door {
		width: calc(var(--u) * 102);
	}

	.pc-bcl .bcl-illust--schrodinger {
		width: calc(var(--u) * 175);
	}

	.pc-bcl .bcl-title {
		margin-top: calc(var(--u) * 18);
		font-size: calc(var(--u) * 48);
	}

	.pc-bcl .bcl-intro {
		gap: calc(var(--u) * 18);
		margin-top: calc(var(--u) * 16);
		font-size: max(16px, calc(var(--u) * 12));
		line-height: 1.55;
	}

	/* 큰 카드 — 이미지 342 : 패널 406, 높이 340 */
	.pc-bcl .bcl-feature {
		grid-template-columns: 342fr 406fr;
		margin-top: calc(var(--u) * 47);
	}

	.pc-bcl .bcl-feature__panel {
		gap: calc(var(--u) * 12);
		padding: calc(var(--u) * 18) calc(var(--u) * 24) calc(var(--u) * 14) calc(var(--u) * 30);
	}

	/* 큰 카드 제목·카운트다운은 80% 로도 커서(1440 에서 58·83px) 한 단계 더 줄임 — 사용자 요청 2026-09-16 */
	.pc-bcl .bcl-feature__title {
		font-size: calc(var(--u) * 28);
	}

	.pc-bcl .bcl-feature__desc,
	.pc-bcl .bcl-feature__label {
		font-size: max(14px, calc(var(--u) * 11));
	}

	.pc-bcl .bcl-feature__icon {
		width: calc(var(--u) * 22);
		height: calc(var(--u) * 14);
	}

	.pc-bcl .bcl-countdown {
		font-size: calc(var(--u) * 40);
	}

	.pc-bcl .bcl-notify {
		font-size: max(14px, calc(var(--u) * 12));
	}

	.pc-bcl .bcl-notify--wide {
		min-height: max(48px, calc(var(--u) * 55));
		font-size: max(15px, calc(var(--u) * 13));
	}

	/* 작은 카드 — 3열 간격 18, 안쪽 15, 썸네일 1:1, 제목 14 */
	.pc-bcl .bcl-cards {
		gap: calc(var(--u) * 18);
		margin-top: calc(var(--u) * 39);
	}

	.pc-bcl .bcl-card {
		padding: calc(var(--u) * 15);
	}

	.pc-bcl .bcl-card__thumb {
		aspect-ratio: 1 / 1;
	}

	.pc-bcl .bcl-card__body {
		gap: calc(var(--u) * 8);
		padding-top: calc(var(--u) * 12);
	}

	.pc-bcl .bcl-card__badge,
	.pc-bcl .bcl-card__date {
		font-size: max(13px, calc(var(--u) * 10));
	}

	.pc-bcl .bcl-card__title,
	.pc-bcl .bcl-idea__title {
		font-size: max(15px, calc(var(--u) * 14));
		line-height: 1.43;
	}

	.pc-bcl .bcl-card .bcl-notify,
	.pc-bcl .bcl-idea__vote {
		min-height: max(44px, calc(var(--u) * 32));
		font-size: max(14px, calc(var(--u) * 12));
	}

	/* 슈뢰딩거 카드 — 3열 간격 30 */
	.pc-bcl .bcl-ideas {
		gap: calc(var(--u) * 40) calc(var(--u) * 30);
		margin-top: calc(var(--u) * 48);
	}

	.pc-bcl .bcl-idea {
		gap: calc(var(--u) * 8);
		padding: calc(var(--u) * 10);
	}

	.pc-bcl .bcl-idea__count {
		font-size: max(13px, calc(var(--u) * 10));
	}
}

/* ===================
   6. Responsive
   =================== */

@media (max-width: 1023px) {
	.pc-bcl .bcl-cards,
	.pc-bcl .bcl-ideas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.pc-bcl .bcl-countdown {
		font-size: var(--pc-fs-48);
	}
}

@media (max-width: 767px) {
	/* ── Books & Class 모바일 (시안 없음, 1회차 Q9 가안) ── */

	.pc-bc .bc-hero {
		grid-template-columns: 1fr;
		row-gap: var(--pc-space-5);
		padding: var(--pc-space-5) var(--pc-space-4) 0;
	}

	.pc-bc .bc-hero__thumb:not(:has(img)) {
		display: none;
	}

	.pc-bc .bc-hero__body {
		padding-top: 0;
	}

	.pc-bc .bc-hero__title {
		font-size: var(--pc-fs-42);
	}

	.pc-bc .bc-tabs {
		margin-top: var(--pc-space-7);
	}

	.pc-bc .bc-tab {
		width: 33.333%;
		height: 48px;
		font-size: var(--pc-fs-20);
	}

	.pc-bc .bc-panel,
	.pc-bc .bc-panel--info {
		padding: var(--pc-space-6) var(--pc-space-4) var(--pc-space-7);
	}

	.pc-bc .bc-panel--story {
		padding: var(--pc-space-4);
	}

	.pc-bc .bc-info th {
		width: 40%;
	}

	.pc-bc .bc-carousel {
		margin-top: var(--pc-space-8);
		padding: 0 var(--pc-space-4) var(--pc-space-8);
	}

	.pc-bc .bc-carousel__list {
		flex-direction: column;
		gap: var(--pc-space-6);
		margin-left: 0;
	}

	.pc-bc .bc-card {
		width: 100%;
	}

	.pc-bc .bc-carousel__prev,
	.pc-bc .bc-carousel__next {
		display: none;
	}

	.pc-bcl {
		padding: var(--pc-space-7) var(--pc-space-4) var(--pc-space-8);
	}

	.pc-bcl .bcl-title {
		font-size: var(--pc-fs-34);
	}

	.pc-bcl .bcl-feature {
		grid-template-columns: 1fr;
		margin-top: var(--pc-space-7);
	}

	.pc-bcl .bcl-feature__title {
		font-size: var(--pc-fs-24);
	}

	.pc-bcl .bcl-countdown {
		font-size: var(--pc-fs-42);
	}

	.pc-bcl .bcl-cards,
	.pc-bcl .bcl-ideas {
		grid-template-columns: 1fr;
		gap: var(--pc-space-6);
	}
}