body {
    font-family: 'Noto Sans TC', sans-serif;
}

.animate-spin-slow {
    animation: spin 8s linear infinite;
}

/* 隱藏滾動條但保持可滾動 (用於彈窗) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==================== 純 CSS 無縫輪播海報牆 ==================== */
.carousel-container {
    width: 100%;
    overflow: hidden;
    background-color: #f8fafc; /* Tailwind slate-50 */
    padding: 3rem 0;
    position: relative;
}

/* 左右兩側的漸層遮罩，讓輪播有淡入淡出的感覺 */
.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, #f8fafc 0%, rgba(248,250,252,0) 100%);
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, #f8fafc 0%, rgba(248,250,252,0) 100%);
}

.carousel-track {
    display: flex;
    width: calc(300px * 8); /* 假設每張海報寬300px，共4張+複製4張=8張 */
    animation: scroll 20s linear infinite;
    gap: 1.5rem;
    padding: 0 1rem;
}

/* 當滑鼠移上去時暫停輪播 */
.carousel-track:hover {
    animation-play-state: paused;
}

.carousel-slide {
    cursor: pointer;
    flex-shrink: 0;
    width: 300px;
    height: 420px; /* 設定海報比例 */
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    background-color: #fff;
    border: 2px solid #e2e8f0; /* Tailwind slate-200 */
}

.carousel-slide:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #3b82f6; /* Tailwind blue-500 */
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片填滿且不變形 */
    object-position: top center;
}

/* 輪播動畫 */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300px * 4 - 1.5rem * 4)); } /* 減去4張圖片寬度與間距 */
}

/* 手機版適應縮小海報與漸層 */
@media (max-width: 640px) {
    .carousel-slide { 
        width: 240px; 
        height: 336px; 
    }
    
    .carousel-track { 
        width: calc(240px * 8); 
        animation: scroll-mobile 20s linear infinite; 
    }
    
    .carousel-container::before, 
    .carousel-container::after { 
        width: 50px; 
    }
    
    @keyframes scroll-mobile {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-240px * 4 - 1.5rem * 4)); }
    }
}