@charset "utf-8";

/* ====== 기본 ====== */
/* 여기 아래는 형이 기존에 쓰던 스타일이 있으면 그대로 두고,
   맨 아래에 "영상 카드 효과"만 추가해도 되는데,
   지금은 통으로 붙여도 되는 최소 구성으로 제공함 */

.pro_zoom{
    position:relative;
    overflow:hidden;
}

/* 이미지 꽉차게 */
.pro_zoom .imgs img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ====== 영상 카드 효과 (유튜브일 때만 span이 생김) ====== */

/* 어두운 오버레이 */
.youtube_overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.35);
    opacity:0;
    transition:0.3s ease;
    pointer-events:none;
}

/* 재생 아이콘 */
.youtube_icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0.8);
    opacity:0;
    transition:0.3s ease;
    pointer-events:none;
}

.youtube_icon img{
    width:70px;
    height:auto;
    opacity:0.95;
}

/* hover 효과 */
.plist:hover .youtube_overlay{
    opacity:1;
}

.plist:hover .youtube_icon{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

/* 선택: 둥둥 펄스 애니메이션 (원하면 주석 해제) */
/*
@keyframes pulsePlay{
    0%   { transform:translate(-50%,-50%) scale(1); }
    50%  { transform:translate(-50%,-50%) scale(1.08); }
    100% { transform:translate(-50%,-50%) scale(1); }
}
.plist:hover .youtube_icon{
    animation:pulsePlay 1s infinite;
}
*/