/* =========================================
   [반응형] 상품 상단 구매 영역 (item.form.css)
========================================= */


@media (max-width: 1300px) {
    body.sub-body {
        margin-top: 0 !important;
    }
}
@media (max-width: 768px) {
    body.sub-body {
        padding-top: 90px;
    }
}
/* 1024px 이하 (태블릿) */
@media (max-width: 1024px) {
    /* 2단 배치를 1단(세로) 배치로 변경 */
    #sit_ov_wrap {
        grid-template-columns: 1fr !important; 
        gap: 30px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    /* 썸네일 가운데 정렬 */
    #sit_pvi { 
        width: 100%; 
        max-width: 600px; 
        margin: 0 auto; 
    }
    
    /* 구매 옵션 영역 100% 꽉 차게 */
    #sit_ov { 
        width: 100%; 
    }
    #sit_ov_btn { 
        display: flex !important; 
        gap: 10px !important; 
    }
    
    #sit_ov_btn > * { 
        width: 100% !important; 
        margin: 0 !important; 
        box-sizing: border-box;
    }

    .benefit_box {
        display: none;
    }

    .radio_box {
        padding: 18px 0px;
    }

    .radio_info {
        justify-content: space-between;
    }
    .r_discount, .sit_btn_sub {
        display: none;
    }

    #sit_title {
        padding-right: 0;
    }

    .creator_row {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
    .creator_row img {
        grid-column-start: 1;
        grid-column-end: 1;
    }
    .creator_name {
        grid-column-start: 2;
        grid-column-end: 6;
    }
    .creator_tag {
        grid-column-start: 6;
        grid-column-end: 9;
    }
    .btn_creator_info {
        margin-top: 5px;
        grid-column-start: 1;
        grid-column-end: 9;
    }

    #sit_inf_explan img {
        width: 100% !important;
    }
}

/* 768px 이하 (모바일 기본) */
@media (max-width: 768px) {
    /* 상품 제목 및 가격 글씨 크기 축소 */
    .sit_info_title { font-size: 24px !important; margin-bottom: 12px !important; word-break: keep-all; }
    .sit_info_summary { font-size: 14px !important; margin-bottom: 20px !important; }
    .sit_info_price { font-size: 26px !important; }
    
    /* 옵션 선택 박스 여백 조절 */
    .sit_sel_option { padding: 15px !important; }
    
    /* 구매 / 장바구니 / 찜 버튼을 세로로 100% 꽉 차게 */
    #sit_ov_btn { 
        display: flex !important; 
        gap: 10px !important; 
    }
    
    #sit_ov_btn > * { 
        width: 100% !important; 
        margin: 0 !important; 
        box-sizing: border-box;
    }
    
    .btn_cart, .btn_buy { 
        height: 52px !important; 
        font-size: 16px !important; 
        border-radius: 8px !important;
    }

    .btn_icon_action {
        width: 30px;
        height: 30px;
    }
}


 /* =========================================
   [반응형] 상품 하단 상세/리뷰 영역 (item.info.css)
========================================= */

/* 1024px 이하 (태블릿) */
@media (max-width: 1024px) {
    .sit_info_inner { 
        box-sizing: border-box; 
    }
    
    /* 상세정보 본문 안의 이미지가 화면 밖으로 나가지 않게 방어 */
    #sit_inf img { 
        max-width: 100% !important; 
        height: auto !important; 
    }

    
    .section_anchor {
        padding: 0 20px;
    } 
    /* [수정] 모바일 필수 표기 정보 테이블 레이아웃 변경 */
    .tbl_ess_info { 
        display: block; 
        border-top: 1px solid var(--border-color); /* 상단 테두리 추가로 표 시작점 명확히 */
    }
    .tbl_ess_info tbody { 
        display: block; 
    }
    .tbl_ess_info tr { 
        display: flex; 
        flex-wrap: wrap; 
        margin-bottom: 0; 
        border: none; 
        border-radius: 0; 
    }
    .tbl_ess_info th { 
        display: flex; 
        align-items: center; /* 글자 세로 중앙 정렬 */
        width: 35%; /* 좌측 제목 영역 너비 */
        background: #f9f9f9; 
        border-bottom: 1px solid var(--border-color); 
        padding: 15px; 
        box-sizing: border-box;
    }
    .tbl_ess_info td { 
        display: block; 
        width: 65%; /* 우측 내용 영역 너비 */
        padding: 15px; 
        border-bottom: 1px solid var(--border-color); 
        box-sizing: border-box;
        background: #fff;
    }
    .ri_header {
        flex-direction: row;
    }
}

/* 768px 이하 (모바일 기본) */
@media (max-width: 768px) {
    /* 1. 탭 메뉴 모바일에서 가로 스크롤(스와이프)로 변경 */
    #sit_tab_nav { 
        top: 81px; /* 모바일 헤더(상단바) 높이에 맞게 조절하세요 */ 
        height: 50px; 
        margin-bottom: 13px;
    }
    
    #sit_tab_nav ul {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #sit_tab_nav ul::-webkit-scrollbar { display: none; }
    
    #sit_tab_nav li { flex-shrink: 0; }
    #sit_tab_nav li a { 
        font-size: 14px; 
        padding: 0 16px; 
        height: 50px; 
        line-height: 50px; 
    }

    /* 2. 리뷰/Q&A 상단 요약 통계 박스 세로 배치 */
    .review_summary { 
        flex-direction: column !important; 
        gap: 20px !important; 
        padding: 20px !important; 
    }
    
    /* 구분선(오른쪽 선)을 지우고 아래쪽 선으로 변경 */
    .rs_left, .rs_center, .rs_right { 
        width: 100% !important; 
        border-right: none !important; 
        border-bottom: 1px solid #eee; 
        padding-bottom: 15px; 
        text-align: center; 
    }
    .rs_right { border-bottom: none; padding-bottom: 0; }

    /* 3. 리뷰 리스트 모바일 정렬 */
    .review_item { 
        flex-direction: column !important; 
        gap: 15px !important; 
        align-items: flex-start !important; 
    }
    .ri_profile { 
        display: flex; 
        align-items: center; 
        gap: 10px; 
    }
    .ri_content_area { width: 100% !important; }

    /* 4. 크리에이터 박스 모바일 최적화 */
    .cb_profile_area { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }
    .cb_profile_img { margin-bottom: 15px; }

    .btm_banner {
        display: none;
    }
    .purchase_options_wrap {
        display: none;
    }

    .policy-content-section {
        padding: 0 !important;
        margin-bottom: 45px;
    }
    .policy-item {
        padding: 0 !important;
    }
    .policy-item-body p {
        word-break: break-word;
    }
}

/* 480px 이하 (작은 모바일) */
@media (max-width: 480px) {
    /* 작은 폰에서는 리뷰 통계 글씨 축소 */
    .rs_score strong { font-size: 36px !important; }
    .rs_score span { font-size: 18px !important; }
}