@charset "utf-8";
/* ============================================================
   장바구니 리디자인 스킨 (Figma 시안 477:645 계열)

   공용 CSS(board.css / content.css)를 수정하지 않기 위해
   장바구니 페이지에서만 로드하는 전용 파일이다.
   옵션변경 모달(.option_change_modal01)은 #wrap 바깥에 있으므로
   모든 규칙을 .shop_wrappe01 하위로 한정하면 모달은 영향받지 않는다.

   content.css 의 "장바구니 다크" 블록이 !important 로 선언되어 있어
   여기서도 특이도를 한 단계 높이고 !important 를 병행한다.
   ============================================================ */

:root {
	--cart-navy: #0A2942;			/* 시안 그라디언트 시작색 */
	--cart-navy-fade: rgba(10, 41, 67, .14);	/* 시안 그라디언트 끝색(알파 14%) */
	--cart-line: #092042;			/* 카드 테두리 */
	--cart-line-soft: rgba(255, 255, 255, .10);
	--cart-accent: #00B8FC;
	--cart-btn-border: #24517B;
	--cart-radius: 10px;
	--cart-page-bg: #000000;		/* 페이지 배경 — 상품상세와 동일한 블랙, 반투명 그라디언트의 불투명 베이스 겸용 */
}

/* 페이지 배경을 상품상세(#000)와 통일 — 이 CSS는 장바구니에서만 로드됨 */
body {
	background-color: #000 !important;
}

.shop_wrappe01 {
	padding: 120px 0 80px;
	background-color: #000;
}

/* ── ① 상단 타이틀 박스 ─────────────────────────────────
   배경은 padding-box, 블루 그라디언트 테두리는 border-box 로
   분리해서 1px 그라디언트 보더를 만든다. */
.shop_wrappe01 .shop_tit_box01 {
	display: flex;
	align-items: center;
	min-height: 100px;
	padding: 20px 24px !important;
	border: 1px solid transparent !important;
	border-radius: var(--cart-radius);
	background:
		radial-gradient(125% 210% at 0% 0%, var(--cart-navy) 0%, var(--cart-navy-fade) 100%) padding-box,
		linear-gradient(var(--cart-page-bg), var(--cart-page-bg)) padding-box,
		linear-gradient(100deg, #0DAAFC 0%, #5163FE 100%) border-box;
	color: #fff !important;
}

.shop_wrappe01 .shop_tit_box01 .shop_tit01 {
	display: flex;
	align-items: center;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

/* ── ② 전체선택 / 전체삭제 행 ───────────────────────── */
.shop_wrappe01 .shop_prd_wrapper01 {
	margin-top: 40px;
	gap: 0 33px;
	align-items: flex-start;
}

.shop_wrappe01 .shop_prd_wrapper01 .left_box {
	width: calc(100% - 407px);
}

.shop_wrappe01 .shop_prd_all_chk_box01.flex {
	align-items: center;
	margin-bottom: 24px;
}

.shop_wrappe01 .shop_prd_all_chk_box01 label {
	display: flex;
	align-items: center;
}

.shop_wrappe01 .shop_prd_chk_box01 {
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	color: #fff !important;
}

.shop_wrappe01 .shop_prd_chk_box01 input {
	min-width: 22px;
	width: 22px;
	height: 22px;
	border-radius: 2px;
	border: 1px solid rgba(255, 255, 255, .45) !important;
	background: rgba(255, 255, 255, .06);
}

.shop_wrappe01 .shop_prd_chk_box01 input:hover {
	border-color: rgba(255, 255, 255, .8) !important;
}

.shop_wrappe01 .shop_prd_chk_box01 input:checked {
	border-color: #fff !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310A6FC' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

/* 전체 삭제 / 선택 삭제 버튼 (공통 스킨) */
.shop_wrappe01 #cart_all_delete_btn,
.shop_wrappe01 #cart_selected_delete_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 150px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--cart-line);
	border-radius: 5px;
	background: radial-gradient(150% 230% at 0% 0%, var(--cart-navy) 0%, var(--cart-navy-fade) 100%);
	font-size: 18px;
	font-weight: 700;
	color: #fff !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.shop_wrappe01 #cart_all_delete_btn:hover,
.shop_wrappe01 #cart_selected_delete_btn:hover {
	border-color: var(--cart-accent);
	box-shadow: 0 0 10px rgba(0, 184, 252, .25);
}

/* 기존 회색 아이콘 이미지는 감추고 시안의 블루 휴지통으로 대체 */
.shop_wrappe01 #cart_all_delete_btn img,
.shop_wrappe01 #cart_selected_delete_btn img {
	display: none;
}

.shop_wrappe01 #cart_all_delete_btn::before,
.shop_wrappe01 #cart_selected_delete_btn::before {
	content: "";
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B8FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 선택 삭제는 목록 하단 우측 */
.shop_wrappe01 .shop_prd_bottom_btn_box01 {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
	padding: 0;
}

/* ── ③ 상품 행 카드 ─────────────────────────────────
   시안: 1193x175, radius 10, 좌상단에서 우측으로 빠지는
   네이비 그라디언트 + 진한 네이비 테두리 + 미세 그림자 */
.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 {
	position: relative;
	gap: 25px;
	padding: 25px !important;
	margin-bottom: 24px;
	border: 1px solid var(--cart-line) !important;
	border-radius: var(--cart-radius);
	background: linear-gradient(100deg, var(--cart-navy) 0%, var(--cart-navy-fade) 42%);
	box-shadow: 1px 1px 4px rgba(8, 32, 64, .9);
}

/* 같은 상품 묶음의 마지막 행은 간격만 넓혀 그룹을 구분한다
   (카드형이라 기존 굵은 구분선은 사용하지 않음) */
.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01.product_group_last {
	border-bottom: 1px solid var(--cart-line) !important;
	padding-bottom: 25px !important;
	margin-bottom: 40px;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_sub_box01 {
	align-items: center;
	gap: 14px;
	width: 160px;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_sub_box01 .shop_prd_img_box01 {
	width: calc(100% - 36px);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .07);
	background: rgba(255, 255, 255, .04);
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_info_box01 {
	width: calc(100% - 185px);
	gap: 6px;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_tit01 {
	font-size: 20px !important;
	font-weight: 700;
	color: #fff !important;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price01 {
	font-size: 22px;
	font-weight: 700;
	color: #fff !important;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price01 span {
	font-size: 15px;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price_box01 .shop_prd_discount01 {
	font-size: 15px;
	color: #6D8299 !important;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price_box01 .shop_prd_percent01 {
	font-size: 17px;
	color: #FF5B52 !important;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price_box01 .shop_prd_price01 .grade_label {
	font-size: 13px;
	color: #7F93A8 !important;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_alt_box01 {
	margin: 4px 0 10px;
	font-size: 15px;
	color: #8FA3B8 !important;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_alt_box01:empty {
	display: none;
}

.shop_wrappe01 .shop_prd_wrapper01 .option_detail_box0001 {
	font-size: 15px;
	color: #B8C8D8;
}

/* 옵션 변경 버튼 — 시안 버튼 톤(다크 + 블루 라인) */
.shop_wrappe01 .shop_prd_wrapper01 .option_modal_btn01 {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	margin-left: auto;
	margin-right: 0 !important;
	border: 1px solid var(--cart-btn-border);
	border-radius: 5px;
	background: linear-gradient(90deg, #07223D 0%, #0B1829 100%);
	font-size: 14px;
	font-weight: 600;
	color: #fff !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.shop_wrappe01 .shop_prd_wrapper01 .option_modal_btn01:hover {
	border-color: var(--cart-accent);
	box-shadow: 0 0 10px rgba(0, 184, 252, .25);
}

/* 행 삭제(X) */
.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_cancle_btn01 span {
	background-color: #7F93A8;
}

.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_cancle_btn01:hover span {
	background-color: #fff;
}

/* ── ④ 우측 주문상품 요약 카드 ───────────────────────── */
.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_quick_box01 {
	width: 374px;
	padding: 30px 26px 26px !important;
	top: 100px;
	border: 1px solid var(--cart-line) !important;
	border-radius: var(--cart-radius);
	background: radial-gradient(125% 125% at 0% 0%, var(--cart-navy) 0%, var(--cart-navy-fade) 100%) !important;
	box-shadow: 1px 1px 4px rgba(8, 32, 64, .9);
}

.shop_wrappe01 .shop_prd_info_quick_tit01 {
	font-size: 24px;
	font-weight: 700;
	color: #fff !important;
}

/* 시안에는 항목 사이 구분선이 없고 여백으로만 구분한다 */
.shop_wrappe01 .shop_prd_info_quick_alt_box01 {
	padding: 0;
	margin: 30px 0 0;
	border-top: 0 !important;
	border-bottom: 0 !important;
}

.shop_wrappe01 .shop_prd_info_quick_alt {
	gap: 10px;
	flex-wrap: wrap;
}

.shop_wrappe01 .shop_prd_info_quick_alt .tit {
	font-size: 17px;
	font-weight: 700;
	color: #fff !important;
}

.shop_wrappe01 .shop_prd_info_quick_alt .price01 {
	font-size: 18px;
	font-weight: 700;
	color: #fff !important;
}

.shop_wrappe01 .shop_prd_info_quick_alt .price01 b {
	font-size: 23px;
	line-height: 1.1;
}

.shop_wrappe01 .shop_prd_info_quick_alt .price01 .blue {
	color: var(--cart-accent) !important;
}

.shop_wrappe01 .shop_prd_info_quick_alt + .shop_prd_info_quick_alt {
	margin-top: 14px;
}

/* 보유 쿠폰 예상 할인 — 기존 주황 대신 시안의 블루 계열로 통일 */
.shop_wrappe01 .cart_coupon_row {
	margin-top: 16px !important;
	padding: 12px 14px;
	border: 1px solid var(--cart-btn-border);
	border-radius: 5px;
	background: linear-gradient(100deg, rgba(0, 184, 252, .10) 0%, rgba(10, 41, 67, .14) 100%);
}

.shop_wrappe01 .cart_coupon_row .tit {
	font-size: 15px;
	color: var(--cart-accent) !important;
}

.shop_wrappe01 .cart_coupon_row .tit .coupon_own {
	margin-left: 4px;
	font-size: 12px;
	font-weight: 400;
	color: #8FA3B8;
}

.shop_wrappe01 .cart_coupon_row .price01 {
	color: var(--cart-accent) !important;
}

.shop_wrappe01 .cart_coupon_row .price01 b {
	font-size: 20px;
}

/* 할인된 총 주문금액(예상) */
.shop_wrappe01 .shop_prd_info_quick_result_box01 {
	margin-top: 38px;
}

.shop_wrappe01 .shop_prd_info_quick_result01 .tit {
	font-size: 20px;
	font-weight: 700;
	color: #fff !important;
}

.shop_wrappe01 .shop_prd_info_quick_result01 .price01 b {
	font-size: 25px;
	color: var(--cart-accent) !important;
}

.shop_wrappe01 .shop_prd_info_quick_result01 .price01 span {
	font-size: 20px;
	color: var(--cart-accent) !important;
}

/* 주문하기 / 견적서 출력 */
.shop_wrappe01 .shop_prd_info_quick_btn_box01 {
	margin-top: 26px;
}

.shop_wrappe01 .shop_prd_info_quick_btn_box01 .login_chk_btn01 {
	height: 50px;
	border-radius: var(--cart-radius);
	font-size: 16px;
	font-weight: 700;
	color: #fff !important;
	background: linear-gradient(90deg, #07223D 0%, #0B1829 100%) !important;
	border: 1px solid var(--cart-btn-border) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.shop_wrappe01 .shop_prd_info_quick_btn_box01 .login_chk_btn01:hover {
	border-color: var(--cart-accent) !important;
	box-shadow: 0 0 14px rgba(0, 184, 252, .35);
}

.shop_wrappe01 .shop_prd_info_quick_btn_box01 .login_chk_btn01.type02.black {
	color: #9FB3C8 !important;
	background: rgba(255, 255, 255, .03) !important;
	border-color: rgba(255, 255, 255, .14) !important;
}

/* 장바구니가 비었을 때 좌측 영역이 완전히 접히지 않도록 최소 높이 확보 */
.shop_wrappe01 .shop_prd_wrapper01 .left_box:has(.shop_prd_all_chk_box01:only-child) {
	min-height: 200px;
}

/* ── 반응형 ─────────────────────────────────────────
   기존 브레이크포인트(1024 / 768)를 그대로 사용한다.
   1024 이하에서 요약 카드는 목록 아래로 내려간다. */
@media all and (max-width: 1024px) {
	.shop_wrappe01 {
		padding: 90px 0 60px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 {
		gap: 30px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .left_box {
		width: 100%;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_quick_box01 {
		position: relative;
		top: unset;
		width: 100%;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_info_box01 {
		width: 100%;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .option_modal_btn01 {
		margin-left: auto;
	}
}

@media all and (max-width: 768px) {
	.shop_wrappe01 {
		padding: 80px 0 50px;
	}

	.shop_wrappe01 .shop_tit_box01 {
		min-height: 70px;
		padding: 16px 18px !important;
	}

	.shop_wrappe01 .shop_tit_box01 .shop_tit01 {
		font-size: 22px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 {
		margin-top: 26px;
	}

	.shop_wrappe01 .shop_prd_chk_box01 {
		font-size: 15px !important;
		gap: 8px;
	}

	.shop_wrappe01 .shop_prd_chk_box01 input {
		min-width: 20px;
		width: 20px;
		height: 20px;
	}

	.shop_wrappe01 #cart_all_delete_btn,
	.shop_wrappe01 #cart_selected_delete_btn {
		min-width: 0;
		height: 34px;
		padding: 0 12px;
		gap: 6px;
		font-size: 13px !important;
	}

	.shop_wrappe01 #cart_all_delete_btn::before,
	.shop_wrappe01 #cart_selected_delete_btn::before {
		width: 16px;
		height: 16px;
	}

	/* 상품마다 제목 길이에 따라 이미지가 위로 떨어지지 않도록
	   모바일에서는 이미지-정보 2단 배치를 고정한다 */
	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 14px;
		padding: 16px !important;
		margin-bottom: 14px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_info_tit_box01 {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price_box01 {
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
		gap: 8px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price_box01 .cartlist_close_btn {
		margin-left: auto;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01.product_group_last {
		margin-bottom: 24px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_sub_box01 {
		flex-shrink: 0;
		align-items: flex-start;
		width: 112px;
		gap: 10px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_sub_box01 .shop_prd_img_box01 {
		width: calc(100% - 30px);
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_box01 .shop_prd_info_box01 {
		flex: 1;
		width: auto;
		min-width: 0;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_tit01 {
		font-size: 15px !important;
		white-space: normal;
		word-break: keep-all;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price01 {
		font-size: 17px;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_price_box01 .shop_prd_discount01,
	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_alt_box01,
	.shop_wrappe01 .shop_prd_wrapper01 .option_detail_box0001 {
		font-size: 12px !important;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .option_modal_btn01 {
		height: 30px;
		padding: 0 12px;
		font-size: 12px !important;
	}

	.shop_wrappe01 .shop_prd_wrapper01 .shop_prd_info_quick_box01 {
		padding: 22px 18px 20px !important;
	}

	.shop_wrappe01 .shop_prd_info_quick_tit01 {
		font-size: 18px;
	}

	.shop_wrappe01 .shop_prd_info_quick_alt .tit {
		font-size: 14px;
	}

	.shop_wrappe01 .shop_prd_info_quick_alt .price01 b {
		font-size: 18px;
	}

	.shop_wrappe01 .shop_prd_info_quick_result01 .tit {
		font-size: 16px;
	}

	.shop_wrappe01 .shop_prd_info_quick_result01 .price01 b {
		font-size: 20px;
	}

	.shop_wrappe01 .shop_prd_info_quick_result01 .price01 span {
		font-size: 15px;
	}
}