/*--------------------------------------------카드모양 영상*/
/* Custom CSS */
.video-card {
    border: none; /* 카드 테두리 제거 (선택 사항) */
    background-color: transparent;
    color: #ffffff;
}
/*
// 원래 hover 이벤트
.video-card:hover {
    transition: 0.25s ease-out;
    transform: scale(1.025);
    z-index: 1080;
    background-color: #272727;
}

.video-card-horizontal:hover {
    transition: 0.25s ease-out;
    transform: scale(1.025);
    z-index: 1080;
    background-color: #272727;
}*/
.video-card .position-relative {
    position: relative;
    overflow: hidden; /* iframe이 넘치지 않도록 숨김 */
}

.video-card .hover-iframe {
    pointer-events: none; /*이벤트를 없애 썸네일 클릭시 비디오 화면으로*/
    position: absolute; /* 부모 요소를 기준으로 절대 위치 지정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 평소에는 투명하게 설정 */
    transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
    z-index: 2; /* 섬네일 위에 올라오도록 설정 */
    border: none;
}

.video-card .position-relative:hover .hover-iframe {
    opacity: 1; /* 마우스 오버 시 iframe을 보이게 함 */
}
.video-card-horizontal .position-relative {
    position: relative;
    overflow: hidden; /* iframe이 넘치지 않도록 숨김 */
}

.video-card-horizontal .hover-iframe {
    pointer-events: none; /*이벤트를 없애 썸네일 클릭시 비디오 화면으로*/
    position: absolute; /* 부모 요소를 기준으로 절대 위치 지정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 평소에는 투명하게 설정 */
    transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
    z-index: 2; /* 섬네일 위에 올라오도록 설정 */
    border: none;
}

.video-card-horizontal .position-relative:hover .hover-iframe {
    opacity: 1; /* 마우스 오버 시 iframe을 보이게 함 */
}

.channel-profile-pic {
    width: 36px;
    height: 36px;
    object-fit: cover; /* 이미지 비율 유지 */
}

.video-card .card-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-text {
    color: gray;
}

.channel-name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-height: 1.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card .channel-name,
.video-card .video-meta {
    font-size: 0.85rem;
}

.dropdown-toggle::after {
    display: none; /* Bootstrap 기본 드롭다운 화살표 제거 */
}


/*--------------------------------horizontal style*/
.video-card-horizontal {
    min-width: 320px;
}

/* 제목 2줄 말줄임표 처리 */
.video-card-horizontal h6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2줄까지만 표시하고 넘치면 ... */
    overflow: hidden;
    text-overflow: ellipsis; /* IE 및 Edge를 위한 대체 */
    word-break: break-all; /* 단어가 길어서 넘치는 경우 강제 줄 바꿈 */
}

.video-card-horizontal .flex-grow-1 {
    white-space: nowrap; /* 텍스트를 한 줄로 강제 */
    overflow: hidden;
}