/* * VOD 과정 목록(/courses) 화면 전용. * * mili-home-v3 시안(참조: mili-ai-4-screens-share.vercel.app, 사이드바 "VOD" 메뉴)을 그대로 옮겼다. * 좌측 사이드바(_app-sidebar.jsp)와 다크 셸()은 홈·마이페이지와 * 같은 공용 조각을 쓰고, 이 파일에는 이 화면 전용 레이아웃·카드·히어로만 둔다. * * 필터 칩(.filter-chip)·페이지네이션(.pagination)·폼 컨트롤(.form-select)의 다크 배색은 * theme/components.css 의 ".mili-theme-dark ..." 오버라이드가 공통으로 처리한다 — 마크업은 * 라이트 화면과 똑같은 걸 그대로 쓴다. */ /* ===== 1) 본문 열 ===== 얼개(.app-frame/.app-frame__body/.app-topbar)는 theme/components.css §8 공용이다. ⚠️ 2차 재확인: 로컬 클론이 처음엔 3열/1180px 소스였는데, 이후 실제로 "jpark/detailed-design-revision" PR 들이 머지되며 카드 그리드가 4열로, 카드 내부 타이포가 축소돼 **같은 1180px 컨테이너 안에 4열이 들어가도록** 바뀌었다(재확인 시점 커밋 58ce9b0). 즉 공용값 1180px 이 맞고, 폭을 늘릴 필요가 없었다 — 카드 쪽을 좁혔어야 했다. --mili-content-max 를 그대로 쓴다. */ .catalog-page { max-width: var(--mili-content-max); padding: 3rem 2rem 4rem; } /* ===== 2) 히어로 (제목 + 검색) ===== 실측(참고 앱 PublicCourseCatalog): text-3xl md:text-4xl font-black tracking-[-.06em], count 만 브랜드색. 검색 래퍼는 border+bg 박스 안에 아이콘·인풋을 나란히 둔다. ⚠️ JSX className 자체엔 rounded 클래스가 없지만, 참고 앱 globals.css 의 전역 규칙 `label:has(input[placeholder*="검색"]) { border-radius: 9999px !important; }` 때문에 실제 렌더링은 완전한 알약형이다(DESIGN.md "검색 입력 9999px 전 화면 동일" 도 명시). className 만 보고 각짐(0)으로 판단했던 게 오판이었다 — variables.css 의 "검색만 pill" 방침과도 맞다. */ .catalog-hero { max-width: 640px; margin: 0 auto 2.25rem; text-align: center; } .catalog-hero__title { margin: 0; font-size: 1.875rem; font-weight: 900; letter-spacing: -0.06em; color: var(--mili-ink); } @media (min-width: 768px) { .catalog-hero__title { font-size: 2.25rem; } } .catalog-hero__count { color: var(--mili-brand); } .catalog-hero__lead { margin: 0.75rem 0 0; color: rgba(var(--mili-fg-rgb), 0.55); font-size: 0.875rem; } .catalog-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; } .catalog-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; } .catalog-search__input::placeholder { color: rgba(var(--mili-fg-rgb), 0.35); } /* 검색 아이콘이 곧 제출 버튼이다(시안은 별도 "검색" 버튼이 없다). */ .catalog-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; } /* ===== 4) 레벨 필터 + 정렬 ===== 실측(참고 앱): mt-9 flex flex-wrap items-center justify-between gap-4, 칩은 border px-5 py-3 text-sm font-bold, 활성은 브랜드 채움. 우측 "최신순"은 실제 정렬 컨트롤이 아니라 고정 라벨이다(참고 소스에 정렬 로직이 없다) — 이 화면도 동일하게 장식용으로 둔다. */ .catalog-level-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.25rem 0 0; } .catalog-level-filter__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ⚠️ 2차 재확인: 참고 소스가 이 pill 에 전용 클래스 .mili-course-filter 를 새로 얹었고 (border-radius: var(--mili-radius-filter)=8px !important), 패딩도 px-4 py-2 로 줄었다. 처음엔 rounded 클래스가 없다고 보고 각짐(0)/px-5 py-3 로 잘못 옮겼던 부분. */ .catalog-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; } .catalog-level-pill:hover, .catalog-level-pill:focus { color: var(--mili-ink); border-color: rgba(var(--mili-fg-rgb), 0.3); } .catalog-level-pill--active, .catalog-level-pill--active:hover, .catalog-level-pill--active:focus { border-color: var(--mili-brand); background: var(--mili-brand); color: var(--mili-brand-on); } .catalog-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-1) 보조 필터 줄 (분야 칩 + 초기화) ===== 기관 select·"N개씩 보기" select 는 참고 화면에 없어 뺐다(서버 파라미터/페이지네이션 로직은 그대로 두고 화면 컨트롤만 제거 — 항상 기본 페이지 크기로 조회된다). */ .catalog-filters { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; } .catalog-filters__chips { flex: 1 1 auto; min-width: 0; } .catalog-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; } .catalog-filters__reset:hover, .catalog-filters__reset:focus { color: var(--mili-ink); background: rgba(var(--mili-fg-rgb), 0.06); } /* ===== 5) 결과 없음 ===== */ .catalog-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) 카드 그리드 ===== ⚠️ 2차 재확인(커밋 58ce9b0 기준): grid gap-5 sm:grid-cols-2 xl:grid-cols-4 — 중간 3열 단계가 없다. 640px 에서 바로 2열, 1280px 에서 바로 4열로 뛴다. 컨테이너는 여전히 1180px(§1) 이라 4열일 때 카드 한 장이 ~280px 로 좁아지는데, 그래서 이번에 카드 내부 타이포·여백도 함께 줄었다(아래 §7 카드 본문 참고). */ .catalog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: 2rem; } @media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* * --accent 를 카드 최상위에 걸어 배너·레벨 글자색이 한 값을 같이 쓰게 한다. * * 배경은 캔버스 상대값(rgba(255,255,255,x))이 아니라 원시 팔레트의 고정 다크 톤을 쓴다. * home.css 의 .home-card 와 같은 전략 — 밝게/어둡게 토글해도 카드 내부(흰 글자·라임 배지)는 * 늘 다크 위에 있어야 읽힌다(토글은 캔버스·사이드바만 바꾸고 카드는 항상 다크로 둔다). */ /* 실측(참고 앱 .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으로 옮겼다. */ .catalog-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; } .catalog-card:hover, .catalog-card:focus-within { border-color: var(--mili-line-strong); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28); } /* * ⚠️ 2차 재확인: 참고 소스가 카드 배너를 "과정번호 순환 팔레트(sky/violet/coral)"에서 * "난이도별 그라디언트(basic/intermediate/advanced)"로 바꿨다 — [data-course-level] 로 * 선택하고 배경은 이미지 에셋(course-gradient-*.png)이지만 값은 globals.css 의 * --course-header 그라디언트 정의와 같다(해당 이미지를 우리 쪽에 옮길 이유는 없어 같은 그라디언트를 * CSS 로 재현한다). --accent 도 난이도별 값으로 바뀌었다(레벨 글자색). * 과정번호 순환이 아니라 **실제 난이도**로 골라야 하므로 클래스명도 --p0~7 대신 --basic/--intermediate/ * --advanced 로 바꾸고, JSP 에서 detail(card).levelNoEnd 기준으로 부여한다. */ .catalog-card--basic { --accent: #46d559; --banner: linear-gradient(112deg, #079879 0%, #b5e95c 100%); } .catalog-card--intermediate { --accent: #72b4ff; --banner: linear-gradient(112deg, #2458d8 0%, #559aff 100%); } .catalog-card--advanced { --accent: #ff996a; --banner: linear-gradient(112deg, #ee6b31 0%, #ed76bc 100%); } .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; } /* 실측: h-[80px] px-5, flex items-center justify-between. */ .catalog-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); } .catalog-card__bookmark-form { position: absolute; top: 0; left: 0; right: 0; height: 80px; z-index: 2; pointer-events: none; } /* 실측: size-10(40px) 원형, bg #111216, 아이콘 18px 흰색 — 아이콘만 떠 있는 게 아니라 자체로 하나의 뱃지다. 우측 수강인원 pill 과 같은 시각적 무게를 갖는다. */ .catalog-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; } .catalog-card__bookmark:hover { color: rgba(255, 255, 255, 0.8); } /* 실측: px-3 py-2(12px 8px) bg #111216 text-xs(12px) font-bold. */ .catalog-card__count-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; } .catalog-card__count-pill--done { background: var(--mili-success); } .catalog-card__count-pill--enrolled { background: rgba(var(--mili-brand-rgb), 0.9); color: #11170d; } .catalog-card__body { display: flex; flex-direction: column; gap: 0.75rem; flex: 1 1 auto; padding: 1.25rem 1.25rem 0.25rem; } /* ⚠️ 2차 재확인: 4열이 되며 카드 폭이 좁아진 만큼 실측값도 줄었다 — text-[15px] leading-[1.4] min-h-[44px](2줄 고정). 왼쪽 색 테두리는 참고에 없다(우리가 3색 시스템 도입하며 임의로 얹었던 장식이라 이미 걷어냄). */ .catalog-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; } /* ⚠️ 2차 재확인: text-xs(12px) leading-5(20px) min-h-10(40px, 2줄 고정) text-white/52. */ .catalog-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; } .catalog-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; } .catalog-card__tag { padding: 0.125rem 0.375rem; border-radius: 0; background: rgba(255, 255, 255, 0.06); color: #a6a6aa; font-size: 0.625rem; } .catalog-card__tag--new { background: rgba(var(--mili-brand-rgb), 0.12); color: var(--mili-brand); } /* ⚠️ 2차 재확인: text-xs(12px) space-y-2(8px) color #C8C8CB, 아이콘 15px white/45. */ .catalog-card__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: #c8c8cb; } .catalog-card__meta li { display: flex; align-items: center; gap: 0.5rem; } .catalog-card__meta i { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.45); } .catalog-card__level { color: var(--accent); font-weight: 700; } /* 실측: 버튼이 꽉 차지 않는다 — mt-auto flex justify-end 로 카드 우하단에 붙는다. */ .catalog-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem 1.25rem; } .catalog-card__footer form { display: flex; } /* ⚠️ 2차 재확인: border px-3(12px) py-1.5(6px) text-xs(12px) font-semibold, radius 는 여전히 0 (이 요소엔 rounded 클래스가 없고, 카드처럼 별도 예외 규칙도 없다). 기본은 라임 아웃라인, hover 는 꽉 채운다. */ .catalog-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; } .catalog-cta:hover, .catalog-cta:focus { background: var(--mili-brand); color: #11170d; } .catalog-cta--muted { border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.65); } .catalog-cta--muted:hover, .catalog-cta--muted:focus { background: rgba(255, 255, 255, 0.1); color: #fff; }