/* /css/index-style.css */

/* --- 메인 콘텐츠 레이아웃 --- */
main {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.main-container-wrapper {
    flex: 3;
    min-width: 0;
}

.main-content {
    background: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.sidebar {
    flex: 1;
    padding: 0;
    min-width: 0;
}

.sidebar-widget {
    background: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

h2 {
    font-size: 24px;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.widget-title {
    font-size: 18px;
    color: var(--secondary-color);
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

/* --- 유튜브 포스트 목록 --- */
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-item {
    display: flex;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

.post-item:last-child {
    border-bottom: none;
}

.post-thumbnail {
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-content {
    flex-grow: 1;
}

.post-title a {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
}

.post-title a:hover {
    color: var(--primary-color);
}

.post-meta {
    font-size: 14px;
    color: var(--light-text-color);
    margin-top: 5px;
}

/* --- 실시간 순위 섹션 --- */
.realtime-rank {
    background: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.realtime-rank .widget-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

.rank-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 15px;
}

.rank-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
}

.rank-item {
    flex-shrink: 0;
    width: 250px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    white-space: normal;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    counter-reset: rank-list-item; /* 각 rank-item마다 카운터 재설정 */
}

.rank-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.rank-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    text-align: center;
}

.rank-item ol {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
}

.rank-item ol li {
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.rank-item ol li:hover {
    transform: translateX(5px);
}

.rank-item ol li a {
    font-size: 0.95rem;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-item ol li a:hover {
    color: var(--primary-color);
}

.rank-item ol li::before {
    content: counter(rank-list-item);
    counter-increment: rank-list-item;
    font-weight: 700;
    color: var(--secondary-color);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

.rank-item ol li:nth-child(-n+3)::before {
    color: var(--primary-color);
    font-size: 1rem;
}

* Pagination */
.pagination-section {
    margin-top: 40px;
    text-align: center;
}

.pagination {
    display: inline-flex; /* 버튼들을 가로로 나열 */
    align-items: center;
    gap: 8px; /* 버튼 사이 간격 */
}

.pagination-btn, .page-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    color: var(--text-color);
    background: var(--card-background);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 1rem;
}

.pagination-btn.arrow {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.pagination-btn.active, .page-number.active, .page-number:hover {
    background: var(--primary-color);
    color: var(--card-background);
    border-color: var(--primary-color);
}

.page-number.active {
    font-weight: 700;
}

.posts-grid {
    padding : 0px;
}

/* post-category 스타일 (패치형) */
.post-category {
    display: inline-block;
    padding: 6px 14px; /* 패딩을 조금 더 크게 */
    border-radius: 9999px; /* 완벽한 타원형으로 만듦 */
    background: var(--primary-color); /* 키위 속살 색상 */
    color: var(--card-background); /* 흰색 글씨 */
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-category:hover {
    background: var(--secondary-color); /* 호버 시 키위 껍질 색상으로 변경 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 그림자 효과 강조 */
    transform: translateY(-2px); /* 살짝 위로 올라오는 효과 */
}


/**
랭크리스트가 까뒤집어지는
**/
/* Add this to your index-style.css file */

/* For a better 3D effect on the entire list */
.rank-list {
    perspective: 800px;
}

/* Apply the animation to each list item */
.rank-item ol li {
    transform-style: preserve-3d;
    animation: flipAndFade 3s ease-in-out infinite;
    /* This delay will be calculated dynamically with a CSS variable */
    animation-delay: calc(var(--total-items) * 0.2s - var(--i) * 0.2s);
}

/* The keyframe animation you provided */
@keyframes flipAndFade {
    0%, 35% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    50% {
        transform: rotateX(90deg);
        opacity: 0;
    }
    65%, 100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}