/* 폰트 불러오기 */



@font-face {
    font-family: 'gang_b';
    src: url('/thema/Basic/font/NanumGothicBold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* 기본 스타일 */
body, .section-container, .section-header, .section-list, .ranked-list {
    font-family: 'gang_b', sans-serif;
}

/* 섹션 스타일 */
.section-container {
    width: 100%;
    margin: 20px auto;
    padding: 0 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    border-radius: 2px;
    overflow: hidden;
    background-color: #fff;
}

/* 헤더 스타일 */
.section-header {
    background-color: #fff;
    padding: 15px 10px;
    font-size: 1.7em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    box-sizing: border-box;
}

.section-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ddd;
}

/* 리스트 스타일 */
.ranked-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* 리스트 아이템 스타일 */
.ranked-list li {
    padding: 1 !important;
    margin: 10px 0 !important;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    gap: 2px;
    letter-spacing: 0.5px;
    line-height: 1.8;
}

/* 랭킹 아이콘 스타일 */
.ranking-icon {
    width: 24px;
    height: 24px;
    margin: 0 5px 0 2px;
    object-fit: contain;
}

/* 타이틀 아이콘 스타일 */
.title-icon {
    width: 32px;
    height: 32px;
    margin-right: 2px;
    vertical-align: middle;
}

/* 순위 색상 스타일 */
.ranked-list li:nth-child(1) a { color: #FF1493; font-weight: bold; }
.ranked-list li:nth-child(2) a { color: #006400; font-weight: bold; }
.ranked-list li:nth-child(3) a { color: #1E90FF; font-weight: bold; }
.ranked-list li:nth-child(4) a { color: #FF4500; font-weight: bold; }
.ranked-list li:nth-child(5) a { color: #8A2BE2; font-weight: bold; }

/* 배너 및 그리드 컨테이너 스타일 */
.custom-container, .webtoon-widget-container, .grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
}

/* 그리드 컨테이너 스타일 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    max-width: 1200px;
    margin: 0 auto; /* 상단 마진을 제거 */
    padding-top: 0px; /* 추가적인 상단 여백이 있는 경우 제거 */
}

/* 섹션 컨테이너 */
.section-container {
    margin-top: 5px; /* 상단 마진 최소화 */
    padding: 0 10px;
}

/* 애니메이션 효과 */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shimmerEffect {
    0%, 100% {
        opacity: 1;
        text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.3);
    }
    50% {
        opacity: 0.85;
        text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.7);
    }
}

.bet-highlight {
    font-weight: 900;
    background: linear-gradient(90deg, #FF1493, #8A2BE2, #1E90FF, #FF4500, #00008B, #9932CC, #FF1493, #8B0000, #006400, #483D8B, #2F4F4F);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 3s ease-in-out infinite, shimmerEffect 1.5s ease-in-out infinite;
    text-decoration: none;
}

/* 순위별 시간차 애니메이션 시작 */
.bet-list li:nth-child(1) .bet-highlight { animation-delay: 0s; }
.bet-list li:nth-child(2) .bet-highlight { animation-delay: 0.2s; }
.bet-list li:nth-child(3) .bet-highlight { animation-delay: 0.4s; }
.bet-list li:nth-child(4) .bet-highlight { animation-delay: 0.6s; }
.bet-list li:nth-child(5) .bet-highlight { animation-delay: 0.8s; }
.bet-list li:nth-child(6) .bet-highlight { animation-delay: 1s; }
.bet-list li:nth-child(7) .bet-highlight { animation-delay: 1.2s; }
.bet-list li:nth-child(8) .bet-highlight { animation-delay: 1.4s; }
.bet-list li:nth-child(9) .bet-highlight { animation-delay: 1.6s; }
.bet-list li:nth-child(10) .bet-highlight { animation-delay: 1.8s; }