/* ===================================================================
   피터캣클럽 — 강의 구매 상세 (개발명세서 5 · 와이어프레임 10.png)

   수치: 10.png 800px 캔버스 × 1.6 (추정). 규칙: 기존 화면 규칙표 DL-21~24(10.png 부품).
     대표 이미지 x 111 · 폭 734(1:1) / 구매 박스 폭 298 · 간격 40 / 탭 바 #E5E5E5 · 활성 흰 면
     아이콘·상태 버튼 #6D6D6D 흰 글자(5.26:1) · 후기 카드 #F5F5F5 · 가격 검정
   =================================================================== */

/* ===================
   3. Layout
   =================== */

/* 2026-09-16 80% 축소: 데스크톱(≥1024)은 다른 시안 비율 화면과 같은 규칙 — --u(시안 1px × 0.8, 1440 에서 멈춤).
   10.png 800 캔버스: 이미지 x 69 · 간격 25 · 구매 박스 186 · 오른쪽 61 · 위 48 · 본문 위 31.
   구매 박스는 글자가 13~21px 로 이미 작아 298px 고정(시안 186u 는 1440 에서 268px). */
.pc-course {
	width: 100%;
	margin: 0 auto;
	padding: var(--pc-space-5) var(--pc-space-6) var(--pc-space-9);
	color: var(--pc-ink);
}

/* 2026-09-16 B&C 상세 디자인 언어: 히어로 = 대표 이미지 | 글 영역(제목·설명·별점·가격·구매 pill) */
.pc-course__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
}

.pc-course__body {
	width: 100%;
	margin-top: 56px;
}

@media (min-width: 1024px) {
	.pc-course {
		max-width: calc(var(--u) * 800);
		padding: calc(var(--u) * 48) calc(var(--u) * 61) var(--pc-space-9) calc(var(--u) * 69);
	}

	/* 이미지 300u · 간격 56u · 글 나머지(버튼 줄이 들어가게 최소 300px) */
	.pc-course__top {
		grid-template-columns: calc(var(--u) * 300) minmax(300px, 1fr);
		column-gap: calc(var(--u) * 56);
	}

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

/* ===================
   4. Components — 대표 미디어
   =================== */

.pc-course__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--pc-gray-soft);
}

.pc-slider {
	position: relative;
	overflow: hidden;
}

.pc-course__media .pc-slider {
	aspect-ratio: 1 / 1;
	background: var(--pc-gray-soft);
}

.pc-slider__track {
	display: flex;
	height: 100%;
	transition: transform var(--pc-dur-slow) var(--pc-ease);
}

.pc-slider__slide {
	flex: 0 0 100%;
	height: 100%;
}

.pc-slider__slide > img,
.pc-yt,
.pc-yt__facade,
.pc-yt__facade img,
.pc-yt iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.pc-slider--fade .pc-slider__track {
	display: grid;
}

.pc-slider--fade .pc-slider__slide {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity var(--pc-dur-slow) ease;
}

.pc-slider--fade .pc-slider__slide.is-active {
	opacity: 1;
}

.pc-yt__facade {
	position: relative;
	padding: 0;
	background: var(--pc-black);
	cursor: pointer;
}

.pc-yt__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--pc-white);
	transform: translate(-50%, -50%);
}

.pc-yt__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--pc-black);
	transform: translate(-50%, -50%);
}

.pc-slider__prev,
.pc-slider__next {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-white);
	cursor: pointer;
	transform: translateY(-50%);
}

.pc-slider__prev {
	left: var(--pc-space-3);
}

.pc-slider__next {
	right: var(--pc-space-3);
}

.pc-slider__prev svg,
.pc-slider__next svg {
	stroke: var(--pc-black);
}

.pc-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--pc-space-2);
	display: flex;
	justify-content: center;
	gap: 0;
}

.pc-slider__dot {
	position: relative;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.pc-slider__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-white);
	transform: translate(-50%, -50%);
}

.pc-slider__dot[aria-current="true"]::before {
	background: var(--pc-black);
}

/* ===================
   4. Components — 히어로 글 영역 (옛 구매 박스 DL-21·22 → B&C 히어로 6~8.png 언어, 2026-09-16)
   상자·테두리 없이 글자로 위계: 큰 제목 → 설명 → 별점·수강 인원 → 가격 → 딥퍼플 pill + 원형 아이콘(DL-26)
   =================== */

.pc-course__side {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-6);
}

.pc-course-buy {
	padding: 0;
	border: 0;
	background: transparent;
}

.pc-course-buy p {
	margin: 0;
}

/* 그룹 전용 강의(FluxLMS 1.6.0) — 배지 + 구매 대신 안내 */
.pc-course-buy__group,
.pc-course-buy__main svg.flms-icon {
	flex: none;
}

.pc-course-buy__group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--pc-space-2);
	padding: 2px var(--pc-space-2);
	border: var(--pc-line-width) solid var(--pc-black);
	font-size: var(--pc-fs-12);
	font-weight: 700;
	color: var(--pc-black);
}

.pc-course-buy__group svg,
.pc-course-buy__main svg {
	width: 14px;
	height: 14px;
}

.pc-course-group-note {
	margin-top: var(--pc-space-3);
	padding: var(--pc-space-4);
	border: var(--pc-line-width) solid var(--pc-black);
	background: var(--pc-white);
}

.pc-course-group-note__title {
	margin: 0;
	font-size: var(--pc-fs-14);
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-course-group-note__desc {
	margin: var(--pc-space-1) 0 0;
	font-size: var(--pc-fs-14);
	line-height: 1.6;
	color: var(--pc-ink-muted);
}

.pc-course-group-note__login {
	margin-top: var(--pc-space-3);
	min-height: 44px;
}

.pc-course-buy__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-black);
	word-break: keep-all;
	text-wrap: balance;
}

.pc-course-buy__excerpt {
	max-width: 30em;
	margin-top: var(--pc-space-4) !important;
	font-size: var(--pc-fs-16);
	line-height: var(--pc-lh-body);
	color: var(--pc-ink-body);
	word-break: keep-all;
}

.pc-course-buy__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--pc-space-5) !important;
	font-size: var(--pc-fs-15);
	color: var(--pc-ink);
}

.pc-course-buy__facts {
	margin-top: var(--pc-space-1) !important;
	font-size: var(--pc-fs-14);
	color: var(--pc-ink-muted);
	font-variant-numeric: tabular-nums;
}

.pc-course-buy__score {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pc-course-buy__reviews {
	color: var(--pc-ink-muted);
	text-decoration: none;
}

.pc-course-buy__reviews:hover {
	text-decoration: underline;
}

.pc-course-buy__students {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--pc-space-1) !important;
	font-size: var(--pc-fs-14);
	color: var(--pc-ink-muted);
}

.pc-course-buy__students svg {
	stroke: var(--pc-ink-muted);
}

.pc-course-buy__students strong {
	color: var(--pc-ink);
	font-variant-numeric: tabular-nums;
}

.pc-course-buy__price {
	margin: var(--pc-space-5) 0 var(--pc-space-5);
	padding: 0;
	border: 0;
}

.pc-course-buy__was {
	font-size: var(--pc-fs-14);
	color: var(--pc-ink-muted);
	font-variant-numeric: tabular-nums;
}

.pc-course-buy__rate {
	font-weight: 700;
	color: var(--pc-pink-sub-text);
}

.pc-course-buy__now {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--pc-black);
	font-variant-numeric: tabular-nums;
}

/* "원" — 시안 #8E8E8E(3.3:1) → 보정 muted (가안 EP-unit) */
.pc-course-buy__unit {
	margin-left: 4px;
	font-size: var(--pc-fs-15);
	font-weight: 400;
	color: var(--pc-ink-muted);
}

/* 버튼 줄 — 주 버튼(pill) 먼저, 공유·찜·장바구니 원형 아이콘(DL-26) */
.pc-course-buy__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-2);
}

.pc-course-buy__icon,
.pc-course-buy__main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin: 0;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pc-dur-fast) ease, transform var(--pc-dur-fast) ease;
}

.pc-course-buy__icon {
	position: relative;
	flex: 0 0 44px;
	width: 44px;
	padding: 0;
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-white);
	color: var(--pc-black);
}

.pc-course-buy__icon svg {
	stroke: var(--pc-black);
}

.pc-course-buy__icon:hover,
.pc-course-buy__icon:focus {
	background: var(--pc-white);
	color: var(--pc-black);
}

.pc-course-buy__icon:not([disabled]):hover {
	transform: translateY(-2px);
}

.pc-course-buy__icon[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.pc-course-buy__paw ellipse {
	fill: none;
	stroke: var(--pc-black);
	stroke-width: 1.4;
}

.pc-course-buy__icon.wishlisted .pc-course-buy__paw ellipse {
	fill: var(--pc-pink-sub);
	stroke: var(--pc-pink-sub);
}

/* 찜 수 — 10.png 아이콘 아래 작은 원 */
.pc-course-buy__count {
	position: absolute;
	right: -4px;
	bottom: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-pink-sub-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	color: var(--pc-on-dark);
	font-variant-numeric: tabular-nums;
}

/* 주 버튼 — B&C "자세히 보러가기"와 같은 딥퍼플 pill(DL-18). 상태(수강 중·그룹 전용·준비 중)는 2차 pill(DL-19) */
.pc-course-buy__main {
	flex: 0 0 auto;
	gap: 6px;
	min-width: 168px;
	height: 48px;
	padding: 0 var(--pc-space-6);
	border: var(--pc-line-width) solid var(--pc-purple-deep);
	border-radius: var(--pc-radius-pill);
	font-size: var(--pc-fs-16);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

.pc-course-buy__main svg {
	flex: none;
	stroke: currentColor;
}

.pc-course-buy__main--buy,
.pc-course-buy__main--buy:hover,
.pc-course-buy__main--buy:focus {
	background: var(--pc-purple-deep);
	color: var(--pc-on-dark);
}

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

.pc-course-buy__main--state,
.pc-course-buy__main--state:hover,
.pc-course-buy__main--state:focus {
	border-color: var(--pc-black);
	background: var(--pc-white);
	color: var(--pc-black);
}

.pc-course-buy__main[aria-disabled="true"] {
	cursor: default;
	color: var(--pc-ink-muted);
	border-color: var(--pc-ink-muted);
}

.pc-course-buy :is(a, button):focus-visible,
.pc-course-tabs :is(a, button):focus-visible,
.pc-course :is(.pc-slider__prev, .pc-slider__next, .pc-slider__dot, .pc-yt__facade, .pc-review__photo, .pc-curriculum__head):focus-visible,
.pc-course-event__link:focus-visible {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--pc-white);
}

/* 이벤트 배너 — 히어로 글 영역 아래, 작은 정사각 */
.pc-course-event {
	width: min(100%, 240px);
}

.pc-course-event__title {
	margin: 0 0 var(--pc-space-2);
	font-size: var(--pc-fs-14);
	font-weight: 700;
	color: var(--pc-black);
}

.pc-course-event .pc-slider {
	border-radius: 6px;
}

.pc-course-event__link {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--pc-gray-soft);
	color: var(--pc-ink);
	text-decoration: none;
}

.pc-course-event__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-course-event__text {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--pc-space-5);
	font-weight: 700;
	text-align: center;
}

/* ===================
   4. Components — 본문 탭 (2026-09-16: 회색 탭 바 DL-23 → B&C 종이 인덱스 탭 5-6)
   사다리꼴 검정 탭, 선택하면 라임(소개)·그린(커리큘럼)·토프(후기) + 탭 아래 같은 색 띠. 내용은 흰 바탕.
   탭 글자가 한글이라 Cabin 이탤릭 대신 본문 서체 굵게.
   =================== */

.pc-course-tabs {
	--pc-tab-on: var(--pc-surface-taste);
	display: flex;
	align-items: flex-end;
	gap: 0;
	padding: 0;
	border-bottom: 6px solid var(--pc-tab-on);
	background: transparent;
}

/* id 대신 속성 선택자 — 특이도를 후기 규칙(0,3,0)과 같게 두어 뒤에 오는 후기 규칙이 이기게 */
.pc-course-tabs:has([id="pc-tab-curriculum"][aria-selected="true"]) {
	--pc-tab-on: var(--pc-surface-info);
}

.pc-course-tabs:has(.pc-course-tabs__jump.is-active) {
	--pc-tab-on: var(--pc-surface-story);
}

.pc-course-tabs__list {
	display: flex;
	gap: 0;
}

.pc-course-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 180px;
	height: 52px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--pc-space-5);
	border: 0;
	border-radius: 0;
	clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
	background: var(--pc-surface-tab-idle);
	box-shadow: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-16);
	font-weight: 700;
	color: var(--pc-on-dark);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pc-dur-fast) ease;
}

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

.pc-course-tabs__tab[aria-selected="true"],
.pc-course-tabs__tab[aria-selected="true"]:hover,
.pc-course-tabs__tab[aria-selected="true"]:focus,
.pc-course-tabs__jump.is-active,
.pc-course-tabs__jump.is-active:hover,
.pc-course-tabs__jump.is-active:focus {
	background: var(--pc-tab-on);
	color: var(--pc-black);
}

/* 후기로 이동하면 소개·커리큘럼 탭은 쉬는 색 */
.pc-course-tabs:has(.pc-course-tabs__jump.is-active) [aria-selected="true"] {
	background: var(--pc-surface-tab-idle);
	color: var(--pc-on-dark);
}

/* clip-path 가 바깥 외곽선을 잘라내므로 탭은 안쪽에 외곽선을 그린다(B&C 와 같음) */
.pc-course .pc-course-tabs .pc-course-tabs__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -8px;
	box-shadow: none;
}

/* 후기 수 — 탭 글자색을 따른다(검정 탭 흰 글자 · 토프 탭 검정 글자) */
.pc-course-tabs__count {
	font-weight: 700;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

/* ===================
   4. Components — 상단 고정 구매 바 (데스크톱 ≥1024, 2026-09-16)
   히어로 구매 버튼이 화면 위로 지나가면 course.js 가 .is-on + inert 해제. 모바일은 하단 구매 바(DL-39).
   =================== */

.pc-course-bar {
	display: none;
}

@media (min-width: 1024px) {
	.pc-course-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 90;
		display: block;
		padding-top: env(safe-area-inset-top, 0px);
		border-bottom: var(--pc-line-width) solid var(--pc-black);
		background: var(--pc-white);
		visibility: hidden;
		transform: translateY(-100%);
		transition: transform var(--pc-dur) var(--pc-ease), visibility 0s linear var(--pc-dur);
	}

	.pc-course-bar.is-on {
		visibility: visible;
		transform: none;
		transition: transform var(--pc-dur) var(--pc-ease), visibility 0s;
	}

	.admin-bar .pc-course-bar {
		top: 32px;
	}

	.pc-course-bar__inner {
		display: flex;
		align-items: center;
		gap: var(--pc-space-5);
		max-width: calc(var(--u) * 800);
		margin: 0 auto;
		padding: 10px calc(var(--u) * 61) 10px calc(var(--u) * 69);
	}

	.pc-course-bar__title {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		overflow: hidden;
		font-size: var(--pc-fs-17);
		font-weight: 700;
		color: var(--pc-black);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.pc-course-bar__price {
		flex: none;
		margin: 0;
		font-size: var(--pc-fs-18);
		font-weight: 700;
		color: var(--pc-black);
		font-variant-numeric: tabular-nums;
	}

	.pc-course-bar .pc-course-buy__main {
		height: 44px;
		font-size: var(--pc-fs-15);
	}

	.pc-course-bar .pc-course-buy__main:focus-visible {
		outline: 2px solid var(--pc-ink);
		outline-offset: 2px;
		box-shadow: 0 0 0 5px var(--pc-white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-course-bar,
	.pc-course-bar.is-on {
		transition: none;
	}
}

/* 탭 아래 내용(소개·커리큘럼·후기)은 읽기 폭 860 안에서 가운데 */
.pc-course-panel,
.pc-course-reviews {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* ===================
   5. Sections — 소개 · 커리큘럼 · 후기
   =================== */

.pc-course-panel {
	margin-top: var(--pc-space-5);
}

.pc-course-panel__title {
	display: flex;
	align-items: baseline;
	gap: var(--pc-space-2);
	margin: 0 0 var(--pc-space-5);
	padding-bottom: var(--pc-space-3);
	border-bottom: var(--pc-line-width) solid var(--pc-gray-line);
	font-size: var(--pc-fs-20);
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-black);
}

.pc-course-panel__meta {
	font-size: var(--pc-fs-14);
	font-weight: 400;
	color: var(--pc-ink-muted);
}

.pc-course-panel__content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* 소개 본문은 관리자 편집기(Froala) 출력 — fr-dib(블록 이미지), fr-video(영상), emoji(글자 크기 이모지) */
.pc-course-panel__content .fr-dib {
	display: block;
	margin: 0 auto;
}

.pc-course-panel__content img.emoji {
	display: inline;
	width: 1em;
	height: 1em;
	margin: 0 0.1em;
	vertical-align: -0.1em;
}

.pc-course-panel__content .fr-video {
	display: block;
	position: relative;
	width: 100%;
	margin: var(--pc-space-5) 0;
	text-align: center;
}

.pc-course-panel__content .fr-video iframe,
.pc-course-panel__content .fr-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.pc-course-panel__content > p:has(> img:only-child) {
	margin: 0;
	line-height: 0;
}

/* 커리큘럼 */
.pc-curriculum {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--pc-line-width) solid var(--pc-black);
}

.pc-curriculum__section {
	border-bottom: var(--pc-line-width) solid var(--pc-black);
}

.pc-curriculum__head {
	display: flex;
	align-items: center;
	gap: var(--pc-space-3);
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: var(--pc-space-3) var(--pc-space-2);
	border: 0;
	background: transparent;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-16);
	font-weight: 700;
	color: var(--pc-black);
	text-align: left;
	cursor: pointer;
}

.pc-curriculum__title {
	flex: 1;
}

.pc-curriculum__count {
	font-size: var(--pc-fs-14);
	font-weight: 400;
	color: var(--pc-ink-muted);
}

.pc-curriculum__chev {
	stroke: var(--pc-black);
	transition: transform var(--pc-dur-fast) ease;
}

.pc-curriculum__head[aria-expanded="false"] .pc-curriculum__chev {
	transform: rotate(-90deg);
}

.pc-curriculum__lessons {
	margin: 0;
	padding: 0 var(--pc-space-2) var(--pc-space-3) calc(var(--pc-space-2) + 1.4em);
	font-size: var(--pc-fs-15);
	line-height: 1.6;
	color: var(--pc-ink-body);
}

.pc-curriculum__lesson + .pc-curriculum__lesson {
	margin-top: var(--pc-space-2);
}

/* 수강 후기 — 10.png 최하단 상자 */
.pc-course-reviews {
	margin-top: var(--pc-space-8);
	padding: var(--pc-space-5);
	border: var(--pc-line-width) solid var(--pc-black);
	scroll-margin-top: 96px; /* 데스크톱 상단 구매 바(약 64px) + 여유 */
}

.pc-course-reviews:focus {
	outline: none;
}

.pc-course-reviews__head .pc-course-panel__title {
	margin-bottom: var(--pc-space-3);
}

.pc-course-reviews__filters {
	display: flex;
	justify-content: flex-end;
	gap: var(--pc-space-2);
	margin-bottom: var(--pc-space-4);
}

/* 정렬·필터 선택 — 10.png 회색 칸(DL-24), 높이 44 보정 */
.pc-select--soft {
	height: 44px;
	border: 0;
	border-radius: 4px;
	background-color: var(--pc-gray-line);
	font-size: var(--pc-fs-14);
}

.pc-reviews {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-review {
	padding: var(--pc-space-4);
	border-radius: 4px;
	background: var(--pc-gray-soft);
}

.pc-review p {
	margin: 0;
}

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

.pc-review__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.pc-review__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pc-ink);
}

.pc-review__who {
	display: flex;
	gap: var(--pc-space-2);
	font-size: 13px;
	color: var(--pc-ink-muted);
}

.pc-review__name {
	color: var(--pc-ink);
}

.pc-review__text {
	margin-top: var(--pc-space-3);
	font-size: var(--pc-fs-15);
	line-height: 1.7;
	color: var(--pc-ink-body);
	white-space: normal;
	word-break: break-word;
}

.pc-review__photo {
	display: block;
	width: 96px;
	height: 96px;
	margin: var(--pc-space-3) 0 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 4px;
	background: none;
	cursor: zoom-in;
}

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

/* 별 — 부분 채움, #FFB400(DL-24). 숫자가 함께 있어 색만으로 전달하지 않는다 */
.pc-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
}

.pc-stars svg {
	width: 14px;
	height: 14px;
}

.pc-stars__base svg {
	fill: var(--pc-gray-line);
}

.pc-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.pc-stars__fill svg {
	fill: #FFB400;
}

/* 후기 작성 */
.pc-review-form {
	margin-bottom: var(--pc-space-5);
	padding: var(--pc-space-4);
	border: var(--pc-line-width) solid var(--pc-black);
}

.pc-review-form__stars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	margin: 0 0 var(--pc-space-3);
	padding: 0;
	border: 0;
}

.pc-review-form__legend {
	float: left;
	margin-right: var(--pc-space-3);
	font-size: var(--pc-fs-14);
	font-weight: 700;
	line-height: 44px;
}

.pc-review-form__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.pc-review-form__star svg {
	width: 26px;
	height: 26px;
	fill: var(--pc-gray-line);
	transition: fill var(--pc-dur-fast) ease;
}

/* 선택한 별과 그 앞 별 채우기(row-reverse + ~) */
.pc-review-form__stars input:checked ~ .pc-review-form__star svg,
.pc-review-form__stars .pc-review-form__star:hover svg,
.pc-review-form__stars .pc-review-form__star:hover ~ .pc-review-form__star svg {
	fill: #FFB400;
}

.pc-review-form__stars input:focus-visible + .pc-review-form__star {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
}

.pc-review-form__text {
	display: block;
	width: 100%;
	min-height: 120px;
	padding: var(--pc-space-3);
	border: var(--pc-line-width) solid var(--pc-black);
	border-radius: 0;
	font-size: var(--pc-fs-16);
	line-height: 1.6;
	resize: vertical;
}

.pc-review-form__text:focus {
	outline: 2px solid var(--pc-ink);
	outline-offset: 2px;
}

.pc-review-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-3);
	margin-top: var(--pc-space-3);
}

.pc-review-form__count {
	font-size: 13px;
	color: var(--pc-ink-muted);
	font-variant-numeric: tabular-nums;
}

.pc-review-form__error {
	flex: 1;
	margin: 0;
	font-size: var(--pc-fs-15);
	font-weight: 700;
	color: var(--pc-pink-sub-text);
}

/* 확대 보기 (DL-38) */
.pc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000002;
}

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

.pc-lightbox__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--pc-black) 80%, transparent);
}

.pc-lightbox__panel {
	position: absolute;
	inset: var(--pc-space-7) var(--pc-space-8);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.pc-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	pointer-events: auto;
}

.pc-lightbox__close,
.pc-lightbox__prev,
.pc-lightbox__next {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pc-white);
	cursor: pointer;
	pointer-events: auto;
}

.pc-lightbox__close svg,
.pc-lightbox__prev svg,
.pc-lightbox__next svg {
	stroke: var(--pc-black);
}

.pc-lightbox__close {
	top: calc(-1 * var(--pc-space-6));
	right: calc(-1 * var(--pc-space-6));
}

.pc-lightbox__prev {
	left: calc(-1 * var(--pc-space-7));
}

.pc-lightbox__next {
	right: calc(-1 * var(--pc-space-7));
}

.pc-lightbox__counter {
	position: absolute;
	bottom: calc(-1 * var(--pc-space-6));
	margin: 0;
	font-size: var(--pc-fs-14);
	color: var(--pc-on-dark);
}

/* 모바일 하단 구매 바(브리지 플러그인 숏코드) — 데스크톱에서는 구매 박스가 옆에 있어 숨긴다 */
.pc-course .pf-course-floating-banner {
	display: none !important;
}

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

/* 데스크톱 글자·탭 크기 — 시안 비율(--u) + px 하한. 기본 규칙보다 뒤에 둬야 이긴다 */
@media (min-width: 1024px) {
	/* 글 영역 — B&C 히어로(제목 42u)보다 한 단계 작게: 강의 이름이 길다 */
	.pc-course-buy__title {
		font-size: max(28px, calc(var(--u) * 30));
	}

	.pc-course-buy__excerpt {
		font-size: max(16px, calc(var(--u) * 12));
	}

	.pc-course-buy__now {
		font-size: max(28px, calc(var(--u) * 22));
	}

	.pc-course-buy__actions .pc-course-buy__main {
		height: max(48px, calc(var(--u) * 36));
		font-size: max(16px, calc(var(--u) * 12));
	}

	/* 탭 — B&C 3.png 150×36 보다 조금 좁게(한글 글자) */
	.pc-course-tabs__tab {
		width: calc(var(--u) * 128);
		height: max(48px, calc(var(--u) * 36));
		font-size: max(16px, calc(var(--u) * 13));
	}
}

@media (max-width: 1023px) {
	.pc-course {
		padding-top: var(--pc-space-5);
		padding-bottom: 140px; /* 하단 구매 바 자리 */
	}

	.pc-course__top {
		grid-template-columns: 1fr;
		row-gap: var(--pc-space-5);
	}

	.pc-course__side {
		position: static;
	}

	.pc-course__body {
		width: 100%;
		margin-top: var(--pc-space-7);
	}

	.pc-course-event .pc-slider,
	.pc-course-event__link {
		aspect-ratio: 16 / 9;
	}

	.pc-lightbox__panel {
		inset: var(--pc-space-8) var(--pc-space-4);
	}

	.pc-lightbox__close {
		top: calc(-1 * var(--pc-space-7));
		right: 0;
	}

	.pc-lightbox__prev {
		left: 0;
	}

	.pc-lightbox__next {
		right: 0;
	}

	/* 하단 구매 바 — DL-39(가안 EP-fixedbar): 흰 바탕, 위 1px 검정, 모서리·그림자 0
	   fluxlms-petercat(class-flp-shortcodes.php:2251·2267)이 본문 뒤에 인라인으로 찍는
	   `.pf-course-floating-banner.pf-visible { transform: … translateX(calc(-50% - 195px)) !important }`(0,2,0)이
	   같은 특이도로 뒤에 와서 이겼다(바가 왼쪽으로 195px 밀려 구매 버튼·탭을 덮음) → body 를 붙여 (0,2,1)·(0,3,1). */
	body .pc-course .pf-course-floating-banner,
	body .pc-course .pf-course-floating-banner.pf-visible {
		display: block !important;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 900 !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: var(--pc-space-3) var(--pc-space-4) !important;
		border: 0 !important;
		border-top: var(--pc-line-width) solid var(--pc-black) !important;
		border-radius: 0 !important;
		background: var(--pc-white) !important;
		box-shadow: none !important;
		transform: none !important;
	}

	.pc-course .pf-course-floating-banner .pf-purchase-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 44px !important;
		padding: 0 var(--pc-space-5) !important;
		border-radius: var(--pc-radius-pill) !important;
		background: var(--pc-purple-deep) !important;
		color: var(--pc-on-dark) !important;
		font-weight: 700 !important;
		text-decoration: none !important;
	}

	.pc-course .pf-course-floating-banner button {
		min-width: 44px !important;
		min-height: 44px !important;
		border: var(--pc-line-width) solid var(--pc-black) !important;
		border-radius: 50% !important;
		background: var(--pc-white) !important;
		box-shadow: none !important;
	}
}

@media (max-width: 767px) {
	.pc-course {
		padding-left: var(--pc-space-4);
		padding-right: var(--pc-space-4);
	}

	/* 탭 3개를 한 줄에 같은 폭으로 */
	/* 기준 폭 = 안쪽 탭 2개의 좌우 여백 합(12×4) — 후기 탭은 여백 24 가 기준이라 셋이 같은 폭이 된다 */
	.pc-course-tabs__list {
		flex: 2 1 calc(var(--pc-space-3) * 4);
		min-width: 0;
	}

	.pc-course-tabs__list .pc-course-tabs__tab,
	.pc-course-tabs__jump {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: 48px;
		padding: 0 var(--pc-space-3);
		font-size: var(--pc-fs-15);
	}

	.pc-course-reviews {
		padding: var(--pc-space-4);
	}

	.pc-course-reviews__filters {
		justify-content: stretch;
	}

	.pc-course-reviews__filters .pc-select {
		flex: 1 1 0;
		min-width: 0;
	}
}