@charset "utf-8";
/*
 * 추천 섹션 (page/_recommend_section.php)
 *
 * 가로형(.rs-row)  메인처럼 분류를 나란히 — 각 분류가 자기 칸 안에서 슬라이드
 * 세로형(.rs-col)  서브 오른쪽처럼 분류를 위아래로
 *
 * 카드 모양은 여기 없다. 추천여행 목록과 같은 것을 쓰므로 recommend.css 의 .rc-* 가 그린다.
 * 이 파일은 「칸을 어떻게 나누고 얼마나 띄울 것인가」만 정한다.
 *
 * 클래스는 전부 rs- 로 시작한다. 테마(theme.min.css)의 기존 규칙과 겹치지 않게 하려는 것이다.
 * 좌우 버튼은 두지 않는다 — 손가락·마우스로 민다.
 */

.rs { width: 100%; }

/* 메인 「추천맛집멋집」 구역의 위 여백은 여기서 건드리지 않는다.
   theme.min.css 의 .m-hotplace 에 padding-top:60px 이 이미 있고 열 채널 모두 같다.
   예전 제목에 붙어 있던 pt-5(48px)는 다른 구역 제목에는 없던 것이라 함께 뺐다. */

/* 서브 오른쪽 칸 — 추천 섹션과 그 아래 애드센스 사이. (2026-08-02 대표 지시)
   화면 크기와 상관없이 50px 로 고정한다. 광고가 추천 상품에 붙어 보이지 않게 하려는 것이다.
   섹션에 데이터가 없으면 .rs 자체가 안 나오므로 이 여백도 생기지 않는다. */
.rs-col + .ad-sub { margin-top: 50px; }

/* ── 가로형 : 분류를 나란히 ──────────────────────────────────
   칸 수는 데이터가 있는 분류 수다. PHP 가 data-rs-cols 로 알려준다.
     3 → 1/3 씩   2 → 50:50   1 → 전체 폭
   칸이 넓어지면 그만큼 카드를 더 보여준다 (장수는 layout.js 가 정한다).

   flex-basis 를 퍼센트로 두면 gap 만큼 넘쳐 줄이 바뀐다. 그래서 gap 을 뺀 뒤 나눈다.
   gap 값을 바꾸면 calc 안의 숫자도 함께 바꿔야 한다 — 아래 미디어쿼리도 같다. */
.rs-row { display: flex; flex-wrap: wrap; gap: 30px; }
.rs-row > .rs-group { min-width: 0; }

.rs-row[data-rs-cols="3"] > .rs-group { flex: 0 0 calc((100% - 60px) / 3); max-width: calc((100% - 60px) / 3); }
.rs-row[data-rs-cols="2"] > .rs-group { flex: 0 0 calc((100% - 30px) / 2); max-width: calc((100% - 30px) / 2); }
.rs-row[data-rs-cols="1"] > .rs-group { flex: 0 0 100%;                    max-width: 100%; }

/* ── 세로형 : 분류를 위아래로 ────────────────────────────────
   위아래 간격을 가로형의 칸 간격과 같은 값으로 맞춘다. (2026-08-02 대표 지시) */
.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 가 자동으로 잡지만 명시해 둔다.
   카드에 그림자와 hover 시 살짝 뜨는 움직임이 있어 위아래로 여유를 준다. */
.rs-swiper { overflow: hidden; padding: 4px 0 8px; margin: -4px 0 -8px; }
.rs-swiper .swiper-wrapper { align-items: stretch; }

/* 슬라이드 폭은 Swiper 가 slidesPerView 값으로 직접 넣는다 (여기서 정하지 않는다).
   height:auto 라야 카드 높이가 내용에 맞춰 늘어난다. */
.rs-swiper .swiper-slide { height: auto; }

/* 카드가 슬라이드 높이를 꽉 채우게 한다 — 옆 카드와 아래선이 맞는다.
   .rc-item / .rc-card 는 recommend.css 의 목록 카드다. */
.rs-swiper .rc-item { height: 100%; }
.rs-swiper .rc-card { height: 100%; display: flex; flex-direction: column; }
.rs-swiper .rc-img-box { flex: none; }   /* 카드가 길어져도 이미지 칸은 눌리지 않는다 */
.rs-swiper .rc-info { flex: 1 1 auto; }

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width: 1259px) {
	.rs-row { gap: 24px; }
	.rs-row[data-rs-cols="3"] > .rs-group { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); }
	.rs-row[data-rs-cols="2"] > .rs-group { flex: 0 0 calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); }
	.rs-col > .rs-group { margin-bottom: 24px; }
	.rs-title a { font-size: 1.125rem; }
}

/* 모바일에서는 칸을 나누지 않는다. 분류를 위아래로 쌓고 칸마다 카드 한 장씩 민다. */
@media (max-width: 767px) {
	.rs-row { gap: 20px; }
	.rs-row > .rs-group,
	.rs-row[data-rs-cols="3"] > .rs-group,
	.rs-row[data-rs-cols="2"] > .rs-group,
	.rs-row[data-rs-cols="1"] > .rs-group { flex: 0 0 100%; max-width: 100%; }
	.rs-col > .rs-group { margin-bottom: 20px; }
}