/* =========================================================================
   나의 쇼핑 (찜한상품 / 최근본상품) 시안 정렬 전용 CSS
   [260812] 피그마 631:3389(찜) / 631:3398(최근본) 픽셀 매칭
   - 공유 파일(mypage_redesign.css) 수정 금지 → 본 파일에서만 override
   - 대상: www/shop/mypage/jjim/indexAll.jsp, www/shop/mypage/recently/indexAll.jsp
   ========================================================================= */

/* ── 페이지 대제목 "나의 쇼핑" (시안 fs30 / w700 / #fff, 밑줄 없음) ── */
.mypage_content .mps_page_title {
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin: 0 0 30px;
	letter-spacing: 0;
}

/* ── 서브탭: 시안은 각진 pill(r10) + 네이비 그라디언트 + 얇은 테두리 ──
   [260821] 피그마 631:3398/3389 정확 스펙 — h44, 세로 grad #07223D→#0B1829,
   비활성 테두리 #25517C, 활성 #00B8FC + 글로우 20px (mp_activity_fix [260819p] 동일 문법) */
.mypage_content .mps_subtab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
}
.mypage_content .mps_subtab a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	height: 44px;
	min-height: 0;
	border-radius: 10px;
	background: linear-gradient(180deg, #07223D, #0B1829) !important;
	border: 1px solid #25517C !important;
	color: #fff !important;
	font-size: 20px;
	font-weight: 700;
	box-shadow: none !important;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s;
}
/* [260826c] 사용자 지시: 박스 #07223D / 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .mps_subtab a:hover {
	color: #fff !important;
	border-color: #0DAAFC !important;
}
.mypage_content .mps_subtab a.active {
	background: linear-gradient(180deg, #07223D, #0B1829) !important;
	border: 1px solid #0DAAFC !important;
	color: #fff !important;
	box-shadow: 0 0 20px rgba(0, 184, 252, .55) !important;
}

/* ── 시안에 없는 중복 제목("관심상품/최근본상품" 밑줄 박스) 숨김 ── */
.mypage_content .shop_item_info_con.mypage .tit_box_custom01 {
	display: none !important;
}
/* 상단 여백(mt60) 제거 — 서브탭 바로 아래에 카드 배치 */
.mypage_content .shop_item_info_con.mypage.mt60 {
	margin-top: 0 !important;
}
.mypage_content .shop_item_info_con.mypage .shop_list_con_box01.mt40 {
	margin-top: 0 !important;
}

/* ── 상품 카드 그리드: 시안 4열(300px 카드) ── */
.mypage_content .shop_list_con_box01.item04.mypage_interest_box01 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 20px !important;
	column-gap: 10px !important;
}

/* ── 카드 본체 — [260821c] 상품 리스트 카드(.shop_list_item01, shop_list_redesign.css) 팔레트로 통일 ── */
.mypage_content .mypage_interest_box01 .shop_list_item01 {
	position: relative;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	box-sizing: border-box;
	padding: 20px;
	/* [260831] 사용자 지시: 쇼핑하기 상품카드(--sl-card-bg)와 동일 — 종료점 50%로 당겨 우하단을 더 어둡게 */
	background: linear-gradient(to bottom right, #0A2942 0%, rgba(10, 41, 67, .13) 50%) !important;
	border: 1px solid #16385A !important;
	border-radius: 10px;
	box-shadow: 0 4px 14px -6px rgba(8, 32, 64, .9);
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.mypage_content .shop_list_con_box01.item04 .shop_list_item01:hover,
.mypage_content .mypage_interest_box01 .shop_list_item01:hover {
	background: linear-gradient(to bottom right, #0A2942 0%, rgba(10, 41, 67, .13) 50%) !important;
	border-color: #0DAAFC !important;
	box-shadow: 0 10px 28px -10px rgba(0, 184, 252, .45) !important;
	transform: translateY(-3px);
}
.mypage_content .mypage_interest_box01 .shop_list_item01 > a {
	display: block;
	color: #fff;
	text-decoration: none;
}

/* ── 카드 이미지: 시안은 카드 배경 위 상품 누끼(투명배경 + contain) ── */
.mypage_content .mypage_interest_box01 .shop_list_item01 .img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: transparent !important;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .img img {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
}

/* ── 찜(하트) 삭제 버튼: 시안 파란 하트, 우상단 ── */
.mypage_content .mypage_interest_box01 .shop_list_item01 a.fas.fa-heart,
.mypage_content .mypage_interest_box01 .shop_list_item01 a.fas.fa-heart.active,
.mypage_content .mypage_interest_box01 .shop_list_item01 .interest_btn01 {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	color: #006DFC !important; /* [260826] PPT s06 하트 색 */
	font-size: 22px;
	cursor: pointer;
	text-shadow: none;
}

/* ── 최근본 삭제(X) 버튼 ──
   [260826] PPT s10: 회색 PNG 대신 카드 하트(#00B8FC)와 같은 계열의 아이콘 버튼으로 교체 */
.mypage_content .mypage_interest_box01 .shop_list_item01 .shop_x_btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 30px !important;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(0, 184, 252, .45);
	background: #0A1A2B; /* [260826] 흰 상품 이미지가 비쳐 테두리가 끊겨 보이던 문제 — 불투명 처리 */
	color: #00B8FC;
	font-size: 13px;
	line-height: 1;
	transition: background .18s, color .18s, box-shadow .18s;
}

/* [260826c] 사용자 지시: 박스 #07223D / 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .mypage_interest_box01 .shop_list_item01 .shop_x_btn:hover {
	background: #00B8FC;
	border-color: #0DAAFC;
	color: #04121F;
	box-shadow: 0 0 10px rgba(0, 184, 252, .45);
}

/* ── 카드 텍스트 ── */
.mypage_content .mypage_interest_box01 .shop_list_item01 .tit {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
	margin-bottom: 10px;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .alt {
	font-size: 13px;
	color: #C5C5C5; /* [260821c] 상품 리스트 .card_desc 동일 */
	line-height: 1.4;
	margin-bottom: 10px;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .alt:empty {
	margin: 0;
}

/* ── 가격 ── */
.mypage_content .mypage_interest_box01 .shop_list_item01 .price_box01 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .price_box01 .price01 {
	display: flex;
	align-items: baseline;
	gap: 2px;
	color: #fff;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .price_box01 .price01 b {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .price_box01 .price01 span {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .price_box01 .discount01 {
	font-size: 13px;
	color: #BDBDBD; /* [260821c] 상품 리스트 .card_org_price 동일 */
	text-decoration: line-through;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .price_box01 .percent01 {
	font-size: 14px;
	font-weight: 700;
	color: #00B8FC; /* [260821c] 상품 리스트 .card_percent 동일 */
}

/* ── [260821] 찜한 상품 카드 하단 버튼 (피그마 631:3398 — 최근본(3389)엔 없음)
   좌: 정사각 장바구니 아이콘(아웃라인) / 우: 바로구매. bg #010609, r5
   [260826] 시안 인디고(#5163FE) 철회 → 포인트 #00B8FC 단일, hover는 글로우로 구분 ── */
.mypage_content .mypage_interest_box01 .shop_list_item01 .mps_card_actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 16px;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .mps_card_actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	box-sizing: border-box;
	background: #010609;
	border: 1px solid #00B8FC;
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
/* [260826c] 사용자 지시: 박스 #07223D / 활성 외곽선 #0DAAFC 톤 통일 */
.mypage_content .mypage_interest_box01 .shop_list_item01 .mps_card_actions a:hover {
	border-color: #0DAAFC;
	box-shadow: 0 0 10px rgba(0, 184, 252, .35);
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .mps_card_actions .mps_cart_btn {
	flex: 0 0 34px;
	width: 34px;
	font-size: 14px;
}
.mypage_content .mypage_interest_box01 .shop_list_item01 .mps_card_actions .mps_buy_btn {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 700;
}

/* ── 페이지네이션 ──
   [260831] 사용자 지시: 다른 페이지(쿠폰·주문내역 등)와 동일한 디자인으로 통일.
   기존 [260821] 30x30 override(피그마 631:3398)를 제거 →
   mypage_redesign.css 의 공통 정의(44x44 r10, outline #204B66, 활성 #0DAAFC)를 그대로 사용한다. ── */

/* ── [260826] PPT s09/s10 정렬바 + 그리드/리스트 뷰 전환 ──
   버튼 톤: 면 grad #07223D→#0B1829 / 활성 외곽선 #0DAAFC / 비활성 #25517C */
.mypage_content .mps_sortbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.mypage_content .mps_sort_btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mypage_content .mps_sort_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(180deg, #07223D, #0B1829);
	border: 1px solid #25517C;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}
.mypage_content .mps_sort_btn:hover { border-color: #0DAAFC; }
.mypage_content .mps_sort_btn.active {
	border-color: #0DAAFC;
	font-weight: 700;
	box-shadow: 0 0 14px rgba(0, 184, 252, .45);
}
.mypage_content .mps_view_toggle {
	display: flex;
	gap: 8px;
}
.mypage_content .mps_view_toggle a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(180deg, #07223D, #0B1829);
	border: 1px solid #25517C;
	transition: border-color .2s, box-shadow .2s;
}
.mypage_content .mps_view_toggle a:hover { border-color: #0DAAFC; }
.mypage_content .mps_view_toggle a.on {
	border-color: #0DAAFC;
	box-shadow: 0 0 14px rgba(0, 184, 252, .45);
}
/* 그리드 아이콘: 2x2 점 */
.mypage_content .mps_view_toggle .mps_gall_btn {
	flex-wrap: wrap;
	gap: 3px;
	padding: 9px;
}
.mypage_content .mps_view_toggle .mps_gall_btn span {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: #5C82A8;
}
/* 리스트 아이콘: 가로줄 3개 */
.mypage_content .mps_view_toggle .mps_list_btn {
	flex-direction: column;
	gap: 4px;
	padding: 10px 9px;
}
.mypage_content .mps_view_toggle .mps_list_btn span {
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: #5C82A8;
}
.mypage_content .mps_view_toggle a.on span { background: #0DAAFC; }

/* ── 리스트 뷰: 1열 + 카드 내부 가로 배치(.mps_card_body 래퍼) ── */
.mypage_content .shop_list_con_box01.item04.mypage_interest_box01.mps_list_view {
	grid-template-columns: 1fr;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 {
	min-height: 0 !important;
	height: auto !important;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 > a[href*="/shop/list/item/"] {
	display: flex;
	align-items: center;
	gap: 24px;
	text-align: left;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 > a[href*="/shop/list/item/"] .img {
	flex: none;
	width: 180px;
	height: 150px;
	aspect-ratio: auto;
	margin-bottom: 0;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .mps_card_body {
	flex: 1;
	min-width: 0;
	padding-right: 34px; /* 우상단 하트/X 버튼과 겹침 방지 */
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .tit,
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .alt {
	text-align: left;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .price_box01 {
	justify-content: flex-start;
}
/* [260902] 사용자 지시: 리스트 뷰의 "바로구매" 버튼이 가로로 과도하게 길었다.
   원인: 버튼 그룹이 카드 하단의 별도 행이라 폭 전체를 쓰고(.mps_buy_btn 은 flex:1),
        이미지 폭(204px)만큼만 들여쓴 상태였다.
   개선: 버튼 그룹을 하단 행 → 카드 우측 열로 옮기고 폭을 내용에 맞춘다.
        (좁은 화면에서는 flex-wrap 으로 자연스럽게 아래로 내려간다) */
/* content.css 의 .shop_list_con_box01.item04 .shop_list_item01 이 세로 배치(column, gap 0)를
   강제하므로 방향·간격을 명시적으로 되돌린다 */
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 {
	display: flex;
	flex-direction: row !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px !important;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 > a[href*="/shop/list/item/"] {
	flex: 1 1 320px;
	min-width: 0;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .mps_card_actions {
	flex: 0 0 auto;
	width: auto;
	margin-left: 0;
	margin-top: 0;
}
.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .mps_card_actions .mps_buy_btn {
	flex: 0 0 auto;
	min-width: 150px;
	padding: 0 22px;
}

/* ── 반응형 ── */
@media (max-width: 1180px) {
	.mypage_content .shop_list_con_box01.item04.mypage_interest_box01 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.mypage_content .shop_list_con_box01.item04.mypage_interest_box01 { grid-template-columns: repeat(2, 1fr); }
	.mypage_content .mps_page_title { font-size: 24px; }
	.mypage_content .mps_sort_btn { height: 34px; padding: 0 12px; font-size: 13px; }
	.mypage_content .mps_view_toggle a { width: 34px; height: 34px; }
	.mypage_content .mps_view_toggle .mps_gall_btn { padding: 7px; }
	.mypage_content .mps_view_toggle .mps_list_btn { padding: 8px 7px; }
	.mypage_content .mps_view_toggle .mps_list_btn span { width: 16px; }
}
@media (max-width: 520px) {
	.mypage_content .shop_list_con_box01.item04.mypage_interest_box01 { grid-template-columns: 1fr; }
	.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 > a[href*="/shop/list/item/"] {
		gap: 14px;
	}
	.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 > a[href*="/shop/list/item/"] .img {
		width: 110px;
		height: 96px;
	}
	/* 좁은 화면: 버튼 그룹이 아래로 내려가므로 다시 전체 폭을 쓰게 한다 */
	.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .mps_card_actions {
		margin-left: 0;
		width: 100%;
	}
	.mypage_content .mypage_interest_box01.mps_list_view .shop_list_item01 .mps_card_actions .mps_buy_btn {
		flex: 1 1 auto;
		min-width: 0;
	}
}