/* ============================================================================
 * 대상 : KTDI미디어(게시판35, BBSS002 갤러리 스킨) — 유튜브 영상 카드
 * 변경 : 갤러리 카드 위 재생(play) 아이콘 오버레이 + 영상 카드 hover 강조.
 *        list.html 의 후처리 JS 가 유튜브 썸네일 카드에 .gallery_card_media / .play 를 단다.
 * 이유 : 미디어는 썸네일 클릭→유튜브 새창이라 '영상임'을 시각적으로 표시(시안 .media_list .play).
 * 주의 : 시안 원본 gallery.css 는 수정하지 않는다. 여기서 보완만.
 * 최초 : 2026-08-10
 * ==========================================================================*/

/* 재생 아이콘 오버레이 — 썸네일 중앙 */
.gallery_card .thumb { position: relative; }
.gallery_card_media .thumb .play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 3.375rem; height: 3.375rem; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff;
    transition: background .2s, transform .2s;
    pointer-events: none;
}
.gallery_card_media .thumb .play .material-symbols-outlined {
    font-size: 2rem; line-height: 1;
}
.gallery_card_media:hover .thumb .play {
    background: #344dcf;
    transform: translate(-50%, -50%) scale(1.08);
}
/* 영상 카드 썸네일은 16:9 가 자연스럽다(유튜브 hqdefault). 잘림 방지 cover */
.gallery_card_media .thumb img { object-fit: cover; }
/* 쇼츠(세로영상) 썸네일 — 잘라 채우지 않고 칸 높이에 맞춰 줄여 담는다(2026-10-12 발주처 #4).
   cover 로 채우면 세로 이미지의 위아래가 잘려 글자·인물이 빠졌다. .is_vertical 은 media.js 가 단다.
   🔴 세로 원본(oardefault 720×1280)은 영상 자체에 위아래 검은 띠가 박혀 있다(실측 13개 전부 190px씩 —
   실제 내용은 4:5). contain 만 하면 띠까지 담겨 가늘고 검게 보여서, 띠 높이만큼 크게 그린 뒤
   칸 밖으로 넘겨 잘라낸다: 높이 = 1280/900 = 142.2%, 가운데 정렬. 좌우 남는 칸은 바탕색.
   (정사이즈 9:16 쇼츠가 오면 위아래 약 15%가 잘린다 — 내용 잘림보다 띠 노출이 더 눈에 띄어 이쪽을 택함)
*/
.gallery_card_media .thumb:has(img.is_vertical) { background: #e9ecf2; }
.gallery_card_media .thumb img.is_vertical,
.gallery_card_media:hover .thumb img.is_vertical {
    position: absolute; top: 50%; left: 50%;
    width: auto; height: 142.2%; max-width: none;
    object-fit: fill; transform: translate(-50%, -50%);
}