@charset "utf-8";

/* 메인 화면 전용 스타일.
   히어로/서비스 캐러셀/포트폴리오/제공기능/공지는 모두 Tailwind 유틸리티 + React 아일랜드(frontend/islands)로 전환되었다.
   여기에는 기존 스토어 카드 스킨(shop-brand.css 의 .sct_li)을 메인에서 작게 보여주기 위한 덮어쓰기만 남긴다. */

/* ===== 스토어 상품 (쇼핑몰 카드 디자인 재사용, .sct_li 등은 shop-brand.css 참고) ===== */
/* 메인화면 미리보기 전용으로 카드 크기를 스토어 페이지보다 작게(6열) 축소 */
.sec_store .sct_10.lists-row {display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:0}
.sec_store .sct_10 .sct_li {float:none; width:calc(16.666% - 15px); padding:0; margin:0 0 12px}
.sec_store .sct_txt {font-size:0.92em}
.sec_store .sct_cost {font-size:0.95em}
@media (max-width:1024px) {
    .sec_store .sct_10 .sct_li {width:calc(25% - 14px)}
}
@media (max-width:768px) {
    .sec_store .sct_10 .sct_li {width:calc(33.333% - 12px)}
}
@media (max-width:480px) {
    /* 모바일에서는 카드를 1개씩만 보여주고 가로로 스와이프하도록 전환 */
    .sec_store .sct_10.lists-row {flex-wrap:nowrap; justify-content:flex-start; gap:0;
        overflow-x:auto; -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none}
    .sec_store .sct_10.lists-row::-webkit-scrollbar {display:none}
    .sec_store .sct_10 .sct_li {flex:0 0 100%; width:100%; scroll-snap-align:center; margin:0}
}