/* /tool/fortune 스타일 — 오늘의 운세 & 타로 뽑기 (standalone, 다크 미스틱 톤)
 * photo-uploader와 마찬가지로 이 페이지만 쓰는 CSS. 클래스 접두사 ft- 로 다른 페이지와 충돌 방지.
 */

:root{
	--ft-bg-0: #14101f;
	--ft-bg-1: #1c1530;
	--ft-bg-2: #241b3d;
	--ft-line: #372a56;
	--ft-text: #ece7fb;
	--ft-text-dim: #a89bd0;
	--ft-gold: #e8c26a;
	--ft-purple: #8a6ef0;
	--ft-purple-2: #b48cff;
	--ft-rise: #f85149;
	--ft-ok: #4fd1a5;
	--ft-radius: 14px;
}

*{ box-sizing: border-box; }

body{
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
	background: radial-gradient(circle at 20% 0%, #2a2050 0%, var(--ft-bg-0) 55%);
	color: var(--ft-text);
	min-height: 100vh;
}

/* ── 상단 네비 ── */
.ft-topnav{
	background: rgba(20, 16, 31, 0.9);
	border-bottom: 1px solid var(--ft-line);
	padding: 10px 16px;
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(6px);
}
.ft-topnav-left{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 720px; margin: 0 auto; }
.ft-topnav a{ color: var(--ft-text-dim); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ft-topnav a:hover{ color: var(--ft-gold); }
.ft-site-brand{ font-weight: 800; color: var(--ft-gold) !important; letter-spacing: 0.5px; }

.ft-page{ max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; }

.ft-page-header{ text-align: center; margin-bottom: 18px; }
.ft-page-header h1{ font-size: 22px; margin: 0 0 8px; }
.ft-page-header h1 i{ color: var(--ft-gold); margin-right: 6px; }
.ft-sub{ color: var(--ft-text-dim); font-size: 13px; margin: 0; }

/* ── 라이선스 배너/모달 (photo-uploader와 동일한 패턴, 톤만 다크 미스틱) ── */
.ft-license-bar{
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--ft-bg-2); border: 1px solid var(--ft-line); border-radius: var(--ft-radius);
	padding: 12px 14px; margin-bottom: 16px; font-size: 13px;
}
.ft-license-bar.is-active{ border-color: var(--ft-ok); }
.ft-license-bar-text i{ color: var(--ft-gold); margin-right: 4px; }
.ft-license-bar.is-active .ft-license-bar-text i{ color: var(--ft-ok); }
.ft-license-bar-btn{
	background: var(--ft-purple); color: #fff; border: none; border-radius: 8px;
	padding: 8px 12px; font-size: 12px; cursor: pointer; white-space: nowrap;
}

.ft-lib-warning{
	background: rgba(248, 81, 73, 0.12); border: 1px solid var(--ft-rise); color: #ffb4af;
	border-radius: var(--ft-radius); padding: 10px 12px; font-size: 12px; margin-bottom: 16px;
}

.ft-modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; }
.ft-modal.is-open{ display: flex; }
.ft-modal-dim{ position: absolute; inset: 0; background: rgba(10, 8, 18, 0.7); }
.ft-modal-body{
	position: relative; width: 90%; max-width: 340px; background: var(--ft-bg-2);
	border: 1px solid var(--ft-line); border-radius: var(--ft-radius); padding: 20px; text-align: center;
}
.ft-modal-title{ font-weight: 700; margin-bottom: 6px; }
.ft-modal-title i{ color: var(--ft-gold); margin-right: 4px; }
.ft-modal-sub{ color: var(--ft-text-dim); font-size: 12px; margin-bottom: 14px; }
.ft-modal-input{
	width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ft-line);
	background: var(--ft-bg-0); color: var(--ft-text); font-size: 14px; margin-bottom: 8px;
}
.ft-modal-msg{ min-height: 16px; font-size: 12px; margin-bottom: 10px; }
.ft-modal-msg.is-ok{ color: var(--ft-ok); }
.ft-modal-msg.is-err{ color: var(--ft-rise); }
.ft-modal-btns{ display: flex; gap: 8px; justify-content: center; }

/* ── 공용 버튼 ── */
.ft-btn{
	background: linear-gradient(135deg, var(--ft-purple), var(--ft-purple-2));
	color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: 13px;
	cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.ft-btn-ghost{
	background: transparent; border: 1px solid var(--ft-line); color: var(--ft-text-dim); text-decoration: none;
}
.ft-btn-lg{ padding: 14px 22px; font-size: 15px; border-radius: 12px; }

/* ── 탭 ── */
.ft-tabs{ display: flex; gap: 8px; margin-bottom: 18px; }
.ft-tab{
	flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--ft-line);
	background: var(--ft-bg-1); color: var(--ft-text-dim); font-size: 14px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ft-tab.is-active{ background: var(--ft-bg-2); border-color: var(--ft-gold); color: var(--ft-gold); font-weight: 700; }

.ft-panel{ display: none; }
.ft-panel.is-active{ display: block; }

/* ── 12지신 그리드 ── */
.ft-zodiac-grid{
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
.ft-zodiac-btn{
	background: var(--ft-bg-1); border: 1px solid var(--ft-line); border-radius: 12px;
	padding: 14px 6px; color: var(--ft-text); cursor: pointer; text-decoration: none;
	display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px;
}
.ft-zodiac-btn:hover{ border-color: var(--ft-purple-2); }
.ft-zodiac-btn.is-active{ border-color: var(--ft-gold); background: var(--ft-bg-2); box-shadow: 0 0 0 1px var(--ft-gold) inset; }
.ft-zodiac-emoji{ font-size: 26px; }

/* ── 결과 카드(캡처 대상) ── */
.ft-result-card{ margin-top: 4px; }
.ft-capture{
	background: linear-gradient(160deg, var(--ft-bg-2), var(--ft-bg-1));
	border: 1px solid var(--ft-line); border-radius: var(--ft-radius); padding: 20px;
}
.ft-capture-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ft-capture-emoji{ font-size: 36px; }
.ft-capture-title{ font-size: 17px; font-weight: 800; }
.ft-capture-date{ font-size: 12px; color: var(--ft-text-dim); }

.ft-fortune-list{ list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-fortune-list li{ font-size: 13px; line-height: 1.5; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 10px 12px; }
.ft-fortune-cat{
	display: inline-block; color: var(--ft-gold); font-weight: 700; font-size: 12px; margin-right: 6px;
}

.ft-lucky-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ft-lucky-item{
	background: rgba(255,255,255,0.03); border-radius: 8px; padding: 10px; text-align: center;
}
.ft-lucky-item span{ display: block; font-size: 11px; color: var(--ft-text-dim); margin-bottom: 4px; }
.ft-lucky-item strong{ font-size: 14px; color: var(--ft-purple-2); }

.ft-capture-foot{ font-size: 10px; color: var(--ft-text-dim); text-align: right; opacity: 0.8; }

.ft-result-actions{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ft-result-actions .ft-btn, .ft-result-actions .ft-btn-ghost{ flex: 1; justify-content: center; text-align: center; }

/* ── 타로 ── */
.ft-tarot-mode{ display: flex; gap: 8px; margin-bottom: 16px; }
.ft-mode-btn{
	flex: 1; padding: 10px; font-size: 12px; border-radius: 10px; border: 1px solid var(--ft-line);
	background: var(--ft-bg-1); color: var(--ft-text-dim); cursor: pointer;
}
.ft-mode-btn.is-active{ border-color: var(--ft-purple-2); color: var(--ft-purple-2); font-weight: 700; }

.ft-tarot-deck-wrap{ text-align: center; margin-bottom: 20px; }

.ft-tarot-board{
	display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; min-height: 1px;
}
.ft-tarot-slot{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ft-tarot-pos{ font-size: 12px; color: var(--ft-text-dim); }

.ft-tarot-card{
	width: 110px; height: 170px; perspective: 800px; cursor: pointer;
}
.ft-tarot-card-inner{
	position: relative; width: 100%; height: 100%; transition: transform 0.6s;
	transform-style: preserve-3d;
}
.ft-tarot-card.is-flipped .ft-tarot-card-inner{ transform: rotateY(180deg); }

.ft-tarot-card-back, .ft-tarot-card-front{
	position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border: 1px solid var(--ft-line);
}
.ft-tarot-card-back{
	background: repeating-linear-gradient(135deg, var(--ft-bg-2) 0 8px, var(--ft-bg-1) 8px 16px);
	color: var(--ft-gold); font-size: 26px;
}
.ft-tarot-card-front{
	background: linear-gradient(160deg, var(--ft-bg-2), var(--ft-bg-1));
	transform: rotateY(180deg); padding: 10px; text-align: center; gap: 4px;
}
.ft-tarot-card-front.is-reversed{ transform: rotateY(180deg) rotate(180deg); }
.ft-tarot-card-emoji{ font-size: 30px; }
.ft-tarot-card-name{ font-size: 13px; font-weight: 700; }
.ft-tarot-card-keyword{ font-size: 11px; color: var(--ft-text-dim); }
.ft-tarot-card-front.is-reversed .ft-tarot-card-name,
.ft-tarot-card-front.is-reversed .ft-tarot-card-keyword{ transform: rotate(180deg); }

.ft-tarot-summary{ display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.ft-tarot-summary-item{ background: rgba(255,255,255,0.03); border-radius: 10px; padding: 12px; }
.ft-tarot-pos-tag{
	display: inline-block; background: var(--ft-purple); color: #fff; font-size: 11px;
	border-radius: 6px; padding: 2px 8px; margin-bottom: 6px;
}
.ft-tarot-summary-head{ font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ft-tarot-summary-item p{ margin: 0; font-size: 13px; color: var(--ft-text-dim); line-height: 1.5; }

.ft-faq{ margin-top: 28px; }
.ft-faq-title{ font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.ft-faq-item{
	background: var(--ft-bg-1); border: 1px solid var(--ft-line); border-radius: 10px;
	padding: 12px 14px; margin-bottom: 8px;
}
.ft-faq-item summary{ font-size: 13px; font-weight: 700; cursor: pointer; }
.ft-faq-item p{ margin: 8px 0 0; font-size: 13px; color: var(--ft-text-dim); line-height: 1.5; }

.ft-disclaimer{ text-align: center; font-size: 11px; color: var(--ft-text-dim); margin-top: 24px; opacity: 0.7; }

.ft-ad-slot{ text-align: center; padding: 10px 0; }

.ft-footer{ text-align: center; padding: 20px; color: var(--ft-text-dim); font-size: 12px; }

@media (max-width: 420px){
	.ft-zodiac-grid{ grid-template-columns: repeat(3, 1fr); }
	.ft-lucky-row{ grid-template-columns: 1fr; }
	.ft-tarot-card{ width: 92px; height: 144px; }
}