/* ===== 장바구니 / 내 컬렉션 ===== */
.cart-wrap { max-width: 1000px; margin: 0 auto; padding: 0 6% 80px; }

/* 정렬 기준 토글 (최신순 / 등급순) — 선택 도구바 우측 상단 */
.cart-sort-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 3px;
}
.cart-sort-toggle .cs-opt {
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.cart-sort-toggle .cs-opt.active {
  background: var(--pink);
  color: white;
  box-shadow: 0 2px 6px rgba(255, 64, 129, .25);
}
.cart-sort-toggle .cs-opt:not(.active):hover { color: var(--pink-deep); }
.cart-summary {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: white;
  border-radius: 24px;
  padding: 28px 32px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
.cart-summary h3 { font-family: 'Jua'; font-size: 22px; margin-bottom: 6px; }
.cart-summary p { opacity: .9; font-size: 14px; }
.cart-summary .ship-btn {
  background: white;
  color: var(--pink-deep);
  border: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'Jua';
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
  text-decoration: none;
  display: inline-block;
}
/* 카트 항목 리스트 — 사용자 피드백: 항목 간 간격이 너무 떨어져 있었음 → 압축. 보더로 그룹화.
   둥근 모서리는 12px 로 축소 — 양끝 곡선이 너무 강조돼 카드 내부 콘텐츠와 충돌해 보이던 이슈 해소 */
.cart-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
/* 빈 상태 placeholder는 위 핑크 요약과 가로폭을 동일하게 */
.cart-list .placeholder { max-width: none; width: 100%; margin: 0; }
.cart-item {
  background: white;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 64px 1fr auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background .12s;
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: rgba(255, 64, 129, .03); }
.cart-item.is-selected { background: rgba(255, 64, 129, .04); }

.cart-thumb {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFCAD4, #FF6B9D);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.cart-info h4 { font-family: 'Jua'; font-size: 15px; margin-bottom: 3px; letter-spacing: -.01em; }
.cart-info small { color: var(--text-soft); font-size: 12px; display: block; }
/* 등급 칩 — common.css 의 .gr 미니멀 시리즈와 합치 */
.cart-grade {
  font-family: 'Pretendard';
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid transparent;
  letter-spacing: -.01em;
}
/* 당첨 상품은 임의 삭제 불가 — cart-x 비노출 (스타일은 호환성 위해 유지) */
.cart-x { display: none !important; }
.cart-info-row {
  background: var(--bg);
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-soft);
  display: flex; align-items: flex-start; gap: 12px;
}
.cart-info-row b { color: var(--text); }

@media (max-width: 900px) {
  .cart-item { grid-template-columns: auto 52px 1fr auto; gap: 10px; padding: 12px 14px; }
  .cart-thumb { width: 52px; height: 52px; font-size: 26px; }
  .cart-info h4 { font-size: 14px; }
}
@media (max-width: 480px) {
  .cart-item { gap: 8px; padding: 10px 12px; }
  .cart-grade { padding: 4px 10px; font-size: 11px; }
  /* 합배송 요약 카드 — 좁은 폰에서 세로 스택 + 버튼 풀폭 */
  .cart-summary { grid-template-columns: 1fr; padding: 22px 20px; gap: 14px; text-align: center; }
  .cart-summary .ship-btn { width: 100%; text-align: center; }
}

/* ===== 다크모드 ===== */
/* 상단 핑크 그라데이션 요약 카드 — 다크모드에서 핫 핑크가 부담 → 톤다운 */
body.dark-theme .cart-summary {
  background: linear-gradient(135deg, #4A1A35 0%, #2A0F1F 100%);
}
body.dark-theme .cart-summary .ship-btn {
  background: rgba(255,255,255,.18);
  color: white;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
body.dark-theme .cart-summary .ship-btn:hover { background: rgba(255,255,255,.28); }
body.dark-theme .cart-list { background: var(--surface); }
body.dark-theme .cart-item { background: var(--surface); border-bottom-color: var(--line); }
body.dark-theme .cart-item:hover { background: rgba(255, 64, 129, .07); }
/* 장바구니 보관 안내 — 박스로 명확히 분리 (다크모드에서도 시각적으로 분리되도록 강한 컨트라스트) */
body.dark-theme .cart-info-row {
  background: var(--surface);
  border: 1.5px solid rgba(255, 64, 129, .25);
  border-left: 4px solid var(--pink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  color: var(--text-soft);
}
body.dark-theme .cart-info-row b { color: var(--text); }
/* 라이트모드에서도 살짝 박스감 추가 — 사용자 피드백: 혼자 따로 떠있는 느낌 */
.cart-info-row {
  border: 1.5px solid rgba(255, 64, 129, .18);
  border-left: 4px solid var(--pink);
  box-shadow: 0 4px 14px rgba(255, 64, 129, .06);
}
/* 선택 도구 바 — 인라인 background:white 제거 후 클래스 기반 톤 */
.cart-select-bar { background: white; border: 1.5px solid var(--bg-2); }
body.dark-theme .cart-select-bar { background: var(--surface); border-color: var(--line); }
/* .cart-summary .ship-btn 은 핑크 그라데이션 위 흰 버튼 — 양쪽 테마 동일 유지 */