/* ============================================
   Moa Tarot Plus - 전체 스타일시트
   3 / 6 / 8 / 12 카드 스프레드 지원
   ============================================ */

/* ── CSS 변수 ─────────────────────────────────── */
:root {
    --bg-void:    #080810;
    --bg-deep:    #0d0d1a;
    --bg-card:    #1a1a2e;
    --gold:       #f5c842;
    --gold-mid:   #d4a520;
    --gold-dim:   #8a6a10;
    --gold-glow:  rgba(212,165,32,.15);
    --purple:     #c9b8f0;
    --purple-mid: #7b6bc8;
    --text-1:     #f0ead6;
    --text-2:     #a89880;
    --text-3:     #5c5248;
    --border-1:   rgba(212,165,32,.12);
    --border-2:   rgba(212,165,32,.30);
    --border-3:   rgba(212,165,32,.60);
    --f-display:  'Cinzel Decorative', serif;
    --f-title:    'Cinzel', serif;
    --f-body:     'Noto Serif KR', serif;
    --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-card: 10px;
}

/* ── 리셋 ─────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg-void); color:var(--text-1); font-family:var(--f-body); font-size:16px; line-height:1.7; min-height:100vh; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-void); }
::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:3px; }

/* ── 헤더 ─────────────────────────────────────── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(8,8,16,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-1); }
.header-inner { max-width:1200px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:16px; letter-spacing:.1em; color:var(--gold); transition:opacity .2s; }
.logo:hover { opacity:.8; }
.logo-star { font-size:11px; opacity:.7; animation:twinkle 2s infinite alternate; }
.logo-tarot { color:var(--purple); }
.logo-tarot em { font-style:normal; color:var(--gold-mid); font-size:.75em; letter-spacing:.2em; }
.header-login-btn { padding:6px 16px; border:1px solid var(--border-2); border-radius:20px; font-size:13px; color:var(--gold-mid); transition:all .2s; font-family:var(--f-body); }
.header-login-btn:hover { background:var(--gold-glow); border-color:var(--border-3); }
.header-member { display:flex; align-items:center; gap:12px; font-size:14px; }
.member-name { color:var(--text-2); }
.member-logout { padding:6px 16px; border:1px solid var(--border-2); border-radius:20px; font-size:13px; color:var(--gold-mid); transition:all .2s; }
.member-logout:hover { background:var(--gold-glow); }

/* ── 메인 히어로 ───────────────────────────────── */
.main-wrap { padding-top:64px; }
.hero { position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,#1a1040 0%,#080810 60%); }
.star-field { position:absolute; inset:0; }
.moon-glow { position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:400px; height:400px; background:radial-gradient(circle,rgba(201,184,240,.06) 0%,transparent 70%); border-radius:50%; }
.hero-content { position:relative; z-index:1; text-align:center; padding:40px 24px; }
.brand-badge { display:inline-block; font-family:var(--f-title); font-size:11px; letter-spacing:.4em; color:var(--gold-mid); border:1px solid var(--border-2); padding:6px 20px; border-radius:20px; margin-bottom:28px; animation:fadeInDown .8s ease; }
.hero-title { display:flex; flex-direction:column; align-items:center; gap:0; margin-bottom:20px; animation:fadeInUp .8s ease .2s both; }
.title-moa { font-family:var(--f-display); font-size:clamp(52px,11vw,96px); font-weight:700; color:var(--gold); letter-spacing:.15em; line-height:1; text-shadow:0 0 60px rgba(245,200,66,.25); }
.title-tarot { font-family:var(--f-display); font-size:clamp(22px,5vw,44px); font-weight:400; color:var(--purple); letter-spacing:.4em; line-height:1.2; }
.title-tarot em { font-style:normal; color:var(--gold); opacity:.8; }
.hero-desc { font-size:15px; color:var(--text-2); line-height:2; animation:fadeInUp .8s ease .4s both; }

/* ── 스프레드 선택 ─────────────────────────────── */
.spread-select-section { max-width:920px; margin:0 auto; padding:72px 24px 40px; }
.section-header { text-align:center; margin-bottom:40px; }
.section-ornament { font-size:11px; color:var(--gold-dim); letter-spacing:.5em; margin-bottom:10px; font-family:var(--f-title); }
.section-title { font-family:var(--f-title); font-size:26px; font-weight:600; color:var(--gold); letter-spacing:.1em; margin-bottom:8px; }
.section-sub { color:var(--text-2); font-size:14px; }

.spread-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:700px){ .spread-grid{ grid-template-columns:repeat(2,1fr); } }

.spread-card { background:var(--bg-card); border:1px solid var(--border-1); border-radius:var(--r-md); padding:20px 16px 16px; cursor:pointer; transition:all .3s; text-align:center; position:relative; overflow:hidden; }
.spread-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(212,165,32,.06),transparent 70%); opacity:0; transition:opacity .3s; }
.spread-card:hover { border-color:var(--border-2); transform:translateY(-2px); }
.spread-card:hover::before { opacity:1; }
.spread-card.active { border-color:var(--gold-mid); background:rgba(212,165,32,.06); }
.spread-card.active::before { opacity:1; }
.spread-num { font-family:var(--f-display); font-size:18px; color:var(--gold); letter-spacing:.08em; margin-bottom:4px; }
.spread-card.active .spread-num { color:var(--gold); }
.spread-sub { font-size:11px; color:var(--text-2); margin-bottom:8px; line-height:1.4; }
.spread-desc { font-size:11px; color:var(--text-3); margin-bottom:12px; }
.spread-dots { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-height:24px; }
.sdot { width:6px; height:6px; border-radius:50%; background:var(--border-2); transition:background .3s; }
.spread-card.active .sdot { background:var(--gold-dim); }

/* ── 카테고리 ─────────────────────────────────── */
.categories-section { max-width:920px; margin:0 auto; padding:24px 24px 80px; }
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.cat-card { display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--bg-card); border:1px solid var(--border-1); border-radius:var(--r-card); cursor:pointer; transition:all .3s; position:relative; overflow:hidden; }
.cat-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; border-radius:var(--r-card); }
.cat-card:hover { transform:translateY(-3px); border-color:var(--border-2); }
.cat-card:hover::before { opacity:1; }
.cat-pink::before  { background:radial-gradient(ellipse at 0% 50%,rgba(212,83,126,.08),transparent 60%); }
.cat-gold::before  { background:radial-gradient(ellipse at 0% 50%,rgba(212,165,32,.08),transparent 60%); }
.cat-blue::before  { background:radial-gradient(ellipse at 0% 50%,rgba(55,138,221,.08),transparent 60%); }
.cat-teal::before  { background:radial-gradient(ellipse at 0% 50%,rgba(29,158,117,.08),transparent 60%); }
.cat-purple::before{ background:radial-gradient(ellipse at 0% 50%,rgba(123,107,200,.08),transparent 60%); }
.cat-green::before { background:radial-gradient(ellipse at 0% 50%,rgba(99,153,34,.08),transparent 60%); }
.cat-icon { width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-size:20px; border-radius:50%; background:rgba(255,255,255,.04); border:1px solid var(--border-1); flex-shrink:0; position:relative; z-index:1; transition:all .3s; }
.cat-card:hover .cat-icon { border-color:var(--border-2); background:rgba(255,255,255,.08); }
.cat-pink  .cat-icon { color:#e884ab; }
.cat-gold  .cat-icon { color:var(--gold); }
.cat-blue  .cat-icon { color:#7ab5ef; }
.cat-teal  .cat-icon { color:#5dcaa5; }
.cat-purple .cat-icon { color:var(--purple); }
.cat-green .cat-icon { color:#97c459; }
.cat-body { flex:1; position:relative; z-index:1; }
.cat-title { font-family:var(--f-title); font-size:15px; font-weight:600; color:var(--text-1); margin-bottom:2px; }
.cat-sub { font-size:12px; color:var(--text-3); }
.cat-arrow { font-size:15px; color:var(--text-3); position:relative; z-index:1; transition:transform .2s,color .2s; }
.cat-card:hover .cat-arrow { transform:translateX(4px); color:var(--gold-mid); }

/* ── 인포 섹션 ────────────────────────────────── */
.info-section { background:var(--bg-deep); padding:72px 24px; border-top:1px solid var(--border-1); }
.info-cards { max-width:920px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.info-card { text-align:center; padding:28px 20px; background:var(--bg-card); border:1px solid var(--border-1); border-radius:var(--r-card); }
.info-icon { font-size:28px; margin-bottom:12px; }
.info-card h4 { font-family:var(--f-title); font-size:14px; color:var(--gold-mid); margin-bottom:8px; letter-spacing:.05em; }
.info-card p { font-size:13px; color:var(--text-2); line-height:1.7; }

/* ── 리딩 페이지 ───────────────────────────────── */
.reading-wrap { padding-top:64px; min-height:100vh; background:radial-gradient(ellipse at 50% 0%,#0e0e22 0%,var(--bg-void) 70%); }
.reading-nav { max-width:1100px; margin:0 auto; padding:20px 24px 0; display:flex; align-items:center; gap:12px; }
.back-btn { font-size:13px; color:var(--text-3); transition:color .2s; }
.back-btn:hover { color:var(--gold-mid); }
.type-badge,
.spread-badge { font-family:var(--f-title); font-size:10px; letter-spacing:.25em; color:var(--gold-dim); border:1px solid var(--border-1); padding:4px 12px; border-radius:20px; }
.spread-badge { color:var(--purple-mid); border-color:rgba(123,107,200,.25); }

.reading-header { text-align:center; padding:36px 24px 20px; }
.reading-title { font-family:var(--f-display); font-size:clamp(28px,6vw,48px); color:var(--gold); letter-spacing:.1em; margin-bottom:6px; }
.reading-sub { font-size:14px; color:var(--text-2); letter-spacing:.08em; margin-bottom:16px; }

/* 포지션 칩 바 */
.spread-info-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:800px; margin:0 auto; }
.pos-chip { font-size:11px; color:var(--text-3); background:rgba(255,255,255,.03); border:1px solid var(--border-1); padding:3px 10px; border-radius:12px; font-family:var(--f-title); letter-spacing:.05em; }

/* ── 카드 팬 ───────────────────────────────────── */
.card-select-area { max-width:1100px; margin:0 auto; padding:8px 16px 60px; }
.instruction-text { text-align:center; margin-bottom:24px; }
.instruction-text p { font-family:var(--f-title); font-size:14px; color:var(--gold-mid); letter-spacing:.1em; }
.inst-sub { font-size:12px !important; color:var(--text-3) !important; margin-top:4px !important; }

.card-fan { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; padding:8px; margin-bottom:28px; }

.tarot-card-back { width:64px; height:103px; border-radius:7px; border:1px solid var(--border-2); background:linear-gradient(135deg,#1a1440,#0d0d20); cursor:pointer; transition:transform .25s,border-color .25s,opacity .25s; position:relative; flex-shrink:0; animation:cardAppear .45s ease calc(var(--card-pos)*.025s) both; }
.tarot-card-back:hover { transform:translateY(-13px) scale(1.07); border-color:var(--gold); z-index:10; box-shadow:0 8px 24px rgba(212,165,32,.2); }
.tarot-card-back.selected { opacity:.18; pointer-events:none; transform:scale(.86); }
.card-back-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:6px; background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(123,107,200,.04) 4px,rgba(123,107,200,.04) 8px); }
.card-pattern { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--border-2); border-radius:50%; }
.card-star { color:var(--gold-dim); font-size:16px; }

/* ============================================
   슬롯 래퍼 - 스프레드별 레이아웃
   ============================================ */
.slots-wrap { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:28px; }

/* 3카드: 가로 1행 */
.spread-3 { gap:20px; }
.spread-3 .slot { width:90px; }

/* 6카드: 3열 2행 */
.spread-6 { display:grid; grid-template-columns:repeat(3,1fr); max-width:400px; margin:0 auto 28px; gap:14px; }

/* 8카드: 켈틱 크로스 느낌 - 4열 2행 */
.spread-8 { display:grid; grid-template-columns:repeat(4,1fr); max-width:560px; margin:0 auto 28px; gap:12px; }

/* 12카드: 4열 3행 */
.spread-12 { display:grid; grid-template-columns:repeat(4,1fr); max-width:560px; margin:0 auto 28px; gap:10px; }

@media(max-width:600px) {
    .spread-6  { grid-template-columns:repeat(3,1fr); max-width:300px; }
    .spread-8  { grid-template-columns:repeat(4,1fr); max-width:320px; gap:8px; }
    .spread-12 { grid-template-columns:repeat(4,1fr); max-width:320px; gap:7px; }
}

/* ── 개별 슬롯 ────────────────────────────────── */
.slot { text-align:center; }
.slot-num { font-family:var(--f-title); font-size:9px; color:var(--text-3); margin-bottom:4px; }
.slot-label { font-family:var(--f-title); font-size:9px; color:var(--text-3); letter-spacing:.1em; margin-top:5px; line-height:1.3; }
.slot.filled .slot-label { color:var(--gold-dim); }

.slot-placeholder { width:68px; height:108px; border-radius:7px; border:2px dashed var(--border-1); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--border-1); margin:0 auto; overflow:hidden; position:relative; transition:border-color .3s; }

/* 12카드는 더 작게 */
.spread-12 .slot-placeholder { width:56px; height:90px; }
.spread-8  .slot-placeholder { width:58px; height:94px; }

.slot.filled .slot-placeholder { border-style:solid; border-color:var(--border-2); }
.slot-img { width:100%; height:100%; object-fit:cover; border-radius:5px; display:block; }
.slot-img.reversed { transform:rotate(180deg); }
.slot-dir-badge { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); font-size:8px; color:var(--gold-dim); background:rgba(8,8,16,.8); padding:1px 5px; border-radius:6px; white-space:nowrap; pointer-events:none; }

/* ── 운세 보기 버튼 ───────────────────────────── */
.reveal-btn { display:block; margin:0 auto 20px; padding:14px 44px; background:transparent; border:1px solid var(--border-2); border-radius:36px; color:var(--text-2); font-family:var(--f-title); font-size:13px; letter-spacing:.12em; cursor:not-allowed; transition:all .3s; text-align:center; }
.reveal-btn .btn-sub { display:block; font-size:10px; color:var(--text-3); margin-top:3px; font-family:var(--f-body); letter-spacing:.04em; }
.reveal-btn.ready { cursor:pointer; border-color:var(--gold-mid); color:var(--gold); background:var(--gold-glow); animation:pulseGold 2s infinite; }
.reveal-btn.ready:hover { background:rgba(212,165,32,.22); transform:scale(1.02); }

/* ── 결과 영역 ────────────────────────────────── */
.result-area { max-width:1100px; margin:0 auto; padding:0 20px 80px; }
.result-header { text-align:center; margin-bottom:36px; }
.result-ornament { font-size:22px; color:var(--gold-mid); margin-bottom:10px; }
.result-title { font-family:var(--f-display); font-size:26px; color:var(--gold); letter-spacing:.1em; }

/* ── 결과 카드 그리드 - 스프레드별 ─────────────── */
.result-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:40px; }

/* 3카드: 1행 */
.spread-result-3 { gap:20px; }
.spread-result-3 .result-card-item { min-width:160px; max-width:190px; }

/* 6카드: 3열 */
.spread-result-6 { display:grid; grid-template-columns:repeat(3,1fr); max-width:640px; margin-left:auto; margin-right:auto; gap:14px; }
.spread-result-6 .result-card-item { min-width:0; max-width:none; }

/* 8카드: 4열 */
.spread-result-8 { display:grid; grid-template-columns:repeat(4,1fr); max-width:820px; margin-left:auto; margin-right:auto; gap:12px; }
.spread-result-8 .result-card-item { min-width:0; max-width:none; }

/* 12카드: 4열 3행 */
.spread-result-12 { display:grid; grid-template-columns:repeat(4,1fr); max-width:840px; margin-left:auto; margin-right:auto; gap:10px; }
.spread-result-12 .result-card-item { min-width:0; max-width:none; }

@media(max-width:700px){
    .spread-result-6  { grid-template-columns:repeat(3,1fr); }
    .spread-result-8  { grid-template-columns:repeat(4,1fr); }
    .spread-result-12 { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:480px){
    .spread-result-3  { gap:10px; }
    .spread-result-6  { grid-template-columns:repeat(2,1fr); }
    .spread-result-8  { grid-template-columns:repeat(2,1fr); }
    .spread-result-12 { grid-template-columns:repeat(3,1fr); gap:6px; }
}

/* ── 결과 카드 아이템 ─────────────────────────── */
.result-card-item { text-align:center; animation:fadeInUp .5s ease calc(var(--item-idx)*.06s) both; }
.result-pos-num { font-family:var(--f-title); font-size:9px; color:var(--text-3); margin-bottom:3px; }
.result-pos-label { font-family:var(--f-title); font-size:10px; color:var(--gold-dim); letter-spacing:.08em; margin-bottom:8px; line-height:1.3; min-height:28px; display:flex; align-items:center; justify-content:center; }

.result-card-face-wrap { position:relative; width:100%; max-width:140px; margin:0 auto 8px; border-radius:8px; overflow:hidden; border:1px solid var(--border-2); aspect-ratio:.62; background:var(--bg-card); }
.spread-result-12 .result-card-face-wrap { max-width:110px; }
.spread-result-8  .result-card-face-wrap { max-width:120px; }

.result-card-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.result-card-img.reversed { transform:rotate(180deg); }
.result-card-face-wrap:hover .result-card-img { transform:scale(1.05); }
.result-card-face-wrap:hover .result-card-img.reversed { transform:rotate(180deg) scale(1.05); }

.result-card-overlay { position:absolute; bottom:0; left:0; right:0; padding:4px; background:linear-gradient(transparent,rgba(8,8,16,.82)); display:flex; justify-content:center; }
.result-card-dir { font-size:9px; color:var(--gold-mid); border:1px solid var(--border-2); padding:1px 6px; border-radius:8px; background:rgba(8,8,16,.5); }
.rci-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--bg-card); font-size:11px; color:var(--gold-mid); text-align:center; padding:8px; font-family:var(--f-body); }

.result-card-kr { font-family:var(--f-title); font-size:12px; color:var(--text-1); margin-bottom:1px; }
.result-card-en { font-size:10px; color:var(--text-3); margin-bottom:4px; font-style:italic; }
.result-card-meaning { font-size:11px; color:var(--text-2); line-height:1.45; }

/* 12카드에서 영문명/의미 숨김 (공간 절약) */
.spread-result-12 .result-card-en,
.spread-result-12 .result-card-meaning { display:none; }
.spread-result-8 .result-card-en { display:none; }
.spread-result-8 .result-card-meaning { font-size:10px; }

/* ── AI 해석 ──────────────────────────────────── */
.ai-reading { background:var(--bg-card); border:1px solid var(--border-1); border-radius:var(--r-md); padding:28px 28px 24px; margin-bottom:28px; }
.ai-reading-header { display:flex; align-items:center; gap:10px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border-1); }
.ai-icon { font-size:20px; }
.ai-reading-header h3 { font-family:var(--f-title); font-size:15px; color:var(--gold-mid); letter-spacing:.1em; flex:1; }
.ai-spread-badge { font-family:var(--f-title); font-size:9px; letter-spacing:.2em; color:var(--purple-mid); border:1px solid rgba(123,107,200,.25); padding:3px 10px; border-radius:12px; }
.ai-content { font-size:15px; line-height:1.9; color:var(--text-2); white-space:pre-line; }
.loading-dots { display:flex; align-items:center; gap:6px; padding:6px 0; }
.loading-dots span { width:7px; height:7px; background:var(--gold-dim); border-radius:50%; animation:dotPulse 1.4s infinite ease-in-out; }
.loading-dots span:nth-child(2) { animation-delay:.2s; }
.loading-dots span:nth-child(3) { animation-delay:.4s; }

/* ── 결과 액션 ────────────────────────────────── */
.result-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.action-btn { padding:13px 32px; border-radius:30px; font-family:var(--f-title); font-size:12px; letter-spacing:.1em; cursor:pointer; transition:all .3s; }
.action-btn.primary { background:var(--gold-glow); border:1px solid var(--gold-mid); color:var(--gold); }
.action-btn.primary:hover { background:rgba(212,165,32,.2); transform:translateY(-2px); }
.action-btn.secondary { background:transparent; border:1px solid var(--border-2); color:var(--text-2); }
.action-btn.secondary:hover { border-color:var(--border-3); color:var(--text-1); }

/* ── 푸터 ─────────────────────────────────────── */
.site-footer { background:var(--bg-deep); border-top:1px solid var(--border-1); padding:36px 24px; text-align:center; }
.footer-inner { max-width:560px; margin:0 auto; }
.footer-logo { font-family:var(--f-display); font-size:13px; color:var(--gold-dim); letter-spacing:.3em; margin-bottom:8px; }
.footer-desc { font-size:13px; color:var(--text-3); margin-bottom:14px; }
.footer-links { display:flex; justify-content:center; align-items:center; gap:10px; font-size:12px; color:var(--text-3); margin-bottom:14px; }
.footer-links a:hover { color:var(--gold-dim); }
.footer-links span { opacity:.4; }
.footer-copy { font-size:11px; color:var(--text-3); opacity:.6; }

/* ── 애니메이션 ───────────────────────────────── */
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes twinkle     { from{opacity:.4}to{opacity:1} }
@keyframes pulseGold   { 0%,100%{box-shadow:0 0 0 0 rgba(212,165,32,0)}50%{box-shadow:0 0 18px 3px rgba(212,165,32,.15)} }
@keyframes cardAppear  { from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes dotPulse    { 0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1} }
@keyframes starFloat   { 0%,100%{transform:translateY(0) translateX(0);opacity:.5}50%{transform:translateY(-5px) translateX(2px);opacity:.9} }

/* ── 반응형 ───────────────────────────────────── */
@media(max-width:600px){
    .categories-grid { grid-template-columns:1fr; }
    .card-fan { gap:4px; }
    .tarot-card-back { width:50px; height:80px; }
    .result-actions { flex-direction:column; align-items:stretch; }
    .action-btn { text-align:center; }
    .ai-reading { padding:18px; }
    .spread-3 .slot { width:76px; }
    .spread-3 .result-card-item { min-width:130px; }
}