/* =======================================================
   콘다 2026 홈 리디자인 전용 스타일
   - 모든 규칙은 body[data-page-home] 하위로 스코프한다.
   - 디자인 토큰은 etc.css :root에 선언됨.
   ======================================================= */

/* ======================= 공통 리셋/헬퍼 (홈 스코프) ======================= */
body[data-page-home] {
	background: var(--canvas);
	color: var(--ink-900);
	font-size: 16px;
	line-height: 1.6;
}

body[data-page-home] .main.home2026 {
	max-width: 1350px;
	margin: 0 auto;
	padding: 0 12px 80px;
}

body[data-page-home] .main.home2026 > section {
	margin-top: 72px;
}
body[data-page-home] .main.home2026 > section:first-of-type {
	margin-top: 156px;
	scroll-margin-top: 160px;
}
@media (max-width: 992px){
	body[data-page-home] .main.home2026 > section:first-of-type {
		margin-top: 92px;
		scroll-margin-top: 108px;
	}
}
@media (max-width: 576px){
	body[data-page-home] .main.home2026 > section:first-of-type {
		margin-top: 78px;
		scroll-margin-top: 92px;
	}
}

/* 홈 페이지에서는 format.html의 기본 footer(안 쓰임) 보호용 — block으로 이미 치환되지만 안전망 */
body[data-page-home] > footer.main { display: none !important; }

/* 섹션 공통 헤더 */
body[data-page-home] .section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
body[data-page-home] .section-kicker {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--brand1);
	background: rgba(104, 95, 255, 0.08);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}
body[data-page-home] .section-kicker.text-brand {
	color: var(--accent-text);
	background: rgba(61, 217, 179, 0.12);
}
body[data-page-home] .section-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--ink-900);
	margin: 0 0 6px;
}


/* ======================= 1. HERO — split 레이아웃 ======================= */
/* 로그인/비로그인 공통: 좌 심플 카피 + 우 12개 아이콘 */

/* 모바일 검색창 공통 스타일 (xs 전용) */
.hero-search {
	margin-top: 14px;
	margin-bottom: 0;
}
.hero-search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--paper);
	border: 1px solid var(--ink-200);
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: var(--shadow-sm);
}
.hero-search-form input {
	flex: 1;
	border: 0;
	background: transparent;
	font-size: 16px;
	outline: none;
	color: var(--ink-900);
}
.hero-search-form button {
	border: 0;
	background: var(--brand1);
	color: #fff;
	width: 36px; height: 36px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
}

.hero-split {
	background: var(--paper);
	border: 1px solid var(--ink-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.hero-split-inner {
	display: grid;
	grid-template-columns: 0.78fr 1.62fr;
	align-items: stretch;
	min-height: 252px;
}
.hero-split-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 24px;
	border-right: 1px solid var(--ink-200);
}
.hero-split-title {
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -1.4px;
	line-height: 1.17;
	color: var(--ink-900);
	margin: 0 0 10px;
}
.hero-split-accent { color: var(--brand1); }
.hero-split-sub {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-600);
	margin: 0;
}
.hero-split-cats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px 6px;
	padding: 12px 16px;
	align-content: center;
}
.hsc-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 9px 5px;
	min-height: 68px;
	border-radius: 10px;
	color: var(--ink-800);
	font-size: 14px;
	font-weight: 600;
	transition: background 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.hsc-item:hover {
	background: var(--canvas);
	color: var(--brand1);
}
.hsc-main .hsc-label { font-weight: 700; }
.hsc-label { line-height: 1.2; letter-spacing: -0.2px; }
.hsc-emoji { font-size: 28px; line-height: 1; }

/* 로그인 사용자: 첫 섹션(latest-by-genre)에 일반 상단 여백 적용 */
body[data-page-home] .home2026--loggedin > section:first-of-type {
	margin-top: 72px;
	scroll-margin-top: 80px;
}

/* 반응형 */
@media (max-width: 992px) {
	.hero-split-inner { grid-template-columns: 0.9fr 1.5fr; }
	.hero-split-copy { padding: 22px 14px; }
	.hero-split-title { font-size: 40px; }
	.hero-split-cats { padding: 10px 12px; }
	.hsc-item { min-height: 64px; font-size: 13px; }
	.hsc-emoji { font-size: 25px; }
}
@media (max-width: 768px) {
	body[data-page-home] .main.home2026 > .hero-search + .latest-by-genre { margin-top: 18px; }
	.hero-split-inner { grid-template-columns: 1fr; }
	.hero-split-copy {
		border-right: 0;
		border-bottom: 1px solid var(--ink-200);
		padding: 22px 18px;
	}
	.hero-split-title { font-size: 34px; }
	.hero-split-sub { font-size: 15px; }
	.hero-split-cats {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 6px;
		padding: 12px 10px 14px;
	}
	.hsc-item {
		gap: 8px;
		padding: 7px 3px;
		font-size: 13px;
		min-height: 64px;
	}
	.hsc-emoji { font-size: 24px; }
}
@media (max-width: 576px) {
	.hero-split-copy { padding: 18px 14px; }
	.hero-split-title { font-size: 32px; }
	.hero-split-sub { font-size: 14px; }
	.hero-split-cats { grid-template-columns: repeat(3, 1fr); }
	.hsc-item { font-size: 12px; }
	.hsc-emoji { font-size: 22px; }
}


/* ======================= 3. EDITOR'S PICK ======================= */
.editors-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.editors-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, #F7F6FB, #fff 60%);
	border: 1px solid var(--ink-200);
	color: var(--ink-900);
	overflow: hidden;
	min-height: 120px;
	transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}
.editors-card::before {
	content: "";
	position: absolute;
	inset: -30%;
	background: radial-gradient(circle at 80% 0%, rgba(104,95,255,0.18), transparent 55%);
	transition: opacity 0.3s var(--ease-out);
	opacity: 0.6;
}
.editors-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--brand2);
	color: var(--ink-900);
}
.editors-card:hover::before { opacity: 1; }
.editors-card-body {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
}
.editors-card-avatar {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--brand1), var(--brand2));
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	box-shadow: 0 4px 12px rgba(104,95,255,0.2);
}
.editors-card-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.editors-card-avatar-fallback {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}
.editors-more-wrap {
	margin-top: 18px;
	text-align: center;
}
.editors-more {
	appearance: none;
	border: 1px solid var(--ink-200);
	background: var(--paper);
	color: var(--ink-700);
	padding: 10px 24px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.editors-more:hover {
	background: var(--brand1);
	color: #fff;
	border-color: var(--brand1);
}
.editors-card-badge {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: var(--brand1);
	background: #fff;
	border: 1px solid var(--ink-200);
	padding: 2px 8px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.editors-card-title {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 4px;
	letter-spacing: -0.3px;
}
.editors-card-meta {
	font-size: 14px;
	color: var(--ink-600);
}
.editors-card-arrow {
	position: relative;
	z-index: 1;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--brand1);
	color: #fff;
	flex: 0 0 auto;
}
.editors-empty {
	grid-column: 1 / -1;
	padding: 32px;
	text-align: center;
	background: var(--paper);
	border: 1px dashed var(--ink-200);
	border-radius: var(--radius-md);
	color: var(--ink-600);
}


/* ======================= 4. POPULAR TOP 10 ======================= */
.latest-by-genre .top10-surface,
.popular-top10 .top10-surface {
	background: var(--paper);
	border: 1px solid var(--ink-200);
	border-radius: var(--radius-lg);
	padding: 24px;
}
.top10-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.top10-viewall {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--brand1);
	padding: 6px 10px;
	border-radius: 999px;
	transition: background 0.18s var(--ease-out);
	white-space: nowrap;
}
.top10-viewall:hover {
	background: rgba(104,95,255,0.08);
	color: var(--brand1);
}
@media (max-width: 576px){
	.top10-controls { flex-direction: column; align-items: flex-start; }
	.top10-viewall { align-self: flex-end; }
}
.top10-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.top10-tab {
	border: 1px solid var(--ink-200);
	background: var(--paper);
	color: var(--ink-600);
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.18s var(--ease-out);
}
.top10-tab:hover { border-color: var(--brand2); color: var(--brand1); }
.top10-tab.active {
	background: var(--brand1);
	border-color: var(--brand1);
	color: #fff;
}
.top10-viewport {
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 4px;
	margin-top: 12px;
}
.top10-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 1fr);
	grid-template-rows: 1fr;
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.top10-item {
	min-width: 0;
}
.top10-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	color: inherit;
	text-decoration: none;
}
/* 대분류별 썸네일 비율: 이미지 4:3, 글/틀 2:3, 소리는 파형(16:9) */
.top10-thumb {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: var(--canvas);
	border: 1px solid var(--ink-200);
	position: relative;
	transition: border-color 0.18s var(--ease-out);
}
.top10-link:hover .top10-thumb { border-color: var(--brand2); }
.top10-thumb[data-main="이미지"] { aspect-ratio: 4 / 3; }
.top10-thumb[data-main="글"]    { aspect-ratio: 2 / 3; }
.top10-thumb[data-main="틀"]    { aspect-ratio: 2 / 3; }
.top10-thumb[data-main="소리"]  { aspect-ratio: 16 / 9; background: var(--canvas); }
.top10-thumb[data-main=""]      { aspect-ratio: 4 / 3; }
.top10-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 소리 파형 (previewWrapper): 방금 올라ON 과 동일하게 [왼쪽 재생버튼 + 오른쪽 파형] 가로 배치.
   etc.css 의 .previewWrapper { display: flex; flex-wrap: wrap; padding: 15px; ... } 를 그대로 활용하되,
   top10 카드 크기에 맞춰 패딩·폰트·레이아웃만 세밀 조정한다. */
.top10-thumb[data-main="소리"] .previewWrapper {
	width: 100%;
	height: 100%;
	padding: 8px 10px;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--ink-200, rgba(0,0,0,0.08));
	border-radius: 10px;
	overflow: hidden;
	pointer-events: none;
}
.top10-thumb[data-main="소리"] .previewBtn {
	position: static;
	transform: none;
	font-size: 28px;
	line-height: 1;
	color: var(--brand1, #685FFF);
	filter: none;
	flex: 0 0 auto;
	display: none;
}
.top10-thumb[data-main="소리"] .previewImg {
	width: auto;
	height: 100%;
	flex: 1 1 0%;
	margin-left: 0;
}
.top10-foot {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.top10-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-900);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.18s var(--ease-out);
}
.top10-link:hover .top10-title { color: var(--brand1); }
.top10-author {
	font-size: 14px;
	color: var(--ink-600);
}
.top10-empty {
	grid-column: 1 / -1;
	padding: 40px;
	text-align: center;
	border: 1px dashed var(--ink-200);
	border-radius: var(--radius-md);
	color: var(--ink-600);
	background: var(--paper);
}
.top10-notice {
	grid-column: 1 / -1;
	padding: 14px 16px;
	text-align: center;
	font-size: 14.5px;
	color: var(--ink-600);
	background: rgba(104,95,255,0.05);
	border: 1px dashed rgba(104,95,255,0.25);
	border-radius: var(--radius-md);
}


/* ======================= 4-B. LATEST BY GENRE (Fresh tone) ======================= */
/* Top 10 과 카드/탭/스크롤 구조를 공유하고, 포인트 컬러만 민트/청록 계열로 차별화한다. */
body[data-page-home] .latest-by-genre .top10-viewall {
	color: #0d9488;
}
body[data-page-home] .latest-by-genre .top10-viewall:hover {
	background: rgba(15, 181, 163, 0.10);
	color: #0d9488;
}
body[data-page-home] .latest-by-genre .top10-link:hover .top10-thumb {
	border-color: rgba(15, 181, 163, 0.55);
}
body[data-page-home] .latest-by-genre .top10-notice {
	background: rgba(15, 181, 163, 0.05);
	border-color: rgba(15, 181, 163, 0.25);
}


/* ======================= 5. TEXT SPECIAL ======================= */
.text-special-sub {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-600);
	margin-left: 8px;
	vertical-align: middle;
}
.text-special-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.text-special-card {
	position: relative;
	padding: 22px;
	border-radius: var(--radius-lg);
	background: var(--paper);
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.text-special-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}
.text-special-card::after {
	content: "";
	position: absolute;
	bottom: -40%; right: -20%;
	width: 220px; height: 220px;
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.4;
	pointer-events: none;
}
.text-card-ebook::after { background: rgba(61, 217, 179, 0.4); }
.text-card-paper::after { background: rgba(106, 184, 255, 0.4); }
.text-card-idea::after  { background: rgba(255, 178, 122, 0.4); }

.text-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.text-card-emoji {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	font-size: 26px;
	border-radius: 14px;
	background: var(--canvas);
	border: 1px solid var(--ink-200);
}
.text-card-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 2px;
	letter-spacing: -0.3px;
}
.text-card-desc {
	font-size: 14px;
	color: var(--ink-600);
	margin: 0;
}
.text-card-more {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 2px;
	font-size: 14px; font-weight: 600;
	color: var(--brand1);
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(104,95,255,0.06);
}
.text-card-preview {
	list-style: none;
	padding: 0; margin: 0;
	display: flex; flex-direction: column;
	gap: 10px;
	min-height: 300px;
}
.text-card-preview li {
	display: flex; align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--canvas);
	border-radius: 10px;
	transition: background 0.18s var(--ease-out);
}
.text-card-preview li:hover {
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.text-card-preview a {
	display: flex; align-items: center; gap: 14px; width: 100%;
	color: var(--ink-900);
	font-size: 15px;
	min-width: 0;
	padding: 6px 0;
}
.text-card-preview .tcp-thumb {
	flex: 0 0 70px;
	width: 70px; height: auto;
	aspect-ratio: 2 / 3;
	border-radius: 8px; overflow: hidden;
	background: #fff;
	border: 1px solid var(--ink-200);
	box-shadow: 0 4px 10px rgba(18, 12, 60, 0.06);
}
.text-card-preview .tcp-thumb img {
	width: 100%; height: 100%; object-fit: cover;
	display: block;
}
.text-card-preview .tcp-text {
	flex: 1; min-width: 0;
}
.text-card-preview .tcp-title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}
.text-card-preview .tcp-author {
	font-size: 13.5px; color: var(--ink-600);
	margin-top: 4px;
}
.text-card-preview .tcp-empty {
	color: var(--ink-400);
	text-align: center;
	padding: 20px;
	font-size: 15px;
}

/* 전자책 표지 tilt 효과(간단 버전) */
.text-card-ebook .text-card-preview .tcp-thumb {
	transition: transform 0.3s var(--ease-out);
}
.text-card-ebook .text-card-preview li:hover .tcp-thumb {
	transform: perspective(400px) rotateY(-12deg) scale(1.04);
}


/* ======================= 6. NEW 4 CATEGORIES ======================= */
.new-cat-block {
	margin-top: 28px;
	padding: 22px;
	border-radius: var(--radius-lg);
	background: var(--paper);
	border: 1px solid var(--ink-200);
}
.new-cat-block:first-of-type { margin-top: 10px; }
.new-cat-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.new-cat-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	display: flex; align-items: center; gap: 10px;
	letter-spacing: -0.3px;
}
.new-cat-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.new-cat-image .new-cat-dot    { background: var(--accent-image); }
.new-cat-text  .new-cat-dot    { background: var(--accent-text); }
.new-cat-sound .new-cat-dot    { background: var(--accent-sound); }
.new-cat-template .new-cat-dot { background: var(--accent-template); }
.new-cat-more {
	display: inline-flex;
	align-items: center; gap: 2px;
	font-size: 15px; font-weight: 600;
	color: var(--brand1);
}
.new-cat-more:hover { color: var(--brand1); text-decoration: underline; }

/* 서브카테고리 pill (무료 섹션 디자인 재사용) */
.new-cat-pills {
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.new-cat-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink-700);
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
	user-select: none;
}
.new-cat-pill:hover {
	border-color: var(--brand1);
	color: var(--brand1);
}
.new-cat-pill.active {
	background: linear-gradient(135deg, var(--brand1), var(--brand2));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 10px rgba(104, 95, 255, 0.25);
}

/* '더 보기' 버튼: 각 new-cat-block 하단 중앙 */
body[data-page-home] .new-cat-morewrap {
	display: flex;
	justify-content: center;
	margin: 18px 0 6px;
}
body[data-page-home] .new-cat-morewrap[hidden] { display: none; }
body[data-page-home] .new-cat-morebtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 26px;
	font-size: 16px;
	font-weight: 700;
	color: var(--brand1);
	background: #fff;
	border: 1.5px solid var(--brand2, #aaa3ff);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.12s var(--ease-out);
	box-shadow: 0 2px 6px rgba(104, 95, 255, 0.08);
}
body[data-page-home] .new-cat-morebtn i {
	font-size: 16px;
	line-height: 1;
	transition: transform 0.2s var(--ease-out);
}
body[data-page-home] .new-cat-morebtn:hover {
	background: linear-gradient(135deg, var(--brand1), var(--brand2));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 6px 16px rgba(104, 95, 255, 0.28);
}
body[data-page-home] .new-cat-morebtn:hover i { transform: translateY(2px); }
body[data-page-home] .new-cat-morebtn:active { transform: translateY(1px); }

@media (max-width: 576px){
	body[data-page-home] .new-cat-morewrap { margin: 14px 0 4px; }
	body[data-page-home] .new-cat-morebtn {
		width: 100%;
		max-width: 320px;
		justify-content: center;
		padding: 12px 20px;
		font-size: 15.5px;
	}
}

/* 카테고리별 카드 썸네일 비율 통일 (cover) */
.new-cat-block .wrapHoverProduct .contentMain,
.new-cat-block .wrapHoverProduct .imgMain,
.new-cat-block .wrapHoverProduct .banner-img,
.new-cat-block .item .banner-img,
.new-cat-block .item .imgMain {
	position: relative;
	overflow: hidden;
}
.new-cat-block .wrapHoverProduct img,
.new-cat-block .item img.w-100 {
	object-fit: cover;
}
.new-cat-block[data-main="image"] .item { aspect-ratio: 4 / 3; }
.new-cat-block[data-main="text"]  .item { aspect-ratio: 2 / 3; }
.new-cat-block[data-main="sound"] .item { aspect-ratio: 1 / 1; }
.new-cat-block[data-main="template"] .item { aspect-ratio: 16 / 9; }
.new-cat-block .item img.w-100 {
	width: 100% !important;
	height: 100% !important;
}
.new-cat-block .item .contentMain,
.new-cat-block .item .banner-img {
	width: 100%;
	/* height: 100%; */
}
.new-cat-empty {
	padding: 40px 16px;
	text-align: center;
	color: var(--ink-500);
	font-size: 15px;
	background: rgba(104,95,255,0.03);
	border: 1px dashed var(--ink-200);
	border-radius: 12px;
}


/* ======================= 7. FREE CONTENTS (기존 스타일 위에 얹기) ======================= */
body[data-page-home] .free-contents .free-contents-surface {
	padding: 28px 24px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #fff, #F7F6FB);
	border: 1px solid var(--ink-200);
}
/* 무료 콘텐츠 pill 복구 (홈 스코프 재정의, main.css 상속 충돌 방지) */
body[data-page-home] .free-contents .freeCatPills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 18px;
	padding: 0;
	list-style: none;
}
body[data-page-home] .free-contents .freeCatPill {
	appearance: none;
	border: 1px solid var(--ink-200);
	background: var(--paper);
	color: var(--ink-600);
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
	box-shadow: none;
}
body[data-page-home] .free-contents .freeCatPill:hover {
	border-color: var(--brand2);
	color: var(--brand1);
	transform: translateY(-1px);
}
body[data-page-home] .free-contents .freeCatPill.active,
body[data-page-home] .free-contents .freeCatPill[aria-selected="true"] {
	background: linear-gradient(135deg, var(--brand1), var(--brand2));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 12px rgba(104,95,255,0.22);
}


/* 무료 캐러셀: 대분류별 썸네일 비율 차별화 */
body[data-page-home] .free-carousel .free-col .banner-img {
	overflow: hidden;
	position: relative;
	width: 100%;
}
body[data-page-home] .free-carousel .free-col[data-main="image"]    .banner-img { aspect-ratio: 4 / 3; }
body[data-page-home] .free-carousel .free-col[data-main="text"]     .banner-img { aspect-ratio: 2 / 3; }
body[data-page-home] .free-carousel .free-col[data-main="template"] .banner-img { aspect-ratio: 2 / 3; }
body[data-page-home] .free-carousel .free-col .banner-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
/* 소리 대분류: 썸네일 대신 WaveSurfer 파형 박스 ([왼쪽 재생버튼 + 오른쪽 파형] 가로 배치).
   방금 올라ON(etc.css) 과 동일한 레이아웃을 무료 캐러셀 카드에도 일관되게 적용한다. */
body[data-page-home] .free-carousel .free-col[data-main="sound"] .previewWrapper {
	aspect-ratio: 16 / 9;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ink-200, rgba(0,0,0,0.08));
	border-radius: 12px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 10px;
	overflow: hidden;
}
body[data-page-home] .free-carousel .free-col[data-main="sound"] .previewBtn {
	position: static;
	transform: none;
	font-size: 34px;
	line-height: 1;
	color: var(--brand1, #685FFF);
	filter: none;
	flex: 0 0 auto;
	display: none;
}
body[data-page-home] .free-carousel .free-col[data-main="sound"] .previewImg {
	width: auto;
	height: 100%;
	flex: 1 1 0%;
	margin-left: 0;
}
/* 메타 영역: 제목+작성자+가격 */
body[data-page-home] .free-carousel .free-col .free-card-meta {
	padding: 8px 4px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
body[data-page-home] .free-carousel .free-col .free-card-meta .sTitleProduct {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-900, #1a1a2e);
	text-decoration: none;
}
body[data-page-home] .free-carousel .free-col .free-card-meta .sUsernameProduct {
	font-size: 13px;
	color: var(--ink-500, #6b7280);
	text-decoration: none;
}
body[data-page-home] .free-carousel .free-col .item {
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* 무료 콘텐츠 Bootstrap 캐러셀: pill 아래 전용 내비 행 + 트랙 풀폭 */
body[data-page-home] .free-carousel {
	position: relative;
	padding: 4px 0;
}
body[data-page-home] .free-carousel .free-row {
	--bs-gutter-y: 16px;
}
body[data-page-home] .free-carousel .free-col {
	display: flex;
}
body[data-page-home] .free-carousel .free-col .item {
	width: 100%;
}
/* 새 내비 행: pill 바로 아래, 양끝 배치 */
body[data-page-home] .free-carousel-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 12px;
}
body[data-page-home] .free-nav-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--ink-200);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--brand1);
	box-shadow: 0 4px 12px rgba(104,95,255,0.14);
	transition: transform .15s var(--ease-out), background .15s var(--ease-out);
	cursor: pointer;
	padding: 0;
}
body[data-page-home] .free-nav-btn:hover {
	transform: translateY(-1px);
	background: #F7F6FB;
}
body[data-page-home] .free-nav-btn i {
	font-size: 14px;
	line-height: 1;
}
/* 무료 소리 카드: 재생 버튼은 왼쪽(위의 [왼쪽 버튼 + 오른쪽 파형] 규칙으로 노출) */
@media (max-width: 767px){
	body[data-page-home] .free-nav-btn {
		width: 32px;
		height: 32px;
	}
}


/* ======================= 8.5. SOUND CARD THUMBNAIL (sound-stack wrapper) ======================= */
/* 실제 업로드된 썸네일이 있는 소리 카드는 .sound-stack 래퍼 안에 [썸네일 + 파형] 두 블록이
   세로로 나란히 보이도록 구성한다. 파형 div(.previewWrapper)의 기존 스타일(aspect-ratio 등)은
   그대로 두고, 상단에 4:3 썸네일만 자연스럽게 끼워 넣는다. 한 카드(div) 안에 두 블록이
   시각적으로 함께 묶여 보이도록 의도한 구조다. */
.sound-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.sound-stack .sound-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--canvas);
	border: 1px solid var(--ink-200, rgba(0,0,0,0.08));
}
.sound-stack .sound-thumb,
.sound-stack .sound-thumb a { display: block; }
.sound-stack .sound-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sound-stack .previewWrapper { width: 100%; }

/* Top10 소리 카드: sound-stack 이 들어가면 외곽 고정 16:9/배경/테두리/중앙정렬 해제 */
.top10-thumb[data-main="소리"]:has(.sound-stack) {
	aspect-ratio: auto;
	background: transparent;
	border: 0;
	overflow: visible;
	display: block;
}

/* 무료 캐러셀 소리 카드: sound-stack 이 들어가면 기존 previewWrapper 전용 스타일과 충돌 없이
   상단 썸네일 + 하단 파형이 자연스럽게 쌓인다. previewWrapper 자체는 16:9 비율을 유지하므로
   별도 오버라이드 없이 동작한다. */


/* ======================= 9. FREEPASS BANNER ======================= */
.freepass-inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 14px;
	align-items: center;
	padding: 26px 30px;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 0% 100%, rgba(154,148,255,0.4), transparent 60%),
		linear-gradient(135deg, #231F4A 0%, #3C3587 100%);
	color: #fff;
	overflow: hidden;
	position: relative;
}
.freepass-copy { position: relative; z-index: 1; }
.freepass-badge {
	display: inline-block;
	background: linear-gradient(90deg, #ffd79b, #FFB27A);
	color: #3C3587;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	margin-bottom: 14px;
	letter-spacing: 0.5px;
}
.freepass-title {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.6px;
	line-height: 1.18;
	margin: 0 0 14px;
}
.freepass-cta {
	display: inline-flex; align-items: center;
	padding: 10px 20px;
	background: #fff;
	color: #3C3587;
	border-radius: 999px;
	font-weight: 700;
	transition: transform 0.2s var(--ease-out);
}
.freepass-cta:hover { color: #3C3587; transform: translateY(-2px); }

.freepass-visual {
	display: flex; justify-content: center; align-items: center;
	position: relative;
	z-index: 1;
}
.freepass-ticket {
	display: flex;
	background: rgba(255,255,255,0.96);
	border-radius: 18px;
	color: #3C3587;
	box-shadow: 0 24px 48px rgba(0,0,0,0.25);
	transform: rotate(-4deg) scale(0.92);
}
.freepass-ticket-main {
	padding: 22px 26px;
	display: flex; flex-direction: column;
	justify-content: center;
	border-right: 2px dashed #CCD2F0;
}
.freepass-ticket-title {
	font-family: 'Comfortaa', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--brand1);
}
.freepass-ticket-sub {
	font-weight: 700;
	letter-spacing: 3px;
	font-size: 14px;
	color: var(--ink-600);
}
.freepass-ticket-stub {
	padding: 16px 20px;
	display: grid; place-items: center;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.05;
	text-align: center;
	color: var(--brand1);
}
.freepass-ticket-infinite {
	font-size: 56px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -2px;
	color: var(--brand1);
}
.freepass-ticket-sub2 {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	margin-top: 4px;
	color: var(--ink-600);
}


/* ======================= 10. BECOME CREATOR ======================= */
.become-inner {
	padding: 30px 24px;
	border-radius: var(--radius-lg);
	background:
		radial-gradient(circle at 100% 0%, rgba(255,178,122,0.35), transparent 50%),
		linear-gradient(135deg, #F7F6FB, #fff);
	border: 1px solid var(--ink-200);
	text-align: center;
}
.become-title {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.8px;
	line-height: 1.2;
	margin: 0 0 14px;
}
.become-cta-primary {
	display: inline-flex; align-items: center;
	padding: 10px 22px;
	background: var(--brand1);
	color: #fff;
	border-radius: 999px;
	font-weight: 800;
	transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.become-cta-primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}
/* ======================= 11. EXHIBITION TAGS (기존 유지, 톤 업) ======================= */
.exhibition-chip a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px;
	background: var(--paper);
	border: 1px solid var(--ink-200);
	border-radius: var(--radius-md);
	color: var(--ink-700);
	transition: all 0.2s var(--ease-out);
}
.exhibition-chip a:hover {
	border-color: var(--brand2);
	color: var(--brand1);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.exhibition-chip-tag {
	font-weight: 700;
	font-size: 15px;
	max-width: 70%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exhibition-chip-cnt {
	font-size: 14px;
	color: var(--ink-400);
	background: var(--canvas);
	padding: 2px 8px; border-radius: 999px;
}
.exhibition-more {
	margin-top: 16px;
	cursor: pointer;
	color: var(--brand1);
	font-weight: 600;
}


/* ======================= 12. FOOTER REDESIGNED ======================= */
.footer-redesigned {
	margin-top: 80px;
	padding: 48px 20px 36px;
	background: linear-gradient(180deg, var(--canvas), #F2F0FA);
	border-top: 1px solid var(--ink-200);
}
.footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}
.footer-brand {
	display: flex; align-items: baseline; gap: 10px;
	margin-bottom: 12px;
}
.footer-logo {
	font-family: 'Comfortaa', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--brand1);
}
.footer-tagline {
	margin: 0;
	color: var(--ink-600);
	font-size: 15px;
}
.footer-addr {
	font-style: normal;
	color: var(--ink-600);
	font-size: 14.5px;
	line-height: 1.7;
	margin-bottom: 16px;
}
.footer-addr strong { color: var(--ink-900); font-weight: 700; }
.footer-bank { color: var(--ink-600); display: inline-block; margin-top: 4px; }
.footer-copy {
	color: var(--ink-400);
	font-size: 13.5px;
	margin: 0;
}
.footer-col-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900);
	margin: 0 0 14px;
	letter-spacing: -0.2px;
}
.footer-col-list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex; flex-direction: column;
}
.footer-col-list a {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--ink-600);
	font-size: 15px;
	transition: color 0.15s var(--ease-out);
}
.footer-col-list a:hover { color: var(--brand1); }

.footer-newsletter { margin-top: 18px; }
.footer-newsletter-label {
	display: block;
	font-size: 14px;
	color: var(--ink-600);
	margin-bottom: 6px;
}
.footer-newsletter-form {
	display: flex; gap: 6px;
	background: #fff;
	border: 1px solid var(--ink-200);
	border-radius: 999px;
	padding: 6px;
}
.footer-newsletter-form input {
	flex: 1;
	border: 0; background: transparent;
	padding: 6px 10px;
	font-size: 15px;
	outline: none;
}
.footer-newsletter-form button {
	border: 0;
	background: var(--brand1);
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}


/* ======================= 페이드인 진입 애니메이션 ======================= */
body[data-page-home] .main.home2026 > section {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
body[data-page-home] .main.home2026 > section.in-view,
body[data-page-home] .main.home2026 > section:first-of-type {
	opacity: 1;
	transform: translateY(0);
}


/* ======================= 반응형 ======================= */
@media (max-width: 1199px) {
	body[data-page-home] .main.home2026 { padding: 0 12px 72px; }
	body[data-page-home] .section-title { font-size: 24px; }
	.hero-split-title { font-size: 36px; }

	.editors-grid { grid-template-columns: repeat(3, 1fr); }
	.text-special-grid { grid-template-columns: 1fr; }

	.top10-list { grid-auto-columns: minmax(180px, 1fr); }
}

@media (max-width: 768px) {
	.top10-list { grid-auto-columns: minmax(160px, 1fr); }
	.top10-title { font-size: 15px; }
}

@media (max-width: 992px) {
	.editors-grid { grid-template-columns: repeat(2, 1fr); }

	.freepass-inner { grid-template-columns: 1fr; padding: 22px 20px; }
	.freepass-visual { display: none; }

	.footer-inner { grid-template-columns: 1fr 1fr; }
	.footer-col-company { grid-column: 1 / -1; }
}

@media (max-width: 576px) {
	body[data-page-home] .main.home2026 { padding: 0 12px 60px; }
	body[data-page-home] .main.home2026 > section { margin-top: 48px; }
	body[data-page-home] .section-title { font-size: 20px; }
	body[data-page-home] .section-head { flex-direction: column; align-items: stretch; }
	body[data-page-home] .section-kicker { font-size: 13px; }

	.editors-grid { grid-template-columns: 1fr; }
	.editors-card-avatar { width: 40px; height: 40px; font-size: 16px; }
	.new-cat-block { padding: 16px; }

	.text-card-preview { min-height: 260px; }
	.text-card-preview .tcp-title { font-size: 14px; }
	.text-card-preview .tcp-author { font-size: 12.5px; }
	.text-card-preview .tcp-thumb {
		flex: 0 0 56px;
		width: 56px; height: auto;
		aspect-ratio: 2 / 3;
	}

	.become-inner { padding: 24px 16px; }
	.become-title { font-size: 28px; }

	.footer-inner { grid-template-columns: 1fr; gap: 28px; }
}