/*
 * PBL 프로젝트 목록(/pbl) 화면 전용.
 *
 * mili-home-v3 시안(참조: mili-ai-4-screens-share.vercel.app, 사이드바 "프로젝트" 메뉴)을 옮겼다.
 * 좌측 사이드바·다크 셸은 홈·VOD 목록과 같은 공용 조각을 쓰고, 이 파일에는 이 화면 전용
 * 레이아웃·히어로·카드만 둔다.
 *
 * ⚠️ 카드·히어로·필터의 치수는 VOD 목록(css/vod/course-list.css)과 의도적으로 같은 값이다 —
 * 프로젝트를 강의보다 크게 다룰 이유가 없어서 예전의 행(row)형 큰 카드와 큰 그라디언트 히어로를
 * 걷어내고 강의 카드와 같은 무게로 맞췄다. 클래스명을 catalog-* 로 공유하지 않고 pbl-* 로 두는
 * 이유는 화면 전용 CSS 는 뷰 경로를 미러링한다는 규약 때문이다(course-list.css 를 이 화면에서
 * 불러올 수 없다). 한쪽 치수를 손보면 다른 쪽도 같이 보는 게 맞다.
 *
 * 분야 칩(.filter-chip)·페이지네이션(.pagination)의 다크 배색은 theme/components.css 의
 * ".mili-theme-dark ..." 오버라이드가 VOD 목록과 함께 처리한다.
 */

/* ===== 1) 본문 열 =====
   얼개(.app-frame/.app-frame__body/.app-topbar)는 theme/components.css §8 공용이다.
   폭은 VOD 목록과 같은 공용값(--mili-content-max, 1180px)을 쓴다 — 카드 그리드가 4열까지
   벌어지는 것도 같다(예전 행형 카드 시절의 1200px 고정은 걷어냈다). */

.pbl-page {
    max-width: var(--mili-content-max);
    padding: 3rem 2rem 4rem;
}

/* ===== 2) 히어로 (제목 + 검색) ===== */

.pbl-hero {
    max-width: 640px;
    margin: 0 auto 2.25rem;
    text-align: center;
}

.pbl-hero__title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    color: var(--mili-ink);
}

@media (min-width: 768px) {
    .pbl-hero__title {
        font-size: 2.25rem;
    }
}

.pbl-hero__count {
    color: var(--mili-brand);
}

.pbl-hero__lead {
    margin: 0.75rem 0 0;
    color: rgba(var(--mili-fg-rgb), 0.55);
    font-size: 0.875rem;
}

/* 검색 입력은 전 화면 공통으로 알약형(9999px)이다 — variables.css 의 "검색만 pill" 방침. */
.pbl-search {
    display: flex;
    align-items: center;
    max-width: 36rem;
    margin: 2.25rem auto 0;
    padding: 0.25rem;
    border: 1px solid rgba(var(--mili-fg-rgb), 0.15);
    border-radius: 9999px;
    background: rgba(var(--mili-fg-rgb), 0.04);
    overflow: hidden;
}

.pbl-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mili-ink);
    font-size: 0.875rem;
    outline: none;
}

.pbl-search__input::placeholder {
    color: rgba(var(--mili-fg-rgb), 0.35);
}

/* 검색 아이콘이 곧 제출 버튼이다(별도 "검색" 버튼을 두지 않는다). */
.pbl-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    color: rgba(var(--mili-fg-rgb), 0.45);
    padding: 0;
    cursor: pointer;
}

/* ===== 3) 난이도 pill + 정렬 라벨 =====
   우측 "최신순"은 실제 정렬 컨트롤이 아니라 고정 라벨이다(정렬 파라미터가 없다) — VOD 목록과
   같이 장식용으로 둔다. */

.pbl-level-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2.25rem 0 0;
}

.pbl-level-filter__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pbl-level-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(var(--mili-fg-rgb), 0.15);
    border-radius: 8px;
    background: transparent;
    color: rgba(var(--mili-fg-rgb), 0.58);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.pbl-level-pill:hover,
.pbl-level-pill:focus {
    color: var(--mili-ink);
    border-color: rgba(var(--mili-fg-rgb), 0.3);
}

.pbl-level-pill--active,
.pbl-level-pill--active:hover,
.pbl-level-pill--active:focus {
    border-color: var(--mili-brand);
    background: var(--mili-brand);
    color: var(--mili-brand-on);
}

.pbl-sort-badge {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(var(--mili-fg-rgb), 0.15);
    border-radius: 8px;
    color: rgba(var(--mili-fg-rgb), 0.55);
    font-size: 0.75rem;
}

/* ===== 4) 보조 필터 줄 (분야 칩 + 초기화) ===== */

.pbl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

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

.pbl-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--mili-line-strong);
    border-radius: 999px;
    color: var(--mili-fg-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

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

/* ===== 5) 결과 없음 ===== */

.pbl-empty {
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--mili-fg-muted);
    background: rgba(var(--mili-fg-rgb), 0.03);
    border: 1px dashed var(--mili-line);
    border-radius: 0;
}

/* ===== 6) 카드 그리드 =====
   640px 에서 2열, 1280px 에서 4열(중간 3열 단계가 없다) — VOD 목록과 같은 브레이크포인트. */

.pbl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

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

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

/*
 * 카드 표면은 통일하고 배너만 난이도별 그라디언트로 구분한다. --accent 를 카드 최상위에 걸어
 * 배너와 난이도 글자색이 한 값을 같이 쓴다.
 *
 * 배경은 캔버스 상대값이 아니라 고정 다크 톤(--mili-panel)이다 — 밝게/어둡게 토글해도 카드
 * 내부(흰 글자·라임 배지)는 늘 다크 위에 있어야 읽힌다.
 *
 * 예전에 쓰던 배경 일러스트(images/pbl/project-{purple,blue,green}.png)는 행형 큰 배너 전용이라
 * 더 쓰지 않는다 — 80px 배너에 산맥 실루엣을 넣으면 아무것도 안 보인다.
 */
.pbl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mili-line);
    border-radius: 12px;
    background: var(--mili-panel);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pbl-card:hover,
.pbl-card:focus-within {
    border-color: var(--mili-line-strong);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

/* PBL 은 레벨이 하나뿐이라 levelNo 로 3단을 고른다(VOD 는 레벨 구간의 상한 levelNoEnd). */
.pbl-card--basic { --accent: #46d559; --banner: linear-gradient(112deg, #079879 0%, #b5e95c 100%); }
.pbl-card--intermediate { --accent: #72b4ff; --banner: linear-gradient(112deg, #2458d8 0%, #559aff 100%); }
.pbl-card--advanced { --accent: #ff996a; --banner: linear-gradient(112deg, #ee6b31 0%, #ed76bc 100%); }

.pbl-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

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

.pbl-card__banner {
    position: relative;
    height: 80px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: var(--banner);
}

/*
 * 찜(북마크) — 배너 위에 겹쳐 그리는 별도 form(카드 링크 안에 넣을 수 없다).
 * form 자체는 클릭을 통과시키고(pointer-events:none) 버튼만 받는다 — 아래 카드 링크를 덮으면
 * 배너를 눌러도 상세로 가지 않는다.
 */
.pbl-card__bookmark-form {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 2;
    pointer-events: none;
}

.pbl-card__bookmark {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    transform: translateY(-50%);
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 9999px;
    background: #111216;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.pbl-card__bookmark:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* 배너 우측 상태 배지(수료 / 학습 중 N% / N인 팀 / 모집 중). */
.pbl-card__status-pill {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background: #111216;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.pbl-card__status-pill--done {
    background: var(--mili-success);
}

.pbl-card__status-pill--enrolled {
    background: rgba(var(--mili-brand-rgb), 0.9);
    color: #11170d;
}

.pbl-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    padding: 1.25rem 1.25rem 0.25rem;
}

/* 2줄 고정(min-height) — 제목 길이가 달라도 아래 메타 줄의 높이가 어긋나지 않는다. */
.pbl-card__title {
    margin: 0;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 차수명 보조 줄. 차수명이 프로젝트명과 같으면 내용이 비는데, 그때도 자리는 남겨 둔다
   (카드마다 높이가 달라지면 그리드가 어긋난다). */
.pbl-card__desc {
    margin: 0;
    min-height: 40px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: rgba(255, 255, 255, 0.52);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pbl-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.pbl-card__tag {
    padding: 0.125rem 0.375rem;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    color: #a6a6aa;
    font-size: 0.625rem;
}

.pbl-card__tag--new {
    background: rgba(var(--mili-brand-rgb), 0.12);
    color: var(--mili-brand);
}

.pbl-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #c8c8cb;
}

.pbl-card__meta li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pbl-card__meta i {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.45);
}

.pbl-card__level {
    color: var(--accent);
    font-weight: 700;
}

/* 버튼이 카드 폭을 꽉 채우지 않는다 — 우하단에 붙는다. */
.pbl-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
}

.pbl-card__footer form {
    display: flex;
}

.pbl-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--mili-brand);
    background: transparent;
    color: var(--mili-brand);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.pbl-cta:hover,
.pbl-cta:focus {
    background: var(--mili-brand);
    color: #11170d;
}

.pbl-cta--muted {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.65);
}

.pbl-cta--muted:hover,
.pbl-cta--muted:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}