/*
 * 역량진단 안내·응시 화면 전용 배치.
 * .page-header, .widget-card, .empty-state 는 css/theme/components.css 의 공용 컴포넌트다.
 * 색상은 hex 대신 --mili-* 토큰만 참조한다.
 */

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

/* ===== 0) 본문 열 =====
   얼개는 theme/components.css §8 공용이고, 폭은 화면 CSS 가 아니라 셸이 정한다
   (design-system.md §7) — shellWidth 를 넘기지 않아 기본값인 Standard(--mili-content-standard,
   1200px)를 쓴다. 온보딩(AI 역량진단)·역량분석결과 화면과 폭·시작위치를 맞추기 위해서다
   (2026-08-10 이전엔 Narrow 960px 였다). 세로 여백만 이 파일 소관이다.
   (아래 .assessment-shell 은 Vue 마운트 컨테이너로 이름이 비슷하지만 다른 것이다.) */

.assess-page {
    padding-block: 3rem 4rem;
}

/* .widget-card 의 height:100% 는 대시보드처럼 카드가 여럿인 그리드 행에서 높이를 맞추기 위한
   것이다 — 이 화면은 카드가 하나뿐이라 그대로 두면 상위(.app-page 등)의 100% 체인을 타고
   불필요하게 늘어나 아래 empty-state/CTA·푸터와 겹친다(onboarding/onboarding.css 에서
   먼저 발견·수정한 것과 같은 버그). 내용 높이로 되돌린다. */
.assess-page .widget-card {
    height: auto;
}

/* ===== 안내 화면 ===== */

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

.assessment-guide li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mili-space-2);
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--mili-border);
    color: var(--mili-body);
    font-size: 0.9375rem;
}

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

.assessment-guide strong {
    flex: 0 0 6rem;
    color: var(--mili-ink);
}

/* 온보딩설문 CTA(onboarding.css .onboarding-cta/.onboarding-btn)와 톤을 맞춘다 —
   배경 카드 없이 텍스트만 가운데 정렬. */
.assessment-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* 진단 시작·재응시 CTA 의 시각 스타일은 theme/figma-classes.css 의 `.btn.large.default` 가
   정본이다. 2026-08-27 버튼 표준 일괄적용 2단계 — 여기 있던 .assess-btn / .assess-btn--primary
   규칙 4벌을 걷어냈다. --primary 는 주석에 이미 "`.btn.default` 와 같은 값"이라 적혀 있던
   중복이고, 기본 블록(49px·15px Bold)은 표준 large(52px·Body/B2) 로 흡수했다 —
   온보딩설문 .onboarding-btn 과 완전히 같은 처리다.
   `.assess-btn` 클래스는 아이콘 크기 훅으로만 남긴다. */
.assess-btn .bi {
    font-size: 1.5rem;
    line-height: 1;
}

/* ===== 응시 화면 ===== */

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

.assessment-progress {
    margin-bottom: var(--mili-space-6);
}

.assessment-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--mili-space-2);
}

.assessment-progress__step {
    font-weight: var(--mili-font-weight-bold);
    color: var(--mili-ink);
}

/* 2026-09-03 Figma QA(node 3563:186488) — 13px로 축소(기존 14px, --mili-body-b3-size). */
.assessment-progress__count {
    font-size: 13px;
    color: var(--mili-muted);
}

.assessment-question {
    background: var(--mili-surface);
    border: 1px solid var(--mili-border);
    border-radius: 0;
    box-shadow: var(--mili-shadow-sm);
    padding: 1.5rem;
    margin-bottom: var(--mili-space-5);
}

/* 2026-09-03 Figma QA(node 3563:186488) — "서브 타이틀"(질문 타이틀 위 역량분야 라벨) 14px로 확대(기존 12px). */
.assessment-question__field {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--mili-radius-pill);
    background: var(--mili-primary-bg);
    color: var(--mili-primary);
    font-size: 14px;
    font-weight: var(--mili-font-weight-semibold);
    margin-bottom: var(--mili-space-3);
}

.assessment-question__text {
    font-size: var(--mili-body-b1-size);
    font-weight: var(--mili-font-weight-bold);
    color: var(--mili-ink);
    line-height: 1.6;
    margin-bottom: var(--mili-space-5);
    word-break: keep-all;
}

/* 5점 척도(LINEAR_SCALE) 문항 위에 붙는 양끝 라벨. */
.assessment-scale-hint {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mili-space-3);
    color: var(--mili-muted);
    font-size: 0.8125rem;
}

.assessment-choices {
    display: flex;
    flex-direction: column;
    gap: var(--mili-space-2);
}

.assessment-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--mili-border);
    border-radius: var(--mili-radius-button);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.assessment-choice:hover {
    border-color: var(--mili-primary-border);
}

/* 2026-09-03 Figma QA(node 3563:186488) — 한번 탭해 선택된 박스들이 브랜드색(Primary)과
   중립색이 섞여 서로 다른 형상으로 보이던 것을 중립색 하나로 통일. Dark Neutral/870 ·
   Light Neutral/100(이 화면은 현재 다크 고정이라 라이트 규칙은 향후 라이트 지원 시를 대비). */
.assessment-choice--on {
    border-color: var(--mili-neutral-870);
    background: var(--mili-neutral-870);
}

.mili-light .assessment-choice--on {
    border-color: var(--mili-neutral-100);
    background: var(--mili-neutral-100);
}

.assessment-choice__text {
    flex: 1 1 auto;
    color: var(--mili-body);
    word-break: keep-all;
}

.assessment-nav {
    display: flex;
    gap: var(--mili-space-2);
    justify-content: flex-end;
}

/* 2026-09-08 Figma QA(node 3563:186488 항목5, "모바일 QA" 보드) — "버튼은 최대한 스크롤하지
   않아도 보일 수 있는 위치에 있도록" 실측 반영. 시안이 모바일 프레임뿐이라 데스크톱(위 기본형,
   문서 흐름 그대로)은 건드리지 않고 이 폭에서만 sticky 로 뷰포트 하단에 붙인다 — 문서 흐름
   안에서만 붙으므로 .assessment-hint 같은 뒤 형제 콘텐츠가 오면 자연스럽게 밀려 올라간다.
   position:fixed 로 하단 탭바와 겹치는 위험(components.css §"모바일 하단 탭바" 근처에서
   반복된 사고)을 감수하지 않고 더 가벼운 sticky 를 쓴다.
   실기기 확인(node tools/verify/shot.cjs, viewport-only) 에서 bottom:0 만 두면 ≤767px 의
   .app-bottom-nav(고정, 높이 90px, z-index 1035)가 그대로 덮어써 버튼이 안 보였다 — 그래서
   탭바 높이만큼 띄운다(.detail-cta--sheet 가 쓰는 것과 같은 90px 값,
   theme/components.css §"모바일 하단 탭바"). */
@media (max-width: 767px) {
    .assessment-nav {
        position: sticky;
        bottom: calc(90px + max(0px, env(safe-area-inset-bottom)));
        z-index: 2;
        padding: var(--mili-space-3) 0;
        background: var(--mili-canvas);
    }
}

.assessment-hint {
    margin-top: var(--mili-space-3);
    margin-bottom: 0;
    font-size: var(--mili-body-b3-size);
    color: var(--mili-muted);
    text-align: right;
}

/* ===== 결과 화면 =====
 * 2026-08-13 두 탭(온보딩설문·역량진단) 개편으로 옛 mypage/assessment-result.css 에서 이식했다.
 * 셸·머리글·탭·5각형 3개 그리드는 theme/components.css 의 재사용 컴포넌트(.mypage-panel/
 * .radar-grid/.radar-legend/.chart-box)를 그대로 쓴다 — 마이페이지·온보딩 전용이 아니라 공용이다.
 */

/* 2026-08-26 Figma node 2224:94076 재실측 — 진단일 표기(왼쪽, 일반 텍스트) + 다시 진단하기/추천
   로드맵 보기 버튼(오른쪽)을 종합 분석 아래·추천 학습 위 한 행에 둔다(2026-08-25엔 탭 아래 상단에
   뱃지형으로 뒀었는데, 시안 재확인 결과 하단 배치가 맞았다 — 되돌림). */
.assess-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mili-space-3);
    margin: 1.5rem 0 2.5rem;
}

.assess-actions.assess-result__actions {
    margin-top: 0;
    margin-left: auto;
}

/* Figma 실측(node 2334:74147): Body/B3/Regular 14px · Neutral/600 #989a9e. 정확히 일치하는
   --mili-* 토큰이 없어 근사 토큰(--mili-fg-muted, #868E96)을 쓴다 — 기존 관행과 같다. */
.assess-result__date {
    font-size: var(--mili-body-b3-size);
    color: var(--mili-fg-muted);
}

/* ---------- 요약 지표 ---------- */

.assess-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mili-space-2);
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

/* 2026-08-30 Figma 모바일 시안(node 3216:55465, 화면폭 390px) 실측 — 좁은 화면에서도 3열을
   그대로 유지한다. 이전엔 575.98px 미만에서 1열로 바꿨는데, 그 폭은 모바일 시안 화면폭보다
   넓어서 실제 휴대폰에서 계속 1열로 보이는 게 시안과 달랐다. */

.assess-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    /* Figma node 2224:94076 실측 — 좌우상하 20px 로 통일(2026-08-25, 기존 14px). */
    padding: var(--mili-space-5);
    border: 1px solid rgba(var(--mili-fg-rgb), 0.06);
    /* QA49(8qAqeXw50F8GKDGkeW0Pua, 2026-08-19) — .mypage-panel/.widget-card 와 같은 이유로
       각짐(0)을 카드 토큰으로 옮긴다. */
    border-radius: var(--mili-radius-card);
    background: linear-gradient(146deg,
        rgba(var(--mili-fg-rgb), 0.03) 0%,
        rgba(var(--mili-fg-rgb), 0.01) 100%);
}

.assess-kpi__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 0.375rem;
    border-radius: 50%;
}

.assess-kpi--score .assess-kpi__dot { background: var(--mili-stat-mission); }
.assess-kpi--answer .assess-kpi__dot { background: var(--mili-stat-time); }
.assess-kpi--correct .assess-kpi__dot { background: var(--mili-stat-badge); }

.assess-kpi__label {
    display: block;
    font-size: 0.625rem;
    font-weight: var(--mili-font-weight-semibold);
    color: var(--mili-fg-muted);
}

.assess-kpi__value {
    display: block;
    font-size: var(--mili-body-b1-size);
    font-weight: 800;
    line-height: 1.2;
    color: var(--mili-ink);
}

.assess-kpi__value small {
    margin-left: 0.125rem;
    font-size: 0.6875rem;
    font-weight: var(--mili-font-weight-semibold);
    color: var(--mili-fg-muted);
}

/* 영역별 세부역량 점수는 5각형 3개(.radar-grid/.radar-legend, theme/components.css)로 그린다 —
   2026-08-13 두 탭 개편으로 이 화면의 "영역별 점수" 막대 목록을 대체했다. */

/* ---------- 프로필 설문 응답(모바일 전용) ----------
   Figma 모바일 시안(node 3216:55465/3182:46215)에만 있고 데스크톱 시안(node 2224:94076 계열)에는
   없는 섹션이라, 데스크톱은 그대로 두고 767.98px 이하에서만 보인다(2026-08-30, 사용자 확인).
   마크업·나머지 스타일(.onb-profile*)은 theme/components.css 공용 컴포넌트를 그대로 쓴다. */
.assess-profile-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .assess-profile-mobile {
        display: block;
    }
}

/* ---------- 종합 분석 · 액션 ---------- */

/* 바로 위 역량 진단 결과(radar-grid) 섹션과 붙어 보이지 않도록 띄운다
   (theme/components.css .onb-profile-section 과 같은 2.5rem 섹션 간격 관례). */
.assess-summary-section {
    margin-top: 2.5rem;
}

.assess-summary {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--mili-fg-body);
    white-space: pre-line;
}

.assess-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mili-space-2);
    margin-top: var(--mili-space-5);
}

/* 추천 강의/프로젝트 배지 — 2026-08-25엔 이 화면(.assess-page)만 원형 아이콘+텍스트 전용
   (배경 없음, Figma node 2224:94076)으로 남겨 둔 예외였으나, 2026-08-31 사용자 확인으로
   폐기했다. 이제 다른 3화면(온보딩·마이페이지 내 학습·강의목록)과 같은 공용 .tag.vod/.tag.pbl
   (theme/figma-classes.css, node 2042:215476)을 그대로 쓴다 — 화면 전용 재정의 없음. */

/* ---------- 추천 학습 섹션 소제목(이 화면 전용) ----------
   Figma 실측(get_design_context, node 2334:74156/74269 — "다음 학습 목표"·"추천 강의" 둘 다 동일):
   Heading/H4/Bold 20px · Neutral/100 #f8f9fa. 대응 토큰 정확히 일치(--mili-heading-h4-size,
   --mili-ink) — 리터럴 없이 그대로 쓴다. "추천 프로젝트"도 같은 .reco-block__title 클래스라
   함께 바뀐다(2026-08-26 실측 결과 셋 다 같은 크기·색으로 확인).
   공유 컴포넌트(_recommend-section.jsp, 4개 화면 공용)인 .reco-block__title 자체는 건드리지
   않고 이 화면(.assess-page)에서만 재정의한다 — 온보딩·마이페이지 내 학습·강의목록은 기존
   브랜드 초록 유지. */
.assess-page .reco-block__title {
    font-size: var(--mili-heading-h4-size);
    color: var(--mili-ink);
}