/*
 * [09SCM 운영 가이드] 상품 상세·장바구니·주문서·페이앱 결제 화면에서 영카트 옛 스킨의 절대좌표·float 를 풀어
 *   그림과 글자가 각자 자리를 갖게 하는 앞선 라운드의 다리 스타일시트다. 모든 규칙이 body.mall-live 아래에 묶여
 *   있고 압축된 한 줄 규칙 40행으로 되어 있다. head.sub.php 가 맨 마지막(mall-live.css 다음)에
 *   싣으므로 같은 세기의 규칙에서는 이 파일이 이긴다.
 * ■ 주요 함수·구역
 *   · body.mall-live #container — 구매 화면
 *     넷(#sit_ov_from·#sod_bsk·#sod_frm·.wl-payapp) 안에서만 쓰는
 *     --primary(#1d5cff)·--primary-dark·--line 변수를 정한다
 *   · #sit_ov_wrap — 상품 상세 위쪽을 2열 격자(그림·요약)로 세우고 860px 이하에서 1열로 접는다
 *   · #sit_pvi_thumb — 상세 썸네일 줄을 절대좌표에서 flex 줄(54px 칸)로 바꾼다
 *   · .td_prd — 장바구니·주문서 표의 상품 칸 — 그림 64px 왼쪽 띄움·이름 줄바꿈·최소폭 280px
 *   · .od_prd_list — 주문상품 표를 테두리 상자로 감싸고 가로 스크롤(min-width 640px)을 준다
 *   · #sod_frm_orderer — 주문서의 주문자·받는 분·결제
 *     칸(#sod_frm_orderer·#sod_frm_taker·#sod_frm_pay)을 흰 카드로 만든다
 *   · .sct_10 — 옛 목록 스킨 카드(.sct_10)의 그림 칸을 1:1·object-fit:contain 으로 맞춘다
 *   · .wl-shop-card-table — 860px 이하 장바구니 카드 표에서 상품 칸을 56px 그림 + 이름 격자로
 *     접는다
 * ■ 고쳐도 되는 것
 *   구매 화면 카드 여백·테두리 색(#ebebeb)·모서리 반경, 상세 2열 비율, 썸네일 크기, 860px 접힘 기준, 표
 *     최소폭 640px
 * ■ 고치는 법
 *   ① 여백·테두리를 바꾸려면 해당 선택자(#sod_frm 카드·.od_prd_list·.wl-payapp)의
 *     padding·border 값을 고친다. ② 상세 2열 비율은 #sit_ov_wrap 의
 *     grid-template-columns 를, 접힘 폭은 @media(max-width:860px) 두 블록을 함께
 *     고친다. ③ 버튼 색은 이 파일의 #1d5cff 가 아니라 woorilink.css 의
 *     --wl-primary·mall-live.css 의 :root 가 정한다 — 이 파일의 .btn_submit 규칙은
 *     !important 가 없어 woorilink.css 의 !important 브랜드 버튼 규칙에 진다.
 * ■ 주의
 *   주문서 카드의 margin-bottom 20px 과 [주문상품] 테두리는 wl_checkout.css 가
 *     #sod_frm.wl-checkout 범위에서 다시 걷는다(그 파일 머리 주석) — 여기서 값을 바꾸면
 *     장바구니·상세까지 흔들리므로 주문서만 고칠 때는 wl_checkout.css 에서 덮는다. 이 파일의 ?ver= 는
 *     head.sub.php 가 filemtime 으로 붙인다. 머리 주석이 없는 압축 파일이라 줄 단위로 고친다.
 *   · 함께 볼 파일: theme/woorilink/head.sub.php ·
 *     theme/woorilink/css/wl_checkout.css ·
 *     theme/woorilink/css/mall-live.css ·
 *     theme/woorilink/css/wl_mobile_cards.css
 *   · 시험: php tools/selftest/run.php order_form_aside_20260921 ·
 *     shop_mock1007_storefront
 *   · 전체 표: docs/guide/09SCM_운영·수정가이드_20261007.xlsx (python tools/docs/make_ui_edit_guide.py 로 다시 만든다)
 */
/* 구매 화면의 이미지와 텍스트가 각자 공간을 갖도록 레거시 절대좌표를 해제한다. */
body.mall-live #container :is(#sit_ov_from,#sod_bsk,#sod_frm,.wl-payapp){--primary:#1d5cff;--primary-dark:#174bd1;--line:#ebebeb;color:#1a1a1a}
body.mall-live #sit_ov_wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;background:#fff;border:1px solid #ebebeb;border-radius:6px;padding:24px;align-items:start}
body.mall-live #sit_ov_wrap::after{display:none}
body.mall-live #sit_pvi,body.mall-live #sit_ov{float:none;width:auto;max-width:100%;min-width:0;margin:0}
body.mall-live #sit_pvi_big{width:100%;max-width:100%;aspect-ratio:1;overflow:hidden;background:#f4f4f4}
body.mall-live #sit_pvi_big .spv-main{height:100%;aspect-ratio:1}
body.mall-live #sit_pvi_big img{width:100%;height:100%;object-fit:contain}
body.mall-live #sit_pvi_thumb{position:static;display:flex;flex-wrap:wrap;gap:8px;width:auto;height:auto;margin:12px 0 0;padding:0}
body.mall-live #sit_pvi_thumb li{position:static;float:none;flex:0 0 54px;width:54px;height:54px;margin:0}
body.mall-live #sit_pvi_thumb img{width:100%;height:100%;object-fit:contain}
body.mall-live #sit_title{overflow-wrap:anywhere;line-height:1.5}
body.mall-live :is(#sod_bsk,#sod_frm) .td_prd{position:static!important;padding:16px!important;min-width:280px;white-space:normal!important;text-align:left}
body.mall-live :is(#sod_bsk,#sod_frm) .td_prd .sod_img{position:static!important;float:left;width:64px;height:64px;margin:0 16px 10px 0}
body.mall-live :is(#sod_bsk,#sod_frm) .td_prd .sod_img img{display:block;width:64px;height:64px;object-fit:contain}
body.mall-live :is(#sod_bsk,#sod_frm) .td_prd .sod_name{display:flow-root;min-height:64px;overflow-wrap:anywhere;min-width:110px}
body.mall-live :is(#sod_bsk,#sod_frm) .td_prd .prd_name{font-size:14px;line-height:1.6}
body.mall-live :is(#sod_bsk,#sod_frm) .od_prd_list{overflow-x:auto;border:1px solid #ebebeb;border-radius:6px;background:#fff}
body.mall-live :is(#sod_bsk,#sod_frm) .od_prd_list table{min-width:640px;margin:0}
body.mall-live :is(#sod_bsk,#sod_frm) .tbl_wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
body.mall-live :is(#sod_bsk,#sod_frm) .tbl_wrap table{min-width:640px}
body.mall-live :is(#sod_bsk,#sod_frm) :is(th,td){border-color:#ebebeb}
body.mall-live :is(#sod_frm,#sod_bsk) :is(h2,h3){color:#1a1a1a}
body.mall-live :is(#sod_frm,#sod_bsk) :is(.btn_submit,.btn01),body.mall-live #sit_ov_btn .sit_btn_buy{background:#1d5cff;border-color:#1d5cff;border-radius:4px;color:#fff}
body.mall-live #sod_frm :is(#sod_frm_orderer,#sod_frm_taker,#sod_frm_pay){border:1px solid #ebebeb;border-radius:6px;background:#fff;padding:24px;margin:0 0 20px}
body.mall-live .sct_10 .sct_li{height:auto;min-width:0}
body.mall-live .sct_10 .sct_img{position:relative;display:block;float:none;width:100%;aspect-ratio:1;height:auto;overflow:hidden}
body.mall-live .sct_10 .sct_img img{display:block;width:100%;height:100%;object-fit:contain}
body.mall-live .sct_10 .sct_txt{position:static;clear:both;height:auto;min-height:44px;overflow-wrap:anywhere;margin-top:12px}
body.mall-live .wl-payapp{max-width:760px;margin:32px auto;padding:24px;background:#fff;border:1px solid #ebebeb;border-radius:6px}
@media(max-width:860px){body.mall-live #sit_ov_wrap{grid-template-columns:minmax(0,1fr);padding:16px;gap:20px}body.mall-live #sit_pvi{width:100%}body.mall-live #sod_frm :is(#sod_frm_orderer,#sod_frm_taker,#sod_frm_pay){padding:16px}body.mall-live .wl-payapp{margin:16px;padding:16px}}
@media(max-width:860px){
 body.mall-live #sod_bsk_list .wl-shop-card-table{min-width:0!important;width:100%}
 body.mall-live #sod_bsk_list .wl-shop-card-table .td_prd{display:grid!important;grid-template-columns:56px minmax(0,1fr);gap:12px;min-width:0!important;white-space:normal!important}
 body.mall-live #sod_bsk_list .wl-shop-card-table .td_prd:before{grid-column:1/-1}
 body.mall-live #sod_bsk_list .wl-shop-card-table .sod_img{position:static!important;float:none!important;width:56px;height:56px;margin:0!important}
 body.mall-live #sod_bsk_list .wl-shop-card-table .sod_img img{width:56px;height:56px;object-fit:contain}
 body.mall-live #sod_bsk_list .wl-shop-card-table .sod_name{min-width:0;min-height:56px;margin:0!important;overflow-wrap:anywhere}
 body.mall-live #sod_bsk_list .wl-shop-card-table .sod_opt li{white-space:normal!important;overflow-wrap:anywhere}
}