/* ============================================================
   themes/dodon/style/cart.css
   장바구니 (cart/index.php) 전용
   로드: cart_controller::index() 의 $additionalCss
   ------------------------------------------------------------
   목업 cart.css 에서 뺀 것
     .cart-hero (남색 히어로 + 통계 4칸)  화면 열자마자 목록이 보이는 게 낫다
     .info-grid / .side-card 2개          배송·결제 안내는 상세에 이미 있음
     .notice-banner                       담기 팝업이 이미 알려줌
     .pill 뱃지                           장바구니에선 카테고리·재고표시 불필요
     소계/부가세/배송비                   계산 로직이 없다. 합계 한 줄만

   .qty-control 은 _base.css 에 있다 (상세와 공용)
   ============================================================ */

.cart-page{ background:var(--background); }

.cart-section{ padding:20px 0 40px; }

.cart-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:20px;
  align-items:start;
}


/* ============================================================
   머리
   ============================================================ */
.cart-main{ min-width:0; }

.cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.cart-head h1{
  margin:0;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.5px;
}
.cart-head .count{
  margin-left:6px;
  color:var(--accent2);
}
.cart-head-tools{
  display:flex;
  align-items:center;
  gap:16px;
}
.check-all{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.cart-clear{
  border:0;
  background:none;
  padding:0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.cart-clear:hover{ color:#C0392B; text-decoration:underline; }


/* ============================================================
   목록
   ============================================================ */
/* 같은 성격끼리는 붙여서 한 덩어리로 보이게 한다.
   테두리를 겹쳐 1px 로 만들고, 사이 여백을 없앤다. */
.cart-group{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:#fff;
}
.cart-item + .cart-item{ border-top:1px solid var(--line); }

/* 체크 / 썸네일 / 본문 / 수량 / 금액 */
.cart-item{
  display:grid;
  grid-template-columns:34px 88px minmax(0, 1fr) auto auto;
  grid-template-areas:"check thumb body qty price";
  align-items:center;
  gap:14px;
  padding:14px;
}
/* 체크 해제된 줄은 흐리게 — 어떤 게 계산에 들어가는지 한눈에 */
.cart-item.is-unchecked{ background:#FAFBFA; }
.cart-item.is-unchecked .item-thumb,
.cart-item.is-unchecked .item-body{ opacity:.5; }

.item-check{
  grid-area:check;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.item-check input,
.check-all input{
  width:17px;
  height:17px;
  accent-color:var(--accent);
  cursor:pointer;
}

.item-thumb{
  grid-area:thumb;
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  padding:8px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #FBFCFB, #F4F5F1);
}
.item-thumb img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.item-body{ grid-area:body; min-width:0; }
.item-name{
  margin:0;
  font-size:16px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.3px;
}
.item-name a:hover{ color:var(--accent2); text-decoration:underline; }
.item-options{
  margin:6px 0 0;
  color:#4E5C69;
  font-size:13px;
  font-weight:600;
  line-height:1.55;
  word-break:break-all;   /* 기관명·바코드번호가 길어도 칸을 밀지 않게 */
}
.item-unit{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.item-qty{ grid-area:qty; }

.item-price{
  grid-area:price;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:110px;
}
.line-total{
  font-size:18px;
  font-weight:900;
  white-space:nowrap;
}
.line-quote{
  font-size:15px;
  font-weight:900;
  color:var(--quote_green);
  white-space:nowrap;
}
.item-del{
  border:0;
  background:none;
  padding:0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.item-del:hover{ color:#C0392B; text-decoration:underline; }


/* ── 가격문의 구분선 ── */
.cart-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:26px 0 10px;
  color:var(--quote_green);
  font-size:14px;
  font-weight:900;
}
.cart-divider::before,
.cart-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.cart-divider::before{ flex:0 0 12px; }

.quote-hint{
  margin:0 0 10px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}


/* 비었을 때 */
.cart-empty{
  padding:56px 20px;
  border:1px dashed color-mix(in srgb, var(--line) 72%, var(--accent));
  background:rgba(255,255,255,.72);
  text-align:center;
}
.cart-empty p{
  margin:0 0 18px;
  color:var(--muted);
  font-weight:700;
}
.cart-empty .btn{ padding:11px 20px; }


/* ============================================================
   요약 카드
   ============================================================ */
.cart-side{
  position:sticky;
  top:106px;   /* 헤더 2줄 높이 */
}
.summary-card{
  padding:20px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 28px rgba(36,50,71,.06);
}
.summary-card h2{
  margin:0 0 16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:17px;
  font-weight:900;
}

.summary-rows{
  display:grid;
  gap:9px;
  margin-bottom:16px;
}
.summary-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}
.summary-row > span{ color:var(--muted); font-weight:700; }
.summary-row > strong{ font-weight:800; }
.summary-row[hidden]{ display:none; }
#quoteCount{ color:var(--quote_green); }

.summary-total{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--line);
  margin-bottom:4px;
}
.summary-total > span{ font-size:14px; font-weight:800; }
.summary-total > strong{
  font-size:26px;
  font-weight:900;
  line-height:1;
  color:var(--price_red);
}
.summary-note{
  margin:0 0 18px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-align:right;
}
.login-note{
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  text-align:center;
}

.summary-actions{
  display:grid;
  gap:8px;
}
.summary-actions .btn{
  width:100%;
  height:46px;
  border-radius:0;
  font-size:14px;
  font-weight:900;
}
.btn-order{
  height:50px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-size:15px;
}
.btn-order:hover{ background:var(--accent2); border-color:var(--accent2); }

/* 견적 2개는 나란히 */
.btn-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.btn-quote{
  border:1px solid color-mix(in srgb, var(--quote_green) 42%, var(--line));
  background:#fff;
  color:var(--quote_green);
}
.btn-quote:hover{
  border-color:var(--quote_green);
  background:color-mix(in srgb, var(--quote_green) 8%, white);
}

.btn-keep{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}
.btn-keep:hover{ background:#F4F5F1; }

/* 조건 안 맞을 때 — 버튼은 남기고 못 누르게만.
   숨기면 "왜 없지?" 가 되고, 남기면 이유를 title 로 알려줄 수 있다 */
.summary-actions .btn:disabled{
  border-color:#CBD5E1;
  background:#E2E8F0;
  color:#94A3B8;
  cursor:not-allowed;
}


/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1000px){
  .cart-layout{ grid-template-columns:1fr; }
  .cart-side{ position:static; }
}

@media (max-width:680px){
  .cart-section{ padding:14px 0 28px; }

  /* 체크·썸네일은 왼쪽에 두고, 오른쪽에 본문 → 수량·금액 순으로 쌓는다 */
  .cart-item{
    grid-template-columns:28px 72px minmax(0, 1fr);
    grid-template-areas:
      "check thumb body"
      ".     qty   price";
    gap:10px 12px;
  }
  .item-thumb{ width:72px; height:72px; }
  .item-name{ font-size:15px; }
  .item-qty{ align-self:center; }
  .item-price{
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-width:0;
  }
  .cart-head h1{ font-size:20px; }
  .cart-head-tools{ width:100%; justify-content:space-between; }
}

@media (max-width:420px){
  /* 수량과 금액이 한 줄에 안 들어간다 */
  .cart-item{
    grid-template-areas:
      "check thumb body"
      ".     qty   qty"
      ".     price price";
  }
  .item-price{ justify-content:flex-start; }
}

/* 견적요청 모달 — 메모칸 */
#quoteReqMemo {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13.5px;
  resize: vertical;
}