@charset "utf-8";
/* =====================================================================
   cart_v2_skin.css — 장바구니 리뉴얼 STEP1 스킨 (라이브 cart0~3 · V2 DOM)
   ---------------------------------------------------------------------
   스코프  : .cartz2  (라이브 cart_wrap 에 병기). 미적용 화면 무영향.
   대상    : shop/cart/cart0~3.jsp (PC) · mobile/cart/cart0~3.jsp (모바일)
             = cart.do → CartController.displayCart 가 렌더하는 진짜 라이브 카트.
   원칙    : 겉모습만. 구조/로직/id/name/이벤트/DOM 무변경 = 색·타이포·간격·
             카드·라운드·그림자만. 담기·수량±·삭제·쿠폰·배송일·주문하기(FnBasketNext)·
             주문더하기(order-add) 로직 100% 무접촉. cartCommV2/cartComm0~3 무접촉.
   기반    : mockup/pay_redesign_v2.html 장바구니 파트 + 라이브 DOM 실측
             (cartComm0.jsp 주입 마크업 · order_ck.css .ckcart 검증셀렉터 재사용).
   브랜드  : 딥그린 #3d6041 + 주황 #f8a31e(무료배송 프로그레스 base 유지),
             페이지=연회색, 섹션=흰 카드(라운드16·은은한 그림자). 50~60대·모바일 우선.
   대비안전: 유색/어두운 base(초록 버튼·초록 금액·주황 프로그레스)에는 색 미지정
             = 크기·라운드·그림자·여백만. 새 배경/글자색은 흰/연회색 base 위 어두운 글자.
   PC/모바일 분리: 모바일=.cartz2 .cart_content / PC=.cartz2 .content_area (한 파일 양기기).
   2026-07-30
   ===================================================================== */

.cartz2{
  --g:#3d6041; --gd:#2d4a31; --or:#f8a31e; --ink:#1d271e; --sub:#5f6f61;
  --card:#fff;            /* 카드 흰색 base */
  --cardln:#e6ece2;       /* 카드 테두리(연회색) */
  --cardsh:0 3px 14px rgba(45,74,49,.07);  /* 은은한 그림자 */
}

/* 페이지 배경(연회색). 모바일=.cart_content 존재 / PC=.content_area 존재 로 분기.
   :has 미지원 브라우저 = 흰색 폴백(무해). */
.cartz2:has(.cart_content){ background:#eef2ea; }   /* 모바일 */
.cartz2:has(.content_area){ background:#f4f7f3; }   /* PC */


/* =======================  모바일 (.cartz2 .cart_content)  ======================= */

.cartz2 .cart_content{ background:transparent; }

/* ── 상단 탭: 흰 base·큰 터치(활성 초록글자·초록 언더라인 base 유지, 크기만) ── */
.cartz2 .cart_tab_wrap ul{ background:#fff; border-bottom:1px solid #e6ece2; }
.cartz2 .cart_tab_wrap li a{ font-size:16.5px; padding:19px 0; letter-spacing:-.02em; }
.cartz2 .cart_tab_wrap li.on a{ font-weight:800; }
.cartz2 .cart_tab_wrap li.on a:after{ height:3px; border-radius:3px 3px 0 0; }

/* ── 배송/주소 = 흰 카드 (base .address_wrap #fff → 라운드·그림자·여백만, 어두운 글자 유지) ── */
.cartz2 .cart_content .cart_body > .address_wrap{
  background:var(--card); margin:14px 13px 0; border:1px solid var(--cardln);
  border-bottom:1px solid var(--cardln); border-radius:16px; box-shadow:var(--cardsh);
  padding:18px 16px 16px;
}
.cartz2 .cart_content .cart_body > .address_wrap th{ font-size:15px; }
.cartz2 .cart_content .cart_body > .address_wrap td{ font-size:15px; line-height:1.5; }
.cartz2 .cart_content .cart_body > .address_wrap .btn_modify{
  min-height:34px; line-height:32px; padding:0 12px; font-size:12.5px; border-radius:999px;
}
.cartz2 .cart_content .cart_body > .address_wrap .more{
  background:#f3f6f2; font-size:14px; height:46px; line-height:46px; border-radius:12px;
  margin-top:16px;
}
.cartz2 .cart_content .cart_body > .address_wrap .more:after{ margin-top:16px; }

/* ── 주문더하기/이벤트 제목: 크기·굵기만(색은 base 유지 = 유색 밴드 위 대비 안전) ── */
.cartz2 .cart_content .form_title{ font-size:16px; font-weight:800; }

/* ── 상품 리스트 컨테이너: 투명(페이지 연회색 비침) ── */
.cartz2 .cart_content .prod_list{ background:transparent; border-top:0; margin-top:0; padding:0; }

/* ── 전체선택/삭제 줄 = 흰 카드 (base 색 무변경, 카드화·크기만) ── */
.cartz2 .cart_content .prod_chk_wrap{
  background:var(--card); margin:14px 13px 0; border:1px solid var(--cardln); border-bottom:1px solid var(--cardln);
  border-radius:14px; box-shadow:var(--cardsh); padding:15px 16px;
}
.cartz2 .cart_content .prod_chk_wrap .check_wrap label{ font-size:15.5px; font-weight:700; }
.cartz2 .cart_content .prod_chk_wrap .delete_box a{ font-size:12.5px; }

/* ── 상품영역: 투명 트레이(페이지 비침) ── */
.cartz2 .cart_content .content_list{ background:transparent; padding:8px 13px 4px; }

/* ── 무료배송 프로그레스 = 흰 카드 (바 색=주황 base 유지, 카드/여백만) ── */
.cartz2 .cart_content .content_list .percent_wrap{
  background:var(--card); border:1px solid var(--cardln); border-radius:14px; box-shadow:var(--cardsh);
  padding:15px 16px 17px; margin-bottom:13px; position:relative;
}
.cartz2 .cart_content .content_list .percent_wrap .txt{ font-size:14.5px; font-weight:700; }
.cartz2 .cart_content .content_list .percent_wrap .bar_wrap .back{ height:10px; border-radius:6px; background:#eef1ec; }
.cartz2 .cart_content .content_list .percent_wrap .bar_wrap .in{ height:10px; border-radius:6px; }

/* ── 상품 카드: 흰 배경·라운드18·그림자·넉넉한 패딩 (base 색 무변경) ── */
.cartz2 .cart_content .content_list .content{
  background:var(--card); border:1px solid #e8ede5; border-radius:18px; box-shadow:0 3px 16px rgba(45,74,49,.08);
  padding:17px 16px; margin-bottom:13px;
}
.cartz2 .cart_content .content_list .content + .content{ border-top:1px solid #e8ede5; }
.cartz2 .cart_content .content_list .content .img_wrap{ width:76px; }
.cartz2 .cart_content .content_list .content .img_wrap img{ height:76px; border-radius:12px; border:1px solid #eaeaea; }
.cartz2 .cart_content .content_list .content .txt_box{ padding-left:14px; }
.cartz2 .cart_content .content_list .content .txt_box .tt{ font-size:16.5px; font-weight:600; line-height:1.42; }
.cartz2 .cart_content .content_list .content .txt_box .s_price{ font-size:13.5px; margin-top:5px; }
.cartz2 .cart_content .content_list .content .txt_box .b_price{ font-size:21px; font-weight:800; margin-top:3px; }
.cartz2 .cart_content .content_list .content .spinner_box{ width:118px; height:44px; border-radius:12px; }
.cartz2 .cart_content .content_list .content .spinner_box .minus,
.cartz2 .cart_content .content_list .content .spinner_box .plus{ height:42px; width:36px; }
.cartz2 .cart_content .content_list .content .spinner_box .idx{ height:42px; }
.cartz2 .cart_content .content_list .content .spinner_box .idx input{ font-size:16px; height:42px; }
.cartz2 .cart_content .content_list .content .btn_delete{ width:34px; height:34px; }
.cartz2 .cart_content .content_list .content .con_coupon_wrap{
  background:#f3f6f2; border-radius:12px; padding:6px 10px 6px 12px; margin-top:16px;
}
.cartz2 .cart_content .content_list .content .con_coupon_wrap dt{ font-size:13px; }
.cartz2 .cart_content .content_list .content .con_coupon_wrap .con{ font-size:13px; }
.cartz2 .cart_content .content_list .content .con_coupon_wrap .con .btn_coupon{ height:36px; line-height:36px; font-size:13.5px; border-radius:8px; }
.cartz2 .cart_content .content_list .content .con_coupon_wrap .delete .btn{ height:34px; line-height:32px; font-size:12.5px; border-radius:8px; }

/* ── 금액 요약 = 흰 카드 (base total행·초록 금액 유지) ── */
.cartz2 .cart_content .price_wrap{
  background:var(--card); margin:14px 13px 24px;
  border:1px solid var(--cardln); border-radius:16px; box-shadow:var(--cardsh);
  padding:16px 4px 6px; overflow:hidden;
}
.cartz2 .cart_content .price_wrap th{ font-size:14px; padding-left:16px; }
.cartz2 .cart_content .price_wrap td{ padding-right:16px; }
.cartz2 .cart_content .price_wrap td .roboto{ font-size:14.5px; }
.cartz2 .cart_content .price_wrap .total th{ font-size:16px; padding-left:16px; }
.cartz2 .cart_content .price_wrap .total td{ font-size:17px; padding-right:16px; }
.cartz2 .cart_content .price_wrap .total td .roboto{ font-size:27px; }

/* ── 하단 주문바: 흰 트레이 + 딥그린 알약버튼(초록 base+흰글자 유지, 크기·라운드·그림자만) ── */
.cartz2 .cart_content .btn_wrap{
  background:#fff;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid #e9ede6;
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 26px rgba(31,45,30,.14);
}
.cartz2 .cart_content .btn_wrap .btn_green{
  height:58px; line-height:58px; font-size:18.5px; font-weight:800; letter-spacing:.01em;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(45,74,49,.30);
}
.cartz2 .cart_content .btn_wrap .btn_green .roboto{ font-size:23px; }


/* =======================  PC/샵 (.cartz2 .content_area)  ======================= */

/* ── 상단 제목·탭 ── */
.cartz2 .cart_title{ color:var(--gd); }
.cartz2 > .inner > .cart_tab_wrap li.on a{ font-weight:800; }

/* ── 배송/주소 = 흰 카드 (base .address_wrap #fff → 라운드·그림자·여백만) ── */
.cartz2 .content_area .content_wrap .address_wrap{
  background:#fff; border:1px solid var(--cardln); border-radius:16px; box-shadow:var(--cardsh);
  padding:20px 22px; margin-bottom:22px;
}
.cartz2 .content_area .content_wrap .address_wrap .more{ border-radius:12px; }

/* ── 전체선택/삭제 줄: 여백 (base 흰 base) ── */
.cartz2 .content_area .content_wrap .prod_chk_wrap{ padding-bottom:14px; }
.cartz2 .content_area .content_wrap .prod_chk_wrap .delete_box a{ font-size:17px; }

/* ── 무료배송 프로그레스: 바 라운드(주황 base 유지) ── */
.cartz2 .content_area .content_wrap .percent_wrap .bar_wrap .back{ border-radius:8px; }
.cartz2 .content_area .content_wrap .percent_wrap .txt{ font-size:16px; }

/* ── 상품 = 흰 카드 (base 색 무변경, 카드화·여백만) ── */
.cartz2 .content_area .content_wrap .content{
  background:#fff; border:1px solid #e8ede5; border-radius:16px; box-shadow:0 3px 14px rgba(45,74,49,.06);
  padding:26px 24px; margin-bottom:16px;
}
.cartz2 .content_area .content_wrap .content.soldout{ opacity:.86; }
.cartz2 .content_area .content_wrap .content .prod .txt_box .tt{ font-size:20px; font-weight:700; }
.cartz2 .content_area .content_wrap .content .prod .txt_box .b_price,
.cartz2 .content_area .content_wrap .content .sum_quantity .b_price{ font-size:22px; font-weight:700; }
.cartz2 .content_area .content_wrap .content .prod .img_wrap img{ border-radius:12px; }
.cartz2 .content_area .content_wrap .content .sum_quantity .spinner_box{ border-radius:12px; }
.cartz2 .content_area .content_wrap .content .con_coupon_wrap dt{ border-radius:10px 0 0 10px; }
.cartz2 .content_area .content_wrap .content .con_coupon_wrap .btn_box{ border-radius:0 10px 10px 0; }
.cartz2 .content_area .content_wrap .content .con_coupon_wrap .btn_box .btn_coupon{ height:40px; line-height:39px; font-size:16px; border-radius:8px; }

/* ── 결제 박스 = 흰 카드(오른쪽) (base total·초록 금액 유지) ── */
.cartz2 .content_area .price_box{
  background:#fff; border:1px solid #e2e8e1; border-radius:16px; box-shadow:0 4px 20px rgba(45,74,49,.08);
  overflow:hidden; padding-top:20px;
}
.cartz2 .content_area .price_box th{ font-size:18px; }
.cartz2 .content_area .price_box td .roboto{ font-size:19px; }
.cartz2 .content_area .price_box .total th{ font-size:19px; }
.cartz2 .content_area .price_box .total td{ font-size:19px; }
.cartz2 .content_area .price_box .total td .roboto{ font-size:26px; }
.cartz2 .content_area .price_box .btn_wrap{ padding:16px 16px 22px; }
.cartz2 .content_area .price_box .btn_wrap .btn_green{
  height:58px; line-height:58px; font-size:19px; font-weight:700; border-radius:14px;
  box-shadow:0 8px 18px rgba(45,74,49,.26);
}
.cartz2 .content_area .price_box .btn_wrap2 .btn_random{ border-radius:14px; }

/* ── 다크 모드 완화(연회색 페이지 base 유지, 카드 흰색 고정) ── */
@media (prefers-color-scheme: dark){
  .cartz2{ --sub:#5f6f61; }
}