/*
 * VOD 과정 목록(/courses) 화면 전용.
 *
 * mili-home-v3 시안(참조: mili-ai-4-screens-share.vercel.app, 사이드바 "VOD" 메뉴)을 그대로 옮겼다.
 * 좌측 사이드바(_app-sidebar.jsp)와 다크 셸(<body class="mili-theme-dark">)은 홈·마이페이지와
 * 같은 공용 조각을 쓰고, 이 파일에는 이 화면 전용 레이아웃·카드·히어로만 둔다.
 *
 * 분야 칩(표준 알약 탭 .tab-pill)·레벨 필터(표준 밑줄 탭 .tab-line)의 배색은 theme/figma-classes.css
 * 한 곳이 정본이고 테마 분기까지 거기서 끝난다(2026-08-27 탭 표준화 — 예전엔 components.css 의
 * ".mili-theme-dark ..." 오버라이드가 뒤에서 다시 칠했다). 페이지네이션(.pagination)·폼
 * 컨트롤(.form-select)의 다크 배색만 여전히 그 오버라이드 소관이다.
 */

/* ===== 1) 본문 열 =====
   얼개(.app-frame/.app-frame__body/.app-topbar)는 theme/components.css §8 공용이다.
   폭은 화면 CSS 가 아니라 셸이 정한다(design-system.md §7) — 이 화면은 shellWidth 를 넘기지
   않으므로 기본값인 Standard(--mili-content-standard, 1200px)를 그대로 쓴다. 카드 4열도
   1200px 안에서 맞도록 짜여 있다. 세로 여백만 이 파일 소관이다. */

/* 상단 여백은 .page-hero 가 갖는다(--mili-hero-top-gap). 여기서 padding-block 으로 위까지
   잡으면 상단바~제목 간격이 시안의 80px 이 아니라 128px 이 된다 — 아래 여백만 소관이다. */
.catalog-page {
    padding-block-end: 4rem;
}

/* 2026-08-12 정정: 스크린샷만 보고 "제목이 단색"이라 잘못 판단해 아래를 color:inherit 로
   되돌렸었다 — 실제로는 JSX 바깥 <p> 래퍼(text-black)만 보고, 그 안에 중첩된
   <span className="text-[#...]">VOD</span> 를 놓쳤다(디자인 텍스트 매칭만으로 결론 내지
   않기, 스크린샷을 직접 열어 대조할 것). "VOD" 는 실제로 분리 색상이 맞다 — 다크(node
   1496:332) #b4ff39 는 --mili-brand 다크값과 정확히 일치해 기본 규칙(색 지정 없음, 공용
   .page-hero__title-prefix 의 var(--mili-brand) 그대로)으로 충분하다. 라이트만 --mili-brand
   라이트 토큰(#618f20)과 다른 화면 전용 실측값(node 1653:2496) #9fe970 을 쓴다 — 당시
   레벨 필터 활성색, 그리고 theme/figma-classes.css .btn.default 채움과 같은 색이었다. */
/* 2026-08-13: 리터럴이 --mili-brand 라이트 토큰과 정확히 같은 값이 됐다(2단계에서 tokens.css
   라이트 브랜드색을 이 실측대로 오버라이드) — 토큰 참조로 되돌린다. */
.mili-light .catalog-page .page-hero__title-prefix {
    color: var(--mili-brand);
}

/* 2026-09-22 재실측(node 4038:312653, get_design_context 실측 재확인, 사용자 지적) — 이전
   2026-08-28 라운드(node 2723:88109)는 재설계 이전 구 노드였다. 실제 화면 노드는 숫자만
   Primary/500(#1a987f, 라이트)을 쓴다 — --mili-primary-500 이 정확히 그 값이라 리터럴 대신
   토큰으로 옮긴다("전체 강의 " 라벨 부분은 검정 그대로, 숫자만 감싸는 span 이 이 클래스다). */
.mili-light .catalog-count-label__num {
    color: var(--mili-primary-500);
}

/* ===== 1b) 프로모션 배너 캐러셀 =====
   2026-08-31 — 강의·PBL·로드맵 세 목록이 함께 쓰는 공용 컴포넌트가 되어 theme/components.css
   §프로모션 배너 캐러셀(공용) 로 옮겼다(마크업도 3화면이 common/_promo-carousel.jsp 하나를
   include). 캐러셀 자체의 여백·반경·인디케이터는 그 공용 규칙 소관이고, 이 화면에 남는 건
   히어로(제목+검색) 쪽 모바일 상단 여백뿐이다. */
/* 2026-08-31 사용자 제공 모바일 실측 이미지(간격 리드라인) 반영 — 상단바~제목(48→20)·
   부제~검색창(32→16)은 공용 .page-hero(theme/components.css)가 갖는 값이라, 그 파일을 고치지
   않고 이 화면 스코프(.catalog-page)로만 좁혀 오버라이드한다(다른 목록형 화면에 영향 없음). */
@media (max-width: 767px) {
    .catalog-page .page-hero {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .catalog-page .page-hero__search {
        margin-top: 16px;
    }
}

/* ===== 2) 히어로 (제목 + 검색) — theme/components.css 의 .page-hero 로 이관 =====
   목록형 화면 전부가 Figma "PC 공통_타이틀/설명/검색"(node 1354-232) 한 벌을 공유한다.
   마크업은 common/_page-hero.jsp 하나가 만든다.

   여기 있던 .catalog-hero / .catalog-search 는 참고 앱(PublicCourseCatalog)의 JSX 를 실측해
   만든 것이라 30→36px · 굵기 900 · 자간 -0.06em 이었고, Figma 정본(36px 고정 · 700 · -0.01em)
   과 어긋나 있었다. 검색창도 36rem/44px 였는데 시안은 576px/52px 이다.
   알약형(9999px)이라는 결론만은 시안과 같았다 — 지금은 --mili-radius-pill 토큰을 쓴다. */

/* ===== 3-1) "전체 강의 N개" =====
   PBL 목록(node 1476:1443 "PBL 프로젝트 N개")도 같은 컴포넌트를 쓰게 되어
   .catalog-count-label 정의는 theme/components.css 로 옮겼다. */

/* ===== 4) 레벨 필터 + 정렬 =====
   탭 자체(밑줄 스타일·pill·gap)는 theme/components.css 의 .level-filter 공용 컴포넌트다
   (PBL 목록과 완전히 같은 값이라 2026-08-15 QA37 이후 그쪽으로 옮겼다). 이 화면은 히어로
   아래 상단 여백(margin)만 소관이다. */
.catalog-level-filter {
    margin: 15px 0 0;
}

/* 2026-08-31 Figma 모바일 실측(node 2804:25159) — 데스크톱 밑줄 탭(theme/figma-classes.css
   .tab-line__link, min-height 49px·패딩 12/20/13px·B2 16px)을 그대로 물려받아 시안(39px·
   8/20/9px·14px)보다 컸다. 이 화면 전용(.catalog-level-filter)으로 좁혀 다른 .tab-line
   사용처(커뮤니티·마이페이지 등)에는 영향이 없다. */
@media (max-width: 767px) {
    .catalog-level-filter .tab-line__link {
        min-height: 39px;
        padding: 8px 20px 9px;
        font-size: var(--mili-body-b3-size);
    }

    /* 2026-08-31 사용자 지적 — "전체 N개" 줄 → 레벨 탭(15px)도 아래쪽과 같은 12px 리듬으로
       맞춘다(검색창~배너~"전체 N개" 등 이미 12px 로 통일된 구간의 연장). */
    .catalog-level-filter {
        margin-top: 12px;
    }
}

/* 2026-08-27 추가(Figma node 2224:95762 실측) — "추천 콘텐츠 보기"·정렬 드롭다운을 8px 간격으로
   묶는다. .level-filter 가 justify-content:space-between 인 2단 구조라, 우측에 둘 이상을 두려면
   이 래퍼로 한 덩어리를 만들어야 pills 반대편에 제대로 붙는다. */
.catalog-level-filter__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 정렬 드롭다운(최신순/가나다순)은 이제 화면 전용 CSS 가 아니라 공용 컴포넌트다 —
   .mili-sort-dropdown__*(theme/components.css §21-1) 를 그대로 쓴다. PBL 목록과 완전히
   같은 값이라 화면마다 복제해 두던 것을 2026-08-28 에 통합했다. */

/* 2026-08-28 Figma 모바일 실측(node 2804:25156/25196, get_metadata) — "추천 콘텐츠 보기"·
   정렬 드롭다운이 데스크톱과 자리가 다르다(추천 버튼은 "전체 N개" 줄 오른쪽, 정렬은 분야 칩
   줄 다음의 독립된 줄 우측 정렬). DOM 은 그대로 두고(desktop 마크업 불변), 같은 트리거를
   각자 자리에 하나씩 더 둔(JSP 참고) 뒤 폭에 따라 어느 쪽을 보일지만 CSS 로 바꾼다.
   기본(데스크톱)은 모바일 전용 사본을 숨기고, 모바일 전용 사본이 보일 때는 레벨필터 줄의
   원래 그룹(추천 버튼+정렬)을 숨긴다. */
.recommend-trigger-btn--mobile-count,
.mili-sort-dropdown-row--mobile {
    display: none;
}

@media (max-width: 767px) {
    .catalog-level-filter__actions {
        display: none;
    }

    /* 2026-08-31 Figma 모바일 실측(node 2804:25158) — 데스크톱 폰트(components.css
       .catalog-count-label, 1.5rem=24px)를 그대로 물려받아 시안(18px)보다 컸다. PBL 목록도
       같은 공용 컴포넌트를 쓰지만 이 규칙은 course-list.css(이 화면에만 로드)라 PBL 에는
       영향이 없다. */
    .catalog-count-label {
        font-size: 18px;
    }

    /* 2026-08-31 Figma 모바일 실측(node 2915:53594) — 데스크톱 크기(components.css
       .recommend-trigger-btn, 패딩 8/12px·폰트 12px·아이콘 18px)를 그대로 물려받아 시안보다
       컸다. 이 클래스명은 PBL 목록도 같이 쓰지만 이 규칙은 이 화면 전용 스타일시트에만
       있어 PBL 에는 영향이 없다. */
    .recommend-trigger-btn--mobile-count {
        display: inline-flex;
        padding: 6.5px 9.75px;
        font-size: 11.35px;
    }

    .recommend-trigger-btn--mobile-count svg {
        width: 14.6px;
        height: 14.6px;
    }

    /* 2026-09-02 사용자 지적 — margin 을 문자 그대로 위/아래 12px 로 둔다(버튼 내부 여백을 감안한
       보정값 추정은 여기서 하지 않는다). 위(.catalog-filters, 형제 마진 collapse)도 아래
       (.catalog-grid, collapse 없음)도 12px.
       2026-09-08 재대조(node 2804:25196) — "초기화"를 이 줄로 옮긴 2026-09-07 조치가 시안과
       어긋났다(재지적으로 되돌림). 시안엔 이 줄에 정렬 버튼 하나뿐이라 space-between 이 아니라
       flex-end 로 오른쪽 끝에 고정한다. "초기화"는 다시 위 분야 칩 줄(.catalog-filters)에서만
       그린다 — 그쪽 모바일 크기 보정은 §4-1 에 있다. */
    .mili-sort-dropdown-row--mobile {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    /* 2026-08-31 Figma 모바일 실측(node 2804:25226) — 데스크톱 정렬 드롭다운(테두리 있는
       버튼형, components.css .mili-sort-dropdown__toggle)과 달리 모바일은 테두리·배경이 없는
       텍스트+화살표뿐이다. 이 모바일 전용 사본(.mili-sort-dropdown-row--mobile 안)에만
       적용해 레벨필터 줄의 데스크톱 사본(위 §4 .catalog-level-filter__actions, 이미
       display:none)에는 영향이 없다.
       2026-09-07 — 글자색은 여기서 따로 덮지 않는다. 예전엔 테마 구분 없는 리터럴
       --mili-neutral-550(#bfc0c2)을 썼는데, 라이트 배경에서 지나치게 옅어 데스크톱판과
       같은 실수(2026-09-07 desktop .mili-sort-dropdown__toggle 흐림 제거)를 모바일에도
       반복하고 있었다. components.css 기본값(rgb(var(--mili-fg-rgb)))을 그대로 물려받는다. */
    .mili-sort-dropdown-row--mobile .mili-sort-dropdown__toggle {
        height: 36px;
        padding: 0 4px;
        border: 0;
        background: transparent;
        font-size: var(--mili-caption-size);
    }

    /* 2026-09-22 재실측(node 4038:312665;83:208545 모바일 정렬 버튼, get_design_context) —
       화살표(chevron-down) 아이콘은 12×12다. 기존 18px 는 실측 근거 없이 들어가 있었다. */
    .mili-sort-dropdown-row--mobile .mili-sort-dropdown__toggle i {
        font-size: 12px;
    }
}

/* ===== 4-1) 보조 필터 줄 (분야 칩 + 초기화) =====
   기관 select·"N개씩 보기" select 는 참고 화면에 없어 뺐다(서버 파라미터/페이지네이션 로직은
   그대로 두고 화면 컨트롤만 제거 — 항상 기본 페이지 크기로 조회된다).
   2026-09-08 재대조(node 2804:25172/25196) — "초기화"를 모바일에서만 정렬 줄로 옮겼던
   2026-09-07 조치를 되돌린다. 시안은 PC·모바일 구분 없이 "초기화"가 이 분야 칩 줄에 있고,
   정렬 버튼만 별도 줄(§21-1)에 산다 — 그래서 PC 전용 --desktop 수식자도 함께 걷어내
   모든 폭에서 이 줄 하나로만 그린다. */

/* Figma 실측: 레벨 필터 줄 → 분야 칩 줄도 15px(위 "전체 강의 N개" → 레벨 필터 줄과 동일). */
/* 2026-09-07 사용자 지적 — "초기화"가 분야 칩 줄 밑으로 떨어져 따로 논다(원래부터 있던 버그,
   4c13ab79 이전부터 flex-wrap:wrap 이었다). 칩은 이미 내부에서 가로 스크롤하므로(.tab-pill--scroll)
   이 바깥 줄까지 줄바꿈할 필요가 없다 — nowrap 으로 "초기화"를 같은 줄 오른쪽 끝에 고정한다.
   align-items 도 center→flex-start 로 바꾼다 — categoryNo 선택 시 칩이 대분류+세부분류 2줄로
   늘어나는데, center 면 짧은 "초기화"가 그 늘어난 전체 높이의 세로 중앙에 위치해 칩 첫 줄보다
   아래로 처져 보였다. */
.catalog-filters {
    margin-top: 15px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mili-space-3);
    margin-bottom: var(--mili-space-6);
}

.catalog-filters__chips {
    flex: 1 1 auto;
    min-width: 0;
}

/* 2026-09-07 — 분야 칩(.tab-pill__link)과 같은 크기(패딩 12/15px·B3 폰트)로 맞춘다.
   이전엔 리터럴 패딩(0.375rem/0.875rem)이 더 작아 옆(정렬 드롭다운)·칩 어느 쪽과도
   높이가 안 맞았다. 글자색도 --mili-fg-muted(흐림)를 걷어낸다 — 최신순과 나란히 있을 때
   유독 흐려 보인다는 사용자 지적, 최신순 기본 글자색(rgb(var(--mili-fg-rgb)))과 맞춘다. */
.catalog-filters__reset {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.9375rem;
    border: 1px solid var(--mili-line-strong);
    border-radius: var(--mili-radius-pill);
    color: rgb(var(--mili-fg-rgb));
    font-size: var(--mili-body-b3-size);
    line-height: var(--mili-body-b3-line);
    font-weight: var(--mili-font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.catalog-filters__reset:hover,
.catalog-filters__reset:focus {
    color: var(--mili-brand);
    background: rgba(var(--mili-fg-rgb), 0.06);
}

/* 2026-08-31 사용자 제공 모바일 실측 이미지 반영 — 분야칩 줄 → 정렬 줄 간격을 12px 로 줄인다.
   이 규칙은 위 무조건부 .catalog-filters 정의(margin-bottom: var(--mili-space-6)=24px) 보다
   파일 뒤쪽에 둬야 이긴다(같은 특정성이면 소스 순서가 늦은 쪽이 이긴다). */
@media (max-width: 767px) {
    .catalog-filters {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    /* 2026-08-31 Figma 모바일 실측(node 2804:25172 "Navigation - 분야 필터") — 데스크톱 알약
       탭(theme/figma-classes.css .tab-pill__link, 패딩 12/15px·B3 14px)을 그대로 물려받아
       시안(세로 34px·패딩 8/12px·12px)보다 컸다. 이 화면 전용(.catalog-filters)으로 좁혀
       다른 .tab-pill 사용처(마이페이지 로드맵 등)에는 영향이 없다. */
    .catalog-filters .tab-pill__link {
        min-height: 34px;
        padding: 8px 12px;
        font-size: var(--mili-caption-size);
    }

    /* 2026-09-08 — "초기화"가 다시 이 줄에서 그려지면서(위 §4-1 헤더 주석) 데스크톱 크기
       (12/15px·B3)를 그대로 물려받아 옆 분야 칩보다 커졌다 — 모바일 전용 §3-1 정렬 줄에서
       쓰던 크기(34px·8/12px·caption)를 그대로 옮겨온다. */
    .catalog-filters__reset {
        min-height: 34px;
        padding: 8px 12px;
        font-size: var(--mili-caption-size);
    }

    /* 2026-09-02 사용자 지적 — 분야 칩 줄 → 정렬 줄 간격을 12px 로 맞췄다고 생각했는데 실측(devtools)
       하니 그보다 훨씬 컸다. 원인은 이 .catalog-filters 자신의 margin-bottom 이 아니라, 그 안에 중첩된
       공용 컴포넌트 .tab-pill(theme/figma-classes.css) 자체가 margin-bottom: var(--mili-space-4)=16px
       를 갖고 있었던 것 — .catalog-filters__chips 가 flex 아이템(BFC 경계)이라 이 마진이 형제 마진
       collapse 없이 그대로 갇혀 컨테이너 높이에 더해진다. 이 화면 스코프로만 0 으로 죽인다(다른
       .tab-pill 사용처엔 영향 없음). */
    .catalog-filters .tab-pill {
        margin-bottom: 0;
    }
}

/* ===== 5) 결과 없음 =====
   2026-09-04 Figma QA(node 3771:55253, "공통") 반영 — radius 0→16(카드 모양),
   점선 테두리 제거, 배경은 실측(다크 Neutral/870)과 같은 --mili-surface.
   2026-09-07 라이트 모드 실측(node 3230:69050) — 시안은 테두리 없이 배경 톤 차이만으로
   박스를 구분한다(다크와 같은 방식). 라이트의 --mili-surface(#FFFFFF)는 페이지 배경과
   같은 값이라 그대로 두면 묻히므로, Q&A 입력창·멘토링 제출결과와 같은 처리로 라이트에서만
   한 단계 눌린 면(--mili-surface-interactive)으로 바꾼다 — 테두리는 추가하지 않는다. */

.catalog-empty {
    padding: 3.5rem 1rem;
    text-align: center;
    color: rgba(var(--mili-fg-rgb), 0.7);
    background: var(--mili-surface);
    border-radius: var(--mili-radius-card);
}

.mili-light .catalog-empty {
    background: var(--mili-surface-interactive);
}

.catalog-empty strong {
    color: rgb(var(--mili-fg-rgb));
    font-weight: 600;
}

/* ===== 6) 카드 그리드 =====
   ⚠️ 2026-08 실제 Figma 실측(fileKey 8qAqeXw50F8GKDGkeW0Pua, node 1388:3956)으로 재확인:
   참고 데모 사이트 기준 4열 판단은 실제 Figma 산출물과 어긋났다 — Figma 는 1200px 컨테이너에서
   3열 고정(카드 폭 387px)이다. 640px 에서 2열, 1280px 에서 3열로 뛴다. */
.catalog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mili-space-5);
    margin-bottom: var(--mili-space-8);
}

@media (min-width: 640px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 2026-08-27 Figma 모바일 시안(8qAqeXw50F8GKDGkeW0Pua, node 2769:98645 실측) — 390px 폭에서
   1열이 아니라 2열(카드 171px, gap 8px)이다. 이 폭까지는 위 640px 규칙이 안 걸려 1열로
   남아 있던 것을 여기서 덮는다(파일 뒤쪽이라 캐스케이드에서 이긴다). */
@media (max-width: 767px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/*
 * ⚠️ 아래 주석은 2026-08-06 현행에 맞춰 고쳤다. 예전에는 "카드는 늘 다크로 둔다"였는데
 * 실제 코드는 이미 background: var(--mili-panel) 로 테마를 따르고 있었다 — 표면만 뒤집히고
 * 그 위의 글자·태그는 흰색 하드코딩이라 라이트에서 흰 판에 흰 글자가 되던 상태였다.
 * 지금은 표면·글자·태그가 함께 뒤집힌다. 배너만 테마와 무관한 난이도 팔레트다.
 */
/* 실측(참고 앱 .mili-frame .mili-dark): 그림자 0 14px 34px rgba(0,0,0,.22), 배경/테두리는
   --mili-surface/--mili-border 를 그대로 쓴다(참고는 카드마다 별색을 쓰지 않고 표면은 통일하고
   배너만 팔레트로 구분한다) — 그래서 hover 도 배경을 바꾸지 않고 그림자만 진해진다. */
/* ⚠️ 2차 재확인: .mili-course-card 가 border-radius: var(--mili-radius-card)=12px !important 로
   전역 각짐 리셋([class*="rounded-"]{border-radius:0})을 다시 뒤집는다 — 카드만 예외적으로 둥글다.
   처음엔 이 예외 규칙을 못 보고 0으로 옮겼다. */
/* 2026-08-28 재실측(node 2723:87935, get_design_context) — 카드 자체(바깥 컨테이너)엔
   drop-shadow 클래스가 없다. 배경 1px 보더(neutral/300)만으로 구분되는 평평한 카드다.
   이전엔 참고 앱(mili-frame .mili-dark) 실측을 그대로 옮겨 상시 그림자(다크 14px/34px,
   라이트 --mili-shadow)를 깔았는데, 이 노드엔 없는 효과라 시안보다 카드가 훨씬 무거워
   보였다. 평시엔 그림자를 빼고, hover 만 --mili-shadow-lg 로 가벼운 들뜸을 준다(정적 시안엔
   없는 상태라 AI 판단 — 클릭 가능한 카드라는 신호를 주는 통상적 UX, 값은 라이트 디자인
   시스템 계조를 그대로 재사용). */
.catalog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mili-line);
    border-radius: var(--mili-radius-card);
    background: var(--mili-panel);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-card:hover,
.catalog-card:focus-within {
    border-color: var(--mili-line-strong);
    box-shadow: var(--mili-shadow-lg);
}

/* 같은 재실측 — 라이트 카드 배경은 흰 페이지(--mili-app-bg #FFFFFF) 위에 neutral/100(#F8F9FA)
   한 단 톤을 낮춘 면이다. --mili-panel(라이트에서 순백 #FFFFFF)을 그대로 쓰면 카드가 페이지와
   같은 색이 되어 그림자 없이는 경계가 안 보인다 — 그림자를 걷어낸 대신 이 톤 차이가 그 역할을
   대신한다. */
.mili-light .catalog-card {
    background: var(--mili-neutral-100);
    border-color: var(--mili-neutral-300);
}

/* 2026-08-27 사용자 지적 — 카드 썸네일을 상세·PBL 목록과 같은 실사진형 공용 배경(course-card__thumb--N)
   으로 바꾸면서, 여기서만 쓰던 레벨별 --accent/--banner 그라디언트(2026-08-11 확정)가 더 이상
   어디서도 안 쓰인다(§6a 카드 매체 영역 참고) — 죽은 토큰이라 지운다. 레벨 구분은 아래
   §6c 의 .catalog-card__level-badge --level-badge-bg/fg 만으로 표시한다. */

.catalog-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.catalog-card__link:hover,
.catalog-card__link:focus {
    color: inherit;
}

/*
 * ===== 6a) 카드 상단 매체 영역 =====
 * 2026-08-27 Figma 재설계(node 2723:87118 다크 / 2723:88119 라이트) 반영 — 80px 얇은 띠가
 * 아니라 219px 고정 높이다. 안에 상단 줄(콘텐츠 타입 태그 + 수강인원 pill)과 역량 태그 줄이
 * 위아래로 나뉘어 들어간다(PBL 목록 .pbl-card__media 와 같은 자리·같은 값).
 * 2026-08-27 재지적 — 레벨별 그라디언트(--banner) 대신 상세(course-detail.jsp)·PBL 목록이 이미
 * 쓰는 실사진형 공용 배경 40장(course-card__thumb--N, theme/components.css)을 그대로 쓴다.
 * 마크업에서 .catalog-card__media 에 course-card__thumb--${card.thumbIndex} 를 함께 건다 —
 * --card-bg 는 그 클래스가 준다(PBL .pbl-card__media 와 완전히 같은 패턴).
 */
.catalog-card__media {
    position: relative;
    /* z-index:0 으로 이 요소를 스택 컨텍스트 경계로 못박는다 — 아래 __media-photo 의
       z-index:-1 이 카드 다른 부위(본문 텍스트 등) 밑으로 새지 않고 이 매체 영역
       배경과 ::before 오버레이 사이에만 놓이게 한다. */
    z-index: 0;
    height: 219px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 1.25rem;
    background: var(--mili-neutral-900) var(--card-bg, none) no-repeat center / cover;
    overflow: hidden;
}

/* 실제 업로드 표지(card.coverImgAttachNo) — 있을 때만 마크업에 나타나는 <img>.
   공용 배경(위 background)과 아래 ::before 어둡게 하는 오버레이 사이에 끼워 넣는다
   (course-detail.css .detail-hero__cover-img--photo 와 같은 목적, 2026-09-09). */
.catalog-card__media-photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 배경이 그라디언트 타일에서 실사진(course-card__thumb--vod-N)으로 바뀌면서(2026-08-28)
   태그·인원수 pill 가독성이 사진 내용에 따라 흔들릴 수 있어, 상세 히어로
   (course-detail.css .detail-hero__cover::after)와 같은 톤의 어둡게 하는 오버레이를 더한다. */
.catalog-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.45) 100%);
}

.catalog-card__media-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* "강의" 콘텐츠 타입 태그는 theme/figma-classes.css 의 .tag.vod(공용 컴포넌트)를 그대로
   쓴다 — PBL 목록의 .tag.pbl 과 같은 패턴. 아이콘 글리프 다크색(Neutral/900)·"강의" 글자·
   아이콘배경(Primary/500) 색은 2026-09-22 재실측으로 공용 컴포넌트 자체(figma-classes.css
   node 2042:215476 "Tag" 시트 확인)가 정정돼 이 화면에 별도 오버라이드가 필요 없다. */
.catalog-card__kind {
    flex: 0 0 auto;
}

/* 매체 영역 위에 겹치는 상단 72px 만 가로막는다 — 그 아래 역량 태그 줄은 카드 링크가
   그대로 눌려야 한다(PBL 목록의 .pbl-card__bookmark-form 과 같은 값). */
.catalog-card__bookmark-form {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4.5rem;
    z-index: 2;
    pointer-events: none;
}

/* 배지·북마크는 카드마다 다른 컬러 그라디언트 위에 항상 겹쳐 그려지므로 테마와 무관하게
   어두운 반투명 오버레이를 쓴다. 불투명도는 2026-08-27 Figma 재실측으로 .24 → .8 로 올렸다
   (PBL 목록과 같은 라운드의 같은 재실측). */
.catalog-card__bookmark {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(26, 29, 34, 0.8);
    color: var(--mili-neutral-100);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.catalog-card__bookmark:hover {
    color: rgba(248, 249, 250, 0.8);
}

/* 채워진 상태(bi-bookmark-fill)는 윤곽선 상태(bi-bookmark)와 같은 font-size 인데도 도형이 꽉 차
   있어 원 안에서 눈에 띄게 더 커 보인다(2026-09-03 관심목록 QA — 전 카드가 항상 채워진 상태라
   유독 도드라졌다). 채워진 쪽만 살짝 줄여 두 상태의 체감 크기를 맞춘다. */
.catalog-card__bookmark .bi-bookmark-fill {
    font-size: 0.8125rem;
}

/* 2026-09-11 Figma 재실측(실제 화면 node 4038:312653 안의 카드 인스턴스, get_design_context) —
   이 pill은 태그·북마크가 있는 줄이 아니라 매체 영역 "좌하단"에 독립적으로 앉는다. 예전엔
   이 자리를 모바일 전용으로 오해해 데스크톱엔 태그 옆에 별도 사본을 뒀었는데, 실제 화면
   실측 결과 데스크톱도 이 좌하단 자리 하나만 쓴다 — 북마크(절대배치, 우상단)와 같은 줄이
   아니므로 자리를 비워 둘 필요도 없다. */
.catalog-card__count-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--mili-space-1);
    min-height: 32px;
    padding: 0.375rem 0.625rem;
    border-radius: var(--mili-radius-pill);
    background: rgba(26, 29, 34, 0.8);
    color: var(--mili-neutral-100);
    /* 폰트 크기·굵기(Caption/Semibold, 12px·600)는 화면 CSS 에 다시 적지 않는다 — 마크업의
       .caption_s(공용 타이포그래피 카탈로그, theme/figma-classes.css)가 담당한다. */
    white-space: nowrap;
}

/* bi-people 아이콘은 .caption_s 의 line-height(0.975rem)를 그대로 물려받으면 12px 글리프가
   세로로 남는 여백 때문에 정사각형으로 안 보인다 — 14px 고정 정사각 박스로 분리한다. */
.catalog-card__count-pill .bi-people {
    display: inline-flex;
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
}

/* 2026-09-11 Figma 재실측(node 3498:32256/32412 "Device=PC, View=목록", get_design_context) —
   수강중/수료 상태 배지는 PC 목록 뷰에도 그려진다. 이전 주석("모바일 전용, 데스크톱은 이번
   라운드에 안 함")은 낡은 상태였다 — 시안이 그 사이 바뀌었을 수 있으니 이런 주석을 그대로
   믿지 말 것. 배경 흰색(수강중)/라임(수료), 글자 --mili-neutral-900, 14px SemiBold, pill
   모서리 — 사진 위 오버레이라 테마 무관 고정색. §8 모바일 압축 블록이 축소된 크기로 덮어쓴다. */
.catalog-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 0.625rem;
    border-radius: var(--mili-radius-pill);
    font-size: var(--mili-body-b3-size);
    font-weight: var(--mili-font-weight-semibold);
    color: var(--mili-neutral-900);
    white-space: nowrap;
    /* 북마크 버튼(절대 위치, 32px)이 겹치는 자리를 예약 — count-pill 뒤에 오는 마지막
       요소가 되므로 이 배지가 그 역할을 대신한다. */
    margin-right: 2.75rem;
}

.catalog-card__status--flush {
    margin-right: 0;
}

.catalog-card__status--enrolled {
    background: var(--mili-neutral-50);
}

.catalog-card__status--done {
    background: var(--mili-primary-500);
}

.catalog-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    padding: 1.5rem 1.5rem 1.5625rem;
}

/* Figma 실측(node 2723:87118): text-[20px] leading-[1.4] tracking-[-0.4px], min-h 56px 2줄 고정
   (2026-08-27 재설계 — 예전 18px/52px 에서 커졌다, PBL 목록 .pbl-card__title 과 같은 값). */
/* 크기·굵기·줄높이(Heading/H4/Bold, 20px·700·1.4)는 화면 CSS 에 다시 적지 않는다 — 마크업의
   .h4_b(공용 타이포그래피 카탈로그)가 담당한다. 다만 .h4_b 는 letter-spacing 을 0으로 초기화해
   두는데, 이 카드는 실측(-0.4px = -0.02em)이 남아 있어 여기서만 다시 지정한다. */
.catalog-card__title {
    margin: 0;
    min-height: 56px;
    letter-spacing: -0.02em;
    color: var(--mili-fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Figma 실측: text-[14px] leading-[20px] min-h-10(40px, 2줄 고정), 글자색은 제목과 같은
   밝기(#F8F9FA) — 흐림 처리(52%)가 아니다. */
.catalog-card__desc {
    margin: 0;
    min-height: 40px;
    font-size: var(--mili-body-b3-size);
    line-height: 1.25rem;
    color: var(--mili-fg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 라이트에서는 위 다크 실측(제목과 같은 밝기)이 그대로 유지되지 않는다 — Figma 라이트 목록
   (node 1496:876)에서 제목은 검정에 가깝지만 설명문은 한 단 옅은 #3e4449 다. 다크와 달리
   라이트는 제목·설명이 같은 밝기가 아니라서 여기만 별도로 고정값을 준다. */
.mili-light .catalog-card__desc { color: #3E4449; }

/* 강의레벨(배지) / 제공기관 / 카테고리 / 이수시간 정의 목록. 2026-08-27 재설계로 "수료증" 줄이
   빠지고 이수시간이 이 목록 마지막 줄로 들어왔다(예전엔 카드 하단 액션 줄에 있었다) — PBL 목록의
   .pbl-card__facts 와 같은 구조(ul/li → dl/dt/dd). */
/* dt/dd 각각의 크기(Body/B3, 14px)는 화면 CSS 에 다시 적지 않는다 — 마크업의 .b3_r/.b3_m
   (공용 타이포그래피 카탈로그)이 담당한다. */
.catalog-card__facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mili-space-2);
}

.catalog-card__facts-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 20px;
}

/* 2026-09-22 재실측(node 4038:312653 카드 인스턴스, get_design_context) — 라벨·아이콘·값
   셋 다 rgba(fg,α)/--mili-fg-body 근사가 아니라 고정된 Neutral 단계다. 라벨+아이콘은 다크
   Neutral/550(#bfc0c2)·라이트 Neutral/750(#46494e)로 같은 값을 쓴다(이전엔 아이콘만 알파를
   더 낮춰 따로 그렸는데 실측은 라벨과 같은 색이었다). 값(dd)은 다크 Neutral/50(#ffffff에
   가까운 흰색)·라이트 Neutral/900(#0e1013)으로 라벨보다 훨씬 밝다(다크)/짙다(라이트) —
   --mili-fg-body(다크 #ADB5BD)로는 한참 못 미친다. Neutral 프리미티브는 테마 무관 고정값이라
   (theme/primitives.css) 라이트는 별도로 다시 지정해야 한다. */
.catalog-card__facts-row dt {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mili-neutral-550);
}

/* 2026-09-22 Bootstrap Icons(bi-*) → Figma 실측 Lucide 인라인 SVG 교체(get_design_context,
   node 4839:204532, PBL 목록과 마크업 공유) — 아이콘은 stroke="currentColor" 라 위 dt 의
   color 를 그대로 물려받는다. 크기만 여기서 16px(시안 native 16×16 viewBox) 정사각 박스로
   고정한다. */
.catalog-card__fact-icon {
    width: var(--mili-space-4);
    height: var(--mili-space-4);
    flex-shrink: 0;
}

.catalog-card__facts-row dd {
    margin: 0;
    color: var(--mili-neutral-50);
}

.mili-light .catalog-card__facts-row dt {
    color: var(--mili-neutral-750);
}

.mili-light .catalog-card__facts-row dd {
    color: var(--mili-neutral-900);
}

/* 2026-08-24 Figma 재확인(node 2178:36361 초급/2178:36525 고급, get_variable_defs 라이트 전용
   실측) — 강의레벨이 색 텍스트가 아니라 레벨별 pastel 알약형 뱃지다.
   2026-08-25 — 다크 프레임도 Figma "Tag+Level Badge" 공통 요소 시트(8qAqeXw50F8GKDGkeW0Pua,
   node 2042:215476, Level Badge 섹션)에서 실측해 라이트와 같은 알약형으로 맞춘다(사용자 확인).
   기본(다크) 규칙에도 pill 스타일을 걸고, 테마별로 --level-badge-bg/--level-badge-fg 만 바꾼다. */
/* 크기·굵기(Caption/Semibold, 12px·600)는 화면 CSS 에 다시 적지 않는다 — 마크업의 .caption_s
   (공용 타이포그래피 카탈로그)가 담당한다. */
.catalog-card__level-badge {
    display: inline-flex;
    align-items: center;
    /* 2026-09-18 Figma 재실측(node 2042:215476) — height 20px 명시(구 콘텐츠 높이 의존). */
    height: 20px;
    padding: 0.25rem 0.625rem;
    border-radius: var(--mili-radius-pill);
    background: var(--level-badge-bg);
    color: var(--level-badge-fg);
}

/* --level-badge-bg(다크)는 각 색의 /900 램프값과 정확히 일치해 토큰화했다. --level-badge-fg(다크)는
   Figma 램프의 어느 확인된 단계와도 안 맞는 별도 파생 틴트라 리터럴로 남긴다(§492 이하 실측 코멘트 참고).
   2026-09-22 — 추천 모달 카드(.reco-modal-card--{tier}, common/theme/components.css §30)도 같은
   레벨 배지(.catalog-card__level-badge)를 재사용하고, node I4038:312680;98:418831 실측값이 이
   목록 값과 정확히 같아(dark sky/900+100, light sky/200+800) 셀렉터만 함께 묶는다 — 색 자체는
   중복 정의하지 않는다. */
.catalog-card--basic .catalog-card__level-badge,
.reco-modal-card--basic .catalog-card__level-badge { --level-badge-bg: var(--mili-sky-900); --level-badge-fg: var(--mili-sky-100); }
.catalog-card--intermediate .catalog-card__level-badge,
.reco-modal-card--intermediate .catalog-card__level-badge { --level-badge-bg: var(--mili-green-900); --level-badge-fg: var(--mili-green-100); }
.catalog-card--advanced .catalog-card__level-badge,
.reco-modal-card--advanced .catalog-card__level-badge { --level-badge-bg: var(--mili-orange-900); --level-badge-fg: var(--mili-orange-100); }
.catalog-card--expert .catalog-card__level-badge,
.reco-modal-card--expert .catalog-card__level-badge { --level-badge-bg: var(--mili-purple-900); --level-badge-fg: var(--mili-purple-100); }

/* 2026-08-28 재실측(node 2723:87968/88025/88082/88325, get_variable_defs 직접 조회) — 이전
   라이트 값(sky/green/orange/purple 의 50·500~700 조합)은 이 노드가 아니라 다른 화면(추천
   모달 카드)을 보고 옮겨적은 값이라 실측과 어긋나 있었다. 이 화면 카드 레벨 배지는 배경
   100~200단, 글자 700~800단을 쓴다(다크의 900+100 조합과 반대 방향 짝). */
.mili-light .catalog-card--basic .catalog-card__level-badge,
.mili-light .reco-modal-card--basic .catalog-card__level-badge { --level-badge-bg: var(--mili-sky-200); --level-badge-fg: var(--mili-sky-800); }
.mili-light .catalog-card--intermediate .catalog-card__level-badge,
.mili-light .reco-modal-card--intermediate .catalog-card__level-badge { --level-badge-bg: var(--mili-green-100); --level-badge-fg: var(--mili-green-800); }
.mili-light .catalog-card--advanced .catalog-card__level-badge,
.mili-light .reco-modal-card--advanced .catalog-card__level-badge { --level-badge-bg: var(--mili-orange-100); --level-badge-fg: var(--mili-orange-700); }
.mili-light .catalog-card--expert .catalog-card__level-badge,
.mili-light .reco-modal-card--expert .catalog-card__level-badge { --level-badge-bg: var(--mili-purple-100); --level-badge-fg: var(--mili-purple-600); }

/* 2026-08-27 재설계로 카드 하단 CTA(수강신청/학습하기)·NEW 뱃지·구분선이 없어졌다 — 카드
   전체가 하나의 링크다(사용자 확인, PBL 목록과 같은 결정). NEW 뱃지는 위 §6a 역량 태그 줄로
   옮겼고, 이수시간은 §6c 정의 목록으로 옮겼다.
   2026-08-31 — 이 화면 전용 .catalog-cta(프로모션 배너 버튼이 쓰던 자리)는 배너가 3화면 공용
   컴포넌트가 되면서 지웠다 — 같은 값(사이트 전역 Primary CTA 뉴트럴 흑백 반전)의
   .mili-promo-banner__cta(theme/components.css)로 흡수됐다. */

/*
 * ===== 8) 모바일 카드 압축(≤767px) =====
 * Figma 모바일 시안(8qAqeXw50F8GKDGkeW0Pua, node 2769:98645 다크/2776:101090 라이트, 카드
 * 실측은 node 2769:98738) 반영(2026-08-27). 2열 그리드(위 §6 참고)에 맞춰 카드 자체도
 * 데스크톱과 다른 치수다 — 매체 219px→82px, 패딩 20/24px→12px, 제목 20px→16px.
 *
 * 카드 정보 구성도 데스크톱(강의레벨→제공기관→카테고리→이수시간 4줄, 각 줄 아이콘+라벨)과
 * 다르다 — 제공기관 줄이 아예 없고, 강의레벨 배지+이수시간이 한 줄, 카테고리(아이콘만, 라벨
 * 텍스트 없음)가 다음 줄이다(2026-08-27 사용자 확인 — 시안대로 반영, DOM 은 4줄 <dl> 그대로 두고
 * CSS 그리드 재배치 + 라벨 숨김으로 구현한다. 마크업을 그대로 두는 이유: 데스크톱 시맨틱을
 * 유지하면서 화면 CSS 만으로 재배치가 가능해서다).
 */
@media (max-width: 767px) {
    /* 배너 CTA 치수(높이 28px 등)는 이제 공용 .mili-promo-banner__cta(theme/components.css)
       소관이다 — 배너가 3화면 공용 컴포넌트가 되면서 옮겼다. */

    /* 2026-08-31 사용자 지적 — 패딩 12→8px(node 3203:47016 실측: 태그 줄이 x=8/y=8 에서 시작).
       2026-09-02 재실측(node 2804:24908/26658) — 고정 82px 는 이 시안(160/90, 171폭 기준 96px)
       보다 낮았다. 카드 폭이 그리드에 따라 달라지므로 고정 px 대신 종횡비로 바꾼다. */
    .catalog-card__media {
        height: auto;
        aspect-ratio: 16 / 9;
        padding: 8px;
        gap: 0.5rem;
    }

    .catalog-card__body {
        padding: 12px;
        gap: 0.625rem;
    }

    /* 2026-08-28 재지적 — 1줄 제목 카드가 2줄 제목 카드보다 짧아져 그리드 높이가 들쭉날쭉했다.
       min-height:0 은 지우고 2줄 고정으로 되돌린다.
       2026-09-02 재실측(node 2804:24908/26658, get_design_context) — 16px 는 이 화면 시안이
       아니라 다른 카드를 옮겨 적은 값이었다. 실제 시안은 Body/B3/SemiBold 14px·line-height 1.3
       (2줄 39px 고정 박스, 텍스트 자체 높이는 14*1.3*2=36.4px 지만 시안 박스가 39px로 약간
       크다 — 그대로 반영). */
    .catalog-card__title {
        min-height: 39px;
        font-size: 14px;
        font-weight: var(--mili-font-weight-semibold);
        line-height: 1.3;
    }

    /* 2026-09-02 재실측(node 2804:24908 다크/2804:26658 라이트) — 다크·라이트 모두 텍스트
       스타일은 SemiBold 14px 로 같다. 이전엔 다크 Medium/라이트 Semibold 로 갈라 뒀는데,
       두 프레임 실측이 같은 값이라 위 기본 규칙 하나로 합친다(이 규칙은 삭제). */

    /* 2026-08-31 Figma 모바일 실측(node 3203:47019 Tag 인스턴스, 42.25×20) — 공용
       .tag:is(.vod,.pbl,.roadmap,.url){height:2rem}(theme/figma-classes.css)이 클래스 2개
       조합(.tag + :is() 안의 .vod)이라 specificity 가 .catalog-card__kind 단독보다 높아
       height 만은 이기지 못한다 — .catalog-card__kind.tag 로 묶어야 이긴다(font-size 는
       .tag 쪽이 단일 클래스라 기존처럼 단독 선택자로도 이긴다).
       2026-09-02 재실측(node 2804:24908 다크/2804:26658 라이트) — 글자 크기는 두 프레임이
       엇갈렸다(다크 5.47px는 이중 축소된 값, 라이트 8.75px=14×0.625 가 정상 — 8.75 유지,
       사용자 확인). 패딩·테두리·그림자는 반대로 다크 쪽(3.75/6.25/2.5px, 0.625 스케일과
       일관)이 정상이고 라이트 쪽(2.344/3.906/1.563px)이 이중 축소였다 — 다크 값을 쓴다.
       공용 .tag:is(.vod,...) 데스크톱 패딩(4/10/4/6px)·그림자(2/2/10px)의 정확히 0.625배다. */
    /* 2026-09-02 사용자 지적 — "모바일" 구간(≤767px)은 카드 폭이 171px(390 뷰포트, Figma 실측
       기준점)~359px(767 뷰포트)까지 넓게 걸쳐 있는데, 위 §6a 값은 390px 한 지점에만 맞춘
       고정 px 라 넓은 폭에서는 태그가 상대적으로 작아 보였다. 컨테이너 쿼리 대신 뷰포트
       기준 clamp() 를 쓴다 — 조사 결과(2026-09-02) 이 카드를 재사용하는 유일한 다른 화면
       (mypage/wishlist.jsp)도 같은 그리드·같은 뷰포트-카드폭 공식을 그대로 쓰고 있어(모바일
       폭에서 사이드바가 오프캔버스로 빠짐), 컨테이너 폭이 뷰포트와 달라지는 경우가 없다.
       --tag-scale 은 390px 에서 0.625(§6a 값과 동일), 767px 에서 1(≥768px 데스크톱 .tag:is(...)
       값과 동일)이 되도록 선형 보간 — 767px 부근에서 데스크톱 규칙과 자연스럽게 이어진다.
       기준값은 desktop .tag(theme/figma-classes.css): height 32px·padding 4/10/4/6px·
       box-shadow 2/2/10px·gap(--mili-space-1)4px·font(--mili-body-b3-size)14px·
       .tag__icon 20px(아이콘 12px).
       ⚠️ 사용자 실측 지적(2026-09-02, "카드마다 제각각/PC보다 큼") — 나눗셈에 단위를 안 붙이면
       (100vw-390px)/377 은 길이(px)로 남는데 거기에 단위 없는 0.625 를 더하면 CSS calc 타입
       불일치로 --tag-scale 전체가 guaranteed-invalid 가 된다. 이걸 쓰는 font-size/height/
       padding/border-width/box-shadow 가 저마다 다른 기본값(상속값·initial)으로 제각각
       떨어져 카드마다 크기가 들쭉날쭉해 보였다. 377 → 377px 로 나눠야(길이÷길이=단위 없는
       숫자) 올바르게 0~1 사이 배율이 나온다.
       2026-09-04 — 공용 .tag 그림자가 실측 근거 없이 들어갔던 것으로 밝혀져 걷어냈다
       (figma-classes.css 참고). 이 스케일 규칙의 box-shadow 도 같이 뺀다. */
    .catalog-card__kind {
        --tag-scale: clamp(0.625, calc(0.625 + (100vw - 390px) / 377px * 0.375), 1);
        font-size: calc(14px * var(--tag-scale));
    }

    .catalog-card__kind.tag {
        height: calc(32px * var(--tag-scale));
        border-width: calc(1px * var(--tag-scale));
        padding: calc(4px * var(--tag-scale)) calc(10px * var(--tag-scale)) calc(4px * var(--tag-scale)) calc(6px * var(--tag-scale));
        gap: calc(4px * var(--tag-scale));
    }

    .catalog-card__kind .tag__icon {
        width: calc(20px * var(--tag-scale));
        height: calc(20px * var(--tag-scale));
    }

    .catalog-card__kind .tag__icon > i,
    .catalog-card__kind .tag__icon > svg {
        font-size: calc(12px * var(--tag-scale));
    }

    /* 2026-08-31 Figma 모바일 실측(node 3382:17994) — 매체 영역 좌하단 인원수 pill 축소판.
       .catalog-card__media 가 flex-column + space-between 이라 media-top(태그 줄) 다음에 오는
       이 pill이 자연히 바닥에 붙는다.
       2026-09-02 재실측(node 2804:24908/26658, get_design_context) — 기존 padding
       2.5px/7.222px·font 7.778px 는 이 pill이 아니라 옆의 수강중/수료 상태 배지 수치를
       잘못 옮겨 온 값이었다. 실측: min-h 20px·padding 4px 8px·gap 2px·font 8px. */
    .catalog-card__count-pill--mobile {
        min-height: 20px;
        padding: 4px 8px;
        gap: 2px;
        font-size: 8px;
    }

    .catalog-card__bookmark {
        top: 8px;
        right: 8px;
        width: 20px;
        height: 20px;
        font-size: 0.5rem;
    }

    /* 2026-09-02 Figma 모바일 재실측(node 2804:24908 다크/2804:26658 라이트) — 태그 옆 줄
       오른쪽에 있는 수강중/수료 상태 배지 축소판. 색상·폰트 자체는 위 데스크톱 기본값과
       같고(2026-09-11 재확인) 크기·여백만 모바일용으로 줄인다. 북마크(절대배치, 20px+8px
       여백)가 겹치지 않도록 옆자리를 예약한다(위 §6a 데스크톱 count-pill 의 margin-right
       예약과 같은 패턴). */
    .catalog-card__status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 20px;
        padding: 0 7.222px;
        border-radius: var(--mili-radius-pill);
        font-size: 8.75px;
        font-weight: var(--mili-font-weight-semibold);
        color: var(--mili-neutral-900);
        white-space: nowrap;
        margin-right: 1.5rem;
    }

    .catalog-card__status--flush {
        margin-right: 0;
    }

    .catalog-card__status--enrolled {
        background: var(--mili-neutral-50);
    }

    .catalog-card__status--done {
        background: var(--mili-primary-500);
    }

    /* data-role="wish-icon" 는 토글(browse) 모드 아이콘에만 붙는 JS 훅 속성이다 — 관심목록
       (mypage/wishlist.jsp, 토글이 아니라 항상 해제만 하는 모드)의 아이콘엔 없어서 이 축소가
       빠졌고, 그 결과 같은 카드인데 관심목록 쪽만 모바일에서 아이콘이 커 보였다(2026-09-03
       QA 재지적 — 실측 9.1px 대 13px). 아이콘 자체(i)를 잡아 모드와 무관하게 축소한다. */
    .catalog-card__bookmark i {
        transform: scale(0.7);
    }

    /* 2026-08-28 재실측(node 3203:47013 등, get_metadata) — 시안 모바일 카드는 4줄(강의레벨/
       제공기관/카테고리/이수시간)을 압축 없이 그대로 세로 나열한다. 이전엔 스크린샷만 보고
       "2줄로 압축, 제공기관 숨김"으로 잘못 판단했었다 — 실제 노드 트리는 desktop 과 같은
       4행 세로 목록이고, 각 행은 라벨 텍스트("강의레벨" 등) 없이 아이콘+값만 보인다. */
    .catalog-card__facts {
        gap: 0.25rem;
    }

    .catalog-card__facts-row {
        min-height: 0;
        /* 2026-09-18 Figma 재실측(20-card-mobile 대상 node) — 7.125px(구 6px, --mili-space 근사값). */
        gap: 7.125px;
    }

    /* 라벨 텍스트만 지운다(폰트 크기 0 트릭) — 아이콘은 자신의 font-size 를 다시 지정해
       그대로 보인다. 레벨 배지(dd 안의 pill)는 폰트를 따로 재정의하지 않는다. */
    .catalog-card__facts-row dt {
        font-size: 0;
        gap: 0;
    }

    .catalog-card__fact-icon {
        width: var(--mili-space-3);
        height: var(--mili-space-3);
        margin-right: 0.375rem;
    }

    /* 2026-09-22 사용자 지적 — 제공기관/카테고리 값이 한 줄을 넘으면 말줄임표로 자른다(Figma
       실측 마크업엔 없던 처리이나 사용자가 명시적으로 요청, AI 판단 아님). dt(아이콘)가 고정
       폭이라 dd 가 남는 폭을 다 가져가야 하는데 flex item 기본 min-width:auto 가 줄바꿈을
       막지 못해 min-width:0 을 같이 준다. */
    .catalog-card__facts-row dd {
        font-size: 0.625rem;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* 2026-08-31 Figma 모바일 실측(node 3203:47039 "Level Badge", 26×13) — 데스크톱 패딩
       (4/10px)·폰트(caption_s, 12px·600)를 그대로 물려받아 시안(세로 13px·패딩 1/6px·8px·700)
       보다 컸다. 배경·글자색(--level-badge-bg/fg)은 위 §6c 데스크톱 규칙과 값이 그대로
       같아(예: 중급 Green/900↔Green/100) 재정의하지 않는다. */
    .catalog-card__level-badge {
        padding: 1px 6px;
        font-size: 8px;
        /* 2026-09-22 재실측(node 4038:312665 모바일 카드) — 텍스트가 leading-[1.4](140%)다.
           위 §6c 데스크톱 규칙(.caption_s 상속, line-height 미지정)을 그대로 물려받으면
           기본값(대략 1.3)이 되어 배지가 시안보다 살짝 낮아 보인다. */
        line-height: 1.4;
        font-weight: var(--mili-font-weight-bold);
    }
}