/* 타로 — 어둡고 신비로운 분위기 (타로 페이지에만 적용) */
:root:not([data-tarot]),:root[data-theme="dark"],:root[data-theme="light"]{
  --bg:#120C22; --surface:#1E1533; --ink:#F1E9FA; --muted:#B6A8CC;
  --accent:#E8C77E; --accent-ink:#1A1030; --soft:rgba(232,199,126,.12); --line:#3A2E55; color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#120C22; --surface:#1E1533; --ink:#F1E9FA; --muted:#B6A8CC;
  --accent:#E8C77E; --accent-ink:#1A1030; --soft:rgba(232,199,126,.12); --line:#3A2E55}}
body{background:
  radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,230,170,.9),transparent 60%),
  radial-gradient(1px 1px at 78% 9%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.5px 1.5px at 63% 31%,rgba(255,230,170,.7),transparent 60%),
  radial-gradient(1px 1px at 30% 52%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(1.5px 1.5px at 88% 64%,rgba(255,230,170,.7),transparent 60%),
  radial-gradient(1px 1px at 8% 79%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1px 1px at 50% 92%,rgba(255,230,170,.6),transparent 60%),
  radial-gradient(120% 60% at 50% 0%,#2A1748 0%,transparent 70%),
  #120C22;background-attachment:fixed}
.brand b{color:var(--accent)}
.intro .hearts{color:var(--accent);text-shadow:0 0 24px rgba(232,199,126,.6)}
.res-top h1{color:var(--accent)}

.tr-guide{display:flex;flex-direction:column;gap:4px;text-align:center;margin-block:18px 18px}
.tr-guide b{font-family:var(--display);font-size:1.35rem}
.tr-guide span{color:var(--muted);font-size:.92rem;min-height:1.5em}

/* 뽑은 카드 자리 */
.tr-slots{display:flex;justify-content:center;gap:14px;margin-bottom:10px;perspective:900px}
.tr-slot{display:flex;flex-direction:column;align-items:center;gap:6px}
.tr-slot small{font-size:.8rem;color:var(--accent);letter-spacing:.06em}
.tr-slot-card{position:relative;width:76px;aspect-ratio:2/3.3;border-radius:10px;border:1.5px dashed rgba(232,199,126,.45);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.tr-slots .tr-slot:only-child .tr-slot-card{width:118px}
.tr-slot.on .tr-slot-card{border-color:transparent;animation:trDrop .45s ease-out}
.tr-slot.flip .tr-slot-card{transform:rotateY(180deg)}
.tr-side{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tr-side.tr-front{transform:rotateY(180deg)}
.tr-slot .tr-front .tr-emo{font-size:1.7rem}
.tr-slot .tr-front .tr-nm{font-size:.72rem}
.tr-slot .tr-front .tr-no{font-size:.65rem}
.tr-slots .tr-slot:only-child .tr-front .tr-emo{font-size:2.6rem}
.tr-slots .tr-slot:only-child .tr-front .tr-nm{font-size:.95rem}

/* 펼친 카드 22장 */
.tr-fan{position:relative;height:215px;margin-top:6px;overflow:visible}
.tr-fc{position:absolute;left:50%;top:22px;width:58px;height:96px;margin-left:-29px;padding:0;border:0;background:none;border-radius:8px;
  transform-origin:50% 270%;transform:rotate(var(--a)) translateY(0);transition:transform .55s cubic-bezier(.3,.7,.3,1) var(--d),opacity .35s,filter .2s;cursor:pointer}
.tr-fc .tr-back{position:absolute;inset:0;border-radius:8px}
.tr-fan.stack .tr-fc{transform:rotate(0) translateY(36px);transition:none}
.tr-fan.shuffle .tr-fc{transform:rotate(0) translateY(36px);animation:trShuf .26s ease-in-out 3 alternate}
.tr-fan.spread .tr-fc:hover:not(.taken){transform:rotate(var(--a)) translateY(-14px);filter:brightness(1.15);transition-delay:0s}
.tr-fc.taken{opacity:0;transform:rotate(var(--a)) translateY(-60px) scale(.8);pointer-events:none;transition-delay:0s}
.tr-fan.done .tr-fc{opacity:.25;pointer-events:none}
.tr-fan.done .tr-fc.taken{opacity:0}

.tr-back{background:
  radial-gradient(circle at 50% 50%,rgba(255,215,140,.95) 0 7%,transparent 8%),
  radial-gradient(circle at 50% 50%,transparent 0 20%,rgba(255,215,140,.55) 21% 23%,transparent 24%),
  radial-gradient(circle,rgba(255,215,140,.35) 1px,transparent 1.6px) 0 0/10px 10px,
  linear-gradient(160deg,#4A1F5D,#2A1440 60%,#1A0E30);
  border:2px solid #C9A25E;box-shadow:inset 0 0 0 3px #2A1440,inset 0 0 0 4px rgba(201,162,94,.6),0 4px 14px rgba(0,0,0,.45)}

/* 카드 앞면 */
.tr-face,.tr-side.tr-front{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12% 6%;background:linear-gradient(180deg,#FFF9EE,#F1E2C6);border:2px solid #C9A25E;box-shadow:inset 0 0 0 4px #FFF9EE,inset 0 0 0 5px rgba(201,162,94,.7);color:#3A2230;text-align:center;border-radius:10px}
.tr-no{font-family:var(--display);font-size:.85rem;letter-spacing:.08em;color:#9A7438}
.tr-emo{font-size:2.3rem;line-height:1}
.tr-nm{font-family:var(--display);font-size:.9rem;line-height:1.25;word-break:keep-all}
.tr-face.big{width:min(56%,210px);aspect-ratio:2/3.3;margin:6px auto 8px;border-radius:18px;box-shadow:inset 0 0 0 6px #FFF9EE,inset 0 0 0 7px rgba(201,162,94,.7),0 0 40px rgba(232,199,126,.25);animation:trIn .6s ease-out}
.tr-face.big .tr-no{font-size:1.1rem}
.tr-face.big .tr-emo{font-size:4.6rem}
.tr-face.big .tr-nm{font-size:1.3rem}

/* 3장 결과 */
.tr-face[hidden],.tr-row[hidden],.tr-ans[hidden]{display:none}
.tr-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 6px;animation:trIn .6s ease-out}
.tr-rc{display:flex;flex-direction:column;align-items:center;gap:8px}
.tr-rc .tr-face{width:100%;aspect-ratio:2/3.3;box-shadow:inset 0 0 0 4px #FFF9EE,inset 0 0 0 5px rgba(201,162,94,.7),0 0 26px rgba(232,199,126,.2)}
.tr-rc .tr-emo{font-size:2.2rem}
.tr-rc small{color:var(--accent);font-size:.85rem;letter-spacing:.06em}
.tr-pos{color:var(--accent);font-size:.8rem;letter-spacing:.04em}

.tr-done{margin:0;padding:12px 14px;border-radius:12px;background:var(--soft);color:var(--accent);font-size:.92rem}
.tr-note{margin:4px 0 0;text-align:center;color:var(--muted);font-size:.9rem}
.tr-note.small{font-size:.78rem;margin:0}
.sec .tr-lucky{display:flex;gap:10px;align-items:center}
.tr-lucky-box{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--soft);border:1.5px solid var(--accent)}
.tr-lucky-box small{font-size:.82rem;color:var(--accent);font-weight:700}
.tr-buy{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;border:1.5px solid var(--line)}
.tr-buy:hover{border-color:var(--accent)}
.tr-buy b{font-family:var(--display);font-size:1.05rem}
.tr-buy span{grid-column:1;font-size:.85rem;color:var(--muted)}
.tr-buy i{grid-column:2;grid-row:1/span 2;font-style:normal;color:var(--accent);font-size:1.2rem}
.tr-ans{align-self:center;font-family:var(--display);font-size:2.6rem;line-height:1;padding:14px 34px;border-radius:99px;animation:trIn .6s ease-out}
.tr-ans.yes{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 30px rgba(232,199,126,.45)}
.tr-ans.no{background:#F1E9FA;color:#1A1030}
.tr-ans.maybe{background:var(--soft);color:var(--accent);border:1.5px solid var(--accent)}
@keyframes trIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes trDrop{from{opacity:0;transform:translateY(40px) scale(.8)}to{opacity:1;transform:none}}
@keyframes trShuf{from{transform:rotate(-3deg) translate(calc(var(--j) * -1),36px)}to{transform:rotate(3deg) translate(var(--j),36px)}}
@media (prefers-reduced-motion:reduce){.tr-fc,.tr-slot-card{transition:none!important}.tr-fan.shuffle .tr-fc{animation:none}.tr-face.big,.tr-row,.tr-ans{animation:none}}