@charset "utf-8";
/* rroys 장바구니 전용 스타일  (/data/rroys/css/cart_v2.css)
   2026-07-25 cart.asp page upgrade -- common.css 동시편집 충돌을 피해 별도 파일로 분리.
   cart.asp 가 html 에 .page_cart 클래스를 붙이므로 다른 페이지엔 영향 없음. */


/* 디자인 토큰 : common.css 와 동일값을 이 파일에도 정의해 단독으로도 동작하게 함 */
.page_cart {
	--rr-primary:        var(--sitecolor1, #FF0051);
	--rr-primary-2:      var(--sitecolor2, #FF66B3);
	--rr-primary-soft:   var(--sitecolor3, #FBEFEF);
	--rr-ink:            #17181C;
	--rr-ink-2:          #4B5158;
	--rr-ink-3:          #8B9199;
	--rr-ink-4:          #B4B9C0;
	--rr-line:           #E7E9ED;
	--rr-line-strong:    #D3D7DE;
	--rr-bg-soft:        #F7F8FA;
	--rr-radius:         14px;
	--rr-radius-sm:      10px;
	--rr-radius-xs:      6px;
	--rr-shadow-sm:      0 1px 2px rgba(23,24,28,.05), 0 2px 8px rgba(23,24,28,.05);
	--rr-shadow-md:      0 6px 20px rgba(23,24,28,.10);
	--rr-shadow-lift:    0 10px 26px rgba(23,24,28,.13);
	--rr-shadow-primary: 0 8px 20px color-mix(in srgb, var(--sitecolor1, #FF0051) 26%, transparent);
	--rr-tr:             .22s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   11. 장바구니 (/product/cart.asp)          2026-07-25 페이지 업그레이드
       · 라인색은 전부 --rr-line 으로 통일
       · 버튼은 라운딩 + 음영 + hover/active 트랜지션
       · 폰트 Pretendard, 여백/타이포/카드 정돈
       (메인컬러 #FF0051 = cfgColor1 은 그대로 승계)
   ========================================================================== */

/* ── 11-1. 주문 단계 인디케이터 ─────────────────────────────────────────── */
.page_cart .step_box {
	height: auto !important;
	overflow: visible !important;
	padding: 46px 0 6px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.page_cart .step_box h1,
.page_cart .step_box .step_box_title {
	float: none !important;
	margin-left: 0 !important;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em;
	color: var(--rr-ink);
}
.page_cart .step_box h1 img,
.page_cart .step_box .step_box_title img { margin: 0 !important; width: 38px; height: auto; }

.page_cart .step_box ul {
	float: none !important;
	margin: 0 !important;
	overflow: visible !important;
	display: flex;
	align-items: center;
	gap: 8px;
}
.page_cart .step_box ul li {
	float: none !important;
	height: auto !important;
	padding: 8px 18px 8px 9px !important;
	background-image: none !important;
	background-color: #fff !important;
	border: 1px solid var(--rr-line);
	border-radius: 999px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	color: var(--rr-ink-4) !important;
	white-space: nowrap;
	transition: border-color var(--rr-tr), color var(--rr-tr), box-shadow var(--rr-tr);
}
.page_cart .step_box ul li span {
	width: 26px !important;
	height: 26px !important;
	margin-right: 0 !important;
	background-color: var(--rr-line-strong) !important;
	font-size: 12px !important;
	line-height: 26px !important;
	font-weight: 700;
}
.page_cart .step_box ul li.on {
	border-color: var(--rr-primary);
	color: var(--rr-ink) !important;
	box-shadow: var(--rr-shadow-sm);
}
.page_cart .step_box ul li.on span {
	background-color: var(--rr-primary) !important;
	color: #fff !important;
}

/* ── 11-2. 리스트 제목 ──────────────────────────────────────────────────── */
.page_cart .cont_title01 {
	margin-top: 30px !important;
	padding: 0 2px 14px !important;
	font-size: 18px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: var(--rr-ink);
}

/* ── 11-3. 장바구니 테이블 ─────────────────────────────────────────────── */
.page_cart #cartTable.board_list02 {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	overflow: hidden;
	font-size: 14px;
	background: #fff;
}
.page_cart #cartTable.board_list02 th {
	padding: 15px 6px !important;
	border-left: 0 !important;
	border-bottom: 1px solid var(--rr-line) !important;
	background: var(--rr-bg-soft) !important;
	color: var(--rr-ink-2) !important;
	font-size: 13px;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
}
.page_cart #cartTable.board_list02 td {
	padding: 20px 6px !important;
	border-left: 0 !important;
	border-bottom: 1px solid var(--rr-line) !important;
	background: #fff !important;
	color: var(--rr-ink-2);
	vertical-align: middle;
	transition: background-color var(--rr-tr);
}
.page_cart #cartTable.board_list02 td.align_left { padding: 20px 14px 20px 16px !important; }
.page_cart #cartTable.board_list02 tbody tr:last-child td { border-bottom: 0 !important; }
.page_cart #cartTable.board_list02 tbody tr:hover td { background: #FBFCFD !important; }
/* 첫 칸에 남아있던 Noto Sans 지정을 Pretendard 로 통일 */
.page_cart #cartTable.board_list02 tr td:first-child {
	font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
	             'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}
/* 컬럼 폭 재배분 : 관리(수정/삭제) 칸을 넓히고 배송비 칸을 줄임 */
.page_cart #cartTable.board_list02 col:nth-child(1) { width: 4.5%; }
.page_cart #cartTable.board_list02 col:nth-child(3) { width: 8%; }
.page_cart #cartTable.board_list02 col:nth-child(4) { width: 10%; }
.page_cart #cartTable.board_list02 col:nth-child(5) { width: 11%; }
.page_cart #cartTable.board_list02 col:nth-child(6) { width: 10%; }
.page_cart #cartTable.board_list02 col:nth-child(7) { width: 11%; }

/* 상품 셀 */
.page_cart #cartTable.board_list02 td .product { display: flex; align-items: center; gap: 16px; overflow: visible; }
.page_cart #cartTable.board_list02 td .product .img { float: none !important; flex: 0 0 auto; display: block; }
.page_cart #cartTable.board_list02 td .product .img img {
	width: 88px !important;
	height: 88px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	background: var(--rr-bg-soft);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr);
}
.page_cart #cartTable.board_list02 td .product .img:hover img { transform: translateY(-2px); box-shadow: var(--rr-shadow-md); }
.page_cart #cartTable.board_list02 td .product .txt { padding-left: 0 !important; flex: 1 1 auto; min-width: 0; }
.page_cart #cartTable.board_list02 td .product .txt .dealerName {
	margin-bottom: 5px;
	font-size: 12px !important;
	color: var(--rr-ink-3) !important;
}
.page_cart #cartTable.board_list02 td .product .txt .tit {
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	color: var(--rr-ink) !important;
	letter-spacing: -0.02em;
	transition: color var(--rr-tr);
}
.page_cart #cartTable.board_list02 td .product .txt .tit:hover { color: var(--rr-primary) !important; }
.page_cart #cartTable.board_list02 td .product .txt p {
	margin-top: 6px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--rr-ink-3) !important;
}
.page_cart #cartTable.board_list02 td .product .txt .soldOutTxt {
	border-radius: 4px;
	background-color: var(--rr-ink-3) !important;
	font-size: 12px !important;
	padding: 0 6px !important;
}

/* 금액 셀 */
.page_cart #cartTable.board_list02 td em { font-style: normal; font-weight: 600; color: var(--rr-ink-2); }
.page_cart #cartTable.board_list02 td:nth-child(5) em { font-size: 15px; font-weight: 700; color: var(--rr-ink); }
.page_cart #cartTable.board_list02 td strong { font-weight: 600; color: var(--rr-ink-2); }

/* 수량 입력 */
.page_cart #cartTable.board_list02 input.count {
	width: 54px !important;
	height: 36px;
	padding: 0 6px;
	border: 1px solid var(--rr-line-strong);
	border-radius: var(--rr-radius-xs);
	background: #fff;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--rr-ink);
	box-sizing: border-box;
	transition: border-color var(--rr-tr), box-shadow var(--rr-tr);
}
.page_cart #cartTable.board_list02 input.count:focus {
	outline: 0;
	border-color: var(--rr-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sitecolor1, #FF0051) 12%, transparent);
}

/* 체크박스 */
.page_cart #cartTable.board_list02 input.checkbox {
	width: 18px; height: 18px;
	accent-color: var(--rr-primary);
	cursor: pointer;
	vertical-align: middle;
}

/* 관리(수정 / 삭제) 버튼 : 라운딩 + 음영 + 트랜지션 */
.page_cart #cartTable .btn_board_ctrl {
	display: block;
	width: 68px !important;
	height: 32px !important;
	margin: 0 auto 6px !important;
	padding: 0;
	border: 1px solid var(--rr-line-strong) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--rr-ink-2) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 30px !important;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), border-color var(--rr-tr), color var(--rr-tr);
}
.page_cart #cartTable .btn_board_ctrl:last-child { margin-bottom: 0 !important; }
.page_cart #cartTable .btn_board_ctrl:hover {
	transform: translateY(-1px);
	border-color: var(--rr-primary) !important;
	color: var(--rr-primary) !important;
	box-shadow: var(--rr-shadow-md);
}
.page_cart #cartTable .btn_board_ctrl:active { transform: translateY(0); box-shadow: var(--rr-shadow-sm); }

/* 로딩 중 */
.page_cart #cartBody.is_loading { opacity: .4; }
.page_cart #cartBody { transition: opacity .18s ease; }

/* ── 11-4. 좋아요 / 모두삭제 ────────────────────────────────────────────── */
.page_cart #cartTopBtns.btn_board_right02 {
	margin-top: 16px !important;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.page_cart #cartTopBtns .btn_gray01 {
	height: 42px !important;
	padding: 0 22px !important;
	border: 1px solid var(--rr-line-strong) !important;
	border-radius: var(--rr-radius-xs) !important;
	background: #fff !important;
	color: var(--rr-ink-2) !important;
	font-size: 13.5px !important;
	line-height: 40px !important;
	font-weight: 600 !important;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), border-color var(--rr-tr), color var(--rr-tr);
}
.page_cart #cartTopBtns .btn_gray01:hover {
	transform: translateY(-2px);
	border-color: var(--rr-primary) !important;
	color: var(--rr-primary) !important;
	box-shadow: var(--rr-shadow-md);
}
.page_cart #cartTopBtns .btn_gray01:active { transform: translateY(0); box-shadow: var(--rr-shadow-sm); }

/* ── 11-5. 금액 합계 카드 ───────────────────────────────────────────────── */
.page_cart .cart_total {
	margin-top: 30px !important;
	border: 1px solid var(--rr-line) !important;
	border-top: 1px solid var(--rr-line) !important;
	border-radius: var(--rr-radius);
	background: #fff;
}
.page_cart .cart_total li {
	border-right: 1px solid var(--rr-line) !important;
	border-bottom: 0 !important;
	background: #fff !important;
	font-weight: 500 !important;
}
.page_cart .cart_total li:first-child { border-radius: var(--rr-radius) 0 0 var(--rr-radius); }
.page_cart .cart_total li.sum {
	border-right: 0 !important;
	border-radius: 0 var(--rr-radius) var(--rr-radius) 0;
	background: var(--rr-primary-soft) !important;
}
.page_cart .cart_total li .top {
	padding: 0 28px !important;
	border-bottom: 1px solid var(--rr-line) !important;
}
.page_cart .cart_total li .top dl dt {
	font-size: 14px !important;
	line-height: 74px !important;
	font-weight: 600 !important;
	color: var(--rr-ink-3) !important;
	letter-spacing: -0.01em;
}
.page_cart .cart_total li .top dl dd { font-size: 16px !important; color: var(--rr-ink); }
.page_cart .cart_total li .top dl dd em {
	font-size: 27px !important;
	line-height: 74px !important;
	font-weight: 800;
	font-style: normal;
	letter-spacing: -0.03em;
	color: var(--rr-ink);
}
.page_cart .cart_total li.sum .top dl dt { color: var(--rr-ink-2) !important; }
.page_cart .cart_total li.sum .top dl dd em { color: var(--rr-primary) !important; }
.page_cart .cart_total .mwon { margin-left: 2px; font-size: 16px; font-weight: 600; }

.page_cart .cart_total li .bottom { padding: 18px 28px !important; }
.page_cart .cart_total li .bottom dl dt {
	font-size: 13px !important;
	line-height: 28px !important;
	font-weight: 500 !important;
	color: var(--rr-ink-3) !important;
}
.page_cart .cart_total li .bottom dl dd {
	font-size: 14px !important;
	line-height: 28px !important;
	font-weight: 600;
	color: var(--rr-ink-2) !important;
}
.page_cart .cart_total li:first-child .bottom {
	background: var(--rr-bg-soft) !important;
	border-bottom-left-radius: var(--rr-radius);
}
.page_cart .cart_total li:first-child .bottom dl { padding: 4px 0 !important; }
.page_cart .cart_total li:first-child .bottom dl dt { line-height: 30px !important; }
.page_cart .cart_total li:first-child .bottom dl dd { padding-left: 150px !important; line-height: 30px !important; }
.page_cart .cart_total li.sum .bottom { border-bottom-right-radius: var(--rr-radius); }

/* ± 아이콘 : 상단 행 세로 중앙에 정렬 */
.page_cart .cart_total li .icon {
	top: 0 !important;
	right: -19px !important;
	height: 75px;
	display: flex;
	align-items: center;
}
.page_cart .cart_total li .icon img { display: block; margin-top: 0 !important; }
.page_cart .cart_total .ico_point { background: var(--rr-primary); }

/* ── 11-6. 하단 주문 버튼 ───────────────────────────────────────────────── */
.page_cart #cartBottomBtns.btn_board_right02 {
	margin-top: 26px !important;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
.page_cart #cartBottomBtns > a {
	width: 190px !important;
	height: 56px !important;
	line-height: 54px !important;
	border-radius: var(--rr-radius-sm) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	box-shadow: var(--rr-shadow-sm);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), background-color var(--rr-tr), color var(--rr-tr), border-color var(--rr-tr);
	will-change: transform;
}
.page_cart #cartBottomBtns > a:hover  { transform: translateY(-2px); box-shadow: var(--rr-shadow-lift); }
.page_cart #cartBottomBtns > a:active { transform: translateY(0);  box-shadow: var(--rr-shadow-sm); }

/* 견적서출력 : 아웃라인 (1순위 배치) */
.page_cart #cartBottomBtns > a:nth-of-type(1) {
	order: 1;
	background: #fff !important;
	border: 1px solid var(--rr-line-strong);
	color: var(--rr-ink-2) !important;
}
.page_cart #cartBottomBtns > a:nth-of-type(1):hover { border-color: var(--rr-primary); color: var(--rr-primary) !important; }
/* 선택상품주문 : 서브(다크) — 주 CTA 왼쪽으로 이동 */
.page_cart #cartBottomBtns > a:nth-of-type(3) {
	order: 2;
	background: var(--rr-ink) !important;
	color: #fff !important;
}
.page_cart #cartBottomBtns > a:nth-of-type(3):hover { background: #2A2C31 !important; }
/* 전체주문 : 메인 CTA — 가장 오른쪽 */
.page_cart #cartBottomBtns > a:nth-of-type(2) {
	order: 3;
	box-shadow: var(--rr-shadow-primary);
}
.page_cart #cartBottomBtns > a:nth-of-type(2):hover { box-shadow: 0 12px 26px color-mix(in srgb, var(--sitecolor1, #FF0051) 34%, transparent); filter: saturate(1.05); }

/* ── 11-7. 빈 장바구니 안내 ────────────────────────────────────────────── */
.page_cart .cart_empty {
	margin: 34px 0 6px;
	padding: 58px 20px 62px;
	text-align: center;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: var(--rr-bg-soft);
}
.page_cart .cart_empty::before {
	content: '';
	display: block;
	width: 54px; height: 54px;
	margin: 0 auto 20px;
	background: url('/images/ico_order_cart.png') no-repeat center / contain;
	opacity: .3;
}
.page_cart .cart_empty_tit {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--rr-ink);
}
.page_cart .cart_empty_txt {
	margin-top: 8px;
	font-size: 14px;
	color: var(--rr-ink-3);
}
.page_cart .cart_empty_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
	height: 50px;
	padding: 0 34px;
	border-radius: var(--rr-radius-sm);
	background: var(--rr-primary);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	box-shadow: var(--rr-shadow-primary);
	transition: transform var(--rr-tr), box-shadow var(--rr-tr), filter var(--rr-tr);
}
.page_cart .cart_empty_btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--sitecolor1, #FF0051) 34%, transparent); filter: saturate(1.05); }
.page_cart .cart_empty_btn:active { transform: translateY(0); box-shadow: var(--rr-shadow-primary); }

/* 네이버페이 미사용 시 빈 영역 여백 제거 */
.page_cart .cartnaverpay:not(:has(*)) { display: none; }

/* ── 11-8. 접근성 ──────────────────────────────────────────────────────── */
.page_cart #cartTable a:focus-visible,
.page_cart #cartTopBtns a:focus-visible,
.page_cart #cartBottomBtns a:focus-visible,
.page_cart .cart_empty_btn:focus-visible {
	outline: 2px solid var(--rr-primary);
	outline-offset: 2px;
	border-radius: var(--rr-radius-xs);
}
.page_cart #cartTable input.checkbox:focus-visible { outline: 2px solid var(--rr-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	#cartBottomBtns > a,
	#cartTopBtns .btn_gray01,
	#cartTable .btn_board_ctrl,
	.cart_empty_btn { transition: none !important; }
	#cartBottomBtns > a:hover,
	#cartTopBtns .btn_gray01:hover,
	#cartTable .btn_board_ctrl:hover,
	.cart_empty_btn:hover { transform: none !important; }
}