/* static/css/mystic.css — 운세 센터 깊은 보라(Deep Mystic) 디자인 시스템 */
:root{
  --m-bg-0:#160a26; --m-bg-1:#1a0b2e; --m-purple:#3b1f5e;
  --m-gold:#d4a574; --m-gold-deep:#b8860b;
  --m-text:#f0e9ff; --m-text-dim:rgba(240,233,255,.62);
  --m-glass:rgba(255,255,255,.06); --m-glass-border:rgba(212,165,116,.3);
  --m-accent-purple:#aa8cd8; --m-radius:16px;
  --m-gold-soft:#f0d9a0;
}
/* 컴포넌트 */
.m-card{background:var(--m-glass);border:1px solid var(--m-glass-border);
  border-radius:var(--m-radius);backdrop-filter:blur(8px);padding:16px;}
.m-section{margin-bottom:1.5rem;}
.m-hero{background:var(--m-glass);border:1px solid var(--m-glass-border);
  border-radius:var(--m-radius);padding:1.25rem;backdrop-filter:blur(10px);}
.m-result{background:var(--m-glass);border:1px solid var(--m-glass-border);
  border-radius:var(--m-radius);padding:1.25rem;line-height:1.7;}
.m-chip{display:inline-block;background:rgba(212,165,116,.13);
  border:1px solid var(--m-glass-border);border-radius:999px;
  padding:.45rem .85rem;font-size:.82rem;color:var(--m-text);
  min-height:44px;min-width:44px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;}
.m-btn-gold{background:linear-gradient(135deg,var(--m-gold),var(--m-gold-deep));
  color:var(--m-bg-1);font-weight:700;border:0;border-radius:999px;
  padding:.7rem 1.3rem;min-height:44px;cursor:pointer;}
/* 결과 등장 전환(hidden 해제 시 mystic_fade.js가 부여) */
@keyframes mysticFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.mystic-fade-in{animation:mysticFadeIn .4s ease}
/* 접근성 */
:focus-visible{outline:2px solid var(--m-gold);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
    scroll-behavior:auto!important;}
}
/* 반응형 */
@media (max-width:480px){
  .m-card,.m-hero,.m-result{padding:1rem;}
  body{font-size:clamp(14px,4vw,16px);}
}
/* 음성 인터페이스 버튼 */
.m-voice-btn{position:fixed;right:16px;bottom:16px;z-index:50;width:52px;height:52px;
  border-radius:50%;border:1px solid var(--m-glass-border);background:var(--m-glass);
  color:var(--m-gold);font-size:22px;cursor:pointer;backdrop-filter:blur(8px);}
.m-voice-btn:focus-visible{outline:2px solid var(--m-gold);outline-offset:2px;}
/* 결과 공유 버튼 (음성 버튼 위에 쌓임) */
.m-share-btn{position:fixed;right:16px;bottom:76px;z-index:50;width:52px;height:52px;
  border-radius:50%;border:1px solid var(--m-glass-border);background:var(--m-glass);
  color:var(--m-gold);font-size:20px;cursor:pointer;backdrop-filter:blur(8px);}
.m-share-btn:focus-visible{outline:2px solid var(--m-gold);outline-offset:2px;}
/* PDF 리포트 도선 버튼 (공유 버튼 위, 사주 명리 계열 페이지 전용) */
.m-pdf-btn{position:fixed;right:16px;bottom:136px;z-index:50;width:52px;height:52px;
  border-radius:50%;border:1px solid var(--m-glass-border);background:var(--m-glass);
  color:var(--m-gold);font-size:20px;cursor:pointer;backdrop-filter:blur(8px);}
.m-pdf-btn:focus-visible{outline:2px solid var(--m-gold);outline-offset:2px;}

/* ── 다크 히어로 (평의회 2026-07-08 B안 전면화) ──────────────
   규칙: 모든 운세 페이지 상단 배너 표준(app-header에 m-hero-dark 부착).
   예외: fortune_pdf(인쇄)·share_card(테마 선택지)·admin/beta/landing.
   색은 반드시 --m-* 변수 사용 — 임의 네이비/그레이 그라디언트 금지. */
.m-hero-dark{background:linear-gradient(135deg,var(--m-bg-0),var(--m-bg-1),var(--m-purple));
  border-radius:var(--m-radius);padding:2rem 1.5rem;text-align:center;color:#fff;
  position:relative;overflow:hidden;margin-bottom:1.25rem;}
.m-hero-dark .m-hero-eyebrow{font-size:13px;color:rgba(255,255,255,.6);letter-spacing:2px;margin-bottom:.5rem;}
.m-hero-dark .m-hero-title{font-size:28px;font-weight:700;color:var(--m-gold-soft);margin-bottom:.375rem;}
.m-hero-dark .m-hero-sub{font-size:13px;color:rgba(255,255,255,.7);}
.m-hero-dark .app-title{color:var(--m-gold-soft);}
.m-hero-dark .app-sub{color:rgba(255,255,255,.72);}
.m-hero-dark .m-hero-chip{display:inline-flex;align-items:center;padding:.35rem .9rem;border-radius:999px;
  border:0.5px solid rgba(240,217,160,.45);color:var(--m-gold-soft);font-size:13px;font-weight:600;}