/* =========================================================================
 * ENVY — 기획 컬렉션 목록 페이지 (/stories/ /timesale/ /ranking/ /md-pick/ /new/)
 *
 * 카드·그리드·섹션 제목은 home.css 의 것을 그대로 쓴다(홈 섹션과 같은 모양이어야
 * 「전체보기」로 넘어온 손님이 같은 화면으로 인식한다). 여기엔 목록 페이지에만
 * 필요한 여백·빈 상태·안내만 둔다.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Astra 기본 콘텐츠 래퍼 무력화
 *
 * 이 화면은 get_header()/get_footer() 를 쓰므로 Astra 의
 *   #content.site-content > .ast-container
 * 안에 들어간다. 그런데 사이트가 `ast-separate-container` 라 회색 배경 위에
 * 폭이 좁은 흰 박스로 그려지고, 홈 섹션과 좌우 정렬도 어긋난다
 * (2026-09-07 1440px 실측: 흰 박스가 118~1010px 로 왼쪽에 치우쳐 있었다).
 * 폭·여백은 우리 .envy-container 가 이미 홈과 같은 규칙으로 잡으므로
 * Astra 래퍼는 통째로 풀어준다. body.envy-collection 이 붙은 이 5개 페이지에만
 * 걸리므로 상점·상세 등 다른 화면에는 영향이 없다.
 * ---------------------------------------------------------------------- */
body.envy-collection {
	background: #fff;
}

body.envy-collection #content.site-content {
	background: #fff;
	padding: 0;
	margin: 0;
}

body.envy-collection #content .ast-container {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.envy-col {
	padding: 64px 0 120px;
	background: #fff;
}

.envy-col__head {
	margin-bottom: 48px;
}

/* h1 로 나가지만 홈 섹션 제목과 같은 크기로 보이게 한다(테마 h1 기본값 상쇄). */
.envy-col__head .envy-section-title {
	margin: 0;
}

.envy-col__count {
	margin: 14px 0 0;
	color: #767676;
	font-size: 15px;
	font-weight: 600;
}

.envy-col__grid,
.envy-col__videos {
	margin-top: 8px;
}

/* 카드 사이 세로 간격 — 여러 줄로 늘어나는 목록 화면에서만 필요하다. */
.envy-col__grid { row-gap: 56px; }
.envy-col__videos { row-gap: 32px; }

.envy-col__empty {
	margin: 72px 0 0;
	text-align: center;
	color: #767676;
	font-size: 17px;
	line-height: 1.6;
}

.envy-col__empty-cta {
	margin: 20px 0 0;
	text-align: center;
}

.envy-col__shop {
	display: inline-block;
	padding: 13px 28px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	color: #222;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.envy-col__shop:hover {
	border-color: #222;
	color: #000;
}

/* 관리자에게만 보이는 운영 안내(랭킹 폴백 등). 손님 화면에는 렌더되지 않는다. */
.envy-col__notice {
	margin: 0 0 28px;
	padding: 12px 16px;
	border: 1px solid #f0d9a8;
	border-radius: 6px;
	background: #fffaf0;
	color: #8a5a00;
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.envy-col { padding: 48px 0 80px; }
	.envy-col__head { margin-bottom: 36px; }
	.envy-col__grid { row-gap: 40px; }
}

@media (max-width: 768px) {
	.envy-col { padding: 32px 0 64px; }
	.envy-col__head { margin-bottom: 28px; }
	.envy-col__grid { row-gap: 32px; }
	.envy-col__empty { margin-top: 48px; font-size: 15px; }
}