/* * 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 공용이고, 폭은 시안 실측값을 그대로 쓴다. 상세가 목록(1360)보다 좁은 것은 의도한 것이다 — 2열 그리드가 이미 우측 20rem 을 쓰므로 본문이 넓으면 읽기 줄이 너무 길어진다. 두 화면 폭을 1180 으로 통일했다가 되돌렸다. */ .catalog-page { max-width: 1360px; padding: 3rem 2rem 4rem; } .catalog-page--detail { max-width: 1120px; padding-top: 2rem; } /* ===== 1-1) 히어로 ===== 실측(참고 앱 PublicCourseDetail): data-palette 단색 배경 + border white/10, px-6 py-10 md:px-10 md:py-14. 과정별 배경 사진(course-card__thumb--N) 대신 목록 카드와 같은 팔레트 단색을 쓴다 — 사진 세트는 PBL 상세(detail-hero, components.css)에서는 계속 쓰이므로 거기는 손대지 않는다. */ .course-detail-hero { position: relative; padding: 2.5rem 1.5rem; margin-bottom: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--banner); color: #fff; } @media (min-width: 768px) { .course-detail-hero { padding: 3.5rem 2.5rem; } } .course-detail-hero--p0 { --accent: #62b6f5; --banner: #1b6da8; } .course-detail-hero--p1 { --accent: #59c1f2; --banner: #0b759f; } .course-detail-hero--p2 { --accent: #aa83f2; --banner: #5d3d9d; } .course-detail-hero--p3 { --accent: #d878bd; --banner: #823671; } .course-detail-hero--p4 { --accent: #f68168; --banner: #a23e31; } .course-detail-hero--p5 { --accent: #e8ac45; --banner: #935b1b; } .course-detail-hero--p6 { --accent: #4fc5b5; --banner: #19756d; } .course-detail-hero--p7 { --accent: #e87894; --banner: #923852; } .course-detail-hero__inner { max-width: 56rem; } .course-detail-hero__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; } .course-detail-hero__eyebrow { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; } .course-detail-hero__title { margin: 1.25rem 0 0; max-width: 44rem; color: #fff; font-size: 1.875rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.25; } @media (min-width: 768px) { .course-detail-hero__title { font-size: 3rem; } } .course-detail-hero__lead { margin: 1.25rem 0 0; max-width: 42rem; color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .course-detail-hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .course-detail-hero__tag { padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 0.875rem; font-weight: 700; white-space: nowrap; } /* ===== 2) 브레드크럼 ===== */ .course-detail__crumb { margin-bottom: 1.25rem; } .course-detail__crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--mili-muted); } .course-detail__crumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--mili-fg-faint); } .course-detail__crumb a { color: var(--mili-muted); text-decoration: none; } .course-detail__crumb a:hover, .course-detail__crumb a:focus { color: var(--mili-brand-strong); } /* ===== 3) 본문 섹션 공통 ===== */ .course-section { margin-bottom: 1.25rem; } .course-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } /* 실측(참고 앱 Panel 내부 h2): text-2xl font-bold. */ .course-section__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--mili-ink); } .course-section__count { flex: 0 0 auto; font-size: 0.8125rem; color: var(--mili-muted); } /* 섹션 본문 판. 실측(참고 앱 Panel): p-6 md:p-8. */ .course-panel { padding: 1.5rem; border: 1px solid var(--mili-border); border-radius: 0; background: var(--mili-surface); } @media (min-width: 768px) { .course-panel { padding: 2rem; } } /* ===== 4) 과정 소개 ===== 원문이 "[교육목적]\n○ ...\n○ ..." 형태라 줄바꿈을 살려야 읽힌다. fn:escapeXml 을 거친 평문이므로 pre-line 으로 개행만 되살리고 HTML 은 해석하지 않는다. */ .course-desc { margin: 0; color: var(--mili-body); font-size: 0.9375rem; line-height: 1.8; white-space: pre-line; word-break: break-word; } /* ===== 5) 관련 스킬 ===== */ .course-skills__lead { margin: 0 0 1rem; color: var(--mili-muted); font-size: 0.8125rem; line-height: 1.6; } .course-skills__group + .course-skills__group { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid var(--mili-border); } .course-skills__field { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mili-brand-strong); } .course-skills__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } /* * 스킬 칩. 시안의 태그 칩(라운드 8px · 브랜드 10% 배경 + 25% 테두리)과 같은 규격이되, * [스킬명][수준][항목수] 세 칸이 붙은 형태다. */ .skill-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.5rem 0.3125rem 0.625rem; border: 1px solid var(--mili-border); border-radius: 0; background: var(--mili-panel-sunken); font-size: 0.8125rem; line-height: 1.3; } .skill-chip__title { color: var(--mili-ink); font-weight: 600; } .skill-chip__level { padding: 0.0625rem 0.375rem; border: 1px solid rgba(var(--mili-brand-rgb), 0.25); border-radius: 0; background: rgba(var(--mili-brand-rgb), 0.1); color: var(--mili-brand-strong); font-size: 0.6875rem; font-weight: 700; white-space: nowrap; } /* 학습항목 수. 정보 밀도가 낮은 값이라 가장 약하게 둔다. */ .skill-chip__count { min-width: 1.375rem; padding: 0.0625rem 0.25rem; border-radius: 0; background: var(--mili-border); color: var(--mili-muted); font-size: 0.6875rem; font-weight: 700; text-align: center; } /* ===== 6) 컴포넌트 보정 ===== */ /* 상단 navbar 가 없는 셸이라 --mili-navbar-height 만큼 띄울 이유가 없다 (components.css 의 기본값은 main-layout 이 있는 화면 기준). */ @media (min-width: 992px) { .detail-shell__aside { top: 1.5rem; } } /* 모바일에서는 액션 카드를 표지 바로 아래로 끌어올린다(신청 버튼이 스크롤 아래 묻히지 않도록). */ @media (max-width: 991.98px) { .detail-shell__aside { order: -1; } } /* 아코디언이 펼쳐지면 헤더의 화살표를 뒤집는다. */ .curriculum__head[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } .curriculum__head .bi-chevron-down { display: inline-block; transition: transform 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .curriculum__head .bi-chevron-down { transition: none; } } /* ===== 6-1) 액션 카드 내부 ===== 실측(참고 앱 PublicCourseDetail 사이드바 Panel): 레벨 배지 + dl(학습기간 등) + 버튼들. 여기 정의는 이 화면(course-detail.css) 안에서만 쓰고, 바깥 판(.detail-cta)과 모바일 전용 과정명(.detail-cta__course)·하단 캡션(.detail-cta__note)은 components.css 의 공용 정의를 그대로 쓴다(PBL 상세와 공유). */ .detail-cta__level-badge { display: inline-block; margin-bottom: 1.25rem; padding: 0.5rem 0.75rem; background: var(--mili-success-soft); color: var(--mili-success); font-size: 0.875rem; font-weight: 700; } .detail-cta__facts { margin: 0 0 1.25rem; font-size: 0.875rem; } .detail-cta__facts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--mili-border); } .detail-cta__facts-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .detail-cta__facts-row dt { color: var(--mili-muted); } .detail-cta__facts-row dd { margin: 0; color: var(--mili-ink); font-weight: 700; text-align: right; } /* "보관함에 담기" — 참고 소스는 전체 폭 텍스트 버튼(브랜드 아웃라인)이다. 목록 카드의 북마크 아이콘과 짝을 맞추려 하트가 아니라 북마크 아이콘을 쓴다(기존 .wish-btn 하트/빨강 조합은 PBL 상세와 공유하는 정사각형 아이콘 버튼이라 그대로 두고, 이 화면은 별도 클래스로 얹는다). */ .detail-cta__wish { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border: 1px solid rgba(var(--mili-brand-rgb), 0.55); border-radius: 0; background: transparent; color: var(--mili-brand); font-size: 0.875rem; font-weight: 700; cursor: pointer; } .detail-cta__wish:hover { background: var(--mili-brand-soft); } .detail-cta__wish--on { background: var(--mili-brand-soft); } /* ============================================================================ 7) 다크 표면층 () ---------------------------------------------------------------------------- 위까지는 --mili-* 시맨틱 토큰만 썼으므로 다크 body 만으로 이미 배색이 뒤집힌다. 여기에는 시안 고유의 마감(흰색 알파 표면·그라디언트 카드)만 둔다. ============================================================================ */ .mili-theme-dark .course-panel, .mili-theme-dark .detail-facts { border-color: rgba(255, 255, 255, 0.06); background: linear-gradient(146deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 60%, rgba(var(--mili-brand-rgb), 0.02) 100%); } /* 액션 카드는 판 위에 떠 있어야 해서 한 단계 더 밝게 + 그림자를 지운다(검정 위에서는 안 보인다). */ .mili-theme-dark .detail-cta { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); box-shadow: none; } .mili-theme-dark .detail-cta__course, .mili-theme-dark .detail-cta__note { border-color: rgba(255, 255, 255, 0.08); } .mili-theme-dark .curriculum { border-color: rgba(255, 255, 255, 0.06); } .mili-theme-dark .curriculum__section + .curriculum__section { border-top-color: rgba(255, 255, 255, 0.06); } .mili-theme-dark .curriculum__head:hover { background: rgba(255, 255, 255, 0.04); } .mili-theme-dark .curriculum__item { border-top-color: rgba(255, 255, 255, 0.05); } .mili-theme-dark .skill-chip { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); } .mili-theme-dark .skill-chip__count { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); } .mili-theme-dark .course-skills__group + .course-skills__group { border-top-color: rgba(255, 255, 255, 0.06); }