/*
 * 장바구니 — 모바일 카드형 (2026-09-17). 주문내역 카드(mypage-order-mobile.css)와 같은 톤.
 * ⚠ 장바구니는 JS(basket_list.js / basket_list_common.js / common.js makeSumController)가 행(.bdBasket-li[name=cartList])의
 *   체크박스·수량 input·data-price 를 직접 읽어 주문 데이터를 만든다. 그래서 마크업을 따로 두지 않고
 *   **같은 행을 CSS grid 로 카드처럼 재배치**만 한다(DOM·JS 무변경). 하단 요약(선택 N개·합계)은 basket_mobile.js 가 넣는다.
 * ⚠ style.css 가 이 파일 뒤에 로드되므로 셀렉터에 .basket-board 를 붙여 특이도(0,3,0)로 이긴다.
 * style.css 는 scss 컴파일본이라 손대지 않는다(memberPrice.css 와 같은 방식).
 */
.mo-basket-summary, .mo-allcheck-txt { display: none; }

@media (max-width: 1023px) {
  /* ── 헤더 행: 전체 선택만 남긴다 */
  .basket-board .bdBasket-head { border-bottom: 0; }
  .basket-board .bdBasket-head .bdBasket-rowlist { display: flex; padding: 4px 4px 10px; }
  .basket-board .bdBasket-headli.col-check-buy { display: flex; height: auto; padding: 0; justify-content: flex-start; }
  .basket-board .bdBasket-headli.col-check-buy .checkbox-wrap { display: inline-flex; align-items: center; gap: 8px; }
  .mo-allcheck-txt { display: inline; font-size: 14px; color: #6f6a66; }

  /* ── 상품 행 → 카드 */
  .basket-board .bdBasket-li[name="cartList"] {
    border: 1px solid #e4e0dc; border-radius: 14px; background: #fff; padding: 12px 14px; margin-bottom: 10px;
  }
  .basket-board .bdBasket-li[name="cartList"] .bdBasket-rowlist {
    display: grid;
    grid-template-columns: 24px 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "check img name  name"
      "check img price price"
      "check img fund  fund"
      "sum   sum sum   order";
    gap: 4px 10px;
    align-items: center;
  }
  .basket-board .bdBasket-li[name="cartList"] .bdBasket-rowli {
    grid-column: auto; grid-row: auto;           /* style.css 의 grid-column/row 지정 무효화 */
    padding: 0; display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; min-width: 0; width: auto;
  }
  .basket-board .bdBasket-li[name="cartList"] .col-check-buy { grid-area: check; align-self: start; }
  .basket-board .bdBasket-li[name="cartList"] .col-img { grid-area: img; align-self: start; }
  .basket-board .bdBasket-li[name="cartList"] .col-img > img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
  .basket-board .bdBasket-li[name="cartList"] .col-name { grid-area: name; margin: 0; align-self: start; }
  .basket-board .bdBasket-li[name="cartList"] .col-name > a { display: block; min-width: 0; color: inherit; text-decoration: none; }
  .basket-board .bdBasket-li[name="cartList"] .col-name .txt { font-size: 14px; font-weight: 500; line-height: 1.4; word-break: keep-all; }
  .basket-board .bdBasket-li[name="cartList"] .col-price { grid-area: price; font-size: 13px; }
  .basket-board .bdBasket-li[name="cartList"] .col-fund { grid-area: fund; font-size: 12px; color: #a09b96; }
  .basket-board .bdBasket-li[name="cartList"] .col-fund .txt::after { content: "원"; }
  .basket-board .bdBasket-li[name="cartList"] .col-sum { grid-area: sum; margin-top: 8px; }
  .basket-board .bdBasket-li[name="cartList"] .col-order-price { grid-area: order; justify-content: flex-end; justify-self: end; margin-top: 8px; font-size: 16px; }
  .basket-board .bdBasket-li[name="cartList"] .col-order-price .txt { font-weight: 700; }
  /* 주문가격 칸은 최종가만(정가 취소선은 위 '가격' 칸에 이미 있다) — 칸이 넓어져 상품명 열을 밀어내는 것을 막는다 */
  .basket-board .bdBasket-li[name="cartList"] .col-order-price .member-price-origin { display: none; }

  /* 라벨: 가격·적립금·주문가격은 값 앞에 작게, 수량은 숨김 */
  .basket-board .bdBasket-li[name="cartList"] .unit { display: inline; padding-right: 6px; font-size: 12px; color: #a09b96; font-weight: normal; }
  .basket-board .bdBasket-li[name="cartList"] .col-sum .unit { display: none; }

  /* 수량 조절 [-] [ n ] [+] */
  .basket-board .bdBasket-li[name="cartList"] .sum-control-wrap { width: auto; justify-content: flex-start; gap: 6px; }
  .basket-board .bdBasket-li[name="cartList"] .sum-control-wrap .input-box { width: 56px; }
  .basket-board .bdBasket-li[name="cartList"] .btn-sum-control { width: 30px; height: 30px; flex-basis: 30px; }

  /* ── 하단: 요약 + 버튼을 화면 아래에 붙인다 */
  .basket-sect.sect-btns { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid #e4e0dc; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
  .basket-sect.sect-btns .basket-btns { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 0; }
  .mo-basket-summary { display: flex; justify-content: space-between; flex: 1 1 100%; font-size: 14px; color: #6f6a66; padding: 0 2px 2px; }
  .mo-basket-summary b { color: #262626; font-weight: 700; font-size: 16px; }
  .basket-sect.sect-btns .basket-btn { flex: 1 1 0; width: auto; display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 12px; font-size: 15px; border-radius: 10px; }
  .basket-sect.sect-btns .basket-btn.order, .basket-sect.sect-btns .basket-btn.regular { flex: 2 1 0; }
}