/* ==========================================================
   1. [공통] 뱃지 및 지표 레이아웃 (리스트 & 모달 공통)
   ========================================================== */
.badge-yt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.95rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.2s ease, filter 0.2s;
    cursor: pointer;
    border: none !important;
    line-height: 1.5;
    min-width: 95px; /* 뱃지 크기 고정 */
    height: 30px;
    font-weight: 800;
}

.badge-yt:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* --- 누적 조회수 등급별 배경 (리스트용) --- */
.badge-10m {
    background: linear-gradient(45deg, #ffffff, #00d2ff, #3a7bd5, #ffffff) !important;
    background-size: 300% 300% !important;
    color: #003366 !important;
    animation: master-shine 1.5s infinite linear;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

.badge-5m {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
    color: #4b2c00 !important;
    box-shadow: 0 0 10px rgba(191, 149, 63, 0.4);
}

.badge-1m {
    background: linear-gradient(135deg, #00dbde 0%, #fc00ff 100%) !important;
    color: white !important;
    animation: million-glow 2s infinite linear;
}

.badge-100k { background: #ff4d4d !important; color: white !important; }
.badge-50k  { background: #ff9800 !important; color: white !important; }
.badge-10k  { background: #00bcd4 !important; color: white !important; }
.badge-under-10k { background: #2196f3 !important; color: white !important; }

/* ==========================================================
   2. [실시간] 네온 애니메이션 (1H, 2D 지표 및 모달용)
   ========================================================== */
@keyframes neon-pulse-red {
    0% { text-shadow: 0 0 5px #ff4d4d; opacity: 1; }
    50% { text-shadow: 0 0 15px #ff4d4d, 0 0 25px #ff0000; opacity: 0.8; }
    100% { text-shadow: 0 0 5px #ff4d4d; opacity: 1; }
}

@keyframes neon-pulse-magenta {
    0% { text-shadow: 0 0 8px #ff00ff; opacity: 1; }
    50% { text-shadow: 0 0 20px #ff00ff, 0 0 30px #d400d4; opacity: 0.7; }
    100% { text-shadow: 0 0 8px #ff00ff; opacity: 1; }
}

/* 텍스트 전용 네온 클래스 */
.ani-neon-red { animation: neon-pulse-red 1.2s infinite ease-in-out; }
.ani-neon-magenta { animation: neon-pulse-magenta 1s infinite ease-in-out; }

/* ==========================================================
   3. [모달] 차트 및 테이블 스타일
   ========================================================== */
.chart-container {
    position: relative;
    height: 200px;
    margin-bottom: 20px;
}

#viewStatTable tbody td {
    padding: 10px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.font-mono {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
}

/* 기타 특수 효과 */
@keyframes master-shine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes million-glow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
/* 1. 썸네일 틀 (9:16 쇼츠 비율로 꽉 차게) */
.thumb-wrapper {
    width: 100px;           /* 💡 칸에 꽉 차게 너비를 살짝 키웠습니다. */
    aspect-ratio: 9 / 16;   /* 유튜브 쇼츠 비율 유지 */
    border-radius: 8px;     /* 테두리 둥글게 */
    overflow: hidden;       /* 이미지가 틀 밖으로 안 나가게 */
    background: #1a1a1a;    /* 로딩 전 배경색 */
    border: 2px solid #444; /* 얇은 테두리 */
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;         /* 틀어짐 방지 */
    margin: 5px 0;          /* 위아래 약간의 간격 */
}
/* 2. 썸네일 이미지 (여백 없이 꽉 채우기) */
.thumb-img {
    width: 100% !important;  /* 가로 꽉 차게 */
    height: 100% !important; /* 세로 꽉 차게 */
    object-fit: cover;       /* 💡 비율 유지하면서 여백 없이 채움 */
    object-position: center; /* 가운데 기준 */
    display: block;
    transition: transform 0.3s ease;
}

/* 3. 호버 효과 */
.thumb-wrapper:hover {
    border-color: #00bcd4;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.6);
    cursor: pointer;
}

.thumb-wrapper:hover .thumb-img {
    transform: scale(1.1);
}

/* 4. 빈 썸네일 (아이콘) - 여기서 aspect-ratio 16/9 지웠습니다! */
.thumb-empty {
    background: #222;
    color: #555;
    font-size: 1.5rem;
    aspect-ratio:16 / 9;
}

/* 5. 담당자 ID 배지 (가독성 보강) */
.badge.bg-light.text-dark {
    color: #000 !important;
    font-weight: 800 !important;
    border: 2px solid #00bcd4 !important;
    padding: 5px 10px;
    display: inline-block;
}

/* 6. 테이블 중앙 정렬 */
.table td {
    vertical-align: middle !important;
}

/* 기본 제목 스타일 (크게) */
.video-title-main {
    font-size: 1.1rem;         /* 💡 글씨 크기 대폭 확대 */
    font-weight: 700;
    line-height: 1.4;
    max-width: 400px;          /* 가로 폭 넉넉히 */
    display: -webkit-box;
    -webkit-line-clamp: 2;     /* 💡 2줄까지 보여주고 말줄임 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 5px 0;
    transition: all 0.3s;
}

/* --- 조회수별 등급 색상 --- */

/* 1. 일반 (회색) */
.title-normal { color: #bbb; }

/* 2. 1만회 이상 (하늘색) */
.title-10k {
    color: #00bcd4;
    text-shadow: 0 0 5px rgba(0, 188, 212, 0.3);
}

/* 3. 5만회 이상 (주황색) */
.title-50k {
    color: #ff9800;
    text-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
}

/* 4. 10만회 이상 (🔥 대박 영상: 빨강 네온) */
.title-100k {
    color: #ff4d4d !important;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.6), 0 0 20px rgba(255, 0, 0, 0.3);
    animation: title-glow 1.5s infinite ease-in-out;
}

@keyframes title-glow {
    0% { opacity: 1; }
    50% { opacity: 0.8; transform: scale(1.01); }
    100% { opacity: 1; }
}