/* =============================================================================
 * 갤러리 목록 (/showcase) — Figma node 2776:104076 "갤러리_다크모드" (2026-09-02)
 *
 * 시안의 카드는 프로젝트 목록 카드(node 2723:88929)를 그대로 복사해 둔 상태다(라벨이
 * 강의레벨/제공기관/카테고리/이수시간 그대로). 그래서 **레이아웃·색·간격·타이포는 프로젝트
 * 목록(pbl/project-list.css)의 실측값을 그대로 승계**하고, 데이터 항목만 갤러리 목적에 맞게
 * 재정의했다(사용자 확인) — 갤러리는 "무엇을 배우나"가 아니라 "누가 · 언제 만든 결과물을 ·
 * 언제까지 평가할 수 있나"를 보여주는 화면이다.
 *
 * ⚠️ pbl/project-list.css 를 참조하지 않고 값을 옮겨 적는다 — 화면 전용 CSS 는 뷰 경로
 * 미러링 규칙이라 다른 화면의 파일을 링크할 수 없다(PBL 목록이 course-list.css 를 참조하지
 * 못하는 것과 같은 제약).
 *
 * 라이트 모드 값은 같은 컴포넌트를 쓰는 프로젝트 카드가 이전 라운드에 라이트 프레임
 * (node 2723:89928/89951/89961)으로 실측해 확정한 것을 그대로 승계한다. 갤러리 프레임 자체는
 * 다크만 있고 라이트/모바일 프레임을 찾지 못했다.
 * ========================================================================== */

/* 상단 여백은 .page-hero 가 갖는다(pbl/project-list.css .pbl-page 와 같은 규칙 — 위쪽
   padding-block 을 여기서 주면 히어로 여백과 겹친다). 폭은 셸이 정한다(shellWidth 미지정 =
   Standard 1200px). */
.showcase-page {
    padding-block-end: 4rem;
}

/* "전체 N개" 줄 아래 여백.
   프로젝트·강의 목록에서는 이 줄과 카드 그리드 사이에 레벨필터(.pbl-level-filter, margin-top
   2.25rem)와 분야 칩 줄(.pbl-filters, margin 1.5rem 0)이 있어 간격이 저절로 생기는데, 갤러리는
   필터가 없어 건수 줄이 그리드에 바로 붙는다. 그래서 그리드 직전 간격을 만드는 쪽인
   .pbl-filters 의 아래 여백(1.5rem = 24px)을 그대로 가져온다 — 값은 --mili-space-6 과 정확히
   같아 리터럴 대신 토큰으로 적는다.

   공용 컴포넌트(.catalog-count-row, theme/components.css)는 건드리지 않는다 — 그쪽에 여백을
   주면 필터가 있는 강의·프로젝트 목록의 간격까지 함께 벌어진다. 이 화면 셸 클래스로만 한정한다. */
.showcase-page .catalog-count-row {
    margin-block-end: var(--mili-space-6);
}

/* =============================================================================
 * 카드 그리드
 * 640px 2열 / 1280px 3열 — 강의(.catalog-grid)·프로젝트(.pbl-grid)와 같은 전환 폭이다.
 * 새 브레이크포인트를 만들지 않는다.
 * ========================================================================== */
.showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mili-space-5);
    margin-bottom: var(--mili-space-8);
}

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

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

/* 390px 폭에서도 2열(카드 171px, gap 8px) — 강의·프로젝트 목록과 같은 값이다. */
@media (max-width: 767px) {
    .showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/* =============================================================================
 * 카드
 * ========================================================================== */
.showcase-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;
}

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

.mili-light .showcase-card {
    background: var(--mili-neutral-100);
    border-color: var(--mili-neutral-300);
}

/* 갤러리 카드는 찜 버튼이 없어(관심목록 대상이 아니다) 카드 전체가 온전한 하나의 링크다 —
   프로젝트 카드처럼 이미지 위에 별도 form 을 겹쳐 그릴 필요가 없다. */
.showcase-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

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

/* ===== 카드 상단 이미지 =====
   높이 219px 는 프로젝트 카드 실측값 그대로. 배경은 공용 프로젝트 사진 풀
   (theme/components.css .course-card__thumb--pbl-N → --card-bg). */
.showcase-card__media {
    position: relative;
    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;
}

/* 사진 위 배지·칩 가독성 확보용 어둡게 하는 오버레이(프로젝트 카드와 같은 값). */
.showcase-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%);
}

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

/* ===== 좌상단: 평가(게시)기간 상태 배지 =====
   시안의 "프로젝트" 유형 태그 자리다. 갤러리는 유형이 늘 같아 그 태그가 정보가 되지 못하므로
   이 화면에서 가장 먼저 알아야 할 "지금 평가할 수 있나"로 바꿨다(2026-09-02 사용자 확인).

   색은 새로 만들지 않고 시안이 이미 쓰는 팔레트를 그대로 쓴다 — Green/900(#195a27)+Green/100
   (#ddf8e1)은 시안에서 "중급" 레벨 배지 색이고, 진행중 배지로 전용한 것은 AI 판단이다.
   사진 위에 겹쳐 그려지므로 다른 미디어 배지들과 마찬가지로 테마와 무관하게 고정색을 쓴다
   (사진 위 오버레이는 사이트 테마가 아니라 이미지 밝기를 기준으로 한다). */
.showcase-card__status {
    display: inline-flex;
    align-items: center;
    gap: var(--mili-space-1);
    min-height: 32px;
    padding: 0.375rem 0.625rem;
    border-radius: var(--mili-radius-pill);
    white-space: nowrap;
    /* 크기·굵기(Caption/Semibold, 12px·600)는 마크업의 .caption_s 가 담당한다. */
}

.showcase-card__status--open {
    background: var(--mili-green-900);
    color: var(--mili-green-100);
}

/* 2026-09-11 Figma 재실측(node I4002:105425;4002:105407/105408, get_design_context) — "평가 종료"
   배지는 흰 배경(border #bfc0c2)+어두운 글자다. 이전 "댓글수 배지와 같은 어두운 중립 오버레이"
   판단은 실측 근거 없이 AI가 고른 값이었다 — 시안이 이미 흰 배지(수강중 배지와 같은 톤)를 쓴다. */
.showcase-card__status--closed {
    background: var(--mili-neutral-50);
    color: var(--mili-neutral-900);
}

/* ===== 우상단: 댓글수 배지 =====
   시안의 "N명 수강 중" pill 과 같은 컴포넌트·같은 값이다. 갤러리엔 찜 버튼이 없어
   프로젝트 카드의 margin-right(북마크 자리 확보)를 두지 않는다.

   아래 사진 위 요소들(pill·칩)의 rgba(26,29,34,.8) / #f8f9fa 는 테마 토큰으로 바꾸지 않는다 —
   Figma 다크·라이트 프레임이 둘 다 같은 값이다(사진 위 오버레이의 기준은 사이트 테마가 아니라
   이미지 밝기다). 프로젝트·강의 카드가 쓰는 값과 정확히 같다. */
.showcase-card__count-pill {
    display: inline-flex;
    align-items: center;
    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);
    white-space: nowrap;
}


/* =============================================================================
 * 카드 본문 (제목 + 정의 목록)
 * 이미지 밖 일반 패널이라 테마 토큰이 그대로 뒤집힌다.
 * ========================================================================== */
.showcase-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.showcase-card__media + .showcase-card__body {
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.5625rem;
}

/* 크기·굵기·줄높이(Heading/H4/Bold, 20px·700·1.4)는 마크업의 .h4_b 가 담당한다.
   letter-spacing 만 실측(-0.4px = -0.02em)대로 다시 지정한다. */
.showcase-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;
}

/* 카테고리 / 수행팀 / 수행기간 / 평가기간. 값이 없어도 "-" 로 줄을 남겨 카드 높이를 맞춘다. */
.showcase-card__facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mili-space-2);
}

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

.showcase-card__facts-row dt {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    color: rgba(var(--mili-fg-rgb), 0.52);
}

.showcase-card__facts-row dt i {
    font-size: 0.9375rem;
    color: rgba(var(--mili-fg-rgb), 0.45);
}

/* 기간 값(“26.07.01 ~ 26.08.15”)이 좁은 카드에서 중간에 끊기지 않게 넘치면 말줄임한다 —
   두 줄로 흘러 카드 높이가 들쭉날쭉해지는 쪽이 더 나쁘다. */
.showcase-card__facts-row dd {
    margin: 0;
    min-width: 0;
    color: var(--mili-fg-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================================
 * 모바일(≤767px) — 강의·프로젝트 목록의 압축 카드와 같은 규칙.
 * 라벨 텍스트를 접고 아이콘 + 값만 남긴다(4줄 구성은 그대로 유지).
 * ========================================================================== */
@media (max-width: 767px) {
    .showcase-card__media {
        height: 82px;
        padding: 12px;
        gap: 0.5rem;
    }

    .showcase-card__media + .showcase-card__body {
        padding: 12px;
        gap: 0.625rem;
    }

    /* 1줄 제목 카드가 2줄 카드보다 짧아져 그리드 높이가 들쭉날쭉해지는 것을 막는 2줄 고정
       (16px * line-height 1.2 * 2줄 = 38.4px) — 프로젝트 목록과 같은 값이다. */
    .showcase-card__title {
        min-height: 39px;
        font-size: 16px;
        font-weight: var(--mili-font-weight-medium);
        line-height: 1.2;
    }

    .mili-light .showcase-card__title {
        font-weight: var(--mili-font-weight-semibold);
    }

    .showcase-card__status,
    .showcase-card__count-pill {
        min-height: 20px;
        padding: 2.5px 7.222px;
        font-size: 7.778px;
    }

    .showcase-card__facts {
        gap: 0.25rem;
    }

    .showcase-card__facts-row {
        min-height: 0;
        gap: 0.375rem;
    }

    .showcase-card__facts-row dt {
        font-size: 0;
        gap: 0;
    }

    .showcase-card__facts-row dt i {
        font-size: 0.75rem;
        margin-right: 0.375rem;
    }

    .showcase-card__facts-row dd {
        font-size: 0.625rem;
    }
}