/* ==========================================================================
   cart-table — 장바구니 품목 표
   좁은 화면에서는 표를 카드로 쌓는다. 가로 스크롤을 만들지 않는다.
   ========================================================================== */

.cart-table { width: 100%; }

.cart-table__head {
  display: none;
  align-items: center;
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line-input);
  border-bottom: 1px solid var(--c-line-input);
  color: var(--c-text-sub);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
}

.cart-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "check product remove"
    ".     price   price"
    ".     qty     amount";
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--c-line-soft);
}

.cart-row__check  { grid-area: check; }
.cart-row__remove { grid-area: remove; }
.cart-row__price  { grid-area: price; }
.cart-row__qty    { grid-area: qty; }
.cart-row__amount { grid-area: amount; text-align: right; }

/* --- 제품 칸 ---------------------------------------------------------------- */

.cart-row__product {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  grid-area: product;
  min-width: 0;
}

.cart-row__thumb {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cart-row__thumb img { width: 100%; height: 100%; object-fit: contain; }

.cart-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.cart-row__id {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.cart-row__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--swatch);
}

.cart-row__catno {
  color: var(--c-text);
  font-family: var(--ff-num);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.cart-row__name {
  color: var(--c-text-price);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.cart-row__option {
  color: #6b7280;
  font-size: 0.8125rem;   /* 13px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

/* --- 값 칸 ------------------------------------------------------------------ */

.cart-row__price {
  color: var(--c-text-sub);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
}

.cart-row__amount {
  color: var(--c-text-price);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
}

/* 좁은 화면에서 어떤 값인지 알 수 있게 라벨을 붙인다 */
.cart-row__label {
  margin-right: var(--sp-2);
  color: var(--c-text-meta);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.cart-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  color: var(--c-text-chip);
}
.cart-row__remove:hover { background: var(--c-chip-off); color: var(--c-text); }

/* --- 체크박스 --------------------------------------------------------------- */

.cart-check {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-blue-deep);
}

/* --- 수량 조절 (장바구니용 큰 버전) ------------------------------------------- */

.qty--lg .qty__btn,
.qty--lg .qty__value {
  width: 28px;
  height: 28px;
  border: 1.25px solid var(--c-line-card);
  border-radius: 0;
  font-size: 0.9375rem;
}
.qty--lg .qty__value { font-size: var(--fs-sm); }
.qty--lg .qty__btn:first-child { border-radius: 6px 0 0 6px; }
.qty--lg .qty__btn:last-child  { border-radius: 0 6px 6px 0; }
.qty--lg .qty__btn + .qty__value,
.qty--lg .qty__value + .qty__btn { margin-left: -1.25px; }

/* --- 데스크톱 — 진짜 표 모양으로 ---------------------------------------------- */

@media (min-width: 1024px) {

  /* 머리행과 본문행이 같은 폭 규칙을 쓴다.
     한쪽에만 걸리는 선택자를 두면 특이도 때문에 어긋난다 — 아래처럼 짝으로 적는다. */

  .cart-table__head { display: flex; gap: 0; }

  .cart-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 22px var(--sp-3);
  }

  .cart-table__head-check,
  .cart-row__check {
    flex: 0 0 auto;
    width: 20px;
  }

  .cart-table__head-product,
  .cart-row__product {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--sp-5);
  }

  .cart-table__head-price,
  .cart-row__price {
    flex: 0 0 auto;
    width: 120px;
    text-align: center;
  }

  .cart-table__head-qty,
  .cart-row__qty {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 160px;
  }

  .cart-table__head-amount,
  .cart-row__amount {
    flex: 0 0 auto;
    width: 150px;
    text-align: center;
  }

  .cart-table__head-remove,
  .cart-row__remove {
    flex: 0 0 auto;
    width: 50px;
  }

  .cart-table__head-price,
  .cart-table__head-qty,
  .cart-table__head-amount { display: block; text-align: center; }

  .cart-table__head-qty { display: flex; justify-content: center; }

  .cart-row__label { display: none; }
}

/* ==========================================================================
   모바일 — 한 줄을 카드처럼 `[2026-09-18]`

   세 칸 격자에서 오른쪽 칸이 금액("Contact us")만큼 넓어지며 가운데 제품 칸을
   눌렀다. 375px 에서 제품명이 들어갈 자리가 93px 밖에 남지 않아 한 단어씩
   줄이 바뀌었다 — 이름이 세로로 길게 늘어져 무엇을 담았는지 읽히지 않았다.

   제품 칸을 오른쪽 끝까지 늘리고, 지우기(×)는 흐름에서 빼 오른쪽 위에 얹는다.
   ========================================================================== */

@media (max-width: 767px) {
  /* 회색 바탕 위 흰 칸 `[2026-09-18]` — 줄 사이를 선 하나로만 나누면
     어디까지가 한 제품인지 눈으로 끊기지 않는다. 칸으로 떼어 놓는다 */
  .cart-row {
    position: relative;
    background: var(--c-bg);
    border-bottom: 0;
    border-radius: var(--radius);
    grid-template-columns: auto minmax(0, 1fr) auto;
    /* 회색 칸은 카드 폭을 꽉 채운다 `[2026-09-18]` — 체크 칸 아래까지 내려와야
       한 덩어리로 보인다. 체크는 첫 줄에만 있으면 된다 */
    grid-template-areas:
      "check product product"
      "price price   price"
      "qty   qty     amount";
    row-gap: var(--sp-2);
    align-items: start;
    padding: var(--sp-4);
  }

  /* 체크·지우기는 줄 맨 위에 맞춘다 — 가운데 정렬이면 이름 길이에 따라 오르내린다 */
  .cart-row__check { align-self: start; padding-top: 2px; }

  /* 지우기(x) 는 작고 옅게 `[2026-09-18]` — 실수로 누르면 담은 것이 사라진다.
     눈에 먼저 들어올 자리가 아니다. 누르는 자리는 32px 그대로 두고 그림만 줄인다 */
  .cart-row__remove {
    position: absolute;
    top: var(--sp-2);
    right: 0;
    width: 32px;
    height: 32px;
    color: var(--c-text-chip);
  }
  .cart-row__remove svg { width: 12px; height: 12px; }

  /* 사진과 글 — 사진은 줄어들지 않고 글이 남은 폭을 다 쓴다 */
  .cart-row__product { gap: var(--sp-3); align-items: flex-start; }

  /* 사진은 무엇인지 알아보는 실마리일 뿐이다 — 이름과 값이 주인공이라
     한 치수 줄인다  */
  .cart-row__thumb { width: 64px; height: 64px; }
  .cart-row__thumb { flex: 0 0 auto; }
  .cart-row__info { min-width: 0; }

  /* 지우기(×)가 얹히는 자리만큼 이름을 비켜 둔다 */
  .cart-row__name { padding-right: var(--sp-8); }

  /* 값·수량·금액을 회색 칸에 담는다 
     가상 요소로 판을 깔아 봤지만 격자 칸 위에 얹히는 순서가 브라우저마다
     달라 칠이 보이지 않는 일이 있었다. 세 칸에 **직접** 칠하고 줄 사이를
     붙여 한 덩어리로 만든다 — 눈에 보이는 결과가 같고, 기댈 것이 적다 */
  /* 칸 사이 간격을 0 으로 둔다 — 회색 칸 한가운데로 흰 줄이 지나갔다.
     체크 칸만 오른쪽 여백으로 제 자리를 벌어 준다 `[2026-09-18]` */
  .cart-row { row-gap: 0; column-gap: 0; }
  .cart-row__check { margin-right: var(--sp-4); }

  /* 한 톤 옅게 `[2026-09-18]` — 흰 카드 위에서 --c-chip-off(#e9eef3)는
     칸이 아니라 눌린 자국처럼 보였다. 썸네일·선택 카드와 같은 회색을 쓴다 */
  .cart-row__price,
  .cart-row__qty,
  .cart-row__amount { background: var(--c-surface-alt); }

  /* 값은 한 줄만 둔다 `[2026-09-18]` — 낱개 값과 줄 금액이 나란히 있으면
     어느 쪽이 낼 돈인지 한 번 더 생각해야 한다. 수량을 올리면 오르는 값
     하나만 남기고 낱개 값은 뺀다 */
  .cart-row__price { display: none; }

  .cart-row__qty {
    margin-top: var(--sp-3);   /* 위 제품 칸과의 사이 — row-gap 을 0 으로 둔 몫 */
    padding: var(--sp-3);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  .cart-row__amount {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  /* 값과 수량은 한 줄에서 마주 본다.
     칸을 **끝까지 채운다** — start/end 로 붙여 두면 칠한 회색이 글자 폭만큼만
     남아 칸이 중간에서 끊긴 것처럼 보였다 `[2026-09-18]` */
  .cart-row__qty {
    justify-self: stretch;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .cart-row__amount {
    justify-self: stretch;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  /* 글자를 한 눈금씩 낮춘다 `[2026-09-18]` — 좁은 화면에서 제품명이 16px 이면
     두 줄을 넘기고, 값·금액까지 같은 크기라 칸이 글자로만 가득 찼다.
     읽는 순서(이름 → 값 → 금액)가 크기로도 드러나게 한다 */
  .cart-row__name   { font-size: var(--fs-base); }   /* 16 → 14px */
  .cart-row__catno  { font-size: 0.8125rem; }        /* 13px */
  .cart-row__option { font-size: var(--fs-sm); }     /* 13 → 12px */
  .cart-row__price,
  .cart-row__amount { font-size: var(--fs-base); }   /* 16 → 14px */
  .cart-row__label  { font-size: var(--fs-sm); }     /* 12px */

  /* 금액 줄의 이름표(Amount)는 뺀다 `[2026-09-18]` — 바로 위 줄이 이미
     "List price" 로 무슨 값인지 말하고 있어, 아래 줄은 수량과 금액이
     마주 보는 것만으로 읽힌다 */
  .cart-row__amount .cart-row__label { display: none; }

  /* 체크 칸은 작게 `[2026-09-18]` — 고르는 표시일 뿐인데 20px 은 제품 사진만큼
     눈에 들어왔다. 16px 이면 손가락으로 누르기에도 충분하다 (칸 전체가 눌린다) */
  .cart-check { width: 16px; height: 16px; }

  /* 낱개 값(List price) 줄은 두지 않는다 — 위의 display: none 을 되살리지 않게
     여기서도 모양을 주지 않는다  */
}