/* ===== 유저 버전 상단 헤더 스타일 (프로에도 적용) ===== */
.app-header {
	position: fixed;
	top: 10px;
	left: 20px;
	z-index: 1100;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(10, 0, 20, 0.75);
	border: 1px solid rgba(255, 215, 0, 0.6);
	font-size: 0.9em;
	color: var(--text-light);
	display: flex;
	align-items: center;
	gap: 8px;
}

.app-header .version-label {
	font-weight: 600;
	color: var(--text-gold);
}

.app-header .date-label {
	opacity: 0.9;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary-purple: #6a0dad;
	--secondary-purple: #9b4dca;
	--dark-bg: #0a0014;
	--card-bg: #1a0f2e;
	--text-gold: #ffd700;
	--text-light: #e8d5ff;
	--shadow-glow: rgba(138, 43, 226, 0.6);
	--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	--gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: var(--dark-bg);
	background-image: url('images/tarot_background.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--text-light);
	overflow-x: hidden;
	min-height: 100vh;
	position: relative;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 0, 20, 0.6);
	z-index: -1;
}

/* 별 배경 애니메이션 */
.stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-image: 
		radial-gradient(2px 2px at 20px 30px, white, transparent),
		radial-gradient(2px 2px at 60px 70px, white, transparent),
		radial-gradient(1px 1px at 50px 50px, white, transparent),
		radial-gradient(1px 1px at 130px 80px, white, transparent),
		radial-gradient(2px 2px at 90px 10px, white, transparent);
	background-size: 200px 200px;
	animation: stars-move 200s linear infinite;
	opacity: 0.5;
}

@keyframes stars-move {
	from { transform: translateY(0); }
	to { transform: translateY(-200px); }
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.screen {
	display: none;
	width: 100%;
	animation: fadeIn 0.8s ease-in;
}

.screen.active {
	display: block;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ============ 시작 화면 ============ */
.welcome-card {
	background: linear-gradient(135deg, rgba(106, 13, 173, 0.2), rgba(138, 43, 226, 0.1));
	border: 2px solid var(--secondary-purple);
	border-radius: 20px;
	padding: 60px 40px;
	text-align: center;
	box-shadow: 0 0 50px var(--shadow-glow);
	backdrop-filter: blur(10px);
	max-width: 700px;
	margin: 0 auto;
}

.main-title {
	font-size: 2.5em;
	margin-bottom: 20px;
	background: linear-gradient(45deg, #ffd700, #ff69b4, #00ffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
	0%, 100% { filter: hue-rotate(0deg); }
	50% { filter: hue-rotate(30deg); }
}

.mystical {
	display: inline-block;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.subtitle {
	font-size: 1.1em;
	color: var(--text-gold);
	margin-bottom: 30px;
	letter-spacing: 1px;
}

.version-badge {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 20px;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 215, 0, 0.7);
	background: rgba(10, 0, 20, 0.6);
	font-size: 0.9em;
	color: var(--text-light);
}

.welcome-description {
	margin: 30px 0;
	line-height: 1.8;
	font-size: 1.1em;
}

.welcome-description p {
	margin: 5px 0;
}

.date-display {
	margin: 30px 0;
	font-size: 1.2em;
	color: var(--text-gold);
}

.btn-primary, .btn-secondary {
	padding: 15px 40px;
	font-size: 1.2em;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: bold;
	margin: 10px;
}

.btn-primary {
	background: var(--gradient-1);
	color: white;
	box-shadow: 0 5px 20px rgba(138, 43, 226, 0.4);
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(138, 43, 226, 0.6);
}

.btn-secondary {
	background: var(--gradient-2);
	color: white;
	box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
}

.btn-secondary:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(245, 87, 108, 0.6);
}

.btn-danger {
	padding: 15px 40px;
	font-size: 1.2em;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: bold;
	margin: 10px;
	background: linear-gradient(135deg, #dc2626, #991b1b);
	color: white;
	box-shadow: 0 5px 20px rgba(220, 38, 38, 0.4);
}

.btn-danger:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(220, 38, 38, 0.6);
}

.glow-effect {
	animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
	0%, 100% { box-shadow: 0 5px 20px rgba(138, 43, 226, 0.4); }
	50% { box-shadow: 0 5px 40px rgba(138, 43, 226, 0.8); }
}

/* 음악 제어 버튼 */
.music-btn {
	position: fixed;
	top: 20px;
	right: 120px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(106, 13, 173, 0.9));
	border: 2px solid rgba(255, 215, 0, 0.4);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(138, 43, 226, 0.5);
}

.music-btn:hover {
	transform: translateY(-2px) rotate(15deg);
	background: linear-gradient(135deg, rgba(138, 43, 226, 1), rgba(106, 13, 173, 1));
	box-shadow: 0 6px 25px rgba(138, 43, 226, 0.7);
	border-color: rgba(255, 215, 0, 0.6);
}

.music-btn:active {
	transform: translateY(0) rotate(0deg);
}

.music-icon {
	font-size: 24px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 종료 버튼 */
.exit-btn {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 12px 24px;
	border-radius: 25px;
	background: linear-gradient(135deg, rgba(255, 87, 108, 0.9), rgba(240, 147, 251, 0.9));
	border: 2px solid rgba(255, 255, 255, 0.4);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(255, 87, 108, 0.5);
}

.exit-btn:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, rgba(255, 87, 108, 1), rgba(240, 147, 251, 1));
	box-shadow: 0 6px 25px rgba(255, 87, 108, 0.7);
}

.exit-btn:active {
	transform: translateY(0);
}

.exit-text {
	color: white;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
}

/* ============ 카드 섞는 화면 ============ */
.shuffle-container {
	text-align: center;
	padding: 60px 20px;
}

.section-title {
	font-size: 2em;
	margin-bottom: 40px;
	color: var(--text-gold);
}

.deck-animation {
	margin: 50px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
}

.card-stack {
	position: relative;
	width: 200px;
	height: 280px;
}

.card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 15px;
	border: 3px solid var(--text-gold);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	animation: shuffle 2s ease-in-out infinite;
	overflow: hidden;
}

.card-back img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card-back:nth-child(1) { animation-delay: 0s; z-index: 5; }
.card-back:nth-child(2) { animation-delay: 0.2s; z-index: 4; }
.card-back:nth-child(3) { animation-delay: 0.4s; z-index: 3; }
.card-back:nth-child(4) { animation-delay: 0.6s; z-index: 2; }
.card-back:nth-child(5) { animation-delay: 0.8s; z-index: 1; }

@keyframes shuffle {
	0%, 100% { transform: translateX(0) rotate(0deg); }
	25% { transform: translateX(-30px) rotate(-5deg); }
	75% { transform: translateX(30px) rotate(5deg); }
}

.shuffle-text {
	font-size: 1.3em;
	margin: 30px 0;
	color: var(--text-gold);
}

.loading-bar {
	width: 300px;
	height: 8px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	margin: 20px auto;
	overflow: hidden;
}

.loading-progress {
	height: 100%;
	background: var(--gradient-3);
	animation: loading 3s ease-in-out;
}

@keyframes loading {
	from { width: 0; }
	to { width: 100%; }
}

/* ============ 카드 선택 화면 ============ */
.selection-container {
	text-align: center;
	padding: 40px 20px;
}

.card-positions {
	margin: 30px 0;
}

.position-label {
	display: flex;
	justify-content: center;
	gap: 100px;
	flex-wrap: wrap;
}

.pos-text {
	padding: 10px 25px;
	border-radius: 20px;
	font-weight: bold;
	font-size: 1.1em;
}

.pos-text.past {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.pos-text.present {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.pos-text.future {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.cards-circle {
	position: relative;
	width: 600px;
	height: 600px;
	margin: 50px auto;
}

.circle-card {
	position: absolute;
	width: 80px;
	height: 110px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 10px;
	border: 2px solid var(--text-gold);
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	overflow: hidden;
}

.circle-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.circle-card:hover {
	transform: scale(1.2) translateY(-10px);
	box-shadow: 0 10px 40px rgba(255, 215, 0, 0.6);
	z-index: 10;
}

.circle-card.selected {
	animation: cardSelect 0.5s ease;
	opacity: 0;
	pointer-events: none;
}

@keyframes cardSelect {
	0% { transform: scale(1); }
	50% { transform: scale(1.5) rotate(360deg); }
	100% { transform: scale(0) rotate(720deg); }
}

.instruction-text {
	margin-top: 30px;
	font-size: 1.2em;
}

.selection-count {
	margin-top: 15px;
	font-size: 1.4em;
	color: var(--text-gold);
	font-weight: bold;
}

/* ============ 카드 공개 화면 ============ */
.reveal-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 40px 20px;
	text-align: center;
}

.revealed-card-display {
	margin: 50px 0;
	perspective: 1000px;
}

/* 3장 카드 가로 배치 - 한 줄로 */
.three-cards-reveal {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 25px;
	margin: 30px auto;
	flex-wrap: nowrap;
	max-width: 1500px;
	overflow-x: auto;
	padding: 0 20px;
}

.reveal-card-wrapper {
	flex: 0 0 auto;
	width: 320px;
	text-align: center;
}

.reveal-position-label {
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 15px;
	padding: 8px 20px;
	border-radius: 20px;
	display: inline-block;
}

.reveal-position-label.past {
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(106, 13, 173, 0.3));
	color: var(--text-gold);
}

.reveal-position-label.present {
	background: linear-gradient(135deg, rgba(245, 87, 108, 0.3), rgba(220, 38, 38, 0.3));
	color: var(--text-gold);
}

.reveal-position-label.future {
	background: linear-gradient(135deg, rgba(52, 211, 153, 0.3), rgba(16, 185, 129, 0.3));
	color: var(--text-gold);
}

.card-3d {
	width: 100%;
	min-height: 300px;
	height: auto;
	margin: 0 auto 15px;
	position: relative;
	transform-style: preserve-3d;
	animation: cardFlip 1s ease;
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(106, 13, 173, 0.9));
	border-radius: 15px;
	border: 3px solid var(--text-gold);
	box-shadow: 0 20px 60px rgba(138, 43, 226, 0.5);
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.card-image {
	max-width: 100%;
	max-height: 180px;
	min-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	margin: 0 auto 10px auto;
	display: block !important;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 215, 0, 0.3);
}

.card-symbol {
	font-size: 1.8em;
	margin-bottom: 4px;
}

.card-name {
	font-size: 0.9em;
	font-weight: bold;
	color: var(--text-gold);
	margin-bottom: 4px;
	line-height: 1.1;
}

.card-element {
	font-size: 0.85em;
	font-weight: bold;
	margin-top: 3px;
}

.card-suit-badge {
	font-size: 0.65em;
	margin-top: 4px;
	padding: 2px 8px;
	background: rgba(255, 215, 0, 0.2);
	border-radius: 12px;
	border: 1px solid rgba(255, 215, 0, 0.3);
	color: var(--text-gold);
}

/* 컴팩트 디테일 스타일 */
.detail-section-compact {
	margin: 10px 0;
	text-align: left;
	background: rgba(0, 0, 0, 0.3);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 215, 0, 0.1);
}

.detail-section-compact.element-info {
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(106, 13, 173, 0.3));
	border: 1px solid rgba(255, 215, 0, 0.3);
}

.detail-section-compact.shadow-section {
	background: rgba(220, 38, 38, 0.2);
	border: 1px solid rgba(220, 38, 38, 0.3);
}

.detail-section-compact.advice-section {
	background: rgba(52, 211, 153, 0.2);
	border: 1px solid rgba(52, 211, 153, 0.3);
}

.detail-title-small {
	font-size: 0.9em;
	font-weight: bold;
	color: var(--text-gold);
	margin-bottom: 6px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.keywords-compact {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 6px 0;
}

.keyword-tag-small {
	background: rgba(255, 215, 0, 0.3);
	color: var(--text-gold);
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 0.8em;
	border: 1px solid rgba(255, 215, 0, 0.4);
	font-weight: 600;
}

.detail-content-small {
	font-size: 0.85em;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.95);
}

@keyframes cardFlip {
	0% { transform: rotateY(180deg) scale(0.5); opacity: 0; }
	100% { transform: rotateY(0) scale(1); opacity: 1; }
}

.reading-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.reading-header {
	text-align: center;
	margin-bottom: 50px;
}

.reading-date {
	font-size: 1.3em;
	color: var(--text-gold);
	margin-top: 15px;
}

.three-cards-summary {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 50px 0;
	flex-wrap: wrap;
}

.summary-card {
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(106, 13, 173, 0.2));
	border: 2px solid var(--secondary-purple);
	border-radius: 15px;
	padding: 25px;
	width: 300px;
	text-align: center;
}

.summary-card-symbol {
	font-size: 3em;
	margin-bottom: 15px;
}

.summary-card-name {
	font-size: 1.3em;
	color: var(--text-gold);
	font-weight: bold;
	margin-bottom: 10px;
}

.summary-card-position {
	font-size: 1.1em;
	opacity: 0.8;
}

.reading-content {
	background: rgba(26, 15, 46, 0.6);
	padding: 40px;
	border-radius: 20px;
	border: 2px solid var(--secondary-purple);
	margin: 30px 0;
}

.reading-chapter {
	margin: 40px 0;
	padding: 30px;
	background: rgba(138, 43, 226, 0.1);
	border-radius: 15px;
	border-left: 5px solid var(--text-gold);
}

.chapter-title {
	font-size: 1.8em;
	color: var(--text-gold);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 15px;
}

.chapter-content {
	font-size: 1.15em;
	line-height: 2;
	text-align: justify;
}

.chapter-content p {
	margin: 15px 0;
}

.energy-analysis {
	background: rgba(0, 0, 0, 0.3);
	padding: 20px;
	border-radius: 10px;
	margin: 20px 0;
}

.analysis-item {
	margin: 15px 0;
	padding-left: 20px;
}

.highlight {
	color: var(--text-gold);
	font-weight: bold;
}

/* ==========================================
	프로 리딩 요약/핵심/행동/행운/만트라/최종 운세 스타일
	(전문가용 시각 스타일)
   ========================================== */

/* 요약 박스 스타일 */
.reading-summary {
	background: linear-gradient(135deg, rgba(106, 13, 173, 0.3), rgba(138, 43, 226, 0.3));
	border: 2px solid var(--text-gold);
	border-radius: 20px;
	padding: 30px;
	margin: 30px 0;
	box-shadow: 0 8px 32px rgba(138, 43, 226, 0.4);
}

.summary-title {
	font-size: 1.8em;
	font-weight: bold;
	color: var(--text-gold);
	text-align: center;
	margin-bottom: 25px;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.summary-boxes {
	display: flex;
	gap: 20px;
	justify-content: space-around;
	flex-wrap: wrap;
}

.summary-box {
	flex: 1;
	min-width: 250px;
	background: rgba(26, 15, 46, 0.85);
	border-radius: 15px;
	padding: 25px;
	text-align: center;
	border: 2px solid;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.summary-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
}

.summary-box.past {
	border-color: #9b59b6;
}

.summary-box.present {
	border-color: var(--text-gold);
	background: rgba(255, 215, 0, 0.08);
}

.summary-box.future {
	border-color: #3498db;
}

.box-label {
	font-size: 0.9em;
	color: #bbb;
	margin-bottom: 10px;
}

.box-card {
	font-size: 3em;
	margin: 15px 0;
}

.box-name {
	font-size: 1.2em;
	font-weight: bold;
	color: var(--text-gold);
	margin-bottom: 15px;
}

.box-simple {
	font-size: 1.05em;
	line-height: 1.7;
	color: var(--text-light);
}

/* 핵심 메시지 박스 */
.core-message-box {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.25));
	border: 3px solid var(--text-gold);
	border-radius: 20px;
	padding: 30px;
	margin: 30px 0;
	text-align: center;
	box-shadow: 0 0 30px rgba(255, 215, 0, 0.35);
}

.core-title {
	font-size: 1.8em;
	font-weight: bold;
	color: var(--text-gold);
	margin-bottom: 20px;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.core-content {
	font-size: 1.1em;
	line-height: 1.9;
}

/* 오늘의 행동/전략 박스 */
.today-action-box {
	background: rgba(26, 15, 46, 0.7);
	border: 2px solid var(--secondary-purple);
	border-radius: 20px;
	padding: 30px;
	margin: 30px 0;
}

.action-title {
	font-size: 1.6em;
	font-weight: bold;
	color: var(--text-gold);
	margin-bottom: 20px;
	text-align: center;
}

.action-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 768px) {
	.action-content {
		grid-template-columns: 1fr;
	}
}

.action-item {
	background: rgba(26, 15, 46, 0.9);
	border-radius: 15px;
	padding: 20px;
}

.action-item.do {
	border: 2px solid #27ae60;
}

.action-item.dont {
	border: 2px solid #e74c3c;
}

.action-label {
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 15px;
	color: var(--text-gold);
}

.action-list {
	list-style: none;
	padding: 0;
}

.action-list li {
	padding: 10px 0;
	padding-left: 25px;
	position: relative;
	line-height: 1.7;
}

.action-list li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--text-gold);
	font-size: 1.4em;
}

/* 상세 설명 토글 및 내용 */
.detailed-reading {
	margin: 30px 0;
}

.toggle-detail-btn {
	width: 100%;
	padding: 20px;
	background: linear-gradient(135deg, rgba(106, 13, 173, 0.7), rgba(138, 43, 226, 0.8));
	border: 2px solid var(--text-gold);
	border-radius: 15px;
	color: var(--text-light);
	font-size: 1.2em;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
}

.toggle-detail-btn:hover {
	background: linear-gradient(135deg, rgba(106, 13, 173, 0.9), rgba(138, 43, 226, 1));
	transform: translateY(-2px);
	box-shadow: 0 12px 35px rgba(138, 43, 226, 0.7);
}

.detailed-content {
	margin-top: 20px;
	padding: 20px;
	background: rgba(26, 15, 46, 0.45);
	border-radius: 15px;
	border: 1px solid rgba(138, 43, 226, 0.4);
}

/* 만트라 박스 */
.mantra-box {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 105, 180, 0.25));
	border: 2px solid var(--text-gold);
	border-radius: 15px;
	padding: 30px;
	margin: 30px 0;
	text-align: center;
}

.mantra-title {
	font-size: 1.5em;
	color: var(--text-gold);
	margin-bottom: 20px;
}

.mantra-text {
	font-size: 1.4em;
	font-style: italic;
	line-height: 1.8;
	color: var(--text-light);
}

/* 최종 운세 박스 */
.final-fortune {
	background: linear-gradient(135deg, rgba(138, 43, 226, 0.35), rgba(106, 13, 173, 0.4));
	border: 3px solid var(--text-gold);
	border-radius: 20px;
	padding: 40px;
	margin: 40px 0;
	text-align: center;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
}

.fortune-rating {
	font-size: 2.2em;
	margin: 20px 0;
}

.fortune-message {
	font-size: 1.2em;
	line-height: 2;
	text-align: justify;
}

.reading-footer {
	text-align: center;
	margin-top: 50px;
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}