/* ==========================================================================
   6. スマートフォン（SP）専用
   ========================================================================== */
/* PCでは3件以下のときはカルーセルコントローラ非表示、4件以上のときはカルーセル表示 */
@media (min-width: 769px) {
    .ks-carousel-wrap .ks-carousel-prev,
    .ks-carousel-wrap .ks-carousel-next,
    .ks-carousel-wrap .ks-carousel-dots {
        display: none !important;
    }
    /* 4件以上：PCでもカルーセルUIを表示 */
    /* 横パディングは付けない（付けると .report-grid の 50svw 中央計算とずれる） */
    .ks-carousel-wrap.ks-carousel-multi {
        position: relative;
        padding-bottom: 44px;
    }
    /* 前後ボタン・ドット：.map-modal .modal-gallery-* と同一（プラン詳細モーダルギャラリー） */
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-prev,
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-next {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border: 1px solid var(--depth-700);
        border-radius: 50%;
        background: #fff;
        color: var(--depth-700);
        font-size: 22px;
        line-height: 0;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 0 0 3px;
        box-sizing: border-box;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        z-index: 2;
    }
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-prev:hover,
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-next:hover {
        background: var(--depth-700);
        color: #fff;
        border-color: var(--depth-700);
    }
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-prev {
        left: 8px;
    }
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-next {
        right: 8px;
    }
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-dots {
        display: flex !important;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: var(--mist-600);
        cursor: pointer;
        transition: background 0.2s;
    }
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-dot:hover {
        background: var(--mist-900);
    }
    .ks-carousel-wrap.ks-carousel-multi .ks-carousel-dot.active {
        background: var(--depth-700);
    }
}

@media (max-width: 768px) {
    .report-section-wrapper, .plan-section-wrapper, .beginner-guide-wrapper,
    .ks-plan-section {
        padding-top: 32px !important;
    }

    .guide-grid, .report-scroll-container, .plan-grid-scroll-container {
        margin-top: 20px !important;
    }

    .guide-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .guide-card { flex-direction: column; text-align: center; padding: 15px 10px; }

    /* 横スクロール設定 */
    .report-scroll-container,
    .plan-grid-scroll-container {
        margin: 20px -20px 0 !important;
        padding: 0 20px 20px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* カルーセル：カードが常に中央でスナップ */
    .ks-carousel-wrap .report-scroll-container,
    .ks-carousel-wrap .plan-grid-scroll-container {
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
    }
    /* アニメ中は mandatory より優先（02-front-page の .ks-carousel-animating と同旨） */
    .ks-carousel-wrap .report-scroll-container.ks-carousel-animating,
    .ks-carousel-wrap .plan-grid-scroll-container.ks-carousel-animating {
        scroll-snap-type: none !important;
    }
    /* PCでリサイズ時はスクロールバーが出て 100vw/50% がずれるため、svw（スクロールバー除く幅）で余白を計算。見えている幅の中央 = 50svw - 20px（padding考慮）→ 左右 50svw - 160px */
    .ks-carousel-wrap .report-grid,
    .ks-carousel-wrap .plan-grid {
        padding-left: calc(50svw - 160px);
        padding-right: calc(50svw - 180px); /* + ::after 20px で右も 50svw - 160px に */
        gap: 20px !important;
    }
    .ks-carousel-wrap .report-card,
    .ks-carousel-wrap .plan-card {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .report-scroll-container::-webkit-scrollbar,
    .plan-grid-scroll-container::-webkit-scrollbar { display: none; }

    .report-grid, .plan-grid { 
        display: flex !important; 
        grid-template-columns: none !important; 
        gap: 15px !important; 
    }

    .report-card, .plan-card { 
        min-width: 280px !important; 
        max-width: 280px !important; 
    }

    /* 1枚だけのとき：コントローラ非表示・カード中央寄せ */
    .ks-carousel-wrap.ks-carousel-single .ks-carousel-prev,
    .ks-carousel-wrap.ks-carousel-single .ks-carousel-next,
    .ks-carousel-wrap.ks-carousel-single .ks-carousel-dots {
        display: none !important;
    }
    .ks-carousel-wrap.ks-carousel-single {
        padding-bottom: 0;
    }
    .ks-carousel-wrap.ks-carousel-single .report-scroll-container,
    .ks-carousel-wrap.ks-carousel-single .plan-grid-scroll-container {
        padding-right: 20px !important;
    }
    .ks-carousel-wrap.ks-carousel-single .report-scroll-container .report-grid,
    .ks-carousel-wrap.ks-carousel-single .plan-grid-scroll-container .plan-grid {
        justify-content: center;
        padding-inline: 0;
    }

    /* カルーセルコントローラ（前へ・次へ・ドット）＝ .map-modal .modal-gallery-* と統一 */
    .ks-carousel-wrap {
        position: relative;
        padding-bottom: 40px;
    }
    .ks-carousel-wrap .ks-carousel-prev,
    .ks-carousel-wrap .ks-carousel-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border: 1px solid var(--depth-700);
        border-radius: 50%;
        background: #fff;
        color: var(--depth-700);
        font-size: 22px;
        line-height: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0 3px;
        box-sizing: border-box;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        z-index: 2;
    }
    .ks-carousel-wrap .ks-carousel-prev:hover,
    .ks-carousel-wrap .ks-carousel-next:hover {
        background: var(--depth-700);
        color: #fff;
        border-color: var(--depth-700);
    }
    .ks-carousel-wrap .ks-carousel-prev {
        left: 0px;
    }
    .ks-carousel-wrap .ks-carousel-next {
        right: 0px;
    }
    .ks-carousel-wrap .ks-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .ks-carousel-wrap .ks-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: var(--mist-600);
        cursor: pointer;
        transition: background 0.2s;
    }
    .ks-carousel-wrap .ks-carousel-dot:hover {
        background: var(--mist-900);
    }
    .ks-carousel-wrap .ks-carousel-dot.active {
        background: var(--depth-700);
    }

    /* 当日の流れ：SP レイアウトは 04-flow-areas.css（max-width: 767px）に統一 */

    /* SWELL 固定フッターメニュー（SP）の見た目・重なり順 */
    .l-fixFooter {
        z-index: 2147483647 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(5px);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
    .l-fixFooter__item:first-child .l-fixFooter__link {
        background: var(--horizon-cta, #1B5E8C);
        color: #fff;
    }
}