/* 강의 카드·분야 탭 공통 규칙. 메인(P01)과 목록(P03·P04)이 함께 쓴다. home.css에서 옮김. */
.course-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 24px; }
.course-card { min-width:0; }
.course-card>a { display:block; color:inherit; }
.course-art {
    position:relative; aspect-ratio:500 / 436; overflow:hidden; border-radius:var(--radius);
    padding:24px; color:#fff; isolation:isolate; background:#384b9c;
}
.course-art:after {
    content:''; position:absolute; width:180px; height:180px; border:1px solid #ffffff38;
    border-radius:50%; right:-50px; bottom:-80px; z-index:-1;
}
/* DB 썸네일: 기존 사이트 이미지(운영 도메인)를 같은 비율로 채운다. 이미지가 없으면 회색 칸. */
.course-art.course-thumb { padding:0; background:#eef0f3; } /* 모바일 .course-art 여백보다 앞서도록 두 클래스로 쓴다 */
.course-thumb>img { width:100%; height:100%; object-fit:cover; }
.course-thumb:after { content:none; }
.course-art--marketing { background:#384996; }
.course-art--ads { background:#2b6655; }
.course-art--data { background:#d9e6ff; color:#283c73; }
.course-art--content { background:#ffe1ce; color:#713d2a; }
.art-eyebrow { font-size:9px; letter-spacing:1px; opacity:.8; }
.course-art>strong { display:block; margin-top:12px; font-size:22px; line-height:1.35; letter-spacing:-.6px; position:relative; z-index:1; }
.art-graphic { width:120px; height:75px; position:absolute; right:16px; bottom:15px; opacity:.3; }
.art-graphic rect { fill:currentColor; }
.course-info { padding-top:16px; }
.course-label { color:#707070; font-size:12px; margin-bottom:5px; }
.course-info h3 { font-size:17px; letter-spacing:-.35px; font-weight:600; }
.course-price { display:flex; flex-direction:column; align-items:flex-end; margin-top:12px; }
.course-price del { font-size:13px; color:#767676; }
.course-price strong { font-size:22px; color:var(--color-price); font-weight:700; }
.course-price small { font-size:16px; font-weight:550; margin-left:1px; }
.category-buttons { display:flex; margin:22px 0 30px; border-bottom:1px solid #ddd; gap:36px; }
.category-buttons button { flex-shrink:0; background:none; padding:13px 2px; white-space:nowrap; border-bottom:3px solid transparent; color:#666; font-size:16px; }
.category-buttons button[aria-pressed=true] { color:#b8481b; border-bottom-color:var(--color-brand); font-weight:700; }
.scroll-hint { display:none; }
.empty-message { grid-column:1/-1; text-align:center; color:#707070; padding:60px 20px; font-size:14px; }
@media(max-width:1023px) {
    .course-grid { gap:28px 18px; }
    .course-art { padding:16px; }
    .course-art>strong { font-size:18px; }
    .art-eyebrow { font-size:8px; letter-spacing:.2px; }
    .art-graphic { width:85px; height:50px; bottom:12px; right:12px; }
    .course-info h3 { font-size:16px; }
    .category-buttons { gap:28px; }
}
@media(min-width:768px) and (max-width:900px) {
    /* 좁은 4열에서는 제목과 겹칠 수 있는 썸네일 장식만 생략한다. */
    .art-graphic { display:none; }
}
@media(max-width:767px) {
    .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; }
    .course-art { padding:16px; }
    .course-art>strong { font-size:18px; margin-top:9px; }
    .art-eyebrow { font-size:7px; }
    .art-graphic { width:70px; height:40px; bottom:10px; right:10px; }
    .course-info { padding-top:12px; }
    .course-info h3 { font-size:15px; }
    .course-price { margin-top:9px; }
    .course-price del { font-size:11px; }
    .course-price strong { font-size:20px; }
    .course-price small { font-size:14px; }
    .scroll-hint { display:block; font-size:11px; color:#707070; margin-top:12px; }
    .category-buttons { overflow-x:auto; gap:24px; margin:6px 0 24px; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
    .category-buttons::-webkit-scrollbar { display:none; }
    .category-buttons button { font-size:14px; padding-block:12px; scroll-snap-align:start; }
}
@media(max-width:374px) {
    .course-art { padding:13px; }
    .course-art>strong { font-size:16px; }
    .art-graphic { width:60px; height:33px; }
}

/* 쪽 번호: 검색(P05)·후기 목록(P26) 공통. search.css에서 옮김. */
.pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:40px; }
.pagination a { min-width:36px; height:36px; padding:0 6px; border:1px solid #ddd; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#555; font-size:14px; }
.pagination a[aria-current="page"] { border-color:#222; background:#222; color:#fff; font-weight:600; }