/* ============================================================
   core-ui.css — Merged critical CSS
   Replaces: globals.css + browser-compat.css + main-glass.css + mobile-ux.css
   Generated: 2026-04-13
   ============================================================ */

/*  globals.css  */
/* ─── 기본 리셋 및 모바일 터치·스크롤 기반 ─── */
/* NOTE: @tailwind 지시어는 Next.js 빌드에서만 처리됨.
   static HTML 직접 링크 시에는 순수 CSS 규칙만 유효함. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	min-height: 100dvh;
	/* fortune-ui.css 기본 배경과 일치: FOUC/CLS 방지 */
	background: #FFF5F8;
	background: var(--bg-color, linear-gradient(135deg,#FFF5F8 0%,#FFF9F5 50%,#F5F8FF 100%));
	color: #3D3D3D;
	color: var(--text-main, #3D3D3D);
	font-family: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: none;
	touch-action: pan-y;
	padding-left: env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
	padding-bottom: env(safe-area-inset-bottom, 0);
	overflow-x: hidden;
}
	* {
		box-sizing: border-box;
	}
	/* 300ms 클릭 지연 제거 + 탭 하이라이트 제어 */
	a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
	label[for], [tabindex]:not([tabindex="-1"]) {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	/* 터치 타겟 최소 44x44px (패딩 포함) */
	button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
	label[for] {
		min-height: 44px;
		min-width: 44px;
	}
	/* 모바일에서 hover 고정 방지: 포인터 있는 기기에서만 hover 적용 */
	@media (hover: hover) {
		a:hover, button:hover, [role="button"]:hover {
			opacity: 0.9;
		}
	}
	/* 즉각적인 눌림 피드백 */
	a:active, button:active, [role="button"]:active {
		opacity: 0.85;
	}
	/* 모바일 input 줌 방지 (16px 이상 유지) */
	input, select, textarea {
		font-size: 16px;
	}
	@media (min-width: 768px) {
		input, select, textarea {
			font-size: inherit;
		}
	}
	/* CLS guard: keep stable image boxes before image decode completes. */
	img {
		height: auto;
	}
	img.tarot-face-img,
	#tarotCardFrontImg,
	img[data-card-img] {
		aspect-ratio: 2 / 3;
		object-fit: cover;
	}
	#dfStudioImage {
		aspect-ratio: 21 / 16;
		object-fit: cover;
	}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes cosmicStars {
	0% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(-60px, -40px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ─── Veda Nebula: Cosmic Orbit ─── */
@layer components {
	.veda-orbit-root {
		position: relative;
		width: 100%;
		max-width: min(520px, 90vw);
		aspect-ratio: 1;
		margin-inline: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.veda-orbit-core {
		position: absolute;
		width: 160px;
		height: 160px;
		border-radius: 9999px;
		background:
			radial-gradient(circle at 30% 0%, rgba(248, 250, 252, 0.9), transparent 55%),
			radial-gradient(circle at 80% 80%, rgba(56, 189, 248, 0.9), transparent 60%);
		box-shadow:
			0 0 40px rgba(56, 189, 248, 0.9),
			0 0 90px rgba(59, 130, 246, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.veda-orbit-core-inner {
		width: 80px;
		height: 80px;
		border-radius: 9999px;
		background:
			radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.9), transparent 60%),
			radial-gradient(circle at 100% 100%, rgba(15, 23, 42, 0.98), transparent 70%);
		box-shadow:
			0 0 15px rgba(15, 23, 42, 0.95),
			inset 0 0 16px rgba(15, 23, 42, 0.95);
	}
	.veda-orbit-core-ring {
		position: absolute;
		border-radius: 9999px;
		border: 1px solid rgba(148, 163, 184, 0.4);
		mix-blend-mode: screen;
	}
	.veda-orbit-core-ring--1 {
		width: 210px;
		height: 210px;
		border-color: rgba(56, 189, 248, 0.7);
	}
	.veda-orbit-core-ring--2 {
		width: 260px;
		height: 260px;
		border-color: rgba(129, 140, 248, 0.6);
		border-style: dashed;
	}
	.veda-orbit-ring {
		position: absolute;
		border-radius: 9999px;
		border: 1px solid rgba(148, 163, 184, 0.45);
		mix-blend-mode: screen;
		opacity: 0.6;
	}
	.veda-orbit-ring--inner {
		width: 260px;
		height: 260px;
	}
	.veda-orbit-ring--mid {
		width: 320px;
		height: 320px;
		border-style: dashed;
	}
	.veda-orbit-ring--outer {
		width: 380px;
		height: 380px;
		border-color: rgba(51, 65, 85, 0.9);
	}
	.veda-orbit-orbs {
		position: absolute;
		inset: 0;
	}
	.veda-orbit-orb {
		position: absolute;
		transform-origin: center center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		padding: 0;
		cursor: pointer;
	}
	.veda-orbit-radius-inner {
		inset: 50%;
		transform: translate(-50%, -50%) rotate(var(--vedic-angle, 0deg)) translateY(-140px);
	}
	.veda-orbit-radius-mid {
		inset: 50%;
		transform: translate(-50%, -50%) rotate(var(--vedic-angle, 0deg)) translateY(-180px);
	}
	.veda-orbit-radius-outer {
		inset: 50%;
		transform: translate(-50%, -50%) rotate(var(--vedic-angle, 0deg)) translateY(-220px);
	}
	.veda-orbit-orb-glow {
		width: 64px;
		height: 64px;
		border-radius: 9999px;
		box-shadow:
			0 0 20px rgba(248, 250, 252, 0.95),
			0 0 45px rgba(56, 189, 248, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}
	.veda-orbit-orb-core {
		width: 40px;
		height: 40px;
		border-radius: 9999px;
		background:
			radial-gradient(circle at 30% 0%, rgba(248, 250, 252, 0.95), transparent 60%),
			radial-gradient(circle at 80% 100%, rgba(15, 23, 42, 0.9), transparent 65%);
		box-shadow:
			0 0 10px rgba(248, 250, 252, 0.9),
			inset 0 0 8px rgba(148, 163, 184, 0.7);
	}
	.veda-orbit-orb-label {
		margin-top: 6px;
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		color: rgba(209, 213, 219, 0.85);
		font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
		text-shadow: 0 0 6px rgba(15, 23, 42, 0.9);
	}
}



/*  browser-compat.css  */
/* Cross-browser safety net loaded after main styles */

/* Safe viewport fallback for browsers without dvh support */
:root {
  --cd-safe-viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --cd-safe-viewport-height: 100dvh;
  }
}

html,
body {
  min-height: var(--cd-safe-viewport-height);
}

/* Fallback for browsers without color-mix support */
@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .theme-switch-wrapper {
    background: rgba(255, 255, 255, 0.92);
  }

  body.neo-mode .theme-switch-wrapper {
    background: rgba(16, 18, 26, 0.92) !important;
  }
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .theme-switch-wrapper,
  .top-hero,
  .qm-wrap,
  .modal-card,
  .lang-trigger,
  .lang-dropdown {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .card,
  .theme-switch-wrapper,
  .lang-dropdown,
  .modal-card {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }

  body.neo-mode .card,
  body.neo-mode .theme-switch-wrapper,
  body.neo-mode .lang-dropdown,
  body.neo-mode .modal-card {
    background-color: rgba(12, 15, 24, 0.94) !important;
  }
}

/* Fallback for browsers without text-wrap: pretty */
@supports not (text-wrap: pretty) {
  .dream-block-text,
  .dream-golden-advice,
  .dream-final-consult {
    overflow-wrap: anywhere;
    word-break: keep-all;
  }
}


/*  main-glass.css  */
/**
 * 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 {
	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 {
	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 {
	contain: layout paint;
	content-visibility: auto;
	contain-intrinsic-size: 420px;
	border-radius: 22px;
	padding: 24px 16px 22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	overflow-x: hidden;
	overflow-y: visible;
	position: relative;
	backdrop-filter: blur(10px) saturate(118%);
	-webkit-backdrop-filter: blur(10px) saturate(118%);
	box-shadow: 0 20px 52px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* 컬렉션별 배경·테두리 색상 (배포 사이트와 동일 - 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;
}
.feat-collection--misc {
	background:
		radial-gradient(circle at 16% 16%, rgba(251, 191, 36, 0.2), transparent 35%),
		radial-gradient(circle at 84% 20%, rgba(56, 189, 248, 0.18), transparent 36%),
		linear-gradient(160deg, rgba(9, 20, 47, 0.92), rgba(16, 35, 72, 0.9));
	border-color: rgba(125, 211, 252, 0.62);
	box-shadow: 0 16px 42px rgba(3, 14, 42, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.24) 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); }
.feat-collection--misc .feat-collection__header { border-bottom-color: rgba(125, 211, 252, 0.8); }
.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--misc .feat-collection__lede {
	color: rgba(224, 242, 254, 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));
}
.feat-collection--misc .feat-collection__featureline {
	color: rgba(224, 242, 254, 0.98);
	border-color: rgba(125, 211, 252, 0.5);
	background: linear-gradient(120deg, rgba(14, 165, 233, 0.32), rgba(30, 64, 175, 0.22));
}
.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; }
.feat-collection--misc .fc-div-line { background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.92), transparent); }
.feat-collection--misc .fc-div-gem { color: #7dd3fc; }
.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);
}
.feat-collection--misc .fc-star {
	background: #7dd3fc;
	box-shadow: 0 0 10px 4px rgba(125, 211, 252, 0.95), 0 0 22px 8px rgba(14, 165, 233, 0.52);
}
/* 타로 컬렉션 별 (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);
}
.feat-collection--misc::after {
	background-image:
		radial-gradient(2.5px 2.5px at 15% 22%, rgba(125, 211, 252, 0.96), transparent),
		radial-gradient(1.5px 1.5px at 88% 18%, rgba(186, 230, 253, 0.86), transparent),
		radial-gradient(2px 2px at 38% 58%, rgba(56, 189, 248, 0.76), transparent),
		radial-gradient(1px 1px at 68% 82%, rgba(59, 130, 246, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 22% 68%, rgba(186, 230, 253, 0.62), transparent),
		radial-gradient(1px 1px at 52% 28%, rgba(125, 211, 252, 0.66), transparent),
		radial-gradient(1.2px 1.2px at 6% 48%, rgba(56, 189, 248, 0.56), transparent),
		radial-gradient(1px 1px at 94% 62%, rgba(14, 165, 233, 0.61), 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);
}
.feat-collection--misc .feat-collection__title {
	color: #7dd3fc;
	text-shadow: 0 0 28px rgba(186, 230, 253, 0.9), 0 0 20px rgba(14, 165, 233, 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); }

/* Collection tap guard baseline: prefer vertical scroll and reduce accidental drag taps. */
.feat-collection__grid,
.tarot-collection__grid {
	touch-action: pan-y;
	overscroll-behavior-y: contain;
	overscroll-behavior-x: none;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: transparent;
}
.feat-collection__grid .tarot-tile,
.tarot-collection__grid .tarot-tile,
.feat-collection__grid .prem-card,
.tarot-collection__grid .prem-card,
.feat-collection__grid .lifebook-tile,
.feat-collection__grid .lovebible-tile,
.tarot-collection__grid .lifebook-tile,
.tarot-collection__grid .lovebible-tile,
.feature-card-grid .feature-card__launch,
.feature-card-grid .feature-card__cta {
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.feature-card-grid .feature-card__launch,
.feature-card-grid .feature-card__cta,
.feature-card-grid .fc-toggle-btn {
	min-height: 44px;
}

/* ─── Tiles (배포 사이트: purplish-blue glow, 별빛 효과) ─── */
.tarot-tile {
	display: flex;
	flex-direction: column;
	background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(33, 60, 112, 0.18));
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s 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 8px 24px rgba(7, 20, 48, 0.35), 0 2px 14px rgba(30, 123, 165, 0.12);
}
.tarot-tile:hover {
	transform: translateY(-5px);
	border-color: rgba(125, 211, 252, 0.62);
	box-shadow: 0 16px 38px rgba(7, 20, 48, 0.52), 0 0 0 1px rgba(125, 211, 252, 0.22) inset;
}
.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); }
.feat-collection--misc .fc-toggle-hint { color: rgba(186, 230, 253, 0.78); }
.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;
}
.feat-collection--misc .fc-toggle-hint {
	border-color: rgba(125, 211, 252, 0.44);
	background: linear-gradient(120deg, rgba(56, 189, 248, 0.24), rgba(37, 99, 235, 0.12));
	box-shadow: 0 8px 24px rgba(30, 64, 175, 0.3), 0 0 0 1px rgba(186,230,253,0.2) 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; }
}


/*  mobile-ux.css  */
/**
 * Mobile UX layer — 터치/스크롤/뷰포트/브라우저별 통합 최적화
 * 모든 브라우저·모바일 기기에서 동일한 사용자 경험 보장
 */

/* ─── 1. 터치 및 클릭 인터랙션 ─── */

/* 300ms 클릭 지연 방지 + 터치 하이라이트 통일 */
a[href],
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
label[for],
.feature-card,
.feature-card a,
.feature-card__visual,
.feature-card__img-wrap,
.feature-card__cta,
.feature-card__launch,
.tarot-tile,
.tarot-tile a,
.dp-master-card,
.dp-master-card a,
.dw-item,
.tab-btn,
.nav-btn,
.ctg-btn,
.lang-btn,
.tog-btn,
.oracle-cat-btn-m,
.oracle-card-m,
.iching-btn,
.celeb-tab-btn,
.celeb-btn,
.tarot-cat-btn,
.fate-btn,
.mystic-tab-btn,
.modal-close,
.ia-hd {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

/* 터치 타겟: 클릭 가능 요소 최소 44x44px (패딩으로 확보) */
a[href].btn,
.feature-card__cta,
.feature-card__launch,
.tab-btn,
.nav-btn,
.ctg-btn,
.lang-btn,
.tog-btn,
.fate-btn,
.mystic-tab-btn,
.celeb-tab-btn,
.celeb-btn,
.tarot-cat-btn,
.oracle-cat-btn-m,
.oracle-card-m,
.iching-btn,
.modal-close,
.fate-scroll-next-arrow {
  min-height: 44px;
  min-width: 44px;
}
.feature-card,
.tarot-tile,
.dw-item {
  min-height: 44px;
}

/* Active 상태: 터치 시 즉각적인 시각적 피드백 */
@media (hover: none) and (pointer: coarse) {
  button:active,
  [role="button"]:active,
  a[href]:active,
  .feature-card:active,
  .tarot-tile:active,
  .dp-master-card:active {
    opacity: 0.92;
  }

  /* 컬렉션 카드(토글 헤더/타일)는 스크롤 중 위치 변형을 금지하고 세로 스크롤을 우선한다. */
  .feature-card-grid .feat-collection,
  .feature-card-grid .tarot-collection,
  .feature-card-grid .fc-toggle-btn,
  .feature-card-grid .tarot-tile {
    touch-action: pan-y;
  }

  .feature-card-grid .feat-collection:active,
  .feature-card-grid .tarot-collection:active,
  .feature-card-grid .fc-toggle-btn:active,
  .feature-card-grid .tarot-tile:active {
    transform: none !important;
  }
}

/* Sticky hover 방지: 포인터 있는 기기에서만 hover 적용 (보조) */
@media (hover: hover) {
  .feature-card:hover .feature-card__img,
  .tarot-tile:hover .tarot-tile__img {
    transform: none;
  }
}

/* ─── 2. 스크롤 경험 ─── */

/* iOS 모멘텀 스크롤 + 스크롤 체이닝 방지 (모달/오버레이 내부) */
.modal,
.modal-box,
[class*="modal-overlay"],
[class*="Overlay"].is-open,
#tarotReunionOverlay.is-open,
#privacy-modal-overlay.show,
.dream-story-scroll,
.scroll-touch,
.celeb-name-area,
.year-sub,
.tarot-love-reading-content,
.tarot-healing-reading-content,
.ty-month-category-text {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal,
[class*="modal-overlay"],
#tarotReunionOverlay,
#privacy-modal-overlay {
  touch-action: pan-y;
}

/* 자미두수/점성술/숙요점: 스크롤 freeze 방지를 위해 오버레이/시트 축 스크롤 허용을 명시 */
#ziweiModalOverlay,
#astroModalOverlay,
#sukuyoModalOverlay {
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}
#ziweiModalSheet,
#astroModalSheet,
#sukuyoModalSheet {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

/* 자미두수·숙요점·점성술·거북점(주역) 모달: 모바일 스크롤 막힘 수정
   overscroll-behavior: contain + touch-action: pan-y 조합이 iOS Safari에서
   일정 구간 아래로 스크롤 시 스크롤이 멈추는 버그 유발 → 모바일에서 완화 */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #ziweiModalOverlay.modal-overlay-ziwei,
  #sukuyoModalOverlay.modal-overlay-sukuyo,
  #astroModalOverlay.modal-overlay-astro,
  #juyukModalOverlay.modal-overlay-juyuk {
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  /* 숙요점/자미두수/점성술: 동일한 상단 네비 동작 통일
     네비는 항상 상단에 보이고, 시트만 끝까지 세로 스크롤되도록 고정 */
  #sukuyoNavBar.modal-top-nav,
  #ziweiModalNavBar.modal-top-nav,
  #astroNavBar.modal-top-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #sukuyoNavBar .modal-nav-home,
  #sukuyoNavBar .modal-nav-close,
  #ziweiModalNavBar .modal-nav-home,
  #ziweiModalNavBar .modal-nav-close,
  #astroNavBar .modal-nav-home,
  #astroNavBar .modal-nav-close {
    white-space: nowrap;
  }
  #sukuyoNavBar .modal-nav-home,
  #ziweiModalNavBar .modal-nav-home,
  #astroNavBar .modal-nav-home {
    justify-self: start;
    font-size: 0.78rem;
    padding: 8px 2px;
    gap: 3px;
  }
  #sukuyoNavBar .modal-nav-close,
  #ziweiModalNavBar .modal-nav-close,
  #astroNavBar .modal-nav-close {
    justify-self: end;
    font-size: 0.66rem;
    padding: 8px 8px;
  }
  #sukuyoNavBar .modal-nav-title,
  #ziweiModalNavBar .modal-nav-title,
  #astroNavBar .modal-nav-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 1.1px;
  }
  /* 시트: absolute 분리 대신 flex 스크롤로 통일 (iOS/Android 스크롤 중단 방지) */
  #sukuyoModalOverlay #sukuyoModalSheet,
  #ziweiModalOverlay #ziweiModalSheet,
  #astroModalOverlay #astroModalSheet {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
  }
  @media (max-width: 360px) {
    #sukuyoNavBar.modal-top-nav,
    #ziweiModalNavBar.modal-top-nav,
    #astroNavBar.modal-top-nav {
      column-gap: 2px;
      padding-left: 8px;
      padding-right: 8px;
    }
    #sukuyoNavBar .modal-nav-home,
    #ziweiModalNavBar .modal-nav-home,
    #astroNavBar .modal-nav-home {
      font-size: 0.72rem;
      padding: 8px 0;
      gap: 2px;
    }
    #sukuyoNavBar .modal-nav-close,
    #ziweiModalNavBar .modal-nav-close,
    #astroNavBar .modal-nav-close {
      font-size: 0.62rem;
      padding: 8px 6px;
    }
    #sukuyoNavBar .modal-nav-title,
    #ziweiModalNavBar .modal-nav-title,
    #astroNavBar .modal-nav-title {
      font-size: 0.62rem;
      letter-spacing: 0.7px;
    }
  }

  #juyukModalOverlay #juyukModalSheet {
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
  }

  @media (max-width: 360px) {
    #ziweiModalNavBar.modal-top-nav,
    #astroNavBar.modal-top-nav {
      column-gap: 2px;
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}

/* 페이지 끝 고무줄 효과 제한 (필요 시) */
html {
  overscroll-behavior-x: none;
}

/* ─── 3. 뷰포트 & Safe Area ─── */

/* 루트 safe area 패딩 (노치/홈 인디케이터 영역 회피) */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* 고정 상단/하단 바 safe area */
.fsn-bar,
[class*="fixed"].bottom {
  padding-top: 0;
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0));
}

/* ─── 4. 브라우저별 (Safari 등) ─── */

/* Safari glassmorphism: backdrop-blur 웹킷 접두사 보강 */
.card,
.theme-switch-wrapper,
.logo-area,
.dp-master-card,
.modal-card,
.lang-dropdown,
[class*="backdrop-blur"] {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}

/* 이미지/아이콘 비율 유지 (찌그러짐 방지) */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* 아이콘/카드 이미지 비율 유지 */
.feature-card__img,
.tarot-tile__img,
.card img {
  object-fit: contain;
}

/* 컬렉션 타일 CLS 방지: 이미지 영역의 고정 비율/높이를 유지한다. */
.tarot-tile__img-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 120px;
  overflow: hidden;
  contain: layout paint;
}

.tarot-tile__img-wrap .tarot-tile__img,
.tarot-tile__img-wrap .tarot-tile__img-placeholder,
.tarot-tile__img-wrap .tarot-tile__img-skeleton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tarot-tile__img-wrap .tarot-tile__img-placeholder,
.tarot-tile__img-wrap .tarot-tile__img-skeleton {
  display: grid;
  place-items: center;
}

.tarot-tile__img-wrap .tarot-tile__img {
  object-fit: cover;
}

@media (max-width: 520px) {
  .tarot-tile__img-wrap {
    min-height: 108px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ★ GPU 가속 애니메이션 최적화 (Core Web Vitals: INP/CLS 개선)
   ═══════════════════════════════════════════════════════════ */

/*
 * 원칙:
 * 1. 실제로 변환(transform/opacity)이 일어나는 요소만 will-change 지정
 * 2. 정적 상태에서는 will-change:auto로 메모리 절약
 * 3. translate3d(0,0,0)으로 GPU 레이어 생성 (애니메이션 중)
 * 4. 배터리 소모 방지: prefers-reduced-motion 감지 시 모든 애니메이션 제거
 */

/* 애니메이션 활성 요소 — 인터랙션 전 레이어 예약 */
.feature-card,
.tarot-tile,
.totem-card,
.oracle-card-m,
.dp-master-card {
  /* GPU 레이어 격리로 painter 비용 감소 */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* hover/focus 발생 시에만 will-change 활성화 */
@media (hover: hover) {
  .feature-card:hover,
  .tarot-tile:hover,
  .totem-card:hover {
    will-change: transform;
  }
}

/* 터치 디바이스: active 상태에서만 will-change 활성화 */
@media (hover: none) and (pointer: coarse) {
  .feature-card:active,
  .tarot-tile:active {
    will-change: transform;
  }
  /* 정적 상태에서는 will-change 해제 (메모리 절약 — 모바일 필수) */
  .feature-card:not(:active),
  .tarot-tile:not(:active) {
    will-change: auto;
  }
}

/* 슬라이드/페이드 오버레이 — 표시 중만 GPU 레이어 사용 */
[class*="overlay"].is-open,
[class*="overlay"][style*="display: block"],
[class*="overlay"][style*="display:block"],
.df-studio-overlay[style*="block"],
.tarot-self-esteem-overlay[style*="block"],
#astralModal[style*="block"] {
  will-change: opacity, transform;
  transform: translate3d(0, 0, 0);
}

/* 코즈믹 배경 별 애니메이션 — 독립 레이어 격리 */
.cosmic-star,
.cosmic-star-flower,
.logo-star {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

/* 카드 플립/회전 — GPU 합성 레이어에서 처리 */
.saju-book,
.saju-book .book-page,
.tarot-card[class*="flip"],
.tarot-card[class*="rotate"] {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── 모션 감소 설정 존중 (배터리/전정 기관 배려) ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    will-change: auto !important;
  }

  .cosmic-star,
  .cosmic-star-flower,
  .logo-star,
  .orb,
  .ritual-particle,
  .q-back-element-emoji {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ★ 터치 타겟 강화 — 최소 44×44px 전체 적용
   (기존 globals.css 규칙을 보완하는 특정 소형 버튼 대상)
   ═══════════════════════════════════════════════════════════ */

/* 모달 닫기/소형 칩 버튼 — 터치 영역 확장 */
.df-studio-close,
.df-studio-chip,
.df-source-tab,
.tarot-self-esteem-close,
.modal-close,
.astral-close-btn,
.ios-modal-close,
.dp-sheet-close,
.back-btn,
.df-studio-btn,
.ritual-btn,
.privacy-btns .btn-cancel,
.privacy-btns .btn-agree {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: max(8px, 0.5rem) max(12px, 0.75rem);
}

/* 언어 선택 드롭다운 버튼 */
.lang-btn {
  min-height: 44px;
  padding-top: max(10px, 0.625rem);
  padding-bottom: max(10px, 0.625rem);
}

/* 탭 버튼 (타로/카테고리) */
.tab-btn,
.ctg-btn,
.tarot-cat-btn,
.oracle-cat-btn-m,
.mystic-tab-btn,
.celeb-tab-btn,
.df-source-tab {
  min-height: 44px;
}

/* 토글 버튼 (남/여) */
.tog-btn {
  min-height: 44px;
  padding: 12px 20px;
}

/* 스크롤 화살표 */
.fate-scroll-next-arrow {
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
}

/* select 요소: iOS에서 터치 영역 확보 */
select.inp {
  min-height: 44px;
  font-size: 16px; /* iOS 줌 방지 */
}

/* 모바일 WebKit에서 날짜 텍스트(년/월/일)가 투명하게 보이는 이슈 방지 */
#birthDate.inp,
input.inp[type="date"] {
  color: #2d2438 !important;
  -webkit-text-fill-color: #2d2438 !important;
  color-scheme: light;
}

body.neo-mode #birthDate.inp,
body.neo-mode input.inp[type="date"] {
  color: rgba(240, 232, 220, 0.95) !important;
  -webkit-text-fill-color: rgba(240, 232, 220, 0.95) !important;
  color-scheme: dark;
}

#birthDate.inp::-webkit-date-and-time-value,
#birthDate.inp::-webkit-datetime-edit,
#birthDate.inp::-webkit-datetime-edit-text,
#birthDate.inp::-webkit-datetime-edit-year-field,
#birthDate.inp::-webkit-datetime-edit-month-field,
#birthDate.inp::-webkit-datetime-edit-day-field {
  color: #2d2438 !important;
  -webkit-text-fill-color: #2d2438 !important;
}

body.neo-mode #birthDate.inp::-webkit-date-and-time-value,
body.neo-mode #birthDate.inp::-webkit-datetime-edit,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-text,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-year-field,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-month-field,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-day-field {
  color: rgba(240, 232, 220, 0.95) !important;
  -webkit-text-fill-color: rgba(240, 232, 220, 0.95) !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ font-display: swap 폴백
   (Google Fonts가 swap을 지원하지만, 로컬 @font-face는 별도 적용)
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Noto Sans KR";
  font-display: swap;
  /* Google Fonts CDN에서 실제 src를 오버라이드하지 않고
     display:swap을 로컬로 보장 (환경에 따라 Google Fonts가
     display=swap 파라미터를 미반영할 경우 대비) */
  src: local("Noto Sans KR");
  unicode-range: U+AC00-D7A3; /* 한글 */
}
@font-face {
  font-family: "Cinzel";
  font-display: swap;
  src: local("Cinzel");
}

/* IO 기반 이미지/배경 지연 로딩용 LQIP 상태 */
.io-lazy-img {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0.82;
  transition: filter 0.28s ease, transform 0.28s ease, opacity 0.28s ease;
  background: linear-gradient(135deg, rgba(43, 31, 72, 0.9), rgba(23, 20, 38, 0.95));
}

.io-lazy-img.is-loaded {
  filter: none;
  transform: none;
  opacity: 1;
}

[data-lazy-bg] {
  background-color: rgba(16, 12, 30, 0.9);
  background-size: cover;
  background-position: center;
}

[data-lazy-bg].is-bg-loaded {
  transition: background-image 0.25s ease;
}