/**
 * 편성표 페이지 모바일 전용 (/hcjoyn-tv-live-time/)
 * - 모든 모바일에서 가로폭 100% 사용
 * - 시간 옆에 제목 한 줄로 표시 (모바일 480 포함)
 * - 주(Week) 뷰: 손가락으로 옆으로 밀어서 날짜별 보기 (가로 스크롤)
 * body 클래스 없이 .joyn-tv-live-schedule-only 만으로 적용
 */

/* 모든 모바일(~1024px): 편성표 박스 화면 가로 100% 꽉 차게 — 좌우 여백 제거 */
@media (max-width: 1024px) {
    body.page-template-page-joyn-tv-live-time .site-content,
    body.page-template-page-joyn-tv-live-time .site-content .ast-container,
    body.page-template-page-joyn-tv-live-time .site-content .container,
    body.page-template-page-joyn-tv-live-time .site-content .wrap,
    body .site-content .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .content-area .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .site-main .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .ast-container .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .container .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .wrap .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .joyn-tv-live-container.joyn-tv-live-schedule-only {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    .joyn-tv-live-schedule-only {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-section {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 모바일 480px: 화면 꽉 차게 + 시간·제목 한 줄 */
@media (max-width: 480px) {
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-section {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.45rem 0.5rem !important;
        min-width: 0 !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item-time {
        flex: 0 0 auto !important;
        min-width: 3.2em !important;
        width: auto !important;
        font-size: 0.8125rem !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 768px) {
    /* 편성표 박스 화면 꽉 차게: 상위/컨테이너 좌우 여백 0 */
    body .site-content .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .content-area .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .site-main .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .ast-container .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .container .joyn-tv-live-container.joyn-tv-live-schedule-only,
    body .wrap .joyn-tv-live-container.joyn-tv-live-schedule-only {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .joyn-tv-live-container.joyn-tv-live-schedule-only {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .joyn-tv-live-container.joyn-tv-live-schedule-only .joyn-tv-live-schedule-section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    /* 주(Week) 뷰: 가로 스크롤 (스와이프) */
    .joyn-tv-live-schedule-only #schedule-week-list,
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-week-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        margin-top: 0.75rem !important;
        margin-left: -0.25rem !important;
        margin-right: -0.25rem !important;
        padding: 0.5rem 0.25rem 1.5rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding: 0 0.5rem !important;
    }

    .joyn-tv-live-schedule-only #schedule-week-list::-webkit-scrollbar,
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-week-list::-webkit-scrollbar {
        height: 6px !important;
    }

    .joyn-tv-live-schedule-only #schedule-week-list::-webkit-scrollbar-thumb,
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-week-list::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.5) !important;
        border-radius: 3px !important;
    }

    /* 날짜 카드: 한 장이 화면 대부분 → 스와이프로 다음 날짜 */
    .joyn-tv-live-schedule-only #schedule-week-list .joyn-tv-live-schedule-day-card,
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-week-list .joyn-tv-live-schedule-day-card {
        flex: 0 0 auto !important;
        min-width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        box-sizing: border-box !important;
    }

    /* 편성표 헤더(시간/제목) — 모바일에서도 숨김 */
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-list-header {
        display: none !important;
    }

    /* 각 행: 시간 옆에 제목 한 줄 (가로폭 전체 사용, 긴 제목은 말줄임) */
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.6rem !important;
        min-width: 0 !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item .joyn-tv-live-schedule-item-time {
        flex: 0 0 auto !important;
        min-width: 3.5em !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item .joyn-tv-live-schedule-item-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 행 가로 스와이프 시 스크롤바 숨김 (손가락으로 밀어서 보기) */
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item::-webkit-scrollbar {
        height: 0 !important;
        display: none !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-item {
        scrollbar-width: none !important;
    }

    /* 날짜 카드 내부 리스트: 세로 스크롤만 */
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-day-items {
        max-height: 50vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* "옆으로 밀어서 보기" 안내 표시 */
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-hint-swipe {
        display: block !important;
    }

    /* 일(Day) 뷰: 목록 높이 제한 */
    .joyn-tv-live-schedule-only #schedule-day-list,
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-day-list {
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* 스와이프 안내: 모바일에서만 표시 */
.joyn-tv-live-schedule-only .joyn-tv-live-schedule-hint-swipe {
    display: none;
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
}

@media (min-width: 769px) {
    .joyn-tv-live-schedule-only #schedule-week-list,
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-week-list {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    .joyn-tv-live-schedule-only .joyn-tv-live-schedule-week-list .joyn-tv-live-schedule-day-card {
        min-width: auto !important;
        max-width: none !important;
        width: auto !important;
    }
}