/*
 * 홈(/) 전용 스타일. 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 토큰으로 참조한다.
 *     흰색 알파(rgba(255,255,255,.04) 등)는 브랜드 색이 아니라 원본이 지정한 표면 값이라 그대로 둔다.
 */

/* ---------- 셸 ----------
   얼개(.app-frame / .app-frame__body)는 theme/components.css §8 공용이다.
   여기에는 홈에만 필요한 속성만 남긴다 — 고정 캔버스를 얹으려면 세로 흐름이어야 하고,
   1280px 이상에서 캔버스가 뷰포트보다 커질 때 넘치는 부분을 잘라야 한다.

   ⚠️ 홈은 아직 이전 세대(mili-home-v3) 고정 캔버스 방식이다. 1920 = 271 + 1649 산술로
   좌표가 박혀 있어서, 전역 사이드바가 208px 로 좁아져도 캔버스 폭(1649)은 그대로 둔다 —
   js/home.js 가 남는 공간에 맞춰 배율만 다시 계산하므로 깨지지는 않고 여백만 늘어난다.
   참고 시안의 홈은 고정 캔버스가 아니라 일반 흐름 + 학습 여정 성좌라, 이 화면은
   별도 작업으로 다시 짜야 한다(그때 이 블록과 아래 데스크톱 미디어쿼리가 통째로 없어진다). */
.home-shell {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 실측(참고 앱 .mili-dark .mili-home-header): 홈의 상단바는 불투명이 아니라 위→아래로
   옅어지는 그라디언트다(86% → 56% → 투명), 테두리도 없다. 폭과 무관하게 항상 이 모습이라
   components.css §8 의 기본(불투명 --mili-canvas) 을 여기서 덮어쓴다. */
.home-shell .app-topbar {
    background: linear-gradient(to bottom, rgba(9, 10, 12, 0.86) 0%, rgba(9, 10, 12, 0.56) 55%, transparent 100%);
    border-bottom: 0;
}

/*
 * ===== 도트 필드 =====
 * 원본 PixelBlast(three.js 셰이더)를 canvas 2D 로 이식했다 — js/home-pixel-field.js.
 * 포인터를 따라 아주 조금 밀리는 패럴랙스는 --field-shift-* 로 들어온다
 * (원본도 배경 레이어에 translate3d + scale(1.04) 를 건다).
 */
.home-field {
    position: absolute;
    /* 원본 배경 레이어는 -inset-[3%] 다 — 패럴랙스로 밀렸을 때 가장자리가 비지 않도록
       화면보다 사방 3% 크게 깐다. 캔버스 해상도도 이 크기 기준으로 잡힌다
       (js/home-pixel-field.js 의 hostSize). */
    top: -3%;
    left: -3%;
    z-index: 0;
    width: 106%;
    height: 106%;
    pointer-events: none;
    transform: translate3d(var(--field-shift-x, 0px), var(--field-shift-y, 0px), 0) scale(1.04);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* WebGL2 경로는 devicePixelRatio 를 반영해 그리므로 브라우저가 손댈 것이 없다.
   2D 폴백만 CSS 픽셀 격자에 그리기 때문에, 확대 보간이 끼면 4px 블록이 뭉개진다. */
.home-field[data-renderer="2d"] {
    image-rendering: pixelated;
}

@media (prefers-reduced-motion: reduce) {
    .home-field {
        transform: none;
        transition: none;
    }
}

/*
 * 도트 필드 위에 얹는 반투명 스크림(원본 PersonalHome.tsx 328·382 행 mili-home-interaction-overlay).
 * .home-field 와 달리 -3% 확장·패럴랙스 transform 을 받지 않는다 — 원본도 스크림은
 * backgroundRef(패럴랙스 대상)의 형제이지 자식이 아니다. 항상 뷰포트를 정확히 덮는다.
 */
.home-field-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* 다크 셸(홈 기본값)은 25% 검정. variables.css 의 :root 는 라이트가 기본이라
       .mili-theme-dark 가 없을 때는 원본 라이트 스크림(rgb(241 243 245 / 42%))을 쓴다. */
    background: rgba(0, 0, 0, 0.25);
}

body:not(.mili-theme-dark) .home-field-scrim {
    background: rgba(241, 243, 245, 0.42);
}

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

/*
 * 1280px 미만: 이 wrapper 자체를 지운 것처럼 만들어(display:contents) 자식이
 * .home-shell 의 흐름에 그대로 참여하게 한다(기존 모바일 레이아웃 그대로).
 * 1280px 이상: 1649x1080 고정 캔버스가 되어 js/home.js(initCanvasFit)가
 * 뷰포트에 맞춰 transform:scale + 중앙 정렬한다 — 아래 데스크톱 미디어쿼리 참고.
 */
.home-canvas {
    display: contents;
}

/* ---------- 버튼 ---------- */
.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: 0;
    font-size: 14px;
    font-weight: 700;
    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 */
.home-btn--accent {
    background: var(--mili-brand);
    color: var(--mili-brand-on);
}

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

.home-btn--outline {
    border-color: rgba(255, 255, 255, 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);
}

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

/* ===================================================================
   스테이지 — 히어로 (+ 데스크톱에서만 학습 여정 성좌)
   원본 모바일: main px-4 pt-10 pb-10, 히어로 mb-8
   =================================================================== */
.home-stage {
    flex: 1 1 auto;
    padding: 40px 16px 0;
}

/* 원본: text-[26px] font-bold tracking-[-2px] leading-[1.2] */
.home-stage__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.2;
    color: var(--mili-ink);
}

/* 원본: mt-2 text-[#a6a6aa] text-[15px] font-semibold tracking-[-0.18px] */
.home-stage__lead {
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.18px;
    color: var(--mili-fg-muted);
}

.home-stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

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

/* 성좌는 데스크톱 캔버스 전용이다. 원본 MobileHomeView 에는 아예 없다. */
.home-constellation {
    display: none;
}

/* ===================================================================
   패널 — 원본 모바일 카드 2장 (space-y-4)
   =================================================================== */
.home-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px 40px;
}

/* 원본 두 카드 모두 라운드가 없고 inset 하이라이트만 있다. */
.home-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 20px;
}

/* MobileArticleCard: bg-black/60 + inset 하이라이트 8% */
.home-card--profile {
    background: rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* MobileRecentProjectCard: bg rgba(10,15,8,0.8) + inset 하이라이트 4% */
.home-card--recent {
    background: rgba(10, 15, 8, 0.8);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}

/* 원본: text-[20px] font-bold tracking-[-1px] mb-[24px] */
.home-card__title {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--mili-ink);
}

/* ---------- 프로필 (원본 MobileArticleCard 헤드) ---------- */
.home-profile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* 원본: size-[52px] rounded-full mt-[2px] object-top */
.home-profile__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-top: 2px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background: rgba(0, 0, 0, 0.6);
}

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

/* 원본: text-[22px] font-bold tracking-[-1.1px] */
.home-profile__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1.1px;
    color: var(--mili-ink);
}

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

/* 원본: mt-1 text-[#a6a6aa] text-[12px] tracking-[-0.1px] weight 500 */
.home-profile__summary {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: var(--mili-fg-muted);
}

/* ---------- 스탯 타일 (원본 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));
    gap: 8px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

/* 원본: 아이콘(15px)이 라벨과 한 줄이 아니라, 라벨·값·설명 세로 블록 전체 옆(gap-10)에 온다. */
.home-stat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: linear-gradient(146.59deg,
        rgba(255, 255, 255, 0.035) 2.36%,
        rgba(255, 255, 255, 0.01) 63.34%,
        rgba(183, 245, 47, 0.01) 97.64%);
}

.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;
}

/* 원본: label 12px bold leading-[15px] */
.home-stat__label {
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
    color: var(--mili-ink);
}

/* 원본: 24px font-black leading-[40px] */
.home-stat__value {
    font-size: 24px;
    font-weight: 900;
    line-height: 40px;
    color: var(--mili-ink);
}

.home-stat__value small {
    font-size: 13px;
    font-weight: 700;
}

/* 원본: 10px #d1d1d1 leading-[15px] */
.home-stat__note {
    font-size: 10px;
    line-height: 15px;
    color: #d1d1d1;
}

/* ---------- 레벨 박스 (원본 Lv. 23 / 84%) ----------
   mt-[18px] rounded-[12px] px-[15px] py-4 / border white 7% / 173.224deg 그라디언트 */
.home-level {
    margin-top: 18px;
    padding: 16px 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: linear-gradient(173.224deg,
        rgba(255, 255, 255, 0.035) 2.36%,
        rgba(255, 255, 255, 0.01) 63.34%,
        rgba(183, 245, 47, 0.01) 97.64%);
}

.home-level__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.home-level__tier {
    font-size: 15px;
    font-weight: 900;
    color: var(--mili-ink);
}

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

.home-level__hint {
    margin: 10px 0 0;
    font-size: 9px;
    letter-spacing: -0.288px;
    color: #8a948d;
}

/* 원본 progress-track: bg-white/10 h-[7px] rounded-full, fill 에 라임 glow */
.home-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

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

/* ---------- 비로그인 프로필 자리 ---------- */
.home-guest {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

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

.home-guest__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--mili-ink);
}

.home-guest__desc {
    margin: 6px 0 18px;
    font-size: 12px;
    letter-spacing: -0.1px;
    color: var(--mili-fg-muted);
}

/* ---------- 최근 학습 (원본 MobileRecentProjectCard) ---------- */
.home-flags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* 원본: bg rgba(170,255,25,0.08) rounded-[8px] px-[9px] py-[5px], 10px bold */
.home-pill {
    padding: 5px 9px;
    border-radius: 0;
    background: rgba(var(--mili-brand-rgb), 0.08);
    color: var(--mili-brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.288px;
    white-space: nowrap;
}

/* 현재 단계 배지: rounded-[6px] px-[8px] py-[4px], 11px bold */
.home-pill--soft {
    padding: 4px 8px;
    border-radius: 0;
    font-size: 11px;
    letter-spacing: -0.2px;
}

.home-flags__type {
    font-size: 10px;
    letter-spacing: -0.2px;
    color: #737373;
}

/* 원본: mt-[14px] 17px bold tracking-[-0.7px] */
.home-recent__title {
    margin: 14px 0 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.7px;
    color: var(--mili-ink);
}

/* 원본: mt-[5px] #a6a6aa 10px tracking-[-0.1px] */
.home-recent__meta {
    margin: 5px 0 0;
    font-size: 10px;
    letter-spacing: -0.1px;
    color: var(--mili-fg-muted);
}

/* 원본: mt-[22px], 라벨 9px #8a948d, 값 11px bold, mb-[8px] */
.home-recent__progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 8px;
}

.home-recent__progress-label {
    font-size: 9px;
    letter-spacing: -0.288px;
    color: #8a948d;
}

.home-recent__progress-value {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--mili-ink);
}

/* 원본: mt-4 bg-white/[0.04] rounded-[10px], 안쪽 px-[14px] py-[10px] */
.home-stage-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
}

.home-stage-box__label {
    margin: 0;
    font-size: 9px;
    letter-spacing: -0.288px;
    color: #8a948d;
}

.home-stage-box__value {
    margin: 2px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.25px;
    color: var(--mili-ink);
}

/* CTA 는 카드 아래쪽에 붙는다(원본 px-5 pb-5 영역). */
.home-card--recent .home-btn--block {
    margin-top: 16px;
}

/* ---------- 비로그인 진입 카드 ---------- */
.home-entry {
    display: grid;
    gap: 8px;
}

.home-entry__card {
    display: block;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: linear-gradient(146.59deg,
        rgba(255, 255, 255, 0.035) 2.36%,
        rgba(255, 255, 255, 0.01) 63.34%,
        rgba(183, 245, 47, 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: 8px;
    font-size: 15px;
    line-height: 1;
    color: var(--mili-brand);
}

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

.home-entry__desc {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 13px;
    color: #d1d1d1;
}

/* ===================================================================
   데스크톱 (>= 1280px) — 원본 xl 브레이크포인트
   좌측 사이드바가 상시 노출되고 스테이지가 넓어진다.
   =================================================================== */
@media (min-width: 1280px) {
    /*
     * ===== 고정 캔버스 =====
     * 원본은 1920x1080 Figma 캔버스를 뷰포트 크기·비율에 맞춰 통째로 축소하고
     * 가운데 정렬해서 얹는다(비율이 16:9 가 아니면 위아래/좌우로 여백이 남는
     * 레터박스 방식). fluid 반응형(clamp 등)으로 "비슷하게" 근사했더니 뷰포트
     * 비율이 조금만 달라져도 요소 위치가 원본과 어긋나는 문제가 계속됐다 —
     * 그래서 원본과 똑같은 방식으로 바꾼다: 안쪽 콘텐츠는 항상 고정 크기
     * (1649x1080 = 사이드바 271px 를 제외한 콘텐츠 영역, 실 배포 사이트
     * DOM 좌표 실측치)로 두고, js/home.js(initCanvasFit)가 .home-shell 크기에
     * 맞춰 transform:scale() 과 left/top 을 매 리사이즈마다 계산해 넣는다.
     * 그 안의 모든 좌표(아래 .home-stage/.home-panels 등)는 그 실측치를
     * 그대로 쓴 절대값이다 — 더 이상 clamp 로 어림잡지 않는다.
     */
    .home-canvas {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1649px;
        height: 1080px;
        transform-origin: top left;
        z-index: 1;
    }

    /*
     * 데스크톱 햄버거/로고 숨김은 components.css §8 이 처리한다. 홈만 다른 점은 위치다 —
     * 고정 캔버스 안에 얹혀야 하므로 static 이 아니라 absolute 다.
     * .home-canvas 를 앞에 붙여 홈 밖의 .app-topbar 가 영향받지 않게 한다.
     */
    .home-canvas > .app-topbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    /* 실측: 히어로 제목 블록 left 70px top 142px. */
    .home-stage {
        position: absolute;
        left: 70px;
        top: 142px;
        right: 0;
        bottom: 431px; /* 1080 - 649(카드 영역 top) */
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .home-stage__title {
        font-size: 50px;
        letter-spacing: -2px;
    }

    .home-stage__lead {
        font-size: 15px;
    }

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

    /* 학습 여정 성좌 — 히어로 텍스트 아래 남는 공간을 그대로 채운다. */
    .home-constellation {
        position: relative;
        display: block;
        flex: 1 1 auto;
        margin: 8px 0 0;
        padding: 0;
        list-style: none;
    }

    .home-node {
        position: absolute;
        left: var(--node-x);
        top: var(--node-y);
        transform: translate(-50%, -50%);
        display: flex;
        align-items: flex-start;
        gap: 10px;
        /* 원본: 진행 중/완료 단계만 opacity 1, 나머지는 40% */
        opacity: 0.4;
    }

    .home-node--done,
    .home-node--current {
        opacity: 1;
    }

    .home-node:nth-child(1) { --node-x: 12%; --node-y: 84%; }
    .home-node:nth-child(2) { --node-x: 31%; --node-y: 70%; }
    .home-node:nth-child(3) { --node-x: 49%; --node-y: 82%; }
    .home-node:nth-child(4) { --node-x: 65%; --node-y: 52%; }
    .home-node:nth-child(5) { --node-x: 82%; --node-y: 34%; }

    /* 실측: 카드 영역 top 649px, 프로필 959px : 최근 440px, 사이 갭 26px. */
    .home-panels {
        position: absolute;
        left: 0;
        top: 649px;
        width: 1649px;
        display: flex;
        align-items: stretch;
        gap: 26px;
        padding: 0;
    }

    .home-card {
        border-radius: 0;
        padding: 28px;
    }

    .home-card--profile {
        width: 959px;
    }

    .home-card--recent {
        width: 440px;
    }

    /* 캔버스 전체가 한 덩어리로 스케일되므로 아바타도 다시 고정 px 로 둔다. */
    .home-profile__avatar {
        width: 190px;
        height: 190px;
    }

    .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;
    }

    .home-recent__title {
        font-size: 20px;
        letter-spacing: -0.9px;
    }

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

    .home-recent__progress-value {
        font-size: 13px;
        letter-spacing: -0.585px;
    }

    .home-stage-box__value {
        font-size: 12px;
        letter-spacing: -0.3px;
    }
}

/* 성좌 노드 — 데스크톱에서만 보이지만 정의는 한 곳에 모아 둔다. 원본 프레임 46.86px. */
.home-node__frame {
    position: relative;
    flex: 0 0 auto;
    width: 47px;
    height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-node__frame::before,
.home-node__frame::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.home-node__frame::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

.home-node__frame::after {
    right: 0;
    bottom: 0;
    border-left: 0;
    border-top: 0;
}

.home-node__dot {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.85);
}

.home-node__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.home-node__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mili-fg-muted);
    white-space: nowrap;
}

.home-node__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mili-ink);
    white-space: nowrap;
}

.home-node--done .home-node__frame::before,
.home-node--done .home-node__frame::after {
    border-color: var(--mili-brand);
}

.home-node--done .home-node__dot {
    background: var(--mili-brand);
    box-shadow: 0 0 12px rgba(var(--mili-brand-rgb), 0.55);
}

.home-node--done .home-node__label {
    color: var(--mili-brand);
}

/* 진행 중 단계는 원본과 같은 시안(cyan) 강조 */
.home-node--current .home-node__frame::before,
.home-node--current .home-node__frame::after {
    border-color: var(--mili-stat-time);
}

.home-node--current .home-node__dot {
    background: var(--mili-stat-time);
    box-shadow: 0 0 14px rgba(81, 162, 255, 0.6);
}

.home-node--current .home-node__label,
.home-node--current .home-node__title {
    color: var(--mili-stat-time);
}