/**
 * Main page glassmorphism & collection UI
 * 참조 이미지 기준: 어두운 코즈믹 배경, 황금 타이틀, 구분선, 반응형 그리드
 */

/* ─── Page & wrap (fallback if globals not loaded) ─── */
body {
	background-color: #0f0a1a;
}
.wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 16px 32px;
}
@media (min-width: 768px) {
	.wrap { padding: 0 24px 48px; }
}

/* ─── Hero / Logo area ─── */
.logo-area {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 24px;
	margin-bottom: 16px;
	padding: 40px 16px 36px;
}
.logo-area h1 {
	font-size: clamp(1.35rem, 4.5vw, 1.9rem);
	font-weight: 800;
	color: #f4eeff;
}
.logo-area p {
	color: rgba(200, 170, 255, 0.7);
	font-size: 0.9rem;
	margin-top: 6px;
}
.auth-quick-links {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	padding: 12px 22px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.auth-btn--signup {
	color: #fff;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(99, 102, 241, 0.85));
	border: 1px solid rgba(180, 120, 255, 0.35);
}
.auth-btn--login {
	color: #e2e8f0;
	background: rgba(15, 23, 42, 0.8);
	border: 1px solid rgba(234, 179, 8, 0.5);
}

/* ─── Destiny card (MY DESTINY CARD) ─── */
.dp-master-card {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 20px;
	border: 1px solid rgba(255, 215, 0, 0.25);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	margin-bottom: 20px;
	padding: 20px 16px;
	background: linear-gradient(160deg, rgba(20, 8, 45, 0.92), rgba(12, 4, 32, 0.95));
}
.dp-master-card--active {
	border-color: rgba(255, 215, 0, 0.45);
	box-shadow: 0 0 24px rgba(255, 200, 80, 0.15);
}

/* ─── Input section (form card) ─── */
.card.input-section {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 22px;
	padding: 24px 16px;
	margin-bottom: 20px;
	border: 1px solid rgba(120, 80, 255, 0.25);
	background: linear-gradient(180deg, rgba(14, 6, 32, 0.94), rgba(8, 4, 22, 0.97));
}
.form-label {
	color: rgba(220, 210, 255, 0.9);
	font-size: 0.85rem;
	font-weight: 600;
}
.inp, .form-country-select {
	background: rgba(20, 12, 45, 0.7);
	border: 1px solid rgba(140, 100, 255, 0.3);
	border-radius: 12px;
	color: #f4eeff;
	padding: 10px 14px;
	font-size: 0.95rem;
}
.birth-time-tip {
	color: rgba(200, 180, 255, 0.65);
	font-size: 0.8rem;
	margin-top: 8px;
}
.dp-save-btn {
	width: 100%;
	padding: 14px;
	border-radius: 14px;
	background: linear-gradient(90deg, rgba(80, 40, 160, 0.6), rgba(100, 60, 200, 0.5));
	border: 1px solid rgba(180, 140, 255, 0.35);
	color: #fde68a;
	font-weight: 700;
	font-size: 0.95rem;
	margin-top: 16px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.btn-main {
	width: 100%;
	padding: 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(100, 50, 200, 0.85), rgba(80, 40, 180, 0.9));
	border: 1px solid rgba(180, 120, 255, 0.4);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	margin-top: 12px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.fortune-point-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
	padding: 12px 14px;
	background: rgba(20, 12, 45, 0.5);
	border-radius: 12px;
	font-size: 0.85rem;
	color: rgba(200, 180, 255, 0.85);
}
.fortune-point-charge {
	padding: 8px 16px;
	background: rgba(240, 230, 255, 0.95);
	color: #2e1065;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
}

/* ─── Post-saju intro ─── */
.post-saju-services-intro {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 22px;
	padding: 28px 20px 24px;
	margin-top: 32px;
	margin-bottom: 28px;
	text-align: center;
	border: 1px solid rgba(150, 95, 255, 0.35);
	background: linear-gradient(160deg, rgba(18, 6, 42, 0.95), rgba(10, 4, 28, 0.97));
}
.post-saju-services-intro strong {
	display: block;
	font-size: 1.1rem;
	color: #fde68a;
	margin-bottom: 10px;
}
.post-saju-services-intro span {
	display: block;
	font-size: 0.88rem;
	color: rgba(210, 190, 255, 0.8);
	line-height: 1.55;
}

/* ─── Feature card grid ─── */
.feature-card-grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 8px;
}
.fg-group { margin-bottom: 28px; }
.fg-group:last-child { margin-bottom: 0; }

/* ─── Collection boxes ─── */
/* overflow-x: hidden만 유지 (가로 넘침 방지), overflow-y: visible로 메인 페이지 스크롤 방해 방지 */
.feat-collection,
.tarot-collection {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	contain: layout paint style;
	content-visibility: auto;
	contain-intrinsic-size: 420px;
	border-radius: 22px;
	padding: 24px 16px 22px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow-x: hidden;
	overflow-y: visible;
	position: relative;
}
/* 컬렉션별 배경·테두리 색상 (배포 사이트와 동일 - muted teal / deep purple) */
.feat-collection--animal {
	background: linear-gradient(180deg, rgba(8, 78, 62, 0.72), rgba(3, 48, 44, 0.82));
	border-color: rgba(167, 243, 208, 0.55);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(34, 197, 94, 0.3) inset;
}
.feat-collection--oracle {
	background: linear-gradient(160deg, rgba(120, 53, 15, 0.6), rgba(69, 26, 3, 0.7));
	border-color: rgba(253, 224, 71, 0.7);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(245, 158, 11, 0.35) inset;
}
.feat-collection--cosmic {
	background: linear-gradient(160deg, rgba(46, 16, 101, 0.7), rgba(30, 27, 75, 0.75));
	border-color: rgba(167, 139, 250, 0.7);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.35) inset;
}
.feat-collection--flower {
	background: linear-gradient(160deg, rgba(131, 24, 67, 0.6), rgba(80, 7, 36, 0.7));
	border-color: rgba(251, 207, 232, 0.7);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(236, 72, 153, 0.35) inset;
}
.tarot-collection {
	background: linear-gradient(180deg, rgba(55, 25, 95, 0.7), rgba(18, 8, 35, 0.92));
	border-color: rgba(196, 181, 253, 0.5);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.28) inset;
}
.feat-collection__header,
.tarot-collection__header {
	text-align: center;
	padding: 0 8px 20px;
	position: relative;
	z-index: 2;
	border-bottom: 1px solid rgba(253, 230, 138, 0.2);
	margin-bottom: 16px;
}
.feat-collection--animal .feat-collection__header { border-bottom-color: rgba(167, 243, 208, 0.75); }
.feat-collection--oracle .feat-collection__header { border-bottom-color: rgba(253, 224, 71, 0.75); }
.feat-collection--cosmic .feat-collection__header { border-bottom-color: rgba(167, 139, 250, 0.8); }
.feat-collection--flower .feat-collection__header { border-bottom-color: rgba(251, 207, 232, 0.75); }
.tarot-collection__header { border-bottom-color: rgba(196, 181, 253, 0.75); }
.feat-collection__icon,
.tarot-collection__icon {
	display: block;
	font-size: 1.6rem;
	margin-bottom: 10px;
	line-height: 1;
}
.feat-collection__title,
.tarot-collection__title {
	font-size: clamp(1.1rem, 3.5vw, 1.35rem);
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: 0.02em;
	color: #fde68a;
	text-shadow: 0 0 24px rgba(253, 230, 138, 0.5), 0 0 14px rgba(255, 255, 255, 0.3);
}
.feat-collection__subtitle,
.tarot-collection__subtitle {
	font-size: 0.85rem;
	color: rgba(220, 200, 255, 0.75);
	margin: 0 0 14px;
	line-height: 1.45;
}
.feat-collection__lede,
.tarot-collection__lede {
	margin: 0 auto 10px;
	max-width: min(92%, 720px);
	font-size: 0.79rem;
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(245, 235, 255, 0.84);
	text-wrap: pretty;
}
.feat-collection__featureline,
.tarot-collection__featureline {
	margin: 0 auto 12px;
	width: fit-content;
	max-width: min(92%, 760px);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 0.71rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
	word-break: keep-all;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
	box-shadow: 0 8px 24px rgba(2, 6, 23, 0.22), 0 0 0 1px rgba(255,255,255,0.06) inset;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
	color: rgba(240, 232, 255, 0.92);
}
.feat-collection--animal .feat-collection__lede {
	color: rgba(209, 250, 229, 0.92);
}
.feat-collection--animal .feat-collection__featureline {
	color: rgba(209, 250, 229, 0.98);
	border-color: rgba(110, 231, 183, 0.42);
	background: linear-gradient(120deg, rgba(16, 185, 129, 0.28), rgba(13, 148, 136, 0.18));
}
.feat-collection--oracle .feat-collection__lede {
	color: rgba(255, 241, 179, 0.9);
}
.feat-collection--oracle .feat-collection__featureline {
	color: rgba(254, 243, 199, 0.96);
	border-color: rgba(250, 204, 21, 0.4);
	background: linear-gradient(120deg, rgba(217, 119, 6, 0.32), rgba(120, 53, 15, 0.2));
}
.feat-collection--cosmic .feat-collection__lede {
	color: rgba(224, 231, 255, 0.92);
}
.feat-collection--cosmic .feat-collection__featureline {
	color: rgba(221, 214, 254, 0.97);
	border-color: rgba(167, 139, 250, 0.42);
	background: linear-gradient(120deg, rgba(109, 40, 217, 0.3), rgba(49, 46, 129, 0.2));
}
.feat-collection--flower .feat-collection__lede {
	color: rgba(255, 228, 241, 0.92);
}
.feat-collection--flower .feat-collection__featureline {
	color: rgba(251, 207, 232, 0.98);
	border-color: rgba(244, 114, 182, 0.42);
	background: linear-gradient(120deg, rgba(236, 72, 153, 0.3), rgba(157, 23, 77, 0.2));
}
.tarot-collection .tarot-collection__lede {
	color: rgba(233, 225, 255, 0.92);
}
.tarot-collection .tarot-collection__featureline {
	color: rgba(221, 214, 254, 0.98);
	border-color: rgba(196, 181, 253, 0.42);
	background: linear-gradient(120deg, rgba(109, 40, 217, 0.3), rgba(67, 56, 202, 0.2));
}
.feat-collection--animal .feat-collection__subtitle::after,
.feat-collection--oracle .feat-collection__subtitle::after,
.feat-collection--cosmic .feat-collection__subtitle::after,
.feat-collection--flower .feat-collection__subtitle::after,
.tarot-collection .tarot-collection__subtitle::after {
	content: none;
	display: none;
}
.feat-collection__divider,
.tarot-collection__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 4px;
}
.fc-div-line,
.tc-divider-line {
	flex: 1;
	max-width: 64px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(253, 230, 138, 0.65), transparent);
	border-radius: 1px;
}
.fc-div-gem,
.tc-divider-star,
.tc-divider-gem {
	color: rgba(253, 230, 138, 0.9);
	font-size: 0.7rem;
}
.feat-collection--animal .fc-div-line { background: linear-gradient(90deg, transparent, rgba(167, 243, 208, 0.9), transparent); }
.feat-collection--animal .fc-div-gem { color: #6ee7b7; }
.feat-collection--oracle .fc-div-line { background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.9), transparent); }
.feat-collection--oracle .fc-div-gem { color: #fcd34d; }
.feat-collection--cosmic .fc-div-line { background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.9), transparent); }
.feat-collection--cosmic .fc-div-gem { color: #a78bfa; }
.feat-collection--flower .fc-div-line { background: linear-gradient(90deg, transparent, rgba(251, 207, 232, 0.9), transparent); }
.feat-collection--flower .fc-div-gem { color: #f472b6; }
.tarot-collection .tc-divider-line { background: linear-gradient(90deg, transparent, rgba(196, 181, 253, 0.9), transparent); }
.tarot-collection .tc-divider-star,
.tarot-collection .tc-divider-gem { color: #a78bfa; }
/* ─── 별 효과 (cosmos overlay) ─── */
.feat-collection__cosmos,
.tarot-collection__cosmos {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	border-radius: inherit;
	animation: tarotCosmosDrift 16s ease-in-out infinite alternate;
}
.fc-star {
	position: absolute;
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow:
		0 0 6px 2px rgba(255, 255, 255, 0.5),
		0 0 12px 4px rgba(255, 230, 138, 0.25);
	animation: fc-starTwinkle 3s ease-in-out infinite;
}
.fc-star::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
}
.feat-collection__cosmos .fc-star--1 { top: 12%; left: 8%;  animation-delay: 0s; }
.feat-collection__cosmos .fc-star--2 { top: 18%; right: 15%; left: auto; animation-delay: 0.4s; }
.feat-collection__cosmos .fc-star--3 { top: 45%; left: 5%;  animation-delay: 0.8s; }
.feat-collection__cosmos .fc-star--4 { top: 55%; right: 8%; left: auto; animation-delay: 1.2s; }
.feat-collection__cosmos .fc-star--5 { top: 8%;  left: 45%; animation-delay: 1.6s; }
.feat-collection__cosmos .fc-star--6 { top: 75%; left: 92%; animation-delay: 2s; }
@keyframes fc-starTwinkle {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.15); }
}
/* 컬렉션별 별 색상 (더 진하게) */
.feat-collection--animal .fc-star {
	background: #34d399;
	box-shadow: 0 0 10px 4px rgba(167, 243, 208, 0.95), 0 0 22px 8px rgba(34, 197, 94, 0.5);
}
.feat-collection--oracle .fc-star {
	background: #fbbf24;
	box-shadow: 0 0 10px 4px rgba(253, 224, 71, 0.95), 0 0 22px 8px rgba(245, 158, 11, 0.55);
}
.feat-collection--cosmic .fc-star {
	background: #8b5cf6;
	box-shadow: 0 0 10px 4px rgba(167, 139, 250, 0.95), 0 0 22px 8px rgba(139, 92, 246, 0.55);
}
.feat-collection--flower .fc-star {
	background: #ec4899;
	box-shadow: 0 0 10px 4px rgba(251, 207, 232, 0.95), 0 0 22px 8px rgba(236, 72, 153, 0.5);
}
/* 타로 컬렉션 별 (tc-star) */
.tarot-collection__cosmos .tc-star {
	position: absolute;
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #8b5cf6;
	box-shadow: 0 0 10px 4px rgba(196, 181, 253, 0.95), 0 0 22px 8px rgba(139, 92, 246, 0.55);
	animation: fc-starTwinkle 3s ease-in-out infinite;
}
.tarot-collection__cosmos .tc-star::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(196,181,253,0.35) 0%, transparent 65%);
}
.tarot-collection__cosmos .tc-star--1 { top: 12%; left: 8%;  animation-delay: 0s; }
.tarot-collection__cosmos .tc-star--2 { top: 18%; right: 15%; left: auto; animation-delay: 0.5s; }
.tarot-collection__cosmos .tc-star--3 { top: 45%; left: 5%;  animation-delay: 1s; }
.tarot-collection__cosmos .tc-star--4 { top: 55%; right: 8%; left: auto; animation-delay: 1.5s; }
.tarot-collection__cosmos .tc-star--5 { top: 8%;  left: 45%; animation-delay: 2s; }
.tarot-collection__cosmos .tc-star--6 { top: 72%; left: 25%; animation-delay: 0.3s; }
.tarot-collection__cosmos .tc-star--7 { top: 35%; right: 5%; left: auto; animation-delay: 1.1s; }
.tarot-collection__cosmos .tc-star--8 { top: 88%; right: 35%; left: auto; animation-delay: 1.8s; }
/* 배경 별 파티클 (::after) - 별빛 효과 강화 */
.feat-collection::after,
.tarot-collection::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(2.5px 2.5px at 15% 22%, rgba(255, 255, 255, 0.9), transparent),
		radial-gradient(1.5px 1.5px at 88% 18%, rgba(255, 255, 255, 0.75), transparent),
		radial-gradient(2px 2px at 38% 58%, rgba(255, 255, 255, 0.65), transparent),
		radial-gradient(1px 1px at 68% 82%, rgba(255, 255, 255, 0.8), transparent),
		radial-gradient(1.5px 1.5px at 22% 68%, rgba(255, 255, 255, 0.55), transparent),
		radial-gradient(1px 1px at 52% 28%, rgba(255, 255, 255, 0.6), transparent),
		radial-gradient(1.2px 1.2px at 6% 48%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1px 1px at 94% 62%, rgba(255, 255, 255, 0.55), transparent),
		radial-gradient(1.5px 1.5px at 42% 8%, rgba(255, 255, 255, 0.45), transparent),
		radial-gradient(1px 1px at 72% 92%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1px 1px at 30% 12%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1px 1px at 60% 88%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1.2px 1.2px at 8% 75%, rgba(255, 255, 255, 0.35), transparent),
		radial-gradient(1px 1px at 92% 42%, rgba(255, 255, 255, 0.35), transparent);
	animation: fc-starfieldShimmer 6s ease-in-out infinite;
	opacity: 0.95;
}
.feat-collection--animal::after {
	background-image:
		radial-gradient(2.5px 2.5px at 15% 22%, rgba(110, 231, 183, 0.95), transparent),
		radial-gradient(1.5px 1.5px at 88% 18%, rgba(167, 243, 208, 0.85), transparent),
		radial-gradient(2px 2px at 38% 58%, rgba(52, 211, 153, 0.75), transparent),
		radial-gradient(1px 1px at 68% 82%, rgba(34, 197, 94, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 22% 68%, rgba(167, 243, 208, 0.6), transparent),
		radial-gradient(1px 1px at 52% 28%, rgba(110, 231, 183, 0.65), transparent),
		radial-gradient(1.2px 1.2px at 6% 48%, rgba(167, 243, 208, 0.55), transparent),
		radial-gradient(1px 1px at 94% 62%, rgba(52, 211, 153, 0.6), transparent);
}
.feat-collection--oracle::after {
	background-image:
		radial-gradient(2.5px 2.5px at 15% 22%, rgba(253, 224, 71, 0.95), transparent),
		radial-gradient(1.5px 1.5px at 88% 18%, rgba(254, 240, 138, 0.85), transparent),
		radial-gradient(2px 2px at 38% 58%, rgba(245, 158, 11, 0.75), transparent),
		radial-gradient(1px 1px at 68% 82%, rgba(251, 191, 36, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 22% 68%, rgba(253, 230, 138, 0.6), transparent),
		radial-gradient(1px 1px at 52% 28%, rgba(253, 224, 71, 0.65), transparent),
		radial-gradient(1.2px 1.2px at 6% 48%, rgba(254, 240, 138, 0.55), transparent),
		radial-gradient(1px 1px at 94% 62%, rgba(245, 158, 11, 0.6), transparent);
}
.feat-collection--cosmic::after {
	background-image:
		radial-gradient(2.5px 2.5px at 15% 22%, rgba(167, 139, 250, 0.95), transparent),
		radial-gradient(1.5px 1.5px at 88% 18%, rgba(196, 181, 253, 0.85), transparent),
		radial-gradient(2px 2px at 38% 58%, rgba(139, 92, 246, 0.75), transparent),
		radial-gradient(1px 1px at 68% 82%, rgba(124, 58, 237, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 22% 68%, rgba(196, 181, 253, 0.6), transparent),
		radial-gradient(1px 1px at 52% 28%, rgba(167, 139, 250, 0.65), transparent),
		radial-gradient(1.2px 1.2px at 6% 48%, rgba(139, 92, 246, 0.55), transparent),
		radial-gradient(1px 1px at 94% 62%, rgba(124, 58, 237, 0.6), transparent);
}
.feat-collection--flower::after {
	background-image:
		radial-gradient(2.5px 2.5px at 15% 22%, rgba(251, 207, 232, 0.95), transparent),
		radial-gradient(1.5px 1.5px at 88% 18%, rgba(244, 114, 182, 0.85), transparent),
		radial-gradient(2px 2px at 38% 58%, rgba(236, 72, 153, 0.75), transparent),
		radial-gradient(1px 1px at 68% 82%, rgba(219, 39, 119, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 22% 68%, rgba(251, 207, 232, 0.6), transparent),
		radial-gradient(1px 1px at 52% 28%, rgba(244, 114, 182, 0.65), transparent),
		radial-gradient(1.2px 1.2px at 6% 48%, rgba(251, 207, 232, 0.55), transparent),
		radial-gradient(1px 1px at 94% 62%, rgba(236, 72, 153, 0.6), transparent);
}
.tarot-collection::after {
	background-image:
		radial-gradient(2.5px 2.5px at 15% 22%, rgba(167, 139, 250, 0.95), transparent),
		radial-gradient(1.5px 1.5px at 88% 18%, rgba(196, 181, 253, 0.85), transparent),
		radial-gradient(2px 2px at 38% 58%, rgba(139, 92, 246, 0.75), transparent),
		radial-gradient(1px 1px at 68% 82%, rgba(124, 58, 237, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 22% 68%, rgba(196, 181, 253, 0.6), transparent),
		radial-gradient(1px 1px at 52% 28%, rgba(167, 139, 250, 0.65), transparent),
		radial-gradient(1.2px 1.2px at 6% 48%, rgba(139, 92, 246, 0.55), transparent),
		radial-gradient(1px 1px at 94% 62%, rgba(124, 58, 237, 0.6), transparent);
}
@keyframes fc-starfieldShimmer {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}
@keyframes tarotCosmosDrift {
	0% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(-8px, 5px, 0); }
	100% { transform: translate3d(10px, -6px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.fc-star,
	.tarot-collection__cosmos .tc-star { animation: none; opacity: 0.9; }
	.fc-star::before,
	.tarot-collection__cosmos .tc-star::before { animation: none; }
	.feat-collection::after,
	.tarot-collection::after { animation: none; }
	.tarot-tile__img-wrap::after { animation: none; }
}
.feat-collection--animal .feat-collection__title {
	color: #34d399;
	text-shadow: 0 0 28px rgba(167, 243, 208, 0.8), 0 0 20px rgba(34, 197, 94, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.feat-collection--oracle .feat-collection__title {
	color: #fbbf24;
	text-shadow: 0 0 28px rgba(253, 224, 71, 0.85), 0 0 20px rgba(245, 158, 11, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.feat-collection--cosmic .feat-collection__title {
	color: #8b5cf6;
	text-shadow: 0 0 28px rgba(167, 139, 250, 0.85), 0 0 20px rgba(139, 92, 246, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.feat-collection--flower .feat-collection__title {
	color: #ec4899;
	text-shadow: 0 0 28px rgba(249, 168, 212, 0.85), 0 0 20px rgba(236, 72, 153, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.tarot-collection__title {
	color: #c4b5fd;
	text-shadow: 0 0 28px rgba(196, 181, 253, 0.85), 0 0 20px rgba(139, 92, 246, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.feat-collection__grid,
.tarot-collection__grid {
	display: grid;
	gap: 12px;
	position: relative;
	z-index: 2;
	contain: layout paint;
}
.feat-collection__grid { grid-template-columns: repeat(3, 1fr); }
.feat-collection__grid--2col { grid-template-columns: repeat(2, 1fr); }
.tarot-collection__grid { grid-template-columns: repeat(3, 1fr); }

/* ─── Tiles (배포 사이트: purplish-blue glow, 별빛 효과) ─── */
.tarot-tile {
	display: flex;
	flex-direction: column;
	background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(45, 35, 90, 0.12));
	border: 1px solid rgba(148, 80, 255, 0.22);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	min-height: 140px;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 4px 20px rgba(100, 60, 200, 0.12), 0 2px 12px rgba(30, 123, 165, 0.08);
}
.tarot-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(100, 60, 200, 0.22), 0 8px 24px rgba(30, 123, 165, 0.14);
}
.tarot-tile__img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}
/* 카드 이미지 영역 별빛 파티클 */
.tarot-tile__img-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.7), transparent),
		radial-gradient(1px 1px at 75% 25%, rgba(196,181,253,0.5), transparent),
		radial-gradient(1.2px 1.2px at 50% 60%, rgba(255,255,255,0.45), transparent),
		radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,0.4), transparent),
		radial-gradient(1px 1px at 85% 55%, rgba(196,181,253,0.35), transparent);
	animation: fc-starfieldShimmer 5s ease-in-out infinite;
	opacity: 0.85;
}
.tarot-tile__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.tarot-tile__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 4px 8px;
	border-radius: 8px;
	text-transform: uppercase;
	z-index: 3;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}
.tarot-tile__badge--new    { background: rgba(128, 55, 235, 0.95); }
.tarot-tile__badge--beta   { background: rgba(16, 185, 129, 0.95); }
.tarot-tile__badge--totem  { background: rgba(180, 100, 40, 0.95); }
.tarot-tile__badge--healing{ background: rgba(240, 125, 45, 0.95); }
.tarot-tile__badge--levelup{ background: rgba(35, 175, 250, 0.95); }
.tarot-tile__badge--reunion{ background: rgba(45, 95, 235, 0.95); }
.tarot-tile__badge--bloom  { background: rgba(236, 72, 153, 0.95); }
.tarot-tile__badge--nebula { background: rgba(99, 60, 219, 0.95); }
.tarot-tile__badge--ziwei  { background: rgba(168, 85, 247, 0.95); }
.tarot-tile__badge--sukuyo { background: rgba(37, 99, 235, 0.95); }
.tarot-tile__badge--free   { background: rgba(59, 130, 246, 0.95); }

.tarot-tile--ijik {
	border-color: rgba(129, 79, 245, 0.45);
	box-shadow: 0 10px 26px rgba(66, 38, 140, 0.3), 0 0 0 1px rgba(129, 79, 245, 0.18) inset;
}
.tarot-tile--ijik .tarot-tile__img-wrap {
	background:
		radial-gradient(circle at 20% 14%, rgba(167, 139, 250, 0.32), transparent 44%),
		radial-gradient(circle at 82% 80%, rgba(56, 189, 248, 0.22), transparent 54%),
		linear-gradient(165deg, rgba(18, 12, 42, 0.96) 0%, rgba(20, 26, 56, 0.92) 58%, rgba(14, 24, 50, 0.95) 100%);
}
.tarot-tile--ijik .tarot-tile__img-wrap::before {
	content: "";
	position: absolute;
	inset: -25%;
	pointer-events: none;
	z-index: 1;
	background:
		radial-gradient(circle at 34% 40%, rgba(248, 250, 252, 0.28), transparent 36%),
		radial-gradient(circle at 74% 58%, rgba(196, 181, 253, 0.24), transparent 34%);
	animation: ijikNebulaDrift 9s ease-in-out infinite alternate;
}
.tarot-tile--ijik .tarot-tile__img {
	position: relative;
	z-index: 2;
	object-position: center 36%;
	filter: saturate(1.05) contrast(1.02);
	transition: transform 0.28s ease, filter 0.28s ease;
}
.tarot-tile--ijik:hover .tarot-tile__img {
	transform: scale(1.04);
	filter: saturate(1.12) contrast(1.05);
}
@keyframes ijikNebulaDrift {
	0% { transform: translate3d(-4%, -3%, 0) scale(1); opacity: 0.55; }
	50% { transform: translate3d(4%, 2%, 0) scale(1.06); opacity: 0.9; }
	100% { transform: translate3d(2%, -2%, 0) scale(1.02); opacity: 0.65; }
}
/* 공사 중 스티커 (베다점 등) */
.tarot-tile__sticker {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	pointer-events: none;
}
.tarot-tile__sticker--construction {
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.6);
	background: linear-gradient(135deg, rgba(234, 88, 12, 0.92), rgba(194, 65, 12, 0.95));
	border: 3px solid rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	padding: 12px 20px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.tarot-tile__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	background: #2E3A4B;
}
.tarot-tile__title {
	font-size: 0.9rem;
	font-weight: 700;
	color: #f4eeff;
	line-height: 1.3;
}
.tarot-tile__desc {
	font-size: 0.75rem;
	color: rgba(200, 175, 255, 0.7);
	line-height: 1.35;
}

@media (max-width: 768px) {
	.logo-area { padding: 32px 12px 28px; }
	.card.input-section { padding: 20px 14px; }
	.post-saju-services-intro { padding: 24px 16px 20px; margin-top: 24px; margin-bottom: 24px; }
	.feat-collection,
	.tarot-collection { padding: 20px 14px 18px; }
	.feat-collection__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tarot-collection__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tarot-tile { min-height: 130px; }
	.tarot-tile__body { padding: 10px 12px 12px; }
	.tarot-tile__title { font-size: 0.85rem; }
	.tarot-tile__desc { font-size: 0.7rem; }
	.feat-collection__lede,
	.tarot-collection__lede { font-size: 0.75rem; line-height: 1.55; margin-bottom: 8px; }
	.feat-collection__featureline,
	.tarot-collection__featureline { font-size: 0.68rem; padding: 6px 12px; margin-bottom: 10px; }
	.tarot-tile__sticker--construction { font-size: 1.1rem; padding: 10px 16px; }
}
@media (max-width: 480px) {
	.wrap { padding: 0 12px 24px; }
	.feature-card-grid { gap: 22px; }
	.feat-collection__grid,
	.tarot-collection__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.feat-collection__grid--2col { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.tarot-tile { min-height: 110px; }
	.tarot-tile__body { padding: 8px 10px 10px; }
	.tarot-tile__title { font-size: 0.78rem; }
	.tarot-tile__desc { font-size: 0.65rem; }
	.tarot-tile__sticker--construction { font-size: 0.95rem; padding: 8px 12px; letter-spacing: 0.1em; }
	.feat-collection__lede,
	.tarot-collection__lede { font-size: 0.72rem; line-height: 1.5; margin-bottom: 8px; }
	.feat-collection__featureline,
	.tarot-collection__featureline { font-size: 0.63rem; line-height: 1.3; padding: 6px 10px; margin-bottom: 10px; }
	.feat-collection__title,
	.tarot-collection__title { font-size: 1.15rem; }
	.auth-btn { min-width: 110px; padding: 11px 18px; font-size: 0.85rem; }
}

/* ════════════════════════════════════════════════════
   컬렉션 조건부 렌더링 — 열림/닫힘 상태 (2026-03-25)
   ════════════════════════════════════════════════════ */

/* ─── 헤더 토글 버튼 기본 리셋 ─── */
.fc-toggle-btn {
	appearance: none;
	-webkit-appearance: none;
	background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
	border: 1px solid rgba(255, 255, 255, 0.12);
	width: 100%;
	padding: 14px 12px 18px;
	text-align: center;
	cursor: pointer;
	position: relative;
	z-index: 2;
	border-bottom: 1px solid rgba(253, 230, 138, 0.2);
	margin-bottom: 0;
	border-radius: 22px;
	box-shadow: 0 12px 26px rgba(2, 6, 23, 0.26), 0 0 0 1px rgba(255,255,255,0.04) inset;
	transition: opacity 0.2s, transform 0.28s ease, box-shadow 0.28s ease, border-color 0.25s ease;
	touch-action: pan-y;
}
.fc-toggle-btn:hover {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(2, 6, 23, 0.34), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.fc-toggle-btn:focus-visible {
	outline: 2px solid rgba(253, 230, 138, 0.7);
	outline-offset: 3px;
	border-radius: 22px;
}
.feat-collection--animal .fc-toggle-btn { border-bottom-color: rgba(167, 243, 208, 0.75); }
.feat-collection--oracle .fc-toggle-btn { border-bottom-color: rgba(253, 224, 71, 0.75); }
.feat-collection--cosmic .fc-toggle-btn { border-bottom-color: rgba(167, 139, 250, 0.8); }
.feat-collection--flower .fc-toggle-btn { border-bottom-color: rgba(251, 207, 232, 0.75); }
.tarot-collection .fc-toggle-btn { border-bottom-color: rgba(196, 181, 253, 0.75); }
.feat-collection--animal .fc-toggle-btn {
	border-color: rgba(110, 231, 183, 0.32);
	background: linear-gradient(145deg, rgba(16, 185, 129, 0.18), rgba(15, 118, 110, 0.12));
}
.feat-collection--oracle .fc-toggle-btn {
	border-color: rgba(250, 204, 21, 0.34);
	background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(120, 53, 15, 0.14));
}
.feat-collection--cosmic .fc-toggle-btn {
	border-color: rgba(167, 139, 250, 0.34);
	background: linear-gradient(145deg, rgba(124, 58, 237, 0.22), rgba(30, 41, 59, 0.16));
}
.feat-collection--flower .fc-toggle-btn {
	border-color: rgba(244, 114, 182, 0.32);
	background: linear-gradient(145deg, rgba(236, 72, 153, 0.2), rgba(131, 24, 67, 0.14));
}
.tarot-collection .fc-toggle-btn {
	border-color: rgba(196, 181, 253, 0.34);
	background: linear-gradient(145deg, rgba(124, 58, 237, 0.2), rgba(49, 46, 129, 0.14));
}
.fc-toggle-btn::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 0;
	height: 2px;
	opacity: 0;
	border-radius: 999px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.88) 50%, transparent 100%);
	background-size: 180% 100%;
	transition: opacity 0.25s ease;
}
[data-collection-open="false"] .fc-toggle-btn::after {
	opacity: 0.9;
	animation: fc-toggleSweep 2.8s ease-in-out infinite;
}
[data-collection-open="true"] .fc-toggle-btn::after {
	opacity: 0;
	animation: none;
}
@keyframes fc-toggleSweep {
	0% { background-position: 180% 0; opacity: 0.35; }
	50% { opacity: 0.95; }
	100% { background-position: -80% 0; opacity: 0.35; }
}

/* ─── 토글 힌트 (▾ 눌러서 열기) ─── */
.fc-toggle-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: relative;
	isolation: isolate;
	width: fit-content;
	margin: 12px auto 0;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid rgba(253, 230, 138, 0.28);
	background: linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255,255,255,0.04) inset;
	color: rgba(253, 230, 138, 0.65);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	transition: color 0.2s, transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.fc-toggle-hint::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.98);
	background: radial-gradient(circle at 50% 50%, rgba(253,230,138,0.28), rgba(253,230,138,0) 65%);
	will-change: transform, opacity;
}
.feat-collection--animal .fc-toggle-hint { color: rgba(167, 243, 208, 0.7); }
.feat-collection--oracle .fc-toggle-hint { color: rgba(253, 224, 71, 0.7); }
.feat-collection--cosmic .fc-toggle-hint { color: rgba(196, 181, 253, 0.7); }
.feat-collection--flower .fc-toggle-hint { color: rgba(251, 207, 232, 0.7); }
.tarot-collection .fc-toggle-hint { color: rgba(196, 181, 253, 0.7); }
.feat-collection--cosmic .fc-toggle-hint {
	border-color: rgba(167, 139, 250, 0.42);
	background: linear-gradient(120deg, rgba(147, 104, 255, 0.24), rgba(56, 46, 135, 0.12));
	box-shadow: 0 8px 24px rgba(76, 29, 149, 0.3), 0 0 0 1px rgba(196,181,253,0.2) inset;
}
.feat-collection--flower .fc-toggle-hint {
	border-color: rgba(251, 113, 192, 0.38);
	background: linear-gradient(120deg, rgba(251, 113, 192, 0.22), rgba(157, 23, 77, 0.12));
	box-shadow: 0 8px 24px rgba(157, 23, 77, 0.28), 0 0 0 1px rgba(251,207,232,0.22) inset;
}
[data-collection-open="false"] .fc-toggle-hint {
	animation: fc-tapBeacon-gpu 2.2s ease-in-out infinite;
}
[data-collection-open="false"] .fc-toggle-hint::after {
	animation: fc-tapBeacon-glow 2.2s ease-in-out infinite;
}
[data-collection-open="false"] .feat-collection--cosmic .fc-toggle-hint {
	animation-name: fc-tapBeacon-cosmic;
}
[data-collection-open="false"] .feat-collection--flower .fc-toggle-hint {
	animation-name: fc-tapBeacon-flower;
}
.fc-toggle-hint__arrow {
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.3s ease;
}
[data-collection-open="false"] .fc-toggle-hint__arrow {
	animation: fc-arrowNudge 1.25s ease-in-out infinite;
}
.fc-toggle-hint__text {
	font-weight: 700;
	letter-spacing: 0.03em;
}
.fc-toggle-btn:active .fc-toggle-hint {
	transform: scale(0.97);
}
@keyframes fc-arrowNudge {
	0%, 100% { transform: translateY(0); }
	45% { transform: translateY(1px); }
	60% { transform: translateY(4px); }
}
@keyframes fc-tapBeacon-gpu {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -1px, 0); }
}
@keyframes fc-tapBeacon-glow {
	0%, 100% { opacity: 0.18; transform: scale(0.98); }
	50% { opacity: 0.48; transform: scale(1.03); }
}
@keyframes fc-tapBeacon-cosmic {
	0%, 100% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(0, -1px, 0);
	}
}
@keyframes fc-tapBeacon-flower {
	0%, 100% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(0, -1px, 0);
	}
}

/* 열린 상태: 힌트 텍스트 변경 & 화살표 회전 */
[data-collection-open="true"] .fc-toggle-hint__arrow {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	[data-collection-open="false"] .fc-toggle-btn::after,
	[data-collection-open="false"] .fc-toggle-hint,
	[data-collection-open="false"] .fc-toggle-hint__arrow {
		animation: none;
	}
	.fc-toggle-btn {
		transition: none;
	}
}

@media (max-width: 560px) {
	.feat-collection--animal .feat-collection__subtitle::after,
	.feat-collection--oracle .feat-collection__subtitle::after,
	.feat-collection--cosmic .feat-collection__subtitle::after,
	.feat-collection--flower .feat-collection__subtitle::after,
	.tarot-collection .tarot-collection__subtitle::after {
		font-size: 0.66rem;
		padding: 7px 12px;
		line-height: 1.3;
	}
}

/* ─── 그리드: 닫힌 상태에서 숨김 ─── */
[data-collection-open="false"] .feat-collection__grid,
[data-collection-open="false"] .tarot-collection__grid {
	display: none;
}
[data-collection-open="true"] .feat-collection__grid {
	display: grid;
	animation: fc-grid-reveal 0.35s ease both;
}
[data-collection-open="true"] .tarot-collection__grid {
	display: grid;
	animation: fc-grid-reveal 0.35s ease both;
}
@keyframes fc-grid-reveal {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── 닫힌 상태: 신비로운 peek 힌트 ─── */
.fc-closed-peek {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 10px 0 4px;
	transition: opacity 0.2s;
}
[data-collection-open="true"] .fc-closed-peek {
	display: none;
}
.fc-closed-peek__gem {
	color: rgba(253, 230, 138, 0.45);
	font-size: 0.7rem;
	animation: fc-gemPulse 2.4s ease-in-out infinite;
}
.fc-closed-peek__gem:nth-child(2) { animation-delay: 0.8s; }
.fc-closed-peek__gem:nth-child(3) { animation-delay: 1.6s; }
.feat-collection--animal .fc-closed-peek__gem { color: rgba(167, 243, 208, 0.45); }
.feat-collection--oracle .fc-closed-peek__gem { color: rgba(253, 224, 71, 0.45); }
.feat-collection--cosmic .fc-closed-peek__gem { color: rgba(196, 181, 253, 0.45); }
.feat-collection--flower .fc-closed-peek__gem { color: rgba(244, 114, 182, 0.45); }
.tarot-collection .fc-closed-peek__gem    { color: rgba(196, 181, 253, 0.45); }
@keyframes fc-gemPulse {
	0%, 100% { opacity: 0.35; }
	50%       { opacity: 0.85; }
}

/* ─── 닫힌 상태: 컬렉션 박스 높이 축소 애니메이션 느낌 ─── */
[data-collection-open="false"].feat-collection,
[data-collection-open="false"].tarot-collection {
	animation: fc-closedGlow 3s ease-in-out infinite;
}
@keyframes fc-closedGlow {
	0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(253,230,138,0.15) inset; }
	50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(253,230,138,0.35) inset, 0 0 18px rgba(253,230,138,0.08); }
}

/* 모바일/터치: 컬렉션 스크롤 성능 최적화 */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
	.feat-collection,
	.tarot-collection {
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	/* 닫힌 컬렉션은 장식 레이어 애니메이션을 멈춰 스크롤 프레임 드랍 완화 */
	[data-collection-open="false"].feat-collection::after,
	[data-collection-open="false"].tarot-collection::after,
	[data-collection-open="false"] .feat-collection__cosmos .fc-star,
	[data-collection-open="false"] .tarot-collection__cosmos .tc-star,
	[data-collection-open="false"] .fc-closed-peek__gem {
		animation: none !important;
	}

	[data-collection-open="false"] .feat-collection__cosmos,
	[data-collection-open="false"] .tarot-collection__cosmos {
		display: none;
	}

	[data-collection-open="false"].feat-collection,
	[data-collection-open="false"].tarot-collection {
		animation: none;
	}

	/* 터치 환경에서는 hover transform을 비활성화해 레이아웃/컴포지팅 부담 최소화 */
	.tarot-tile,
	.tarot-tile:hover {
		transform: none;
	}
}
[data-collection-open="false"].feat-collection--animal { animation-name: fc-closedGlow-animal; }
[data-collection-open="false"].feat-collection--oracle { animation-name: fc-closedGlow-oracle; }
[data-collection-open="false"].feat-collection--cosmic { animation-name: fc-closedGlow-cosmic; }
[data-collection-open="false"].feat-collection--flower { animation-name: fc-closedGlow-flower; }
@keyframes fc-closedGlow-animal {
	0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(34,197,94,0.3) inset; }
	50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(34,197,94,0.6) inset, 0 0 18px rgba(34,197,94,0.1); }
}
@keyframes fc-closedGlow-oracle {
	0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,158,11,0.35) inset; }
	50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,158,11,0.65) inset, 0 0 18px rgba(245,158,11,0.1); }
}
@keyframes fc-closedGlow-cosmic {
	0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(139,92,246,0.35) inset; }
	50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(139,92,246,0.65) inset, 0 0 18px rgba(139,92,246,0.1); }
}
@keyframes fc-closedGlow-flower {
	0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(236,72,153,0.35) inset; }
	50%       { box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(236,72,153,0.65) inset, 0 0 18px rgba(236,72,153,0.1); }
}

/* ─── 이미지 placeholder (닫힌 타일) ─── */
.tarot-tile__img-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg,
		rgba(30,20,60,0.6) 0%,
		rgba(60,30,100,0.5) 50%,
		rgba(30,20,60,0.6) 100%
	);
	position: relative;
	overflow: hidden;
}
.tarot-tile__img-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 35%,
		rgba(255,255,255,0.04) 50%,
		transparent 65%
	);
	background-size: 200% 100%;
	animation: tile-ph-shimmer 2s ease-in-out infinite;
}
@keyframes tile-ph-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.tile-ph-gem {
	font-size: 2rem;
	opacity: 0.5;
	filter: drop-shadow(0 0 8px currentColor);
	animation: tile-ph-float 2.5s ease-in-out infinite;
	position: relative;
	z-index: 1;
}
@keyframes tile-ph-float {
	0%, 100% { transform: translateY(0); opacity: 0.45; }
	50%       { transform: translateY(-6px); opacity: 0.75; }
}

/* ─── 이미지 로딩 중 스켈레톤 ─── */
.tarot-tile__img-skeleton {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(
		90deg,
		rgba(60,40,100,0.5) 25%,
		rgba(100,70,160,0.35) 50%,
		rgba(60,40,100,0.5) 75%
	);
	background-size: 200% 100%;
	animation: tile-skeleton-wave 1.4s ease infinite;
	display: flex;
	align-items: center;
	justify-content: center;
}
@keyframes tile-skeleton-wave {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ─── 실제 이미지: 로드 완료 후 페이드인 ─── */
.tarot-tile__img {
	animation: tile-img-fadein 0.4s ease both;
}
@keyframes tile-img-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}