/*
 * 온보딩 사전진단 안내·응답 화면 전용 배치.
 * .page-header, .widget-card, .empty-state, .app-frame/.app-page 는 css/theme/components.css 의
 * 공용 컴포넌트다(assessment.css 와 같은 관례). 색상은 hex 대신 --mili-* 토큰만 참조한다.
 */

/* Vue 가 마운트되기 전 {{ }} 원문이 잠깐 보이는 것을 막는다. */
[v-cloak] {
    display: none;
}

/* 상단 여백은 .page-hero 가 갖는다(--mili-hero-top-gap 32px) — course-list.css 의
   .catalog-page 주석과 같은 관례다. 여기서 padding-block 으로 위까지 잡으면 상단바~제목
   간격이 다른 .page-hero 화면의 32px 이 아니라 64px 이 된다(2026-08-27 정정).
   .page-hero 가 없는 응답 화면(test.jsp)만 아래 .page-header 에서 같은 값을 직접 준다. */
.onboarding-page {
    padding-block-end: 4rem;
}

/* ===== 안내 화면 =====
   Figma node 1574:4969("역량진단") 실측 — 제목·설명은 .page-hero 와 같은 토큰
   (36px/40px 제목, 12px 설명 여백)을 쓴다.
   2026-08-13 두 탭 개편으로 intro.jsp 는 .page-hero(공용 프래그먼트)로 옮겼다 — 아래
   .onboarding-page .page-header* 는 응답 화면(test.jsp)이 계속 쓰므로 지우지 않는다. */

.onboarding-page .page-header {
    /* .page-hero 는 자기 margin-top 으로 상단 여백을 갖지만 .page-header 는 갖지 않는다 —
       이 화면(test.jsp)에서만 같은 리듬이 되도록 직접 준다. */
    margin-top: var(--mili-hero-top-gap);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.onboarding-page .page-header__title {
    font-size: var(--mili-hero-title-size);
    font-weight: var(--mili-font-weight-bold);
    line-height: var(--mili-hero-title-line);
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

/* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 1번 항목 — 응답 화면(test.jsp) 타이틀은
   모바일(≤767px)에서만 36px → 24px 로 줄인다. PC 는 이 QA 티켓의 대상이 아니라 그대로 둔다
   (2026-09-03 사용자 확인 — PC 시안(1978:192482)은 타이틀 자체가 없는 별개의 4단계 리디자인). */
@media (max-width: 767px) {
    .onboarding-page .page-header__title {
        font-size: var(--mili-heading-h3-size);
        line-height: var(--mili-heading-h3-line);
    }
}

.onboarding-page .page-header__lead {
    margin: var(--mili-hero-lead-gap) 0 0;
    color: var(--mili-ink);
    font-size: var(--mili-text-sm);
    line-height: var(--mili-line-tight);
}

/* "설문 안내" 카드 — Figma 실측 28px 카드 패딩 + 20px 헤더/목록 간격
   (공용 .widget-card 는 다른 화면에서 더 좁은 패딩을 쓰므로 이 화면 안에서만 넓힌다). */
/* .widget-card 의 height:100% 는 대시보드처럼 카드가 여럿인 그리드 행에서 높이를 맞추기 위한
   것이다 — 이 화면은 카드가 하나뿐이라 그대로 두면 상위(.app-page 등)의 100% 체인을 타고
   불필요하게 늘어난다(문항 4줄만 있어도 카드가 화면 하단까지 쭉 늘어나는 버그). 내용 높이로 되돌린다. */
.onboarding-page .widget-card {
    height: auto;
    padding: 1.75rem;
    /* 공용 --mili-surface(#15181C)보다 밝은 표면 — Figma 실측 #21252B 는 이 카드 전용
       음영이라 근접 토큰이 없다(가장 가까운 --mili-surface-raised #1E2227도 다르다).
       다크 전용 리터럴이라 라이트 테마(.mili-light)에서는 아래서 --mili-surface 로 되돌린다
       (안 그러면 라이트 배경 위에 다크 카드가 남아 글자가 안 보인다). */
    background: #21252b;
}

.mili-light .onboarding-page .widget-card {
    background: var(--mili-surface);
}

.onboarding-page .widget-card__header {
    padding: 0;
}

.onboarding-page .widget-card__title {
    font-size: var(--mili-heading-h4-size);
    line-height: var(--mili-heading-h4-line);
}

.onboarding-page .widget-card__body {
    padding: 1.25rem 0 0;
}

.onboarding-guide {
    margin: 0;
    padding: 0;
    list-style: none;
}

.onboarding-guide li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: var(--mili-space-3);
    padding: 1rem 0;
    border-bottom: 1px solid var(--mili-border);
    color: var(--mili-body);
    font-size: var(--mili-body-b2-size);
    line-height: 1.5rem;
}

@media (max-width: 640px) {
    .onboarding-guide li {
        grid-template-columns: 1fr;
        gap: var(--mili-space-1);
    }
}

.onboarding-guide li:last-child {
    border-bottom: 0;
}

.onboarding-guide strong {
    color: var(--mili-ink);
    font-weight: var(--mili-font-weight-bold);
}

.onboarding-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* 시작하기/재응시 버튼은 표준 `.btn.large`(52px·패딩 20/12px)를 쓴다 — 2026-08-27 버튼 표준
   일괄적용 2단계에서 여기 있던 크기 오버라이드(49px·28px 패딩, Figma 화면별 실측)를 걷어냈다.
   아이콘만 이 화면에서 크게 쓰므로 아래 규칙 하나만 남는다. */

.onboarding-cta .onboarding-btn .bi {
    font-size: 1.5rem;
    line-height: 1;
}

/* ===== 응답 화면 ===== */
/* 참고 시안(miliai-hddn /my/onboarding)의 "상단 브랜드/스텝 + 구간 진행바 + 중앙 정렬 문항 +
   번호 배지 카드형 보기 + 좌우 내비" 레이아웃을 이 프로젝트의 각진(--mili-radius:0)·
   라임 브랜드(--mili-brand) 다크 셸 토큰으로 옮긴 것이다. 실제 마크업은 그대로 옮기지 않았다. */

.onboarding-shell {
    max-width: 44rem;
    margin: 0 auto;
}

/* 응답 화면은 홈 최초 로그인 모달(css/common/onboarding-modal.css)과 같은 얼개를 쓴다 —
   카운터를 오른쪽 위에, 그 아래 구간 진행바에 번호+이름. 두 화면이 같은 설문이라
   생김새가 다르면 사용자가 다른 절차로 오해한다. */
.onboarding-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: var(--mili-space-3);
}

.onboarding-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mili-space-2);
    font-size: 0.6875rem;
    font-weight: var(--mili-font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mili-brand);
}

.onboarding-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mili-brand);
    box-shadow: 0 0 8px rgba(var(--mili-brand-rgb), 0.6);
}

/* 2026-09-07 재실측(node 3563:186531) — Pretendard:SemiBold 다. --mili-font-metric 은
   Orbitron(계기판용 별도 서체)이라 자모·숫자 모양이 시안과 다르게 보인다. */
.onboarding-step {
    margin: 0;
    font-family: var(--mili-font-sans);
    font-weight: var(--mili-font-weight-semibold);
    font-size: 0.875rem;
    color: var(--mili-fg);
}

/* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 2번 항목 — 실측(get_design_context,
   node 3563:186532/186536/186539) 결과 카운터·구간 라벨 모두 Caption/Semibold 12px 로 같다
   (QA 주석의 "13pt"는 작성자 눈대중 표기, 2026-09-03 사용자 확인). 모바일(≤767px)만 적용 —
   PC 는 이 QA 티켓의 대상이 아니다. */
@media (max-width: 767px) {
    .onboarding-step {
        font-size: var(--mili-caption-size);
    }
}

/* 2026-09-07 get_design_context 재실측(node 3563:186532) — 현재 단계 번호("01")만
   브랜드 그린, "/ 08" 는 흰색이다. 기존엔 <b> 가 .onboarding-step 의 기본색(흰색)을
   그대로 물려받아 번호가 강조되지 않았다. */
.onboarding-step b {
    /* <b> 기본값(브라우저 UA bolder)을 시안 그대로 SemiBold 로 고정. */
    font-weight: var(--mili-font-weight-semibold);
    color: var(--mili-brand);
}

/* 2026-09-07 재실측(node 3563:186532) — "/ 08" 는 회미한 회색이 아니라 Neutral/100(흰색)이다. */
.onboarding-step__total {
    color: var(--mili-ink);
}

/* 단계 진행바(A. 기본 정보 / B. 자가진단) */
.onboarding-phases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mili-space-3);
    margin-bottom: 2.5rem;
}

.onboarding-phase__bar {
    height: 3px;
    /* 2026-09-07 재실측(node 3563:186535/186538) — 막대 양끝이 둥근 필(pill) 모양이다. */
    border-radius: var(--mili-radius-pill);
    overflow: hidden;
    background: rgba(var(--mili-fg-rgb), 0.1);
}

/* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 2번 항목 — 진행바 두께 3px → 2px,
   모바일(≤767px)만. PC 는 이 QA 티켓의 대상이 아니다. */
@media (max-width: 767px) {
    .onboarding-phase__bar {
        height: 2px;
    }
}

.onboarding-phase__fill {
    height: 100%;
    background: var(--mili-line-strong);
    transition: width 0.2s ease;
}

.onboarding-phase--active .onboarding-phase__fill {
    background: var(--mili-brand);
}

/* 2026-09-07 재실측(node 3563:186536/186539) — Caption/Semibold(600). 기존 bold(700)·
   letter-spacing 0.04em(시안엔 자간 없음)은 실측과 다르다. */
.onboarding-phase__label {
    margin: 0.5rem 0 0;
    font-size: 0.6875rem;
    font-weight: var(--mili-font-weight-semibold);
    color: var(--mili-fg-faint);
}

/* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 2번 항목 — 구간 라벨 실측 12px(위
   .onboarding-step 주석 참고), 모바일(≤767px)만. PC 는 이 QA 티켓의 대상이 아니다. */
/* 2026-09-07 재실측(node 3563:186539) — 비활성 구간 라벨 색은 --mili-fg-faint 가 아니라
   Neutral/750(#46494e, 다크에서 훨씬 더 어둡다). */
@media (max-width: 767px) {
    .onboarding-phase__label {
        font-size: var(--mili-caption-size);
        color: var(--mili-neutral-750);
    }
}

.onboarding-phase--active .onboarding-phase__label {
    color: var(--mili-brand);
}

.onboarding-question {
    text-align: center;
    margin-bottom: var(--mili-space-6);
}

.onboarding-question__text {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mili-ink);
    line-height: 1.45;
    word-break: keep-all;
}

@media (min-width: 768px) {
    .onboarding-question__text {
        font-size: 1.625rem;
    }
}

.onboarding-question__lead {
    margin: 0 0 2rem;
    font-size: 0.9375rem;
    color: var(--mili-fg-muted);
    word-break: keep-all;
}

/* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 3번 항목 — 질문 타이틀 18px·서브 14px,
   모바일(≤767px)만. PC 는 이 QA 티켓의 대상이 아니라 위 26px/15px 그대로 둔다. */
/* 2026-09-07 재실측(node 3563:186542/186543) — 타이틀 굵기는 800 이 아니라 SemiBold(600)·
   줄높이 1.4, 서브 타이틀 색은 --mili-fg-muted(#868E96) 가 아니라 Neutral/600(#989a9e). */
@media (max-width: 767px) {
    .onboarding-question__text {
        font-size: var(--mili-body-b1-size);
        font-weight: var(--mili-font-weight-semibold);
        line-height: 1.4;
    }

    .onboarding-question__lead {
        font-size: var(--mili-body-b3-size);
        color: var(--mili-neutral-600);
    }
}

/* 5점 척도(LINEAR_SCALE) */
.onboarding-scale {
    max-width: 26rem;
    margin: 0 auto;
}

.onboarding-scale__row {
    display: flex;
    justify-content: center;
    gap: var(--mili-space-3);
}

.onboarding-scale__dot {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--mili-line-strong);
    background: var(--mili-panel-raised);
    color: var(--mili-fg-muted);
    font-family: var(--mili-font-metric);
    font-size: 1.0625rem;
    font-weight: var(--mili-font-weight-bold);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.onboarding-scale__dot:hover {
    border-color: var(--mili-brand);
}

.onboarding-scale__dot--on {
    border-color: var(--mili-brand);
    background: var(--mili-brand);
    color: var(--mili-brand-on);
}

.onboarding-scale-hint {
    display: flex;
    justify-content: space-between;
    margin-top: var(--mili-space-3);
    color: var(--mili-fg-faint);
    font-size: 0.8125rem;
}

.onboarding-choices {
    display: grid;
    /* 2026-09-10 Figma(node 4038:313911) 재확인 — 보기가 짧아도 항상 1열 풀폭이다(이전엔 넓은
       화면·짧은 보기에서만 2열 그리드였다). 열 수는 보기 길이와 무관해졌으므로 아래
       --long 변형은 이제 텍스트 정렬·크기만 바꾼다(열 수는 항상 1). */
    grid-template-columns: 1fr;
    /* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 4번 항목 — 박스 간 간격 8px.
       PC·모바일 공통 적용(2026-09-03 사용자 확인 — 색·반경과 달리 이 항목은 화면 크기 무관). */
    gap: var(--mili-space-2);
    text-align: left;
}

/*
 * 역량 문항은 보기가 레벨 서술문이라 최대 45자까지 온다(JS 가 보기 길이로 판단해 이 변형을 붙인다).
 * 짧은 보기와 달리 왼쪽 정렬 + 작은/중간 굵기로 세로로 읽기 쉽게 한다.
 */
.onboarding-choices--long .onboarding-choice {
    align-items: flex-start;
}

.onboarding-choices--long .onboarding-choice__text {
    font-size: var(--mili-body-b3-size);
    font-weight: var(--mili-font-weight-medium);
    line-height: 1.55;
}

/* PROFILE_MULTI 의 "기타(직접 입력)" 체크 시 나타나는 보조 입력창. */
.onboarding-other {
    grid-column: 1 / -1;
    margin-top: var(--mili-space-1);
    padding: 0 0.25rem;
}

.onboarding-choice {
    display: flex;
    align-items: center;
    gap: var(--mili-space-3);
    /* 2026-09-07 get_design_context 재실측(node 3563:186545, 이하 같은 노드) — 패딩
       16px/20px, 배경은 선택 여부와 무관하게 Neutral/870(다크)·Neutral/100(라이트) 고정.
       기존 min-height:4rem·--mili-panel-raised 는 실측과 달라 걷어낸다(버튼 실제 높이는
       패딩+본문 줄높이로만 나온다 — Figma 실측 52px). */
    padding: 1rem 1.25rem;
    border: 1px solid var(--mili-line);
    /* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 4번 항목 — 반경 5px, PC·모바일 공통. */
    border-radius: var(--mili-radius-button);
    background: var(--mili-neutral-870);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mili-light .onboarding-choice {
    background: var(--mili-neutral-100);
}

.onboarding-choice:hover {
    border-color: var(--mili-line-strong);
}

.onboarding-choice:focus-within {
    outline: 2px solid var(--mili-brand);
    outline-offset: 2px;
}

/* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 4번 항목 — 선택 시 배경이 화면마다
   달라 보이는 문제(브랜드 그린 틴트 --mili-brand-soft)를 걷어내고 실측값(Dark: Neutral/870
   #15181c, Light: Neutral/100 #f8f9fa)으로 통일한다. PC·모바일 공통 적용(사용자 확인).
   2026-09-07: 배경은 위 기본 상태(.onboarding-choice)와 이미 같은 값이라 여기서는
   테두리만 남긴다(중복 선언 제거). */
.onboarding-choice--on {
    border-color: var(--mili-brand);
}

/* 선택했을 때만 나타나는 우측 체크. 자리를 미리 잡아 두어야 글자가 밀리지 않는다.
   2026-09-07 픽셀 실측(playwright getBoundingClientRect) — line-height 미지정 상태라
   아이콘 줄높이가 브라우저 기본(24px)으로 잡혀, 텍스트 줄높이(18.2px)보다 커서 박스
   전체가 Figma 실측(52px)보다 6px 더 크게 렌더링됐다(58~59px). line-height:1 로 고정해
   아이콘 자체 높이(16px)만 차지하게 한다. */
.onboarding-choice__check {
    flex: 0 0 auto;
    color: var(--mili-brand);
    font-size: 1rem;
    line-height: 1;
    visibility: hidden;
}

.onboarding-choice--on .onboarding-choice__check {
    visibility: visible;
}

/* 2026-09-07 get_design_context 재실측(node 3563:186547/186551 등) — Body/B3, 14px·
   line-height 1.3. 기존 0.9375rem(15px)·line-height 미지정(줄 높이가 실측보다 큼)·
   항상 semibold(선택 여부 무관) 는 실측과 달라 사용자 지적(선택지 글씨 크기·박스 높이 다름)으로
   교정한다. 미선택은 Regular/Neutral·100, 선택은 SemiBold/Primary·500(브랜드 그린). */
.onboarding-choice__text {
    flex: 1 1 auto;
    color: var(--mili-ink);
    font-weight: var(--mili-font-weight-regular);
    font-size: var(--mili-body-b3-size);
    line-height: 1.3;
    word-break: keep-all;
}

.onboarding-choice--on .onboarding-choice__text {
    color: var(--mili-brand);
    font-weight: var(--mili-font-weight-semibold);
}

.onboarding-nav {
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
    margin-top: var(--mili-space-8);
}

/* Figma 보관함 QA(node 3563:186719, 2026-09-03) 반영 5번 항목 — 문항(특히 서술형 보기 1열
   변형 .onboarding-choices--long)이 길어지면 다음/제출 버튼이 스크롤해야 보인다는 지적.
   모바일(≤767px)만 화면 하단에 고정한다 — PC 는 이 QA 티켓의 대상이 아니다.
   배경은 페이지와 같은 --mili-bg 를 깔아야 아래로 스크롤되는 문항이 버튼 밑에 비치지 않는다. */
@media (max-width: 767px) {
    .onboarding-nav {
        position: sticky;
        /* 모바일 하단 탭바(.app-bottom-nav, theme/components.css §18b)가 fixed·z-index:1030·
           높이 90px 로 화면 맨 아래를 이미 차지한다. bottom:0 으로 두면 탭바 밑에 완전히
           가려 안 보인다(2026-09-03 스크린샷 검증에서 발견) — 탭바 높이만큼 띄운다. */
        bottom: 90px;
        z-index: 5;
        background: var(--mili-bg);
        padding-block: var(--mili-space-3);
    }
}

/* 이전/다음·시작하기 버튼의 시각 스타일은 theme/figma-classes.css 가 정본이다:
     이전(보조)      `.btn.medium.neutral`
     다음·제출       `.btn.medium.default`
     시작하기/재응시  `.btn.large.default`  (안내 화면 .onboarding-cta 안)

   2026-08-27 버튼 표준 일괄적용 2단계 — 여기 있던 .onboarding-btn / --ghost / --primary 규칙
   6벌을 걷어냈다. --primary 는 주석에 이미 "`.btn.default` 와 같은 값"이라 적혀 있던 중복이고,
   기본 블록은 `border-radius: 0`(디자인 토큰 위반 — 반경은 --mili-radius-* 만 쓴다)에 15px Bold
   라는 카탈로그에 없는 글자 조합이라 표준 크기 두 칸(medium 36px / large 52px)으로 흡수했다.
   `.onboarding-btn` 클래스는 안내 화면 아이콘 크기 훅(위 `.onboarding-cta .onboarding-btn .bi`)
   으로만 남는다 — 응답 화면(test.jsp) 버튼에는 더 붙이지 않는다. */

.onboarding-hint {
    margin-top: var(--mili-space-3);
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--mili-fg-faint);
    text-align: right;
}

/* 문항 번호 바로가기(.onboarding-dots)는 2026-08-05 에 뺐다 — 홈 모달과 얼개를 맞추면서
   23개 번호 버튼이 화면을 어지럽혔다. 남은 문항으로 가는 길은 이 링크가 대신한다. */
.onboarding-jump {
    margin-left: 0.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mili-brand);
    font-size: inherit;
    font-weight: var(--mili-font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== 결과 화면 =====
 * 2026-08-13 두 탭(온보딩설문·역량진단) 개편으로 신설. 셸·판은 theme/components.css 의
 * 공용 컴포넌트(.mypage-panel/.chart-box)를 쓴다 — 마이페이지 전용이 아니라 공용이다.
 */

/* 2026-09-03 Figma QA(node 3418:65483) — 결과(레이더·프로필) 아래·추천 학습 위로 옮기면서
   위쪽 당김 마진(-0.5rem, 탭 바로 아래 붙이던 값)을 없애고 /assessment 결과 화면의
   .assess-result__meta(assessment.css)와 같은 상하 여백으로 맞춘다. */
.onb-result__meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--mili-space-3);
    margin: 1.5rem 0 2.5rem;
    font-size: 0.8125rem;
    color: var(--mili-fg-muted);
}

/* 2026-09-07 Figma QA(node 3418:67276) — 좁은 폭에서 텍스트가 2줄로 넘쳐도 버튼이 아래로
   떨어지지 않고 같은 행 오른쪽에 남도록, 텍스트만 줄바꿈 대상(min-width:0)으로 두고
   버튼은 줄바꿈에서 제외한다(flex-shrink:0). */
.onb-result__text {
    flex: 1 1 auto;
    min-width: 0;
}

.onb-result__retake {
    margin-left: auto;
    flex-shrink: 0;
}

/* ---------- Figma QA(node 2224:94574, 2026-08-26) 반영 ----------
   역량 카드·프로필 설문 응답 타이틀(.mypage-panel__title 공용) 실측 — Heading/H4/Bold
   20px, 색은 Neutral/100(#f8f9fa)로 기존 --mili-ink(다크에서 이미 정확히 일치)와 같다.
   공용 컴포넌트는 그대로 두고 이 화면에서만 재정의한다(assessment.css:429 .reco-block__title
   과 같은 방침 — 마이페이지 등 다른 .mypage-panel__title 사용처는 영향 없음). */
.onboarding-page .mypage-panel__title {
    font-size: var(--mili-heading-h4-size);
    line-height: var(--mili-heading-h4-line);
    color: var(--mili-ink);
}

/* 진단 결과 5각형 아래 리스트(.radar-legend, theme/components.css) 실측 — 스킬명은
   Neutral/100(흰색, 기존 --mili-fg-body 회색에서 교체), Lv 값은 Regular(기존 800 굵기
   제거), 레벨명(소)은 12px·Neutral/100·Regular(기존 11px·회색·semibold 에서 교체). */
.onboarding-page .radar-legend__title {
    color: var(--mili-ink);
}

.onboarding-page .radar-legend__value {
    font-weight: 400;
}

.onboarding-page .radar-legend__value small {
    font-size: var(--mili-caption-size);
    font-weight: 400;
    color: var(--mili-ink);
}

/* "다음 학습 목표"/"추천 강의"/"추천 프로젝트"(.reco-block__title, 공용) 실측 — 셋 다
   Heading/H4/Bold 20px·Neutral/100. assessment.css:429 와 같은 방침으로 이 화면에서만
   재정의(마이페이지 내 학습·강의목록은 기존 브랜드 그린 유지). */
.onboarding-page .reco-block__title {
    font-size: var(--mili-heading-h4-size);
    color: var(--mili-ink);
}

/* ---------- 프로필 설문 응답 ----------
   .onb-profile* 는 2026-08-30 부터 theme/components.css 의 공용 컴포넌트다 — 역량진단
   (/assessment) 모바일 결과 화면도 같은 마크업·클래스를 재사용한다.
   영역별 5각형 3개(.radar-grid/.radar-legend) 도 같은 이유로 theme/components.css 에 있다. */