@charset "utf-8";
/*
 * [09SCM 운영 가이드] 손님 몰의 영카트 표를 좁은 화면(760px 이하)에서 카드로 접는다. wl_pages/wl.css
 *   의 .wl-table 과 같은 data-label + ::before 규약이며, thead 문구는
 *   inc/wl_shop_mobile_cards.php 의 스크립트가 tbody td 의 data-label 로 복사한다(코어
 *   PHP 수정 없음). 글자 크기 단계(html.wl-scale-110·125·150)와 상품명 어절 줄바꿈도 여기 있다.
 * ■ 주요 함수·구역
 *   · html.wl-scale-110 — 글자 크기 단계 110·125·150% — inc/wl_guest_fab.php 의
 *     인라인 스크립트가 html 에 붙인다
 *   · #sit_title — 상품명·주문상품명 어절 단위 줄바꿈(word-break: keep-all)
 *   · #container table.wl-shop-card-table — 760px 이하에서 표 머리를 숨기고 줄을 카드로
 *     접는다
 *   · #container table.wl-shop-card-table td[data-label]::before — 칸 앞에
 *     thead 문구(data-label)를 이름표로 찍는다
 *   · #container table.wl-shop-card-table td.td_prd — 상품 칸은 이름표 없이
 *     그림+이름으로
 *   · #sod_bsk .sod_list .sod_li — G5_IS_MOBILE 전용 장바구니(ul.sod_list)는 이미
 *     카드형이라 이름 줄바꿈·띠만 정리
 * ■ 고쳐도 되는 것
 *   카드로 접는 폭(760px), 이름표 글자 크기·색, 카드 줄 간격·테두리, 글자 크기 단계 비율
 * ■ 고치는 법
 *   ① 접는 폭을 바꾸려면 이 파일의 @media (max-width: 760px) 와
 *     inc/wl_shop_mobile_cards.php 스크립트의 matchMedia('(min-width:
 *     761px)') 를 함께 고친다. ② 카드 모양은 #container table.wl-shop-card-table 아래
 *     규칙을 고친다. ③ 접을 표를 더하려면 inc/wl_shop_mobile_cards.php 의
 *     querySelectorAll 선택자 목록에 그 표를 더한다.
 * ■ 주의
 *   이 파일은 head.sub.php 가 아니라 inc/wl_shop_mobile_cards.php 가 shop.tail 에서
 *     filemtime 판 번호를 붙여 link 태그 로 싣는다(본문 뒤라 앞선 모든 테마 CSS 보다 늦게 실린다).
 *     woorilink.css 가 1024px 이하에서 주는 표 가로 스크롤·min-width 를 카드 모드에서 해제한다.
 *     mall-live.css 의 860px 이하 .wl-shop-card-table 규칙과 겹친다. 시험:
 *     retail_mobile_ux_20260913.
 *   · 함께 볼 파일: theme/woorilink/inc/wl_shop_mobile_cards.php ·
 *     theme/woorilink/shop/shop.tail.php ·
 *     theme/woorilink/mobile/shop/shop.tail.php ·
 *     theme/woorilink/css/mall-live.css
 *   · 시험: php tools/selftest/run.php retail_mobile_ux_20260913
 *   · 전체 표: docs/guide/09SCM_운영·수정가이드_20261007.xlsx (python tools/docs/make_ui_edit_guide.py 로 다시 만든다)
 */
/*
 * 손님 몰(영카트 shop) — 좁은 화면에서 표를 카드로 접는다 (plan 11-2 · 범위 C).
 * wl_pages/wl.css 의 .wl-table 과 같은 data-label + ::before 규약.
 * thead 문구는 shop.tail 쪽 스크립트가 tbody td 에 복사한다(코어 PHP 수정 없음).
 */

html.wl-scale-110 { font-size: 110%; }
html.wl-scale-125 { font-size: 125%; }
html.wl-scale-150 { font-size: 150%; }

#container .prd_name,
#container .prd_name b,
#container .sod_name,
#container .sod_name b,
#container .td_prd .sod_name,
#container .li_name,
#container .li_name strong,
#sit_title {
    word-break: keep-all;
    overflow-wrap: break-word;
}

@media (max-width: 760px) {
    /* woorilink.css 가 ≤1024px 에서 주는 가로 스크롤·min-width 를 카드 모드에서 해제 */
    #container .tbl_head01.tbl_wrap,
    #container .tbl_head02.tbl_wrap,
    #container .tbl_head03.tbl_wrap,
    #container .cart_wrap,
    #container .sod_list,
    #container .od_prd_list {
        overflow-x: visible;
    }

    #container .tbl_head01 > table,
    #container .tbl_head02 > table,
    #container .tbl_head03 > table,
    #container .cart_wrap > table,
    #container .sod_list > table {
        min-width: 0;
    }

    #container table.wl-shop-card-table {
        border: 0;
        background: transparent;
    }

    #container table.wl-shop-card-table thead {
        display: none;
    }

    #container table.wl-shop-card-table,
    #container table.wl-shop-card-table tbody,
    #container table.wl-shop-card-table tr,
    #container table.wl-shop-card-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #container table.wl-shop-card-table tbody tr {
        background: var(--wl-sand, #f7f1e8);
        border: 1px solid var(--wl-line, #e8e2d6);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 6px 2px;
        box-shadow: 0 4px 14px rgba(26, 20, 14, 0.06);
    }

    #container table.wl-shop-card-table td {
        border: 0;
        padding: 6px 12px;
        display: flex;
        gap: 10px;
        align-items: baseline;
        text-align: left !important;
    }

    #container table.wl-shop-card-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        color: var(--wl-muted, #6b6b6b);
        font-size: 0.88em;
        font-weight: 600;
    }

    #container table.wl-shop-card-table td.td_chk,
    #container table.wl-shop-card-table td.chk_box {
        justify-content: flex-start;
    }

    #container table.wl-shop-card-table td.td_chk::before,
    #container table.wl-shop-card-table td.chk_box::before {
        content: none;
        display: none;
    }

    #container table.wl-shop-card-table td.empty_table {
        display: block;
        text-align: center;
        padding: 22px 12px;
    }

    #container table.wl-shop-card-table td.empty_table::before {
        content: none;
        display: none;
    }

    #container table.wl-shop-card-table td.td_prd {
        flex-direction: column;
        align-items: stretch;
    }

    #container table.wl-shop-card-table td.td_prd::before {
        flex: none;
        max-width: none;
    }

    #container table.wl-shop-card-table td.td_prd .sod_img {
        margin-bottom: 8px;
    }

    /* G5_IS_MOBILE 전용 장바구니(ul.sod_list) — 이미 카드형, 이름 줄바꿈·띠만 정리 */
    #sod_bsk .sod_list .sod_li {
        border-radius: 12px;
        margin-bottom: 12px;
        box-shadow: 0 4px 14px rgba(26, 20, 14, 0.06);
    }
}