@charset "utf-8";

/* [높이 균형 최적화] 하이브리드 미디어 좌우 밸런스 엔진 */
.youtube-hero-dynamic-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.youtube-hero-dynamic-card .hero-fixed-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* 우측 5개 아이템 세로폭 합산에 맞춰 내용 영역 유연 대응 */
.hero-card-body-spec {
    flex-grow: 1;
}

/* 슬라이드 오버 서랍 본체 */
.news-drawer-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: none;
}

.news-drawer-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-drawer-content {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 480px;
    height: 100%;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-drawer-container.active {
    display: block;
}

.news-drawer-container.active .news-drawer-overlay {
    opacity: 1;
}

.news-drawer-container.active .news-drawer-content {
    right: 0;
}

.spec-drawer-img {
    aspect-ratio: 16/10;
    object-fit: cover;
    max-height: 240px;
}

/* 유튜브 닫기 버튼 래퍼 - 우측 정렬 강제 고정 */
.news-video-close-btn-wrapper {
    position: absolute;
    top: -45px;
    right: 0;
    z-index: 1060;
}

.news-video-close-btn-wrapper button {
    font-size: 10pt;
    transition: all 0.2s ease-in-out;
}

.news-video-close-btn-wrapper button:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: #111111 !important;
    transform: translateY(-1px);
}

/* 텍스트 줄임 보조 클래스 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

#drawer-news-summary {
    font-size: 11pt;
}

/* 하단 5선 카드 전용 호버 효과 */
.youtube-grid-card-item {
    transition: transform 0.2s;
}
.youtube-grid-card-item:hover {
    transform: translateY(-4px);
}