/*
 * 홈(/) 전용 스타일. WEB-INF/views/home.jsp 와 짝을 이룬다.
 *
 * mili-home-v3 시안을 JSP + 순수 CSS 로 옮긴 것이다. 수치(폰트 크기·자간·여백·라운드·
 * 그라디언트 각도와 스톱)는 시안 App.tsx 의 값을 그대로 쓴다 — 비슷하게 다시 잡지 않는다.
 *
 * ★ 브레이크포인트는 1280px 다.
 *   원본은 Tailwind 의 xl(1280px)에서 갈라진다(App.tsx: `hidden xl:flex` / `xl:hidden`).
 *   1280px 미만은 MobileHomeView + MobileHeader + MobileSidebar(닫기 X 포함) 이고,
 *   1280px 이상만 좌측 사이드바가 상시 노출되는 데스크톱 캔버스다.
 *
 * 누출 방지
 *   - 셀렉터는 전부 .home-* 접두사(사이드바는 .app-sidebar-*, theme/components.css).
 *   - 엘리먼트 셀렉터와 Bootstrap 클래스 재정의를 쓰지 않는다.
 *   - 브랜드 라임은 --mili-brand / --mili-brand-rgb 토큰으로 참조한다.
 *
 * ⚠️ 2026-08-06 방침 변경. 예전 주석은 "흰색 알파(rgba(255,255,255,.04) 등)는 원본이 지정한
 * 표면 값이라 그대로 둔다"였다. 그 탓에 라이트 모드에서 흰 판 위에 흰 표면·흰 글자가 겹쳐
 * 홈이 통째로 읽히지 않았다. 참고 원본도 라이트에서는 같은 값을 뒤집는다(personal-home.css:249-260).
 * 그래서 표면·경계·글자 계조를 시맨틱 토큰으로 옮겼다 — 다크 렌더링은 사실상 그대로다
 * (--mili-fg 다크값이 #F8F9FA 라 낮은 알파에서 흰색과 구분되지 않는다).
 *
 * 테마와 무관하게 리터럴로 남긴 것:
 *   - .home-card--profile / --recent 의 유리판 바탕(아래 .mili-light 블록이 따로 뒤집는다)
 *   - .home-stat 의 어두운 바탕 rgba(21,21,21,0.8)(2026-08-31 실측, 시안 #151515 에 대응 토큰 없음,
 *     라이트 값은 아래 .mili-light 블록 참고)
 *   - 인기 학습 강좌 항목의 유형 배지(VOD/PBL)는 더 이상 홈 전용 색이 아니다 — 공용 Tag 표준
 *     (.tag.vod/.pbl, theme/figma-classes.css)으로 합쳤다(2026-08-31, home.jsp 함께 수정).
 * 2026-08-31: 도트 필드(js/home-pixel-field.js)의 팔레트가 CSS 로 못 뒤집는 셰이더 리터럴
 * 고정이었던 문제는 해결했다 — 색 5단계를 uniform 으로 빼고 테마별 값(DARK_SHADES/
 * LIGHT_SHADES, reactbits.dev/backgrounds/pixel-blast 라이트 예시 파라미터)을 JS 에서 올린다.
 * 이 CSS 파일은 더 이상 관여하지 않는다.
 *
 * ⚠️ 2026-08-06 레이아웃 개편. 1920 = 271(사이드바) + 1649(콘텐츠) 산술의 고정 캔버스를
 * js/home.js(initCanvasFit)가 transform: scale() 로 뷰포트에 맞추던 방식을 걷어내고
 * Wide(--mili-content-max, 1440px) 일반 흐름으로 다시 짰다(design-system.md §7). 절대좌표로
 * 흩어 놓던 학습 여정 노드(.home-node)도 flex 가로 나열로 바꿨다 — 참고 저장소(.reference/
 * miliai-hddn)의 홈도 여전히 같은 고정 캔버스 방식이라(2026-08-06 확인) 그대로 베낄 참고 원본이
 * 없었다. 시각 요소(스탯·진행률 바·프로필/최근 학습 카드·타이포·색)는 시안 값을 그대로 옮기고,
 * 배치(절대좌표 vs flow)만 이 저장소가 새로 설계한 것이다 — 이후 참고 저장소가 실제로 플로우
 * 레이아웃으로 바뀌면 그때 다시 맞춰 본다.
 *
 * ⚠️ 2026-08-11 재수정. 위 flex 가로 나열은 Figma 실측(fileKey 8qAqeXw50F8GKDGkeW0Pua,
 * node 1354:990)과 어긋났다 — 실제 시안은 5단계가 한 줄이 아니라 히어로~카드 영역 전체에
 * 걸쳐 좌하단→우상단으로 흩뿌려진 배경 장식이다. .home-node 를 다시 절대좌표(%)로 되돌리되,
 * 1920 고정 캔버스 전체가 아니라 .home-journey(히어로+패널을 감싸는 새 래퍼) 박스 기준 %로만
 * 옮겨 Wide 흐름 레이아웃은 그대로 유지했다.
 *
 * ⚠️ 2026-09 Figma 전면 개편(fileKey 8qAqeXw50F8GKDGkeW0Pua, node 4038:312513) — 위 학습
 * 여정 노드(.home-constellation/.home-node)와 도트 필드 배경(.home-field, 위 2026-08-31
 * 문단)을 전부 걷어냈다. 새 시안에 그 두 요소가 없다 — 대신 정적 그라디언트 배경 이미지
 * (.home-stage, images/home/hero-bg-*.png), 설명 섹션 3종(.home-explain), 강의/프로젝트
 * 그리드 2벌(.home-grid-section), 하단 CTA 배너(.home-cta)를 새로 얹었다. .home-journey
 * 래퍼 자체는 남아 있다(.home-stage+.home-panels 를 감싸는 포지셔닝 컨텍스트 — 지금은
 * 그 자손 중 절대좌표 요소가 없어 시각 효과는 없지만, JSP 구조를 그대로 유지하려고 남겼다).
 */

/* ---------- 셸 ----------
   얼개(.app-frame / .app-frame__body)는 theme/components.css §8 공용이다. 본문(.app-page)은
   다른 Wide 화면과 똑같이 셸이 폭·여백을 만들어 준다 — 이 파일이 직접 잡지 않는다. */
.home-shell {
    display: flex;
    flex-direction: column;
    /* 2026-09-21: 히어로 배경(.home-journey)·CTA 배너(.home-cta) 풀블리드 브레이크아웃이
       공유하는 값이라 공용 조상인 여기(=.app-frame__body)에 둔다 — 실측(390~1920px):
       사이드바는 <1024px 드로어(폭 0), ≥1024px sticky 240px 고정. */
    --home-sidebar-w: 0px;
}

@media (min-width: 1024px) {
    .home-shell {
        --home-sidebar-w: 240px;
    }
}

/* 콘텐츠(히어로+패널)를 상단바 아래에서 항상 상단부터 채운다. 화면이 콘텐츠보다 커도
   세로로 가운데 정렬하지 않는다(2026-08-12 변경 전에는 justify-content: center 로 뷰포트
   높이에 따라 위치가 흔들렸다). 콘텐츠가 뷰포트보다 길면 흐름대로 스크롤된다. */
.home-shell main.app-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ⚠️ 2026-09-21 Figma "홈 / 로그인 후"(8qAqeXw50F8GKDGkeW0Pua, node 4038:312560 다크·4038:312563 라이트,
   get_design_context) 재실측 — 히어로 배경은 1920×1080 프레임 **전체**이고 Header·GNB 는 그 위에 얹힌
   투명 레이어다(Header 노드에 채움이 없고 GNB 는 12px 여백 안쪽 카드만 채운다). 그래서
     · 상단바 배경을 걷는다(종전엔 다크 86%→투명 / 라이트 흰 안개 50%→투명 그라디언트로 배경을 가렸다),
     · 사이드바의 12px 바깥 여백 칸도 투명으로 둬 배경이 비치게 한다(아래 .app-frame 규칙),
     · 배경 이미지를 가진 .home-journey 가 상단바·사이드바 뒤까지 올라가고 넓어진다(아래 .home-journey).
   부작용: 상단바는 sticky 라 스크롤 중 본문이 아이콘 뒤로 지나갈 때 가림막이 없다 — 시안에 가림막이
   없어 그대로 따른다(프로필 칩·알림 점은 자체 채움이 있다). 홈은 시안 기준 1화면 분량이라 영향이 작다. */
.home-shell .app-topbar {
    background: transparent;
    border-bottom: 0;
    /* 배경을 가진 .home-journey(z auto) 위. components.css 의 30 을 그대로 쓰되
       홈에서는 배경과의 관계가 핵심이라 여기에 다시 적어 둔다. */
    z-index: 30;
}

/* 페이지 바탕색 — .home-shell(본문)과 사이드바 여백 칸이 같은 색을 써야 이음새가 안 생긴다.
   종전엔 라이트에서 본문만 #E3EFD9 이고 사이드바 칸은 --mili-app-bg 라 히어로 아래로 내려가면
   x=240 에 세로 이음새가 보였다. 변수는 .app-frame 에 두어 두 자식이 함께 참조한다. */
.app-frame:has(> .home-shell) {
    --home-page-bg: var(--mili-canvas);
    background: var(--home-page-bg);
}

.mili-light .app-frame:has(> .home-shell) {
    --home-page-bg: #E3EFD9;
}

.home-shell {
    background: var(--home-page-bg, var(--mili-canvas));
}

/* 사이드바(≥1024px sticky 240px)의 12px 바깥 여백 칸을 투명하게 — 안쪽 카드(.app-sidebar__card)가
   자기 배경·라운드 20px 를 그대로 그린다. <1024px 는 fixed 드로어라 여백 칸이 실제로 본문 위를 덮으므로
   불투명 그대로 둔다. z-index 는 .home-journey(사이드바 뒤까지 확장) 위로 올리기 위한 값이다 —
   <1024px 드로어의 z-index(1045)를 덮지 않도록 min-width 안에서만 준다. */
@media (min-width: 1024px) {
    .app-frame:has(> .home-shell) > .app-sidebar {
        background: transparent;
        z-index: 2;
    }
}

/* 2026-09 Figma 전면 개편으로 도트 필드(<canvas> + js/home-pixel-field.js) 배경을 걷어내고
   .home-stage 에 정적 그라디언트 이미지를 직접 건다(아래 "히어로 배경" 블록 참고) — 시안에
   캔버스 애니메이션이 없다. js/home-pixel-field.js 자체는 pbl/brief·learn 화면이 여전히
   쓰므로 파일은 지우지 않았다(js/home.js 머리 주석 참고). */

.home-stage,
.home-panels {
    position: relative;
    z-index: 1;
}

/* ---------- 버튼 ---------- */
.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 1.25rem;
    height: 46px;
    border: 1px solid transparent;
    border-radius: var(--mili-radius-button);
    font-size: 14px;
    font-weight: var(--mili-font-weight-bold);
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* 원본 CTA: bg #aaff19 / rounded-[11px] / h-[46px] / 14px bold / 글자 #11170d.
   2026-08-26 사용자 확인 — 2026-08-24에 로그인·이어서 학습하기만 뉴트럴(흑백)로 바꾸고
   "강의 둘러보기" 등 나머지 accent 버튼은 라임 유지로 확정했었으나, 이번엔 그 예외 없이
   전부 뉴트럴로 통일한다(--mili-btn-light-* 는 variables.css:321 참고, 다크 전용 — 홈은
   라이트 모드가 없는 화면). 아래 §"이어서 학습하기" 전용 오버라이드(옛 303~319행)가 이제
   이 기본값과 같아져 중복이라 삭제했다. */
.home-btn--accent {
    background: var(--mili-btn-light-bg);
    border-color: var(--mili-btn-light-border);
    color: var(--mili-btn-light-on);
}

.home-btn--accent:hover,
.home-btn--accent:focus {
    background: var(--mili-btn-light-border);
    color: var(--mili-btn-light-on);
}

.home-btn--outline {
    border-color: rgba(var(--mili-fg-rgb), 0.14);
    color: var(--mili-ink);
    background: transparent;
}

.home-btn--outline:hover,
.home-btn--outline:focus {
    border-color: var(--mili-brand);
    color: var(--mili-brand);
}

/* 비로그인 CTA 카드용 아웃라인 변형. 테두리는 풀 알파가 아니라 라임 50%(Figma node 1942:4974
   실측: border-[rgba(180,255,57,0.5)]) — 2026-08-19 재실측 전엔 풀 알파였다. */
/* ⚠️ 2026-08-24 Figma 재실측(node 2224:105184, fileKey 8qAqeXw50F8GKDGkeW0Pua): 회원가입
   버튼은 라임 테두리 아웃라인이 아니라 사이드바와 같은 어두운 배경(#090a0c) + 연회색
   테두리/글자다. 이 클래스는 홈에서 회원가입 버튼 하나에만 쓰인다. */
.home-btn--ghost {
    background: var(--mili-sidebar-bg);
    border-color: var(--mili-btn-dark-border);
    color: var(--mili-btn-dark-on);
}

.home-btn--ghost:hover,
.home-btn--ghost:focus {
    background: rgba(var(--mili-fg-rgb), 0.08);
    color: var(--mili-btn-dark-on);
}

.home-btn--block {
    width: 100%;
}

/* 인기 학습 강좌 행 우측 CTA("프로젝트 시작하기"/"강의 듣기") 전용 소형 변형.
   ⚠️ 2026-09-14 Figma 재실측(node 3918:105970 "Component 3", fileKey 8qAqeXw50F8GKDGkeW0Pua,
   사용자 확인 — "크기도 새 시안대로 변경") — 2026-08-31 재실측(node 2224:105230, 흰 채움
   26px·Caption/SemiBold 12px)을 뒤집는다. 새 실측은 Body/B3/Medium(14px, weight 500,
   line-height 1.3, letter-spacing -0.28px) + 높이 ≈34px(패딩 8/12px)다. 색(라임 아웃라인)은
   아래 .home-popular__cta .home-btn--accent 참고. */
.home-btn--sm {
    height: 34px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: var(--mili-font-weight-medium);
    letter-spacing: -0.28px;
    line-height: 1.3;
}

/* ===================================================================
   스테이지 — 히어로 (+ 데스크톱에서만 학습 여정)
   좌우 여백은 .app-page(design-system.md §7)가 만든다 — 여기서는 세로 리듬만 잡는다.
   원본 모바일: main px-4 pt-10 pb-10, 히어로 mb-8
   =================================================================== */
/* 히어로 배경 — 2026-09 Figma 전면 개편(node 4038:312544/312547 "Generated Image" + 타원
   블러 + 단색, 이 대화에서 세 레이어를 실측해 항목 없이 배경만 있는 상태로 합성했다).
   .home-stage 는 히어로 텍스트~카드까지를 감싸는 영역이라(.home-journey 참고) 그 전체
   높이만큼 이미지를 덮고, 카드 아래로는 다시 페이지 배경(--mili-bg)이 이어진다 —
   background-size: cover 가 아니라 top 정렬 contain 유사 처리를 위해 auto 100% 폭 기준으로
   깔고 하단은 페이지 배경색과 자연스럽게 겹치도록 반복하지 않는다. */
.home-stage {
    padding: 40px 0 0;
}

/* 히어로 배경 — 2026-09 사용자 재지적으로 .home-stage(문구만) 대신 .home-journey(문구+카드
   전체, home.jsp 참고)에 건다. Figma 원본도 그라디언트가 문구 아래 카드 행까지 이어진다 —
   문구만 감싸면 그 아래 빈 공간이 생기고 카드 행은 배경 없는 플랫 영역에 뜬다. cover 로
   가로세로 꽉 채우고, aspect-ratio 는 데스크톱(≥1280px, 아래 블록)에서만 합성 이미지 실측
   비율로 걸어 크롭을 최소화한다 — 좁은 화면은 문구+카드가 세로로 더 필요해 비율을
   강제하지 않는다.
   ⚠️ 2026-09-18 배경 에셋 전면 교체(node 4695:219829 "홈 배경 에셋 전달"): 다크는 구리빛
   하이라이트가 도는 유리 십자 조형물(node 4695:221317 "홈화면 에셋_3D" 원본, opacity 20%
   mix-blend-luminosity 로 얹힘), 라이트는 이전처럼 같은 조형물에 라이트 틴트만 씌운 게
   아니라 전혀 다른 연두색 모자이크 타일 패턴(node 4695:219219 그룹)이다. 파일명을 -2 로
   바꾼 이유는 브라우저 7일 캐시(Cache-Control: max-age=604800)를 우회하기 위해서다.
   ⚠️ 2026-09-18/21 전면 재작성(사용자 지적 — "배경이 차지하는 자리가 작다", 그다음 "모바일에서도
   좌우 꽉 차게 모든 너비에서"): 이 배경은 .app-page(콘텐츠 컬럼, 최대 1440px) 안이 아니라
   사이드바를 뺀 뷰포트 전체 폭(.app-frame__body)을 모든 화면 너비에서 채워야 한다 — 데스크톱만
   고치고 모바일/태블릿을 빼먹었던 첫 시도(::before + ≥1280px 한정)를 걷어내고, .home-journey
   자신을 모든 폭에서 브레이크아웃시키는 단일 규칙으로 합쳤다.
   실측(Playwright getBoundingClientRect, 390~1920px 10개 폭): 사이드바는 <1024px 에서
   position:fixed 드로어라 레이아웃 폭을 전혀 차지하지 않고(.app-frame__body 가 뷰포트 전체),
   ≥1024px 에서만 sticky 240px 로 고정폭을 차지한다 — "1024–1279px 는 80px 아이콘 레일"이라던
   예전 문서 주석은 실측과 달라 더 이상 근거로 쓰지 않는다(--home-sidebar-w 아래 참고).
   기법: width 를 콘텐츠 폭이 아니라 프레임(사이드바 뺀 뷰포트) 폭으로 키우고, 그만큼
   음수 margin-left 로 왼쪽을 사이드바 끝까지 당긴 뒤, 다시 같은 양만큼 padding-inline 을
   넣어 자식(.home-stage/.home-panels)은 원래 .app-page 폭 그대로 안쪽에 머물게 한다 —
   기존 course-detail.css/figma-classes.css 의 `margin-inline: calc(--mili-page-padding * -1)`
   패턴과 같은 계열이지만, 그 패턴은 모바일 전용(캡 없음)이라 데스크톱의 max-width 캡까지
   같이 처리하려면 단순 페이지 패딩 상쇄만으론 부족해 프레임 폭 자체를 계산해야 했다. */
/* ⚠️ 2026-09-21 Figma 4038:312560/312563 재실측(사용자 지시 — "상단 네비게이션과 좌측 LNB 뒤까지 이미지 확장"):
   배경이 본문 열(사이드바 오른쪽·상단바 아래)에서 시작하지 않고 뷰포트 좌상단(0,0)부터 깔린다.
     · 위: 상단바 높이만큼 margin-top 음수 + padding-top 양수(라이트가 이미 하던 것을 다크에도 — 내용 위치는 그대로).
     · 왼쪽: 사이드바 폭(--home-sidebar-w)만큼 더 당긴다. width 는 프레임 폭 + 사이드바 = 100vw,
       padding-left 는 같은 양을 더 넣어 자식(.home-stage/.home-panels)은 원래 자리에 머문다.
   사이드바가 이 박스 위에 보이도록 z-index 는 위 「셸」 블록에서 사이드바 쪽에 준다. */
.home-journey {
    position: relative;
    --home-frame-w: calc(100vw - var(--home-sidebar-w, 0px));
    --home-content-w: min(calc(var(--home-frame-w) - var(--mili-page-padding, 32px) * 2), var(--mili-content-max, 1440px));
    --home-inset: calc((var(--home-frame-w) - var(--home-content-w)) / 2);
    width: calc(var(--home-frame-w) + var(--home-sidebar-w, 0px));
    margin-top: calc(-1 * var(--mili-topbar-height));
    margin-left: calc(-1 * (var(--home-inset) + var(--home-sidebar-w, 0px)));
    padding-top: var(--mili-topbar-height);
    padding-left: calc(var(--home-inset) + var(--home-sidebar-w, 0px));
    padding-right: var(--home-inset);
    background-image: url("../images/home/hero-bg-dark-4.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
}

/* ⚠️ 2026-09-21 홈 에셋 전면 교체("로그인 전_다크/라이트모드" 전달본): 데스크톱 3840×2160 / 모바일 780×2160.
   다크는 그동안 모바일 전용 배경이 없어 데스크톱 이미지를 그대로 cover 했는데, 이번 전달본에 다크 모바일이
   포함돼 라이트와 같은 폭(≤767px)에서 갈아 끼운다. 파일명을 -4/-5 로 올린 이유는 이전과 같다(7일 캐시 우회). */
@media (max-width: 767.98px) {
    .home-journey {
        background-image: url("../images/home/hero-bg-dark-4-mobile.png");
    }
}

/* ⚠️ 2026-09-21 라이트 배경 재교체(Figma 8qAqeXw50F8GKDGkeW0Pua, node 4695:220218 데스크톱 /
   4695:220443 모바일 "Light/홈/로그인후" 배경 합성 프레임). 2026-09-18 의 연두 모자이크 타일 패턴
   (hero-bg-light-3.png)을 걷고, 다크와 같은 유리 조형물에 연두 그라디언트·타원 블러가 얹힌 합성으로
   바꿨다. 두 프레임은 콘텐츠 없이 배경만 있는 에셋 전달용이라 get_screenshot 원본 해상도
   (1920×1080 / 390×1080)를 그대로 저장했다. 파일명을 -4 로 올린 이유는 -3 과 같다(7일 캐시 우회). */
/* 배경 이미지 하단(#dff8db 계열)과 아래 페이지 배경(.home-shell #E3EFD9)의 색이 달라 그대로 두면 이음새가
   가로줄로 보인다 — 하단 96px 을 페이지 배경색으로 서서히 이어 준다(첫 레이어). */
.mili-light .home-journey {
    background-image:
        linear-gradient(to bottom, rgba(227, 239, 217, 0) calc(100% - 96px), #E3EFD9 100%),
        url("../images/home/hero-bg-light-5.png");
    background-size: 100% 100%, cover;
    background-position: 0 0, top right;
}

@media (max-width: 767.98px) {
    .mili-light .home-journey {
        background-image:
            linear-gradient(to bottom, rgba(227, 239, 217, 0) calc(100% - 96px), #E3EFD9 100%),
            url("../images/home/hero-bg-light-5-mobile.png");
    }
}

/* ⚠️ 2026-09-08 재측정(Playwright getBoundingClientRect 실측, 사용자 제공 스크린샷 실측 주석
   — 김현서 QA 재확인): 상단바~타이틀 간격이 48px 로 나와 시안(40px)보다 8px 컸다. 원인은
   이 40px 자체가 아니라 ≤767px 에서 공용 .app-page 가 이미 주는 padding-top 8px
   (theme/components.css) 이 겹쳐 더해진 것 — 그 8px 을 여기서 빼서 합산 40px 을 맞춘다.
   768px 이상은 .app-page 쪽 8px 이 없어(components.css 768px 미만 전용) 40px 그대로 둔다. */
@media (max-width: 767.98px) {
    .home-stage {
        padding-top: 32px;
    }
}

/* ⚠️ 2026-08-28 Figma 모바일 재실측(8qAqeXw50F8GKDGkeW0Pua, "🎨 디자인 모음 [모바일]" 페이지 >
   "모바일 최종 페이지" 섹션, node 2806:32836/32629 "홈_로그인 전/후" 문구 실제 화면과 일치하는
   버전): 모바일 기본값은 24px Bold다. 아래 2026-08-26 주석의 36px 은 실제 화면 문구와 다른
   버전 노드에서 가져온 값이었다 — ≥1280px 데스크톱 값(48px, 아래 데스크톱 블록)은 이번 재실측
   대상이 아니라 그대로 둔다. */
.home-stage__title {
    margin: 0;
    font-size: 24px;
    font-weight: var(--mili-font-weight-bold);
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--mili-ink);
}

/* 위와 같은 재실측 — 모바일 기본값은 16px Medium 이다. */
.home-stage__lead {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: var(--mili-font-weight-medium);
    letter-spacing: 0;
    color: var(--mili-fg-muted);
}

/* ⚠️ 2026-09-21 로그인 후 문구가 폭별로 다르다(Figma 4038:312563 데스크톱 ↔ 4038:312564 모바일, 다크·라이트
   프레임 모두 같은 구분): 히어로 제목 "작전을 이어가 보세요."/"즐거운 오후되세요.", 리드
   "현재 학습 단계와 …"/"진행 중인 학습과 …", 최근 학습 카드 버튼 "학습 이어가기"/"학습하기".
   두 벌을 마크업에 다 두고 ≤767px(홈의 모바일 경계) 에서만 모바일 벌로 바꾼다. display:none 이라
   보조기기에는 보이는 쪽만 읽힌다. 768px 이상(태블릿 포함)은 데스크톱 문구다. */
.home-only-mob {
    display: none;
}

@media (max-width: 767.98px) {
    .home-only-desk {
        display: none;
    }

    .home-only-mob {
        display: inline;
    }
}

/* ⚠️ 2026-09-08 Figma QA(node 3918:106196, 사용자 확인 — 김현서 QA #3 "요소 간 간격"):
   버튼 줄 gap 8px(--mili-space-2, 이전 12px), 리드 문단과의 간격 24px(--mili-space-6, 이전
   40px) — <1280px(모바일~좁은 데스크톱) 공통. ≥1280px 데스크톱은 이번 재실측 대상이
   아니라 버튼 크기가 커 40px 간격을 유지한다(아래 1280px 블록에서 다시 늘려 덮는다). */
.home-stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mili-space-2);
    margin-top: var(--mili-space-6);
}

/* ⚠️ 2026-08-28 Figma 모바일 재실측(get_design_context, node 2806:32882/32883 "홈_로그인 전"
   로그인/회원가입 버튼, fileKey 8qAqeXw50F8GKDGkeW0Pua): 모바일 기본값은 두 버튼 모두
   h-36px, 14px Medium, tracking -0.28px, padding 8px 12px 다 — 이전 기록(12px SemiBold)은
   오독이었다(같은 노드 재조회로 정정). ≥1280px(데스크톱)는 이번 재실측 대상이 아니라 아래
   2026-08-19 값(21/13·20/12, Medium/Regular)을 데스크톱 블록에서 그대로 유지한다. */
.home-stage__actions .home-btn {
    font-size: 14px;
    font-weight: var(--mili-font-weight-medium);
    letter-spacing: -0.28px;
}

.home-stage__actions .home-btn:not(.home-stage__cta) {
    height: 36px;
    padding: 8px 12px;
}

/* 작전 이어가기(.home-stage__cta)는 위 공통 규칙 대상이 아니다 — 아래 전용 규칙이 이미
   SemiBold/48px 를 유지한다(모바일에서는 어차피 숨겨진다, 아래 767.98px 규칙 참고). */
.home-stage__actions .home-stage__cta {
    font-size: 16px;
}

/* 로그인 후 히어로의 "작전 이어가기"(Figma node 1354:1116) 전용 크기 — 위 재실측 대상이
   아니라 기존 SemiBold 를 그대로 유지한다. */
.home-stage__cta {
    height: 48px;
    padding: 0 1.875rem;
    font-weight: var(--mili-font-weight-semibold);
}

/* 2026-08-26 — 이 화면 전용 오버라이드는 삭제했다. 예전엔 로그인·이어서 학습 버튼 세 곳만
   뉴트럴을 쓰고 나머지 accent 버튼(강의 둘러보기 등)은 라임을 유지했지만(2026-08-24 QA), 이번엔
   그 예외 없이 .home-btn--accent 기본 규칙 자체를 뉴트럴로 통일했다(위 153행) — 값이 완전히
   같아져 화면 전용 오버라이드가 중복이었다. */

/* ⚠️ 2026-09-21 사용자 결정으로 모바일 히어로 "학습 이어가기 →" 를 다시 표시한다. 2026-08-24 에는
   "바로 아래 카드가 같은 동선을 이미 전체 폭으로 제공한다"는 이유로 :has() 로 줄째 숨겼지만, 새 시안
   (Figma 4038:312564 라이트 / 4038:312561 다크 모바일 "Button")에는 리드 아래 24px 에 버튼이 있다.
   시안 크기: 높이 36px · 패딩 8/12 · 14px Medium(데스크톱 48px/16px SemiBold 기본값을 모바일에서만 낮춘다).
   리드~버튼 간격 24px 은 위 .home-stage__actions 기본 margin-top(--mili-space-6)이 이미 준다. */
@media (max-width: 767.98px) {
    .home-stage__actions .home-stage__cta {
        height: 36px;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: var(--mili-font-weight-medium);
    }
}

/* ⚠️ 2026-09-08 Figma QA(node 3918:106196, 사용자 확인 — 김현서 QA #3): 히어로~카드 간격
   40px(이전 32px) — 토큰 스케일에 없는 값이라 .home-stage 의 padding-top(40px)과 같은
   방식으로 리터럴을 쓴다. */
.home-stage__intro {
    margin-bottom: 40px;
}

/* .home-journey 는 히어로(.home-stage)+패널(.home-panels)을 함께 감싸는 포지셔닝 기준
   박스다(home.jsp 참고) — 그 자체는 아무 시각적 효과가 없다. */
.home-journey {
    position: relative;
}

/* ===================================================================
   패널 — 원본 모바일 카드 2장 (space-y-4)
   좌우 여백은 .app-page 가 만든다.
   =================================================================== */
/* ⚠️ 2026-09-08 Figma QA(node 3918:106196, 사용자 확인 — 김현서 QA #3): 카드 사이 간격·
   페이지 하단 여백 모두 20px(--mili-space-5, 이전 16px/40px) — ≥1280px 는 아래 데스크톱
   블록이 gap·padding 을 모두 다시 덮어써 영향받지 않는다. */
.home-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mili-space-5);
    padding: 0 0 var(--mili-space-5);
}

/* 원본 두 카드 모두 라운드가 없고 inset 하이라이트만 있다.
   테두리는 .home-corner(모서리 굵은 라임 브래킷)와 짝을 이루는 옅은 라임 라인이다 —
   0.04 는 화면에서 사실상 안 보여 "테두리가 있어야 한다" 는 요청에 못 미쳤다.
   ⚠️ 2026-08-25 Figma 재실측(node 2224:105209/105495, fileKey 8qAqeXw50F8GKDGkeW0Pua,
   "홈화면" 우선순위 QA): 두 TodayLearningBlock(인기 학습 강좌·최근 프로젝트) 모두
   border-alpha 0.22 가 아니라 0.3, padding 20px 가 아니라 24px 다. */
.home-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--mili-brand-rgb), 0.3);
    padding: 24px;
}

/* MobileArticleCard: bg-black/60 + inset 하이라이트 8%.
   데스크톱 시안 값은 rgba(0,0,0,0.70) 이다 — 0.6 이면 뒤의 도트 필드(하단·우측이 특히 밝다)가
   비쳐 카드가 초록빛으로 들뜬다. */
.home-card--profile {
    background: rgba(0, 0, 0, 0.7);
    box-shadow: inset 0 1px 0 0 rgba(var(--mili-fg-rgb), 0.08);
}

/* ⚠️ 2026-08-25 Figma 재실측(node 2224:105209/105495): rgba(10,15,8,0.8) 가 아니라
   좌측 프로필 카드와 같은 rgba(0,0,0,0.7) 다 — 두 TodayLearningBlock 이 배경까지
   동일 스펙이다. */
.home-card--recent {
    background: rgba(0, 0, 0, 0.7);
    box-shadow: inset 0 1px 0 0 rgba(var(--mili-fg-rgb), 0.04);
}

/* 두 유리판은 도트 필드 위에 반투명으로 얹히는 카드라 알파 치환으로는 뒤집을 수 없다
   (다크 판이 배경을 가리는 게 목적이라 -rgb 를 넣으면 라이트에서 판이 사라진다).
   ⚠️ 2026-09-01 재정정(get_design_context, node 3393:59653 "Container"(프로필 카드)·
   3397:61356/3393:59755 "TodayLearningBlock" 둘 다 동일): 흰색 92% 가 아니라 **50%** 다 —
   0.92 는 Figma 실측 전에 참고 원본(personal-home.css)에서 대략 옮겨 온 추정치였다. 92% 는
   거의 불투명해 보여 사용자가 "회색 카드"로 느꼈다(도트 필드의 저채도 회색 도트가 옅게만
   비치고 카드 자체는 흰 판처럼 읽힌 것) — 50% 로 낮추면 도트 배경이 더 확실히 비쳐 보인다. */
/* ⚠️ 2026-09-02 재정정(get_design_context, node 3397:61332 "Frame2087338992"): 카드 자체가
   시안에서 다크와 다른 형태다 — 각짐+라임 테두리+코너 브래킷(HUD) 대신 rounded-[20px] +
   테두리 없음 + 초록빛 드롭섀도우(rgba(115,183,66,.25), offset 20/20, blur 50)다. 코너 브래킷
   요소 자체는 시안 코드에도 남아 있지만 카드의 overflow-clip + 둥근 모서리에 가려 실제 렌더에는
   보이지 않는다(get_screenshot 1:1 실측 확인) — 그래서 라이트에서는 .home-corner 를 아예 숨긴다
   (아래 별도 규칙). border-radius 20px 는 기존 토큰 중 가장 가까운 --mili-radius-card(16px)로
   스냅(CLAUDE.md 디자인 토큰 규칙 — 새 리터럴 반경을 만들지 않는다). */
/* ⚠️ 2026-09-14 QA(node 3798:105918, "홈(라이트 모드)" 카드 4번 항목) 재실측: 09-02 실측
   0.5 는 반올림 오차였다 — 이번 카드에서 직접 뜬 값은 rgba(255,255,255,0.6). */
/* ⚠️ 2026-09-21 Figma 재실측(8qAqeXw50F8GKDGkeW0Pua, node 4695:219212 "Light/홈/로그인후",
   get_design_context, 프로필 4695:219276 / 최근 학습 4695:219381 두 카드 동일): 위 09-02·09-04·09-14 실측을
   전부 덮는다 — 반투명 흰색 50% 배경 + 1px Primary/200(#83ccbe) 테두리 + 반경 0 + 우하단 드롭섀도우
   (20px 20px 25px rgba(0,0,0,.1)) + 네 모서리 브래킷(Primary/800 #0e6b55, 20px·3px)이다. 09-02 에
   "브래킷은 둥근 모서리에 가려 안 보인다"며 숨겼던 것도 이번 시안에서는 정사각 카드 위에 그대로 보인다.
   ⚠️ 같은 날 앞서 프로필 카드를 Neutral/50 배경·Neutral/300 테두리로 바꿨던 것은 잘못이었다 — 그 두 값은
   카드 안쪽 스탯 타일(.home-stat)의 값이고 바깥 카드는 위 값이다(아래 .home-stat 참고).
   rgba(255,255,255,0.5) 는 도트/유리 배경이 비쳐야 하는 반투명 유리판이라 토큰이 없다(위 머리 주석의
   "리터럴로 남긴 것"과 같은 성격). 드롭섀도우는 box-shadow 가 아니라 filter 로 준다 — 시안이 flex 컨테이너
   (4695:219275)에 drop-shadow 를 걸어, 반투명 카드 아래로도 그림자가 비치는데 box-shadow 는 요소 박스
   안쪽을 그리지 않아 이를 재현하지 못한다(아래 .home-panels 규칙). */
.mili-light .home-card--profile,
.mili-light .home-card--recent {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--mili-primary-200);
    border-radius: var(--mili-radius-none);
    box-shadow: none;
    padding: var(--mili-space-6);
}

.mili-light .home-panels {
    filter: drop-shadow(20px 20px 25px rgba(0, 0, 0, 0.1));
}

/* 2026-09-22 사용자 지시 — 다크·라이트 카드 내부 콘텐츠 위치를 일치시킨다. 기존에는 라이트 프로필
   카드만 세로 중앙 정렬(flex column + justify-content:center)이라 다크(상단 정렬, .home-card
   공용 padding 규칙을 그대로 따름)와 내용 위치가 어긋났다 — 그 전용 레이아웃을 제거해 다크와
   같은 상단 정렬·패딩을 쓰게 한다. */

.mili-light .home-corner {
    border-color: var(--mili-primary-800);
}

/* ===================================================================
   라이트 모드
   2026-08-31 최초 신설분은 대응 시안이 없어 다크 리터럴을 대칭 반전한 추정치였다.
   같은 날 Figma 재실측(fileKey 8qAqeXw50F8GKDGkeW0Pua, node 3397:61356 "인기 학습 강좌"·
   3393:59755 "최근 프로젝트", get_design_context + get_variable_defs, 사용자 확인)으로
   인기 학습 강좌 카드 쪽 값을 정본으로 교체한다 — 아래 두 항목(.home-popular__item 배경·
   1위 항목 배경 이미지)만 해당하고, 나머지(패널 배경 장식·성좌 장식)는 그 재실측 범위 밖이라
   기존 추정치를 유지한다. */

/* 2026-09-11 사용자 지정 — 페이지 캔버스(.app-frame__body 기본값 --mili-canvas, 전역 라이트
   토큰이라 #FFFFFF)를 홈에서만 이 연둣빛으로 덮는다. 공용 토큰을 바꾸면 다른 모든 라이트 화면
   배경이 같이 바뀌므로 홈 전용으로 좁힌다.
   ⚠️ 2026-09-21: 값은 위 「셸」 블록의 --home-page-bg(.mili-light .app-frame:has(> .home-shell))로 옮겼다 —
   사이드바 여백 칸과 같은 색을 공유해야 해서다. 상단바 안개 그라디언트와 .home-journey 의 상단바 높이
   보정(margin-top/padding-top)도 위 기본 규칙(.home-shell .app-topbar / .home-journey)이 두 테마 공통으로
   가져갔다(2026-09-21 4695:219212 라이트 상단바 재조정 → 4038:312560/312563 로 확장). */

/* 2026-09 Figma 전면 개편 — 1위 항목 전용 배경(Primary/50)도 함께 걷어냈다(위 다크 블록
   주석 참고, 3항목 전부 같은 단색 카드). */

/* ⚠️ 2026-09-01 재정정 — 이 화면의 보조(뮤트) 텍스트 여러 곳을 실측(get_design_context)한
   결과 전부 Neutral/700(#66686c)을 가리켰다(히어로 리드 3397:61444, 게스트 설명 3397:61346,
   인기 학습 강좌 메타 3397:61370 등). 전역 --mili-fg-muted 라이트 값(#868E96,
   theme/tokens.css)은 이보다 밝다 — 전역 토큰은 다른 화면에도 걸려 있어 바꾸지 않고, 홈
   화면 범위에서만 실측값으로 덮는다. 프로필 소속·계급 줄(.home-profile__summary)만 예외로
   Neutral/650(#7d7f83, node 3393:59669 실측)이라 따로 둔다. */
.mili-light .home-stage__lead,
.mili-light .home-guest__desc,
.mili-light .home-recent__meta,
.mili-light .home-recent-panel .home-recent__meta,
.mili-light .home-recent__progress-label,
.mili-light .home-recent-panel--empty .home-recent__title {
    color: var(--mili-neutral-700);
}

.mili-light .home-profile__summary {
    color: var(--mili-neutral-650);
}

/* ⚠️ 2026-08-28 Figma 모바일 재실측(node 2806:32778/32904 "최근 프로젝트"/"인기 학습 강좌"
   제목): 18px SemiBold, tracking 없음(0) — 예전 20px Bold/-1px 는 오독이었다. ≥1280px 는
   아래 데스크톱 블록의 .home-card__title(24px, Figma 데스크톱 노드 실측)이 덮어쓴다. */
.home-card__title {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: var(--mili-font-weight-semibold);
    letter-spacing: 0;
    color: var(--mili-ink);
}

/* ---------- 프로필 (원본 MobileArticleCard 헤드) ----------
   ⚠️ 2026-08-31 Figma 재실측(node 2224:105393/105399/105418, "홈_로그인 후"): 카드는 2행이다 —
   1행 .home-profile__head [아바타 160px | 이름·소속·레벨(504px)], 2행 .home-stats 4칸(카드 전체
   폭 700px). 종전에는 .home-profile 자체가 가로 flex 라 스탯·레벨이 전부 아바타 오른쪽 504px
   안에 갇혔고, 순서도 [스탯 → 레벨]로 시안(레벨 → 스탯)과 뒤집혀 있었다. */
.home-profile {
    display: flex;
    flex-direction: column;
}

.home-profile__head {
    display: flex;
    align-items: flex-start;
    gap: var(--mili-space-3);
}

/* 원본: size-[52px] rounded-full mt-[2px] object-top
   ⚠️ 2026-08-31 재실측(get_design_context, node 2224:105400): 아바타는 맨 이미지가 아니라
   **라임 테두리 + 검정 배경**의 원형 프레임이다(border 1.067px #b4ff39 = --mili-brand,
   bg-black = --mili-neutral-950). 실측 1.067px 는 1920 프레임 스케일링 잔재라 1px 로 옮긴다.
   비로그인 자리의 .home-guest__ring 과 같은 링 처리인데 로그인 쪽에만 빠져 있었다.
   ⚠️ 2026-09-03 재실측(node 3542:124240/122995 "홈_로그인 후" 모바일 이슈 #2): 위 2224:105400
   은 데스크톱 계열 노드였다 — 모바일 전용 노드는 64px(size-[64px])다. */
.home-profile__avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin-top: 2px;
    border: 1px solid var(--mili-brand);
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background: var(--mili-neutral-950);
}

/* ⚠️ 2026-09-01 재정정(get_design_context, node 3393:59653 아바타 실측): 라이트 테두리는
   --mili-brand(라이트에서 Primary/600 #91CC5C)가 아니라 **Primary/500(#afe57e)** 다 —
   --mili-brand 가 참조하는 스텝이 다크(Primary/500)·라이트(Primary/600)로 서로 달라
   생기는 차이라 별도로 덮는다(진행률 바·카드 브래킷과 달리 이 컴포넌트는 시안이 명시적으로
   Primary/500 고정 스텝을 쓴다). */
/* ⚠️ 2026-09-14 QA(node 3798:105925 "프로필", "홈(라이트 모드)" 카드 3번 항목) 실측: 배경이
   다크 상속값(--mili-neutral-950, 검정)이 아니라 Neutral/100(#f8f9fa) — QA 문구는 "흰색
   #ffffff"라고 적었지만 실측 hex 는 Neutral/100 이다(육안상 거의 흰색). 새 리터럴 대신
   기존 토큰을 그대로 쓴다. */
/* ⚠️ 2026-09-21 재실측(node 4695:219283 프로필 아바타): 테두리 2px Primary/500, 배경 흰색
   (Neutral/50) — 위 09-14 QA 의 Neutral/100 값을 새 시안이 덮는다. */
.mili-light .home-profile__avatar {
    border-width: 2px;
    border-color: var(--mili-primary-500);
    background: var(--mili-neutral-50);
}

.home-profile__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* 2026-08-26 Figma 재실측(8qAqeXw50F8GKDGkeW0Pua, node 1978:129984 "test02 1급" 텍스트) —
   그 시안은 이름+계급이 한 줄로 묶여 있어 구조는 다르지만(이 화면은 계급을 .home-profile__summary
   로 분리해 표시), 크기·자간만 반영한다(사용자 확인). 이 값은 <1280px(모바일/태블릿) 전용
   기본값이다 — ≥1280px 는 아래 데스크톱 블록의 .home-profile__name(32px, Figma 데스크톱
   노드 실측 그대로)이 덮어쓴다. */
/* ⚠️ 2026-08-28 재정정(get_design_context, node 2806:32678 "홍길동 대원"): 22px Bold —
   2026-08-26 기록(24px)은 오독이었다. */
.home-profile__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mili-space-2);
    margin: 0;
    font-size: 22px;
    font-weight: var(--mili-font-weight-bold);
    letter-spacing: 0;
    color: var(--mili-ink);
}

/* 원본: bg rgba(var(--mili-fg-rgb), 0.08) rounded-[8px] px-[9px] py-[6px], 글자 #51a2ff 13px */
.home-tag {
    padding: 6px 9px;
    border-radius: 0;
    background: rgba(var(--mili-fg-rgb), 0.08);
    color: var(--mili-stat-time);
    font-size: 13px;
    font-weight: var(--mili-font-weight-regular);
    letter-spacing: -0.22px;
    white-space: nowrap;
}

/* ⚠️ 2026-08-28 재정정(get_design_context, node 2806:32680 "병장 · 제3보병사단"): 14px
   Medium 은 맞지만 tracking 이 0 이 아니라 -0.28px 다. */
.home-profile__summary {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: var(--mili-font-weight-medium);
    letter-spacing: -0.28px;
    color: var(--mili-fg-muted);
}

/* <1280px 에서 레벨 줄만 카드 전체 폭으로 되돌린다(아바타 52px + gap 12px = 64px).
   .home-stats 는 2026-08-31 개편으로 .home-profile 직계 형제가 되어 이미 전체 폭이라
   더는 보정 대상이 아니다. */
@media (max-width: 1279.98px) {
    .home-profile__main .home-level {
        margin-left: -64px;
        width: calc(100% + 64px);
    }
}

/* ---------- 스탯 타일 (원본 statCards) ----------
   grid-cols-2 gap-2 mt-10 / rounded-[14px] p-[13px] / border white 7%
   배경 그라디언트 각도·스톱은 원본 값 그대로 */
.home-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 시안 타일 폭 168.86 × 4 = 675.4, 컨테이너 700 → 칸 사이 8.2px. */
    gap: var(--mili-space-2);
    /* 시안 실측: 헤드 하단(y=211) → 스탯 상단(y=235) = 24px. 종전 40px 는 헤드 안에 있던
       시절의 값이라 2행 구조에서는 과했다. */
    margin: var(--mili-space-6) 0 0;
    padding: 0;
    list-style: none;
}

/* 원본: 아이콘(15px)이 라벨과 한 줄이 아니라, 라벨·값·설명 세로 블록 전체 옆(gap-10)에 온다.
   ⚠️ 2026-08-31 Figma 재실측(get_design_context, node 2224:105419~105478 "홈_로그인 후" 스탯 타일):
   타일 배경은 **2겹**이다 — 위에 옅은 그라디언트, 그 아래에 rgba(21,21,21,0.8) 어두운 바탕.
   종전 구현은 아래 바탕층이 통째로 빠져 그라디언트(최대 알파 0.035)만 얹혀 있었고, 그래서
   타일이 사실상 투명해 뒤의 코드·레이더 장식과 도트 필드가 그대로 비쳐 경계가 읽히지 않았다.
   반경도 0 이 아니라 14.368px 이다 → 대응 토큰이 없어 가장 가까운 칸 --mili-radius-card(16px)에
   배정한다(CLAUDE.md "새 모양이 나와도 새 값을 만들지 않는다").
   그라디언트 각도·스톱도 실측값(158.49deg / 8.80·61.53·91.20%)으로 정정 — 종전
   146.59deg / 2.36·63.34·97.64% 는 mili-home-v3 참고 원본에서 옮긴 값이었다.

   rgba(21,21,21,0.8) 은 리터럴로 둔다: 시안 #151515 에 정확히 대응하는 토큰이 없고
   (--mili-neutral-870 은 #15181c 로 다른 값이다), 도트 필드 위에 반투명으로 얹히는 유리판
   계열이라 이 파일 머리 주석의 "리터럴로 남긴 것"(.home-card--profile/--recent 바탕)과 같은
   성격이다. */
/* ⚠️ 2026-09-21 Figma 재실측(8qAqeXw50F8GKDGkeW0Pua, 다크 데스크톱 4038:312560 스탯 4칸 275:291300 외,
   모바일 4038:312561 83:221379 외, get_design_context + get_variable_defs, 사용자 지시 "다크 카드 Neutral 800·
   라운드 0"): 다크 타일은 반투명 유리판(그라디언트 + rgba(21,21,21,.8))이 아니라 **불투명 Neutral/800(#2b2e33)
   단색**이고 테두리·라운드가 없다. 위 08-31 의 2겹 배경·14.368px 라운드 주석은 이 실측이 대체한다.
   테두리는 폭만 남기고(라이트가 1px Neutral/300 을 쓰므로 박스 크기를 두 테마가 같게 한다) 색은 투명. */
.home-stat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid transparent;
    border-radius: var(--mili-radius-none);
    background: var(--mili-neutral-800);
}

/* ⚠️ 2026-09-01 재정정(get_design_context, node 3393:59653 스탯 타일 4칸 실측): 다크처럼
   반투명 유리판(그라디언트 + 어두운 바탕)이 아니라 **불투명 흰 판**(--mili-neutral-50) +
   1px 옅은 회색 테두리(--mili-neutral-300)다. 2026-08-31 최초 추정치(회색조 그라디언트를
   그대로 얹은 것)가 사용자가 지적한 "회색 카드" 원인이었다 — 그라디언트를 걷어내고
   실측대로 덮어쓴다. */
/* ⚠️ 2026-09-21 재실측(node 4695:219305 스탯 타일 4칸): 배경·테두리 값은 그대로(Neutral/50 ·
   Neutral/300 1px)이고 **모서리 반경이 0** 이다(시안 안쪽 장식 테두리만 14.368px 로 둥글지만 타일 자체는
   각지다 — 09-01 실측이 이 안쪽 장식 테두리를 보고 16px 로 옮긴 것). 라벨은 14px Medium, 설명은
   Neutral/700 이다. */
.mili-light .home-stat {
    background: var(--mili-neutral-50);
    border-color: var(--mili-neutral-300);
    border-radius: var(--mili-radius-none);
}

.mili-light .home-stat__label {
    color: var(--mili-neutral-900);
}

.mili-light .home-stat__value {
    color: var(--mili-neutral-900);
}

.mili-light .home-stat__note {
    color: var(--mili-neutral-700);
}

.home-stat__icon {
    flex: 0 0 auto;
    padding-top: 2px;
    font-size: 15px;
    line-height: 1;
}

.home-stat--streak .home-stat__icon { color: var(--mili-stat-streak); }
.home-stat--badge .home-stat__icon { color: var(--mili-stat-badge); }
.home-stat--mission .home-stat__icon { color: var(--mili-stat-mission); }
.home-stat--time .home-stat__icon { color: var(--mili-stat-time); }

.home-stat__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* 카드가 좁아져도 "연속"/"학습" 처럼 음절 단위로 세로 줄바꿈되지 않게 한다. */
    word-break: keep-all;
}

/* ⚠️ 2026-08-28 재정정(get_design_context, node 2806:32705/32728/32748/32767 "연속 학습" 등):
   13px Regular(bold 아님) + tracking -0.26px — 예전 12px bold/15px 는 오독이었다. */
.home-stat__label {
    font-size: 13px;
    font-weight: var(--mili-font-weight-regular);
    line-height: 1.3;
    letter-spacing: -0.26px;
    color: var(--mili-ink);
}

/* ⚠️ 2026-08-28 재정정(node 2806:32707/32730/32750/32769 "21"/"3"/"4·10"/"18h"): Orbitron
   Bold 24px, line-height 1.4(≈34px) — 예전엔 폰트 지정이 없어 Pretendard 로 렌더됐고
   line-height 도 40px 이었다. --mili-font-metric(Orbitron) 은 진행률 값(.home-recent__progress-value
   구 버전)·Lv. 표기와 같은 계열이라 새 리터럴 없이 재사용한다. */
/* ⚠️ 2026-08-31 재실측(get_design_context, node 2224:105431 "21"): Orbitron 24.631px 에
   line-height 41.052px = 1.667 이다. 종전 1.4(=33.6px)는 값 줄이 7px 낮아 타일 전체가
   시안 100.87px 보다 낮아졌고(실측 91px), 고정 높이 카드에서 그 차이가 하단 여백으로 몰렸다. */
.home-stat__value {
    font-family: var(--mili-font-metric);
    font-size: 24px;
    font-weight: var(--mili-font-weight-bold);
    line-height: 1.667;
    color: var(--mili-ink);
}

.home-stat__value small {
    font-size: 13px;
    font-weight: var(--mili-font-weight-bold);
}

/* ⚠️ 2026-08-28 재정정(node 2806:32709/32732/32752/32771 "리그 내 최고 기록!" 등): 11px +
   tracking -0.22px — 예전 10px 는 오독이었다. */
.home-stat__note {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: -0.22px;
    color: var(--mili-fg-body);
}

/* ---------- 레벨 (원본 Lv. 23 / 84%) ----------
   ⚠️ 2026-08-31 재실측(node 2224:105410 "Frame 2087339002", 504×40): 시안에서 이 블록은
   테두리·그라디언트를 두른 박스가 아니라 이름·소속에 이어지는 텍스트 + 진행바 두 줄이다
   (스크린샷 육안 대조로도 박스 경계가 없다). 종전의 박스 장식(border 7% + 173.224deg
   그라디언트 + padding 16/15/20)은 걷어낸다. 위쪽 여백은 시안 실측 20px
   (소속 줄 하단 62 → Lv 줄 상단 82). */
.home-level {
    margin-top: var(--mili-space-5);
}

/* 시안: "Lv. 23"(높이 22) 아래 8px 지점에서 진행바가 시작한다(y=30). */
.home-level__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mili-space-2);
}

/* ⚠️ 2026-08-28 재정정(node 2806:32687 "Lv. 23"): Orbitron Bold 16px — 예전 15px/폰트
   미지정(Pretendard 로 렌더)은 오독이었다. */
.home-level__tier {
    font-family: var(--mili-font-metric);
    font-size: 16px;
    font-weight: var(--mili-font-weight-bold);
    color: var(--mili-ink);
}

/* ⚠️ 2026-09-03 재실측(node 3542:124240 "홈_로그인 후" 라이트): 다크는 --mili-ink(거의 흰색,
   시안 Neutral/50)와 그대로 맞지만, 라이트는 --mili-ink(어두운 회색) 대신 브랜드 그린이다 —
   레벨 표기만 강조색을 쓴다.
   ⚠️ 2026-09-08 Figma QA(node 3918:106317 "홈_로그인 후" 라이트, 사용자 확인 — 김현서 QA #6
   "텍스트 컬러 #365604"): var(--mili-primary-900) 는 라이트 스코프에서 #3C6125 로 실측값과
   다르다 — 이 표기는 라이트에서도 다크 900 스텝 값(#365604)을 그대로 쓰는 전환 잔재라
   판단해(.home-node__corner 와 같은 패턴, 위 2026-09-01 주석 참고) 리터럴로 고정한다. */
/* ⚠️ 2026-09-21 재실측(node 4695:219295 "Lv. 23"): 새 시안은 브랜드 그린(#365604)이 아니라
   Neutral/900(#0e1013)이다 — 위 09-08 QA 값을 덮는다(이 변경은 재확인 대상, 마무리 보고 참고). */
.mili-light .home-level__tier {
    color: var(--mili-neutral-900);
}

/* 2026-09-22 사용자 지시 — 다크·라이트 위치 통일. margin-top 은 다크 기본값(10px, .home-level__hint)을
   그대로 쓰고 색만 라이트 전용으로 남긴다(기존 8px 는 다크와 어긋났다). */
.mili-light .home-level__hint {
    color: var(--mili-neutral-700);
}

.home-level__value {
    font-size: 13px;
    font-weight: var(--mili-font-weight-bold);
    letter-spacing: -0.585px;
    color: var(--mili-ink);
}

/* 2026-09-21 Figma(node 4695:219291 "상병" / 4695:219296 "48%", 라이트 시안 기준) — 이름 옆 계급과
   레벨 진행률 수치. 데스크톱 값(계급 20px Bold, 진행률 16px Regular)만 시안 실측이고, 좁은 폭은
   이름(22px)·진행바 폭에 맞춰 AI 판단으로 줄였다(모바일 시안에는 이 요소가 없다). */
.home-profile__rank {
    font-size: 14px;
    font-weight: var(--mili-font-weight-bold);
    color: var(--mili-ink);
}

.home-level__percent {
    font-size: 14px;
    font-weight: var(--mili-font-weight-regular);
    color: var(--mili-ink);
}

@media (min-width: 1280px) {
    .home-profile__rank {
        font-size: 20px;
    }

    .home-level__percent {
        font-size: 16px;
    }
}

.mili-light .home-profile__rank,
.mili-light .home-level__percent {
    color: var(--mili-neutral-900);
}

/* ⚠️ 2026-08-28 재정정(node 2806:32692 "다음 레벨까지 85 XP 남았어요."): 12px, tracking
   없음(0) — 예전 9px/-0.288px 는 오독이었다. */
.home-level__hint {
    margin: 10px 0 0;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--mili-fg-muted);
}

/* 원본 progress-track: bg-white/10 rounded-full, fill 에 라임 glow.
   ⚠️ 2026-08-31 재실측: 높이가 7px 이 아니다 — 프로필 레벨 바 10px(node 2224:105412),
   최근 학습 진행바 9.1px(node 2224:105512). 두 곳 다 쓰는 공용 규칙이라 10px 로 맞춘다. */
.home-bar {
    height: 10px;
    border-radius: var(--mili-radius-pill);
    background: rgba(var(--mili-fg-rgb), 0.1);
    overflow: hidden;
}

/* ⚠️ 2026-08-31 재실측(node 2224:105413): glow 는 blur 14px 이 아니라 18.228px 다.
   시안 색은 rgba(170,255,25,.34)(#AAFF19)로 우리 --mili-brand-rgb(#B4FF39)와 미세하게 다르지만,
   34% 알파에 18px 블러가 걸린 발광이라 육안 차이가 없어 리터럴을 새로 만들지 않고 토큰을 쓴다. */
/* 2026-09-21 사용자 지정 — 라이트의 회색 트랙은 Neutral/400 으로 통일. */
.mili-light .home-bar {
    background: var(--mili-neutral-400);
}

/* 2026-09-21 재실측(node 4695:219298 / 4695:219405): 라이트 채움색은 --mili-brand(라이트에서
   Primary/200)가 아니라 Primary/500(#1a987f)이다. */
.mili-light .home-bar__fill {
    background: var(--mili-primary-500);
}

.home-bar__fill {
    height: 100%;
    border-radius: var(--mili-radius-pill);
    background: var(--mili-brand);
    box-shadow: 0 0 18.228px rgba(var(--mili-brand-rgb), 0.34);
}

/* ---------- 비로그인 프로필 자리(CTA 카드) ----------
   원본: 원형 링 아바타 + 은은한 발광 원형 장식 + 코너 브래킷(.home-corner). */
.home-guest {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mili-space-4);
    overflow: hidden;
}

/* 카드 우상단 쪽으로 치우친 은은한 라임 발광. 원본은 블러 처리된 비트맵 두 장을 겹치지만
   여기서는 새 이미지 에셋 없이 radial-gradient 로 근사한다. */
.home-guest__glow {
    /* 모바일 플로우는 장식을 끈다(.home-corner 와 같은 방침). */
    display: none;
    position: absolute;
    /*
     * ⚠️ 카드 밖으로 넘치게 두면 안 된다. .home-guest 가 overflow:hidden 이라 원이 잘리는데,
     * 그라디언트가 아직 다 사그라들기 전에 잘리면 그 자리에 직각 경계가 생겨 카드 안에
     * 밝은 초록 사각형이 그려진다(예전 top:-45%/right:-15%/width:70% 가 그랬다).
     * 배경 본체는 제공된 이미지 3장(noise·code·radar)이 맡으므로, 이 레이어는 그 위에
     * 아주 옅은 라임 기운만 더하는 역할로 두고 원은 카드 안에 온전히 들어오게 한다.
     */
    /* 시안 좌표: 603x603 을 left:678 / top:-218(1207x579 카드 기준) — 카드 우상단이다. */
    left: 56%;
    top: -42%;
    width: 50%;
    padding-bottom: 50%;
    background: radial-gradient(circle, rgba(var(--mili-brand-rgb), 0.2) 0%, rgba(var(--mili-brand-rgb), 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/*
 * 사용자 정보 카드(.home-card--profile) 배경 장식 — code(좌측) + radar(우상단).
 * .home-guest 안이 아니라 카드 직계에 둔다: 로그인 상태(.home-profile)와 비로그인 상태
 * (.home-guest) 둘 다에서 보여야 하기 때문이다(예전엔 비로그인 전용이었다).
 * z-index:-1 로 카드 배경 바로 위, 본문(.home-profile/.home-guest) 아래에 깐다 —
 * 두 본문 모두 이 위치에서 별도 z-index 조정 없이 위에 그려진다(둘 다 흐름 안 콘텐츠라
 * 스택 순서상 음수 z-index 형제보다 나중에 그려진다).
 * 다른 카드 장식과 같이 모바일 플로우에서는 끈다.
 */
/* 2026-09 Figma 전면 개편(사용자 지적) — 옛 mili-home-v3 의 코드/레이더/링 배경 장식
   (.home-panel-bg 및 --code/--radar/--ring 변형)을 전부 걷어냈다. 새 시안 카드는 배경
   이미지 없는 준투명 단색 판이다 — home.jsp 의 해당 <span> 마크업도 함께 제거했다. */

/* 원형 링 아바타. 원본은 246.53px 짜리 큰 링이지만 이 카드 폭(958px)에 맞춰 축소했다.
   ⚠️ 2026-08-28 Figma 모바일 재실측(node 2806:32887 "홈_로그인 전"): 모바일 기본값은 80px다
   (≥1280px 는 아래 데스크톱 블록의 200px 를 그대로 유지, 이번 재실측 대상이 아니다). */
.home-guest__ring {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--mili-panel-sunken);
    outline: 1.5px solid var(--mili-brand);
    overflow: hidden;
    margin-left: 5px;
}

.home-guest__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.home-guest__body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
}

/* ⚠️ 2026-08-28 재정정(get_design_context, node 2806:32899 "밀리AI와 함께..."): 16px Bold,
   line-height 1.4, tracking 없음(0) — 예전 20px/-1px 는 오독이었다. */
.home-guest__title {
    margin: 0;
    font-size: 16px;
    font-weight: var(--mili-font-weight-bold);
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--mili-ink);
}

/* ⚠️ 2026-08-28 재정정(node 2806:32901 "나만의 AI 탐사..."): 12px Medium(Regular 아님),
   tracking 없음(0) — 예전엔 굵기 지정이 없어 기본값(Regular)으로 렌더됐다. */
.home-guest__desc {
    margin: 6px 0 18px;
    font-size: 12px;
    font-weight: var(--mili-font-weight-medium);
    letter-spacing: 0;
    color: var(--mili-fg-muted);
}

/* ---------- 최근 학습 (원본 MobileRecentProjectCard) ----------
   ⚠️ 2026-08-25 Figma 재실측(node 2224:89040, fileKey 8qAqeXw50F8GKDGkeW0Pua, "이어서 학습하기"):
   카드 안에 한 단 더 어두운 패널이 들어가는 이중 카드 구조로 바뀌었다 — 배지·제목·진행률·CTA 를
   .home-recent-panel 안에 모은다(home.jsp). 반경은 시안 16px 에 정확히 대응하는 토큰이 없어
   가장 가까운 --mili-radius-card(12px)에 배정한다.
   ⚠️ 2026-08-27 Figma 재실측(node 2224:105495, "홈_로그인 후"): 배경은 불투명 서피스 토큰이
   아니라 bg-black/70 카드 위에 얹는 반투명 흰 오버레이 rgba(255,255,255,0.1) 다 — 도트 배경이
   옅게 비쳐야 한다. --mili-fg-rgb(다크 스코프에서 흰색 계열)로 그 반투명을 재현한다. */
/* ⚠️ 2026-09-21 Figma 재실측(4038:312560 275:291376/291391 다크, 4038:312563 275:237740/237755 라이트,
   모바일 4038:312561 83:221464/221483, 사용자 지시 "다크 카드 Neutral 800·라운드 0"): 다크는 반투명 흰 오버레이가
   아니라 **불투명 Neutral/800(#2b2e33)** 이고, 반경은 다크·라이트 모두 **0** 이다(위 09-21 주석의 "라이트 반경 12px"는
   오독이었다 — 시안 라이트 스크린샷에서도 안쪽 카드 모서리가 각지다). 라이트 색은 아래 .mili-light 규칙이 그대로 덮는다. */
.home-recent-panel {
    display: flex;
    flex-direction: column;
    padding: var(--mili-space-4);
    border-radius: var(--mili-radius-none);
    border: 0;
    background: var(--mili-neutral-800);
}

/* ⚠️ 2026-09-01 재정정(get_design_context, node 3393:59755 "최근 프로젝트" 내부 진행률
   패널 실측): 라이트는 다크처럼 반투명 유리판이 아니라 **불투명** --mili-neutral-100
   (#f8f9fa) + 1px --mili-neutral-300(#f0f0f0) 테두리다 — rgba(var(--mili-fg-rgb),.1) 알파
   치환은 카드 배경(반투명 흰 판) 위에 얹히면 탁한 회색으로 보여 사용자가 지적한 원인 중
   하나였다. */
.mili-light .home-recent-panel {
    background: var(--mili-neutral-100);
    /* 2026-09-21: 다크 안쪽 카드는 시안에 테두리가 없어 기본값이 border:0 이 됐다 — 라이트는 1px Neutral/300 을 여기서 준다.
       2026-09-22: border 가 생기며 안쪽 내용이 다크보다 1px 씩 더 안으로 밀리던 것을 padding 1px 축소로 상쇄
       (.home-popular__item 라이트 보정과 같은 패턴 — 위치를 다크와 맞춘다). */
    border: 1px solid var(--mili-neutral-300);
    padding: calc(var(--mili-space-4) - 1px);
}

/* ⚠️ 2026-08-31 요청: 최근 학습을 "최근 1건"이 아니라 강의 1장 + 프로젝트 1장으로 좌우에
   나란히 세운다(home.jsp → _home-recent-panel.jsp). 한쪽 유형에 학습 이력이 없으면 그 자리는
   "없음" 카드로 남긴다 — 자리가 비면 좌우 균형이 깨지고 "그 유형이 아예 없다"는 정보도 사라진다.
   .home-card--recent 는 1536px 미만에서 전체 폭이라 두 장이 넉넉하지만, 그 이상에서는 프로필
   카드(802px) 옆 flex:1 이라 각각 좁아진다 — 아주 좁은 폭에서는 세로로 접는다. */
/* ⚠️ 2026-09-21 Figma 재실측(4038:312560 275:291375 다크 / 4038:312561 83:221463 모바일): 안쪽 카드 사이 간격은
   다크도 12px 다(종전 16px — 라이트만 아래 라이트 블록에서 12px 로 덮었다). 이 간격이 안쪽 카드 폭을 정해
   버튼 폭 238px(사용자 지시 "238×36")이 나온다: 카드 602 − 테두리 2 − 패딩 48 − 간격 12 = 540 ÷ 2 = 270 − 패딩 32 = 238. */
.home-recent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mili-space-3);
}

/* ⚠️ 2026-09-01 사용자 지시: 모바일은 위아래(1열)로 쌓는다 — 한때 ≤767px 에서만 2열로
   세웠으나 카드당 약 160px 라 폭이 너무 좁았다(제목이 3~4줄로 접히고 진행률 숫자와 CTA 가
   붙어 보였다). 기본값 1열이 그대로 적용되므로 모바일 전용 오버라이드는 두지 않는다.
   2열이 남아 있는 곳은 ≥1780px 데스크톱 블록 하나뿐이다 — 거기서는 카드 높이가 400px 로
   못박혀 있어 세로로 쌓으면 넘친다(아래 주석 참고). */

/* ≥1280px 에서 .home-card--recent 가 flex 세로 흐름이 되므로(아래 데스크톱 블록) 그 안을 채운다.
   flex 컨테이너가 아닌 폭에서는 무시된다. */
.home-recent-grid {
    flex: 1 1 auto;
}

/* 두 장의 내용 높이가 달라도(한쪽이 "없음") CTA 줄은 카드 바닥에 같은 높이로 맞춘다.
   그리드 아이템은 기본이 stretch 라 카드 높이는 이미 같고, 남는 공간을 본문이 먹는다. */
.home-recent-panel__body {
    flex: 1 1 auto;
}

/* 카드가 반으로 좁아졌으므로 단독 패널 시절의 36px 상단 여백(위 규칙)은 과하다.
   ⚠️ 2026-09-08 사용자 실측 스크린샷 재확인 — 김현서 QA: 배지~제목 12px(이전 24px). */
.home-recent-grid .home-recent-panel .home-recent__title {
    margin-top: var(--mili-space-3);
}

.home-recent-panel--empty .home-recent__title {
    color: var(--mili-fg-muted);
}

.home-flags {
    display: flex;
    align-items: center;
    gap: var(--mili-space-2);
    margin: 0;
}

/* ⚠️ 2026-08-31: 홈 전용이던 .home-pill("학습 중")·.home-flags__type(반투명 흰 알약)을 걷어냈다.
   앞의 것은 항목이 있으면 무조건 찍는 고정 문구라 실제 수강 상태와 무관했고(수료·100% 항목에도
   "학습 중"), 뒤의 것은 유형 표기를 카탈로그·내 학습과 다른 모양으로 보여 줬다.
   유형 배지는 공용 Tag 표준(theme/figma-classes.css .tag.vod/.pbl)으로 통일했다. */

/* 기본값 — 진행 중인 과정이 없을 때(빈 상태 "아직 학습 중인 강의가 없어요")에도 쓰인다.
   원본: 17px bold tracking-[-0.7px]. */
.home-recent__title {
    margin: 14px 0 0;
    font-size: 17px;
    font-weight: var(--mili-font-weight-bold);
    letter-spacing: -0.7px;
    color: var(--mili-ink);
}

.home-recent__meta {
    margin: 5px 0 0;
    font-size: 10px;
    letter-spacing: -0.1px;
    color: var(--mili-fg-muted);
}

/* ⚠️ 2026-08-28 재정정(node 2806:32783 "AI를 활용하여 식단 및 영양 관리..."): 16px SemiBold,
   tracking 없음(0) — 예전 20px/-0.4px 는 오독이었다(기본 규칙의 bold 도 SemiBold 로 낮춘다). */
.home-recent-panel .home-recent__title {
    margin: 36px 0 0;
    font-size: 16px;
    font-weight: var(--mili-font-weight-semibold);
    letter-spacing: 0;
}

/* ⚠️ 2026-08-28 재정정(node 2806:32784 "미션 07 | 음식 영양 분석하기"): 색이 --mili-ink(밝은
   글자)가 아니라 --mili-fg-muted(Neutral/550 계열, 예전엔 진행률 라벨과 착각해 밝게 잘못 줬다). */
.home-recent-panel .home-recent__meta {
    margin: 4px 0 0;
    font-size: 14px;
    letter-spacing: normal;
    color: var(--mili-fg-muted);
}

/* ⚠️ 2026-08-26 Figma 재실측(node 2271:32528, fileKey 8qAqeXw50F8GKDGkeW0Pua, "홈 화면 검증"):
   진행률 막대와 퍼센트 값이 한 줄이 아니라, "진행률" 라벨 + 퍼센트 값이 한 줄(양끝 정렬)로
   먼저 오고 그 아래 막대가 별도 줄로 온다.
   ⚠️ 2026-09-08 사용자 실측 스크린샷 재확인 — 김현서 QA: 메타~진행률 12px(이전 20px). */
.home-recent-panel .home-recent__progress {
    margin: var(--mili-space-3) 0 0;
}

.home-recent-panel .home-recent__progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
}

.home-recent__progress-label {
    font-size: 14px;
    font-weight: var(--mili-font-weight-regular);
    color: var(--mili-fg-muted);
}

/* ⚠️ 2026-08-28 재정정(node 2806:32788 "38%"): 16px Regular, Orbitron 이 아니라 일반
   Pretendard — 예전엔 다른 수치 표기(Lv./스탯값)와 같은 계열로 착각해 metric 폰트·14px·
   Bold 를 줬었다. */
.home-recent__progress-value {
    font-size: 16px;
    font-weight: var(--mili-font-weight-regular);
    color: var(--mili-ink);
}

/* CTA 는 패널 아래쪽에 붙는다.
   ⚠️ 2026-09-08 사용자 실측 스크린샷 재확인 — 김현서 QA: 진행률 막대~버튼 12px(이전 24px,
   위 "시안 pt-24px" 주석은 이번 재실측으로 대체). */
/* ⚠️ 2026-09-21 Figma 재실측(4038:312560 275:291390/291406 다크 데스크톱, 4038:312561 83:221482/221495 모바일,
   4038:312564 라이트 모바일; 사용자 지시 "다크 버튼 폰트 medium·사이즈 238×36"): 높이 **36px**, 패딩 8/12,
   14px **Medium**(종전 .home-btn 기본 bold), 자간 -0.28px, 줄높이 1.3, 글자 Neutral/900(#0e1013).
   폭 238px 은 1920 프레임에서 카드 폭(271)−패딩 32 = 239 가 나온 결과라 고정폭으로 옮기지 않는다 —
   .home-btn--block(width:100%)이 카드 폭을 그대로 따른다(뷰포트에 따라 234~239px 등). 라이트 ≥1280px 는
   아래 라이트 블록이 이미 36px/Medium 이었고, 라이트 모바일 시안도 같은 36px/Medium 이라 폭 구분 없이 공통으로 둔다. */
.home-recent-panel .home-btn--block {
    height: 36px;
    margin-top: var(--mili-space-3);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: var(--mili-font-weight-medium);
    letter-spacing: -0.28px;
    line-height: 1.3;
}

/* 글자색 Neutral/900 은 다크(흰 버튼) 전용이다. 라이트는 .home-btn--accent(--mili-btn-light-*: 검은 버튼 + 흰 글자, ≥1280px 는
   아래 라이트 블록이 명시)를 그대로 써야 한다 — 이 색을 공통에 두면 라이트 <1280px 에서 검은 배경에 어두운 글자가 된다
   (2026-09-21 1100px 스크린샷으로 발견해 다크 한정으로 좁혔다). */
body:not(.mili-light) .home-recent-panel .home-btn--block {
    color: var(--mili-neutral-900);
}

/* ---------- 비로그인 진입 카드 ---------- */
.home-entry {
    display: grid;
    gap: var(--mili-space-2);
}

.home-entry__card {
    display: block;
    padding: 13px;
    border: 1px solid rgba(var(--mili-fg-rgb), 0.07);
    border-radius: 0;
    background: linear-gradient(146.59deg,
        rgba(var(--mili-fg-rgb), 0.035) 2.36%,
        rgba(var(--mili-fg-rgb), 0.01) 63.34%,
        rgba(var(--mili-brand-rgb), 0.01) 97.64%);
    text-decoration: none;
    transition: border-color 160ms ease;
}

.home-entry__card:hover,
.home-entry__card:focus {
    border-color: var(--mili-brand);
}

.home-entry__card > .bi {
    display: block;
    margin-bottom: var(--mili-space-2);
    font-size: 15px;
    line-height: 1;
    color: var(--mili-brand);
}

.home-entry__title {
    display: block;
    font-size: 11px;
    font-weight: var(--mili-font-weight-bold);
    color: var(--mili-ink);
}

.home-entry__desc {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 13px;
    color: var(--mili-fg-body);
}

/* ---------- 코너 브래킷 장식 ----------
   비로그인 하단 카드(CTA·인기 학습 강좌) 네 모서리에 붙는 라임 대괄호. 이미 이 파일에 있는
   .home-node__corner 와 같은 관례(두 변만 남기고 나머지는 지운다)를 그대로 쓴다.
   부모는 .home-card(overflow:hidden, position:relative)라 별도 포지셔닝 컨텍스트가 필요 없다.
   ⚠️ 2026-08-28 Figma 모바일 재실측(node 2806:32891-95 등 "홈_로그인 전/후"): 모바일 플로우에서도
   두 카드 모두 브래킷이 보인다 — 예전엔 데스크톱 전용 장식으로 꺼 두었으나(.home-constellation 과
   같은 방식이라 가정했었다) 실제 모바일 시안엔 존재한다. 모바일 크기(13px/2px)를 기본값으로 두고
   ≥1280px 는 아래 데스크톱 블록의 20px/3px 를 그대로 유지한다(이번 재실측 대상이 아니다). */
.home-corner {
    display: block;
    position: absolute;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 2px solid var(--mili-brand);
    pointer-events: none;
}

.home-corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.home-corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.home-corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.home-corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* 인기 학습 강좌(.home-popular*) 규칙은 이 파일 맨 끝 「2026-09-21 Figma 최종 검수」 블록으로 옮겼다 —
   시안이 항목 구조를 [태그·메타 / 제목·버튼] 두 줄로 바꿔 옛 규칙과 섞이면 충돌한다. */

/* ===================================================================
   데스크톱 (>= 1280px) — 원본 xl 브레이크포인트
   좌측 사이드바가 상시 노출되고 스테이지가 넓어진다.
   =================================================================== */
@media (min-width: 1280px) {
    /*
     * ===== 일반 흐름 레이아웃 =====
     * 2026-08-06 이전에는 1920x1080 Figma 캔버스를 통째로 transform:scale() 하는 방식이었다
     * (js/home.js 의 initCanvasFit). 지금은 다른 Wide 화면과 같은 흐름이다 — .home-stage 와
     * .home-panels 는 <main class="app-page app-page--wide"> 의 자식으로 위에서 아래로 쌓이고,
     * 좌우 여백·최대폭(1440px)은 .app-page 가 만든다. 이 블록에는 데스크톱 전용 확대 값
     * (타이포·카드 패딩·아바타 크기 등)만 남는다.
     */
    .home-stage {
        display: flex;
        flex-direction: column;
        /* 헤더~타이틀 간격 80px(Figma 실측) = .app-page 상단 패딩 8px + 여기 72px. */
        padding: 72px 0 0;
    }

    /* 2026-09-21: 배경 풀블리드 규칙은 위 기본 .home-journey 로 옮겼다(모든 폭 공통) —
       이 블록엔 더 이상 배경 관련 규칙이 없다. */

    /* 실측(Figma node 1378:270/1354:1114): 48px Bold, tracking 없음(원본 -2px 는 이 시안엔 없다). */
    .home-stage__title {
        font-size: 48px;
        letter-spacing: normal;
    }

    /* ⚠️ 2026-09-21 정정(사용자 지적 — "색상이 좀 다르다"): 옛 node(1378:271/1354:1115)
       실측 "흰색"은 2026-09 리뉴얼 이전 시안이었다. 현재 시안(get_design_context, node
       4695:218725 "현재 학습 단계와 새롭게 도전할 프로젝트를...")은
       text-[color:var(--neutral/550,#bfc0c2)] — 흰색이 아니라 옅은 회색이다. color 를
       흰색(--mili-ink)으로 덮어쓰지 않고 아래 기본 규칙(--mili-fg-muted)을 그대로 물려받게
       비운다 — 크기·자간만 데스크톱 값으로 키운다. */
    /* ⚠️ 2026-09-21 Figma 재실측(4038:312560 다크 1:4348 / 4038:312563 라이트 1:4574, 비로그인 4038:312544
       275:281398 — 전부 Pretendard SemiBold 24px, line-height 1.4, 사용자 지시 "lead bold→semibold"):
       굵기는 SemiBold(600)다. 종전엔 다크 Medium(기본값 상속)·라이트 Bold(아래 라이트 블록)로 갈려 있었다 —
       두 테마·두 상태(로그인 전/후)가 같은 값이라 여기 한 곳에서 준다. 줄간격도 1.366 → 1.4(사용자 선택).
       ≤1279px 는 시안이 없어(모바일 시안은 16px Medium) 기본값을 그대로 둔다. */
    .home-stage__lead {
        font-size: 24px;
        font-weight: var(--mili-font-weight-semibold);
        line-height: 1.4;
        letter-spacing: normal;
    }

    /* ⚠️ 2026-09-21 Figma 재실측(4038:312560 1:4349 다크 히어로 "학습하기" 버튼, 사용자 선택): 다크도 라이트와
       같은 44px(패딩 21px, 16px Medium, 반경 5px = --mili-radius-button)다. 종전 다크는 48px·SemiBold·패딩 30px 이었다.
       색은 다크 기본(.home-btn--accent: 흰 채움·Neutral/300 테두리)이 시안과 같아 손대지 않는다(style-diff 로 확인). */
    .home-stage__cta {
        height: 44px;
        padding: 0 21px;
        font-weight: var(--mili-font-weight-medium);
    }

    .home-stage__intro {
        max-width: 700px;
    }

    /* 2026-09-08 QA #4 의 강제 줄바꿈은 390px 모바일 전용이다 — 700px 카드에서는 원래
       자연 줄바꿈으로 충분하고 강제하면 오히려 어색하다. */
    .home-stage__lead-break {
        display: none;
    }

    /* 2026-09-08 모바일 재실측(위 .home-stage__actions 기본값 24px/40px→8px/24px)은 이
       버튼 크기(auto height, 21/13px 패딩)엔 과했다 — 데스크톱은 기존 40px 간격을 유지한다. */
    .home-stage__actions {
        gap: var(--mili-space-3);
        margin-top: 2.5rem;
    }

    /*
     * ⚠️ 2026-08-19 재실측(get_design_context, node 1942:4973/1942:4974, fileKey
     * 8qAqeXw50F8GKDGkeW0Pua — 로그인 전 화면 버튼 형태 QA): 로그인/회원가입 버튼은
     * "140px 고정폭 + SemiBold" 가 아니라 텍스트에 맞춘 auto 폭 + 버튼마다 다른 패딩·굵기다.
     * 2026-08-28 모바일 재실측(node 2806:32882/32883)은 모바일 전용 값(36px/12px)이라
     * 데스크톱은 이 재실측 값을 그대로 유지한다.
     *   로그인(accent):  px 21px / py 13px, Medium
     *   회원가입(ghost): px 20px / py 12px, Regular, 테두리 라임 50% 알파(풀 알파 아님) */
    .home-stage__actions .home-btn:not(.home-stage__cta) {
        height: auto;
        font-size: 16px;
    }

    .home-stage__actions .home-btn--accent:not(.home-stage__cta) {
        padding: 13px 21px;
        font-weight: var(--mili-font-weight-medium);
    }

    .home-stage__actions .home-btn--ghost {
        padding: 12px 20px;
        font-weight: var(--mili-font-weight-regular);
    }

    /*
     * ⚠️ 2026-08-07 재실측: 카드 폭 비율 "좌 1207:우 812"는 이 프로젝트가 아닌 다른(예전)
     * 참고 소스의 값이 잘못 옮겨진 것이었다. 실제 Figma(fileKey 8qAqeXw50F8GKDGkeW0Pua,
     * node 1378:281/1378:304)는 비율 트랙이 아니라 "좌 카드 고정 802px + 우 카드가 나머지를
     * 채움(flex-grow)"이다 — 갭도 26px 이 아니라 36px. --mili-content-max(1440px)에서
     * 802+36+602 로 정확히 맞아떨어진다. fr 비율(1.49:1)로 흉내 내면 콘텐츠 최대폭(1440px)
     * 미만인 폭에서 좌 카드가 실제보다 넓어지면서 우측에 Figma 에 없는 빈 여백이 생긴다 —
     * 그래서 grid 대신 flex 로 좌 카드만 고정폭을 준다. 높이는 여전히 고정값이 아니라
     * align-items:stretch(flex 기본값)로 두 카드 중 더 큰 콘텐츠에 맞춰 자동으로 정해진다.
     *
     * ⚠️ 2열 전환은 이 블록(1280px)이 아니라 아래 1536px 블록에서 한다. 1280px 실측 —
     * 뷰포트 1280 - 사이드바 240 - 페이지 여백 96 = 944px 에서 좌 카드를 802px 로 고정하면
     * 우측 카드가 944-802-36=106px 밖에 안 남아 "인기 학습 강좌" 항목이 전혀 들어가지
     * 않는다. --mili-content-max(1440px) 근처 폭이 아니면 이 레이아웃 자체가 성립하지
     * 않으므로, 그 전에는 아래(비-미디어) 세로 1열을 그대로 쓴다.
     */
    .home-panels {
        display: grid;
        gap: 36px;
        /* ⚠️ 2026-09-18 재실측(사용자 지적 — "카드 위치가 다르다, 하단 여백이 없다").
           2026-09 개편 당시 100px(node 4038:312547 "Frame 2087340230" gap-[100px])로 잡았던
           값은 그 노드가 flex column + justify-content:space-between 를 써서, 실은 "히어로~카드
           간격"이 아니라 "바깥 래퍼(4695:218721)의 상하 padding"이 100px 라는 뜻이었다 —
           간격 자체는 space-between 이 남는 공간을 계산해서 정한다. node 4695:218721(get_design_context,
           로그인후 다크 실측) 기준으로 직접 계산하면: 전체 높이 1008px − 상하 padding 200px(100×2)
           − 히어로 텍스트 블록 244px − 카드 행 400px = 164px 가 남는 간격이다. 좁은 화면에서
           히어로 문구가 줄바꿈되면 이 값도 달라지지만(원본은 그때마다 재계산되는 space-between),
           고정 마진으로 흉내 낼 수밖에 없어 이 기준 텍스트 길이의 값을 쓴다. */
        margin-top: 164px;
        /* ⚠️ 2026-09-21 재지적(사용자 — ".home-journey 가 너무 작다"): 위 164px 코멘트에서
           py-100px 중 위쪽 절반만 반영하고 **아래쪽 100px 를 빠뜨렸다.** 바깥 래퍼가 상하
           동일하게 100px 씩 패딩을 주므로 카드 행 아래에도 같은 여백이 있어야 배경(::before)이
           시안의 1080px 캔버스 높이만큼 자연스럽게 이어진다 — 지금까지는 카드 바로 아래에서
           배경이 끊겨 히어로 전체 영역이 시안보다 짧고 작아 보였다.
           padding 이 아니라 margin 이어야 한다 — box-sizing:border-box 에서 아래 1780px
           블록의 height:400px 는 패딩까지 포함한 값이라, padding-bottom 으로 넣으면 카드
           내용 높이가 400-100=300px 로 눌려 버린다(실측으로 확인). margin 은 그 height 박스
           밖에 더해지므로 카드 높이를 건드리지 않는다. */
        padding: 0;
        margin-bottom: 100px;
    }

    .home-card {
        border-radius: 0;
        padding: var(--mili-space-6);
    }

    .home-card--recent {
        /* 인기 학습 강좌 목록이 카드 높이를 채우도록 세로 흐름으로 둔다. */
        display: flex;
        flex-direction: column;
    }

    /* 캔버스 전체가 한 덩어리로 스케일되므로 아바타도 다시 고정 px 로 둔다.
       ⚠️ 2026-08-31 재실측(node 2224:105400 "Frame 2087338942"): 160px 다 — 190px 는
       스탯이 아바타 옆에 있던 시절 세로 높이를 맞추려던 값이었다. */
    .home-profile__avatar {
        width: 160px;
        height: 160px;
    }

    /* 시안: 아바타 우측 끝(160) → 텍스트 블록 시작(196) = 36px.
       ⚠️ 2026-08-31 재실측(node 2224:105399): 정렬이 flex-start 가 아니라 **items-center** 다 —
       텍스트 블록(122)이 아바타(160)보다 낮아 세로 중앙에 놓인다. 좁은 폭(<1280)은 아바타가
       52px 뿐이고 텍스트 블록이 훨씬 높아 중앙 정렬하면 아바타가 허공에 뜨므로, 이 정렬은
       아바타가 160px 인 데스크톱에만 준다. */
    .home-profile__head {
        gap: 36px;
        align-items: center;
    }

    /* ⚠️ 2026-08-31 재실측(node 2224:105411 "Lv. 23"): 데스크톱은 Orbitron Bold 18px 다.
       기본값 16px 은 모바일 노드(2806:32687) 실측이라 그대로 둔다. */
    .home-level__tier {
        font-size: 18px;
    }

    .home-profile__name {
        font-size: 32px;
        letter-spacing: -1.44px;
    }

    .home-profile__summary {
        font-size: 14px;
    }

    .home-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-card__title {
        font-size: 24px;
    }

    /* 빈 상태("아직 학습 중인 강의가 없어요")의 기본 제목 크기 확대 — 패널 안(진행 중 과정)의
       20px 는 위 .home-recent-panel .home-recent__title 이 이미 모든 폭에서 고정값으로 준다. */
    .home-recent__title {
        font-size: 20px;
        letter-spacing: -0.9px;
    }

    .home-recent__meta {
        font-size: 11px;
        letter-spacing: -0.132px;
    }

    /* ---------- 비로그인 CTA 카드 확대 ----------
       Figma 실측(node 1378:287, fileKey 8qAqeXw50F8GKDGkeW0Pua): 링 아바타 size-[200px],
       border 1.333px 라임. */
    .home-guest__ring {
        width: 200px;
        height: 200px;
    }

    /* glow 장식은 .home-guest 의 overflow:hidden 에 잘린다(code·radar 는 카드 레벨로 옮겨서
       .home-card 자체의 overflow:hidden 을 쓴다). 이 블록이 내용 높이만큼만 차지하면 glow 가
       카드 가운데 직사각형으로 뚝 끊겨 보이므로 카드를 채운다.
       ⚠️ 2026-08-07 버그 수정: height:100% 만 두면 그리드가 오른쪽(인기 학습 강좌) 카드의
       자연 높이에 딱 맞춰 이 카드를 늘릴 때 특정 폭(1280~1440px 실측)에서 여유가 0px 로
       떨어져 200px 링이 카드 padding-box 와 정확히 같은 높이가 된다 — 이 상태에서 폰트
       렌더링 오차 등 아주 작은 변수만 생겨도 overflow:hidden 에 링이 잘린다. min-height 로
       최소 여유(32px)를 못박아 그런 경우에도 그리드 행 자체가 더 커지게 한다. */
    .home-guest {
        height: 100%;
        min-height: 232px;
    }

    .home-guest__title {
        font-size: 28px;
        letter-spacing: -1.2px;
    }

    .home-guest__desc {
        font-size: 14px;
        margin: 8px 0 22px;
    }

    .home-corner {
        display: block;
        width: 20px;
        height: 20px;
        border-width: 3px;
    }

    .home-guest__glow {
        display: block;
    }
}

/* 프로필·최근 학습 카드를 좌우 2열로 쪼갠다 — 위 1280px 블록의 주석 참고(Figma 실제
   기법: 좌 카드 고정 802px + 우 카드가 나머지를 채움, grid 비율 트랙이 아니다).
   944px(1280px 뷰포트 기준 콘텐츠 폭)보다 여유 있는 폭에서만 켠다. */
@media (min-width: 1536px) {
    .home-panels {
        display: flex;
    }

    .home-card--profile {
        flex: 0 0 802px;
    }

    .home-card--recent {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ===================================================================
   시안 고정 지오메트리 (>= 1780px)
   ⚠️ 2026-08-31: 시안(node 2224:105392 "Frame 2087338993")은 1920 프레임에서 프로필 802 +
   간격 36 + 최근학습 602 = 1440 이고 **두 카드 높이가 400px**(로그인 전 440px)로 같다.
   그 폭이 실제로 확보되는 지점을 실측으로 찾았다 — 콘텐츠가 --mili-content-max(1440) 상한에
   닿는 뷰포트가 **1780px** 이다(1536→최근학습 362px / 1600→426 / 1700→526 / 1760→586 /
   1780→602 ✓). 그래서 고정 높이를 위 1536 블록에 넣으면 1536~1779 구간에서 최근학습 카드가
   424px 까지 굶어 카드당 176px 이 되고 본문이 19px 잘렸다(실측). 시안 지오메트리는 그것이
   정확히 성립하는 폭에서만 켠다 — 1536~1779 는 좌우 배치는 유지하되 높이는 내용에 맡긴다.
   =================================================================== */
@media (min-width: 1780px) {
    /* flex 컨테이너에 높이를 주면 기본 align-items:stretch 로 두 자식이 함께 맞춰진다. */
    .home-panels {
        height: 400px;
    }

    /* 로그인 전 시안(node 2224:105185)은 같은 자리가 440px 다 — 게스트 카드(링 아바타 + 2줄
       문구)가 프로필 카드보다 세로로 크다. :has() 는 이 파일 .home-stage__actions 가 쓰는 것과
       같은 패턴이라 새 기법을 들이지 않는다. */
    .home-panels:has(.home-guest) {
        height: 440px;
    }

    /* ⚠️ 2026-08-31: 카드를 400px 로 못박으니 프로필 내용 아래에 여백이 크게 남았다(실측 97px).
       원인은 상단 패딩이다 — 시안(node 2224:105399/105418)은 내용이 y=51 에서 시작해 y=335.87
       에서 끝나고 하단이 64.13px 인데, 우리 .home-card 공용 패딩은 28px 이라 위에서 23px 을
       덜 쓰고 그만큼이 아래로 밀렸다. 이 카드만 시안 값으로 올린다(가로 패딩도 시안이 x=51).
       최근학습 카드는 시안이 25px 이라 공용 28px 을 그대로 둔다 — 시안에서도 두 카드의
       내부 상단선은 일치하지 않는다(프로필 51 / 최근학습 25).

       ⚠️ 패딩은 사방 균일이 아니다. 자식 좌표로 역산하면
         top    = 51            (2224:105399 y=51)
         left   = 51            (x=51)
         right  = 802-(51+700)  = 51
         bottom = 400-335.87    = 64.13   ← 여기만 다르다
       하단을 64px 로 명시해야 내용 상자(400-51-64-테두리 2 = 283px)가 내용 높이(아바타 160 +
       간격 24 + 타일 97 = 281)에 딱 맞아 떠 있는 여백이 사라진다. 사방 51px 로 두면 아래에
       13px 이 다시 남는다. */
    .home-card--profile {
        padding: 51px 51px 64px;
    }

    /* min-height:0 이 없으면 flex 아이템의 기본 min-height:auto 때문에 내용 높이만큼
       카드가 부풀어 400px 를 넘는다. */
    .home-card--recent {
        min-height: 0;
    }

    /* 400px 안에 학습아이템 카드 2장을 넣으려면 좌우 배치여야 한다.
       산술(카드 padding 28×2, 제목 24px+margin 24 → 그리드 가용 289px): 세로로 쌓으면 카드
       하나가 약 262px 라 두 장이면 540px 로 251px 넘친다. 가로면 한 장(실측 264px 폭)이
       289px 안에 들어간다. 1780px 미만은 카드가 전체 폭이거나 좁아 높이 제약이 없으므로
       사용자 지시대로 세로를 유지한다. */
    .home-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
        /* 행도 남은 높이로 못박는다. 기본 auto 행이면 내용 자연높이(실측 295px)가 가용
           높이(실측 289.2px)를 넘겨 패널 하단 6px 이 .home-card 의 overflow:hidden 에 잘렸다. */
        grid-template-rows: minmax(0, 1fr);
    }

    /* 압박이 생기면 본문이 흡수하고 CTA 는 절대 줄지도 잘리지도 않게 한다 —
       진행률·버튼이 잘리는 것이 제목 한 줄이 잘리는 것보다 나쁘다. */
    .home-recent-grid .home-recent-panel,
    .home-recent-grid .home-recent-panel__body {
        min-height: 0;
        overflow: hidden;
    }

    .home-recent-grid .home-btn--block {
        flex-shrink: 0;
    }

    /* 반폭(실측 264px) 카드에서는 단독 패널 시절 여백이 과하다 — 기본 규칙의 24px 를 줄인다. */
    .home-recent-grid .home-recent-panel .home-recent__title {
        margin-top: var(--mili-space-4);
    }

    /* 264px 폭이라 긴 과정명이 3줄 이상으로 늘어난다 — 고정 높이 카드에서 그대로 두면 아래
       진행률·CTA 를 밀어낸다. 두 줄로 자르고 말줄임한다(전체 제목은 학습 화면에서 볼 수 있다). */
    .home-recent-grid .home-recent__title,
    .home-recent-grid .home-recent__meta {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

/* ===================================================================
   라이트 홈 — 2026-09-21 Figma 시안 반영 (fileKey 8qAqeXw50F8GKDGkeW0Pua,
   node 4695:219212 "Light/홈/로그인후" 1920×1080, get_design_context 실측)
   위쪽 각 규칙이 다크·모바일 값을 갖고 있어, 새 시안이 뒤집는 라이트 값만 여기에 모았다.
   시안이 데스크톱 한 폭(1920)뿐이라 크기 값은 ≥1280px 에서만 덮고, 좁은 폭은 위 모바일 실측(2026-08-28
   node 2806:*)을 그대로 둔다. 색은 테마 값이라 전 폭에 건다.
   =================================================================== */
/* 최근 학습 안쪽 카드(강의·프로젝트) — 시안: Neutral/50 불투명 + Neutral/300 1px, 반경은 위 .home-recent-panel
   기본값(0)을 그대로 쓴다(2026-09-21 재실측 — 종전 주석의 "반경 12px"는 오독이었다).
   위 09-01 실측의 Neutral/100 은 새 시안에서 Neutral/50 으로 바뀌었다. 진행률 라벨은 Neutral/900. */
.mili-light .home-recent-panel {
    background: var(--mili-neutral-50);
}

.mili-light .home-recent__progress-label {
    color: var(--mili-neutral-900);
}

/* 히어로 제목·프로필 이름 — 시안 Neutral/900(#0e1013). 전역 --mili-ink 라이트 값(#1e2227)과 미세하게 다르다. */
.mili-light .home-stage__title,
.mili-light .home-profile__name {
    color: var(--mili-neutral-900);
}

@media (min-width: 1280px) {
    /* 히어로 — 버튼 44px·Neutral/900 배경. 리드 굵기·줄간격은 위 ≥1280px 공통 블록(.home-stage__lead)으로 옮겼다
       (2026-09-21 재실측: 라이트 리드도 Bold 가 아니라 SemiBold). */
    .mili-light .home-stage__cta {
        height: 44px;
        padding: 0 21px;
        font-weight: var(--mili-font-weight-medium);
        background: var(--mili-neutral-900);
        border-color: var(--mili-neutral-900);
        color: var(--mili-neutral-50);
    }

    /* 2026-09-22 사용자 지시 — 다크·라이트 카드 내부 콘텐츠 위치를 일치시킨다. 아래는 전부 다크와
       다른 폰트 크기·여백·flex 구조를 따로 주던 라이트 전용 규칙이었다(요약·레벨 폰트 크기, 스탯
       상단 여백, 제목 크기·여백, 진행률을 margin-top:auto 로 카드 하단에 붙이는 구조, 버튼 상단
       여백 등) — 전부 지우고 다크와 같은 값(공용 규칙)을 그대로 쓰게 한다. 색만 라이트 전용으로 남긴다. */
    .mili-light .home-card__title {
        color: var(--mili-neutral-900);
    }

    .mili-light .home-recent-grid .home-recent-panel .home-recent__title {
        color: var(--mili-neutral-900);
    }

    .mili-light .home-recent-panel .home-btn--block {
        background: var(--mili-neutral-900);
        border-color: var(--mili-neutral-900);
        color: var(--mili-neutral-50);
    }
}

/* ===================================================================
   설명 섹션 3종 (모바일/협업/로드맵) — 2026-09 Figma 전면 개편
   node 4038:312547 Frame 2087340221/222/223.
   ⚠️ 2026-09-21 이미지 전면 재추출(사용자 지적 — "이미지 카드가 너무 작고 텍스트도
   다르다"): 예전 explain-*.png 는 이전 대화에서 ffmpeg 로 근사 합성한 404×404
   저해상도 이미지였다(회색·텍스트 불일치 원인). get_screenshot 으로 해당 인스턴스
   (fileKey 8qAqeXw50F8GKDGkeW0Pua, node 4038:312547) 를 원본 해상도(1920×6091)로
   받아 세 섹션의 폰목업+배경+코너브래킷 영역을 그대로 크롭했다.
   ⚠️ 2026-09-21 재수정: 위 크롭을 라이트 화면(4038:312547)에서만 떠서 다크·라이트 공용으로
   썼는데, 프레임 배경색이 테마마다 다르다(협업 이미지: 다크 #1C1F23 / 라이트 민트,
   나머지 둘: 다크 #1E322F / 라이트 #25413B). 그래서 다크는 4038:312544, 라이트는
   4038:312547 에서 각각 잘라 explain-{mobile,collab,roadmap}-{dark,light}.png 6장으로 나눴다.
   바깥 여백(브래킷 주변)은 투명 처리해 페이지 배경이 비치게 했다. 이미지 자체에 카드
   배경·모서리 장식이 이미 구워져 있으므로 border-radius/카드 스타일을 따로 씌우지 않는다
   (둥글게 자르면 원본에 없는 라운드가 생기고 브래킷이 잘린다).
   =================================================================== */
/* 2026-09-21 Figma 실측 재반영(다크 4038:312544 / 라이트 4038:312547 / 모바일 4038:312545·312548).
   행 사이 100px(행 프레임 y 120/820/1520, 높이 600), 모바일은 이미지가 위·텍스트가 아래 가운데 정렬,
   이미지→텍스트 32px, 배지→제목→본문 12px. 자간은 전부 -0.02em(=시안 -0.84/-0.48/-0.36/-0.28/-0.24px).
   theme/reference.css 가 전역으로 letter-spacing:0 !important 를 걸어 두어서 이 섹션 글자만 !important 로 되돌린다
   (자간이 빠지면 본문이 시안보다 ~2% 넓어 줄바꿈이 어긋난다). */
.home-explain {
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 60px 0;
    --home-explain-badge-bg: var(--mili-neutral-50);
    --home-explain-badge-fg: var(--mili-neutral-900);
    --home-explain-title: var(--mili-primary-200);
    --home-explain-desc: var(--mili-neutral-400);
}

/* 라이트: 배지 검정 바탕 흰 글자. 제목 #25413B·본문 #666 은 primitives 에 대응 토큰이 없어 시안 실측값을
   그대로 둔다(새 토큰 여부는 사용자 확인 대기). */
.mili-light .home-explain {
    --home-explain-badge-bg: var(--mili-neutral-950);
    --home-explain-badge-fg: var(--mili-neutral-50);
    --home-explain-title: #25413b;
    --home-explain-desc: #666666;
}

.home-explain__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mili-space-8);
    align-items: center;
}

.home-explain__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mili-space-3);
    justify-self: center;
    max-width: 510px;
}

/* 배지: 모바일 시안 다크는 패딩 8/16, 라이트는 6/12(시안 자체가 테마별로 다르다). 데스크톱은 둘 다 8/16. */
.home-explain .home-explain__badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--mili-radius-filter);
    background: var(--home-explain-badge-bg);
    color: var(--home-explain-badge-fg);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.02em !important;
}

@media (max-width: 1023px) {
    .mili-light .home-explain .home-explain__badge {
        padding: 6px 12px;
    }
}

.home-explain .home-explain__title {
    margin: 0;
    word-break: keep-all;
    color: var(--home-explain-title);
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -0.02em !important;
}

.home-explain .home-explain__desc {
    margin: 0;
    word-break: keep-all;
    color: var(--home-explain-desc);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.02em !important;
}

.home-explain__media {
    order: -1;
    display: flex;
    justify-content: center;
}

.home-explain__media img {
    width: 100%;
    max-width: 675px;
    height: auto;
    display: block;
}

/* 다크/라이트 이미지를 둘 다 두고 테마에 맞는 한 장만 보인다 — 프레임 배경색이 테마마다 다르다. */
.home-explain__media .home-explain__img--light,
.mili-light .home-explain__media .home-explain__img--dark {
    display: none;
}

.mili-light .home-explain__media .home-explain__img--light {
    display: block;
}

@media (min-width: 1024px) {
    /* Figma 실측: 텍스트 블록 510px : 이미지 600px (1920 캔버스, 320px 좌우 여백 기준) —
       1:1 이 아니라 17:20 비율이다. 1fr 1fr 로 반반씩 나누면 이미지가 시안보다 좁아
       보인다("너무 작다" 지적의 또 다른 원인). */
    .home-explain {
        padding: 120px 0;
        --home-explain-badge-fg: var(--mili-neutral-950);
        --home-explain-desc: var(--mili-neutral-550);
    }

    /* 텍스트 510 : 간격 170 : 이미지 600 (1920 프레임). 1920 미만에서는 폭에 비례해 줄인다. */
    .home-explain__row {
        grid-template-columns: 17fr 20fr;
        column-gap: min(170px, 8.85vw);
        row-gap: 0;
    }

    .home-explain__media {
        order: 0;
    }

    .home-explain__row--reverse {
        grid-template-columns: 20fr 17fr;
    }

    .home-explain__row--reverse .home-explain__media {
        order: -1;
    }

    .home-explain__text {
        align-items: flex-start;
        text-align: left;
        justify-self: start;
    }

    /* 42/24/18px 는 1920 기준 — 그보다 좁으면 vw 비례로 줄이되 바닥값을 둔다. */
    .home-explain .home-explain__badge,
    .mili-light .home-explain .home-explain__badge {
        padding: 8px 16px;
        font-size: clamp(14px, 0.9375vw, 18px);
    }

    .home-explain .home-explain__title {
        font-size: clamp(30px, 2.1875vw, 42px);
    }

    .home-explain .home-explain__desc {
        font-size: clamp(16px, 1.25vw, 24px);
    }
}

/* ===================================================================
   강의/프로젝트 그리드 2벌 — node 4038:312547 Frame 2087340216/215.
   카드 자체(.catalog-card/.pbl-card)는 vod/course-list.css·pbl/project-list.css 가 이미
   전역으로 스타일링한다(_list-card.jsp 공용 마크업 재사용, 2026-09 사용자 지적으로
   자체 제작 카드에서 교체) — 이 파일은 섹션 제목과 가로 스크롤 컨테이너만 잡는다. */
.home-grid-section {
    padding: var(--mili-space-6) 0;
}

.home-grid-section__title {
    margin: 0 0 var(--mili-space-5);
    color: var(--mili-ink);
    display: flex;
    align-items: center;
    gap: var(--mili-space-2);
}

/* 시안(node 4038:312547 Container, width 2016 — 뷰포트 1520 초과분은 가로 스크롤)은 5장을
   한 줄에 늘어놓고 넘치는 만큼 스크롤한다(사용자 지적, grid로 줄바꿈하던 것에서 교체).
   ⚠️ 2026-09-21 카드 폭 고정: .catalog-card/.pbl-card 는 자체 폭 규칙이 없다(목록 화면에선 grid 가
   폭을 준다). 여기서 flex:0 0 auto 로 두면 카드가 내용 길이만큼만 늘어나 강의 카드는 339px,
   프로젝트 카드는 221~436px 로 제각각이 됐다(1440px 실측). Figma 실측대로 데스크톱은 384px·간격 24px
   (node 4038:312544 "Button" 인스턴스 384×448, x 간격 408), 모바일은 한 줄에 2장(카드 171px·간격 8px,
   node 4038:312545 "강의 Card" 171×237, x 간격 179)으로 고정한다. 두 섹션이 같은 규칙을 쓴다. */
.home-grid-scroll {
    --home-card-w: 384px;
    --home-card-gap: var(--mili-space-6);
    display: flex;
    gap: var(--home-card-gap);
    overflow-x: auto;
    padding-bottom: var(--mili-space-2);
    scrollbar-width: thin;
    /* 스크롤바는 마우스를 올리거나 키보드 포커스가 들어왔을 때만 보인다(사용자 요청). 트랙 자리는 그대로 두고
       색만 투명 → 전역 값(theme/variables.css)으로 바꾸므로 hover 시 레이아웃이 흔들리지 않는다.
       hover 가 없는 터치 기기는 원래 오버레이 스크롤바라 기본값을 유지한다. */
    scrollbar-color: transparent transparent;
}

.home-grid-scroll:hover,
.home-grid-scroll:focus-within {
    scrollbar-color: var(--mili-border-strong) var(--mili-app-bg);
}

@media (hover: none) {
    .home-grid-scroll {
        scrollbar-color: var(--mili-border-strong) var(--mili-app-bg);
    }
}

.home-grid-scroll > * {
    flex: 0 0 var(--home-card-w);
    min-width: 0;
}

@media (max-width: 767.98px) {
    .home-grid-scroll {
        --home-card-gap: var(--mili-space-2);
        --home-card-w: calc((100% - var(--home-card-gap)) / 2);
    }
}

/* ===================================================================
   하단 CTA 배너 — node 4038:312547 Frame 2087340276.
   images/home/cta-bg-generated.png 는 다크·라이트 공용 원본(직접 추출, 합성 불필요).
   =================================================================== */
/* 실측(node 4038:312547 "Frame 2087340276"): 배너 전체 1920x688(비율 약 2.79:1). padding-block
   을 그 비율에 맞춰 넉넉히 준다 — 이전엔 콘텐츠 높이만큼만 늘어나 시안보다 훨씬 납작했다.
   ⚠️ 2026-09-18 재확인(사용자 지적 — "이건 카드가 아니다, 라운드 처리하지 말고 꽉 차야
   한다"): get_metadata 실측으로 Frame 2087340276 자체가 x=0/width=1920(전체 캔버스 폭)이고
   바로 아래 Footer 도 같은 폭으로 틈 없이 붙는다 — 카드가 아니라 섹션 전체 폭 밴드다.
   border-radius 를 없애고, .app-page(1440px 컬럼) 밖까지 사이드바 뺀 뷰포트 전체 폭으로
   브레이크아웃한다 — 위 .home-journey 와 같은 --home-sidebar-w(.home-shell 공용, 2026-09-21)
   를 써서 모든 폭에서 적용한다(처음엔 ≥1280px 로 한정했다가 "모바일에서도 좌우 꽉 차게"
   지적으로 전체 폭으로 넓혔다). 내부 콘텐츠(로고·제목·버튼)는 padding 만으로 이미 안쪽에
   머무르므로 .home-journey 처럼 별도 콘텐츠 인셋 계산은 필요 없다. */
.home-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mili-space-3);
    --cta-frame-w: calc(100vw - var(--home-sidebar-w, 0px));
    --cta-content-w: min(calc(var(--cta-frame-w) - var(--mili-page-padding, 32px) * 2), var(--mili-content-max, 1440px));
    --cta-inset: calc((var(--cta-frame-w) - var(--cta-content-w)) / 2);
    width: var(--cta-frame-w);
    margin: var(--mili-space-8) 0 var(--mili-space-8) calc(-1 * var(--cta-inset));
    padding: 88px calc(var(--cta-inset) + var(--mili-space-5));
    background-image: url("../images/home/cta-bg-generated.png");
    background-size: cover;
    background-position: center;
    /* 배경 이미지가 다크·라이트 공용(늘 어두운 톤)이라 글자색도 테마와 무관하게 항상
       흰색이다 — --mili-neutral-50 은 라이트 스코프 재정의가 없는 상수값(#ffffff)이라
       리터럴이 아니라 토큰으로 표현할 수 있다. */
    color: var(--mili-neutral-50);
}

.home-cta__logo {
    display: block;
    margin-bottom: var(--mili-space-2);
}

/* ⚠️ 2026-09-18 실측(get_design_context, node I4038:312547;275:279867 "Button"): 시작 버튼은
   공용 .home-btn--accent(뉴트럴 흑백)이 아니라 이 배너 전용 라임민트(--mili-primary-200,
   #c5fec4) 배경 + 거의 검정(--mili-neutral-950) 글자다. 다른 accent 버튼까지 바꾸면 안 되므로
   .home-cta__btn 스코프로만 덮어쓴다. */
.home-cta__btn {
    background: var(--mili-primary-200);
    border-color: var(--mili-primary-200);
    color: var(--mili-neutral-950);
}

.home-cta__btn:hover,
.home-cta__btn:focus {
    background: var(--mili-primary-200);
    border-color: var(--mili-primary-200);
    color: var(--mili-neutral-950);
}

/* 좁은 화면에서 32px 제목이 강제 줄바꿈과 겹쳐 단어 중간이 끊기던 문제(실측 390px) —
   자연 줄바꿈에 맡기고 글자 크기도 한 단 줄인다. */
@media (max-width: 767.98px) {
    .home-cta__title-break {
        display: none;
    }

    .home-cta__title {
        font-size: 24px;
    }
}

.home-cta__title,
.home-cta__desc {
    margin: 0;
    color: var(--mili-neutral-50);
}

.home-cta__btn {
    margin-top: var(--mili-space-3);
}


/* ===================================================================
   ⚠️ 2026-09-21 텍스트 색상 시안 반영 — Figma 8qAqeXw50F8GKDGkeW0Pua
   Dark/홈/로그인전 4038:312544 · Light/홈/로그인전 4038:312547 (get_design_context 실측).
   앞선 블록들이 색을 화면 곳곳에서 따로 정해 두었고 여러 곳이 시안과 달랐다
   (다크 리드 #868e96 ↔ 시안 #bfc0c2, 라이트 게스트 제목 #1e2227 ↔ #0e1013, 인기 강좌 버튼 초록 ↔ 시안 회색 등).
   폭·테마 블록에 흩어진 규칙을 하나씩 고치면 다시 어긋나기 쉬워 색만 여기 한 곳에 모아 덮는다(파일 맨 끝).
   중립·프라이머리는 primitives 토큰을 쓴다 — --mili-neutral-* 는 두 테마 값이 같고 --mili-primary-* 는 테마별로
   값이 바뀐다(다크 200=#c5fec4/600=#76e37b, 라이트 200=#83ccbe/600=#178b73).
   토큰이 없는 값만 리터럴로 남겼고 각 줄에 시안 노드를 적었다(새 토큰 여부는 사용자 확인 대기).
   =================================================================== */

/* ---------- 히어로 ---------- */
/* 제목 — 다크 Neutral/50(#fff, 종전 --mili-ink #f8f9fa), 라이트 Neutral/900(#0e1013). node ...;275:281397 / 279429 */
.home-stage__title {
    color: var(--mili-neutral-50);
}

.mili-light .home-stage__title {
    color: var(--mili-neutral-900);
}

/* "밀리AI" 글자만 그라디언트 — 다크·라이트 시안 동일: bg-gradient-to-r from-[#18cc90] to-[#1f8fff] to-[42.308%].
   대응 토큰이 없어 리터럴이다(...;275:281397 / 279429 의 span).
   ⚠️ 2026-09-21 정정: 시안의 42.308% 는 Figma 가 텍스트 노드 "전체 박스" 폭 기준으로 잡은 값이다(구간에 준 그라디언트도
   기준 박스는 노드 전체). CSS 는 이 span 폭 기준이라 42.308% 를 그대로 쓰면 "밀리"에서 이미 #1f8fff 에 닿아
   "AI" 가 단색 파랑이 된다. 시안은 "AI" 끝 근처에서 종점에 닿으므로 span 기준 100% 로 둔다. */
.home-stage__title-accent {
    background: linear-gradient(to right, #18cc90, #1f8fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 리드 — 다크 Neutral/550(#bfc0c2, 종전 --mili-fg-muted #868e96), 라이트 Neutral/700(#66686c). ...;275:281398 / 279430 */
.home-stage__lead {
    color: var(--mili-neutral-550);
}

.mili-light .home-stage__lead {
    color: var(--mili-neutral-700);
}

/* 로그인 버튼(비로그인 히어로) — 다크 Primary/200 채움 + Neutral/950 글자, 라이트 Primary/600 채움 + Neutral/50 글자.
   ...;275:281400 / 279432. 로그인 후 히어로의 .home-stage__cta("학습 이어가기")는 대상이 아니다. */
.home-stage__actions .home-btn--accent:not(.home-stage__cta),
.home-stage__actions .home-btn--accent:not(.home-stage__cta):hover,
.home-stage__actions .home-btn--accent:not(.home-stage__cta):focus {
    background: var(--mili-primary-200);
    border-color: var(--mili-primary-200);
    color: var(--mili-neutral-950);
}

.mili-light .home-stage__actions .home-btn--accent:not(.home-stage__cta),
.mili-light .home-stage__actions .home-btn--accent:not(.home-stage__cta):hover,
.mili-light .home-stage__actions .home-btn--accent:not(.home-stage__cta):focus {
    background: var(--mili-primary-600);
    border-color: var(--mili-primary-600);
    color: var(--mili-neutral-50);
}

/* 회원가입 — 다크: 채움 없음 + Neutral/700 테두리 + Neutral/550 글자, 라이트: Neutral/50 채움 + Neutral/550 테두리 + Neutral/800 글자.
   ...;275:281401 / 279433 (2026-08-24 의 "사이드바색 채움" 실측을 이 시안이 대체한다). */
.home-stage__actions .home-btn--ghost,
.home-stage__actions .home-btn--ghost:hover,
.home-stage__actions .home-btn--ghost:focus {
    background: transparent;
    border-color: var(--mili-neutral-700);
    color: var(--mili-neutral-550);
}

.mili-light .home-stage__actions .home-btn--ghost,
.mili-light .home-stage__actions .home-btn--ghost:hover,
.mili-light .home-stage__actions .home-btn--ghost:focus {
    background: var(--mili-neutral-50);
    border-color: var(--mili-neutral-550);
    color: var(--mili-neutral-800);
}

/* ---------- 게스트 카드 ---------- */
/* 제목 — 다크 #f8f9fa(종전과 같음), 라이트 Neutral/900(#0e1013, 종전 #1e2227). ...;275:281410 / 279495 */
.mili-light .home-guest__title {
    color: var(--mili-neutral-900);
}

/* 설명 — 다크 #d7d7d7(토큰 없음, 리터럴; 종전 #868e96), 라이트 Neutral/700. ...;275:281411 / 279496 */
.home-guest__desc {
    color: #d7d7d7;
}

.mili-light .home-guest__desc {
    color: var(--mili-neutral-700);
}

/* "AI 역량진단 시작하기" — 로그인 버튼과 같은 색(다크 Primary/200 + Neutral/950, 라이트 Primary/600 + Neutral/50). ...;275:281417 / 279497 */
.home-btn--accent.home-guest__cta,
.home-btn--accent.home-guest__cta:hover,
.home-btn--accent.home-guest__cta:focus {
    background: var(--mili-primary-200);
    border-color: var(--mili-primary-200);
    color: var(--mili-neutral-950);
}

.mili-light .home-btn--accent.home-guest__cta,
.mili-light .home-btn--accent.home-guest__cta:hover,
.mili-light .home-btn--accent.home-guest__cta:focus {
    background: var(--mili-primary-600);
    border-color: var(--mili-primary-600);
    color: var(--mili-neutral-50);
}

/* ---------- 강의/프로젝트 그리드 제목 ---------- */
/* 다크 white, 라이트 black(Neutral/950). ...;275:281817 / 279837 */
.home-grid-section__title {
    color: var(--mili-neutral-50);
}

.mili-light .home-grid-section__title {
    color: var(--mili-neutral-950);
}

/* ---------- 하단 CTA 배너 ---------- */
/* 설명 — 다크·라이트 모두 #bfc0c2 = Neutral/550(종전 흰색). 배너 배경이 두 테마 모두 어두운 이미지라 같은 값이다. ...;275:281850 / 279865 */
.home-cta__desc {
    color: var(--mili-neutral-550);
}

/* 시작 버튼 — 배너가 두 테마 모두 어두운 이미지 위라 라이트에서도 다크 팔레트 값(#c5fec4)이다. 시안 라이트 노드도
   primary/200 = #c5fec4 로 해석된다(...;275:279867). --mili-primary-200 은 라이트에서 #83ccbe 로 바뀌므로 토큰을
   못 쓰고 리터럴로 고정한다. */
.mili-light .home-cta__btn,
.mili-light .home-cta__btn:hover,
.mili-light .home-cta__btn:focus {
    background: #c5fec4;
    border-color: #c5fec4;
    color: var(--mili-neutral-950);
}


/* ===================================================================
   ⚠️ 2026-09-21 Figma 최종 검수 반영 — fileKey 8qAqeXw50F8GKDGkeW0Pua
   "홈 / 로그인 전" 4038:312533 (Dark 4038:312544 · Light 4038:312547 · 모바일 4038:312545/312548).
   위쪽 블록들이 화면 곳곳에서 따로 잡은 값과 시안이 어긋난 자리만 여기서 덮는다(파일 맨 끝이라 같은
   특이도면 이쪽이 이긴다). 새 값에 대응 토큰이 없으면 리터럴로 두고 그 줄에 시안 근거를 적었다.
   =================================================================== */

/* ---------- 공용: 사이드바 뺀 뷰포트 폭으로 브레이크아웃하는 밴드가 쓰는 변수 ----------
   .home-journey 가 자기 안에서만 계산하던 값을 밴드(설명·그리드·CTA)도 쓰도록 공용 조상에 올린다. */
.home-shell {
    --home-frame-w: calc(100vw - var(--home-sidebar-w, 0px));
    --home-content-w: min(calc(var(--home-frame-w) - var(--mili-page-padding, 32px) * 2), var(--mili-content-max, 1440px));
    --home-inset: calc((var(--home-frame-w) - var(--home-content-w)) / 2);
    /* 시안 프레임(1920) 1px 에 해당하는 길이 — 배경 합성 좌표를 뷰포트에 비례시킨다. */
    --home-u: calc(100vw / 1920);
}

/* ---------- 헤더(상단바) ----------
   시안은 다크·라이트 모두 헤더 띠가 없다 — 히어로 배경이 화면 맨 위(y=0)부터 이어지고 그 위에 로고·아이콘·칩만 얹힌다
   (Figma 다크 y=5/90 픽셀 #021c15/#021b15 = 히어로 색, 종전 화면은 #0e1014 띠). 라이트에서만 하던 "히어로를 상단바
   높이만큼 끌어올리기"를 다크에도 걸고, 상단바 배경(안개 그라디언트)을 없앤다.
   ⚠️ AI 판단(사용자 재확인 필요): 배경이 투명이라 sticky 로 두면 스크롤한 본문 위에 아이콘이 겹쳐 읽기 어려워, 상단바를
   sticky → relative(문서 흐름대로 같이 스크롤)로 바꿨다. */
.home-shell .app-topbar,
.mili-light .home-shell .app-topbar {
    position: relative;
    background: transparent;
}

.home-journey {
    margin-top: calc(-1 * var(--mili-topbar-height));
    padding-top: var(--mili-topbar-height);
}

/* 비로그인 우측 칩 — 시안: 아바타 없이 "로그인 ⌄", 높이 40 · 좌우 12 · 반경 10(--mili-radius-control) · 12px SemiBold.
   다크 배경 Neutral/800(#2b2e33)·글자 Neutral/50, 라이트 배경 Neutral/100(#f8f9fa)·글자 Neutral/900. 알림벨은 없다. */
.home-shell .app-topbar .app-chip-user--guest {
    gap: 4px;
    height: 40px;
    margin-left: 0;
    padding: 4px 12px;
    border: 0;
    border-radius: var(--mili-radius-control);
    background: var(--mili-neutral-800);
    color: var(--mili-neutral-50);
    font-size: 12px;
    font-weight: var(--mili-font-weight-semibold);
    line-height: 1.3;
}

.home-shell .app-topbar .app-chip-user--guest::before {
    display: none;
}

.home-shell .app-topbar .app-chip-user--guest:hover,
.home-shell .app-topbar .app-chip-user--guest:focus-visible {
    background: var(--mili-neutral-750);
    color: var(--mili-neutral-50);
}

.mili-light .home-shell .app-topbar .app-chip-user--guest {
    background: var(--mili-neutral-100);
    color: var(--mili-neutral-900);
}

.mili-light .home-shell .app-topbar .app-chip-user--guest:hover,
.mili-light .home-shell .app-topbar .app-chip-user--guest:focus-visible {
    background: var(--mili-neutral-200);
    color: var(--mili-neutral-900);
}

.home-shell .app-topbar:has(.app-chip-user--guest) {
    gap: 16px;
}

.home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__notif {
    display: none;
}

/* 헤더 아이콘(테마·검색) — 시안: 40×40 버튼 안 18px 아이콘, 선 굵기 2(24 뷰박스 기준), 색 다크 Neutral/50 · 라이트 Neutral/900.
   종전 24px·선 1.5·회색빛(--mili-muted 계열)이라 시안보다 크고 흐렸다. 알림벨은 이 칩이 있을 때 숨겨진다(위). */
.home-shell .app-topbar:has(.app-chip-user--guest) .app-icon-btn {
    color: var(--mili-neutral-50);
    opacity: 1; /* 공용 .app-icon-btn 의 0.75 는 시안에 없다 */
}

.mili-light .home-shell .app-topbar:has(.app-chip-user--guest) .app-icon-btn {
    color: var(--mili-neutral-900);
}

.home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__theme-icon {
    width: 18px;
    height: 18px;
}

.home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__theme-icon path {
    stroke-width: 2;
}


/* 아이콘 그룹 ↔ 칩 사이 구분선 — 시안 Vector 27: 18px, 다크 #DCDCDC(Neutral/500) · 라이트 #BFC0C2(Neutral/550), 선 폭 0.8px(1px 로 렌더). */
.home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__divider {
    background: var(--mili-neutral-500);
    opacity: 0.8; /* 시안 선 폭 0.8px 의 옅음을 근사 */
}

.mili-light .home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__divider {
    background: var(--mili-neutral-550);
}

/* 시안 헤더는 높이 99 에 아이콘·칩이 y=50 에 가운데 정렬이다(우리 상단바는 72px) — 위 패딩 28px 로 같은 중심선을 만든다. */
@media (min-width: 1024px) {
    .home-shell .app-topbar:has(.app-chip-user--guest) {
        padding-top: 28px;
    }
}

/* 모바일·태블릿 헤더(시안 4038:312545/312548): 로고 · 테마 · 햄버거뿐 — 로그인 칩은 없다(히어로에 로그인 버튼이 있다). */
@media (max-width: 1023.98px) {
    .home-shell .app-topbar .app-chip-user--guest,
    .home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__divider {
        display: none;
    }
}

/* ---------- 히어로(비로그인) ---------- */
@media (min-width: 768px) {
    .home-shell--guest .home-stage__lead {
        font-weight: var(--mili-font-weight-semibold);
    }
}

@media (min-width: 1280px) {
    /* 제목 60px Bold lh 1.2, 리드 24px SemiBold lh 1.4, 제목↔리드 12px, 리드↔버튼 40px (노드 ...;275:281397/281398). */
    .home-shell--guest .home-stage__title {
        font-size: 60px;
        line-height: 1.2;
    }

    .home-shell--guest .home-stage__lead {
        margin-top: 12px;
        line-height: 1.4;
    }

    /* 리드는 두 줄 고정("…프로젝트까지," / "나에게 맞는…") — 종전 ≥1280 의 줄바꿈 숨김은 로그인 후 700px 카드용이었다. */
    .home-shell--guest .home-stage__lead-break {
        display: inline;
    }

    /* 세로 리듬: 헤더 99 + 제목 시작 y=174(시안) — 우리 상단바는 72px 라 그 차이를 stage 위 패딩에 더한다.
       버튼 ↔ 카드 100px(시안 y 481 → 581, 종전 204px). */
    .home-shell--guest .home-stage {
        padding-top: 103px;
    }

    .home-shell--guest .home-stage__intro {
        margin-bottom: 0;
    }

    .home-shell--guest .home-panels {
        margin-top: 100px;
    }

    /* 헤더 좌우 여백 120px(시안 Container px-120). 우리 상단바는 사이드바 옆 콘텐츠 영역에 있어 오른쪽만 맞춘다. */
    .home-shell .app-topbar:has(.app-chip-user--guest) {
        padding-right: 120px;
    }

    /* 로그인·회원가입: 둘 다 높이 44 · 최소 폭 98 · 16px Medium · 반경 5 · 좌우 20(+테두리 1) — Figma 픽셀 실측 x 240~337/350~447, y 438~481. */
    .home-shell--guest .home-stage__intro .home-stage__actions .home-btn {
        box-sizing: border-box;
        height: 44px;
        min-width: 98px;
        padding: 0 20px;
        font-size: 16px;
        font-weight: var(--mili-font-weight-medium);
        letter-spacing: 0;
        line-height: 1.6;
    }
}

/* 모바일 히어로(시안 4038:312545/312548): 가운데 정렬, 제목 32px Bold 자간 -0.64px(행간 1.4), 리드 16px Medium 행간 1.6
   다크 #e9e9e9(Neutral/400), 제목↔리드 8px, 리드↔버튼 24px. 버튼은 36px·14px Medium(위 기본 규칙 그대로). */
@media (max-width: 767.98px) {
    .home-shell--guest .home-stage__intro {
        text-align: center;
    }

    .home-shell--guest .home-stage__title {
        font-size: 32px;
        line-height: 1.4;
        letter-spacing: -0.64px;
    }

    .home-shell--guest .home-stage__lead {
        margin-top: 8px;
        font-weight: var(--mili-font-weight-medium);
        line-height: 1.6;
        color: var(--mili-neutral-400);
    }

    .mili-light .home-shell--guest .home-stage__lead {
        color: var(--mili-neutral-700);
    }

    .home-shell--guest .home-stage__actions {
        justify-content: center;
    }
}

/* ---------- 히어로 하단 카드 2장 (프로필·인기 학습 강좌) ----------
   Figma Glass 효과 근사: 반투명 배경 + backdrop-filter(디자이너 지시 — 16px 에서 시작, 12~20px 안에서 시안과 비교해 조정).
   배경색은 시안 실측 그대로 — 프로필 카드 #080909 50%(노드 ...;275:281405), 인기 카드 #080909 60%(TodayLearningBlock). 처음엔 사용자
   지시("전체 카드 080909 60%")대로 둘 다 60% 로 통일했으나, 2026-09-21 사용자가 "시안과 일치시켜"로 다시 지시해 프로필 카드를 50% 로 되돌렸다
   (픽셀 실측: 카드 하단 여백 시안 rgb(16.5,32.8,32.5) ↔ 60% 적용 시 rgb(12.7,26.6,26.8)). 다크 테두리는 시안 실측 rgba. */
.home-card--profile,
.home-card--recent {
    background: rgba(8, 9, 9, 0.6);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
    backdrop-filter: blur(10px) saturate(110%);
}

.home-card--profile {
    background: rgba(8, 9, 9, 0.6);
}

/* 2026-09-22 사용자 지시 — 다크 테두리는 1px solid rgba(151, 250, 196, 0.30)(hover 정리 전 프로필 카드
   값)로 두 카드 모두 통일하고, 라이트는 기존 Primary/200 을 유지한다(아래 .mili-light 블록). */
.home-card--profile,
.home-card--recent {
    border: 1px solid rgba(151, 250, 196, 0.3);
}

/* 라이트: 흰색 60%(시안 실측 rgba(255,255,255,.6)) + Primary/200 테두리. 그림자는 시안이 카드 컨테이너에 건 drop-shadow 인데
   조상(.home-panels)에 filter 를 걸면 그 조상이 backdrop root 가 되어 카드의 backdrop-filter 가 배경을 못 본다 —
   카드 자신에게 건다. */
.mili-light .home-card--profile,
.mili-light .home-card--recent {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--mili-primary-200);
    filter: drop-shadow(20px 20px 25px rgba(0, 0, 0, 0.1));
}

.mili-light .home-panels {
    filter: none;
}

/* 코너 브래킷 — 비로그인 시안은 다크·라이트 모두 Primary/500(로그인 후 시안의 Primary/800 과 다르다). 노드 ...;275:281413 등 */
.home-shell--guest .home-corner,
.mili-light .home-shell--guest .home-corner {
    border-color: var(--mili-primary-500);
}

/* 프로필 자리(게스트 카드) — 시안 802×440, 좌우 50, 링 200 ↔ 텍스트 50, 텍스트 블록 gap 16. */
@media (min-width: 1280px) {
    .home-guest {
        gap: 50px;
    }

    .home-guest__body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .home-guest__title {
        font-size: 32px;
        letter-spacing: -0.64px;
    }

    .home-guest__desc {
        margin: 0;
        font-size: 18px;
    }

    .home-guest .home-guest__cta {
        height: 44px;
        padding: 0 21px;
        font-size: 16px;
        font-weight: var(--mili-font-weight-medium);
        letter-spacing: 0;
        line-height: 1.6;
    }

    .home-shell--guest .home-card--profile {
        padding-inline: 50px;
    }
}

/* 링 아바타 — 시안: 테두리 2px(다크 #97fac4 / 라이트 rgba(14,107,85,.5)), 배경 다크 Neutral/900 · 라이트 흰색. */
.home-guest__ring {
    outline: 0;
    border: 2px solid #97fac4;
    background: var(--mili-neutral-900);
}

.mili-light .home-guest__ring {
    border-color: rgba(14, 107, 85, 0.5);
    background: var(--mili-neutral-50);
}

/* ---------- 인기 학습 강좌 ----------
   시안 구조: 항목 = [태그 … 메타] 윗줄 + [제목 … 버튼] 아랫줄, 버튼은 첫 항목뿐(home.jsp 참고).
   작은 카드: 다크 Neutral/800 · 라이트 Neutral/50(흰색), 스트로크 없음, 반경 0(사용자 지시).
   ⚠️ 라이트 스트로크: 사용자 메모("카드 배경 컬러 50 / 스트로크 컬러 300 / 모서리 둥글기 0")를 작은 카드의 라이트 값으로
   읽어 Neutral/300 1px 를 준다 — 시안 코드(PrimaryItemCard)에는 스트로크가 없어 재확인 필요. */
.home-card:has(.home-popular) .home-card__title {
    margin: 0 0 17px;
    font-size: 20px;
    font-weight: var(--mili-font-weight-bold);
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: var(--mili-neutral-50);
}

.mili-light .home-card:has(.home-popular) .home-card__title {
    color: #0b363b; /* 시안 ...;279437 — 토큰 없음 */
}

.home-popular {
    display: flex;
    flex-direction: column;
    gap: 12.945px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-popular__item {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--mili-radius-none);
    background: var(--mili-neutral-800);
}

.mili-light .home-popular__item {
    /* 스트로크는 실제 border(Neutral/300 1px, 사용자 지시 — 그림자로 구현하지 말 것). border 가 항목 높이를 2px 키우므로
       바로 아래 .home-popular__link 패딩을 1px 줄여 시안 높이(130/100)와 안쪽 여백(테두리 포함 16px)을 유지한다. */
    border: 1px solid var(--mili-neutral-300);
    background: var(--mili-neutral-50);
}

.mili-light .home-popular__link {
    padding: calc(var(--mili-space-4) - 1px);
}

.home-popular__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--mili-space-4);
    text-decoration: none;
}

.home-popular__item:first-child .home-popular__link {
    gap: 20px;
}

.home-popular__top,
.home-popular__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mili-space-3);
}

.home-popular__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
    color: #a6a6a6; /* 시안 ...;275:281435 — 토큰 없음 */
}

.mili-light .home-popular__meta {
    color: var(--mili-neutral-700);
}

.home-popular__meta-icon {
    flex: 0 0 auto;
    width: 14.415px;
    height: 14.415px;
}

.home-popular__title {
    margin: 0;
    min-width: 0;
    font-size: 20px;
    font-weight: var(--mili-font-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--mili-neutral-50);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.mili-light .home-popular__title {
    color: var(--mili-neutral-900);
}

.home-popular__cta {
    flex: 0 0 auto;
}

/* "프로젝트 시작하기" — 다크: Neutral/750 채움 · Neutral/700 테두리 · Neutral/550 글자, 라이트: Neutral/200 · Neutral/400 · Neutral/800.
   높이 34 · 좌우 12 · 14px Medium · 자간 -0.28px · 반경 5(시안 border 0.911px 는 1px 로 렌더된다). */
.home-popular__cta .home-btn--accent,
.home-popular__cta .home-btn--accent:hover,
.home-popular__cta .home-btn--accent:focus {
    background: var(--mili-neutral-750);
    border-color: var(--mili-neutral-700);
    color: var(--mili-neutral-550);
}

.mili-light .home-popular__cta .home-btn--accent,
.mili-light .home-popular__cta .home-btn--accent:hover,
.mili-light .home-popular__cta .home-btn--accent:focus {
    background: var(--mili-neutral-200);
    border-color: var(--mili-neutral-400);
    color: var(--mili-neutral-800);
}

/* 모바일(시안 2806:32902 계열): 첫 항목만 [태그·메타] → 제목 → 전체 폭 버튼 세로 구조. */
@media (max-width: 767.98px) {
    .home-popular__title {
        font-size: 16px;
        line-height: 1.6;
    }

    .home-popular__item:first-child .home-popular__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mili-space-4);
    }

    .home-popular__item:first-child .home-popular__cta .home-btn {
        width: 100%;
        height: 36px;
    }
}

/* ---------- 설명 섹션 밴드 ----------
   라이트에서 이 영역 배경은 흰색(사용자 지시·시안 4038:312547 y=1155~3395), 다크는 Neutral/900. 사이드바 뺀 전체 폭 밴드. */
.home-explain {
    box-sizing: border-box;
    width: var(--home-frame-w);
    margin-left: calc(-1 * var(--home-inset));
    padding-inline: var(--home-inset);
    background: var(--mili-neutral-900);
}

.mili-light .home-explain {
    background: var(--mili-neutral-50);
}

/* 히어로 ↔ 설명 밴드는 틈 없이 붙는다(시안: 히어로 배경 끝 = 설명 섹션 시작). */
.home-shell--guest .home-panels {
    margin-bottom: 0;
}

.home-shell--guest .home-journey {
    padding-bottom: 80px;
}

@media (min-width: 1280px) {
    .home-shell--guest .home-journey {
        padding-bottom: 133px;
    }
}

/* 라이트: 하단 페이스 아웃은 다음이 페이지 연두 배경일 때만 필요했다 — 다음이 흰색 밴드라 걷어낸다. */
.mili-light .home-shell--guest .home-journey {
    background-image: url("../images/home/hero-bg-light-5-mobile.png");
    background-size: cover;
    background-position: top right;
}

/* ⚠️ 2026-09-21 라이트 히어로 배경을 시안 레이어 그대로 재구성(사용자 지적 — "배경이미지가 시안과 좀 다르게 보임").
   Light/홈/로그인전 4038:312547 의 배경 프레임(A_로그인 전_라이트_PC)은 평면 이미지가 아니라
     바탕 #d3f3c4 + 블러 타원 2장(Ellipse 1271 #F8FFEE·1270 #BCEAA2, 각 opacity .7) + 십자 조형물(Generated Image,
     회전 -15.34° · opacity 60% · **mix-blend-mode: color-burn**)
   의 합성이다. 종전 hero-bg-light-5.png 는 「로그인 후」 프레임 배경을 평면으로 저장한 것이라 color-burn 이 빠져
   조형물이 옅게 씻겨 보이고 크기·위치도 달랐다. 에셋은 시안 그대로다(타원 SVG 2장 = Figma 내려받기, 십자 = 기존
   hero-generated-light.png 를 회전·투명도 60% 로 구운 hero-light-cross-rotated.png 2266×1684).
   좌표는 1920 프레임 기준 시안값을 그대로 옮겼다 — 타원은 왼쪽 기준, 십자는 오른쪽 기준(중심 x=1508.6 ⇒ 오른쪽에서 411px,
   상단 -435px). 모바일(≤767)은 별도 시안(4038:312548)이라 위 평면 이미지를 유지한다. */
@media (min-width: 768px) {
    .mili-light .home-shell--guest .home-journey {
        /* ⚠️ 2026-09-22 사용자 지적 — "카드랑 살짝 겹치게, 두 번째 항목 언저리에서 끝나야 한다":
           시안 실측값을 그대로 쓰면 십자 조형물이 카드 3번째 항목까지 내려온다. --home-obj-u 로
           크기·각 앵커 모서리(left/right/top)로부터의 오프셋을 0.85배 해서 우상단 모서리 쪽으로
           살짝만 줄인다(지난번 0.6배는 카드와 아예 안 겹칠 만큼 과했다). */
        --home-obj-u: calc(var(--home-u) * 0.6);
        background-color: #d3f3c4;
        background-image:
            url("../images/home/hero-light-ellipse-b.svg"),
            url("../images/home/hero-light-ellipse-a.svg"),
            url("../images/home/hero-light-cross-rotated.png");
        background-repeat: no-repeat;
        /* 1 시안 px = --home-obj-u. 시안 프레임(1920)과 같은 뷰포트에서 0.85:1 이고, 좁아지면 구성
           전체가 비례해 줄어든다(px 고정이면 십자가 오른쪽으로 잘려 나간다 — 1200px 실측).
           ⚠️ 2026-09-22 사용자 지적 — "다크랑 라이트랑 위치가 달라, 사이즈도 똑같이 맞춰": 십자 레이어(3번째)는
           다크 십자 원본(2486×1847)과 라이트 원본(2266×1684)의 크기가 서로 달라 같은 배율을 곱해도
           화면에서 다른 크기·위치로 보였다. 다크 쪽 십자 레이어와 완전히 같은 크기·오프셋을 그대로 써서
           두 테마가 동일하게 보이게 맞춘다(두 PNG 는 종횡비가 거의 같아 수치를 공유해도 형태가
           찌그러지지 않는다). top 값은 이후 사용자 지시로 두 블록 모두 같이 조정된다(아래 다크 블록 주석 참고). */
        /* ⚠️ 2026-09-22 사용자 조정 이력(십자 레이어만, 다른 3장은 배경 글로우라 그대로):
           0.6배 축소 → 카드와 살짝 겹치게 하단으로 → 600px 내림 → 다시 300 올림 → 25%/20% 확대 시도
           → "지금은 너무 커, 더 오른쪽으로" → "인기 학습 강좌 오른쪽으로 이미지가 살짝 보일 정도로":
           십자 PNG 안의 실제 형체는 이미지 전체가 아니라 가운데 부분(가로 21~86%, 세로 20~81%)에만
           있고 나머지는 투명 여백이다 — 이 형체 범위가 뷰포트 밖으로 나가지 않고 카드 오른쪽 가장자리
           선상에서 살짝만 보이도록 크기·위치를 다시 잡았다(형체 시작 지점 기준 계산, 이전 시도들은
           이미지 여백까지 포함해 계산해서 형체 자체가 화면 밖으로 완전히 사라졌었다).
           ⚠️ 2026-09-22 사용자 재지적 — "이게 약간이야?" → 500×372 로 더 축소 → "작아졌다고 하니까
           더 줄이네? 2 전으로 돌려": "살짝 보이게" 축소 시도들을 걷어내고, 그 이전 단계인 3108×2309
           (right -600, top -442 — 하단 끝 고정한 채 25% 확대했던 상태)로 되돌렸다. */
        background-size:
            calc(2149 * var(--home-obj-u)) calc(1725 * var(--home-obj-u)),
            calc(2271 * var(--home-obj-u)) calc(1628 * var(--home-obj-u)),
            calc(3544 * var(--home-obj-u)) calc(2632 * var(--home-obj-u));
        background-position:
            left calc(-549 * var(--home-obj-u)) top calc(-824 * var(--home-obj-u)),
            left calc(-923 * var(--home-obj-u)) top calc(390 * var(--home-obj-u)),
            right calc(-1083 * var(--home-obj-u)) top calc(-682 * var(--home-obj-u));
        background-blend-mode: normal, normal, color-burn;
    }
}

/* ⚠️ 2026-09-21 다크 히어로 배경도 시안 레이어 그대로 재구성한다(라이트와 같은 이유) — Dark/홈/로그인전 4038:312544 의
   A_로그인 전_다크_PC 는 바탕 #051716 + 블러 타원 3장(Ellipse 1292 #002114·1293 #51766F 회전 -23.97°·1294 #336063) +
   십자 조형물(Generated Image 회전 -15.34° · opacity 20% · mix-blend-mode: luminosity)의 합성이다.
   회전이 필요한 두 레이어(타원 1293·십자)는 회전 결과를 PNG 로 구워 두었다(hero-dark-e1293-rotated.png 2224×1958,
   hero-dark-cross-rotated.png 2486×1847 — 알파 20% 포함). 좌표는 시안(1920) 중심 좌표에서 계산한 값이고
   --home-u 로 뷰포트에 비례한다. 모바일(≤767)은 별도 시안이라 기존 평면 이미지를 유지한다. */
@media (min-width: 768px) {
    .home-shell--guest .home-journey {
        /* ⚠️ 2026-09-22 사용자 지적 — 라이트와 같은 이유(위 .mili-light 블록 주석 참고)로 0.85배 축소. */
        --home-obj-u: calc(var(--home-u) * 0.6);
        background-color: #051716;
        background-image:
            url("../images/home/hero-dark-e1294.svg"),
            url("../images/home/hero-dark-cross-rotated.png"),
            url("../images/home/hero-dark-e1293-rotated.png"),
            url("../images/home/hero-dark-e1292.svg");
        background-repeat: no-repeat;
        background-size:
            calc(2089 * var(--home-obj-u)) calc(1566 * var(--home-obj-u)),
            calc(3544 * var(--home-obj-u)) calc(2632 * var(--home-obj-u)),
            calc(2224 * var(--home-obj-u)) calc(1958 * var(--home-obj-u)),
            calc(2075 * var(--home-obj-u)) calc(1767 * var(--home-obj-u));
        /* ⚠️ 2026-09-22 십자 레이어(2번째)만 반복 조정했다(다른 3장은 배경 글로우라 원래 오프셋 유지,
           라이트 블록과 완전히 같은 값). 이력은 위 .mili-light 블록 주석 참고. */
        background-position:
            left calc(-533 * var(--home-obj-u)) top calc(268 * var(--home-obj-u)),
            right calc(-1083 * var(--home-obj-u)) top calc(-682 * var(--home-obj-u)),
            right calc(-1223 * var(--home-obj-u)) top calc(-1095 * var(--home-obj-u)),
            left calc(-590 * var(--home-obj-u)) top calc(-943 * var(--home-obj-u));
        background-blend-mode: normal, luminosity, normal, normal;
    }
}

/* ---------- 강의/프로젝트 그리드 밴드 ----------
   시안: 전체 폭 색 밴드 — 다크 #25413b + 블러 타원 4장(Figma 에셋 그대로 images/home/grid-band-ellipse-*.svg), 라이트 #e0f1d9.
   위아래 160 · 좌우 = 콘텐츠 컬럼보다 40 바깥(시안 x=200 ↔ 히어로 x=240), 두 섹션 사이 200.
   두 색은 토큰이 없어 리터럴이다(새 토큰 여부는 사용자 확인 대기). */
.home-grid-band {
    --home-band-pad: max(var(--mili-page-padding, 16px), calc(var(--home-inset) - 40px));
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: var(--home-frame-w);
    margin-left: calc(-1 * var(--home-inset));
    padding: 60px var(--home-band-pad);
    background-color: #25413b;
    background-image:
        url("../images/home/grid-band-ellipse-c.svg"),
        url("../images/home/grid-band-ellipse-b.svg"),
        url("../images/home/grid-band-ellipse-a.svg"),
        url("../images/home/grid-band-ellipse-a.svg");
    background-repeat: no-repeat;
    background-position: right -893px top -542px, left -630px top 506px, right -1145px top 414px, left -623px top -716px;
}

.mili-light .home-grid-band {
    background-color: #e0f1d9;
    background-image: none;
}

@media (min-width: 768px) {
    .home-grid-band {
        gap: 200px;
        padding-block: 160px;
    }
}

.home-grid-band .home-grid-section {
    padding: 0;
}

/* 제목: 이모지 40 + 텍스트 36px SemiBold(자간 -0.72px), 간격 16, 제목↔카드 20 (모바일은 24px). */
.home-grid-band .home-grid-section__title {
    gap: var(--mili-space-4);
    margin: 0 0 var(--mili-space-5);
    font-size: 24px;
    font-weight: var(--mili-font-weight-semibold);
    line-height: 1.4;
    letter-spacing: -0.48px;
}

.home-grid-band .home-grid-section__title > span {
    font-size: 30px;
}

@media (min-width: 768px) {
    .home-grid-band .home-grid-section__title {
        font-size: 36px;
        letter-spacing: -0.72px;
    }

    .home-grid-band .home-grid-section__title > span {
        font-size: 40px;
    }
}

/* 가로 스크롤은 콘텐츠 컬럼이 아니라 화면 끝까지 꽉 채운다(사용자 지시 "완전 fill") — 좌우 밴드 패딩만큼 음수 마진으로
   끝까지 늘리고, 같은 양의 패딩·scroll-padding 으로 시작·끝 카드가 제자리에 오게 한다. */
.home-grid-band .home-grid-scroll {
    margin-inline: calc(-1 * var(--home-band-pad));
    padding-inline: var(--home-band-pad);
    scroll-padding-inline: var(--home-band-pad);
    padding-bottom: 0;
}

@media (max-width: 767.98px) {
    .home-grid-band .home-grid-scroll {
        --home-card-w: calc((var(--home-frame-w) - var(--home-band-pad) * 2 - var(--home-card-gap)) / 2);
    }
}

/* 카드 hover 효과 없음(사용자 지시 — 그림자가 스크롤 컨테이너에 잘려 보인다). 공용 카드 컴포넌트의 hover 만 이 영역에서 끈다. */
.home-grid-scroll .catalog-card,
.home-grid-scroll .pbl-card {
    transition: none;
}

/* 다크 카드 테두리는 채움과 같은 Neutral/870(시안 border-[neutral/870]) — 공용 --mili-line(#2b3036)이 아니다. */
.home-grid-scroll .catalog-card,
.home-grid-scroll .pbl-card,
.home-grid-scroll .catalog-card:hover,
.home-grid-scroll .catalog-card:focus-within,
.home-grid-scroll .pbl-card:hover,
.home-grid-scroll .pbl-card:focus-within {
    border-color: var(--mili-neutral-870);
    box-shadow: none;
}

.mili-light .home-grid-scroll .catalog-card,
.mili-light .home-grid-scroll .pbl-card,
.mili-light .home-grid-scroll .catalog-card:hover,
.mili-light .home-grid-scroll .catalog-card:focus-within,
.mili-light .home-grid-scroll .pbl-card:hover,
.mili-light .home-grid-scroll .pbl-card:focus-within {
    border-color: var(--mili-neutral-300);
}

/* ---------- 하단 CTA 배너 ----------
   배경은 사용자 제공 이미지(images/home/cta-bg-footer-top.png, "푸터 위에 진한 배경.png")로 교체. 푸터와 틈 없이 붙는다.
   시작 버튼은 #c5fec4 → #b2fff7 가로 그라데이션 · 좌우 20 · 상하 8 · 16px SemiBold · 반경 5(노드 ...;275:279867). */
.home-cta {
    margin-block: 0;
    padding-block: 80px;
    background-image: url("../images/home/cta-bg-footer-top.png");
    background-size: cover;
    background-position: center;
}

.home-cta .home-cta__btn,
.mili-light .home-cta .home-cta__btn,
.home-cta .home-cta__btn:hover,
.home-cta .home-cta__btn:focus,
.mili-light .home-cta .home-cta__btn:hover,
.mili-light .home-cta .home-cta__btn:focus {
    height: auto;
    padding: 8px 20px;
    border: 0;
    background: linear-gradient(to right, #c5fec4, #b2fff7);
    color: var(--mili-neutral-950);
    font-size: 16px;
    font-weight: var(--mili-font-weight-semibold);
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .home-cta {
        padding-block: 120px;
        gap: 10px;
    }

    .home-cta__logo {
        width: 219px;
        height: 79px;
        margin-bottom: 0;
    }

    .home-cta .home-cta__title {
        font-size: 60px;
        line-height: 1.4;
    }

    .home-cta .home-cta__desc {
        font-size: 24px;
        font-weight: var(--mili-font-weight-semibold);
        line-height: 1.4;
    }

    .home-cta .home-cta__btn {
        margin-top: 39px;
    }
}

/* ---------- 푸터 — 비로그인 홈은 라이트·다크 모두 다크 버전(사용자 지시) ----------
   푸터가 쓰는 색 토큰을 다크 값으로 다시 선언한다(theme/tokens.css :root 의 다크 값과 같다). 배경은 시안 실측 — 데스크톱 검정,
   모바일 Neutral/900(#0e1013). 위 여백(--mili-footer-gap 200px)은 없다: CTA 배너와 붙는다. */
.home-shell--guest main.app-page {
    padding-bottom: 0;
}

.home-shell--guest .site-footer {
    --mili-footer-text: var(--mili-neutral-400);
    --mili-muted: #868e96;
    --mili-ink: var(--mili-neutral-100);
    --mili-body: #adb5bd;
    --mili-border: #2b3036;
    margin-top: 0;
    background: var(--mili-neutral-950);
}

@media (max-width: 767.98px) {
    .home-shell--guest .site-footer {
        background: var(--mili-neutral-900);
    }
}

.mili-light .home-shell--guest .site-footer__brand img {
    filter: none;
}

/* ---------- 모바일(≤767px) 보정 — 시안 다크 4038:312545 / 라이트 4038:312548 실측 ----------
   데스크톱과 값이 다른 곳만: 인기 카드 패딩 16·제목 18px SemiBold·항목 간격 8, 그리드 밴드 색(다크 #17342c, 타원 없음)·
   제목 20px(이모지 26px, gap 8)·제목↔카드 16, CTA 높이 605 · 제목 32px · 리드 16px · 로고 148×54. */
@media (max-width: 767.98px) {
    /* ≤767px 에서 공용 .app-page 가 위 패딩 8px 를 주므로 히어로를 그만큼 더 끌어올려야 화면 맨 위(y=0)에서 시작한다
       (실측 390px: journey top 8 → 0). 안쪽 문구 위치(stage top 64)는 그대로. */
    .home-journey,
    .mili-light .home-journey {
        margin-top: calc(-1 * (var(--mili-topbar-height) + 8px));
        padding-top: calc(var(--mili-topbar-height) + 8px);
    }

    .home-shell--guest .home-card--recent {
        padding: var(--mili-space-4);
    }

    /* 모바일 시안(다크 4038:312545)의 카드 색은 데스크톱과 다르다 — 프로필 #15181c 80%, 인기 학습 강좌 #15181c(Neutral/870) 단색. */
    .home-card--profile {
        background: rgba(21, 24, 28, 0.8);
    }

    .home-card--recent {
        background: var(--mili-neutral-870);
    }

    .mili-light .home-card--profile,
    .mili-light .home-card--recent {
        background: rgba(255, 255, 255, 0.6);
    }

    /* 게스트 카드: 시안은 링↔텍스트 12px 이고 제목이 한 줄에 들어간다("…되셨나요?") — 종전 16px + 링 왼쪽 5px 여백이
       텍스트 폭을 9px 깎아 "되셨나/요?" 로 꺾였다. */
    .home-guest {
        gap: var(--mili-space-3);
    }

    .home-guest__ring {
        margin-left: 0;
    }

    .home-card:has(.home-popular) .home-card__title,
    .mili-light .home-card:has(.home-popular) .home-card__title {
        margin-bottom: var(--mili-space-4);
        font-size: 18px;
        font-weight: var(--mili-font-weight-semibold);
        letter-spacing: 0;
    }

    .home-popular,
    .mili-light .home-popular {
        gap: var(--mili-space-2);
    }

    .home-grid-band {
        background-color: #17342c; /* 모바일 시안 다크 밴드 색 — 데스크톱 #25413b 와 다르다 */
        background-image: none;
    }

    .mili-light .home-grid-band {
        background-color: #e0f1d9;
    }

    .home-grid-band .home-grid-section__title {
        gap: var(--mili-space-2);
        margin-bottom: var(--mili-space-4);
        font-size: 20px;
        letter-spacing: -0.4px;
    }

    .home-grid-band .home-grid-section__title > span {
        font-size: 26px;
    }

    .home-cta {
        justify-content: center;
        min-height: 605px;
        padding: var(--mili-space-5);
    }

    .home-cta__logo {
        width: 148px;
        height: 54px;
    }

    /* 시안: 32px 제목이 350px 안에 두 줄로 그대로 들어간다(337px 실측) — 종전 「강제 줄바꿈 숨김」은 24px 로 낮추던 시절 값이다. */
    .home-cta .home-cta__title-break {
        display: inline;
    }

    .home-cta .home-cta__title {
        font-size: 32px;
        line-height: 1.4;
        word-break: keep-all;
    }

    .home-cta .home-cta__desc {
        font-size: 16px;
        font-weight: var(--mili-font-weight-semibold);
        line-height: 1.4;
    }

    .home-cta .home-cta__btn {
        margin-top: 39px;
    }
}

/* ===================================================================
   ⚠️ 2026-09-21 배경 좌우 끝까지(사용자 지시 — "배경 전부 좌우 끝까지 fill, GNB 뒤쪽도 채우도록")
   히어로(.home-journey)와 사이드바 투명화(.app-frame/.app-sidebar)는 위 「셸」·「.home-journey」 블록이 이미 맡는다. 여기서는 같은
   방식으로 나머지 배경 밴드(설명·그리드·CTA·푸터)를 뷰포트 전체 폭(100vw)으로 늘려 사이드바 뒤(x=0)까지 채운다.
   안쪽 콘텐츠(문구·카드·그리드 시작점)는 padding 을 사이드바 폭만큼 더 줘서 자리를 그대로 둔다.
   사이드바가 상시 노출되는 ≥1024px 에서만 필요하다(그 미만은 드로어라 프레임 = 뷰포트 전체).
   =================================================================== */
@media (min-width: 1024px) {
    .home-shell {
        --home-bleed: calc(var(--home-inset) + var(--home-sidebar-w));
    }

    /* 설명 섹션 밴드 */
    .home-explain {
        width: 100vw;
        margin-left: calc(-1 * var(--home-bleed));
        padding-left: var(--home-bleed);
    }

    /* 그리드 밴드 — 왼쪽 패딩에 사이드바 폭을 더하고, 스크롤 영역은 x=0 부터 시작한다. */
    .home-grid-band {
        width: 100vw;
        margin-left: calc(-1 * var(--home-bleed));
        padding-left: calc(var(--home-sidebar-w) + var(--home-band-pad));
    }

    .home-grid-band .home-grid-scroll {
        margin-left: calc(-1 * (var(--home-sidebar-w) + var(--home-band-pad)));
        padding-left: calc(var(--home-sidebar-w) + var(--home-band-pad));
        scroll-padding-left: calc(var(--home-sidebar-w) + var(--home-band-pad));
    }

    /* CTA 배너 — 안쪽 문구는 프레임 가운데에 그대로 둔다(왼쪽 패딩에 사이드바 폭을 더한다). */
    .home-cta {
        width: 100vw;
        margin-left: calc(-1 * (var(--cta-inset) + var(--home-sidebar-w)));
        padding-left: calc(var(--cta-inset) + var(--home-sidebar-w) + var(--mili-space-5));
    }

    /* 푸터 배경(비로그인은 검정) — 사이드바 뒤까지. 안쪽 콘텐츠는 프레임 기준 가운데를 유지. */
    .home-shell .site-footer {
        width: 100vw;
        margin-left: calc(-1 * var(--home-sidebar-w));
        padding-left: var(--home-sidebar-w);
    }
}

/* ===================================================================
   ⚠️ 2026-09-21 글래스 카드 다듬기(사용자 지시 — "글래스모피즘 카드 좀만 더 시안처럼")
   Figma Glass 스펙: Light -45° / 80%, Refraction 79, Depth 37, Dispersion 35, Frost 27, Splay 0.
   시안 내보내기(API 렌더)는 이 효과를 그리지 않아(평평한 반투명 채움 + 1px 테두리) 픽셀 대조는 배경색·테두리까지만 가능하다.
   CSS 로는 굴절(Refraction)을 재현할 수 없어 나머지를 근사한다(배경색 값 rgba 50%/60% 는 위 블록 그대로 — computed 값 불변):
     · Frost 27  → 배경 블러(위 backdrop-filter blur 16px + saturate 120%, 디자이너 지시 12~20px 범위).
     · Light -45° → 좌상단에서 오는 빛: 좌상단 안쪽 림 하이라이트(1px) + 우하단은 약하게, 대각선 광택(135deg) 그라디언트.
     · Depth 37   → 가장자리 안쪽으로 번지는 밝은/어두운 안쪽 그림자(좌상단 밝음·우하단 어두움).
     · Dispersion 35 → 림 안쪽 2px 에 시안(하늘색)·마젠타 계열 아주 옅은 색 번짐.
   background-image 는 background-color 와 별개 속성이라 위 색 값(#080909 50/60%, 라이트 흰색 60%)에 영향이 없다. */
.home-card--profile,
.home-card--recent {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0) 62%);
    box-shadow:
        inset 1px 1px 0 0 rgba(255, 255, 255, 0.30),
        inset -1px -1px 0 0 rgba(255, 255, 255, 0.08),
        inset 2px 2px 0 -1px rgba(120, 220, 255, 0.14),
        inset -2px -2px 0 -1px rgba(255, 130, 200, 0.10),
        inset 12px 12px 28px -16px rgba(255, 255, 255, 0.20),
        inset -12px -12px 28px -16px rgba(0, 0, 0, 0.38);
}

.mili-light .home-card--profile,
.mili-light .home-card--recent {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0) 65%);
    box-shadow:
        inset 1px 1px 0 0 rgba(255, 255, 255, 0.95),
        inset -1px -1px 0 0 rgba(255, 255, 255, 0.55),
        inset 2px 2px 0 -1px rgba(120, 200, 255, 0.16),
        inset -2px -2px 0 -1px rgba(255, 150, 200, 0.12),
        inset 14px 14px 30px -18px rgba(255, 255, 255, 0.85),
        inset -14px -14px 30px -18px rgba(14, 107, 85, 0.12);
}

/* ===================================================================
   ⚠️ 2026-09-22 로그인 전 좌측 GNB 숨김 + 헤더가 그 자리를 대신함
   (사용자 지시 — "로그인 전에는 GNB 좌측 안 보이게. 대신 헤더가 들어가야 함", node 4038:312547 참고)
   시안 로그인 전 헤더(px-120, h-99)에는 메뉴 항목이 없다 — 로고 + 테마/검색 아이콘 + "로그인 ⌄" 칩뿐이고
   좌측 사이드바 자체가 없다. 사이드바가 상시 노출되는 ≥1024px 에서만 숨긴다 — <1024px 는 원래도 드로어(햄버거로
   여닫는 슬라이드 패널)라 이번 변경 대상이 아니다(모바일 시안에도 "menu" 아이콘이 그대로 있다, 드로어 기능 유지).
   JSP 는 그대로 두고(드로어 aria-controls="appSidebar" 연결이 깨지지 않게) CSS 로만 시각적으로 뺀다. */
@media (min-width: 1024px) {
    .app-frame:has(> .home-shell--guest) > .app-sidebar {
        display: none;
    }

    /* 사이드바가 차지하던 240px 을 0 으로 — 배경 풀블리드·콘텐츠 인셋 계산(--home-frame-w 등)이 전부 이 값을 쓴다. */
    .home-shell--guest {
        --home-sidebar-w: 0px;
    }

    /* 시안 헤더 로고 — 사이드바가 없으니 상단바가 로고를 대신 그린다(공용 규칙은 ≥1024px 에서 로고를 숨긴다 —
       사이드바가 로고를 갖고 있다는 전제라 게스트 홈만 되돌린다). 크기는 시안 실측 100×36.19. */
    .home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__brand {
        display: inline-flex;
        margin-left: 0;
    }

    .home-shell .app-topbar:has(.app-chip-user--guest) .app-topbar__brand img {
        width: 100px;
        height: 36px;
    }

    /* 좌우 여백 120px(시안 Container px-120, 1920 프레임 실측) — 사이드바가 있던 화면(inset 계산값)과 달리
       헤더 자체가 고정 거터를 쓴다. 1024~1920 사이는 시안에 없는 폭이라 6.25vw(=1920 기준 120px)로 비례
       축소한다(AI 판단 — 사용자 확인 대기, 하한 32px). */
    .home-shell .app-topbar:has(.app-chip-user--guest) {
        padding-inline: clamp(32px, 6.25vw, 120px);
    }
}

/* ---------- 스크롤 중에만 뜨는 헤더 그라디언트 ----------
   사용자 지시 — "헤더 흰색 그라디언트, 스크롤 발생시에만 뜨게". GNB 가 없어졌으니 헤더가 유일한 상시 내비게이션이라
   sticky 로 고정한다(로그인 후 홈은 GNB 가 있어 이 대상이 아니다 — 위 공용 .home-shell .app-topbar 의
   position:relative 를 그대로 쓴다). sticky + 투명 조합은 스크롤 중 본문이 아이콘 뒤를 그대로 지나가 읽기
   어려워지므로, 맨 위(scrollY 0)에서는 투명을 유지하고 스크롤이 시작되면(js/home.js, .app-topbar--scrolled)
   그라디언트를 켠다. 값은 이 화면이 이전에 상시로 쓰던 그라디언트(다크 86%→0, 라이트 흰 안개 50%→0)를 그대로
   재사용한다 — 시안엔 스크롤 상태가 없어 근거는 "이전 상시 적용값"이다(AI 판단). */
/* 특정도: 위 ".mili-light .home-shell .app-topbar"(클래스 3개)를 이겨야 한다 — ".home-shell--guest .app-topbar"
   (2개)로는 라이트에서 지고 sticky 가 relative 로 되돌아간다. 같은 요소에 두 클래스를 함께 걸어 특정도를 맞춘다. */
.home-shell.home-shell--guest .app-topbar {
    position: sticky;
    top: 0;
    transition: background 160ms ease;
}

.home-shell--guest .app-topbar.app-topbar--scrolled {
    background: linear-gradient(to bottom, rgba(var(--mili-canvas-rgb), 0.86) 0%, rgba(var(--mili-canvas-rgb), 0.56) 55%, transparent 100%);
}

.mili-light .home-shell--guest .app-topbar.app-topbar--scrolled {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 55%, transparent 100%);
}

/* ===================================================================
   ⚠️ 2026-09-22 사용자 지적 — "상단 녹색 히어로가 1080 정도로 잡혀 있는데 개발 환경에서는
   세로 폭이 좁게 보여서 밑의 콘텐츠가 애매하게 보인다. 애매하게 보이는 것보다는 안 보이는 걸
   의도했다": 히어로(.home-journey)는 1920×1080 시안 캔버스 기준으로 여백을 잡아 로그인 후
   기준 실측 높이가 ~1089px(시안과 거의 일치)다. 노트북 등 실제 뷰포트 높이가 이보다 낮으면
   (Playwright 실측 1536×864 기준) 카드 둘째 줄이 뷰포트 경계에서 반토막으로 잘리고, 그 바로
   아래 이어지는 밴드(로그인 후 .home-grid-band #25413b / 로그인 전 .home-explain)가 히어로와
   비슷한 톤의 어두운 배경이라 경계가 흐릿하게 겹쳐 "잘린 건지 다음 섹션인지 애매하게" 보인다.
   해결: 뷰포트 높이가 낮을 때만 시안 여백(헤더~타이틀 72px·버튼~카드 164/100px·카드 안쪽 패딩
   등)을 압축해 히어로+카드 전체가 스크롤 없이 한 화면에 들어오게 한다 — 그래야 다음 섹션은
   "스크롤해야만 보이는" 상태가 되어 애매한 반토막 노출이 없어진다. 글자 크기는 시안 그대로 두고
   간격만 줄인다(가독성 손상 없음). 임계값 899.98px 는 대표적인 노트북 실사용 뷰포트(예:
   1536×864, 브라우저 크롬 제외 1440×~810~900)를 덮도록 잡았다 — 데스크톱 모니터(사용 가능
   높이 대부분 ≥1000px)는 이 블록의 영향을 받지 않는다. */
@media (min-width: 1280px) and (max-height: 899.98px) {
    .home-stage,
    .home-shell--guest .home-stage {
        padding-top: 40px;
    }

    .home-stage__intro {
        margin-bottom: 24px;
    }

    .home-panels,
    .home-shell--guest .home-panels {
        margin-top: 40px;
    }

    .home-panels {
        margin-bottom: 40px;
    }

    .home-shell--guest .home-journey {
        padding-bottom: 40px;
    }

    .home-card--profile,
    .home-card--recent {
        padding: var(--mili-space-5);
    }
}