/* ==========================================
    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. 플로팅 헤더
    ========================================== */
.floating-header {
    width: 90%; max-width: 1200px; background: var(--bg-bento);
    margin-top: 30px; padding: 15px 30px; border-radius: 50px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid var(--border);
}
.logo { font-size: 22px; font-weight: 900; color: var(--text-main); letter-spacing: -0.5px; }
.controls { display: flex; align-items: center; gap: 15px; }
.time-badge { font-weight: 700; color: var(--text-sub); font-size: 14px; letter-spacing: 0.5px; }
.theme-btn {
    background: var(--accent); color: #fff; border: none; padding: 8px 16px; 
    border-radius: 20px; font-weight: 700; cursor: pointer; display: flex; gap: 5px;
}

/* ==========================================
    3. 벤토 그리드
    ========================================== */
.bento-container {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, 1fr); gap: 20px;
    width: 90%; max-width: 1200px; margin: 30px 0 60px 0;
}

.bento-item {
    background: var(--bg-bento); border-radius: 24px; border: 1px solid var(--border);
    overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02); transition: transform 0.2s, border-color 0.2s;
}
.bento-item:hover { transform: translateY(-4px); border-color: var(--accent); }

.item-hero { grid-column: span 2; grid-row: span 2; }
.item-rank { grid-column: 4; grid-row: 1 / span 3; } 
.item-slider { grid-column: 4; grid-row: 4; }         
.item-n1 { grid-column: 3; grid-row: 1; }
.item-n2 { grid-column: 3; grid-row: 2; }
.item-n3 { grid-column: 1; grid-row: 3; }
.item-n4 { grid-column: 2; grid-row: 3; }
.item-n5 { grid-column: 3; grid-row: 3; }
.item-n6 { grid-column: 1; grid-row: 4; }
.item-n7 { grid-column: 2; grid-row: 4; }
.item-n8 { grid-column: 3; grid-row: 4; }

/* ==========================================
    4. 영역 완전 분리 및 여백 확보
    ========================================== */
.site-name-bar {
    height: 40px; flex-shrink: 0; background-color: var(--site-bar);
    display: flex; align-items: center; padding: 0 15px; font-size: 13px;
    font-weight: 900; color: var(--text-main); border-bottom: 1px solid var(--border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

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

.img-wrapper {
    width: 66.66%; 
    padding: 12px; 
    display: flex;
}

.bento-img {
    width: 100%;
    height: 100%;
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px; 
}

.feature-box {
    width: 33.33%; 
    background: var(--feature-bg);
    padding: 15px 10px; font-size: 13px; font-weight: 700;
    display: flex; flex-direction: column; justify-content: space-evenly; 
    align-items: center; text-align: center; letter-spacing: -0.3px; word-break: break-all; 
}

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

.hero-feature { font-size: 17px; font-weight: 900; padding: 30px 15px; }

/* ==========================================
    5. 실시간 차트
    ========================================== */
.rank-wrapper { padding: 25px; height: 100%; display: flex; flex-direction: column; background: var(--rank-bg); }
.rank-header { font-size: 18px; font-weight: 900; color: var(--text-main); margin-bottom: 20px; text-align: center; }
.rank-list { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex-grow: 1; }
.rank-row { display: flex; align-items: center; gap: 10px; }
.r-num { font-size: 18px; font-weight: 900; color: var(--accent); width: 20px; }
.r-title { font-size: 14px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================
    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; }

.item-slider .bento-content { flex-direction: column; }
.item-slider .img-wrapper { width: 100%; height: 65%; padding: 12px; }
.item-slider .feature-box {
    width: 100%; height: 35%; flex-direction: row; justify-content: center; align-items: center; padding: 0 10px;
}

/* ==========================================
    7. 반응형
    ========================================== */
@media (max-width: 900px) {
    .bento-container { grid-template-columns: repeat(2, 1fr); }
    .item-hero { grid-column: span 2; grid-row: auto; height: 300px; order: 1; }
    .item-rank { grid-column: span 2; grid-row: auto; height: 400px; order: 2; }
    .item-slider { grid-column: span 2; grid-row: auto; height: 150px; order: 3; }
    .item-n1, .item-n2, .item-n3, .item-n4, .item-n5, .item-n6, .item-n7, .item-n8 { 
        grid-column: span 1; grid-row: auto; height: 200px; order: 4; 
    }
    .img-wrapper { width: 60%; }
    .feature-box { width: 40%; }
}
@media (max-width: 500px) {
    .bento-container { grid-template-columns: 1fr; }
    .item-n1, .item-n2, .item-n3, .item-n4, .item-n5, .item-n6, .item-n7, .item-n8 { grid-column: span 1; }
    .floating-header { flex-direction: column; border-radius: 20px; gap: 15px; }
    .img-wrapper { width: 50%; }
    .feature-box { width: 50%; }
    .hero-feature { font-size: 15px; padding: 15px 10px; }
}