/* =============================================
   courses-mobile.css
   모바일 전용 스타일 + 상세 페이지 공통 오버라이드
   ============================================= */


/* ------------------------------------------
   탭 섹션 타이틀 (PC/모바일 공통)
   ------------------------------------------ */
.tab-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    padding-bottom: 10px;
    margin-top: 56px;
    margin-bottom: 16px;
    border-bottom: 2px solid #212529;
}


/* ------------------------------------------
   탭 스타일 오버라이드 (PC/모바일 공통)
   courses.css의 box형 탭 → 언더라인형 탭
   ------------------------------------------ */
ul.tab {
    border-bottom: 2px solid #dee2e6;
    box-shadow: none;
    margin: 20px 0 0 0;
}

ul.tab li {
    background: transparent;
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 400;
    margin-right: 0;
    margin-bottom: -2px;
    padding: 12px 20px;
}

ul.tab li.current {
    background: transparent;
    color: #212529;
    font-weight: 700;
    border-bottom: 2px solid #212529;
    position: static;
    top: auto;
}

.tabcontent {
    border: none;
    border-top: none;
    padding: 20px 0;
}


/* ------------------------------------------
   모바일: 흰 헤더(header) 상단 고정
   header-row1에 sticky를 걸면 부모(header) 범위에 갇혀 동작 안 함
   → header 자체를 sticky로 처리
   ------------------------------------------ */
@media (max-width: 991.98px) {
    header {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
}


/* ------------------------------------------
   모바일 전용 신규 요소: 기본 숨김 (PC/태블릿 영향 없음)
   courses.css 를 건드리지 않고 여기서 자체 관리
   ------------------------------------------ */

/* 이미지 하단 장바구니 버튼: 기본 숨김, 모바일에서만 표시 */
.compact-cart-img-btn {
    display: none;
}


/* ------------------------------------------
   태블릿 중간 구간 (768px ~ 991px): sort-wrapper 너비 보완
   ------------------------------------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .sort-wrapper {
        width: 15%;
    }
}


/* ------------------------------------------
   모바일 (max-width: 767px)
   ------------------------------------------ */
@media (max-width: 767px) {

    /* [상세 페이지] 헤더 하단 여백 제거 */
    .container.py-4 {
        padding-top: 0 !important;
    }

    .sort-wrapper {
        width: auto;
    }

    /* [카드 목록] 이미지(좌) + 정보(우) 가로 배치 래퍼 */
    .compact-image-col {
        width: 35%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* [카드 목록] compact-image: courses.css 기본값(35%) → col 안에서 100%로 덮어씀 */
    .compact-image {
        width: 100%;
        flex-shrink: unset;
    }

    /* [카드 목록] 이미지 하단 장바구니 버튼: 모바일에서만 표시 */
    .compact-cart-img-btn {
        display: block;
        width: 100%;
        background: white;
        color: #667eea;
        border: 1.5px solid #667eea;
        padding: 5px 4px;
        border-radius: 5px;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .compact-cart-img-btn:hover {
        background: #f0f2ff;
        border-color: #5568d3;
    }

    /* [카드 목록] 정보 영역 좌측 여백 */
    .compact-info {
        padding-left: 10px;
    }

    /* [카드 목록] 주 버튼 높이 축소 */
    .compact-btn-primary {
        padding: 8px 18px;
    }

    /* [상세 페이지] 과정 정보 테이블: td를 flex로 만들어 라벨(좌)/값(우) 겹침 방지 */
    .inner_tbl td {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .obj_name {
        flex-shrink: 0;
        width: 100px;
        margin-right: 8px;
    }

    .obj_value {
        flex: 1;
        word-break: break-word;
    }

    /* 가격 span(할인율·정가·할인가)은 내용만큼만 차지하도록 */
    .obj_value.m1,
    .obj_value.m2,
    .obj_value.m3 {
        flex: 0 0 auto;
        margin-right: 6px;
    }

    /* selectable-books-area는 라벨/값 아래 전체 너비로 배치 */
    .selectable-books-area {
        width: 100%;
        flex-basis: 100%;
        margin-top: 8px;
    }

    /* 장바구니·바로구매 버튼 가운데 정렬 */
    .btn_area {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    /* 버튼 영역 ~ 탭 ul 간격: li 수직 패딩(12px)에 맞춤 */
    ul.tab {
        margin-top: 40px;
        /* 가로 스와이프 스크롤 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none; /* Firefox */
    }
    ul.tab::-webkit-scrollbar {
        display: none; /* Chrome / Safari */
    }
    ul.tab li {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* 탭 스크롤 wrapper: 우측 그라데이션 페이드 */
    .tab-scroll-wrapper {
        position: relative;
    }
    .tab-scroll-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 56px;
        background: linear-gradient(to right, transparent, #fff);
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 1;
    }
    .tab-scroll-wrapper.at-end::after {
        opacity: 0;
    }
}


/* ------------------------------------------
   소형 모바일 (max-width: 480px)
   ------------------------------------------ */
@media (max-width: 480px) {

    /* 유틸리티 버튼 숨김 (공간 절약) */
    .compact-utility-actions {
        display: none;
    }

    /* 주 버튼 터치 영역 확대 */
    .compact-btn-primary {
        padding: 14px 18px;
        font-size: 14px;
    }

    /* 부 버튼 터치 영역 확대 */
    .compact-btn-secondary {
        padding: 10px 12px;
    }
}


/* ------------------------------------------
   모바일/태블릿 공통 (max-width: 768px)
   ------------------------------------------ */
@media (max-width: 768px) {

    .container {
        padding: 10px;
    }

    /* [상세 페이지] 교재 카드 세로 배치 */
    .book-card {
        flex-direction: column;
        text-align: center;
    }

    .book-cover {
        margin: 0 auto;
    }
}

/* ------------------------------------------
   홈 섹션 타이틀: 모바일에서 한 줄 처리
   ------------------------------------------ */
@media (max-width: 767.98px) {
    .section-title {
        font-size: 1.1rem;
        flex-wrap: nowrap;
    }

    .section-title a {
        white-space: nowrap;
    }
}

/* ------------------------------------------
   홈 스크롤 카드 썸네일: 슬라이드보다 작게 (180px → 120px)
   홈 섹션 간격: 슬라이드·각 섹션 32px으로 통일
   ------------------------------------------ */
@media (max-width: 767.98px) {
    .course-scroll-row .card-img-top,
    .course-scroll-row .card-img-placeholder,
    .course-scroll-row .compact-thumb img,
    .course-scroll-row .compact-thumb-placeholder {
        height: 120px !important;
    }

    #mainCarousel,
    .home-section {
        margin-bottom: 32px !important;
    }

    /* 섹션 간격 32px 통일: scroll-row padding-bottom 제거 */
    .course-scroll-row {
        padding-bottom: 0 !important;
    }
}

/* 최소 단말 (430px 이하) 메인 홈 전용: 카드 2~3개 동시 노출 + 옆 카드 일부 노출로 스크롤 유도 */
@media (max-width: 430px) {
    .home-section .course-scroll-row > .course-scroll-item {
        flex: 0 0 42% !important;
        min-width: 42% !important;
    }

    .home-section .course-scroll-row .card-img-top,
    .home-section .course-scroll-row .card-img-placeholder,
    .home-section .course-scroll-row .compact-thumb img,
    .home-section .course-scroll-row .compact-thumb-placeholder {
        height: 85px !important;
    }
}