/*
 * 강좌 썸네일 대체 표시.
 * 등록된 썸네일이 없거나(대부분의 강좌가 해당) 파일을 못 찾는 경우,
 * 깨진 이미지 아이콘 대신 강좌명을 얹은 배경 블록을 보여준다.
 *
 * 실제 썸네일이 1280x720(16:9)이므로 같은 비율로 잡아 레이아웃이 흔들리지 않게 한다.
 */
/* 썸네일은 대개 <a> 안에 들어있고 <a> 는 기본이 inline 이라,
   그 안의 블록 요소는 폭/높이가 잡히지 않는다. JS 에서도 처리하지만 CSS 로도 보강한다. */
.single-course .thum .image a,
.course-details .thum a {
    display: block;
}

.course-thumb-fallback {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* aspect-ratio 미지원 브라우저까지 커버하는 16:9 비율 유지 기법 */
.course-thumb-fallback::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 720 / 1280 */
}

/* 강좌마다 다른 색이 나오도록 팔레트를 돌려 쓴다(강좌 ID 기준) */
.course-thumb-fallback.c0 { background: linear-gradient(135deg, #4a6fa5, #37527a); }
.course-thumb-fallback.c1 { background: linear-gradient(135deg, #4f8a76, #3a6659); }
.course-thumb-fallback.c2 { background: linear-gradient(135deg, #9a6b4f, #74503b); }
.course-thumb-fallback.c3 { background: linear-gradient(135deg, #6b5b95, #4f4370); }
.course-thumb-fallback.c4 { background: linear-gradient(135deg, #a55d5d, #7d4646); }
.course-thumb-fallback.c5 { background: linear-gradient(135deg, #4a7f97, #375f71); }

/* 바깥은 중앙정렬만 담당 */
.course-thumb-fallback .txt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    box-sizing: border-box;
}

/* 안쪽에서 글자 스타일과 줄임을 처리한다
   (중앙정렬용 flex 와 줄임용 -webkit-box 는 같은 요소에 함께 쓸 수 없어 분리) */
.course-thumb-fallback .txt > span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    word-break: keep-all;
}

/* 이미지와 동일하게 hover 확대 효과를 준다 */
.single-course:hover .thum .image .course-thumb-fallback {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}