@charset "utf-8";
/* ============================================================================
   card_cart_white.css v1.4.0 — 2026-10-07  PC 생활재 카드 담기 버튼 = 불투명 흰 원 1종(사용자 지시)
   ----------------------------------------------------------------------------
   무엇 — PC 모든 화면 카드의 사진 위 원형 담기 버튼을 겉모양 하나로 맞춘다.
     바탕 #fff(불투명) · 테두리 1px rgba(47,75,51,.10) · 그림자 0 1px 4px rgba(0,0,0,.12) + 0 2px 8px rgba(31,40,30,.18) ·
     장바구니 아이콘 #3d6041 · 호버 #eaf1e8
     (진회색 반투명 cb·cr·msj, 흰 92% mzr·thm·메인 후기 카드 .rvm_prod_cart(v1.3.0), 테두리 #e6e6e6/아이콘 #1d271e 목록형, 기획전 "+" 를 모두 이 값으로)
   지키는 것
     · 위치·클릭 동작 무변경. 크기는 모두 44px(v1.2.0 — 38px cb·cr·msj, 36px cfv 를 44px 로).
     · 모바일 무변경 — commScripts.jsp 의 PC(mobile eq 'shop') 분기에서만 로드.
     · 품절(.soldout)·주문 차단(.bbvz-off/.bbvz-blocked)·예약/택배예약 문구(.res/.gift)·가로형 1장(.msj-rail-solo)은 대상 아님.
   덮어쓰기
     화면별 시트·photo_box.css 가 이 시트보다 늦게 로드되고 특이도가 제각각이라 겉모양 속성에 한해 !important.
     품절·주문 차단은 :not 으로 비켜 가므로 그쪽 회색 규칙은 그대로 산다.
   롤백 = commScripts.jsp 의 이 시트 링크 1줄 삭제.
   ============================================================================ */

/* ── 1) 공통 겉모양 — 모든 대상 버튼 ── */
html body :is(
  .main_section1_mdchoice .mzr_cart,
  .thm_v2 .thm_cart,
  .main_section_review .rvm_product .rvm_prod_cart,
  .cb-card .cb-bd > .cb-addbtn,
  .cr-card .cr-bd > .cr-addbtn,
  .msj-rail:not(.msj-rail-solo) .msj-card .body > .msj-addbtn,
  .rvtm-sec .rvtm-gcard > .rvtm-addbtn,
  .gnbp_recom .rcb1_card .rcb1_add,
  .main_section5.ngv2 .product_type1 > li > a.cart,
  .main_section4.ts_band .ms4_prod_wrap .swiper-slide > a.cart,
  .gnbp .pgrid:not(.bnc_grid) > li > .pc_cart:not(.res):not(.gift),
  .product_list_wrap.oaz .product_type1 .pc_cart:not(.res):not(.gift),
  .product_list_wrap.oaz .cmz_card .cmz_add,
  .product_list_wrap.vcz #id_goodsList .cart,
  .product_list_wrap.vcz .section_goodslist_best .box_cart a,
  .pgz .pgz-addbtn,
  .plan_b .product_type4:not(.pb-one) .content .cart,
  .plan_b .pb-tsband .ms4_prod_wrap.tspc-cnt .swiper-slide .cart,
  #catzMega .catz-bd > .catz-add,
  #catzMega .cfv-bd > .cfv-add
):not(.soldout):not(.bbvz-off):not(.bbvz-blocked){
  background-color:#fff !important; color:#3d6041 !important;
  border:1px solid rgba(47,75,51,.10) !important;
  /* v1.4.0 흰 배경 사진 위에서도 둘레가 보이게 옅은 그림자 한 겹(0 1px 4px rgba(0,0,0,.12))을 기존 그림자 앞에 더한다 */
  box-shadow:0 1px 4px rgba(0,0,0,.12), 0 2px 8px rgba(31,40,30,.18) !important;
  opacity:1 !important;
}

/* ── 2) 아이콘 — 버튼 안 svg 를 쓰는 화면은 색(currentColor)만, 배경그림을 쓰는 화면은 같은 초록 카트 그림으로 ── */
html body :is(
  .main_section1_mdchoice .mzr_cart,
  .thm_v2 .thm_cart,
  .main_section_review .rvm_product .rvm_prod_cart,
  .cb-card .cb-bd > .cb-addbtn,
  .cr-card .cr-bd > .cr-addbtn,
  .msj-rail:not(.msj-rail-solo) .msj-card .body > .msj-addbtn,
  .rvtm-sec .rvtm-gcard > .rvtm-addbtn,
  .gnbp_recom .rcb1_card .rcb1_add,
  .product_list_wrap.oaz .cmz_card .cmz_add
):not(.soldout):not(.bbvz-off):not(.bbvz-blocked) svg{ color:#3d6041 !important; stroke:currentColor; }

html body :is(
  .main_section5.ngv2 .product_type1 > li > a.cart,
  .main_section4.ts_band .ms4_prod_wrap .swiper-slide > a.cart,
  .gnbp .pgrid:not(.bnc_grid) > li > .pc_cart:not(.res):not(.gift),
  .product_list_wrap.oaz .product_type1 .pc_cart:not(.res):not(.gift),
  .product_list_wrap.vcz #id_goodsList .cart,
  .product_list_wrap.vcz .section_goodslist_best .box_cart a,
  .pgz .pgz-addbtn,
  .plan_b .product_type4:not(.pb-one) .content .cart,
  .plan_b .pb-tsband .ms4_prod_wrap.tspc-cnt .swiper-slide .cart,
  #catzMega .catz-bd > .catz-add,
  #catzMega .cfv-bd > .cfv-add
):not(.soldout):not(.bbvz-off):not(.bbvz-blocked){
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6041' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.1 11.2a1.6 1.6 0 0 0 1.6 1.3h8.5a1.6 1.6 0 0 0 1.6-1.3L21 8H6'/%3E%3Ccircle cx='9.6' cy='20' r='1.4'/%3E%3Ccircle cx='17.4' cy='20' r='1.4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important;
}
/* 기획전 카드는 아이콘이 "+" 글자(::before)였다 → 카트 그림으로 바꿨으니 "+" 는 감춘다 */
html body :is(
  .plan_b .product_type4:not(.pb-one) .content .cart,
  .plan_b .pb-tsband .ms4_prod_wrap.tspc-cnt .swiper-slide .cart
):not(.soldout):not(.bbvz-off):not(.bbvz-blocked)::before{ content:none !important; display:none !important; }
html body :is(
  .plan_b .product_type4:not(.pb-one) .content .cart,
  .plan_b .pb-tsband .ms4_prod_wrap.tspc-cnt .swiper-slide .cart
):not(.soldout):not(.bbvz-off):not(.bbvz-blocked){ background-size:21px 21px !important; }

/* ── 3) 호버 ── */
html body :is(
  .main_section1_mdchoice .mzr_cart,
  .thm_v2 .thm_cart,
  .main_section_review .rvm_product .rvm_prod_cart,
  .cb-card .cb-bd > .cb-addbtn,
  .cr-card .cr-bd > .cr-addbtn,
  .msj-rail:not(.msj-rail-solo) .msj-card .body > .msj-addbtn,
  .rvtm-sec .rvtm-gcard > .rvtm-addbtn,
  .gnbp_recom .rcb1_card .rcb1_add,
  .main_section5.ngv2 .product_type1 > li > a.cart,
  .main_section4.ts_band .ms4_prod_wrap .swiper-slide > a.cart,
  .gnbp .pgrid:not(.bnc_grid) > li > .pc_cart:not(.res):not(.gift),
  .product_list_wrap.oaz .product_type1 .pc_cart:not(.res):not(.gift),
  .product_list_wrap.oaz .cmz_card .cmz_add,
  .product_list_wrap.vcz #id_goodsList .cart,
  .product_list_wrap.vcz .section_goodslist_best .box_cart a,
  .pgz .pgz-addbtn,
  .plan_b .product_type4:not(.pb-one) .content .cart,
  .plan_b .pb-tsband .ms4_prod_wrap.tspc-cnt .swiper-slide .cart,
  #catzMega .catz-bd > .catz-add,
  #catzMega .cfv-bd > .cfv-add
):not(.soldout):not(.bbvz-off):not(.bbvz-blocked):is(:hover, :active){
  background-color:#eaf1e8 !important; border-color:rgba(47,75,51,.10) !important;
}

/* ── 4) 크기 = 44px 하나로 (v1.2.0 · 사용자 지시 "크기도 44px로 통일") ──
   38px 였던 카테고리별 베스트·요즘 확 뜨는·산지직송, 36px 였던 전체메뉴 추천 카드(.cfv)를 44px 로.
   자리는 각 화면의 right/bottom 앵커 그대로라 사진 우하단 모서리 간격은 변하지 않는다.
   주문 차단(.bbvz-off) 회색 버튼도 같은 크기 — 옆 안내 칩 자리 계산(basket_block_view.css)이 44px 기준이다. */
html body :is(
  .cb-card .cb-bd > .cb-addbtn,
  .cr-card .cr-bd > .cr-addbtn,
  .msj-rail:not(.msj-rail-solo) .msj-card .body > .msj-addbtn,
  #catzMega .cfv-bd > .cfv-add
):not(.soldout){
  width:44px !important; min-width:44px !important; max-width:44px !important;
  height:44px !important; min-height:44px !important; max-height:44px !important;
  aspect-ratio:1/1 !important; padding:0 !important;
}
html body #catzMega .cfv-bd > .cfv-add:not(.soldout){ background-size:21px 21px !important; }