/* ==========================================================================
   (주)투어수다 - 카테고리 상품 리스트 (shop/list.php)
   상품카드는 메인과 동일한 .suda-product-grid / .suda-product-card(css/home.css)를 그대로 쓴다.
   ========================================================================== */

/* 사이트 공통 #wrapper 배경(#f6f6f6) 대신 카테고리 리스트 페이지만 흰색 */
/* #wrapper:has(.suda-catlist){ background: #fff; } - 2026-10-24: 페이지 배경은 css/default_shop.css(body·#wrapper) 한 곳에서 관리 */
/* 쇼핑 공통 #container(max-width 1200px) 대신 메인 섹션과 같은 1280px 폭 → 카드 크기/한 줄 개수 메인과 동일 */
#wrapper #container:has(.suda-catlist){ max-width: 1280px; }

.suda-catlist .suda-catlist-section{ box-sizing: border-box; }
.suda-catlist #sct_hhtml:empty,
.suda-catlist #sct_thtml:empty{ display: none; }

/* 상단 HTML 안내 배너(맞춤여행 "맞춤 요청서 작성하기" 등)를 아래 상품 카드 줄과 같은 좌우 여백·폭으로 */
.suda-catlist #sct_hhtml{ max-width: 1280px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.suda-catlist #sct_hhtml .suda-quote-cat-banner{ margin: 0; }
@media screen and (max-width:1024px){ .suda-catlist #sct_hhtml{ padding-inline: 2.34vw; } }
@media screen and (max-width:768px){ .suda-catlist #sct_hhtml{ padding-inline: 3.12vw; } }
@media screen and (max-width:480px){ .suda-catlist #sct_hhtml{ padding-inline: 5.00vw; } }

.suda-catlist .pg_wrap{ float: none; display: block; margin: 40px 0 0; text-align: center; }

/* (2026-10-24) 전체 상품 아래 "원하는 상품이 없으신가요? 맞춤여행 요청하기" 버튼 (맞춤여행 카테고리 제외) */
.suda-catlist-custom-cta{ margin-top: 40px; }
.suda-catlist-custom-cta a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 56px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #eef0ff;
    color: var(--suda-gray-700);
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease;
}
.suda-catlist-custom-cta a strong{ color: var(--suda-blue); font-weight: 700; }
.suda-catlist-custom-cta a:hover{ background: #e0e4ff; }
.suda-catlist-custom-cta a:focus-visible{ outline: 3px solid rgba(65, 84, 255, .35); outline-offset: 2px; }
@media screen and (max-width:1024px){ .suda-catlist-custom-cta{ margin-top: 3.91vw; } .suda-catlist-custom-cta a{ font-size: 1.56vw; min-height: 5.47vw; } }
@media screen and (max-width:768px){ .suda-catlist-custom-cta{ margin-top: 5.21vw; } .suda-catlist-custom-cta a{ font-size: 2.08vw; min-height: 7.29vw; flex-wrap: wrap; } }
@media screen and (max-width:480px){ .suda-catlist-custom-cta{ margin-top: 8.33vw; } .suda-catlist-custom-cta a{ font-size: 3.33vw; min-height: 11.67vw; border-radius: 2.5vw; } }

/* (2026-10-24) 맞춤여행 요청 버튼을 마지막 섹션 아래로 - 섹션과 같은 폭·좌우 여백, 아래 여백 */
.suda-catlist-cta-wrap{ max-width: 1280px; margin: 0 auto; padding: 0 24px 56px; box-sizing: border-box; }
.suda-catlist-cta-wrap .suda-catlist-custom-cta{ margin-top: 0; }
@media screen and (max-width:1024px){ .suda-catlist-cta-wrap{ padding: 0 2.34vw 5.47vw; } }
@media screen and (max-width:768px){ .suda-catlist-cta-wrap{ padding: 0 3.12vw 7.29vw; } }
@media screen and (max-width:480px){ .suda-catlist-cta-wrap{ padding: 0 5.00vw 11.67vw; } }

/* (2026-10-24) 맞춤여행 요청 박스를 꺼서 마지막 섹션 아래가 휑하지 않게 - 공통 서브페이지 아래 여백(150px)을 카테고리 페이지만 줄인다 */
#wrapper #container.suda-sub-container:has(.suda-catlist){ padding-bottom: 64px; }
@media screen and (max-width:1024px){ #wrapper #container.suda-sub-container:has(.suda-catlist){ padding-bottom: 6.25vw; } }
@media screen and (max-width:768px){ #wrapper #container.suda-sub-container:has(.suda-catlist){ padding-bottom: 8.33vw; } }
@media screen and (max-width:480px){ #wrapper #container.suda-sub-container:has(.suda-catlist){ padding-bottom: 13.33vw; } }