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

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

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

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

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

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

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

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

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

/* ── 휴대폰에서 상품 상세 (영카트 PC 화면을 세로로 눕힌다) ── */
@media (max-width:767px){
    .fm-shop #sit_ov_wrap{display:block !important;width:auto !important}
    .fm-shop #sit_pvi,.fm-shop #sit_pvi_big,.fm-shop #sit_ov{float:none !important;width:auto !important;margin:0 0 22px !important}
    .fm-shop #sit_pvi_big a,.fm-shop #sit_pvi img{width:100% !important;height:auto !important}
    .fm-shop #sit_pvi_thumb{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .fm-shop #sit_pvi_thumb li{width:64px}
    /* 사양표는 min-width 를 풀어 화면 폭에 맞춘다 */
    .fm-shop .sit_ov_tbl,.fm-shop #sit_ov table,.fm-shop #sit_opt_added table,.fm-shop #sit_tot_price table{min-width:0 !important;width:100% !important;table-layout:fixed}
    .fm-shop .sit_ov_tbl colgroup col:first-child{width:96px !important}
    .fm-shop .sit_ov_tbl col{width:auto !important}
    .fm-shop #sit_ov th,.fm-shop #sit_ov td{padding:10px 8px;font-size:14px;word-break:keep-all}
    .fm-shop #sit_ov_btn,.fm-shop .sit_btn_wrap{display:flex;flex-wrap:wrap;gap:8px}
    .fm-shop .sit_btn_buy,.fm-shop .sit_btn_cart{flex:1 1 140px;padding:14px 16px;font-size:15px}
    .fm-shop #sit_inf_explan img{height:auto}
}