/* ========================================
   강의 표지(그림 파일이 아직 없는 과정용, 2026-10-04) - 홈 강의 카드·과정 소개 히어로·다른 강의 카드
   ChatGPT 기초 활용법: 영상 테마(미색 + 코발트 모눈, 라임 형광펜)와 학습실 마스코트(코발트 CRT)로 그린다.
   크기는 감싼 상자 너비에 맞춰 cqw 로 비례(카드·히어로 어디에 넣어도 같은 모양).
   탈출구: 실제 표지 그림(webp)이 생기면 <img class="hr-course-thumb"> 로 바꾸고 이 파일은 지운다.
======================================== */
.kai-cover {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    container-type: inline-size;
    background-color: #f6f3e6;
    background-image:
        linear-gradient(rgba(47, 57, 181, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 57, 181, .12) 1px, transparent 1px);
    background-size: 4.5cqw 4.5cqw;
    background-position: -1px -1px;
}
.kai-cover::before { /* 종이 테이프 */
    content: ''; position: absolute; top: 3.5cqw; right: 33cqw; width: 15cqw; height: 4cqw;
    background: rgba(200, 224, 58, .7); transform: rotate(-6deg); border-radius: .4cqw;
}
.kai-cover-tag {
    position: absolute; left: 7cqw; top: 8cqw;
    padding: .9cqw 2cqw; border-radius: 99px; background: #1d2470; color: #fff;
    font-size: 2.7cqw; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
}
.kai-cover-title {
    position: absolute; left: 7cqw; top: 16cqw;
    color: #1d2470; font-size: 8.4cqw; font-weight: 900; line-height: 1.1; letter-spacing: -.04em;
}
.kai-cover-mark { /* 라임 형광펜 */
    position: absolute; left: 7cqw; top: 37.5cqw; width: 25cqw; height: 2.2cqw; border-radius: 1cqw;
    background: #c8e03a;
}
.kai-cover-meta { position: absolute; left: 7cqw; top: 42.5cqw; color: #1d2470; font-size: 3.6cqw; font-weight: 800; letter-spacing: -.02em; }
.kai-cover-mascot { position: absolute; right: 4cqw; bottom: 3cqw; width: 39cqw; height: auto; }
@media (prefers-reduced-motion: no-preference) {
    .kai-cover-mascot { animation: kai-cover-float 3.2s ease-in-out infinite; }
    @keyframes kai-cover-float { 50% { transform: translateY(-1.2cqw); } }
}