/* ==========================================================================
   pages/cart.css — 장바구니 페이지 레이아웃
   ========================================================================== */

.cart__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-block: var(--sp-10) var(--sp-20);
}

.cart__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cart__title {
  color: var(--c-text);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.cart__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-6);
}

.cart__notes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .cart__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .cart__title { font-size: 1.625rem; }   /* 26px */
  .cart__inner { gap: var(--sp-8); padding-block: var(--sp-16) var(--sp-20); }
}

@media (min-width: 1200px) {
  .cart__bottom {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-10);
  }
  .cart__notes { flex: 1 1 auto; max-width: 679px; }
  .cart__bottom .order-summary { flex: 0 0 auto; width: 548px; }
}

/* ==========================================================================
   모바일 — 합계와 버튼을 화면 아래에 붙인다 `[2026-09-18]`

   품목이 몇 개만 되어도 합계와 주문 버튼이 화면 밖으로 밀려, 담긴 것을
   확인하려면 내려가고 주문하려면 또 내려가야 했다. INQUIRY 의 담기 줄과
   같은 방식이다 — 늘 보이는 자리에 총액과 두 버튼을 둔다.

   폼 안에 그대로 둔 채 자리만 옮긴다. 밖으로 빼면 submit 이 닿지 않는다.
   ========================================================================== */

@media (max-width: 767px) {
  .order-summary {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 55;              /* 헤더(50) 위, 메뉴(60) 아래 */
    gap: var(--sp-3);
    padding: var(--sp-3) var(--gutter) var(--sp-4);
    background: var(--c-bg);
    border-radius: 0;
    border-top: 1px solid var(--c-line-soft);
    box-shadow: 0 -4px 16px rgb(0 24 56 / .08);
  }

  /* 배송비 줄은 뺀다 — "To be invoiced" 는 위 안내 상자가 이미 말하고 있고,
     늘 떠 있는 줄에 두면 정작 총액이 눌린다 */
  .order-summary__lines .order-summary__line:first-child { display: none; }

  /* 두 버튼을 반씩 `[2026-09-18]` — INQUIRY 의 담기 줄과 같은 규칙이다.
     같은 자리의 같은 크기 버튼이 화면마다 다르면 안 된다 */
  .order-summary__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--sp-2);
  }

  .order-summary__actions .btn {
    width: 100%;
    /* 48px 은 화면 아래 줄에서 지나치게 두꺼웠다 — 44px 이 손가락으로 누르는
       최소 크기다. 더 줄이지 않는다 `[2026-09-18]` */
    height: 44px;
    padding-inline: var(--sp-3);
    font-size: 0.9375rem;   /* 15px */
    white-space: nowrap;
  }

  /* 줄이 마지막 품목을 덮지 않게 자리를 비워 둔다 */
  .cart.cart { padding-bottom: 132px; }
  .cart.cart .cart__inner { padding-bottom: 0; }
}

@media (max-width: 767px) {
  /* 바탕은 회색, 칸은 흰색 `[2026-09-18]` — 마이페이지와 같은 톤이다.
     흰 바탕에 선만 그으면 목록 전체가 한 덩어리로 보인다 */
  .cart.cart { background: var(--c-surface-page); }

  /* 목록을 감싸던 흰 상자의 테두리·모서리를 푼다 — 이제 칸마다 제 상자가 있다 */
  .cart-table {
    gap: var(--sp-2);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* 칸 제목 줄(Product · List price …)은 감춘다.
     칸 안에 이미 라벨이 붙어 있어 두 번 말하는 셈이다 */
  .cart-table__head { display: none; }

  /* 안내 상자는 한 톤 더 진하게 `[2026-09-18]` — 원래 색(#f6f6f6)이 회색
     바탕(#f0f5f9)과 거의 같아 상자가 있는지도 보이지 않았다.
     보조 버튼 배경과 같은 회색을 깔고 테두리로 경계를 한 번 더 긋는다 */
  .info-note {
    background: var(--c-chip-off);
    border: 1px solid var(--c-line);
  }

  /* 품목 사이를 벌린다 — 붙어 있으면 다시 한 덩어리가 된다 */
  #cart-rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

}