@charset "euc-kr";

/* webfont
------------------------------------------------------ */
@font-face {
    font-family: 'DnfTemperedBlade';
    src: url('//cdn.df.nexon.com/img/common/font/DNFForgedBlade-Light.otf') format('opentype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'DnfTemperedBlade';
    src: url('//cdn.df.nexon.com/img/common/font/DNFForgedBlade-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'DnfTemperedBlade';
    src: url('//cdn.df.nexon.com/img/common/font/DNFForgedBlade-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}


/* layout
------------------------------------------------------ */
#gedTarot {
	position: relative;
	display: flex;
	align-items: center;
	margin: 10rem auto 0;;
	width: 100%; height: 640px;
	font-family: 'DnfTemperedBlade', serif;
	color: var(--ged-color-white);
	background: url('/images/main/tarot/bg.png') no-repeat center top;
	background-size: cover;
	z-index: 1;
}

/* -------- common -------- */
.hidden {
	display: none !important; 
}
.hint { 
	font-size: 1.8rem;
	opacity: .7; 
}

/* º° ¹è°æ */
#star-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}


/* -------- Ÿ·ÎÄ«µå ¼±Åà -------- */
#card-select h1 { 
	font-size: clamp(1.9rem, 4vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	text-align: center; 
}
#card-select h1+p { 
	margin: 1.2rem 0 4rem; 
	font-weight: 300;
	text-align: center; 
}
.card-grid {
	display: flex;
	justify-content: center;
	gap: 16px;
}
.tarot-card {
	display: flex;
	align-items: center;
	width: 240px; height: auto;
	background: linear-gradient(135deg, #2a2a3d, #444);
	background: url('/images/main/tarot/bg_card.png') no-repeat center center;
	background-size: cover;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	transition: .3s;
	aspect-ratio: 11 / 18; /* Ä«µå ºñÀ² À¯Áö */

	/* ¼ÅÇà */
	transition: transform 0.6s cubic-bezier(.4,.2,.2,1), box-shadow 0.6s;
	perspective: 1200px;
}

/* ¼ÅÇÃ&µÚÁý±â */
.tarot-card.shuffle {
	animation: shuffleMove 0.8s ease-in-out;
}
@keyframes shuffleMove {
	0%   { transform: translateX(0) rotate(0); }
	30%  { transform: translateX(-20px) rotate(-4deg); }
	60%  { transform: translateX(20px) rotate(4deg); }
	100% { transform: translateX(0) rotate(0); }
}
.tarot-card.flipped { 
	transform: rotateY(180deg);
}
.tarot-card.dimmed {
	opacity: 0.3;
	transform: scale(0.9);
	pointer-events: none;
}
.tarot-card:hover {
	/* transform: translateY(-6px);
	animation: pulse 1.5s ease-in-out infinite; */
}

/* Ÿ·ÎÄ«µå À̹ÌÁö */
.tarot-card:after { 
	content: "";
	clear: both;
	display: inline-flex;
	width: 100%; height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.tarot-card:nth-child(1)::after { 
	background-image: url('/images/main/tarot/card_icon1_v2.png');
}
.tarot-card:nth-child(2)::after { 
	background-image: url('/images/main/tarot/card_icon2_v2.png');
}
.tarot-card:nth-child(3)::after { 
	background-image: url('/images/main/tarot/card_icon3_v2.png');
}
.tarot-card:nth-child(4)::after { 
	background-image: url('/images/main/tarot/card_icon4_v2.png');
}
.tarot-card img { 
	max-width: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}

/* ÇÁ¸®ºä Ä«µå À̹ÌÁö ¸ÅÇÎ */
#result-preview .preview-card[data-card-index="1"]::after {
  background-image: url('/images/main/tarot/card_icon1_v2.png');
}
#result-preview .preview-card[data-card-index="2"]::after {
  background-image: url('/images/main/tarot/card_icon2_v2.png');
}
#result-preview .preview-card[data-card-index="3"]::after {
  background-image: url('/images/main/tarot/card_icon3_v2.png');
}
#result-preview .preview-card[data-card-index="4"]::after {
  background-image: url('/images/main/tarot/card_icon4_v2.png');
}

/* °á°ú ÆäÀÌÁö Ä«µå À̹ÌÁö ¸ÅÇÎ */
.tarot-card.result[data-card-index="1"]::after {
	background-image: url('/images/main/tarot/card_icon1_v2.png');
}
.tarot-card.result[data-card-index="2"]::after {
	background-image: url('/images/main/tarot/card_icon2_v2.png');
}
.tarot-card.result[data-card-index="3"]::after {
	background-image: url('/images/main/tarot/card_icon3_v2.png');
}
.tarot-card.result[data-card-index="4"]::after {
	background-image: url('/images/main/tarot/card_icon4_v2.png');
}

/* º°°¡·ç */
.particle-layer {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	overflow: hidden;
	pointer-events: none;
}
.particle {
	position: absolute;
	width: 4px; height: 4px;
	background: radial-gradient(circle, #fff, rgba(255,210,248,0));
	border-radius: 50%;
	opacity: 0;
	animation: sparkle 0.9s ease-out forwards;
}
@keyframes sparkle {
	0% {
		transform: scale(0.3) translate(0,0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		transform: scale(1.2) translate(var(--x), var(--y));
		opacity: 0;
	}
}


/* -------- Áú¹® -------- */
#question-screen { 
	position: relative;
	text-align: center;
	opacity: 0;
	transform: translateY(60px);
	transition: transform 0.6s cubic-bezier(.22,1,.36,1), opacity 0.4s ease;
}
#question-screen.show {
	opacity: 1;
	transform: translateY(0);
}
#question-screen h2 { 
	justify-content: center;
	margin: 1.2rem 0 4.8rem;
	width: 100%;
	max-width: 100%;
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: 700;
	color: var(--ged-color-white);
	letter-spacing: -0.02em;
	text-align: center;
}
#question-screen h2 small { 
	display: block;
	margin: 0 0 1.6rem;
	font-size: 2.4rem; 
}
#question-options button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1rem auto;
	width: 28rem; height: 7rem;
	font-size: clamp(1.6rem, 2.5vw, 2.4rem);
	font-weight: 500;
	color: #fff;
	background: rgba(255 255 255/0.14);
	border-radius: 7rem;
	border: none;
	transition: background .3s;
}

/* hover °¡´ÉÇÑ(¸¶¿ì½º) ȯ°æ¿¡¼­¸¸ hover ½ºÅ¸ÀÏ Àû¿ë */
@media (hover: hover) and (pointer: fine) {
	#question-options button:hover { 
		color: #221b5f;
		background: #fff; 
		cursor: pointer;
	}
}

/* ================================
   ¼±ÅÃµÊ »óÅ (¸ð¹ÙÀÏ/PC °øÅë)
   ================================ */
#question-options button.is-selected {
  background-color: #fff;   /* hover¿Í µ¿ÀÏ */
  color: #221b5f;
  border-color: #2b2f3a;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Áú¹® ¹öÆ°µµ °°ÀÌ ¶°¿À¸£°Ô */
#question-options button {
	opacity: 0;
	transform: translateY(20px);
	animation: optionUp 0.4s ease forwards;
}
#question-options button:nth-child(1) { animation-delay: .1s }
#question-options button:nth-child(2) { animation-delay: .15s }
#question-options button:nth-child(3) { animation-delay: .2s }
#question-options button:nth-child(4) { animation-delay: .25s }
@keyframes optionUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* -------- °á°ú Ä«µå ÇÁ¸®ºä -------- */
.preview-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	opacity: 0;
	filter: blur(12px);
	transform: translateY(20px) scale(0.96);
	transition:
		opacity 0.8s ease,
		filter 0.8s ease,
		transform 0.8s cubic-bezier(.22,.61,.36,1);
}
.preview-screen.show {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0) scale(1);
}
.preview-card {
	position: relative;
	width: 288px; height: 480px;
	animation: pulse 2.5s ease-in-out infinite;
}
.preview-card span { 
	position: absolute; left: 50%; top: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20rem; height: 20rem;
	font-size: 2.4rem;
	/* color: #e6d5a9; */
	color: #fff;
	background: linear-gradient(135deg, #1e1366, #4c1863);
	border-radius: 30rem;
	box-shadow: 0 0 10px rgba(176, 102, 228, 0.5), inset 0 0 10px rgba(176, 102, 228, 0.5);
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
	transform: translate(-50%, -50%) scale(0.4); 
	transition: all 0.4s ease-in-out;
	animation: preview-pulse 1.2s ease-in-out alternate infinite;
}
@keyframes preview-pulse {
	0% {
		transform: translate(-50%, -50%) scale(0.4);
		opacity: 1;
	}
	40% {
		opacity: 0.8;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.1);
		opacity: 1;
	}
}


/* -------- °á°ú Ä«µå »ó¼¼ÆäÀÌÁö -------- */
:root {
	--card-glow: rgba(255,216,107,.6);
}
.detail-page {
	position: relative;
	inset: 0;
	display: flex;
	height: 540px;
	scrollbar-width: thin;
	scrollbar-color: #ffd86b transparent;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; /* iOS ź¼º */
	scrollbar-gutter: stable both-edges; /* °ø°£ °íÁ¤ */
}

/* ½ºÅ©·Ñ¹Ù */
.detail-page::-webkit-scrollbar {
	width: 4px;
}
.detail-page::-webkit-scrollbar-track {
	background: transparent;
}
.detail-page::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #ffd86b, #ffb347);
	border-radius: 10px;

	/* ¿ÏÀü ÀºÀºÇÑ ¹öÀü */
	background: rgba(255, 216, 107, 0.5);

	/* iOS ½ºÅ¸ÀÏ */
	background: rgba(255,255,255,0.35);
	border-radius: 10px;
}
.detail-page::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #ffe9a3, #ffc36b);
}

/* °á°ú Ä«µå */
.detail-card {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40%;
	min-width: 260px;
	transform: translateX(-100%);
	transition: .8s ease;
}
.detail-content {
	flex: 1;
	padding: 6rem 6rem 2rem 0;
	height: auto;
	min-height: auto;
	overflow-y: auto;
	transform: translateX(100%);
	transition: .8s ease .1s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.detail-page.show .detail-card,
.detail-page.show .detail-content {
	transform: translateX(0);
}

/* Ä«µå ¹ÝÀÀ */
.tarot-card.active {
	box-shadow: 0 0 32px var(--card-glow);
	animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
	0%,100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}

/* ŸÀÌƲ */
.detail-content h1 {
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	font-weight: 700;
	color: #ffd86b;
}
.detail-content h1+p { 
	margin: 3.2rem 0 0;
	line-height: 1.5;
	/* font-family: 'SUIT', 'Roboto', 'Pretendard', sans-serif; */
	font-size: clamp(1.4rem, 2vw, 1.8rem); 
	font-weight: 300;
}
.detail-content h2 { 
	margin: 8rem 0 2.4rem;
	padding: 0;
	width: 100%;
	max-width: 100%;
	font-size: clamp(2rem, 3vw, 2.8rem);
	font-weight: 700;
	color: #e6d5a9; 
}
.detail-content h2:last-of-type { 
	justify-content: center;
	text-align: center;
}

/* Å°¿öµå */
.keywords { 
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 3.2rem 0 0;
}
.keywords span {
	display: inline-flex;
	align-items: center;
	height: 4rem;
	padding: 0 2rem;
	font-size: 1.5rem;
	font-weight: 300;
	background: rgb(0 0 0/0.5);
	border-radius: 4rem;
	letter-spacing: -0.1em;
}

/* Ä«Å×°í¸® */
.tarot-category {
	padding: 4rem 0;
}
.tarot-category:first-of-type { 
	padding-top: 3.4rem; 
}
.tarot-category:not(:first-of-type) { 
	border-top: 1px dashed #e6d5a9; 
}
.category-desc {
	opacity: .8;
	font-size: 14px;
}
.tarot-category h3 { 
	margin: 0;
	font-size: clamp(1.76rem, 2.5vw, 2rem);
}
.tarot-category h3 a {
	color: #ffd86b;
	text-decoration: none;
}
.tarot-category h3 a:after { 
	content: "\EEB2";
	clear: both;
	margin: 0 0 0 4px;
	color: #e6d5a9;
	transform: rotate(45deg);
}
.tarot-category ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 2rem auto 0;
	text-align: left;
}
.tarot-category li:not(:first-child) { 
	margin: 0 0 0 8px; 
}
.tarot-category li a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 1.6rem 3.4rem;
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 300;
	color: #fff;
	text-decoration: none;

	/* Mustic Glow */
	position: relative;
	/* color: #d7aefb; ¿¬ÇÑ º¸¶ó»ö ÅؽºÆ® */
	background: transparent;
	/* border: 2px solid #b066e4; º¸¶ó»ö Å׵θ® */
	border: 2px solid #e6d5a9;
	border-radius: 50px; /* µÕ±Ù ÇüÅ */
	cursor: pointer;
	box-shadow: 0 0 10px rgba(176, 102, 228, 0.5), inset 0 0 10px rgba(176, 102, 228, 0.5);
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	z-index: 1;
}
.tarot-category p {
	flex: 1 0 100%;
	margin: 8px 0 0;
	width: 100%;
	font-family: 'SUIT', 'Roboto', 'Pretendard', sans-serif;
	font-size: 1.4rem;
	opacity: 0.9;
	text-align: left;
}
.tarot-category p:before { 
	content: "\EC09";
	clear: both;
	margin: 0 6px 0 0;
}

/* Ä«Å×°í¸® ¹öÆ° */
/* ±Ýºû Å׵θ®¿Í ±íÀº ÆĶû */
.tarot-btn-gold {
	position: relative;
	padding: 15px 40px;
	background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); /* ±íÀº û·Ï»ö ±×¶óµ¥ÀÌ¼Ç */
	border: 2px solid transparent;
	border-image: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) 1; /* ±Ý»ö ¸ÞÅ» Áú°¨ Å׵θ® */
	color: #fcf6ba; /* ¿¬ÇÑ ±Ý»ö ÅؽºÆ® */
	font-family: serif; /* ¸íÁ¶ °è¿­ ÆùÆ® ±ÇÀå */
	font-size: 1.2rem;
	letter-spacing: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	overflow: hidden;
}

.tarot-btn-gold:hover {
	background: linear-gradient(to bottom, #2c5364, #203a43, #0f2027);
	box-shadow: 0 5px 25px rgba(191, 149, 63, 0.4); /* ±Ý»ö ºû ¹øÁü */
	color: #fff;
}

.tarot-btn-gold::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 80%);
	transform: rotate(45deg);
	transition: all 0.5s ease;
	opacity: 0;
}
.tarot-btn-gold:hover::after {
    left: 100%;
    opacity: 1;
    transition: 0.7s;
}

/* ½Åºñ·Î¿î º¸¶ùºû ¹ß±¤ */
.tarot-btn-glow {
    padding: 15px 45px;
    background: transparent;
    color: #d7aefb; /* ¿¬ÇÑ º¸¶ó»ö ÅؽºÆ® */
    border: 2px solid #b066e4; /* º¸¶ó»ö Å׵θ® */
    font-size: 1.1rem;
    border-radius: 50px; /* µÕ±Ù ÇüÅ */
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 10px rgba(176, 102, 228, 0.5), inset 0 0 10px rgba(176, 102, 228, 0.5);
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    z-index: 1;
}

.tarot-btn-glow::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, #5f2c82, #49a09d); /* º¸¶ó-û·Ï ±×¶óµ¥ÀÌ¼Ç */
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    border-radius: 50px;
}

.tarot-btn-glow:hover {
    color: white;
    border-color: transparent;
    box-shadow: 0 0 20px rgba(176, 102, 228, 0.8), 0 0 40px rgba(73, 160, 157, 0.6);
}

.tarot-btn-glow:hover::before {
    opacity: 1;
}

/* ¿À·¡µÈ ¾çÇÇÁö ½ºÅ¸ÀÏ */
.tarot-btn-parchment {
    padding: 12px 35px;
    background: #d4c397; /* ±âº» ¾çÇÇÁö »ö */
    /* Áß¾ÓÀÌ ¹à°í ¿Ü°ûÀÌ ¾îµÎ¿î Áú°¨ Ç¥Çö */
    background-image: radial-gradient(circle, #e6d5a9 20%, #c0a972 100%);
    color: #4a3f35; /* £Àº °¥»ö ÅؽºÆ® */
    font-family: serif;
    font-weight: bold;
    font-size: 1.2rem;
    border: 3px double #6b5b45; /* ÀÌÁß Å׵θ® */
    box-shadow: 3px 3px 10px rgba(0,0,0,0.4), inset 0 0 20px rgba(107, 91, 69, 0.3);
    cursor: pointer;
    transform: perspective(1px) translateZ(0);
    transition: all 0.3s;
}

.tarot-btn-parchment:hover {
    /* ¸¶¿ì½º ¿À¹ö ½Ã Á¶±Ý ´õ ³°°í ÁøÇÑ ´À³¦ */
    background-image: radial-gradient(circle, #d4c397 20%, #a68c59 100%);
    color: #2e251e;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.6), inset 0 0 30px rgba(107, 91, 69, 0.6);
}

/* õü¿Í ¿ìÁÖ ½ºÅ¸ÀÏ */
.tarot-btn-celestial {
    padding: 18px 40px;
    /* ±íÀº ¿ìÁÖ »ö»ó ±×¶óµ¥ÀÌ¼Ç */
    background: linear-gradient(135deg, #1e1366, #4c1863);
    color: #ffffff;
    border: none;
    border-radius: 30px 5px 30px 5px; /* µ¶Æ¯ÇÑ ºñ´ëĪ ¸ð¾ç */
    font-size: 1.1rem;
    cursor: pointer;
    /* ÀºÀºÇÏ°Ô ÆÛÁö´Â Ǫ¸¥ºû/º¸¶ùºû ±×¸²ÀÚ */
    box-shadow: 0 0 20px rgba(60, 95, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.5) inset;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

/* º°µéÀÌ ¹Ý¦ÀÌ´Â µíÇÑ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú */
.tarot-btn-celestial::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 2%, transparent 2%),
                radial-gradient(circle, rgba(255,255,255,0.5) 1%, transparent 1%);
    background-size: 50px 50px, 30px 30px;
    background-position: 0 0, 15px 15px;
    opacity: 0.3;
    animation: sparkleMove 20s linear infinite;
}

@keyframes sparkleMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50px, -50px); }
}

.tarot-btn-celestial:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(60, 95, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.8) inset;
}

/* Ä«Å×°í¸® Á¡¼ö º¸±â */
.score-debug { 
	text-align: left; 
}
summary > div > div > strong { 
	font-weight: 300; 
}

/* ¹öÆ° */
.result-actions {
	display: flex;
	gap: 12px;
	margin-top: 40px;
}
.result-actions .btn {
	display: flex;
	align-items: center;
	height: 6rem;
	font-size: 2rem;
	color: #fff;
	background: #111;
	border-radius: 10rem;
	text-decoration: none;
}
.result-actions .btn.primary {
	background: #ffd86b;
	color: #000;
}



/* ======================================================
   MOBILE (max-width: 768px)
====================================================== */
@media (max-width: 768px) {

	/* Àüü ÅؽºÆ® »ì¦ Å°¿ö¼­ °¡µ¶¼º */
	body {
		font-size: 15px;
	}

	/* layout
	------------------------------------------------------ */
	#gedTarot { 
		margin: 12% auto 0;
		height: auto;
		min-height: 54rem;
	}

	/* -------- common -------- */
	.hint { 
		font-size: 1.4rem;
		opacity: .7; 
	}

	/* ---------- Ä«µå ¼±Åà ȭ¸é ---------- */
	#card-select { 
		padding: 6rem 5% 12%; 
	}
	.card-grid {
		/* display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 5%; */
	}

	.tarot-card {
		width: 100%;
		height: auto;
		aspect-ratio: 11 / 18; /* Ä«µå ºñÀ² À¯Áö */
	}

	/* ¸ð¹ÙÀÏ¿¡¼­µµ Ä«µå flip ¾Ö´Ï¸ÞÀÌ¼Ç °­Á¦ Çã¿ë */
	.tarot-card {
		transform-style: preserve-3d;
		transition: transform 0.9s ease;
	}

	.tarot-card.flipped {
		transform: rotateY(180deg) !important;
	}

	.tarot-card:hover {
		transform: none; /* ¸ð¹ÙÀÏ hover Á¦°Å */
	}
	.tarot-card:active {
		transform: scale(0.97);
	}

	/* ---------- Áú¹® È­¸é ---------- */
	#question-screen {
		padding: 6rem 5%;
	}
	#question-screen h2 { 
		margin: 0.8rem 0 3.2rem;
	}

	#question-options button {
		width: 100%; height: 6rem;
		max-width: 80%;
	}

	/* ---------- ÇÁ¸®ºä È­¸é ---------- */
	.preview-screen {
		padding: 6rem 5%;
	}

	.preview-card {
		width: 22rem;
		height: auto;
		aspect-ratio: 11 / 18;
	}

	/* ---------- °á°ú µðÅ×ÀÏ ---------- */
	.detail-page {
		flex-direction: column;
		padding: 6rem 5%;
		height: auto;
		overflow-y: auto;
		opacity: 0;
		transition: opacity .4s ease;
	}
	.detail-page.show {
		opacity: 1;
	}

	/* Ä«µå ¿µ¿ª: À§ ¡æ ¾Æ·¡ */
	.detail-card {
		transform: translateY(-60px);
	}
	/* ½ÇÁ¦ Ä«µå */
	.detail-card .tarot-card,
	.detail-card .preview-card {
		width: min(42vw, 180px);
		max-width: 180px;
		aspect-ratio: 11 / 18;
		height: auto;
	}

	/* ÄÜÅÙÃ÷ ¿µ¿ª: ¾Æ·¡ ¡æ À§ */
	.detail-content {
		padding: 6rem 0 0;
		width: 100%;
		max-width: 100%;
		transform: translateY(80px);
	}

	.detail-page.show .detail-card,
	.detail-page.show .detail-content {
		margin: 0 auto ;
		transform: translateY(0);
	}

	/* ---------- Å°¿öµå ---------- */
	.keywords { 
		margin: 2rem 0 0; 
	}
	.keywords span {
		padding: 0 1.6rem;
		height: 3.4rem;
		font-size: 1.3rem;
	}

	/* ---------- Ä«Å×°í¸® ---------- */
	.tarot-category:first-of-type { 
		padding-top: 2.4rem; 
	}
	.tarot-category li:not(:first-child) { 
		margin: 0 0 0 8px; 
	}

	.category-desc,
	.tarot-category p {
		font-size: 1.3rem;
	}

	/* ---------- ¹öÆ° ---------- */
	.result-actions {
		flex-direction: column;
		gap: 1rem;
	}
	.result-actions .btn {
		width: 100%;
		text-align: center;
		font-size: 1.5rem;
	}

	/* ---------- ½ºÅ©·Ñ °¨¼º ---------- */
	.detail-page {
		scrollbar-width: none;
	}
	.detail-page::-webkit-scrollbar {
		display: none;
	}
}



/* ======================================================
   MOBILE (max-width: 768px)
====================================================== */
@media (max-width: 480px) { 

	/* ---------- Ä«µå ¼±Åà ȭ¸é ---------- */
	.card-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 5%;
	}

	/* ---------- Áú¹® È­¸é ---------- */
	#question-options button { 
		height: 4.8rem;
		max-width: 100%; 
	}

	/* ---------- °á°ú µðÅ×ÀÏ ---------- */
	/* ÄÜÅÙÃ÷ ¿µ¿ª: ¾Æ·¡ ¡æ À§ */
	.detail-content {
		padding: 4rem 0 0;
	}
	.detail-content h1+p { 
		margin: 2.4rem 0 0; 
	}
	.detail-content h2 { 
		margin-top: 6rem;
	}


	/* ---------- Ä«Å×°í¸® ---------- */
	.tarot-category { 
		padding: 2.4rem 0; 
	}
	.tarot-category:first-of-type { 
		padding-top: 0.8rem; 
	}
	.tarot-category li { 
		width: 100%; 
	}
	.tarot-category li:not(:first-child) { 
		margin: 8px 0 0; 
	}
	.tarot-category li a { 
		width: inherit; 
	}

}