/**
 * スワイプカルーセル（スマホ専用）
 * 2025 UXベストプラクティス準拠
 * 
 * 使い方: 必要なページで読み込む
 * <link rel="stylesheet" href="assets/css/swipe-carousel.css">
 */

@media (max-width: 640px) {
    /* カルーセル対象グリッド - インラインスタイル完全上書き */
    .comparison-grid,
    .feature-grid,
    .field-links,
    .tackle-grid,
    .spot-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        grid-template-columns: unset !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        gap: 12px !important;
        padding: 10px 20px 20px !important;
        margin: 0 -20px !important;
        scrollbar-width: none !important;
        scroll-padding-left: 20px !important;
    }
    .comparison-grid::-webkit-scrollbar,
    .feature-grid::-webkit-scrollbar,
    .field-links::-webkit-scrollbar,
    .tackle-grid::-webkit-scrollbar,
    .spot-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* カード共通 - 強制横並び */
    .comparison-grid > div,
    .feature-grid > div,
    .feature-grid > .feature-card,
    .field-links > a,
    .field-links > .field-link-card,
    .tackle-grid > div,
    .spot-grid > div {
        flex: 0 0 75vw !important;
        max-width: 75vw !important;
        min-width: 75vw !important;
        width: 75vw !important;
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
    }

    /* 楽天カードを親要素の幅に従わせる */
    .comparison-grid .rakuten-product-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* カルーセルコンテナ（右端フェード用） */
    .carousel-container {
        position: relative;
        margin: 0 -20px;
    }
    .carousel-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: calc(100% - 50px);
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
        pointer-events: none;
        transition: opacity 0.3s;
        z-index: 10;
    }
    .carousel-container.at-end::after {
        opacity: 0;
    }

    /* ナビゲーション */
    .swipe-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
    }
    .swipe-indicator {
        display: flex;
        gap: 8px;
    }
    .swipe-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ccc;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s;
    }
    .swipe-dot.active {
        background: #03487c;
        transform: scale(1.3);
    }

    /* スワイプヒントテキスト */
    .swipe-hint-text {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #666;
        animation: swipeHintPulse 1.5s ease-in-out infinite;
        transition: opacity 0.3s;
    }
    .swipe-hint-text.hidden {
        opacity: 0;
        pointer-events: none;
    }
    .swipe-hint-text svg {
        width: 16px;
        height: 16px;
    }
    @keyframes swipeHintPulse {
        0%, 100% { transform: translateX(0); opacity: 1; }
        50% { transform: translateX(5px); opacity: 0.7; }
    }

    /* 初回スワイプヒントアニメーション */
    @keyframes swipeHint {
        0% { transform: translateX(0); }
        30% { transform: translateX(-30px); }
        60% { transform: translateX(0); }
        100% { transform: translateX(0); }
    }
    .swipe-hint-animate {
        animation: swipeHint 1s ease-in-out;
    }
}