@charset "utf-8";
/* 반려동물 간식 쇼핑몰형 1 (petsnack1) — 영카트 화면에 테마 색 · 서체를 입힌다.
 * 영카트 기본 스킨(skin/shop/petsnack) 의 마크업은 그대로 두고 겉모습만 바꾼다.
 * 장바구니(cart.php) · 주문서(orderform.php) 는 스킨 파일이 없어 코어 HTML 이라, 여기서 CSS 로만 손본다. */

.ps-shop{padding-bottom:20px}
.ps-shop a{color:inherit}
.ps-shop h2,.ps-shop h3{font-family:var(--ps-round)}

/* 분류 · 정렬 줄 */
.ps-shop #sct_location,.ps-shop #sit_location{margin:0 0 18px;font-size:13.5px;color:var(--ps-mut)}
.ps-shop #sct_sortlst,.ps-shop .sct_sort{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.ps-shop #sct_sortlst li{margin:0}
.ps-shop #sct_sortlst a{display:block;padding:8px 16px;border:1px solid var(--ps-line);border-radius:999px;font-size:14px}
.ps-shop #sct_sortlst a:hover{border-color:var(--ps-acc);color:var(--ps-acc)}

/* 상품 목록 */
.ps-shop .sct{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px;margin:0;padding:0;list-style:none}
.ps-shop .sct::after{display:none}
.ps-shop .sct_li{float:none !important;width:auto !important;min-width:0;padding:0 !important;margin:0;list-style:none}
.ps-shop .sct_img{margin:0 0 12px;border-radius:var(--ps-rad);background:var(--ps-sand);overflow:hidden}
.ps-shop .sct_img a{display:block;aspect-ratio:1/1}
.ps-shop .sct_img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ps-shop .sct_li:hover .sct_img img{transform:scale(1.04)}
.ps-shop .sct_txt{margin:0;font-size:16px;font-weight:700;line-height:1.45;color:var(--ps-ink)}
.ps-shop .sct_basic{margin:6px 0 0;font-size:14px;color:var(--ps-mut)}
.ps-shop .sct_cost{margin:10px 0 0;font-size:18px;font-weight:700;color:var(--ps-acc-d)}
.ps-shop .sct_dict{margin-right:8px;font-size:13.5px;font-weight:400;color:var(--ps-mut);text-decoration:line-through}
.ps-shop .sct_btn,.ps-shop .sct_op_btn{margin-top:10px}
.ps-shop .btn_cart,.ps-shop .sct_cart{padding:9px 16px;border:1px solid var(--ps-line);border-radius:999px;background:#fff;font-size:13.5px;font-weight:600}
.ps-shop .btn_cart:hover{border-color:var(--ps-acc);color:var(--ps-acc)}
.ps-shop .shop_icon_soldout,.ps-shop .soldout_txt{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--ps-acc);color:#fff;font-size:12px}

/* 상품 상세 */
.ps-shop #sit{margin-top:6px}
.ps-shop #sit_pvi{margin-bottom:24px}
.ps-shop #sit_pvi_big img,.ps-shop #sit_pvi img{border-radius:14px}
.ps-shop #sit_title,.ps-shop #sit_ov_title{margin:0 0 14px;font-family:var(--ps-round);font-size:clamp(22px,3vw,30px);color:var(--ps-ink)}
.ps-shop #sit_ov{padding:0;border:0}
.ps-shop .sit_ov_tbl,.ps-shop #sit_ov table{width:100%;border-top:2px solid var(--ps-ink);border-collapse:collapse}
.ps-shop #sit_ov th,.ps-shop #sit_ov td{padding:12px 10px;border-bottom:1px solid var(--ps-line);font-size:14.5px;text-align:left;vertical-align:top}
.ps-shop #sit_ov th{width:150px;color:var(--ps-ink);font-weight:700}
.ps-shop #sit_tot_price,.ps-shop .sit_price{font-size:22px;font-weight:700;color:var(--ps-acc-d)}
.ps-shop .sit_btn_buy,.ps-shop #sit_btn_buy,.ps-shop .btn_buy{padding:15px 30px;border:0;border-radius:999px;background:var(--ps-acc);color:#fff;font-weight:700;font-size:16px}
.ps-shop .sit_btn_buy:hover,.ps-shop .btn_buy:hover{background:var(--ps-acc-d)}
.ps-shop .sit_btn_cart,.ps-shop #sit_btn_cart{padding:15px 30px;border:1.5px solid var(--ps-ink);border-radius:999px;background:#fff;font-weight:700;font-size:16px}
.ps-shop .sit_btn_wish,.ps-shop .btn_wish_num{padding:13px 20px;border:1px solid var(--ps-line);border-radius:999px;background:#fff}
.ps-shop #sit_inf_open,.ps-shop .sit_inf_tab{border-bottom:1px solid var(--ps-line)}
.ps-shop #sit_inf_explan img{max-width:100%;height:auto}

/* 공통 표 — 장바구니 · 주문서 · 주문내역 (코어 HTML 이라 CSS 로만 손본다) */
.ps-shop table{width:100%;border-collapse:collapse;font-size:14.5px}
.ps-shop caption{padding-bottom:10px;font-family:var(--ps-round);font-size:20px;color:var(--ps-ink);text-align:left}
.ps-shop thead th{padding:13px 10px;border-top:2px solid var(--ps-ink);border-bottom:1px solid var(--ps-line);background:var(--ps-sand);color:var(--ps-ink);font-weight:700}
.ps-shop tbody td,.ps-shop tbody th{padding:14px 10px;border-bottom:1px solid var(--ps-line);vertical-align:middle}
.ps-shop tfoot td,.ps-shop tfoot th{padding:14px 10px;border-top:1px solid var(--ps-line);font-weight:700;color:var(--ps-ink)}
.ps-shop #sod_bsk_tot,.ps-shop #sod_bsk_list{margin-bottom:26px}
.ps-shop .td_numbig,.ps-shop .td_num,.ps-shop .td_numsum{text-align:center}
.ps-shop .cart_price,.ps-shop .total_price,.ps-shop #sod_bsk_tot strong{color:var(--ps-acc-d);font-weight:700}

/* 입력칸 · 버튼 공통 */
.ps-shop input[type=text],.ps-shop input[type=tel],.ps-shop input[type=email],.ps-shop input[type=password],.ps-shop input[type=number],.ps-shop select,.ps-shop textarea{
    padding:11px 12px;border:1px solid var(--ps-line);border-radius:8px;background:#fff;font:inherit;font-size:15px;color:var(--ps-body);box-sizing:border-box}
.ps-shop input:focus,.ps-shop select:focus,.ps-shop textarea:focus{outline:2px solid var(--ps-acc-l);outline-offset:1px}
.ps-shop .btn_submit,.ps-shop .btn_confirm .btn_submit,.ps-shop #sod_bsk_act .btn_submit{padding:15px 32px;border:0;border-radius:999px;background:var(--ps-acc);color:#fff;font-weight:700;font-size:16px;cursor:pointer}
.ps-shop .btn_submit:hover{background:var(--ps-acc-d)}
.ps-shop .btn_cancel,.ps-shop .btn_close,.ps-shop a.btn_cancel{padding:14px 28px;border:1px solid var(--ps-line);border-radius:999px;background:#fff;font-weight:600}
.ps-shop .btn_b01,.ps-shop .btn_b02,.ps-shop .btn01,.ps-shop .btn02{padding:10px 18px;border:1px solid var(--ps-line);border-radius:999px;background:#fff;font-size:14px}
.ps-shop .btn_confirm,.ps-shop #sod_bsk_act,.ps-shop .btn_list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:30px 0 0}
.ps-shop .empty_list,.ps-shop .empty_table{padding:60px 20px;border:1px dashed var(--ps-line);border-radius:14px;color:var(--ps-mut);text-align:center}

/* 쇼핑몰 첫 화면 (/shop/) */
.ps-shopcate{margin-top:46px}
.ps-shopcate__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ps-shopcate__desc{margin:6px 0 20px;color:var(--ps-mut)}

@media (max-width:1023px){
    .ps-shop .sct{grid-template-columns:repeat(3,minmax(0,1fr))}
    .ps-shop #sit_ov th{width:120px}
}
@media (max-width:767px){
    .ps-shop .sct{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
    /* 표는 가로로 넘치지 않게 감싼다 */
    .ps-shop table{min-width:520px}
    .ps-shop #sod_bsk_list,.ps-shop #sod_list,.ps-shop .tbl_head01{overflow-x:auto}
}

/* ── 휴대폰에서 상품 상세 (영카트 PC 화면을 세로로 눕힌다) ── */
@media (max-width:767px){
    .ps-shop #sit_ov_wrap{display:block !important;width:auto !important}
    .ps-shop #sit_pvi,.ps-shop #sit_pvi_big,.ps-shop #sit_ov{float:none !important;width:auto !important;margin:0 0 22px !important}
    .ps-shop #sit_pvi_big a,.ps-shop #sit_pvi img{width:100% !important;height:auto !important}
    .ps-shop #sit_pvi_thumb{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .ps-shop #sit_pvi_thumb li{width:64px}
    /* 사양표는 min-width 를 풀어 화면 폭에 맞춘다 */
    .ps-shop .sit_ov_tbl,.ps-shop #sit_ov table,.ps-shop #sit_opt_added table,.ps-shop #sit_tot_price table{min-width:0 !important;width:100% !important;table-layout:fixed}
    .ps-shop .sit_ov_tbl colgroup col:first-child{width:96px !important}
    .ps-shop .sit_ov_tbl col{width:auto !important}
    .ps-shop #sit_ov th,.ps-shop #sit_ov td{padding:10px 8px;font-size:14px;word-break:keep-all}
    .ps-shop #sit_ov_btn,.ps-shop .sit_btn_wrap{display:flex;flex-wrap:wrap;gap:8px}
    .ps-shop .sit_btn_buy,.ps-shop .sit_btn_cart{flex:1 1 140px;padding:14px 16px;font-size:15px}
    .ps-shop #sit_inf_explan img{height:auto}
    /* 상세 탭 옆의 떠 있는 구매 상자(#sit_buy)는 PC 전용 — 휴대폰에서는 설명을 좁히므로 숨긴다 (위쪽 구매 영역에 같은 버튼이 있다) */
    .ps-shop #sit_info{display:block !important}
    .ps-shop #sit_tab{float:none !important;width:auto !important;margin:0 !important}
    .ps-shop #sit_buy{display:none !important}
}

/* 분류 머리말 · 상품 설명 (shop.sql 의 ca_head_html · it_explan) */
.ps-shop .ps-cahead{margin:0 0 22px;padding:14px 18px;border-radius:16px;background:var(--ps-sand);color:var(--ps-body)}
.ps-shop .ps-itemexp{padding:20px 22px;border-radius:var(--ps-rad);background:var(--ps-sand);line-height:1.8}
.ps-shop .ps-itemexp ul{margin:12px 0;padding:0;list-style:none}
.ps-shop .ps-itemexp li{padding:6px 0;border-bottom:1px dashed var(--ps-line)}
.ps-shop .ps-itemexp b{display:inline-block;min-width:92px;color:var(--ps-acc-d)}
.ps-shop .ps-itemexp p:last-child{margin-bottom:0;font-size:14px;color:var(--ps-mut)}