/*
* 로드맵 목록·상세 전용 배치.
* .roadmap-track__head/__title/__count 와 .widget-card 는 css/theme/components.css 의 공용 컴포넌트를 재사용한다.
* 색상은 hex 대신 --mili-* 토큰만 참조한다(단, 학습유형 배색은 vod/course-list.css §.catalog-card--*
* 와 같은 선례를 따라 리터럴 hex 를 쓴다 — site 공용 토큰에 없는 값이다).
*/
/* ===== 프로모션 배너 =====
2026-08-31 — 강의·PBL·로드맵 세 목록이 함께 쓰는 공용 캐러셀이 되어 theme/components.css
§프로모션 배너 캐러셀(.mili-promo-*)로 옮겼다(마크업도 common/_promo-carousel.jsp 로 통합,
promoActive="roadmap" 로 이 화면 슬라이드를 기본 활성화한다). 이 화면 전용
.roadmap-promo-banner* 는 더 이상 쓰지 않는다(태블릿 구간 background-position 미세조정 등
화면별로 갈라져 있던 값은 강의 목록 실측을 정본으로 통일했다 — 재확인 필요). */
/* 2026-09-10 추가(get_variable_defs, node 4038:313088) — 강의·PBL 목록과 같은 근거로 라이트
숫자색은 #2F871D(Primary/Text)다. --mili-brand 는 다른 라운드 값을 옮겨적은 것이라 어긋난다.
공용 클래스지만 화면마다 별도 CSS 를 불러오므로 여기도 따로 필요하다. */
.mili-light .catalog-count-label__num {
color: #2F871D;
}
/* 2026-09-15 사용자 지적(node 4038:313088 재실측) — "전체 N개" 줄 아래 여백이 없었다. 강의·PBL
목록은 그 아래 필터·정렬 줄이 있어 자연히 간격이 생기지만, 이 화면은 바로 카드 그리드가
이어져 비어 보였다. 공용 컴포넌트(.catalog-count-row, theme/components.css)는 건드리지
않는다 — showcase/list.css 의 같은 선례(.showcase-page .catalog-count-row)를 그대로 따라
이 화면 셸 클래스로만 한정한다. */
.roadmap-page .catalog-count-row {
margin-block-end: var(--mili-space-6);
}
/* ===== 목록 카드 그리드 (Figma 8qAqeXw50F8GKDGkeW0Pua, node 2769:97997 다크 / 2769:97684 라이트, 2026-08-27 재설계) =====
VOD(.catalog-grid)·PBL(.pbl-grid)과 동일한 1/2/3열 브레이크포인트·카드 골격을 그대로 따른다. */
.roadmap-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--mili-space-5);
margin-bottom: var(--mili-space-6);
}
@media (min-width: 640px) {
.roadmap-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.roadmap-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* 2026-08-28 AI 판단 — 이 그리드만 강의(catalog-grid)·프로젝트(pbl-grid)·내 학습(learn-grid)이
전부 갖고 있는 ≤767px 2열 밀집 규칙이 빠져 있었다. 640px 미만이면 계속 1열이라 모바일에서
카드가 데스크톱 그대로(219px 매체·2줄 설명 포함)의 큰 카드로 나와 다른 목록 화면과 무게가
맞지 않는다. 이 화면 전용 Figma 모바일 노드를 아직 확인하지 못해, 다른 세 화면과 같은 비율
(매체 82px·2열·gap 8px)로 맞춘다 — 재확인 필요. */
@media (max-width: 767px) {
.roadmap-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
/* 2026-09-10 추가 — 강의(course-list.css)·PBL(project-list.css)이 이미 쓰는 모바일 오버라이드와
같은 이유(components.css .catalog-count-label 데스크톱 폰트 24px 가 모바일 시안보다 크다).
이 화면도 같은 공용 컴포넌트를 쓰므로 값을 맞춘다. */
.catalog-count-label {
font-size: 18px;
}
}
.roadmap-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--mili-border);
border-radius: var(--mili-radius-card);
background: var(--mili-surface);
box-shadow: var(--mili-shadow-sm);
overflow: hidden;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.roadmap-card:hover,
.roadmap-card:focus-within {
box-shadow: var(--mili-shadow);
transform: translateY(-2px);
}
.roadmap-card__link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
text-decoration: none;
color: inherit;
}
.roadmap-card__link:hover,
.roadmap-card__link:focus {
color: inherit;
}
/* 카드 상단 매체 영역 — 대표 이미지가 있으면 ![]()
(object-fit: cover), 없으면 강의·PBL 카드와
같은 공용 배경 40장(course-card__thumb--N, theme/components.css)을 그대로 쓴다
(마크업에서 .roadmap-card__media 에 course-card__thumb--${thumbIndex} 를 함께 건다). */
.roadmap-card__media {
position: relative;
height: 219px;
flex: 0 0 auto;
padding: 1.25rem;
background: var(--mili-neutral-900) var(--card-bg, none) no-repeat center / cover;
overflow: hidden;
}
/* 배경이 그라디언트 타일에서 실사진(course-card__thumb--roadmap-N, 업로드 대표 이미지 포함)으로
바뀌면서(2026-08-28) 태그 가독성이 흔들릴 수 있어, 강의/PBL 목록과 같은 톤의 어둡게 하는
오버레이를 더한다. z-index:auto 라 뒤에 오는 .roadmap-card__media-img(실사진) 위로는 안 깔린다. */
.roadmap-card__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.45) 100%);
}
.roadmap-card__media-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* "로드맵" 콘텐츠 타입 태그 — theme/figma-classes.css 의 .tag.roadmap(공용 컴포넌트, VOD/PBL
목록의 .tag.vod/.tag.pbl 과 같은 자리)을 그대로 쓴다. */
.roadmap-card__kind {
position: relative;
z-index: 1;
}
.roadmap-card__body {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1 1 auto;
padding: 1.5rem 1.5rem 1.5625rem;
}
.roadmap-card__title {
margin: 0;
min-height: 56px;
font-size: 1.25rem;
font-weight: var(--mili-font-weight-bold);
line-height: 1.4;
letter-spacing: -0.02em;
color: var(--mili-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 2026-09-11 Figma 재실측(node 4117:181760, get_design_context) — 설명 텍스트박스가 3줄
분량(54px, 14px/1.3)이다. 기존 2줄 고정은 낡은 값이었다. */
.roadmap-card__desc {
margin: 0;
min-height: 60px;
font-size: var(--mili-body-b3-size);
line-height: 1.25rem;
color: var(--mili-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 제작자 / 로드맵 구성(강의·프로젝트·외부링크 개수) 정의 목록 — VOD 목록 .catalog-card__facts
와 같은 구조(dl/dt/dd, 아이콘은 dt 안). */
.roadmap-card__facts {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--mili-space-2);
font-size: var(--mili-body-b3-size);
}
.roadmap-card__facts-row {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 20px;
}
.roadmap-card__facts-row dt {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(var(--mili-fg-rgb), 0.52);
font-weight: var(--mili-font-weight-regular);
}
.roadmap-card__facts-row dt i {
font-size: 0.9375rem;
color: rgba(var(--mili-fg-rgb), 0.45);
}
.roadmap-card__facts-row dd {
margin: 0;
color: var(--mili-fg-body, var(--mili-ink));
font-weight: var(--mili-font-weight-medium);
}
/* 2026-08-28 AI 판단(매체 219px→82px, 제목 2줄 고정, 설명 줄 제거)으로 잡았던 값을 2026-08-30
Figma node 3218:60258(get_design_context 실측)로 재확인 — 매체 82px/패딩 12px/제목 규격은
그대로 정확히 맞았고, 반경·본문 gap 만 실측값으로 고친다. 반경은 카드 실측 8px 에 가장 가까운
모양 토큰 --mili-radius-filter(8px)를 쓴다(위 프로모 배너와 같은 근거) — 데스크톱은
--mili-radius-card(16px) 그대로라 이 모바일 전용 override 만 추가한다. */
@media (max-width: 767px) {
.roadmap-card {
border-radius: var(--mili-radius-filter);
}
.roadmap-card__media {
height: 82px;
padding: 12px;
}
.roadmap-card__body {
padding: 12px;
gap: 0.75rem; /* 12px — Figma 실측(제목↔구성 정보 간격) */
}
.roadmap-card__title {
min-height: 39px;
font-size: 16px;
font-weight: var(--mili-font-weight-medium);
line-height: 1.2;
letter-spacing: normal;
}
.roadmap-card__desc {
display: none;
}
/* 2026-08-28 사용자 지적 — course-list.css .catalog-card__kind / project-list.css
.pbl-card__kind 와 같은 압축 비율로 맞춘다(이 화면 전용 모바일 시안은 아직 없어
기존 목록 카드 값을 그대로 따른 것 — 위 252번째 줄 AI 판단과 같은 근거). 태그 자체에
크기가 없었던 탓에 공용 .tag__icon 원형(20px)이 82px 매체 영역 안에서 튀어 보였다. */
.roadmap-card__kind {
font-size: 8.75px;
}
/* 2026-09-03 사용자 지적("태그 높이 자체가 다름") — 위 font-size·아이콘만 줄이고 정작
태그 알약의 height(공용 .tag:is(.vod,.pbl,.roadmap,.url), 32px)는 그대로 남아 있었다.
그 규칙이 클래스 2개 조합(:is() 안의 .roadmap 도 카운트)이라 .roadmap-card__kind 단독보다
specificity 가 높아 이겼다 — course-list.css/project-list.css 가 이미 겪은 것과 같은 함정
(그쪽은 .catalog-card__kind.tag/.pbl-card__kind.tag 로 묶어 specificity 를 맞춰 이겼다).
0.625 = 위 아이콘·폰트와 같은 압축비(20px→12.5px, 32px→20px).
2026-09-04 — 공용 .tag 그림자가 실측 근거 없이 들어갔던 것으로 밝혀져 걷어냈다
(figma-classes.css 참고). 이 스케일 규칙의 box-shadow 도 같이 뺀다. */
.roadmap-card__kind.tag {
height: 1.25rem; /* 20px = 32px * 0.625 */
padding: 2.5px 6.25px 2.5px 3.75px; /* 4/10/4/6px * 0.625 */
border-width: 0.625px;
gap: 2.5px; /* 4px * 0.625 */
}
.roadmap-card__kind .tag__icon {
width: 0.75rem;
height: 0.75rem;
}
.roadmap-card__kind .tag__icon > i,
.roadmap-card__kind .tag__icon > svg {
font-size: 0.4375rem;
}
.roadmap-card__facts {
gap: 0.25rem;
font-size: 0.625rem;
}
.roadmap-card__facts-row {
min-height: 0;
gap: 0.445rem; /* 7.125px — Figma 실측(아이콘↔텍스트 간격) */
}
/* 2026-09-08 사용자 지적 — VOD(.catalog-card__facts-row dt)/PBL(.pbl-card__facts-row dt)
목록 카드는 모바일에서 라벨 텍스트("제작자"/"로드맵 구성" 등)를 지우고 아이콘+값만
남기는데 로드맵 카드만 라벨 텍스트가 그대로 남아 있었다 — 같은 트릭(font-size:0)으로
맞췄었다. 2026-09-14 PC 영향 재검사로 라벨이 .roadmap-card__fact-label span 으로
마크업에 되살아나면서(list.jsp), 그 span 을 직접 숨기는 쪽이 더 명확해 font-size:0
트릭을 대체한다 — 동작은 그대로다. */
.roadmap-card__facts-row dt {
gap: 0;
}
.roadmap-card__facts-row dt i {
font-size: 0.75rem;
margin-right: 0.375rem;
}
.roadmap-card__fact-label {
display: none;
}
}
/* ===== 상세 헤더 (Figma 8qAqeXw50F8GKDGkeW0Pua, node 1542-4284/1542-3579) =====
2026-08-18 일관성 점검 L-05·L-06 이후로 제목 + 설명만 남는다.
- 뒤로가기 셰브런(.roadmap-detail-head__back) → 본문 하단 .detail-shell__back "목록으로" 로
대체(강의·프로젝트 상세와 같은 처리). 브레드크럼은 2026-09-11 Figma 재확인으로 제거.
- CTA(__cta)·메타(__meta-row/__meta/__meta-sep) → 우측 액션 카드(.detail-cta)로 이동.
그에 딸린 규칙(__main > __cta, __meta-row .btn, 화면별 flex-direction 분기)도 함께 걷었다.
이 헤더는 이제 .detail-shell__main 의 첫 요소다 — 강의 상세의 히어로와 같은 자리. */
.roadmap-detail-head {
margin: 0 0 2rem;
}
/* 표지(2026-08-28 신설, node 3100:57646 공개 / 3100:57371 마이페이지 실측, 사용자 확인) — 두 상세 화면이
함께 쓴다. 편집 화면(mypage/roadmap-edit.jsp)은 같은 .roadmap-detail-head 를 표지 없는 제목줄로 쓰므로
화면 클래스로 좁혀 둔다(전역으로 풀면 편집 화면 제목이 카드 테두리 안에 갇힌다). */
.roadmap-public-detail .roadmap-detail-head,
.mypage-roadmap-detail .roadmap-detail-head {
display: flex;
flex-direction: column;
border: 1px solid var(--mili-border);
border-radius: var(--mili-radius-card);
overflow: hidden;
}
.roadmap-detail-cover {
position: relative;
height: 22.5rem; /* 360px */
flex: 0 0 auto;
padding: 1.25rem;
background: var(--mili-neutral-900) var(--card-bg, none) no-repeat center / cover;
overflow: hidden;
}
.roadmap-detail-cover__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.roadmap-detail-cover__kind {
position: relative;
z-index: 1;
}
/* 모바일 전용 참여 상태 배지(node 3218:49873/52229 실측, 2026-08-30 신설, mypage/roadmap-detail.jsp
에서만 쓴다 — 공개 상세는 참여 상태 개념이 없다). 표지는 언제나 사진/그라디언트라 시안대로
테마 무관 고정 스크림을 쓴다(라이트 프레임 없음 — AI 판단). */
.roadmap-detail-cover__status {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 1;
padding: 0.41669rem 0.7225rem; /* 6.667px 11.556px — Figma 실측 그대로(스케일된 인스턴스라 소수점 값) */
border-radius: var(--mili-radius-pill);
background: rgba(26, 29, 34, 0.8);
color: var(--mili-neutral-100);
font-size: 0.7775rem; /* 12.444px 실측 */
line-height: 1.5; /* 18.667px 실측 */
font-weight: var(--mili-font-weight-bold);
white-space: nowrap;
}
@media (max-width: 767px) {
.roadmap-detail-cover {
height: 12rem;
}
}
/* 모바일 전용 진행률 섹션(node 3218:49873/53654 실측, 2026-08-30 신설) — 값·트랙·바 색은
액션카드 "내 진도"(.detail-cta__progress-*, 이 파일 위쪽)와 같은 토큰을 그대로 물려받는다. */
.roadmap-detail-progress {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 1.25rem;
background: var(--mili-surface);
border-top: 1px solid var(--mili-border);
border-bottom: 1px solid var(--mili-border);
}
.roadmap-detail-progress__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
font-size: var(--mili-body-b1-size);
font-weight: var(--mili-font-weight-semibold);
color: var(--mili-ink);
}
.roadmap-detail-progress__value {
font-family: 'Orbitron', inherit;
font-weight: var(--mili-font-weight-bold);
}
.roadmap-detail-progress__track {
height: 0.625rem;
border-radius: var(--mili-radius-pill);
background: var(--mili-border);
overflow: hidden;
}
.roadmap-detail-progress__fill {
height: 100%;
border-radius: var(--mili-radius-pill);
background: var(--mili-primary);
}
.roadmap-public-detail .roadmap-detail-head__main,
.mypage-roadmap-detail .roadmap-detail-head__main {
min-width: 0;
padding: 1.5rem;
background: var(--mili-surface);
}
.roadmap-detail-head__main {
min-width: 0;
}
.roadmap-detail-head__eyebrow {
margin: 0 0 1.25rem;
color: var(--mili-ink);
font-size: var(--mili-body-b3-size);
font-weight: var(--mili-font-weight-regular);
}
.roadmap-detail-head__title-row {
display: flex;
align-items: center;
gap: 0.625rem;
}
/* 2026-09-11 QA11(node 3439:81277, get_metadata 실측) 재정정 — 2026-08-31 결정(24px, h3 토큰)이
참조한 프레임이 이번 PC 전용 시안(4065:294322)과 달랐던 것으로 보인다. 이번 시안의 제목
텍스트 노드는 폭 802px 에 높이 45px 인데, 24px×1.4(h3 line)=33.6px 로는 못 미치고
32px×1.4=44.8px 가 실측 45px 와 정확히 맞아떨어진다(h2 토큰, get_metadata 로 재확인) —
QA 항목 1 "폰트 스타일 32px Bold"와도 일치. */
.roadmap-detail-head__title {
margin: 0;
font-size: var(--mili-heading-h2-size);
line-height: var(--mili-heading-h2-line);
font-weight: var(--mili-font-weight-bold);
color: var(--mili-ink);
}
/* padding-left 2.625rem 은 사라진 뒤로가기 셰브런 폭에 제목·설명을 맞추던 값이라 함께 걷었다. */
/* 2026-08-31 사용자 지적 — 시안은 18px(b1)이 아니라 14px(b3) 다.
2026-09-15 QA(node 3474:20252, "설명 사이즈 : 14px (Line Height : 130%)") 재확인 — line-height 가
b3 전용 토큰(18.2px = 14px×130%)이 아니라 t4(24px, 16px 기준) 토큰을 쓰고 있었다. 이 div 는
.mili-rich 도 같이 걸려 있어(theme/components.css §24, line-height:1.7 ≈24px) 우연히 같은
24px 로 보여 지금까지 드러나지 않았다 — .mili-rich 보다 더 구체적으로 걸어 확실히 이긴다. */
.roadmap-detail-head__lead {
width: 100%;
max-width: none;
margin: calc(var(--mili-hero-lead-gap) + 0.25rem) 0 0.75rem;
color: var(--mili-muted);
font-size: var(--mili-body-b3-size);
line-height: var(--mili-body-b3-line);
font-weight: var(--mili-font-weight-regular);
}
/* 표지 도입(2026-08-28)으로 헤더가 어두운 패널(.roadmap-detail-head__main) 안에 들어가면서
본문 톤도 시안(node 3100:57658 공개 / 3100:57381 마이페이지)대로 --mili-muted 대신 --mili-ink 로
맞춘다 — 표지를 쓰는 두 상세 화면 공통. 편집 화면은 표지가 없어 그대로 --mili-muted 다.
line-height 도 같이 여기서 재선언 — .mili-rich(line-height:1.7, theme/components.css §24)가
같은 명시도라 로드 순서로 이겨서 위 b3 토큰을 덮어썼다(2026-09-15). */
.roadmap-public-detail .roadmap-detail-head__lead,
.mypage-roadmap-detail .roadmap-detail-head__lead {
color: var(--mili-ink);
line-height: var(--mili-body-b3-line);
}
/* 설명 본문의 서식(문단·목록·제목·굵게·코드…)은 2026-08-28 부터 공용 .mili-rich
(theme/components.css §24)가 맡는다 — 갤러리 상세와 같은 규약. 여기 있던
"p/strong/b 를 전부 regular 로 눌러 톤을 맞추는" 규칙은 그것과 충돌해서 걷어냈다
(같은 명세도라 나중에 로드되는 이 파일이 이겨 굵게가 통째로 죽었다). */
/* 편집 화면 전용 헤더(왼쪽 정렬 flex + 좌측 셰브런 __back + 우측 __cta)는 2026-08-27 에
걷어냈다 — mypage/roadmap-edit.jsp 도 공용 .page-hero(가운데 정렬)로 옮겼고, 뒤로가기는
본문 하단 .detail-shell__back, 저장·취소는 기본정보 그룹 하단으로 갔다. */
.roadmap-detail-head__enrolled-hover {
display: none;
}
.roadmap-detail-head__enrolled-btn:hover .roadmap-detail-head__enrolled-default,
.roadmap-detail-head__enrolled-btn:focus-visible .roadmap-detail-head__enrolled-default {
display: none;
}
.roadmap-detail-head__enrolled-btn:hover .roadmap-detail-head__enrolled-hover,
.roadmap-detail-head__enrolled-btn:focus-visible .roadmap-detail-head__enrolled-hover {
display: inline;
}
.roadmap-detail-head__enroll-hover {
display: none;
}
.roadmap-detail-head__enroll-btn:hover .roadmap-detail-head__enroll-default,
.roadmap-detail-head__enroll-btn:focus-visible .roadmap-detail-head__enroll-default {
display: none;
}
.roadmap-detail-head__enroll-btn:hover .roadmap-detail-head__enroll-hover,
.roadmap-detail-head__enroll-btn:focus-visible .roadmap-detail-head__enroll-hover {
display: inline;
}
/* 기본은 참여(primary), hover/focus 는 취소(danger-outline) 톤으로 즉시 전환한다. */
.roadmap-detail-head__enroll-btn:hover,
.roadmap-detail-head__enroll-btn:focus-visible {
background: transparent;
border: 1px solid var(--mili-primary);
color: var(--mili-primary);
}
/* 화면별 분기(.roadmap-public-detail / .mypage-roadmap-detail 의 __meta-row·__cta 조정)는
2026-08-18 에 모두 걷었다 — 두 화면이 같은 .detail-shell + .detail-cta 구조가 되면서
분기할 것이 없어졌다. 남은 화면 한정 규칙은 아래 수정·삭제(마이페이지 전용)뿐이다. */
/* ===== 상세: 수정·삭제(마이페이지 전용 상세, mypage/roadmap-detail.jsp) =====
화면 전용 규칙(.roadmap-detail-head__edit/__delete)은 2026-08-28 에 걷어냈다 — 시안
재실측(node 3100:59474)의 삭제 = 경고 아웃라인, 수정 = 중성 아웃라인이 공용 버튼 카탈로그
(theme/figma-classes.css)의 `.btn.error` · `.btn.neutral` 과 같은 값이라 마크업을 그쪽으로
옮겼다. 예전 값(수정 = 라임 채움)은 시안이 바뀌기 전 것이다. */
/* ===== 상세: 학습참여하기 ===== */
.badge-enrolled {
display: inline-flex;
align-items: center;
gap: var(--mili-space-1);
padding: 0.375rem 0.875rem;
border-radius: var(--mili-radius-pill);
background: var(--mili-success);
color: var(--mili-surface);
font-size: var(--mili-body-b3-size);
font-weight: var(--mili-font-weight-semibold);
}
/* ===== 진행률 위젯의 widget-card 높이 보정 =====
theme/components.css 의 .widget-card 기본값은 height:100% — 대시보드 그리드(mypage/dashboard.jsp)
에서 형제 위젯과 높이를 맞추기 위한 것이다. 로드맵 진행률 위젯(공개 상세·내 로드맵 상세·편집
3곳 전부)처럼 그리드 밖에서 단독으로 쓰면 height:100% 가 페이지 셸의 height 사슬(.app-shell 등)을
타고 뷰포트 높이까지 늘어나 버린다(2026-08-12 실측 확인 — 화면엔 텅 빈 공간으로만 보여서
찾기 어려웠다). 콘텐츠 높이만 쓰도록 이 modifier 로 되돌린다. */
.widget-card--content {
height: auto;
}
/* ===== 상세: 내 진도(마이페이지 전용 상세, .detail-cta 정보표의 마지막 행) =====
Figma node 3100:59474 / 3100:57564~57569 실측(2026-08-28 사용자 확인). 카드 안 순서는
정보표 → 내 진도 → 버튼이고, 내 진도는 "최종수정일시" 아래 구분선이 그대로 이어지는
정보표의 마지막 행이다 — 그래서 별도 블록이 아니라 .detail-cta__facts-row 로 그린다
(행 간격·구분선 규칙을 공용 컴포넌트에서 그대로 물려받는다).
공개 상세는 참여 중이어도 진행률을 그리지 않는다(미리보기 성격, roadmap/detail.jsp 머리 주석).
예전(2026-08-18)에는 35px 퍼센트 + "N/M 완료" pill 이었는데 시안이 바뀌었다. */
/* 공개 여부 행 — 값 앞에 자물쇠 아이콘을 붙인다(내 로드맵 목록 카드 .roadmap-card__visibility 와 같은
아이콘 규약: 공개=열린 자물쇠, 비공개=잠긴 자물쇠). 색은 주지 않는다 — 정보표의 다른 값과 같은
톤이어야 하고, 이 표에서 색이 붙는 값은 시안상 "내 진도"뿐이다. 2026-08-28 사용자 지시로 표지
오버레이 배지에서 이 자리로 옮겼다(같은 값을 두 곳에 그리지 않는다). */
.detail-cta__facts-row--visibility dd {
display: inline-flex;
align-items: center;
gap: var(--mili-space-1);
}
/* 바(5px)가 라벨—값 줄 아래로 떨어지도록 이 행만 줄바꿈을 허용한다. */
.detail-cta__facts-row--progress {
flex-wrap: wrap;
}
/* 값만 라임 — 정보표의 다른 값은 --mili-ink 다. */
.detail-cta__facts-row--progress .detail-cta__progress-value {
color: var(--mili-primary);
}
.detail-cta__progress-track {
flex: 0 0 100%;
height: 0.3125rem; /* 5px — 시안 실측 */
margin-top: var(--mili-space-2);
border-radius: var(--mili-radius-pill);
background: var(--mili-border);
overflow: hidden;
}
.detail-cta__progress-fill {
height: 100%;
border-radius: var(--mili-radius-pill);
background: var(--mili-primary);
}
/* ===== 상세 패널(정보 바 + 학습 단계) =====
.page-hero 시안과 별개로 이 화면만 쓰는 컨테이너라 hex 없이 --mili-surface/--mili-border 로
맞춘다(다크 테마 값이 각각 Figma 실측 #15181C/#2B3036 과 동일해 리터럴이 필요 없다). */
.roadmap-detail-panel {
border: 1px solid var(--mili-border);
border-radius: var(--mili-radius-card);
overflow: hidden;
margin-bottom: var(--mili-space-6);
}
/* 정보 바(.roadmap-detail-panel__bar / __counts)와 마이페이지 전용 .roadmap-detail-panel__info
(구성 카운트 + 진행률을 담던 패널 상단 구획)는 2026-08-18 일관성 점검 L-05·L-06 으로
우측 액션 카드(.detail-cta__facts)로 옮겼다. 패널에는 이제 학습 단계(__body)만 남는다 —
두 구획을 톤 차이로 구분하던 --mili-surface 배경도 함께 필요 없어졌다. */
.roadmap-detail-panel__body {
padding: 1.875rem;
}
.roadmap-detail-panel__heading {
margin: 0 0 1.125rem;
font-size: var(--mili-body-b1-size);
font-weight: var(--mili-font-weight-bold);
color: var(--mili-ink);
}
/* 구성 요약 줄(2026-09-10 재추가, 위 주석) — 액션 카드 정보표와 같은 보조 텍스트 톤
(Body/B3/Regular, --mili-muted). 제목 위 간격은 __heading 의 margin-bottom 과 대칭으로 둔다. */
.roadmap-detail-panel__counts {
margin: 0 0 1.125rem;
font-size: var(--mili-body-b3-size);
color: var(--mili-muted);
}
/* ===== 상세 단계 목록 =====
좌측 레일(연결선 + 상태 아이콘)과 우측 카드를 나란히 두는 2열 구성. */
.roadmap-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.roadmap-step {
display: flex;
align-items: stretch;
gap: var(--mili-space-5);
}
.roadmap-step__rail {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
width: 1.875rem;
}
.roadmap-step__rail-line {
flex: 1 1 0;
width: 1px;
min-height: 0.75rem;
background: var(--mili-border);
}
.roadmap-step:first-child .roadmap-step__rail-line--top,
.roadmap-step:last-child .roadmap-step__rail-line--bottom {
visibility: hidden;
}
.roadmap-step__node {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.875rem;
height: 1.875rem;
margin: 0.25rem 0;
border: 1px solid var(--mili-ink);
border-radius: var(--mili-radius-filter);
background: var(--mili-surface);
color: var(--mili-muted);
font-size: 0.8125rem;
}
/* Figma 실측은 완료·진행중 노드 모두 라임(--mili-primary) 배경이다(초록 --mili-success 아님) —
아이콘 색은 --mili-primary-on 을 쓰면 다크(#18210E)/라이트(#FFFFFF) 가 각자 배경과 자동으로 맞는다. */
.roadmap-step__node--done,
.roadmap-step__node--in_progress {
border-color: var(--mili-primary);
background: var(--mili-primary);
color: var(--mili-primary-on);
}
/* 2026-09-11 QA11 재실측(node 3439:81277) — 데스크톱 패딩이 30/30px 이었는데 시안은 20/20px
다(모바일 ≤767px 은 이미 var(--mili-space-5)=20px 로 맞아 있었다 — 이번에 데스크톱만 그
값에 맞춘다). */
.roadmap-step__card {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1.25rem; /* 20px */
padding: var(--mili-space-5); /* 20px */
margin-bottom: var(--mili-space-3);
background: var(--mili-surface);
border: 1px solid var(--mili-border);
border-radius: var(--mili-radius-card);
transition: background-color 0.15s ease;
}
/* 2026-09-14 QA(node 3736:236449 "공통" 카드 1-1) — 제목 링크만 글자색이 바뀌던 걸(아래
a.roadmap-step__title:hover 참고, 값 자체는 크로스아웃되고 최종 결정이 "전체 카드
호버로 변경"이었다) 카드 전체 배경 호버로 바꾼다. 공용 리스트(.post-row:hover)가 이미
쓰는 --mili-surface-hover 를 그대로 재사용한다. */
.roadmap-step__card:hover {
background: var(--mili-surface-hover);
}
.roadmap-step--missing .roadmap-step__card {
background: var(--mili-bg);
}
.roadmap-step__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mili-space-3);
}
/* 2026-08-31 — 유형 태그(강의/프로젝트/URL)와 기간 배지를 이 줄로 모은다(node 3218:51779/52276
실측: STEP+상태 아이콘 좌, 유형·기간 태그 우, 한 줄).
2026-09-11 QA11 재정정(node 3439:81277) — 그 3218 시안은 모바일 형상이었다. PC 전용 시안은
유형 태그를 제목 줄(.roadmap-step__meta)에, 기간만 이 줄에 남긴다. 같은 태그 마크업을
두 자리(headrow=이 줄, titlerow=제목 줄)에 렌더해 두고 폭에 따라 한쪽만 보인다
(detail.jsp 의 c:set 캡처 참고) — 767px 을 기준으로 나뉘는 이 파일의 다른 규칙과 맞춘다. */
.roadmap-step__card-head-tags {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: var(--mili-space-1); /* 4px, node 3218:51786 실측 */
}
.roadmap-step__type-tag {
display: contents;
}
@media (min-width: 768px) {
.roadmap-step__type-tag--headrow {
display: none;
}
}
@media (max-width: 767px) {
.roadmap-step__type-tag--titlerow {
display: none;
}
}
/* 순번 — 강의·PBL 과 공유하는 공용 .step-seq 숫자 배지(2026-08-17 T-11, theme/components.css §29)와
달리 로드맵 관련 화면 셋은 "STEP N" 텍스트다(2026-08-28 사용자 확인, node 3100:57712 공개 /
3100:57444 마이페이지 실측 — 마크업에서 .step-seq 를 뺐다). 편집 화면(mypage/_roadmap-steps.jsp)은
한 줄 압축(2026-08-15) 때문에 그동안 숫자 배지를 그대로 썼지만, 2026-08-30 사용자 지시로
Figma 모바일(3218-49529/57594)·PC(3265-73743) 시안대로 이 텍스트 방식에 합류했다.
화면 클래스로 좁혀 두는 이유는 그대로다 — 전역으로 풀면 다른 곳의 .step-seq 배지 글자가 덮인다. */
.roadmap-public-detail .roadmap-step__seq,
.mypage-roadmap-detail .roadmap-step__seq,
.mypage-roadmap-edit .roadmap-step__seq {
font-size: var(--mili-body-b3-size); /* 14px */
font-weight: var(--mili-font-weight-semibold);
color: var(--mili-ink);
}
/* 상세 두 화면(공개·마이페이지)의 "STEP N" 옆 인라인 상태 아이콘 — ≤767px 전용(레일이 사라지는
폭에서만 켠다, 아래 ≤767px 규칙 참고). 데스크톱은 레일의 원형 아이콘(.roadmap-step__node)이
같은 정보를 이미 보여주므로 기본값은 숨김이다. */
.roadmap-step__seq-icon {
display: none;
}
.roadmap-step__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
/* 8px — node I4038:313195;98:486504(공개)/I4038:313855;115:554623(마이페이지) get_design_context
실측 gap-[8px]. 카드헤드↔.roadmap-step__block, .roadmap-step__block↔진행률 사이가 이 값이다. */
gap: var(--mili-space-2);
min-width: 0;
}
/* 카드헤드 바로 아래 그룹(유형태그+제목, 설명/링크/모집안내)만 묶는다 — 이 그룹 내부(제목↔설명)는
5px 로 위 .roadmap-step__body 의 8px 과 다르다(같은 노드 실측: Frame 2087339135 안 Link
y=0/h=32, 설명 텍스트 y=37 → 37-32=5px). 하나의 flex gap 으로는 두 값을 동시에 못 내서
detail.jsp/roadmap-detail.jsp 에서 이 그룹만 별도 컨테이너로 감쌌다. */
.roadmap-step__block {
display: flex;
flex-direction: column;
gap: 0.3125rem; /* 5px */
min-width: 0;
}
.roadmap-step__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mili-space-2);
}
/* 학습 기간 배지("N일 과정") — 카드헤드 우측(justify-content: space-between 이 STEP 라벨과 갈라 준다).
2026-09 재실측(node 3464:92650, get_design_context) — --mili-neutral-750(#46494e)가 아니라
--mili-neutral-800(#2b2e33) 불투명 배경 + Neutral/50 글자다(2026-08-28 실측 node 3100:57713은
구버전). */
.roadmap-step__duration {
display: inline-flex;
align-items: center;
padding: var(--mili-space-1) var(--mili-space-2); /* 4px 8px */
border-radius: var(--mili-radius-pill);
background: var(--mili-neutral-800);
font-size: var(--mili-body-b3-size); /* 14px */
font-weight: var(--mili-font-weight-medium);
color: var(--mili-neutral-50);
}
/* 시안은 다크 프레임 하나뿐이라 라이트 값은 시안에 없다 — .tag.neutral(theme/figma-classes.css)과
같은 명암반전 규칙을 AI 판단으로 따른다(같은 성격의 중성 pill). */
.mili-light .roadmap-step__duration {
background: var(--mili-neutral-300);
color: var(--mili-neutral-950);
}
/* 2026-08-31 사용자 지적(node 3218:51779 실측) — 시안은 설명도 제목처럼 한 줄 말줄임이다.
2줄 clamp 이던 것을 title 과 같은 단일행 ellipsis 로 바꾼다. */
.roadmap-step__desc {
display: block;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
font-size: var(--mili-body-b2-size); /* 16px */
line-height: 1.3125rem; /* 21px */
color: var(--mili-ink);
}
/* 스텝별 진행률(VOD·PBL 만, 로그인 + 수강 이력 있을 때). */
.roadmap-step__progress {
display: flex;
align-items: center;
gap: 0.75rem; /* 12px */
margin-top: var(--mili-space-1);
}
.roadmap-step__progress-track {
flex: 1 1 auto;
height: 0.4375rem; /* 7px */
border-radius: var(--mili-radius-pill);
background: var(--mili-border);
overflow: hidden;
}
.roadmap-step__progress-fill {
height: 100%;
border-radius: var(--mili-radius-pill);
background: var(--mili-neutral-50); /* Figma 실측 — 전체 진행률(위젯)만 라임, 스텝별 바는 흰색 */
}
.mili-light .roadmap-step__progress-fill {
background: var(--mili-ink); /* 흰 배경에 흰 바는 안 보인다 */
}
.roadmap-step__progress-value {
flex: 0 0 auto;
font-family: 'Orbitron', inherit;
font-weight: var(--mili-font-weight-bold);
font-size: 0.6875rem; /* 11px */
color: var(--mili-ink);
}
/* URL 항목의 YouTube 썸네일(youtubeThumbnailOf, RoadmapService) — 카드 우측에 나란히.
2026-09-01 사용자 지적 — 266px 는 옛 모바일 노드(1794-45600) 실측이었다. PC 전용 노드
(3265:70136, get_screenshot 실측)는 훨씬 작은 160x90(16:9)이라 그 값으로 맞춘다 — 266px
그대로면 1024–1279px(사이드바 아이콘 레일 상시 노출 구간, 카드 폭이 가장 좁아지는 폭)에서
본문이 55px 대까지 짜부라져 텍스트가 썸네일에 가려졌다(사용자 스크린샷으로 확인). */
.roadmap-step__thumb {
flex: 0 0 auto;
width: 10rem; /* 160px, Figma PC 노드 3265:70136 실측 */
aspect-ratio: 16 / 9;
border-radius: var(--mili-radius-control); /* 10px — Figma 실측과 일치 */
object-fit: cover;
}
/* 160px 로 줄여도 1024–1279px(프로젝트 표준 "좁은 데스크톱" 브레이크포인트, 사이드바가 아이콘
레일로 상시 자리를 차지해 카드 폭이 가장 좁다 — theme/components.css 의 같은 구간과 동일 근거)
에서는 여전히 본문이 빠듯하다. 이 구간만 썸네일을 숨긴다(사용자 지시: "일정 너비 이하에선
숨기던가") — ≥1280px(사이드바 240px 고정폭)과 <1024px(사이드바 드로어, 카드가 폭을 온전히
씀)는 이미 여유가 있어 그대로 둔다. */
@media (min-width: 1024px) and (max-width: 1279px) {
.roadmap-step__thumb {
display: none;
}
}
/* 화면 전용 유형 배지(.roadmap-step__type / --vod/--pbl/--ext)는 2026-08-28 에 걷어냈다 —
상세 두 곳·편집·후보 검색까지 전부 공용 .tag.vod/.tag.pbl/.tag.url(theme/figma-classes.css)로
갈아타 참조가 하나도 남지 않았다(node 3100:57449/57483/57533 실측). */
/* 2026-08-31 사용자 지적 — 시안(로드맵 학습 단계 카드)은 제목이 한 줄이고 넘치면 말줄임이다.
여기엔 min-width:0 가 없어(word-break:keep-all 만으로는 줄바꿈을 못 막는다) 긴 제목이 그대로
두 줄로 흘렀다 — 편집 화면(mypage/roadmap.css 의 .my-roadmap-steps .roadmap-step__title)은
이미 같은 처리가 돼 있어 상세 두 화면(공개·마이페이지)만 빠져 있었다. flex 자식이 자기
콘텐츠 폭 아래로 안 줄어드는 기본값(min-width:auto)을 0 으로 풀어야 ellipsis 가 실제로 먹는다. */
.roadmap-step__title {
display: block;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: var(--mili-heading-h4-size);
font-weight: var(--mili-font-weight-bold);
color: var(--mili-ink);
text-decoration: none;
word-break: keep-all;
}
/* 2026-09-14 QA(node 3736:236449 1-1) — 밑줄 대신 위 .roadmap-step__card:hover(카드 전체
배경)로 옮겼다. 포커스는 접근성상 표시가 필요해 밑줄 대신 outline 을 그대로 상속한다. */
a.roadmap-step__title:hover {
text-decoration: none;
}
.roadmap-step__title--plain {
font-weight: var(--mili-font-weight-medium);
}
.roadmap-step--missing .roadmap-step__title {
color: var(--mili-muted);
}
/* 2026-09-14 QA(node 3736:236449 1-2, URL 형 스텝) 재실측 — 다크·라이트가 서로 다른 Sky
단계를 쓴다(공용 Sky 램프는 primitives.css 상 테마 무관 단일값이라 여기서 명시적으로
나눈다). 기본 Dark=Sky/500, Light=Sky/600 · 호버 Dark=Sky/400, Light=Sky/700(호버시
밑줄도 삭제 — 위 1번 "링크 호버 상태일 때 밑줄 삭제" 공통 규칙). */
.roadmap-step__link {
display: block;
overflow: hidden;
color: var(--mili-sky-500);
font-size: var(--mili-body-b2-size);
text-decoration: underline;
text-overflow: ellipsis;
white-space: nowrap;
}
.mili-light .roadmap-step__link {
color: var(--mili-sky-600);
}
.roadmap-step__link:hover,
.roadmap-step__link:focus-visible {
color: var(--mili-sky-400);
text-decoration: none;
}
.mili-light .roadmap-step__link:hover,
.mili-light .roadmap-step__link:focus-visible {
color: var(--mili-sky-700);
}
.roadmap-step__note {
display: block;
margin-top: var(--mili-space-1);
font-size: 0.8125rem;
color: var(--mili-muted);
}
/* ===== 반응형 =====
프로젝트 표준 브레이크포인트(1024px 사이드바 전환, 768px 모바일)에 맞춘다. 목록(.roadmap-grid)만
768px 를 이미 갖고 있었고, 상세는 지금까지 전용 미디어쿼리가 없었다. */
@media (max-width: 768px) {
.mypage-roadmap-edit .roadmap-detail-head {
flex-direction: column;
align-items: stretch;
}
.roadmap-step__thumb {
width: 100%;
}
}
/* 2026-08-31 사용자 지적(node 3218:49873/52229 실측) — 레일(세로 연결선 + 원형 상태 아이콘이
카드 옆에 계속 이어지는 타임라인)은 이 시안에 없다. 각 스텝은 독립된 전체 폭 카드이고, 카드
사이는 16px 짜리 얇은 세로선 하나뿐이다(상태 아이콘은 카드 안 "STEP N" 글자 옆에 작게 들어간다
— JSP 의 .roadmap-step__seq-icon, d-lg-none 없이 이 미디어쿼리로만 노출한다). 데스크톱 마크업
(레일)은 그대로 두고 이 폭에서만 숨긴다 — 데스크톱 전용 타임라인 자체는 이번에 손대지 않는다. */
@media (max-width: 767px) {
/* node 3464:92645 get_design_context 실측 — "학습 단계" 목록을 한 번 더 감싸는 바깥 패널엔
테두리가 없다(배경도 페이지와 같은 --mili-bg). 개별 STEP 카드(.roadmap-step__card)만
각자 테두리를 가진다 — 데스크톱 전용 바깥 테두리가 이 폭에도 남아 있으면 "박스 안에 박스"
두 겹으로 보인다(2026-09 사용자 지적). */
.roadmap-detail-panel {
border: none;
border-radius: 0;
overflow: visible;
}
/* node 3464:92649 "Numbered List" 의 pt-[32px] 실측 — 제목(+시안엔 있는 부제)과 첫 카드 사이
간격. 데스크톱 값(1.125rem=18px)은 그대로 두고 이 폭만 32px 로 늘린다. */
.roadmap-detail-panel__heading {
margin-bottom: var(--mili-space-8); /* 32px */
}
/* node 3464:92645 의 px-[20px]는 화면 가장자리 기준 인셋이다 — 그런데 이 폭에서는 이미
.app-page 가 --mili-page-padding(20px)으로 같은 인셋을 주고 있어(theme/components.css),
여기서 또 좌우 20px 을 더하면 카드가 화면 가장자리에서 40px 이나 떨어져 시안보다
훨씬 좁아 보였다(2026-09 사용자 지적 — "카드랑 바깥 여백"). 좌우는 0, 세로(32/20)만 반영한다. */
.roadmap-detail-panel__body {
padding: var(--mili-space-8) 0 var(--mili-space-5);
}
.roadmap-steps {
gap: 1rem; /* 16px, 카드 사이 간격 = 시안의 Divider 자리 */
}
.roadmap-step__rail {
display: none;
}
/* 레일이 사라지면 .roadmap-step(rail+card 의 flex row)엔 카드 하나만 남아 전체 폭을 그대로 쓴다.
min-width:0 을 이 폭에서 체인 전체(li→card→head/자식)에 명시한다 — flex 자식의 기본값
(min-width:auto)은 콘텐츠의 최소 크기 아래로 안 줄어들어, "STEP N"+아이콘과 태그가 한 줄에
다 안 들어갈 때 줄바꿈·축소 대신 부모 박스 밖으로 그냥 넘쳤다(2026-08-31 실측 — STEP N 텍스트
자체엔 원래 min-width:0 이 없어 형제 태그를 오른쪽으로 밀어내고, 그 태그가 카드 폭을 넘어
뷰포트 바깥까지 나갔다). */
.roadmap-step {
min-width: 0;
}
.roadmap-step__card {
min-width: 0;
width: 100%;
flex-direction: column;
gap: var(--mili-space-3); /* 12px, node 3464:92650 get_design_context 실측(헤더-본문 간격) —
패딩 참고 스크린샷(3474:20258)의 16 주석은 구버전 실측이라 이 값으로 대체 */
padding: var(--mili-space-5); /* 20px 균일, node 3464:92650 실측(p-[20px]) */
/* 데스크톱 전용 margin-bottom(카드 간 간격의 유일한 수단)이 이 폭에서도 남아 있으면
.roadmap-steps 의 flex gap(아래, 1rem)과 이중으로 쌓여 카드 사이 실제 간격이 구분선
높이(아래 ::before, 1rem)보다 커진다 — 그 차이만큼 구분선이 위아래 카드에 닿지 않고
허공에 붕 떠 보였다(2026-09 사용자 지적 "라인이 뚝뚝 끊겨있음"의 실제 원인). gap 하나로만
간격을 주면 구분선이 정확히 그 간격을 채워 카드에 맞닿는다. */
margin-bottom: 0;
}
.roadmap-step__card-head {
min-width: 0;
width: 100%;
flex-wrap: nowrap;
}
.roadmap-step__body {
min-width: 0;
width: 100%;
}
.roadmap-step__seq {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.roadmap-step__card-head-tags {
flex: 0 0 auto;
}
.roadmap-step + .roadmap-step {
position: relative;
}
/* 카드 사이 얇은 구분선(시안의 "Divider Vertical", 16px) — 위 .roadmap-steps 의 gap 안에 그린다.
left 는 node 3464:92663 등 "Line" 프레임의 pl-[20px] 실측(카드 좌측 패딩과 같은 20px 정렬) —
28px(카드 안 아이콘 중심 추정값)는 구버전 추정치였다. */
.roadmap-step + .roadmap-step::before {
content: '';
position: absolute;
top: -1rem;
left: var(--mili-space-5); /* 20px */
width: 1px;
height: 1rem;
background: var(--mili-border);
}
.roadmap-step__card-head {
align-items: center;
}
.roadmap-step__seq {
display: inline-flex;
align-items: center;
gap: 0.3125rem; /* 5px */
font-size: var(--mili-body-b2-size); /* 16px, node 3464:92654 실측(기존 14px은 구버전) */
}
/* 데스크톱 레일에 있던 상태 원(.roadmap-step__node)과 같은 정보를 여기서 인라인으로 반복한다
(레일 자체가 이 폭에서 사라지므로). */
.roadmap-step__seq-icon {
display: inline-flex;
flex: 0 0 auto;
font-size: 1.25rem; /* 20px, node 3464:92653 아이콘 실측(size-[20px]) — 기존 16px은 구버전 */
color: var(--mili-muted);
}
.roadmap-step__seq-icon.bi-check-circle-fill,
.roadmap-step__seq-icon.bi-play-circle-fill {
color: var(--mili-primary);
}
/* 제목·설명 — node 3464:92661/92662 실측. 데스크톱은 h4(20px)/Bold 를 그대로 쓰지만
이 폭 시안은 제목 16px SemiBold, 설명 14px Regular 로 데스크톱보다 한 단계 작다. */
.roadmap-step__title {
font-size: var(--mili-body-b2-size); /* 16px */
font-weight: var(--mili-font-weight-semibold);
}
.roadmap-step__desc {
font-size: var(--mili-body-b3-size); /* 14px */
line-height: 1.3;
}
/* 2026-09-01 사용자 지시 — 이 폭(모바일)에서 URL 항목 썸네일은 아예 숨긴다. 이 화면(공개·
마이페이지 상세) 그리고 편집 화면(mypage/_roadmap-steps.jsp, css/mypage/roadmap.css 가 이
클래스를 재사용)이 근거로 삼는 모바일 시안(node 3218:49592/49873/52229, 2026-09-01 실측)엔
URL 항목이 제목·URL 텍스트만 있고 이미지가 없다 — 셋 다 이 규칙 하나로 처리된다. 데스크톱은
유지(width:100% 이던 예전 규칙은 이제 무의미해 걷어냈다) — 데스크톱 전용 시안까지 같은지는
확인하지 않아 그대로 뒀다. */
.roadmap-step__thumb {
display: none;
}
}
/* 마이 로드맵 상세(mypage/roadmap-detail)의 액션 카드는 버튼이 최대 4개(삭제·수정·학습 중·이어서
학습)라 가로로 늘어놓으면 각 버튼 폭이 좁아 라벨이 눌린다 — 이 화면에서만 세로로 쌓는다.
.detail-cta-sheet 계약상 컨테이너 클래스(.detail-cta__actions)는 그대로 두고 수식자만 붙였다. */
.detail-cta__actions--stacked {
flex-direction: column;
}
.detail-cta__actions--stacked > * {
flex: 0 0 auto;
width: 100%;
}
/* 삭제 · 수정만 한 줄에 반씩 나눠 놓는다(Figma node 3100:57571 실측 — 137px + 4px + 137px = 278px).
나머지(학습 중·이어서 학습)는 시안대로 전체 폭 한 줄씩이라 이 래퍼 밖에 둔다.
자식이