@charset "utf-8";

/* 메인 비주얼 배너 백그라운드 이미지 및 어두운 오버레이 레이어 배합 */
.hero-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)), 
                url('/res/img/mainimg/mainimg2.jpg') center/cover no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

/* 텍스트 생략 유틸리티 클래스 */
.main-title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* ★ [신설] 동영상 제목 최대 2줄 제한 및 말줄임(...) 처리 전용 클래스 */
.main-title-2line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em; /* 폰트 사이즈 대비 2줄 높이 고정 */
}

/* ==================== 최신 뉴스 썸네일 - 우측 텍스트 높이 100% 완전 동기화 ==================== */
.main-news-thumb-wrapper {
    width: 110px;
    align-self: stretch;
}

.main-news-thumb-img {
    width: 100%;
    height: 100%;
    min-height: 85px;
    object-fit: cover;
    display: block;
}

/* 하단 유튜브 추천 영상 카드 호버 액션 효과 */
.main-youtube-card-item {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s;
}

.main-youtube-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* 재생 플레이어 모달 전용 닫기 알약 버튼 배치 */
.main-close-pill-wrapper {
    position: absolute;
    top: -45px;
    right: 0;
    z-index: 1060;
}

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

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

.cursor-pointer {
    cursor: pointer;
}

.opacity-85 {
    opacity: 0.85;
}

.fs-9 {
    font-size: 7.5pt !important;
}

/* 실시간 인기 브랜드 로고 카드 전용 스타일 */
.brand-logo-card {
    min-height: 85px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.brand-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--bs-primary) !important;
}

.brand-logo-img {
    transition: filter 0.2s ease-in-out;
}

/* ==================== ★ 다크모드 브랜드 로고 가시성 보정 ==================== */
/* 1. 기본/다크모드 공통: 로고 뒤에 은은한 흰색 발광(Drop Shadow)을 주어 원본 색상 유지하면서도 묻힘 방지 */
[data-bs-theme="dark"] .brand-logo-img {
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0px 1px 3px rgba(255, 255, 255, 0.4));
}

/* 2. 만약 어두운 단색 로고(SVG/PNG)가 반전되어 밝게 보이길 원할 경우 활성화
   (검은색 텍스트/엠블럼 로고가 다크모드에서 흰색으로 자동 전환됩니다) */
[data-bs-theme="dark"] .brand-logo-card:hover .brand-logo-img {
    filter: brightness(0) invert(1) drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
}