/*
 * PBL 프로젝트 상세(/pbl/{projectNo}) 화면 전용 보정.
 * 재사용 컴포넌트(.detail-shell / .detail-hero / .detail-facts / .detail-cta /
 * .offering-list / .level-gauge)는 theme/components.css 에 있다.
 */

/*
 * 좁은 화면에서 예전에는 .detail-shell__aside { order: -1 } 로 사이드바를 표지 위로 끌어올렸다
 * (신청 버튼이 스크롤 아래 묻히지 않도록). 2026-08-17 제거 — 같은 aside 에 들어 있는
 * "추천 컨텐츠"까지 표지보다 먼저 나와, 아직 프로젝트를 보지도 않은 사람에게 다른 콘텐츠를
 * 먼저 들이미는 순서였다. 신청 버튼은 이제 하단 고정 바텀시트가 항상 노출한다
 * (theme/components.css §5-5-1 + js/common/detail-cta-sheet.js).
 * 그 결과 aside 는 제자리(본문 아래)에 머물고 추천 컨텐츠도 본문 뒤로 간다.
 */

/* 2026-08-13 QA19 재지적 — 섹션 제목이 Bootstrap 기본 .h6(약 16px)이라 강의 상세의
   .course-section__title(24px, course-detail.css)보다 훨씬 작았다. 같은 값으로 맞춘다
   (화면 전용 CSS 는 서로 참조하지 않는다는 프로젝트 규약이라 그대로 복제). */
.project-section__title {
	display: flex;
	align-items: center;
	gap: var(--mili-space-2);
	margin: 0 0 1rem;
	font-size: var(--mili-heading-h3-size);
	font-weight: var(--mili-font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--mili-ink);
}

/* 섹션 제목 옆 건수 배지("미션 N개 · 문제 N개", "역량 영역 N개") — Figma 실측(13px Regular
   #868e96). #868e96 는 대응 토큰이 없어 Syllabus 건수 텍스트(#adb5bd)와 같은 이유로
   --mili-muted 를 재사용한다(2026-08-26 확정 선례, components.css:1172-1174 참고). */
.project-section__count {
	font-size: 0.8125rem;
	font-weight: var(--mili-font-weight-regular);
	color: var(--mili-muted);
}

/* 본문 카드 통일 — Figma 실측(node 2769:91922/91933/91958 등) 결과 "프로젝트 소개"·
   "수행 조건과 산출물"·"개설 차수"·"관련 스킬"이 전부 같은 카드(배경 Neutral/870, 테두리
   Neutral/800, 반경 12px, 패딩 24px)를 쓴다. 공용 Bootstrap .card(components.css)는 반투명
   오버레이 배경(rgba(255,255,255,.03))이라 색이 달라 이 화면에서만 값을 맞춘다 — 다른
   .card 소비 화면에는 영향 없다.

   ⚠️ 2026-08-27 사고 — 처음엔 테마 구분 없이 덮어써서 라이트 모드가 검은 박스로 깨졌다
   (Neutral/870 은 원시 팔레트 값이라 라이트 대응값이 없다 — 당시엔 이 시안이 다크 프레임
   하나뿐이라 라이트 버전은 시안에 없었다). 그래서 다크에서만 이 값을 쓰고, 라이트는 원래
   .card 규칙(반투명 오버레이)을 그대로 뒀었다 — 이 페이지가 원래 다크 전용 셸이 아니라
   테마 토글이 되는 화면이라는 걸 스크린샷으로 뒤늦게 확인했다(반드시 라이트도 찍어 봐야
   하는 이유가 바로 이거다).

   2026-09-22 — 라이트 프레임 실측(node 4839:195333/195367 "Light/강의/상세/학습전")이 나와
   위 "라이트는 시안 없음" 전제가 깨졌다. 라이트는 Neutral/100 배경 + Neutral/400 테두리다
   (다크의 Neutral/870/Neutral/800과 짝). */
.mili-theme-dark .detail-shell__main .card {
	--bs-card-bg: var(--mili-neutral-870);
	--bs-card-border-color: var(--mili-figma-surface-hover);
}

.mili-light .detail-shell__main .card {
	--bs-card-bg: var(--mili-neutral-100);
	--bs-card-border-color: var(--mili-neutral-400);
}

.detail-shell__main .card {
	border-radius: var(--mili-radius-card);
}

.detail-shell__main .card-body {
	padding: 1.5rem;
}

/* "수행 조건과 산출물" — 항목마다 박스를 두르지 않고 한 카드 안에서 아이콘+라벨+본문을
   이어 쌓는다(위 카드 통일 주석 참고).
   ⚠️ 2026-08-27 사고 — 다른 카드는 .card > .card-body 2단 구조라 위 .card-body 패딩(1.5rem)이
   걸리지만, 이 dl 은 .card 하나에 dt/dd 를 바로 담아서(.card-body 가 없다) 패딩이 안 걸려
   내용이 카드 테두리에 바로 붙어 있었다 — .pbl-brief 자신에 패딩을 직접 준다. */
.pbl-brief {
	margin: 0;
	padding: 1.5rem;
}

.pbl-brief__label + .pbl-brief__value {
	margin-bottom: 1.25rem;
}

.pbl-brief__value:last-child {
	margin-bottom: 0;
}

/* 난이도 액센트 색 — project-list.css .pbl-card--basic/intermediate/advanced 와 같은 값을 그대로
   복제한다(화면 전용 CSS 는 서로 참조하지 않는다는 프로젝트 규약). 그라디언트(--banner)는 더는
   안 쓰므로 뺐다 — 아래 강의레벨 게이지에서만 --accent 를 쓴다. */
.pbl-card--basic        { --accent: var(--mili-green-500); }
.pbl-card--intermediate { --accent: #72b4ff; }
.pbl-card--advanced     { --accent: #ff996a; }

/* 강의레벨 게이지 — 공용 .level-gauge__step--on(theme/components.css)은 항상 브랜드 라임 한 색인데,
   Figma 표지 아래 "프로젝트 정보" 카드(node 2769:91894)를 실측하니 채움 점 색이 난이도별로 다르다
   (이 파일 안 "중급" 표본은 #2f6fed). 다른 난이도 표본은 시안에 없어 정확한 3색을 다 확인하진
   못했지만, 목록 카드가 이미 쓰는 난이도 액센트(--accent, 위 .pbl-card--* 정의)를 그대로 재사용하면
   "난이도마다 다르다"는 실측 결과와 새 리터럴 없이 맞출 수 있어 이렇게 근사한다 — VOD·로드맵
   미리보기가 쓰는 공용 .level-gauge 자체는 건드리지 않고 이 화면(.pbl-card--*)에서만 덮어쓴다. */
.pbl-card--basic .level-gauge__step--on,
.pbl-card--intermediate .level-gauge__step--on,
.pbl-card--advanced .level-gauge__step--on {
	background: var(--accent);
}

/* ---------- 표지 ----------
   Figma node 2769:91849(2026-08-27 갱신) 실측: 사진 카드(.detail-hero__cover) + 정보 카드
   (.detail-hero__info, eyebrow·제목·2줄 요약·메타 칩)의 2단 구성으로 바뀌었다. 이전엔(node
   1543:1089 기준) 난이도별 그라디언트 배경 카드 하나에 텍스트를 얹었지만, 이번 시안은 실사진
   표지 + 고정된 어두운 정보 카드다.

   ⚠️ 2026-08-27 정정 — 처음엔 옛 tier 그라디언트(pbl-card--basic/intermediate/advanced 의
   --banner)를 정보 카드 배경으로 그대로 옮겼는데, 실사진(색이 프로젝트마다 제각각)과 난이도
   그라디언트가 부딪혀 조합에 따라 색이 충돌했다(중급=파랑 그라디언트가 보라색 사진과 만나는
   경우 등). Figma 를 노드 단위로 다시 실측(get_design_context, node 2769:91872)하니 정보 카드는
   난이도와 무관하게 항상 같은 고정색(Neutral/870 #15181c = --mili-neutral-870)이었다 — 그라디언트
   자체가 애초에 틀린 값이었다(구조만 보고 이전 코드의 tier 배경 관행을 그대로 재사용한 것이
   원인). tier 클래스(pbl-card--*)는 이제 이 화면에서 배경에 쓰이지 않지만, 표지 오버레이가
   필요 없다는 것만 계속 알리기 위해 ::after 무력화는 남겨 둔다. */
.detail-hero.pbl-card--basic,
.detail-hero.pbl-card--intermediate,
.detail-hero.pbl-card--advanced {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-hero.pbl-card--basic::after,
.detail-hero.pbl-card--intermediate::after,
.detail-hero.pbl-card--advanced::after {
	content: none;
}

/* 모바일(≤767px) — VOD 상세(course-detail.css)와 같은 사용자 지시. 실측(get_design_context,
   같은 디자인 시스템의 VOD 쪽 node 3488:75109, 2026-09-02) 결과 표지가 기기 폭과 정확히 같고
   반경도 없다(각짐). .app-page 가 폭으로 만드는 좌우 여백을 음수 마진으로 상쇄해 뷰포트 끝까지
   번지게 한다 — 홈 프로모 배너(components.css)와 같은 기존 패턴. */
@media (max-width: 767px) {
	.detail-hero.pbl-card--basic,
	.detail-hero.pbl-card--intermediate,
	.detail-hero.pbl-card--advanced {
		margin-inline: calc(var(--mili-page-padding) * -1);
		border-radius: 0;
		border: 0;
	}
}

/* ⚠️ 표지 내부 요소·관련 스킬 박스·사이드바 중복 숨김의 모바일 값은 여기 두지 않는다 — 그 base
   규칙들이 이 지점보다 "뒤"(파일 하단, "모바일 전용 탭" 미디어쿼리)에 있어서 특정성이 같으면
   소스 순서가 늦은 base 규칙이 이겨 버린다(VOD course-detail.css 에서 실제로 이 실수로 aspect-
   ratio·배지 위치가 전혀 안 먹힌 채 배포될 뻔했다 — 2026-09-02). 모바일 오버라이드는 반드시
   base 규칙보다 "뒤"에 와야 한다. */

/* 사진 카드 — 실표지 또는 공용 배경 사진, 둘 다 실사진이라 항상 같은 비율 상자에 채운다. */
.detail-hero__cover {
	position: relative;
	aspect-ratio: 856 / 360;
	overflow: hidden;
}

.detail-hero__cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* course-card__thumb--N 폴백은 <img> 가 아니라 <span> 이라 --card-bg 를 직접 그려야 한다
	   (course-card__thumb--N 자신은 --card-bg 커스텀 프로퍼티만 정의하고, 실제로 그리는 건
	   그걸 쓰는 쪽이다 — components.css 의 .detail-hero 배경 규칙과 같은 관계). */
	background-image: var(--card-bg, none);
	background-position: center;
	background-size: cover;
	background-color: var(--mili-slate-900);
}

/* 배지 가독성을 위한 어둡게 하는 오버레이 — 공용 .detail-hero::after 와 같은 값. */
.detail-hero__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.45) 100%);
}

/* 콘텐츠 종류 태그 — 박스 스타일은 공용 .tag.pbl(theme/figma-classes.css)이 다크·라이트 정확한
   값을 갖고 있다(2026-09-02 project-detail.jsp 전환, VOD course-detail.jsp 와 같은 이유 — 이
   화면 전용 스타일이 라이트 색을 덮어써 "화이트일때 박스 색상"이 틀리게 나오는 문제를 막는다).
   여기서는 표지 좌상단 절대위치만 남긴다. */
.detail-hero__tag {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 1;
}

/* 상태·수강인원 배지 묶음 — Figma 상 표지 우상단에 한 줄로 붙어 있다.
   ⚠️ 2026-09-10 수정 — right 값이 찜 버튼(.detail-hero__bookmark, 동일한 top/right 1.25rem)과
   같아 데스크톱에서 두 요소가 정확히 같은 자리에 겹쳐 있었다. VOD 상세(course-detail.css)는
   버튼 폭(2rem)+간격만큼 왼쪽으로 밀어 겹침을 피하는데 이 화면엔 그 보정이 빠져 있었다 —
   같은 값으로 맞춘다. */
.detail-hero__cover-badges {
	position: absolute;
	top: 1.25rem;
	right: calc(1.25rem + 2rem + var(--mili-space-2));
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.detail-hero__learners {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-height: 32px;
	padding: 0.375rem 0.75rem;
	border-radius: var(--mili-radius-pill);
	background: rgba(0, 0, 0, 0.45);
	font-size: 0.8125rem;
	font-weight: var(--mili-font-weight-medium);
	color: var(--mili-neutral-50);
}

/* 관심목록(찜) 토글 아이콘 — VOD 상세(course-detail.css .detail-hero__bookmark)와 같은 값을 그대로
   복제한다(화면 전용 CSS 는 서로 참조하지 않는 프로젝트 규약). 예전엔 데스크톱에서 숨겼지만
   (사이드바 텍스트 버튼이 유일한 찜 동선이었다), 그 버튼을 없애면서(2026-09-09 사용자 지시)
   데스크톱에서도 표시하도록 VOD 와 통일했다 — 아래 모바일 미디어쿼리는 위치·크기만 다시 잡는다. */
.detail-hero__bookmark {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: var(--mili-radius-pill);
	background: rgba(26, 29, 34, 0.8);
	color: var(--mili-neutral-100);
	cursor: pointer;
}

.detail-hero__bookmark:disabled {
	cursor: default;
}

/* 상태 배지(수료/수행 중) 색 — Figma MO-상세 스펙(수강중=흰 배경, 수료=Primary/500 라임, 둘 다 어두운
   글자)은 공용 .course-card__badge--enrolled/--done(목록 카드·미리보기 모달과 공유, 어두운 배경+흰
   글자)과 다르다. 공용 클래스 자체를 바꾸면 다른 화면까지 색이 바뀌므로 표지 배지에만 좁혀 덮어쓴다
   (2026-09-03 사용자 지시). Primary/500 은 라이트 모드에서 값이 바뀌는 토큰(라이트 #afe57e)이라
   사진 위 오버레이인 이 배지엔 안 맞아 시안 다크 프레임 값을 리터럴로 고정한다(이 파일의 다른
   오버레이 배경(rgba(26,29,34,.8) 등)과 같은 방침). */
.detail-hero__cover-badges .course-card__badge--enrolled {
	background: var(--mili-neutral-50);
	color: var(--mili-neutral-900);
}

.detail-hero__cover-badges .course-card__badge--done {
	background: #b4ff39;
	color: var(--mili-neutral-900);
}

/* 정보 카드 — Figma 노드 2769:91872 실측: 난이도 무관 고정 배경(Neutral/870), 24px 균등 패딩.
   라이트 배경은 데스크톱 실측이 없어 모바일(§9, node 3482:154981)에만 있었다 — 2026-09-14 Figma
   QA(node 2224:100463, "강의 썸네일 디자인 형상에 맞출 필요") 재확인으로 course-detail.css와 같은
   근거(같은 컴포넌트, 모바일 확정값 재사용)로 데스크톱도 올린다. */
.detail-hero__info {
	padding: 1.5rem;
	background: var(--mili-neutral-870);
}

.mili-light .detail-hero__info {
	background: var(--mili-neutral-100);
}

.mili-light .detail-hero__eyebrow,
.mili-light .detail-hero__title,
.mili-light .detail-hero__summary {
	color: var(--mili-neutral-900);
}

/* font-weight: Figma QA(node 2224:100463, "강의 상세 타이틀: Heading/H2/Bold") 실측 — course-detail.css
   (vod)와 같은 근거로 bold 로 올린다. 모바일(§9)은 이번 QA 범위 밖이라 기존 semibold 를 유지한다. */
.detail-hero__title {
	margin: 0;
	max-width: 44rem;
	font-size: 2rem;
	font-weight: var(--mili-font-weight-bold);
	letter-spacing: -0.02em;
	line-height: 1.4;
	color: var(--mili-neutral-50);
	text-shadow: none;
}

.detail-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mili-space-2);
	margin-top: 2rem;
}

/* "목록으로" — course-detail.css(vod, node 2769:91448)와 같은 컴포넌트인데 이 화면엔 오버라이드가
   없어 theme/components.css 의 옛 정의(각짐·좁은 패딩)가 그대로 남아 있었다. 2026-09-14 Figma
   QA(node 2224:100463, "목록으로 버튼 Large 버튼으로 변경 필요 · Radius:5") — course-detail.css와
   같은 값(radius 5px, padding 20/12px, 테두리 Neutral/700, 글자 16px Medium Neutral/550)으로 맞춘다. */
.detail-shell__back {
	padding: 0.75rem 1.25rem;
	border-radius: var(--mili-radius-button);
	border-color: var(--mili-neutral-700);
	color: var(--mili-neutral-550);
	font-weight: var(--mili-font-weight-medium);
}

.mili-light .detail-shell__back {
	border-color: var(--mili-neutral-550);
	color: var(--mili-neutral-800);
}

.detail-hero__eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	font-weight: var(--mili-font-weight-regular);
	color: rgba(255, 255, 255, 0.7);
}

/* 2줄 요약 — 전용 컬럼이 없어 본문 앞부분을 근사한 것이라 클램프로 짧게만 보여준다.
   글자 크기·줄간격·색은 Figma 실측(16px/1.6/rgba(255,255,255,.8))과 맞춘다. */
.detail-hero__summary {
	margin: 0.75rem 0 0;
	max-width: 44rem;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Figma node 2769:91878/91879/91881/91883 실측(2026-08-27): 배경 Neutral/800(#2b2e33,
   --mili-neutral-800 과 정확히 일치), 모서리 5px(--mili-radius-button 과 값이 일치해 2026-09-02
   토큰으로 교체 — 의미상 버튼은 아니지만 반경 스케일은 값 기준으로 배정한다), 상하좌우 패딩
   동일 8px. 이전엔 반투명 흰 배경(rgba(255,255,255,.15))·필터 반경(8px)을 썼는데 색·둥근
   정도가 둘 다 시안과 달랐다. */
.detail-hero__chip {
	padding: 0.5rem;
	border-radius: var(--mili-radius-button);
	background: var(--mili-neutral-800);
	font-size: 0.875rem;
	font-weight: var(--mili-font-weight-bold);
	color: var(--mili-neutral-50);
}

/* 미션·문제 칩 내부(항목 span 2개 + 구분자) — 데스크톱은 폭이 넉넉해 한 줄로 붙는다.
   모바일 전용 세로 배치는 위 767px 미디어쿼리에서 덮어쓴다. */
.detail-hero__chip--stat {
	display: inline-flex;
	align-items: center;
	gap: var(--mili-space-1);
}

/* ---------- 미션 여정 ----------
   Figma node 1543:1147(Syllabus) 실측 — VOD 커리큘럼과 같은 아코디언(.curriculum,
   theme/components.css §5-6)을 재사용하고, 헤더 왼쪽 레이아웃(순번 배지 + 제목/메타 2단)과
   오른쪽(문제 수 + 세브론)만 미션 전용으로 얹는다. */

/* 순번 배지는 공용 .step-seq(theme/components.css §29)가 그린다 — 2026-08-17 일관성
   점검(V-01)에서 이 화면의 브랜드 틴트 pill 을 VOD 커리큘럼·로드맵 단계까지 3화면 통일
   기준으로 삼았었다. 실측(get_design_context, node 2058:230069 Dark·2058:232595 Light
   "Syllabus 프로젝트 커리큘럼" 실제 케이스, 2026-08-27 재실측)하면 라이트·다크가 서로
   반전된 24px 원이다 — 라이트는 검정 원(Neutral/900)+밝은 글자(Neutral/200), 다크는 흰 원
   (Neutral/100)+어두운 글자(Neutral/900). 이전엔 다크 값(32px, 사용자가 세 번째로 지적한
   값)만 넣고 라이트는 손대지 않아 공용 브랜드 틴트 pill(엉뚱한 라임색)이 그대로 새고
   있었다 — 크기(32→24px)도 VOD 커리큘럼(.curriculum__seq)과 맞춘다. VOD 커리큘럼·로드맵
   단계는 이 변경과 무관(그쪽 3화면 통일 결정을 뒤집는 게 아니라, 새로 만든 .curriculum--journey
   수식자로 이 화면만 스코프했다). */
.curriculum--journey .step-seq {
	width: 24px;
	height: 24px;
	background: var(--mili-neutral-900);
	color: var(--mili-neutral-200);
	font-size: 0.75rem;
	font-weight: var(--mili-font-weight-regular);
}

.mili-theme-dark .curriculum--journey .step-seq {
	background: var(--mili-neutral-100);
	color: var(--mili-neutral-900);
}

/* .mission-track__flags 는 2026-08-18 "건너뛸 수 있음"·"반복 수행" 배지를
   빼면서 쓰는 곳이 없어져 함께 지웠다. */

/* 아코디언 헤더 왼쪽 — 순번 배지 + (제목 · 메타) 2단. */
.mission-accordion__lead {
	display: flex;
	align-items: flex-start;
	gap: var(--mili-space-3);
	min-width: 0;
}

.mission-accordion__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.mission-accordion__title {
	font-size: var(--mili-body-b2-size);
	font-weight: var(--mili-font-weight-bold);
	color: var(--mili-ink);
	white-space: normal;
}

/* 아코디언 헤더 오른쪽 — 문제 수 + 세브론(펼치면 180도 회전). */
.mission-accordion__right {
	display: flex;
	align-items: center;
	gap: var(--mili-space-2);
	flex: 0 0 auto;
}

/* 2026-09-18 QA(node 3931:115816, "아이콘 박스 크기 20x20") — pbl/brief.css 의
   .pbl-block__summary::after 와 같은 패턴으로 아이콘 박스를 20x20 에 못박는다. */
.mission-accordion__right .bi-chevron-down {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mili-space-5);
	height: var(--mili-space-5);
	font-size: var(--mili-space-5);
	transition: transform 0.2s ease;
}

.curriculum__head[aria-expanded="true"] .mission-accordion__right .bi-chevron-down {
	transform: rotate(180deg);
}

.mission-accordion__detail {
	padding-top: var(--mili-space-1);
}

/* 학습목표 — 이 미션을 마치면 무엇을 할 수 있게 되는지. */
.mission-track__goal {
	margin: 0.5rem 0 0;
	font-size: var(--mili-body-b3-size);
	font-weight: var(--mili-font-weight-semibold);
	color: var(--mili-primary);
}

.mission-track__desc {
	margin: 0.375rem 0 0;
	font-size: var(--mili-body-b3-size);
	color: var(--mili-body);
}

.mission-track__meta {
	list-style: none;
	margin: 0.625rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mili-space-3);
	font-size: 0.8125rem;
	color: var(--mili-muted);
}

/* ---------- 수행 조건과 산출물 ----------
   항목마다 옅은 배경 상자를 둘러 경계를 준다(미션 브리핑 모달 — missions.css §5 — 과 같은 방식).
   이전에는 dt/dd 가 한 카드 안에서 margin 으로만 떨어져 있어 어디까지가 한 항목인지
   훑어보기 어려웠다. */
.pbl-brief__block {
	padding: 0.875rem 1rem;
	background: var(--mili-panel-sunken);
	border: 1px solid var(--mili-border);
}

.pbl-brief__block + .pbl-brief__block {
	margin-top: 0.875rem;
}

.pbl-brief__label {
	display: flex;
	align-items: center;
	gap: 0.4375rem;
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--mili-ink);
}

.pbl-brief__label i {
	color: var(--mili-brand);
	font-size: 1rem;
}

/*
 * 본문 서식은 .mili-rich(theme/components.css §24)가 함께 붙어 그린다.
 * ⚠️ white-space: pre-line 을 되살리지 말 것 — 줄바꿈은 서버(RichText)가 이미 HTML 로 옮겼고,
 * pre-line 을 걸면 태그 사이에 남은 개행이 빈 줄로 살아난다.
 */
.pbl-brief__value {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--mili-body);
}

/* ---------- 관련 스킬 ----------
   .course-skills__ 계열 / .skill-chip 계열은 theme/components.css §24-1 로 옮겼다(2026-08-12) —
   로드맵 미리보기 모달이 이 화면 CSS 를 로드하지 않는 페이지(roadmap/*)에 AJAX 조각으로 꽂히면서
   3번째 소비자가 생겨, 더 이상 화면마다 복제하는 대신 공용 컴포넌트로 승격했다. */

/* ---------- CTA 보조 버튼(로드맵) 색 보정 ----------
   Figma node 2769:92100/92102 실측: "수강신청"(브랜드 라임 아웃라인, .btn.outline)과 달리
   "내 로드맵에 담기"는 중립색 아웃라인이다(Neutral/700 테두리, Neutral/550 글자 — 시안 개별
   실측값은 border/text 가 갈렸지만, 이 프로젝트의 검증된 공용 Neutral 버튼(.btn.neutral,
   figma-classes.css)은 둘 다 --mili-neutral-550 로 통일된 값이 이미 재실측·확정돼 있어 그걸
   그대로 따른다 — 새 리터럴을 만들지 않는다).
   관심목록(찜)은 2026-09-09 부터 표지 아이콘(.detail-hero__bookmark)으로 옮겨 이 색 보정
   대상에서 빠졌다. */

/* 로드맵 담기 트리거 색(0개=중성/N개=초록)은 2026-09-02 부터 theme/components.css 의
   컴포넌트 클래스(.roadmap-add__trigger.neutral, §22)로 승격됐다 — 여기 있던
   화면 전용 오버라이드는 삭제(VOD 상세도 같은 이유로 동시에 정리). */

/* 실제 <button> 태그(수강신청 submit·로드맵 트리거)는 theme/reference.css:943 의
   `button { font: ... !important; }`(14px/500 전역 규칙)가 .btn.medium 의 12px/600 지정을
   이긴다 — VOD 상세(course-detail.css)와 같은 문제라 같은 방식으로 되돌린다. */
.detail-shell__aside .detail-cta__header-row button.btn.medium {
	font-size: var(--mili-caption-size) !important;
	line-height: var(--mili-caption-line) !important;
	font-weight: var(--mili-font-weight-semibold) !important;
}

/* 모바일 시트 배경 — Figma node 3522:41074 등 실측값(Neutral/900). VOD 상세와 달리 이
   화면은 원래 다크 표면 오버라이드가 없어(반투명 표면 버그도 없었다) --mili-surface
   (Neutral/870) 그대로였다 — 시안값으로 한 단계 더 어둡게 맞춘다. */
@media (max-width: 991.98px) {
	.mili-theme-dark .detail-cta--sheet {
		background: var(--mili-neutral-900);
		box-shadow: var(--mili-shadow-lg);
	}
}

/* ---------- 모바일 전용 탭(프로젝트 소개/커리큘럼/관련 스킬/추천 학습) ----------
   Figma 8qAqeXw50F8GKDGkeW0Pua, node 3009:47203/47443/47629/47969("프로젝트 상세" 모바일
   4탭) 실측(2026-08-30). 데스크톱은 그대로 롱스크롤(변화 없음, 사용자 지시)이고,
   ≤767px 에서만 js/pbl/project-detail.js 가 탭으로 전환한다(진행형 개선 — JS 없으면
   원래처럼 전부 이어 보인다). 탭 자체는 새로 만들지 않고 서비스 정본 밑줄탭(.tab-line,
   figma-classes.css "Tab" node 2042:215373)을 그대로 재사용한다 — 활성 흰 글자+라임 밑줄,
   비활성 회색 글자+회색 밑줄 값이 시안과 이미 일치해 새 리터럴이 필요 없었다.

   .pbl-detail-tabs.tab-line(0,2,0)이 .tab-line(0,1,0)보다 명시도가 높아 로드 순서와
   무관하게 항상 이겨 기본 숨김이 확정된다.

   2026-09-08 "탭 있으면 좌우 스크롤 안 되고 꽉 차게" 요청으로 마크업에 .tab-line--fill 을
   추가했다(figma-classes.css 정의, course-detail 과 같은 처리). */
.pbl-detail-tabs.tab-line {
	display: none;
}

/* "추천 학습" 탭 패널은 모바일 전용 카드 그리드다(desktop 은 사이드바의 .detail-related 를
   그대로 쓴다 — _related-content.jsp) — VOD 상세(course-detail.css §8)와 같은 이유로 기본
   숨김이고, 아래 미디어쿼리가 모바일 폭에서만 다시 보여준다. */
[data-pbl-tabpanel="recommend"] {
	display: none;
}

@media (max-width: 767px) {
	/* ----------------------------------------------------------------------
	   표지(히어로) 모바일 값 — VOD 상세(course-detail.css)와 같은 실측·같은 이유. base 규칙
	   (이 파일 상단)보다 반드시 "뒤"에 와야 특정성이 같은 프로퍼티에서 이긴다.
	   ---------------------------------------------------------------------- */
	.detail-hero__cover {
		aspect-ratio: 390 / 219;
	}

	.detail-hero__tag {
		top: 1rem;
		left: 1rem;
	}

	/* 북마크 — 모바일은 여백이 16px(데스크톱 20px 대신) 다(VOD 상세와 같은 값). */
	.detail-hero__bookmark {
		top: 1rem;
		right: 1rem;
	}

	/* 배지 그룹 해제 — 데스크톱은 .detail-hero__cover-badges 가 상태·학습인원을 한 flex 줄로 묶지만,
	   모바일은 상태 배지만 북마크 옆에 남고 학습인원은 표지 좌하단 단독 배지로 분리된다(VOD 상세와
	   같은 배치, 2026-09-03). display:contents 로 래퍼만 해제하고 DOM 은 그대로 둔다 — JSP 를
	   화면별로 다르게 만들 필요가 없다. */
	.detail-hero__cover-badges {
		position: static;
		display: contents;
	}

	.detail-hero__cover-badges .course-card__badge {
		position: absolute;
		top: 1rem;
		right: calc(1rem + 2rem + var(--mili-space-2));
		z-index: 1;
	}

	.detail-hero__learners {
		position: absolute;
		top: auto;
		right: auto;
		bottom: 1rem;
		left: 1rem;
		z-index: 1;
	}

	.detail-hero__info {
		padding: 0.75rem 1.25rem;
	}

	.mili-light .detail-hero__info {
		background: var(--mili-neutral-100);
	}

	.detail-hero__eyebrow {
		margin-bottom: 0.75rem;
		font-size: var(--mili-caption-size);
		line-height: 1.3;
	}

	.mili-light .detail-hero__eyebrow {
		color: var(--mili-neutral-900);
	}

	.detail-hero__title {
		font-size: var(--mili-heading-h3-size);
		font-weight: var(--mili-font-weight-semibold);
	}

	.mili-light .detail-hero__title {
		color: var(--mili-neutral-900);
	}

	/* 라이트 글자색 — 다크 전용 rgba(255,255,255,.8)를 라이트에도 그대로 쓰면 밝은 배경 위에서
	   거의 안 보인다. */
	.mili-light .detail-hero__summary {
		color: var(--mili-neutral-900);
	}

	/* 모바일 실측(Figma 8qAqeXw50F8GKDGkeW0Pua node 3482:154981, 2026-09-04) — 글자 크기 14px/
	   줄간격 1.3 이 데스크톱 실측값(16px/1.6, 2026-08-27 주석)과 다르다. QA 지적(node
	   3798:107244)으로 먼저 4줄 클램프만 넓혔었는데, 폰트 크기를 그대로 두면 2026-08-27 값이
	   여전히 이겨 시안(4줄에 14px)과 달리 16px 로 3~4줄 만에 꽉 찬다 — VOD 상세
	   (course-detail.css §9)와 같은 모바일 값으로 맞춘다. */
	.detail-hero__summary {
		font-size: var(--mili-body-b3-size);
		line-height: 1.3;
		-webkit-line-clamp: 4;
	}

	.detail-hero__chips {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
		margin-top: 1.5rem;
	}

	/* 미션·문제 칩(.detail-hero__chip--stat) — QA 지적(같은 노드): 3열 그리드 폭에서
	   "미션 10개 · 문제 50개"가 자연 줄바꿈되면 "개"한 글자만 다음 줄로 밀려 나온다.
	   구분자(·)를 숨기고 두 항목을 세로로 쌓아 항상 깔끔하게 2줄로 보이게 한다
	   (데스크톱은 폭이 넉넉해 한 줄로 붙는 게 자연스러워 이 규칙 밖에 둔다). */
	.detail-hero__chip--stat {
		flex-direction: column;
		gap: 0;
	}

	.detail-hero__chip--stat .detail-hero__chip-stat-sep {
		display: none;
	}

	.detail-hero__chip {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
		border-radius: 5px;
		font-size: var(--mili-caption-size);
		font-weight: var(--mili-font-weight-regular);
		text-align: center;
	}

	.mili-light .detail-hero__chip {
		background: var(--mili-neutral-50);
		color: var(--mili-neutral-900);
	}

	/* 사이드바 "추천 콘텐츠"(_related-content.jsp)는 데스크톱 전용 — 모바일엔 이미 "추천 학습"
	   탭이 같은 내용을 제공한다(VOD 상세와 같은 중복 제거). */
	.detail-shell__aside .detail-related {
		display: none;
	}

	/* "관련 스킬" — 섹션 전체를 감싸는 큰 박스를 뺀다(개별 스킬 칩만 각자 작은 카드,
	   VOD 상세 course-detail.css 와 같은 실측 근거 — node 2804:29459). .card 는 "프로젝트
	   소개"·"수행 조건과 산출물"·"개설 차수"·"관련 스킬" 여러 곳에 공용으로 쓰여 전역으로
	   벗기면 다른 섹션까지 박스가 빠지므로, 관련 스킬 섹션에만 좁혀 무력화한다. */
	[data-pbl-tabpanel="skills"] .card {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	[data-pbl-tabpanel="skills"] .card-body {
		padding: 0;
	}

	.pbl-detail-tabs.tab-line {
		display: flex;
	}

	[data-pbl-tabpanel="recommend"] {
		display: block;
	}
}

/* js/pbl/project-detail.js 가 활성 탭이 아닌 패널에 hidden 속성을 붙인다 — 데스크톱(JS 가
   껐거나 767px 초과)에서는 hidden 을 전부 떼어내므로 이 규칙은 사실상 모바일에서만 걸린다. */
.pbl-tabpanel[hidden] {
	display: none;
}

/* "추천 학습" 탭 카드 그리드 — 2026-09-22 사용자 지시로 전용 카드(.detail-recommend-card)를
   걷어내고 프로젝트 목록 카드 정본(project-list.css .catalog-grid/.pbl-card)을 그대로 재사용한다
   (JSP 가 project-list.css 를 직접 링크, mypage/wishlist.jsp 와 같은 패턴). 이 파일에 남길 스타일은
   없다. */
@media (max-width: 767px) {
	/* 2026-08-31 Figma QA(node 3433:21308) — 강의 상세(course-detail.css §8-3/8-4)와 같은 값을
	   그대로 복제한다(화면 전용 CSS는 서로 참조하지 않는 프로젝트 규약). .detail-cta__facts-row/
	   __note 는 로드맵 상세와도 공유하는 컴포넌트라 공용 정의(components.css)는 그대로 두고
	   이 화면 모바일 폭에서만 겹쳐 쓴다. */
	.detail-cta__facts {
		padding-bottom: var(--mili-space-4);
		border-bottom: 1px solid var(--mili-border);
	}

	.detail-cta__facts-row {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.detail-cta__note {
		padding-top: 0;
		border-top: 0;
	}

	.detail-shell__back {
		height: 2.25rem;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ---------- 댓글 ----------
   .content-comments(theme/components.css)는 VOD·PBL·로드맵 3화면 공용이라 원래 크기(17px)를
   그대로 둔다. 이 페이지 안에서는 다른 섹션(.project-section__title, 24px)과 나란히 있어
   눈에 띄게 작아 보인다는 지적(2026-08-27)에 따라 이 화면에서만 같은 크기로 맞춘다. */
.content-comments__title {
	font-size: var(--mili-heading-h3-size);
	gap: var(--mili-space-2);
}