/* =====================================================================
   Landing.jsx — 랜딩 화면 + 공통 컴포넌트 모음
   아래 컴포넌트들을 window.* 전역으로 노출합니다:
   Stars, Particle, LangToggle, Divider, DreamInput,
   Loading, DreamCanvas, MasterpieceCard, Landing
===================================================================== */
const { useState, useEffect, useRef } = React;

/* ── 별 배경 ─────────────────────────────────────────────────────── */
window.Stars = function Stars({ count = 90 }) {
  const stars = useRef(Array.from({ length: count }, (_, i) => ({
    id: i,
    x:  Math.random() * 100,
    y:  Math.random() * 100,
    s:  (Math.random() * 2 + 0.4).toFixed(1),
    d:  (Math.random() * 3 + 2).toFixed(1) + 's',
    dl: (Math.random() * 4).toFixed(1) + 's'
  }))).current;
  return (
    <>
      {stars.map(s => (
        <div key={s.id} className="star" style={{
          left: `${s.x}%`, top: `${s.y}%`,
          width: s.s + 'px', height: s.s + 'px',
          '--d': s.d, animationDelay: s.dl
        }}/>
      ))}
    </>
  );
};

/* ── 파티클 ──────────────────────────────────────────────────────── */
window.Particle = function Particle({ side }) {
  const isTarot = side === 'tarot';
  const items   = isTarot ? ['✦','★','◈','⬡','✧','⬢','◇'] : ['✿','❀','꽃','✸','❋','⊹','花'];
  return (
    <>
      {Array.from({ length: 8 }, (_, i) => {
        const l     = 10 + Math.random() * 80;
        const b     = 5  + Math.random() * 60;
        const sz    = 8  + Math.random() * 10;
        const dur   = (2.5 + Math.random() * 3).toFixed(1) + 's';
        const delay = (Math.random() * 4).toFixed(1) + 's';
        const dx    = (Math.random() * 60 - 30).toFixed(0) + 'px';
        return (
          <div key={i} className="particle" style={{
            left: `${l}%`, bottom: `${b}%`, width: sz + 'px', height: sz + 'px',
            background: 'transparent',
            color: isTarot
              ? `rgba(168,85,247,${0.3 + Math.random() * 0.5})`
              : `rgba(245,158,11,${0.3 + Math.random() * 0.5})`,
            fontSize: (8 + Math.random() * 8) + 'px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderRadius: 0, '--dur': dur, '--delay': delay, '--dx': dx
          }}>
            {items[i % items.length]}
          </div>
        );
      })}
    </>
  );
};

/* ── 언어 토글 ───────────────────────────────────────────────────── */
window.LangToggle = function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle-wrap">
      {['ko', 'en'].map(l => (
        <button
          key={l}
          className={`lang-btn ${lang === l ? 'active' : 'inactive'}`}
          onClick={() => setLang(l)}
        >
          {l === 'ko' ? '🇰🇷 KO' : '🌐 EN'}
        </button>
      ))}
    </div>
  );
};

/* ── 구분선 ──────────────────────────────────────────────────────── */
window.Divider = function Divider({ label, color }) {
  return (
    <div className="flex items-center gap-3 mb-5">
      <div className="flex-1 h-px" style={{ background: `linear-gradient(to right,transparent,${color || '#7c3aed'}44)` }}/>
      <span className="text-xs tracking-widest uppercase whitespace-nowrap" style={{ color: color || '#7c3aed' }}>{label}</span>
      <div className="flex-1 h-px" style={{ background: `linear-gradient(to left,transparent,${color || '#7c3aed'}44)` }}/>
    </div>
  );
};

/* ── 꿈 입력 화면 (타로/사주 공용) ──────────────────────────────── */
window.DreamInput = function DreamInput({ lang, theme, onSubmit, onBack }) {
  const L       = LANG[lang], t = theme;
  const [text, setText] = useState('');
  const [mood, setMood] = useState(null);
  const isTarot = t === 'tarot';
  const acc  = isTarot ? '#7c3aed' : '#f59e0b';
  const accL = isTarot ? '#c4b5fd' : '#fde68a';
  const bg   = isTarot
    ? 'radial-gradient(ellipse at 50% 0%,#150828 0%,#050510 65%)'
    : 'radial-gradient(ellipse at 50% 0%,#1a0a00 0%,#050510 65%)';
  const can  = text.trim().length > 10 && mood !== null;

  return (
    <div className="relative min-h-screen flex flex-col items-center justify-center px-5 py-10" style={{ background: bg }}>
      <Stars/>
      <div className="relative z-10 w-full max-w-xl mx-auto">

        <button onClick={onBack} className="mb-8 flex items-center gap-2 text-gray-500 hover:text-gray-300 text-sm transition-colors cursor-pointer">
          {L.back[t]}
        </button>

        <div className="text-center mb-8">
          <div className="mb-4 text-5xl" style={{ filter: `drop-shadow(0 0 22px ${acc})` }}>
            {isTarot ? '🔮' : '⛩️'}
          </div>
          <h2 className="font-black text-2xl md:text-3xl mb-2" style={{ color: accL, fontFamily: isTarot ? 'Cinzel,serif' : 'Noto Serif KR,serif' }}>
            {L.inTitle[t]}
          </h2>
          <p className="text-gray-500 text-sm leading-relaxed">{L.inDesc[t]}</p>
        </div>

        <div className="glass rounded-2xl mb-5" style={{ borderColor: `${acc}33` }}>
          <textarea
            value={text}
            onChange={e => setText(e.target.value)}
            rows={7}
            maxLength={1000}
            placeholder={L.inPlaceholder[t]}
            className="w-full bg-transparent text-white placeholder-gray-700 text-sm p-5 rounded-2xl"
            style={{ border: `1px solid ${acc}33`, borderRadius: '16px' }}
          />
          <div className="flex justify-between items-center px-5 pb-3">
            <span className="text-gray-700 text-xs">{L.inTip[t]}</span>
            <span className="text-gray-700 text-xs">{text.length}/1000</span>
          </div>
        </div>

        <p className="text-center text-gray-400 text-xs tracking-widest uppercase mb-4">{L.moodLbl[t]}</p>
        <div className="flex gap-4 mb-8">
          {[
            { val: 'good', icon: '😊', label: L.moodGood[t], grad: 'linear-gradient(135deg,#064e3b,#059669)', border: '#10b981' },
            { val: 'bad',  icon: '😨', label: L.moodBad[t],  grad: 'linear-gradient(135deg,#1e1b4b,#4c1d95)', border: '#7c3aed' }
          ].map(b => (
            <button
              key={b.val}
              className="mood-btn flex-1 py-5 rounded-xl font-bold text-sm"
              onClick={() => setMood(b.val)}
              style={{
                background:   mood === b.val ? b.grad : 'rgba(255,255,255,.04)',
                border:       `2px solid ${mood === b.val ? b.border : 'rgba(255,255,255,.08)'}`,
                boxShadow:    mood === b.val ? `0 0 22px ${b.border}66` : 'none',
                transform:    mood === b.val ? 'scale(1.04)' : 'scale(1)'
              }}
            >
              <div className="text-2xl mb-1">{b.icon}</div>
              <div style={{ color: mood === b.val ? 'white' : '#6b7280', fontSize: '.82rem' }}>{b.label}</div>
            </button>
          ))}
        </div>

        <button
          onClick={() => can && onSubmit(text, mood)}
          disabled={!can}
          className="w-full py-5 rounded-xl font-black text-base tracking-wide transition-all duration-300"
          style={{
            background: can ? `linear-gradient(135deg,${acc},${isTarot ? '#ec4899' : '#dc2626'})` : 'rgba(255,255,255,.07)',
            color:      can ? 'white' : 'rgba(255,255,255,.22)',
            boxShadow:  can ? `0 0 32px ${acc}55` : 'none',
            cursor:     can ? 'pointer' : 'not-allowed'
          }}
        >
          {L.submitBtn[t]}
        </button>
        {!can && (
          <p className="text-center text-gray-700 text-xs mt-3">
            {text.trim().length <= 10 ? L.validDream[t] : L.validMood[t]}
          </p>
        )}
      </div>
    </div>
  );
};

/* ── 로딩 화면 (타로/사주 공용) ─────────────────────────────────── */
window.Loading = function Loading({ lang, theme, phase, scriptPreview }) {
  const L      = LANG[lang], t = theme;
  const isTarot = t === 'tarot', acc = isTarot ? '#7c3aed' : '#f59e0b';
  const phases   = L.phases[t];
  const phaseIdx = phases.findIndex(p => p.key === phase);
  const current  = phases[Math.max(phaseIdx, 0)];
  return (
    <div className="relative min-h-screen flex flex-col items-center justify-center">
      <Stars/>
      <div className="relative z-10 text-center px-4 w-full max-w-sm">
        <div className="relative inline-flex items-center justify-center w-28 h-28 mb-8">
          <div className="spin-anim absolute inset-0 rounded-full" style={{
            border: `2px solid transparent`,
            borderTopColor: acc, borderRightColor: `${acc}44`,
            boxShadow: `0 0 22px ${acc}66`
          }}/>
          <div className="spin-anim absolute inset-3 rounded-full" style={{
            border: `1px solid transparent`,
            borderBottomColor: isTarot ? '#ec4899' : '#dc2626',
            animationDirection: 'reverse', animationDuration: '4s'
          }}/>
          <span style={{ fontSize: '2.8rem', filter: `drop-shadow(0 0 16px ${acc})` }}>{current.icon}</span>
        </div>
        <p className="text-white text-base font-medium mb-6 leading-relaxed">{current.label}</p>
        <div className="flex gap-3 justify-center mb-6">
          {phases.map((p, i) => (
            <div key={p.key} className="phase-dot" style={{
              background:  i <= phaseIdx ? acc : '#1f2937',
              opacity:     i === phaseIdx ? 1 : i < phaseIdx ? 0.65 : 0.3,
              transform:   i === phaseIdx ? 'scale(1.5)' : 'scale(1)',
              boxShadow:   i === phaseIdx ? `0 0 9px ${acc}` : 'none'
            }}/>
          ))}
        </div>
        {scriptPreview && (
          <div className="script-preview mx-auto mt-2 text-left" style={{ borderColor: isTarot ? 'rgba(124,58,237,.4)' : 'rgba(245,158,11,.4)' }}>
            <span style={{ color: isTarot ? '#a78bfa' : '#fbbf24', fontSize: '.65rem', display: 'block', marginBottom: '4px' }}>
              {L.cardRevealed[t]}
            </span>
            {scriptPreview}
          </div>
        )}
        <p className="text-gray-700 text-xs mt-10">{L.loadingTime[t]}</p>
      </div>
    </div>
  );
};

/* ── 무료 꿈 캔버스 ──────────────────────────────────────────────── */
window.DreamCanvas = function DreamCanvas({ url, mood, theme, lang }) {
  const L       = LANG[lang];
  const isTarot = theme === 'tarot';
  const acc     = isTarot ? '#7c3aed' : '#f59e0b';
  const accL    = isTarot ? '#c4b5fd' : '#fde68a';
  const [status, setStatus]   = useState('loading');
  const imgRef    = useRef(null);
  const retried   = useRef(false);
  const retryRef  = useRef(null);

  useEffect(() => {
    const img = imgRef.current;
    if (img && img.complete && img.naturalWidth > 0) setStatus('loaded');
  }, []);
  useEffect(() => () => clearTimeout(retryRef.current), []);
  useEffect(() => {
    if (status !== 'loading') return;
    const t = setTimeout(() => setStatus('timeout'), 120000);
    return () => clearTimeout(t);
  }, [status]);

  const handleError = () => {
    if (!retried.current) {
      retried.current = true;
      retryRef.current = setTimeout(() => {
        setStatus('loading');
        if (imgRef.current) imgRef.current.src = url + '&_r=1';
      }, 5000);
    } else { setStatus('error'); }
  };

  const showError = status === 'error' || status === 'timeout';

  return (
    <div style={{ marginBottom: '32px' }}>
      <div style={{
        textAlign: 'center', marginBottom: '14px',
        color: accL, fontSize: '.74rem', fontWeight: 700,
        letterSpacing: '.2em', textTransform: 'uppercase',
        textShadow: `0 0 18px ${acc}66`
      }}>
        {L.freeCanvasTitle}
      </div>
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '3/2',
        borderRadius: '18px', overflow: 'hidden',
        background: '#060412',
        boxShadow: status === 'loaded'
          ? `0 0 80px rgba(0,0,0,.9), 0 24px 80px rgba(0,0,0,.7), 0 0 50px ${acc}1a`
          : '0 0 20px rgba(0,0,0,.5)',
        transition: 'box-shadow 1.5s ease'
      }}>
        {status === 'loading' && (
          <div style={{
            position: 'absolute', inset: 0, zIndex: 1,
            background: 'linear-gradient(90deg,#060412 25%,#0f0a24 50%,#060412 75%)',
            backgroundSize: '200% 100%', animation: 'shimmerLoad 1.6s infinite'
          }}/>
        )}
        {status === 'loading' && (
          <div style={{
            position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', zIndex: 5, gap: '14px'
          }}>
            <div className="spin-anim" style={{
              width: '42px', height: '42px', borderRadius: '50%',
              border: `2px solid rgba(255,255,255,.05)`, borderTopColor: acc,
              boxShadow: `0 0 20px ${acc}55`
            }}/>
            <span style={{ color: `${acc}66`, fontSize: '.68rem', letterSpacing: '.12em' }}>
              {L.freeCanvasLoading}
            </span>
          </div>
        )}
        {showError && (
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse at 50% 35%,#0d0520,#060412)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2
          }}>
            <span style={{ fontSize: '5rem', filter: `drop-shadow(0 0 28px ${acc})` }}>
              {isTarot ? '🌙' : '✿'}
            </span>
          </div>
        )}
        <img
          ref={imgRef} src={url} alt="dream visualization"
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', zIndex: 3,
            opacity: status === 'loaded' ? 1 : 0,
            transition: 'opacity 1.8s ease',
            animation: status === 'loaded' ? 'revealCard 2.2s cubic-bezier(.4,0,.2,1) forwards' : 'none'
          }}
          onLoad={() => setStatus('loaded')}
          onError={handleError}
        />
      </div>
      <p style={{
        textAlign: 'center', marginTop: '10px',
        color: `${acc}55`, fontSize: '.62rem', letterSpacing: '.14em', fontStyle: 'italic'
      }}>
        {L.freeCanvasCaption}
      </p>
    </div>
  );
};

/* ── 마스터피스 카드 이미지 (사주 부적용 단일 대형 카드) ─────────── */
window.MasterpieceCard = function MasterpieceCard({ url, theme, mood, autoReveal, cardName }) {
  const isTarot = theme === 'tarot', acc = isTarot ? '#7c3aed' : '#f59e0b';
  const [status,    setStatus]    = useState('loading');
  const [unlocking, setUnlocking] = useState(false);
  const imgRef   = useRef(null);
  const retried  = useRef(false);
  const retryRef = useRef(null);
  const CARD_TIMEOUT = 180000;

  useEffect(() => {
    const img = imgRef.current;
    if (img && img.complete && img.naturalWidth > 0) setStatus('loaded');
  }, []);
  useEffect(() => {
    if (status !== 'loading') return;
    const t = setTimeout(() => setStatus('timeout'), CARD_TIMEOUT);
    return () => clearTimeout(t);
  }, [status]);
  useEffect(() => () => clearTimeout(retryRef.current), []);
  useEffect(() => {
    if (!autoReveal) return;
    const t = setTimeout(() => setUnlocking(true), 250);
    return () => clearTimeout(t);
  }, [autoReveal]);

  const handleError = () => {
    if (!retried.current) {
      retried.current = true;
      retryRef.current = setTimeout(() => {
        setStatus('loading');
        if (imgRef.current) imgRef.current.src = url + '&_r=1';
      }, 5000);
    } else { setStatus('error'); }
  };

  const glowAnim = isTarot
    ? (mood === 'good' ? 'goldPulse 3s ease-in-out infinite' : 'silverPulse 3s ease-in-out infinite')
    : (mood === 'good' ? 'sealGlow 3s ease-in-out infinite' : 'sealGlowRed 3s ease-in-out infinite');
  const borderColor = isTarot
    ? (mood === 'good' ? '#d4af37' : '#94a3b8')
    : (mood === 'good' ? '#f59e0b' : '#dc2626');
  const showSpin = status === 'loading';
  const showFall = status === 'error' || status === 'timeout';

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '2/3',
        borderRadius: '20px', overflow: 'hidden',
        background: isTarot ? '#07041a' : '#1a0400',
        border: `3px solid ${borderColor}`,
        animation: unlocking ? glowAnim : 'none',
        transition: 'border-color .6s ease'
      }}>
        {showSpin && <div className={isTarot ? 'panel-skeleton' : 'panel-skeleton-amber'} style={{ borderRadius: '17px' }}/>}
        {showFall && (
          <div style={{
            position: 'absolute', inset: 0, zIndex: 2,
            background: isTarot
              ? 'radial-gradient(ellipse at 50% 30%,#1e1b4b,#050510)'
              : 'radial-gradient(ellipse at 50% 30%,#450a0a,#050510)',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: '16px'
          }}>
            <span style={{ fontSize: '5rem', filter: `drop-shadow(0 0 32px ${acc})` }}>
              {isTarot ? '🔮' : '⛩️'}
            </span>
          </div>
        )}
        <img
          ref={imgRef} src={url} alt={cardName}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', zIndex: 3,
            opacity: status === 'loaded' ? 1 : 0,
            transition: 'opacity 1.2s ease',
            animation: unlocking && status === 'loaded' ? 'revealCard 1.8s cubic-bezier(.4,0,.2,1) forwards' : 'none'
          }}
          onLoad={() => setStatus('loaded')}
          onError={handleError}
        />
        {showSpin && (
          <div style={{
            position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', zIndex: 5, gap: '14px'
          }}>
            <div className="spin-anim" style={{
              width: '46px', height: '46px', borderRadius: '50%',
              border: `3px solid rgba(255,255,255,.07)`, borderTopColor: acc,
              boxShadow: `0 0 22px ${acc}66`
            }}/>
            <span style={{ color: `${acc}66`, fontSize: '.7rem', letterSpacing: '.1em' }}>
              {isTarot ? 'Painting your card...' : '부적 그리는 중...'}
            </span>
          </div>
        )}
        {!autoReveal && (
          <div className="blur-overlay" style={{ borderRadius: '17px' }}>
            <div style={{ textAlign: 'center', padding: '28px 20px' }}>
              <div style={{ fontSize: '3.8rem', marginBottom: '18px' }}>🔒</div>
              <div style={{
                color: 'rgba(255,255,255,.75)', fontSize: '1rem', fontWeight: 700,
                fontFamily: isTarot ? 'Cinzel,serif' : 'Noto Serif KR,serif'
              }}>
                {isTarot ? 'Your Card Awaits' : '나만의 부적 잠김'}
              </div>
            </div>
          </div>
        )}
      </div>
      <div style={{
        textAlign: 'center', marginTop: '14px',
        opacity: unlocking ? 1 : 0, transition: 'opacity .8s ease .5s'
      }}>
        <span style={{
          color: borderColor,
          fontFamily: isTarot ? 'Cinzel,serif' : 'Noto Serif KR,serif',
          fontWeight: 700, fontSize: '1.05rem', letterSpacing: '.14em',
          textShadow: `0 0 18px ${acc}, 0 0 35px ${acc}66`
        }}>
          {cardName}
        </span>
      </div>
    </div>
  );
};

/* ── 랜딩 화면 ───────────────────────────────────────────────────── */
window.Landing = function Landing({ lang, setLang, onEnter }) {
  const L                   = LANG[lang];
  const [hover, setHover]   = useState(null);
  const [ripple, setRipple] = useState(null);

  const click = (side, e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setRipple({ side, x: e.clientX - r.left, y: e.clientY - r.top });
    setTimeout(() => { setRipple(null); onEnter(side); }, 400);
  };

  return (
    <div style={{ position: 'relative', width: '100%', height: '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <Stars/>
      <LangToggle lang={lang} setLang={setLang}/>

      {/* 메인 배경 이미지 */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url('./Gemini_Generated_Image_7c2jnw7c2jnw7c2j.png')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
        filter: 'brightness(.78) saturate(1.2)',
        transition: 'filter .5s ease',
        zIndex: 0
      }}/>

      {/* 그라데이션 보정 오버레이 */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'radial-gradient(ellipse at 50% 100%,rgba(5,5,16,.85) 0%,rgba(5,5,16,.3) 60%,transparent 100%)'
      }}/>

      {/* 상단 헤더 */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 15,
        background: 'linear-gradient(to bottom,rgba(5,5,16,.95) 0%,rgba(5,5,16,.6) 55%,transparent 100%)',
        padding: '28px 20px 56px', textAlign: 'center', pointerEvents: 'none'
      }}>
        <p style={{ color: 'rgba(196,181,253,.65)', letterSpacing: '.38em', textTransform: 'uppercase', fontSize: '.68rem', marginBottom: '10px' }}>
          {L.tag}
        </p>
        <h1 className="oracle-title font-black tracking-widest" style={{ fontFamily: 'Cinzel,serif', fontSize: 'clamp(1.9rem,6vw,4.4rem)', lineHeight: 1.1 }}>
          DREAM ORACLE
        </h1>
        <p style={{ color: 'rgba(156,163,175,.6)', fontSize: '.78rem', marginTop: '12px', lineHeight: 1.65 }}>
          {L.tagline}
        </p>
      </div>

      {/* 좌우 패널 */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', zIndex: 10 }}>

        {/* 타로 패널 */}
        <div
          className="split-panel"
          onClick={e => click('tarot', e)}
          onMouseEnter={() => setHover('tarot')}
          onMouseLeave={() => setHover(null)}
        >
          <div style={{
            position: 'absolute', inset: 0,
            background: hover === 'tarot'
              ? 'linear-gradient(to right,rgba(88,28,220,.48) 0%,rgba(124,58,237,.18) 60%,transparent 100%)'
              : hover === 'saju'
              ? 'linear-gradient(to right,rgba(5,5,16,.65) 0%,rgba(5,5,16,.4) 100%)'
              : 'linear-gradient(to right,rgba(60,10,140,.22) 0%,transparent 80%)',
            transition: 'background .55s ease', pointerEvents: 'none'
          }}/>
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: '55%',
            background: 'linear-gradient(to top,rgba(88,28,220,.72) 0%,rgba(124,58,237,.2) 50%,transparent 100%)',
            opacity: hover === 'tarot' ? 1 : 0.45, transition: 'opacity .4s ease', pointerEvents: 'none'
          }}/>
          <Particle side="tarot"/>
          {ripple?.side === 'tarot' && (
            <div style={{
              position: 'absolute', left: ripple.x + 'px', top: ripple.y + 'px',
              width: '100px', height: '100px', borderRadius: '50%',
              background: 'rgba(168,85,247,.38)',
              animation: 'ripple .72s ease-out forwards', pointerEvents: 'none', zIndex: 30
            }}/>
          )}
          <div style={{ position: 'relative', textAlign: 'center', zIndex: 5, paddingBottom: '8px' }}>
            <div style={{
              fontSize: '3.4rem', marginBottom: '14px',
              filter: hover === 'tarot'
                ? 'drop-shadow(0 0 28px rgba(168,85,247,1)) drop-shadow(0 0 55px rgba(168,85,247,.65))'
                : 'drop-shadow(0 0 12px rgba(168,85,247,.6))',
              transition: 'filter .4s ease'
            }}>🔮</div>
            <div style={{
              fontFamily: 'Cinzel,serif',
              color: hover === 'tarot' ? 'rgba(196,181,253,.9)' : 'rgba(196,181,253,.55)',
              fontSize: '.72rem', letterSpacing: '.22em', textTransform: 'uppercase',
              marginBottom: '4px', transition: 'color .3s'
            }}>
              {L.tarotEnterLabel}
            </div>
            <h2 className="panel-title-tarot" style={{
              fontFamily: 'Cinzel,serif', color: 'white', fontWeight: 900,
              fontSize: 'clamp(1.3rem,2.8vw,2rem)', marginBottom: '6px'
            }}>
              {L.tarotPanelTitle}
            </h2>
            <p style={{
              color: hover === 'tarot' ? 'rgba(167,139,250,.85)' : 'rgba(167,139,250,.48)',
              fontSize: '.68rem', letterSpacing: '.14em', textTransform: 'uppercase',
              marginBottom: '22px', transition: 'color .3s'
            }}>
              {L.tarotSubLabel}
            </p>
            <button
              className="panel-cta btn-tarot px-7 py-3 rounded-xl font-black text-sm"
              style={{
                boxShadow: hover === 'tarot'
                  ? '0 0 38px rgba(124,58,237,.95),0 0 75px rgba(124,58,237,.42)'
                  : '0 0 15px rgba(124,58,237,.4)',
                transition: 'box-shadow .4s ease'
              }}
            >
              {L.tarotBtn}
            </button>
            <p style={{
              color: 'rgba(167,139,250,.38)', fontSize: '.6rem', marginTop: '12px',
              opacity: hover === 'tarot' ? 1 : 0.55, transition: 'opacity .3s'
            }}>
              {L.tarotFooter}
            </p>
          </div>
        </div>

        {/* 중앙 구분선 + 달 */}
        <div style={{ position: 'relative', width: '0', flexShrink: 0, zIndex: 20 }}>
          <div className="divider-line" style={{ left: 0 }}/>
          <div className="moon-center" style={{
            width: '54px', height: '54px', borderRadius: '50%',
            background: 'linear-gradient(135deg,#0d0520,#1a0533)',
            border: '1px solid rgba(168,85,247,.7)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 22px rgba(168,85,247,.6),0 0 44px rgba(245,158,11,.3)'
          }}>
            <span style={{ fontSize: '1.7rem', filter: 'drop-shadow(0 0 7px rgba(255,255,255,.8))' }}>🌙</span>
          </div>
        </div>

        {/* 사주 패널 */}
        <div
          className="split-panel"
          onClick={e => click('saju', e)}
          onMouseEnter={() => setHover('saju')}
          onMouseLeave={() => setHover(null)}
        >
          <div style={{
            position: 'absolute', inset: 0,
            background: hover === 'saju'
              ? 'linear-gradient(to left,rgba(146,64,14,.48) 0%,rgba(245,158,11,.16) 60%,transparent 100%)'
              : hover === 'tarot'
              ? 'linear-gradient(to left,rgba(5,5,16,.65) 0%,rgba(5,5,16,.4) 100%)'
              : 'linear-gradient(to left,rgba(100,40,5,.22) 0%,transparent 80%)',
            transition: 'background .55s ease', pointerEvents: 'none'
          }}/>
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: '55%',
            background: 'linear-gradient(to top,rgba(146,64,14,.68) 0%,rgba(245,158,11,.18) 50%,transparent 100%)',
            opacity: hover === 'saju' ? 1 : 0.45, transition: 'opacity .4s ease', pointerEvents: 'none'
          }}/>
          <Particle side="saju"/>
          {ripple?.side === 'saju' && (
            <div style={{
              position: 'absolute', left: ripple.x + 'px', top: ripple.y + 'px',
              width: '100px', height: '100px', borderRadius: '50%',
              background: 'rgba(245,158,11,.32)',
              animation: 'ripple .72s ease-out forwards', pointerEvents: 'none', zIndex: 30
            }}/>
          )}
          <div style={{ position: 'relative', textAlign: 'center', zIndex: 5, paddingBottom: '8px' }}>
            <div style={{
              fontSize: '3.4rem', marginBottom: '14px',
              filter: hover === 'saju'
                ? 'drop-shadow(0 0 28px rgba(245,158,11,1)) drop-shadow(0 0 55px rgba(245,158,11,.65))'
                : 'drop-shadow(0 0 12px rgba(245,158,11,.6))',
              transition: 'filter .4s ease'
            }}>⛩️</div>
            <div style={{
              fontFamily: 'Noto Serif KR,serif',
              color: hover === 'saju' ? 'rgba(252,211,77,.9)' : 'rgba(252,211,77,.55)',
              fontSize: '.72rem', letterSpacing: '.18em', textTransform: 'uppercase',
              marginBottom: '4px', transition: 'color .3s'
            }}>
              {L.sajuRoom}
            </div>
            <h2 className="panel-title-saju" style={{
              fontFamily: 'Noto Serif KR,serif', color: 'white', fontWeight: 900,
              fontSize: 'clamp(1.3rem,2.8vw,2rem)', marginBottom: '6px'
            }}>
              {L.sajuPanelTitle}
            </h2>
            <p style={{
              color: hover === 'saju' ? 'rgba(251,191,36,.85)' : 'rgba(251,191,36,.48)',
              fontSize: '.68rem', letterSpacing: '.14em', textTransform: 'uppercase',
              marginBottom: '22px', transition: 'color .3s'
            }}>
              {L.sajuSubLabel}
            </p>
            <button
              className="panel-cta btn-saju px-7 py-3 rounded-xl font-black text-sm"
              style={{
                boxShadow: hover === 'saju'
                  ? '0 0 38px rgba(245,158,11,.95),0 0 75px rgba(245,158,11,.42)'
                  : '0 0 15px rgba(245,158,11,.4)',
                transition: 'box-shadow .4s ease'
              }}
            >
              {L.sajuBtn}
            </button>
            <p style={{
              color: 'rgba(251,191,36,.38)', fontSize: '.6rem', marginTop: '12px',
              opacity: hover === 'saju' ? 1 : 0.55, transition: 'opacity .3s'
            }}>
              {L.sajuFooter}
            </p>
          </div>
        </div>
      </div>

      {/* 하단 면책 문구 */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 15,
        background: 'linear-gradient(to top,rgba(5,5,16,.78),transparent)',
        padding: '14px 20px', textAlign: 'center', pointerEvents: 'none'
      }}>
        <p style={{ color: 'rgba(75,85,99,.65)', fontSize: '.62rem', letterSpacing: '.08em' }}>
          {L.disclaimer}
        </p>
      </div>
    </div>
  );
};