/*
 * 추천 섹션 (page/_recommend_section.php)
 *
 * 가로형(.rs-row)  메인처럼 분류 셋을 나란히 — 각 분류가 자기 칸 안에서 슬라이드
 * 세로형(.rs-col)  서브 오른쪽처럼 분류를 위아래로
 *
 * 클래스는 전부 rs- 로 시작한다. 테마(theme.min.css)의 기존 규칙과 겹치지 않게 하려는 것이다.
 * 좌우 버튼은 두지 않는다 — 손가락·마우스로 민다.
 */

.rs { width: 100%; }

/* ── 가로형 : 분류 셋을 나란히 ───────────────────────────── */
.rs-row { display: flex; flex-wrap: wrap; gap: 30px; }
.rs-row > .rs-group { flex: 1 1 300px; min-width: 0; }

/* ── 세로형 : 분류를 위아래로 ────────────────────────────── */
.rs-col > .rs-group { margin-bottom: 30px; }
.rs-col > .rs-group:last-child { margin-bottom: 0; }

/* ── 분류 제목 ───────────────────────────────────────────── */
.rs-title { margin: 0 0 12px; }
.rs-title a {
	display: inline-flex;
	align-items: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: #222;
	text-decoration: none;
}
.rs-title a:hover { color: #f04e23; }
.rs-title i { font-size: 0.875rem; color: #999; margin-left: 4px; }

/* ── 슬라이더 ────────────────────────────────────────────── */
/* overflow 를 감춰야 옆 카드가 잘려 보인다. Swiper 가 자동으로 잡지만 명시해 둔다. */
.rs-swiper { overflow: hidden; }
.rs-swiper .swiper-wrapper { align-items: stretch; }

/* slidesPerView:'auto' 라 슬라이드 폭을 여기서 정해야 한다.
   height:auto 라야 카드 높이가 내용에 맞춰 늘어난다.

   폭이 곧 "다음 카드가 얼마나 보이는가"를 정한다. 폭 89% 면 11% 만 엿보인다.
   2026-08-01 카드를 키우고 엿보이는 폭을 절반으로 줄였다. (대표 지시)
     가로형 78% → 89%   세로형 68% → 84%   (PC 60/62% → 80/81%)
   max-width 도 함께 올려야 한다. 넓은 화면에서는 이 값이 먼저 걸려
   폭 비율을 올려도 카드가 커지지 않기 때문이다. */
.rs-swiper .swiper-slide { height: auto; width: 89%; max-width: 340px; }
.rs-col .rs-swiper .swiper-slide { width: 84%; max-width: 320px; }

@media (min-width: 768px) {
	.rs-swiper .swiper-slide { width: 80%; }
	.rs-col .rs-swiper .swiper-slide { width: 81%; }
}

/* ── 카드 ────────────────────────────────────────────────── */
.rs-card {
	display: block;
	height: 100%;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: all 0.2s ease 0s;
}
.rs-card:hover {
	border-color: #ddd;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.rs-thumb {
	position: relative;
	width: 100%;
	padding-top: 66%;              /* 3:2 — 이미지가 없어도 자리가 무너지지 않는다 */
	background: #f0f0f0 center center / cover no-repeat;
}

/* 할인 배지 — 이미지 위 왼쪽 아래 */
.rs-sale {
	position: absolute;
	left: 10px;
	bottom: 10px;
	background: #f04e23;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 4px;
}

.rs-body { padding: 12px 14px 14px; }

/* 가맹점명·상점명 모두 1.2rem. (2026-08-01 대표 지시)
   크기가 같으므로 굵기와 색으로 위계를 만든다 — 가맹점명은 회색 보통, 상점명은 진한 굵은 글씨. */
.rs-vd {
	font-size: 1.2rem;
	color: #666;
	line-height: 1.4;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rs-it {
	font-size: 1.2rem;
	font-weight: 700;
	color: #222;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 소개글은 두 줄까지만. 길이가 제각각이라 그냥 두면 카드 높이가 들쭉날쭉해진다. */
.rs-desc {
	margin: 6px 0 0;
	font-size: 0.875rem;
	color: #666;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1259px) {
	.rs-row { gap: 24px; }
	.rs-title a { font-size: 1.125rem; }
}

@media (max-width: 767px) {
	.rs-row { gap: 20px; }
	.rs-row > .rs-group { flex: 1 1 100%; }
	.rs-col > .rs-group { margin-bottom: 24px; }
	.rs-body { padding: 10px 12px 12px; }
}