/*
* VOD 과정 상세(/courses/{courseNo}) 화면 전용.
*
* 목록(/courses)과 같은 다크 셸을 쓴다 — 레이아웃 껍데기(.catalog-layout / .catalog-shell /
* .catalog-page / .catalog-menu-btn / .catalog-theme-toggle)는 css/vod/course-list.css 가 아니라
* 이 화면도 함께 쓰는 값이라 거기 정의를 그대로 물려받지 않고, base-layout 이 두 파일을 함께
* 로드하지는 않으므로 여기에 다시 둔다(화면 전용 CSS 는 서로를 참조하지 않는 것이 이 프로젝트 규약).
*
* 재사용 컴포넌트(.detail-hero / .detail-facts / .detail-cta / .curriculum /
* .level-gauge / .wish-btn)는
* theme/components.css 에 있고 전부 --mili-* 시맨틱 토큰을 쓰므로 만으로
* 다크로 재배색된다. 이 파일은 그 위에 얹는 화면 전용 블록(과정 소개·관련 스킬)과
* 시안 고유의 다크 표면 마감만 담는다.
*
* 흰색 알파(rgba(255,255,255,.04) 등)는 브랜드 색이 아니라 시안이 지정한 표면 값이라
* 토큰화하지 않고 그대로 둔다(home.css·course-list.css 상단 주석과 같은 방침).
*/
/* ===== 1) 본문 열 =====
얼개는 theme/components.css §8 공용이다. 폭은 화면 CSS 가 아니라 셸이 정한다
(design-system.md §7) — 이 화면은 shellWidth 를 넘기지 않으므로 기본값인
Standard(--mili-content-standard, 1200px)를 그대로 쓴다. 2열 그리드가 이미 우측
20rem 을 쓰므로 본문을 더 넓히면 읽기 줄이 길어진다 — 세로 여백만 이 파일 소관이다. */
.catalog-page {
padding-block: 3rem 4rem;
}
.catalog-page--detail {
padding-top: var(--mili-space-8);
}
/* ===== 1) 히어로 =====
전면 재실측(get_design_context, node 2769:91248/91263/91269, 2026-08-27) — 이전 구현(난이도별
그라디언트, coverImgAttachNo 있을 때만 사진)은 구조 자체가 틀렸다. 시안은 난이도와 무관하게
**항상** 사진 카드(.detail-hero__cover) + 고정 다크 정보 카드(.detail-hero__info)의 2단 구성이다.
PBL 상세(project-detail.jsp, 같은 날 별도 세션이 Figma node 2769:91849 기준으로 먼저 갱신)가
이미 이 정확한 패턴(.detail-hero 공용 셸 + course-card__thumb--N 폴백)을 구현해 놓았다 —
같은 디자인 시스템이라 클래스 이름·구조를 그대로 따르고(화면 전용 CSS 는 서로 참조하지 않는다는
규약이라 값은 복제), VOD 고유의 배지 배치(타입 배지 좌상단 + 수강중 필·북마크 우상단)만 다르게 얹는다.
.detail-hero 자체(min-height/padding/그라디언트 배경/::after 오버레이)는 theme/components.css
§"과정명을 얹는 표지"의 공용 정의다 — 여기서는 그 낡은 단일 그라디언트 레이아웃을 무력화하고
2단 구조로 다시 짠다(PBL 의 .detail-hero.pbl-card--* 무력화와 같은 방식). */
.detail-hero {
display: block;
min-height: 0;
padding: 0;
background: none;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-hero::after {
content: none;
}
/* 모바일(≤767px) — 2026-09-02 실측(node 3488:75109)에서는 표지가 기기 폭(390px)과 같아 뷰포트 끝까지
번지고 반경도 없었다(각짐). 2026-09-21 디자인 수정 요청으로 화면 좌우 여백 12px·반경 12px 카드형이
됐다. .app-page 가 폭으로 좌우 여백(--mili-page-padding)을 만들므로, 그 여백을 음수 마진으로
상쇄한 뒤 12px 만 남긴다 — 페이지 여백 토큰이 바뀌어도 표지 여백은 12px 로 유지된다.
overflow:hidden 은 components.css 의 .detail-hero 공용 정의가 이미 갖고 있어 자식(사진·정보 카드)
모서리도 함께 둥글게 잘린다. */
@media (max-width: 767px) {
.detail-hero {
margin-inline: calc(var(--mili-page-padding) * -1 + 0.75rem);
border-radius: var(--mili-radius-card);
border: 0;
}
}
/* ⚠️ 표지 내부 요소(cover/tag/bookmark/learners/info/eyebrow/title/summary/chips)의 모바일 값은
여기 두지 않는다 — 그 base 규칙들이 이 지점보다 "뒤"(파일 하단, §9 모바일 미디어쿼리)에 있어서
특정성이 같으면 소스 순서가 늦은 base 규칙이 이겨 버린다(실제로 이 실수로 aspect-ratio·배지
위치가 전혀 안 먹힌 채 배포될 뻔했다 — 2026-09-02). 모바일 오버라이드는 반드시 base 규칙보다
"뒤"에 와야 한다는 프로젝트 규칙(§9 도입부 주석, 홈 프로모 배너와 같은 교훈)을 여기서도 지켜
파일 하단 §9 블록에 모아 둔다. */
/* 사진 카드 — 실표지(coverImgAttachNo) 또는 공용 배경 40장(course-card__thumb--N, PBL 상세와
같은 자산) 중 하나가 항상 채운다. 852:360 은 Figma 프레임 실측 비율. */
.detail-hero__cover {
position: relative;
aspect-ratio: 852 / 360;
overflow: hidden;
}
.detail-hero__cover-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* course-card__thumb--N 폴백은 가 아니라 이라 --card-bg 를 직접 그려야 한다
(PBL 의 .detail-hero__cover-img 와 같은 이유). */
background-image: var(--card-bg, none);
background-position: center;
background-size: cover;
background-color: var(--mili-slate-900);
}
/* 2026-09-08 — 실물 표지()는 기본 배경() 위에 덧씌운다(roadmap-detail-cover__img 와
같은 방식). 가 onerror 로 제거되면 아래 기본 배경이 그대로 드러난다. */
.detail-hero__cover-img--photo {
position: absolute;
inset: 0;
}
/* 배지 가독성을 위한 어둡게 하는 오버레이 — PBL 의 .detail-hero__cover::after 와 같은 값
(공용 .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.vod(theme/figma-classes.css)가
이미 다크·라이트 정확한 값(Figma node 2042:215476 표준, 2026-08-31 전환)을 갖고 있다. 여기서는
표지 좌상단 절대위치만 얹는다 — 예전엔 이 규칙이 .tag.vod 값을 그대로 다시 박아 넣고 있었는데
(배경/테두리/색 전부 다크값 리터럴), 다크에서는 우연히 같은 값이라 안 보였지만 라이트에서는
.tag.vod 의 라이트 오버라이드(#2F871D 등)를 이 화면에서만 덮어써 버려 라이트 배지 색이
틀리게 나왔다(2026-09-02 사용자 지적 "화이트일때 박스 색상"). */
.detail-hero__tag {
position: absolute;
top: 1.25rem;
left: 1.25rem;
z-index: 1;
}
/* 관심목록(찜) 토글 아이콘 — 로그인 전이거나 신청 불가한 과정에서는 감싸는