/* 고트 타로 — 옻칠 바탕·금박, 촛불처럼 은은한 빛 */
.tarot body,body.tarot{background:var(--ink);background-image:radial-gradient(900px 520px at 50% -8%,var(--glow) 0%,transparent 70%)}
.t-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:46px 0 18px}
.t-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(38px,7vw,64px);line-height:1.08;margin:0;color:var(--gold-hi);letter-spacing:.01em}
.t-hero h1 small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.42em;color:var(--muted);margin-bottom:12px;font-weight:500}
.t-hero p{color:var(--muted);font-size:16px;max-width:40ch;margin:14px 0 0}
.t-heroart{position:relative;height:300px}
.t-heroart .hc{position:absolute;left:50%;top:50%;width:150px;transform-origin:50% 120%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.t-heroart .hc svg{width:100%;height:auto;display:block}
.t-heroart .hc.h1{transform:translate(-50%,-50%) rotate(-16deg) translateX(-62px)}
.t-heroart .hc.h2{transform:translate(-50%,-56%) rotate(0deg);z-index:2;animation:float 6s ease-in-out infinite}
.t-heroart .hc.h3{transform:translate(-50%,-50%) rotate(16deg) translateX(62px)}
@keyframes float{50%{transform:translate(-50%,-60%) rotate(0deg)}}
.t-glow{position:absolute;inset:10% 18%;background:radial-gradient(closest-side,rgba(233,194,122,.22),transparent);filter:blur(10px)}
/* 섹션 */
.t-sec{margin:26px 0;background:linear-gradient(180deg,var(--art1),var(--art2));border:1px solid var(--line);border-radius:18px;padding:24px}
.t-sec h2{font-size:24px;margin:0 0 6px}.t-sec .lede{color:var(--muted);margin:0 0 18px}
/* 오늘의 한 장 */
.daily{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.flip{width:170px;aspect-ratio:140/240;perspective:1200px;cursor:pointer;border:0;background:none;padding:0}
.flip .in{position:relative;width:100%;height:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .f{transform:rotateY(180deg)}.flip svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.flip:not(.on):hover .in{transform:translateY(-6px) rotate(-1deg)}
.flip:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:12px}
.dtext h3{font-family:var(--display);font-size:26px;margin:0;color:var(--gold-hi)}
.dtext .kw{color:var(--ember-hi);font-weight:700;margin:6px 0}.dtext p{margin:6px 0;max-width:52ch}
.dtext .adv{color:var(--muted);font-size:14px;border-left:2px solid var(--gold);padding-left:10px}
.tag-rv{display:inline-block;font-size:12px;background:#a3352b;color:#fff;border-radius:4px;padding:1px 7px;vertical-align:4px;margin-left:6px;font-family:var(--body)}
/* 단계 표시 */
.steps{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap}
.steps span{font-size:12.5px;padding:5px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.steps span.on{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}.steps span.done{color:var(--gold);border-color:var(--gold)}
/* 1단계 질문 */
.q textarea{font:inherit;font-size:17px;width:100%;min-height:92px;resize:vertical;color:var(--text);background:var(--ink);border:1px solid var(--line2);border-radius:12px;padding:14px}
.q textarea:focus{outline:2px solid var(--gold);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.chips button{font:inherit;font-size:14px;border:1px solid var(--line2);background:transparent;color:var(--text);border-radius:999px;padding:8px 14px;cursor:pointer}
.chips button[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
.examples{font-size:13px;color:var(--muted);margin:8px 0 0}.examples button{font:inherit;font-size:13px;background:none;border:0;color:var(--gold);cursor:pointer;padding:0 6px 0 0;text-decoration:underline dotted}
/* 2단계 셔플 */
.stage{position:relative;min-height:340px;display:grid;place-items:center}
.shuffle{position:relative;width:120px;height:206px}
.shuffle .sc{position:absolute;inset:0}.shuffle svg{width:100%;height:auto;display:block}
.shuffle.run .sc:nth-child(odd){animation:riffleL 1.1s ease-in-out 2}.shuffle.run .sc:nth-child(even){animation:riffleR 1.1s ease-in-out 2}
@keyframes riffleL{0%,100%{transform:none}35%{transform:translateX(-78px) rotate(-10deg)}65%{transform:translateX(-30px) rotate(-3deg)}}
@keyframes riffleR{0%,100%{transform:none}35%{transform:translateX(78px) rotate(10deg)}65%{transform:translateX(30px) rotate(3deg)}}
.stage .hint{position:absolute;bottom:4px;left:0;right:0;text-align:center;color:var(--muted);font-family:var(--display);font-size:17px}
/* 부채꼴 */
.fanwrap{position:relative}
.fan{position:relative;height:330px;margin:0 auto;max-width:900px}
.fan .fc{position:absolute;left:50%;top:34px;width:58px;margin-left:-29px;transform-origin:50% 720px;cursor:pointer;border:0;background:none;padding:0;transition:transform .25s ease,opacity .35s ease,filter .25s}
.fan .fc svg{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.fan .fc:hover,.fan .fc:focus-visible{filter:brightness(1.3) drop-shadow(0 0 6px rgba(233,194,122,.8));outline:none;margin-top:-16px}
.fan .fc.gone{opacity:0;pointer-events:none}
.fan.ribbon{height:auto;display:flex;overflow-x:auto;padding:26px 16px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.fan.ribbon .fc{position:relative;left:auto;bottom:auto;margin:0 -30px 0 0;flex:none;width:62px;transform:none!important;scroll-snap-align:center}
.fan.ribbon .fc:hover,.fan.ribbon .fc:focus-visible{transform:translateY(-14px)!important;margin-top:0}
.fan.ribbon .fc.gone{display:none}
.picked{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:18px 0 6px}
.picked .slot{aspect-ratio:140/240;border:1px dashed var(--line2);border-radius:8px;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:13px;position:relative}
.picked .slot svg{width:100%;height:auto;display:block;animation:drop .45s ease}
.picked .slot b{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);border-radius:999px;font-size:11px;padding:0 6px;z-index:1}
@keyframes drop{from{transform:translateY(-40px) scale(.9);opacity:0}}
.pickbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pickbar .cnt{font-family:var(--display);font-size:18px;color:var(--gold-hi)}
/* 3단계 배치 */
.spread{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start}
.cross{position:relative;width:100%;max-width:500px;aspect-ratio:1/1.05;margin:0 auto}
.cross .cs{position:absolute;width:14%;aspect-ratio:140/240;perspective:900px;opacity:0;transform:translateY(-30px);transition:opacity .5s,transform .5s}
.cross.dealt .cs{opacity:1;transform:none}
.cross .cs .in{position:relative;width:100%;height:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.cross .cs.on .in{transform:rotateY(180deg)}
.cross .cs .f,.cross .cs .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.cross .cs .f{transform:rotateY(180deg)}
.cross .cs svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.cross .cs i{position:absolute;top:-10px;left:-8px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--ink);font:700 11px/20px var(--body);text-align:center;font-style:normal;z-index:3}
.cross .p1{left:23%;top:38.5%}.cross .p2{left:23%;top:38.5%;z-index:2}.cross .p2 .in{transform:rotate(90deg)}.cross .p2.on .in{transform:rotate(90deg) rotateY(180deg)}
.cross .p3{left:23%;top:64.5%}.cross .p4{left:2%;top:38.5%}.cross .p5{left:23%;top:12.5%}.cross .p6{left:44%;top:38.5%}
.cross .p7{left:78%;top:76.5%}.cross .p8{left:78%;top:51%}.cross .p9{left:78%;top:25.5%}.cross .p10{left:78%;top:0}
.cross .p2 i{left:auto;right:-8px;top:auto;bottom:-10px}
.reveal1{border:1px solid var(--line2);border-radius:14px;padding:16px;background:var(--lacquer)}
.reveal1 .pos{font-size:12px;letter-spacing:.14em;color:var(--gold)}.reveal1 h3{font-family:var(--display);font-size:24px;margin:4px 0;color:var(--gold-hi)}
.reveal1 .kw{color:var(--ember-hi);font-weight:700}.reveal1 p{margin:6px 0}
.lockbox{margin-top:14px;border:1px solid var(--gold);border-radius:14px;padding:16px;background:linear-gradient(180deg,rgba(233,194,122,.1),rgba(233,194,122,.02));display:grid;gap:10px}
.lockbox b{font-family:var(--display);font-size:19px;color:var(--gold-hi)}.lockbox ul{margin:0;padding-left:1.1em;font-size:14px;color:var(--text)}
.lockbox .price{font-family:var(--mono);font-size:28px;color:var(--gold-hi)}
.t-how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.t-how div{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--soft)}.t-how b{color:var(--gold-hi);font-family:var(--display);font-size:17px}.t-how p{margin:6px 0 0;color:var(--muted);font-size:14px}
@media (max-width:760px){
  .t-hero{grid-template-columns:1fr;padding-top:30px}.t-heroart{height:250px}.t-heroart .hc{width:118px}
  .daily{grid-template-columns:1fr;justify-items:center;text-align:center}.dtext .adv{text-align:left}
  .spread{grid-template-columns:1fr}.picked{grid-template-columns:repeat(5,1fr);gap:10px 8px}.t-how{grid-template-columns:1fr}
  .t-sec{padding:18px 14px}
}
@media (prefers-reduced-motion:reduce){.flip .in,.cross .cs .in,.fan .fc,.cross .cs{transition:none}.shuffle.run .sc,.t-heroart .hc{animation:none!important}}