@charset "utf-8";
/* =============================================================================
   상품 리스트 페이지 리디자인 스킨 (Figma 394:259 / 473:* 기준)
   대상: /shop/list/index.jsp 에서만 로드. 마크업 변경 없이 CSS 로만 스킨 교체.
   headHtml.jsp(content.css) 뒤에 로드되므로 기존 규칙을 덮어쓴다.

   디자인 토큰 (피그마 실측)
     배경          #000000
     카드 그라디언트 linear 135deg #0A2942 → rgba(10,41,67,.14)
     칩/뱃지 바     linear 90deg #07223D → #0B1829, 테두리 #25517C, radius 30
     선택 강조      #00B8FC
     카드 테두리    #092042 (+ drop-shadow #082040)
   ========================================================================== */

:root {
	--sl-accent: #00B8FC;
	--sl-line: #25517C;
	--sl-card-bg: linear-gradient(135deg, #0A2942 0%, rgba(10, 41, 67, .14) 100%);
	/* 카테고리 칩 전용 — 상품카드(#0A2943)와 끝색이 다름 (#0A3843 a=.14) */
	--sl-cate-bg: linear-gradient(135deg, #0A2942 0%, rgba(10, 56, 67, .14) 100%);
	--sl-pill-bg: linear-gradient(90deg, #07223D 0%, #0B1829 100%);
}

/* ── 페이지 바탕 ────────────────────────────────────────────────────────── */
.shop_common_wrapper01 .shop_top_area,
.shop_common_wrapper01 .shop_list_wrapper01,
.shop_common_wrapper01 .shop_list_con_wrapper01 {
	background-color: #000 !important;
}

/* ── 섹션 타이틀 (카테고리 / 시리즈) ─────────────────────────────────────── */
.shop_top_area .other_cate .title {
	font-size: 28px;
	gap: 12px;
	margin-bottom: 24px;
}

.shop_top_area .other_cate .title::after {
	width: 18px;
	height: 18px;
	background: var(--sl-accent);
}

/* ── 카테고리 칩 카드 ───────────────────────────────────────────────────── */
.shop_other_swiper .swiper-wrapper {
	gap: 20px;
}

/* 시안(473:388~392): 활성/비활성 구분 없이 모든 칩이 파란 테두리 + radius 10 */
.shop_other_swiper .swiper-slide a {
	background: var(--sl-cate-bg) !important;
	border: 1px solid var(--sl-accent) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.shop_other_swiper .swiper-slide a:hover {
	box-shadow: 0 0 14px -4px rgba(0, 184, 252, .5) !important;
}

/* 테두리 색이 같아지므로 선택 상태는 글로우와 글자색으로 구분 */
.shop_other_swiper .swiper-slide.active a {
	border: 1px solid var(--sl-accent) !important;
	border-radius: 10px !important;
	box-shadow: 0 0 20px -2px rgba(0, 184, 252, .55) !important;
}

.shop_other_swiper .swiper-slide .cate_name {
	font-size: 20px;
	padding-bottom: 20px;
}

.shop_other_swiper .swiper-slide .cate_img svg {
	width: 60px;
	height: 60px;
	color: var(--sl-accent);
}

/* ── 시리즈 카드 ────────────────────────────────────────────────────────── */
.shop_series_swiper .swiper-wrapper {
	gap: 20px;
}

.shop_series_swiper .series_card {
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, .07);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8);
}

/* 배경 — 최종 시안(395:1949 화면, 473:262/276/290 카드) 기준 4장 공통 다크 네이비 */
.shop_series_swiper .series_card.s_best,
.shop_series_swiper .series_card.s_balance,
.shop_series_swiper .series_card.s_pro,
.shop_series_swiper .series_card.s_premium {
	background: radial-gradient(130% 100% at 30% 8%, #123055 0%, #0C1B30 45%, #0D192B 75%, #0A1524 100%) !important;
}

.shop_series_swiper .series_card.active {
	border: 1px solid var(--sl-accent);
	box-shadow: 0 0 24px -4px rgba(0, 184, 252, .5);
}

.shop_series_swiper .series_info .s_name {
	font-size: 28px;
}

.shop_series_swiper .series_info .s_desc {
	font-size: 17px;
	color: rgba(255, 255, 255, .88);
	margin-top: 8px;
}

/* 우측 원형 화살표 버튼 */
.shop_series_swiper .series_arrow {
	width: 52px;
	height: 52px;
	background: rgba(255, 255, 255, .12) !important;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	font-size: 24px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	transition: background .2s, transform .2s;
}

.shop_series_swiper .series_card:hover .series_arrow {
	background: rgba(255, 255, 255, .24) !important;
	transform: translateX(3px);
}

/* 하단 뱃지 바 — 피그마 스펙(다크 블루 필) + 시리즈별 강조색 */
.shop_series_swiper .series_label {
	height: 48px;
	border-radius: 30px;
	font-size: 14px;
	background: var(--sl-pill-bg);
	border: 1px solid var(--sl-line);
	backdrop-filter: blur(6px);
}

.shop_series_swiper .series_label .lb_desc {
	color: #C9D1DB;
	font-weight: 500;
}

/* 뱃지 강조색 — 최종 시안 기준 전 시리즈 공통 블루 */
.series_card .series_label .lb { color: #00B8FC; }

/* ── 정렬 칩 + 보기 옵션 ────────────────────────────────────────────────── */
.shop_list_con_wrapper01 .product_list_control {
	margin-bottom: 28px;
	gap: 16px;
}

.shop_list_con_wrapper01 .product_sort_buttons {
	gap: 10px;
}

/* content.css 가 background/color/border-color 를 !important 로 잡고 있어 동일 강도 필요 */
.shop_list_con_wrapper01 .product_sort_buttons .sort_btn,
.shop_list_con_wrapper01 .product_sort_buttons .reset_all_btn {
	height: 46px;
	padding: 0 22px;
	border-radius: 30px;
	background: var(--sl-pill-bg) !important;
	border: 1px solid var(--sl-line) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 44px;
	transition: border-color .2s, box-shadow .2s, color .2s;
}

.shop_list_con_wrapper01 .product_sort_buttons .reset_all_btn {
	border-color: var(--sl-accent) !important;
	color: var(--sl-accent) !important;
}

.shop_list_con_wrapper01 .product_sort_buttons .sort_btn:hover,
.shop_list_con_wrapper01 .product_sort_buttons .reset_all_btn:hover {
	background: var(--sl-pill-bg) !important;
	border-color: var(--sl-accent) !important;
	color: #fff !important;
}

.shop_list_con_wrapper01 .product_sort_buttons .sort_btn.active {
	background: var(--sl-pill-bg) !important;
	border-color: var(--sl-accent) !important;
	color: var(--sl-accent) !important;
	box-shadow: 0 0 14px -2px rgba(0, 184, 252, .55);
}

/* 노출개수 select */
.shop_list_con_wrapper01 .page_rows_select {
	height: 46px;
	padding: 0 14px;
	border-radius: 24px;
	background: var(--sl-pill-bg) !important;
	border: 1px solid var(--sl-line) !important;
	color: #fff !important;
	font-size: 15px;
}

.shop_list_con_wrapper01 .page_rows_select option {
	background: #0B1829;
	color: #fff;
}

/* 그리드 / 리스트 토글 */
.shop_list_con_wrapper01 .product_view_options .sub_sty_change a {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--sl-pill-bg) !important;
	border: 1px solid var(--sl-line) !important;
}

.shop_list_con_wrapper01 .product_view_options .sub_sty_change a span {
	background: #7A8DA3 !important;
	transition: background .2s;
}

.shop_list_con_wrapper01 .product_view_options .sub_sty_change a.on {
	background: var(--sl-accent) !important;
	border-color: var(--sl-accent) !important;
	box-shadow: 0 0 14px -2px rgba(0, 184, 252, .6);
}

.shop_list_con_wrapper01 .product_view_options .sub_sty_change a.on span {
	background: #fff !important;
}

/* ── 상품 카드 ──────────────────────────────────────────────────────────── */
.shop_list_con_box01.item04 .shop_list_item01 {
	background: var(--sl-card-bg) !important;
	border: 1px solid #16385A !important;
	border-radius: 10px !important;
	padding: 16px 16px 8px !important;
	box-shadow: 0 4px 14px -6px rgba(8, 32, 64, .9);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* 기존 흰색 호버(다크 테마 부적합) 무력화 */
.shop_list_con_box01.item04 .shop_list_item01:hover {
	background: var(--sl-card-bg) !important;
	border-color: var(--sl-accent) !important;
	box-shadow: 0 10px 28px -10px rgba(0, 184, 252, .45);
	transform: translateY(-3px);
}

.shop_list_con_box01.item04 .shop_list_item01:hover .card_top_row svg,
.shop_list_con_box01.item04 .shop_list_item01:hover .card_top_row .card_heart_btn svg {
	filter: none !important;
}

.shop_list_con_box01.item04 .shop_list_item01:hover .card_name,
.shop_list_con_box01.item04 .shop_list_item01:hover .card_price,
.shop_list_con_box01.item04 .shop_list_item01:hover .final_discount_price,
.shop_list_con_box01.item04 .shop_list_item01:hover .final_discount_price .label,
.shop_list_con_box01.item04 .shop_list_item01:hover .final_discount_price .expected,
.shop_list_con_box01.item04 .shop_list_item01:hover .final_discount_price .price {
	color: #fff !important;
}

.shop_list_con_box01.item04 .shop_list_item01:hover .card_desc {
	color: #C5C5C5 !important;
}

/* 이미지 영역 */
.shop_list_item01 .card_img {
	border-radius: 8px;
	margin-bottom: 20px;
	background: transparent;
}

/* NEW / BEST 뱃지 — 다크 필 */
.shop_list_item01 .card_badge {
	height: 40px;
	padding: 0 18px;
	border-radius: 30px;
	background: var(--sl-pill-bg) !important;
	border: 1px solid var(--sl-line);
	box-shadow: none !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 38px;
}

.shop_list_item01 .card_badge.badge_award {
	color: var(--sl-accent) !important;
	border-color: var(--sl-accent);
}

/* 찜 하트 — 시안은 블루 */
.shop_list_item01 .card_heart_btn {
	width: 34px;
	height: 30px;
}

.shop_list_item01 .card_heart_btn svg path {
	fill: none;
	stroke: var(--sl-accent);
}

.shop_list_item01 .card_heart_btn.active svg path,
.shop_list_item01 .card_heart_btn.active .card_heart_fill {
	fill: var(--sl-accent);
	stroke: var(--sl-accent);
}

/* 상품명 2줄 말줄임 — 시안(473:406) 18px/700 #FFFFFF */
.shop_list_item01 .card_name {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	min-height: 2.7em;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 색상 도트 */
.shop_list_item01 .card_color_dots {
	gap: 10px;
	padding: 0;
}

/* 시안(473:421~449): 도트마다 1px 파란 링. background 는 상품 색상값이라 건드리지 않음 */
.shop_list_item01 .card_color_dots .dot {
	width: 16px;
	height: 16px;
	border: 1px solid var(--sl-accent) !important;
	box-sizing: border-box;
}

.shop_list_item01 .card_desc {
	font-size: 14px;
}

/* 시안(473:419) 24px/700 #FFFFFF — inner 1600 스케일 적용해 22px */
.shop_list_item01 .card_price {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
}

.shop_list_item01 .card_info {
	padding: 0 2px 12px;
	gap: 10px;
}

.shop_list_item01 .card_top_row {
	margin-bottom: 18px;
}

/* 데이터 없음 */
.shop_list_con_wrapper01 .nodata p {
	color: #fff !important;
}

/* ── 태블릿 ─────────────────────────────────────────────────────────────── */
@media all and (max-width: 1200px) {
	.shop_top_area .other_cate .title { font-size: 24px; }
	.shop_series_swiper .series_info .s_name { font-size: 24px; }
	.shop_list_item01 .card_price { font-size: 20px; }
}

/* ── 모바일 ─────────────────────────────────────────────────────────────── */
@media all and (max-width: 768px) {
	.shop_top_area .other_cate .title {
		font-size: 20px;
		margin-bottom: 14px;
	}

	.shop_top_area .other_cate .title::after {
		width: 14px;
		height: 14px;
	}

	/* 카테고리 / 시리즈: 가로 스크롤 유지 + 간격 축소 */
	.shop_other_swiper .swiper-wrapper { gap: 10px; }
	.shop_series_swiper .swiper-wrapper { gap: 14px; }

	.shop_other_swiper .swiper-slide .cate_name { font-size: 13px; padding-bottom: 10px; }
	.shop_other_swiper .swiper-slide .cate_img svg { width: 34px; height: 34px; }

	.shop_series_swiper .series_info .s_name { font-size: 20px; }
	.shop_series_swiper .series_info .s_desc { font-size: 14px; margin-top: 6px; }
	.shop_series_swiper .series_arrow { width: 42px; height: 42px; font-size: 20px; line-height: 40px; }
	.shop_series_swiper .series_label { height: 42px; font-size: 12px; padding: 0 16px; gap: 8px; }

	/* 정렬 칩은 한 줄 가득 채워 가로 스크롤, 보기옵션은 아랫줄 우측 */
	.shop_list_con_wrapper01 .product_list_control {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
	}

	.shop_list_con_wrapper01 .product_sort_buttons {
		flex: 1 1 100%;
		order: 1;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 8px;
		min-width: 0;
	}

	.shop_list_con_wrapper01 .product_sort_buttons::-webkit-scrollbar { display: none; }

	.shop_list_con_wrapper01 .product_sort_buttons .sort_btn,
	.shop_list_con_wrapper01 .product_sort_buttons .reset_all_btn {
		flex: 0 0 auto;
		height: 38px;
		line-height: 36px;
		padding: 0 15px;
		font-size: 13px;
	}

	.shop_list_con_wrapper01 .product_view_options {
		width: auto;
		flex: 0 0 auto;
		order: 2;
		margin-left: auto;
		gap: 6px;
	}

	.shop_list_con_wrapper01 .page_rows_select { height: 38px; font-size: 12px; padding: 0 8px; }

	.shop_list_con_wrapper01 .product_view_options .sub_sty_change a {
		width: 38px;
		height: 38px;
		border-radius: 8px;
	}

	/* 상품 카드 2열 */
	.shop_list_con_box01.item04 .shop_list_item01 {
		padding: 10px 10px 6px !important;
	}

	.shop_list_item01 .card_img { margin-bottom: 12px; }
	.shop_list_item01 .card_top_row { margin-bottom: 12px; gap: 8px; }
	.shop_list_item01 .card_badge { height: 30px; line-height: 28px; padding: 0 12px; font-size: 11px; }
	.shop_list_item01 .card_heart_btn { width: 26px; height: 24px; }
	.shop_list_item01 .card_name { font-size: 14px; }
	.shop_list_item01 .card_desc { font-size: 12px; }
	.shop_list_item01 .card_price { font-size: 17px; }
	.shop_list_item01 .card_color_dots .dot { width: 13px; height: 13px; }
	.shop_list_item01 .card_info { gap: 7px; }
}