/* ==========================================
    1. 테마 변수
    ========================================== */
:root {
    --bg-body: #f1f3f5;
    --bg-bento: #ffffff;
    --text-main: #212529;
    --text-sub: #495057;
    --accent: #3b5bdb;
    --border: #dee2e6;
    --rank-bg: #f8f9fa;
    --site-bar: #e9ecef;
    --feature-bg: #ffffff; 
}

[data-theme="dark"] {
    --bg-body: #212529; 
    --bg-bento: #2b3035;
    --text-main: #f8f9fa;
    --text-sub: #ced4da;
    --accent: #748ffc;
    --border: #495057;
    --rank-bg: #212529;
    --site-bar: #343a40;
    --feature-bg: #2b3035; 
}

* { 
    box-sizing: border-box; 
    font-family: 'Pretendard', sans-serif; 
    transition: background 0.3s, color 0.3s; 
}

body { 
    background-color: var(--bg-body); 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh; 
}

/* ==========================================
    2. 플로팅 헤더
    ========================================== */
.header-wrapper {
    width: 960px;
    margin-top: 24px;
    display: flex;
    gap: 16px; 
    align-items: center; 
}

.logo-box {
    width: auto;
    background: transparent; 
    border: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; 
}

.header-logo-img {
    width: 64px; 
    height: auto; 
    object-fit: contain; 
}

.floating-header {
    flex-grow: 1; 
    background: var(--bg-bento);
    padding: 12px 24px; 
    border-radius: 40px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05); 
    border: 0.8px solid var(--border);
}

.header-text-area { 
    display: flex; 
    align-items: center; 
}

.logo-text {
    margin: 0;
    padding: 0;
    font-size: 17.6px;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.4px;
    line-height: 1;
}

.controls { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

.time-badge { 
    font-weight: 700; 
    color: var(--text-sub); 
    font-size: 11.2px; 
    letter-spacing: 0.4px; 
}

.theme-btn {
    background: var(--accent); 
    color: #fff; 
    border: none; 
    padding: 6.4px 12.8px; 
    border-radius: 16px; 
    font-weight: 700; 
    cursor: pointer; 
    display: flex; 
    gap: 4px;
}

/* ==========================================
    3. 벤토 그리드 레이아웃
    ========================================== */
.bento-container {
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto; 
    gap: 16px;
    width: 960px; 
    margin: 24px 0 48px 0;
}

.bento-item {
    background: var(--bg-bento); 
    border-radius: 19.2px; 
    border: 0.8px solid var(--border);
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02); 
    transition: transform 0.2s, border-color 0.2s;
}

.bento-item:hover {
    transform: translateY(-3.2px);
    border-color: #748ffc; 
    box-shadow: 0 0 0 2.4px #748ffc;
}

/* 다크모드 */
[data-theme="dark"] .bento-item:hover {
    border-color: #748ffc;
    box-shadow: 0 0 0 2.4px #748ffc;
}

.item-hero1   { grid-column: 1; grid-row: 1 / span 2; }
.item-hero2   { grid-column: 2; grid-row: 1 / span 2; }
.item-n1      { grid-column: 3; grid-row: 1 / span 2; }
.item-rank    { grid-column: 4; grid-row: 1 / span 2; } 
.item-slider  { grid-column: 1; grid-row: 3 / span 3; }          
.item-n3      { grid-column: 2; grid-row: 3; }
.item-n4      { grid-column: 3; grid-row: 3; }
.item-n5      { grid-column: 4; grid-row: 3; }
.item-n6      { grid-column: 2; grid-row: 4; }
.item-n7      { grid-column: 3; grid-row: 4; }
.item-n8      { grid-column: 4; grid-row: 4; }
.item-n9      { grid-column: 2; grid-row: 5; }
.item-n10     { grid-column: 3; grid-row: 5; }
.item-n11     { grid-column: 4; grid-row: 5; }

/* PC/Mobile 표시 토글 클래스 */
.pc-hide { display: none; }

/* ==========================================
    4. 카드 내부 콘텐츠 공통 요소
    ========================================== */
.site-name-bar {
    height: 48px; 
    flex-shrink: 0; 
    background-color: transparent;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 6.4px; 
    padding: 0; 
    font-size: 15.6px;
    font-weight: 900; 
    color: var(--text-main); 
    border-bottom: none;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    position: relative;
}

.neon-bar {
    background: linear-gradient(90deg, var(--text-main) 0%, #ff6b6b 25%, #cc5de8 50%, #339af0 75%, var(--text-main) 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: neonWave 4.5s linear infinite;
    animation-delay: calc((var(--animation-order) - 1) * 1.5s);
}

@keyframes neonWave {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.bento-content { 
    display: flex; 
    flex-direction: row; 
    flex: 1; 
    width: 100%; 
    min-height: 0; 
}

.img-wrapper { 
    padding: 9.6px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 0; 
}

.bento-img { 
    background-color: transparent; 
    background-repeat: no-repeat; 
    border-radius: 16px; 
    overflow: hidden; 
}

.feature-box {
    background: var(--feature-bg);
    padding: 12px; 
    font-size: 10.4px; 
    font-weight: 700;
    display: flex; 
    flex-direction: column; 
    justify-content: space-evenly; 
    align-items: flex-start; 
    text-align: left; 
    letter-spacing: -0.2px; 
    word-break: break-all; 
}

.feature-box span {
    display: block; 
    width: 100%; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
    line-height: 1.2; 
}

.relative-wrapper {
    position: relative;
}

.site-title {
    font-size: 15.6px;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 6.4px; 
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================
    5. 배너별 개별 관리 영역
    ========================================== */
.item-hero1 .bento-content, 
.item-hero2 .bento-content, 
.item-n1 .bento-content,
.item-slider .bento-content {
    flex-direction: column;
    display: flex;
}

.item-hero1 .img-wrapper, 
.item-hero2 .img-wrapper, 
.item-n1 .img-wrapper,
.item-slider .img-wrapper { 
    display: block; 
    width: 100%; 
    padding: 9.6px 9.6px 4px 9.6px;
}

.item-hero1 .bento-img, 
.item-hero2 .bento-img, 
.item-n1 .bento-img,
.item-slider .bento-img {
    width: calc(100% - 19.2px); 
    height: auto; 
    aspect-ratio: 1 / 1 !important; 
    margin: 0 auto; 
    background-size: cover; 
    background-position: center;
    border-radius: 16px; 
}

.item-hero1 .feature-box, 
.item-hero2 .feature-box, 
.item-n1 .feature-box,
.item-slider .feature-box { 
    width: 100%; 
    padding: 0; 
    padding-bottom: calc(45% + 18.7px); 
    position: relative;
    background: transparent;
}

.hero-feature-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    padding: 0 8px;
}

.inner-text-box {
    display: inline-flex; 
    flex-direction: column;
    align-items: flex-start; 
    gap: 9.6px;
    max-width: 100%;
}

.inner-text-box span {
    text-align: left;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* TOP 10 슬라이드 배너 관리 */
.item-rank .bento-content {
    flex-direction: column;
    display: flex;
}

.item-rank .img-wrapper { 
    flex: 1; 
    width: 100%; 
    padding: 9.6px 9.6px 4px 9.6px;
}

.item-rank .bento-img {
    width: calc(100% - 19.2px); 
    height: auto; 
    aspect-ratio: 1 / 1.45 !important; 
    margin: 0 auto; 
    background-size: cover; 
    background-position: center;
    border-radius: 16px; 
}

.item-rank .feature-box { 
    flex: 0 0 36px !important; 
    width: 100%; 
    flex-direction: row; 
    justify-content: center;
    align-items: center; 
    text-align: center; 
    padding: 0 8px;
    background: transparent;
}

.hero-feature { 
    font-size: 12px; 
    font-weight: 900; 
}

.hero-feature span {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 하단 작은 배너들 */
.item-n3 .img-wrapper, 
.item-n4 .img-wrapper, 
.item-n5 .img-wrapper, 
.item-n6 .img-wrapper, 
.item-n7 .img-wrapper, 
.item-n8 .img-wrapper,
.item-n9 .img-wrapper,
.item-n10 .img-wrapper,
.item-n11 .img-wrapper { 
    width: 45%; 
}

.item-n3 .feature-box, 
.item-n4 .feature-box, 
.item-n5 .feature-box, 
.item-n6 .feature-box, 
.item-n7 .feature-box, 
.item-n8 .feature-box,
.item-n9 .feature-box,
.item-n10 .feature-box,
.item-n11 .feature-box { 
    width: 55%; 
    padding: 12px; 
    justify-content: center;
    gap: 4.8px;
}

.item-n3 .bento-img, 
.item-n4 .bento-img, 
.item-n5 .bento-img, 
.item-n6 .bento-img, 
.item-n7 .bento-img, 
.item-n8 .bento-img,
.item-n9 .bento-img,
.item-n10 .bento-img,
.item-n11 .bento-img {
    width: 100%; 
    height: auto; 
    aspect-ratio: 1 / 1; 
    background-size: contain; 
    background-position: left center;
}

/* ==========================================
    6. 슬라이더 공통 
    ========================================== */
.slider-wrapper { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    overflow: hidden; 
    cursor: grab; 
    background: var(--bg-bento); 
}

.slider-wrapper:active { 
    cursor: grabbing; 
}

.slider-track { 
    display: flex; 
    height: 100%; 
    width: 100%; 
}

.slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* ==========================================
    7. 모바일 전용 반응형 (원본 1.css의 크기 값으로 복원)
    ========================================== */
@media (max-width: 614.4px) {
    /* PC전용 요소 숨기기, 모바일전용 표시 */
    .mobile-hide { display: none !important; }
    .pc-hide { display: block !important; }

    .header-wrapper, 
    .bento-container { 
        width: 90%; 
    }

    .header-wrapper {
        margin-top: 10px !important;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* 플로팅 헤더 크기 및 패딩 원본(1.css) 수준 복원 */
    .floating-header { 
        flex-direction: column; 
        border-radius: 20px; 
        gap: 15px; 
        width: 100%;
        padding: 15px 30px;
    }

    .header-logo-img {
        width: 80px;
    }

    .logo-text {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .time-badge {
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .theme-btn {
        padding: 8px 16px;
        border-radius: 20px;
        gap: 5px;
    }

    .bento-container { 
        grid-template-columns: 1fr; 
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 20px 0 60px 0;
    }

    .bento-item { 
        width: 100%;
        height: auto; 
        min-height: unset; 
        border-radius: 24px;
        border: 1px solid var(--border);
        box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    }
    
    /* 모바일 표시 순서 (2.css 구조 유지) */
    .item-hero1   { order: 1; }
    .item-hero2   { order: 2; }
    .item-n1      { order: 3; }
    .item-rank    { order: 5; } 
    .item-slider  { order: 4; }  

    /* 하단 9개 작은 배너 전체 숨김 처리 (2.css 규칙 유지) */
    .item-n3, .item-n4, .item-n5, .item-n6, .item-n7, .item-n8, .item-n9, .item-n10, .item-n11 {
        display: none !important;
    }

    /* 상단 메인 배너 3개를 작은 배너처럼 형태(가로) 및 원본 수준 크기로 복원 */
    .item-hero1 .bento-content,
    .item-hero2 .bento-content,
    .item-n1 .bento-content,
    .item-slider .bento-content {
        flex-direction: row !important;
        align-items: stretch !important;
    }
    
    .item-hero1 .img-wrapper,
    .item-hero2 .img-wrapper,
    .item-n1 .img-wrapper,
    .item-slider .img-wrapper {
        width: 45% !important; 
        height: auto !important; 
        padding: 15px 10px 15px 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .item-hero1 .bento-img,
    .item-hero2 .bento-img,
    .item-n1 .bento-img,
    .item-slider .bento-img {
        background-size: contain !important; 
        background-position: center !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 80px !important;
        border-radius: 20px !important;
    }
    
    .item-hero1 .feature-box,
    .item-hero2 .feature-box,
    .item-n1 .feature-box,
    .item-slider .feature-box {
        width: 55% !important; 
        height: auto !important; 
        padding: 15px 20px 15px 10px !important;
    }

    /* 내부 absolute 속성 초기화 및 여백 정렬 */
    .item-hero1 .hero-feature-content,
    .item-hero2 .hero-feature-content,
    .item-n1 .hero-feature-content,
    .item-slider .hero-feature-content {
        position: relative !important;
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .item-hero1 .inner-text-box,
    .item-hero2 .inner-text-box,
    .item-n1 .inner-text-box,
    .item-slider .inner-text-box {
        gap: 8px !important; 
    }

    /* 가독성을 위한 원본 수준 폰트 크기 변경 */
    .site-title, .inner-text-box .site-title span {
        font-size: 19.5px !important; /* 꿀파일 문구 크기를 다른 배너 타이틀과 완벽하게 동일하게 맞춤 */
        margin-bottom: 8px !important;
    }
    .inner-text-box span {
        font-size: 15px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }

    /* TOP 10 슬라이드 배너 모바일 (원본 비율/크기 복구) */
    .item-rank { 
        height: auto !important; 
    }
    .item-rank .bento-content {
        flex-direction: column !important;
    }
    .item-rank .img-wrapper {
        width: 100% !important; 
        height: auto !important;
        padding: 12px 12px 5px 12px !important;
    }
    .item-rank .bento-img {
        background-size: cover !important; 
        aspect-ratio: 1 / 1.45 !important; 
        border-radius: 20px !important;
    }
    .item-rank .feature-box {
        width: 100% !important;
        height: auto !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 10px !important;
        flex: 0 0 45px !important;
    }
    .item-rank .hero-feature {
        font-size: 15px !important;
    }

    /* 페이드 배너(item-slider) 모바일 - 꿀파일 스타일 적용을 위한 상단바 숨김 */
    .item-slider .site-name-bar {
        display: none !important;
    }
}

.intro-box {
    width: 100%;
    max-width: 960px;
    margin: 8px auto 5px;
    padding: 0 10px;
}

.intro-box p {
    margin: 0;
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.5;
}

/* ==========================================
    ★ 타이틀 전용 텍스트 이펙트 (크기/위치 고정) ★
========================================== */
.text-effect-new {
    background: linear-gradient(90deg, #ff2a2a, #ff7a00, #ffc500, #43ea2b, #00bfff, #8a2be2, #ff2a2a);
    background-size: 200% auto;
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    animation: rainbowWave 3s linear infinite;
}

.text-effect-event {
    background: linear-gradient(120deg, #00d2ff 0%, #00d2ff 40%, #ffffff 50%, #00d2ff 60%, #00d2ff 100%);
    background-size: 200% auto;
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    animation: eventShine 2.5s linear infinite;
}

@keyframes rainbowWave {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: -200% center;
    }
}

@keyframes hotFlow {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: -200% center;
    }
}

@keyframes eventShine {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: -200% center;
    }
}
/* ==========================================
    8. 하단 슬라이더 페이드 효과
    ========================================== */
.fade-track {
    display: grid !important;
    width: 100%;
    height: 100%;
}
.fade-track .slide {
    grid-area: 1 / 1; 
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none; 
}
.fade-track .slide.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}