/* ===== PublicPixels — Cart (v4 unified backdrops + polish) ===== */

/* ---------- Backdrop (cart + search 통일) ---------- */
:root{
  --backdrop-dim: rgba(0,0,0,.38); /* 명암 강도 */
  --backdrop-blur: 3px;            /* 블러 강도 */
  --thumb: 172px;
}

/* 공통 스타일 */
#cart-backdrop,
#search-backdrop{
  position:fixed; left:0; top:var(--header-h,56px);
  width:100%; height:calc(100vh - var(--header-h,56px));
  background:var(--backdrop-dim);
  backdrop-filter:saturate(1.05) blur(var(--backdrop-blur));
  -webkit-backdrop-filter:saturate(1.05) blur(var(--backdrop-blur));
  opacity:0; pointer-events:none; transition:opacity .22s ease;
  z-index:1200;
}
#cart-backdrop[hidden]{ display:none !important; }

/* 활성화: 순서 의존 제거 + 형제 규칙 유지 */
#cart[aria-hidden="false"] ~ #cart-backdrop{ opacity:1; pointer-events:auto; }
#cart-backdrop:not([hidden]){ opacity:1; pointer-events:auto; }         /* cart */
#search-backdrop:not(.hidden){ opacity:1; pointer-events:auto; }         /* search */

/* ---------- Drawer ---------- */
#cart{
  position:fixed; right:0; top:var(--header-h,56px);
  inline-size:min(440px, 92vw);
  block-size:calc(100vh - var(--header-h,56px));
  background:#fff; color:#111; z-index:1300;
  border-left:1px solid #ececee;
  box-shadow:-18px 0 40px rgba(0,0,0,.16);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.3,.7,0,1);
  display:flex; flex-direction:column;
  --pad-x: 24px;
  --gap: 14px;
  --muted:#686a70; --border:#ececee; --ghost:#f7f7f8;
  --ring:#111;
}
#cart[aria-hidden="false"]{ transform:none; }

/* ---------- Head ---------- */
.cart__head{
  position:sticky; top:0; z-index:2; background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding: 4px var(--pad-x);
  border-bottom:0.6px solid var(--border);
}
.cart__title{ font-size:0.7rem; font-weight:700; letter-spacing:.2px; }
.cart__close{
  inline-size:32px; block-size:32px; border:0; border-radius:10px;
  background:transparent; font-size:14px; color:rgba(0,0,0,.68); cursor:pointer;
}
.cart__close:hover{ background:transparent; }

/* ---------- Body ---------- */
.cart__body{
  flex:1; overflow:auto; padding:30px var(--pad-x) 22px;
  display:grid; gap:var(--gap);
}
.cart__body::-webkit-scrollbar{ width:10px; }
.cart__body::-webkit-scrollbar-thumb{ background:#e6e6e8; border-radius:0px; }
.cart__empty{
  display:block; margin:6px 0 0; padding:16px;
  border:1px dashed var(--border); border-radius:12px;
  background:#fafafb; color:rgba(0,0,0,.6); font-size:.95rem;
}

/* ---------- Items ---------- */
.cart__list{ display:block; }
.cart-item{
  display: grid;
  grid-template-columns: var(--thumb) 1fr;      /* 왼쪽: 썸네일, 오른쪽: 내용 */
  grid-template-rows: auto auto auto;           /* 위: 타이틀, 중간: 수량, 아래: 가격 */
  grid-template-areas:
    "thumb title"
    "thumb qty"
    "thumb price";
  align-items: start;
  gap: 10px 14px;                                /* 행 간격 / 열 간격 */
  position: relative;  
  padding:8px 0;
  border-bottom:1px dashed var(--border);
}
.cart-item .thumb{ grid-area: thumb; line-height: 0; }
.cart-item .thumb img{
  inline-size: var(--thumb);
  block-size : var(--thumb);
  object-fit: cover;
  border-radius:0px; 
  background:#f4f4f6; 
  display:block;
}
.cart-item .meta{ grid-area: title; display: grid; gap: 4px; min-width: 0; }
.cart-item .title{
  font-size:.8rem;   padding:20px 10px;
  font-weight:500; color:#111; 
  text-decoration:none;
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}
.cart-item .variant{ font-size:.82rem; color:var(--muted); }



/* Qty & remove */
.qty{ display:flex; align-items:center; gap:10px; }
.qty .btn{
  inline-size:0px; block-size:10px; border-radius:0px;
  border:0px solid #dedfe2; background:transparent; display:grid; place-items:center;
  cursor:pointer; line-height:0;
}
.qty .btn:hover{ background:transparent; }

.qty .num{ min-width:26px; text-align:center; font-size:.88rem; }
/* 2행: 수량 */
.cart-item .qty{
  grid-area: qty;
  justify-self: start;          /* 왼쪽 정렬 */
  display: inline-flex; gap: 10px; align-items: center;
}
/* 3행: 가격 */
.cart-item .price{
  grid-area: price;
  justify-self: start;          /* 왼쪽 정렬 (오른쪽 두고 싶으면 end) */
  white-space: nowrap;
  font-size: .8rem; padding:0px 13px;
}

.cart-item .remove{
  position: absolute;
  right: 6px; top: 6px;
  margin-left:8px; 
  inline-size: 28px; block-size: 28px;
  box-shadow: 0 0px 0px rgba(0,0,0,.12);
  border-radius: 999px;
  border:0px solid #e8e8ea; 
  background:#fff; 
  cursor:pointer; 
  display: grid;
  place-items:center;
  font-size: .6rem;
}

/* ---------- Footer ---------- */
.cart__foot{
  position:sticky; bottom:0; z-index:2; background:#fff;
  padding:16px var(--pad-x) calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  display:grid; gap:12px;
  box-shadow:0 -18px 28px -16px rgba(0,0,0,.16);
}
.line{ display:flex; justify-content:space-between; align-items:center; }
.line.small{ font-size:.6rem; color:var(--muted); }
.pp-subtotal{ font-weight:700; font-size:.9rem; }

/* Buttons */
.btn, .btn--primary{
  display:block; width:100%; text-align:center; cursor:pointer;
  padding:14px 16px; font-size:.9rem; border-radius:0px;
  border:1px solid #dcdcdc; background:#fff; transition:filter .15s ease, background .15s ease;
}
.btn:hover{ background:var(--ghost); }
.btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.btn--primary{ background:#111; color:#fff; border-color:#111; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.btn--primary:hover{ filter:brightness(.96); }
.cart__foot .btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.cart__alpha{
  display:inline-block;
  margin-left:8px;
  padding:2px 6px;
  border:1px solid #e3e3e6;
  border-radius:999px;
  background:#fafafb;
  font-size:11px;
  color:#555;
  vertical-align:middle;
}

/* ---------- Utilities ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px){

  :root{ --thumb: 120px; }

  #cart{ --pad-x:18px; inline-size:min(480px, 100vw); }
  .cart-item{gap: 8px 10px; grid-template-columns:60px 1fr auto; }
  .cart-item .price{ justify-self:end; }
  .qty{ margin-left:auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #cart, #cart-backdrop, #search-backdrop{ transition:none !important; backdrop-filter:none !important; }
}