@charset "utf-8"; /* ========================================================== 장바구니 전용 스타일 (www/shop/cart/index.jsp) - board.css 의 장바구니 공통 스타일(.shop_prd_*, .shop_prd_info_quick_* 등) 을 사이트 톤으로 오버라이드 - 마크업은 수량·옵션·쿠폰 계산 JS 와 얽혀 있어 유지, CSS 만 덮는다 (선택자는 #wrap.cart_page 로 스코프) - 톤: 영문 대제목 + 얇은 본문(300/400) + 1px 라인 + 다크 버튼 (로그인·마이페이지와 통일) ========================================================== */ /* ---------- 컨테이너 ---------- */ #wrap.cart_page {font-family:'Noto Sans KR', sans-serif; color:#2b2926;} #wrap.cart_page .shop_wrappe01 {padding:72px 0 128px;} #wrap.cart_page .shop_wrappe01 > .inner {max-width:1552px; padding:0 40px; box-sizing:border-box;} /* ---------- 페이지 제목 — 영문 대제목 + 다국어 소제목 ---------- */ #wrap.cart_page .shop_tit_box01 {padding:0 0 32px; border:0; border-bottom:1px solid #e6e3df;} #wrap.cart_page .shop_tit01 {font-size:0; line-height:1;} #wrap.cart_page .shop_tit01 .en {display:block; font-family:'Poppins', 'Noto Sans KR', sans-serif; font-size:40px; font-weight:300; font-style:normal; line-height:1; letter-spacing:0.02em; color:#2b2926;} #wrap.cart_page .shop_tit01 .ko {display:block; margin-top:12px; font-size:14px; font-weight:300; letter-spacing:0.02em; color:#8e8883;} /* ---------- 좌측 목록 / 우측 요약 ---------- */ #wrap.cart_page .shop_prd_wrapper01 {margin-top:0; gap:0 64px;} #wrap.cart_page .shop_prd_wrapper01 .left_box {width:calc(100% - 424px);} /* 전체선택 / 전체삭제 */ #wrap.cart_page .shop_prd_all_chk_box01 {margin-bottom:0; padding:20px 0; border-bottom:1px solid #e6e3df; align-items:center;} #wrap.cart_page .shop_prd_chk_box01 {gap:12px; font-size:14px; font-weight:300; color:#736d68;} #wrap.cart_page .shop_prd_chk_box01 input {min-width:18px; width:18px; height:18px; border:1px solid #c9c4be; border-radius:0; background:#fff; cursor:pointer; transition:border-color 0.2s, background 0.2s;} #wrap.cart_page .shop_prd_chk_box01 input:hover {border-color:#2b2926;} #wrap.cart_page .shop_prd_chk_box01 input:checked {border-color:#2b2926; background:#2b2926 url('data:image/svg+xml,') no-repeat center / 12px 12px;} /* 전체삭제 · 선택삭제 · 옵션변경 — 테두리 버튼 → 밑줄 텍스트 링크 */ #wrap.cart_page .evaluation_tab_menu01 {display:inline-flex; min-width:0; height:auto; padding:0; border:0; border-radius:0; background:transparent; font-size:13px; font-weight:300; line-height:1.5; letter-spacing:0.02em; color:#8e8883; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#c9c4be; transition:color 0.2s, text-decoration-color 0.2s;} #wrap.cart_page .evaluation_tab_menu01:hover {color:#2b2926; text-decoration-color:#2b2926;} #wrap.cart_page .shop_prd_bottom_btn_box01 {padding:20px 0 0;} /* 상품 행 */ #wrap.cart_page .shop_prd_box01 {gap:28px; padding:32px 0; border-bottom:1px solid #f0eeeb;} #wrap.cart_page .shop_prd_box01.product_group_last {margin-bottom:0; padding-bottom:32px; border-bottom:1px solid #e6e3df;} #wrap.cart_page .shop_prd_box01 .shop_prd_sub_box01 {width:150px; gap:12px; align-items:flex-start;} #wrap.cart_page .shop_prd_box01 .shop_prd_sub_box01 .shop_prd_img_box01 {width:120px; border-radius:0; background:#f5f3f0;} #wrap.cart_page .shop_prd_box01 .shop_prd_info_box01 {width:calc(100% - 178px); justify-content:flex-start;} #wrap.cart_page .shop_prd_box01 .shop_prd_info_tit_box01 {align-items:flex-start;} #wrap.cart_page .shop_prd_box01 .shop_prd_info_tit01 {max-width:none; flex:1; min-width:0; font-size:17px; font-weight:400; line-height:1.5; letter-spacing:-0.01em; color:#2b2926;} /* 금액 — 정가(취소선) · 할인율(그린) · 판매가(Poppins) · 삭제 X */ #wrap.cart_page .shop_prd_box01 .shop_prd_price_box01 {gap:10px; align-items:baseline;} #wrap.cart_page .shop_prd_box01 .shop_prd_price_box01 .shop_prd_discount01 {font-size:14px; font-weight:300; color:#a8a29c;} #wrap.cart_page .shop_prd_box01 .shop_prd_price_box01 .shop_prd_percent01 {font-family:'Poppins', sans-serif; font-size:15px; font-weight:500; color:#2b6b4f;} #wrap.cart_page .shop_prd_price01 {align-items:baseline; font-size:20px; font-weight:400; color:#2b2926;} #wrap.cart_page .shop_prd_price01 b {font-family:'Poppins', 'Noto Sans KR', sans-serif; font-weight:500; letter-spacing:-0.01em;} #wrap.cart_page .shop_prd_price01 span {font-size:14px; font-weight:300; color:#736d68;} #wrap.cart_page .shop_prd_box01 .shop_prd_price_box01 .shop_prd_price01 .grade_label {font-size:12px; color:#8e8883;} #wrap.cart_page .shop_prd_cancle_btn01 {width:18px; height:18px; margin-left:8px; align-self:center; opacity:0.6; transition:opacity 0.2s;} #wrap.cart_page .shop_prd_cancle_btn01:hover {opacity:1;} #wrap.cart_page .shop_prd_cancle_btn01 span {background:#2b2926;} /* 상품 설명 · 옵션 */ #wrap.cart_page .shop_prd_info_alt_box01 {margin:6px 0 16px; font-size:13px; font-weight:300; line-height:1.6; color:#8e8883;} #wrap.cart_page .shop_prd_info_alt_box01:empty {display:none; margin:0;} #wrap.cart_page .shop_prd_info_option_box01.option_area {gap:0 20px; margin-top:auto; padding:12px 16px; background:#faf9f7;} #wrap.cart_page .option_detail_box0001 {font-size:13px; font-weight:300; line-height:1.6; color:#736d68;} #wrap.cart_page .shop_prd_info_option_box01 .option_modal_btn01 {margin-left:auto; white-space:nowrap;} /* 타임세일·등급제한 뱃지 — 각지게 */ #wrap.cart_page .timesale_badge {border-radius:0; padding:5px 10px; font-size:12px; letter-spacing:0.04em;} #wrap.cart_page .grade_restricted_badge {border-radius:0 !important;} /* 빈 장바구니 */ #wrap.cart_page .cart_empty {padding:96px 0; text-align:center;} #wrap.cart_page .cart_empty p {margin:0 0 24px; font-size:15px; font-weight:300; color:#8e8883;} #wrap.cart_page .cart_empty .btn_go_shop {display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 36px; border:1px solid #2b2926; font-size:14px; font-weight:400; letter-spacing:0.06em; color:#2b2926; transition:background 0.3s, color 0.3s;} #wrap.cart_page .cart_empty .btn_go_shop:hover {background:#2b2926; color:#fff;} /* ---------- 우측 주문 요약 (sticky) ---------- */ #wrap.cart_page .shop_prd_wrapper01 .shop_prd_info_quick_box01 {width:360px; padding:36px 32px 32px; border:1px solid #e6e3df; border-radius:0; top:112px;} #wrap.cart_page .shop_prd_info_quick_tit01 {font-size:20px; font-weight:300; letter-spacing:-0.02em; color:#2b2926;} #wrap.cart_page .shop_prd_info_quick_alt_box01 {margin:24px 0 20px; padding:24px 0; border-top:1px solid #e6e3df; border-bottom:1px solid #e6e3df;} #wrap.cart_page .shop_prd_info_quick_alt + .shop_prd_info_quick_alt {margin-top:12px;} #wrap.cart_page .shop_prd_info_quick_alt .tit {font-size:14px; font-weight:300; color:#8e8883;} #wrap.cart_page .shop_prd_info_quick_alt .price01 {align-items:baseline; font-size:15px; font-weight:400; color:#2b2926;} #wrap.cart_page .shop_prd_info_quick_alt .price01 b {font-family:'Poppins', 'Noto Sans KR', sans-serif; font-weight:400;} #wrap.cart_page .shop_prd_info_quick_alt .price01 span {font-size:13px; font-weight:300; color:#736d68;} /* 할인 금액 — 파랑 → 브랜드 그린 */ #wrap.cart_page .shop_prd_info_quick_alt .price01 .blue {color:#2b6b4f;} /* 쿠폰 예상 할인 (보유 수) */ #wrap.cart_page .shop_prd_info_quick_alt.coupon_row .coupon_cnt {margin-left:4px; font-size:12px; color:#a8a29c;} /* 배송비 지역 표기 (제주 등) — 빨강 → 회색 */ #wrap.cart_page .shop_prd_info_quick_alt .price01 .area_suffix {margin-left:4px; font-size:12px; font-weight:300; color:#a8a29c;} #wrap.cart_page .shop_prd_info_quick_alt .price01 .area_suffix:empty {display:none;} /* 총액 */ #wrap.cart_page .shop_prd_info_quick_result01 {align-items:baseline; font-size:15px; font-weight:400;} #wrap.cart_page .shop_prd_info_quick_result01 .tit {color:#2b2926;} #wrap.cart_page .shop_prd_info_quick_result01 .price01 {align-items:baseline; gap:0 3px;} #wrap.cart_page .shop_prd_info_quick_result01 .price01 b {font-family:'Poppins', 'Noto Sans KR', sans-serif; font-size:26px; font-weight:500; letter-spacing:-0.01em; color:#2b2926;} #wrap.cart_page .shop_prd_info_quick_result01 .price01 span {font-size:14px; font-weight:300; color:#736d68;} /* 버튼 — 주문하기(브랜드 그린 → 호버 진한 그린, 상품상세 바로구매와 동일) / 견적서(테두리) */ #wrap.cart_page .shop_prd_info_quick_btn_box01 {margin-top:28px;} #wrap.cart_page .shop_prd_info_quick_btn_box01 .login_chk_btn01 {height:56px; border-radius:0; border:1px solid #1f4d36; background:#1f4d36; font-size:15px; font-weight:400; letter-spacing:0.08em; color:#fff; transition:background 0.25s, border-color 0.25s, color 0.25s;} #wrap.cart_page .shop_prd_info_quick_btn_box01 .login_chk_btn01:hover {background:#153526; border-color:#153526; color:#fff;} #wrap.cart_page .shop_prd_info_quick_btn_box01 .login_chk_btn01.type02 {background:#fff; border-color:#d9d5d0; color:#2b2926;} #wrap.cart_page .shop_prd_info_quick_btn_box01 .login_chk_btn01.type02:hover {background:#fff; border-color:#2b2926;} #wrap.cart_page .shop_prd_info_quick_btn_box01 .login_chk_btn01 + .login_chk_btn01 {margin-top:10px;} /* ---------- 옵션변경 모달 — 각진 모서리·그린 버튼 ---------- */ .option_change_modal01 .modal01 {border-radius:0 !important;} .option_change_modal01 .modal01 .tit_box .tit {font-weight:400 !important; color:#2b2926;} .option_change_modal01 .login_submit_btn_box01 .login_chk_btn01 {height:48px; border-radius:0; border:1px solid #1f4d36; background:#1f4d36; font-size:14px; font-weight:400; letter-spacing:0.04em; color:#fff; transition:background 0.25s, border-color 0.25s;} .option_change_modal01 .login_submit_btn_box01 .login_chk_btn01:hover {background:#153526; border-color:#153526; color:#fff;} .option_change_modal01 .login_submit_btn_box01 .login_chk_btn01.type02 {background:#fff; border-color:#d9d5d0; color:#2b2926;} /* ---------- 반응형 ---------- */ @media all and (max-width:1200px){ #wrap.cart_page .shop_prd_wrapper01 {gap:0 40px;} #wrap.cart_page .shop_prd_wrapper01 .left_box {width:calc(100% - 360px);} #wrap.cart_page .shop_prd_wrapper01 .shop_prd_info_quick_box01 {width:320px; padding:28px 24px 24px;} } @media all and (max-width:1024px){ #wrap.cart_page .shop_wrappe01 {padding:48px 0 80px;} #wrap.cart_page .shop_wrappe01 > .inner {padding:0 24px;} #wrap.cart_page .shop_tit_box01 {padding-bottom:24px;} #wrap.cart_page .shop_tit01 .en {font-size:34px;} /* 요약 박스를 목록 아래로 */ #wrap.cart_page .shop_prd_wrapper01 {flex-direction:column; gap:40px 0;} #wrap.cart_page .shop_prd_wrapper01 .left_box, #wrap.cart_page .shop_prd_wrapper01 .shop_prd_info_quick_box01 {width:100%; position:static;} #wrap.cart_page .shop_prd_box01 {flex-wrap:nowrap; gap:20px; padding:24px 0;} #wrap.cart_page .shop_prd_box01 .shop_prd_sub_box01 {width:126px;} #wrap.cart_page .shop_prd_box01 .shop_prd_sub_box01 .shop_prd_img_box01 {width:96px;} #wrap.cart_page .shop_prd_box01 .shop_prd_info_box01 {width:calc(100% - 146px);} #wrap.cart_page .shop_prd_box01 .shop_prd_info_tit01 {font-size:15px;} #wrap.cart_page .shop_prd_price01 {font-size:18px;} } @media all and (max-width:640px){ #wrap.cart_page .shop_wrappe01 > .inner {padding:0 16px;} #wrap.cart_page .shop_tit01 .en {font-size:30px;} #wrap.cart_page .shop_prd_box01 {flex-wrap:wrap; gap:16px;} #wrap.cart_page .shop_prd_box01 .shop_prd_sub_box01 {width:100%;} #wrap.cart_page .shop_prd_box01 .shop_prd_info_box01 {width:100%;} #wrap.cart_page .shop_prd_box01 .shop_prd_info_tit_box01 {flex-direction:column; align-items:stretch; gap:8px;} #wrap.cart_page .shop_prd_box01 .shop_prd_price_box01 {margin-left:0; justify-content:flex-start;} #wrap.cart_page .shop_prd_info_option_box01.option_area {flex-wrap:wrap; gap:8px 16px;} #wrap.cart_page .shop_prd_wrapper01 .shop_prd_info_quick_box01 {padding:24px 20px 20px;} #wrap.cart_page .cart_empty {padding:64px 0;} }