@charset "utf-8";
/* 투어수다: 쇼핑(/shop) 화면 반응형 보정
   - 쇼핑 화면은 css/default_shop.css(1200px 고정)가 로드되므로 여기서 폭 고정을 해제한다.
   - shop/shop.head.php 에서 로드 (우선순위 20, default_shop.css 이후) */

#hd, #wrapper, #ft { min-width: 0; }
#container { width: auto; max-width: 1200px; padding: 0 16px; box-sizing: border-box; }
/* 공통 .suda-sub-container 가 margin:0 으로 덮어써서 넓은 화면에서 본문이 왼쪽에 붙던 문제 - 가운데 정렬 */
#wrapper #container { margin-left: auto; margin-right: auto; }
.suda-shop-content { width: 100%; min-width: 0; }
.suda-shop-content img { max-width: 100%; height: auto; }

/* 넓은 표는 표 자체만 가로 스크롤 */
.suda-shop-content .tbl_head01,
.suda-shop-content .tbl_head03,
.suda-shop-content .tbl_frm01,
.suda-shop-content #sod_bsk,
.suda-shop-content .tbl_wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- 상품 상세 (skin/shop/basic) ---- */
#sit_ov_wrap { width: auto; max-width: 1200px; box-sizing: border-box; }
/* 출발일형(달력) 상품은 우측 영카트 기본 "선택옵션" 박스가 달력과 중복이라 숨김 */
body:has(#suda_dep_calendar) #sit_buy { display: none; }
body:has(#suda_dep_calendar) #sit_tab { width: 100%; }

@media (max-width: 1024px) {
    #sit_ov_wrap { padding: 20px 0; }
    #sit_pvi, #sit_ov, #sit_pvi_big { float: none; width: auto; }
    #sit_pvi_big img { max-width: 100%; height: auto; }
    #sit_ov { min-height: 0; margin-top: 20px; }
    #sit_info { display: block; min-height: 0; }
    #sit_tab, #sit_buy { display: block; width: auto; border-left: 0; }
    #sit_tab .tab_tit li { float: none; display: inline-block; }
}

/* ---- 쇼핑 메인 ---- */
#hd_pop { width: auto; max-width: 1200px; }
/* 영카트 기본 메인은 좌측 #aside(265px) 자리를 비워 두지만 투어수다 헤더에는 #aside 가 없음 */
#container .is_index { margin-left: 0; }

/* ---- 상품 목록·검색 (영카트 col-row-N 그리드) ---- */
.suda-shop-content .lists-row { margin-left: 0; margin-right: 0; }
@media (max-width: 1024px) {
    #sct_sort, #sct_lst { float: none; width: auto; }
    #sct_location { position: static; float: none; display: block; }
    .lists-row [class*="col-row-"] { width: 50%; }
}
@media (max-width: 480px) {
    .lists-row [class*="col-row-"] { width: 100%; }
}
