:root{color-scheme:dark;--ground:#0c1421;--surface:#182333;--ink:#f4f2ed;--muted:#b2bdca;--gold:#dfbd78;--accent:#ffac92;--dark:#0b1019;--line:#354457;font-family:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{background:#070d16;scroll-behavior:smooth}body{margin:0;color:var(--ink);font-size:16px;line-height:1.7}button,textarea{font:inherit}button,a,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{touch-action:manipulation}button:disabled{opacity:.55}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}h1,h2,p{margin:0}h1:focus{outline:none}h1,h2{word-break:keep-all;letter-spacing:-.045em}h1{font-size:30px;line-height:1.32;font-weight:760}h2{font-size:23px;line-height:1.45;font-weight:720}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.review-bar{max-width:560px;margin:0 auto;padding:10px 20px;font-size:12px;color:#b2bdca;background:#111b2a;text-align:center}.shell{max-width:560px;margin:auto;min-height:calc(100svh - 40px);background:var(--ground);padding-bottom:32px}.app-header{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#101b2b}.brand{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;letter-spacing:-.055em}.brand img{width:34px;height:34px}.quiet{background:none;border:0;color:var(--muted);padding:10px 0;font-size:13px;min-height:44px}.content{padding:30px 24px 0}.subtitle{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.8}.intro-preview{display:flex;align-items:center;justify-content:center;gap:36px;padding:28px 0 24px}.preview-note{font-size:15px;color:var(--muted);line-height:1.85}.preview-note strong{display:block;font-size:18px;font-weight:650;color:var(--gold);margin-bottom:8px}.preview-stack{position:relative;width:116px;height:178px;flex:none}.preview-stack::before{content:'';position:absolute;inset:0;background:#183046;border:2px solid #756440;border-radius:9px;transform:rotate(-9deg)}.preview-stack>.card-back{transform:rotate(5deg)}
/* 실제 카드 물체의 테두리와 금박 문양. 사주요기의 기존 로고를 그대로 사용한다. */
.card-back{height:100%;width:100%;background:#112536;color:var(--gold);border:2px solid #b99759;border-radius:9px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;isolation:isolate;overflow:hidden}.card-back::before{content:'';position:absolute;inset:7px;border:1px solid #9e8454;border-radius:5px;pointer-events:none}.card-back::after{content:'';position:absolute;width:125%;height:125%;border:1px solid #3d5261;border-radius:50%;transform:rotate(35deg);z-index:-1}.card-back img{width:56%;height:auto;object-fit:contain;filter:none}.card-brand{font-size:12px;letter-spacing:.035em;font-weight:600;margin-top:5px}.card-corner{position:absolute;top:10px;left:11px;font-size:12px;color:#e0bf79}.card-corner.bottom{top:auto;left:auto;bottom:10px;right:11px;transform:rotate(180deg)}
.field-label{display:block;font-weight:650;font-size:15px;margin:8px 0 10px}.question-box{width:100%;display:block;min-height:108px;resize:vertical;background:var(--surface);color:var(--ink);border:1px solid #47576a;border-radius:12px;padding:16px 17px;font-size:16px;line-height:1.7}.question-box::placeholder{color:#a5b2c1}.suggestions{display:flex;gap:8px;margin:12px 0 24px;flex-wrap:wrap}.suggestions button{min-height:44px;padding:6px 12px;border:0;border-radius:8px;background:#1b293a;color:var(--muted);font-size:13px}.primary{border:0;border-radius:12px;min-height:54px;width:100%;padding:14px 20px;background:var(--accent);color:#241810;font-size:16px;font-weight:750}.primary:hover:not(:disabled){background:#ffb9a3}.helper{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}.error{margin:10px 0;color:#ffd1bd;font-size:14px}.scene{animation:arrive .25s ease-out}.scene-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.scene-nav .quiet{padding:0;min-height:44px}.question-summary{margin:18px 0 22px;padding:17px 19px;background:var(--surface);border-radius:12px;font-size:16px;word-break:keep-all;overflow-wrap:anywhere}.small-label{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:6px}.pick-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 0 10px}.pick-head strong{font-size:15px}.pick-head span{font-size:14px;color:var(--gold);font-variant-numeric:tabular-nums}.deck{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px;margin:18px 0 24px;padding:9px 0;perspective:900px}.deck-card{aspect-ratio:3/5;padding:0;background:none;border:0;position:relative;min-width:0;transition:transform .25s,opacity .25s}.deck-card .card-back{border-radius:6px}.deck-card .card-back::before{inset:4px;border-radius:3px}.deck-card .card-brand,.deck-card .card-corner{display:none}.deck-card .card-back img{width:76%}.deck-card:hover:not([aria-pressed=true]){transform:translateY(-7px) rotate(-2deg)}.deck-card[aria-pressed=true]{transform:translateY(-7px);opacity:.46}.deck-card[aria-pressed=true]::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:#fff;font-weight:700}.deck.shuffling .deck-card:not([aria-pressed=true]){animation:shuffle .24s ease-in-out 2;animation-delay:calc(var(--index)*10ms)}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 24px}.slot{min-width:0;text-align:center}.slot-art{height:78px;width:48px;border-radius:5px;background:#1a293a;margin:0 auto 10px;display:grid;place-items:center;font-size:20px;color:#9eafbe}.slot-art.filled{background:none}.slot-art .card-back{border-radius:5px}.slot-art .card-back::before{inset:3px}.slot-art img{width:80%}.slot-art .card-brand,.slot-art .card-corner{display:none}.slot-name{display:block;color:var(--muted);font-size:12px}.slot-choice{display:block;color:var(--ink);font-size:13px;min-height:22px}.status{font-size:14px;color:var(--muted);min-height:24px;margin:0 0 14px}.reveals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 24px}.flip-card{width:100%;aspect-ratio:3/5;border:0;padding:0;background:none;perspective:900px;position:relative}.flip-inner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.65,.3,1)}.flip-card.is-open .flip-inner{transform:rotateY(180deg)}.card-side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:9px}.card-front{background:#e8dbc0;color:#182638;border:2px solid #d4bd90;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:8px;gap:3px;overflow:hidden}.card-front svg{width:100%;height:auto;max-height:105px}.card-front strong{font-size:17px;font-weight:750}.card-front small{font-size:11px;letter-spacing:.07em;color:#28394b}.flip-card .card-back .card-brand{font-size:11px}.position-name{display:block;margin-bottom:13px;color:var(--muted);font-size:13px;text-align:center}.reveal-name{font-size:14px;color:var(--gold);margin-top:10px;text-align:center;min-height:24px}.reveal-copy{text-align:center;color:var(--muted);font-size:14px;margin:0 0 24px}.reading-intro{display:flex;align-items:center;gap:16px;margin:26px 0 18px}.reading-intro img{width:52px;height:52px}.reading-intro p{font-size:14px;color:var(--muted)}.reading-intro strong{display:block;color:var(--ink);font-size:16px}.sample-note{padding:12px 16px;background:#233144;border-radius:9px;font-size:13px;color:#c3ceda;margin-bottom:24px}.answer{padding:24px;background:#223044;border-radius:16px;margin-bottom:28px}.answer strong{font-size:22px;line-height:1.55;font-weight:730;letter-spacing:-.035em;display:block}.answer p{color:#d3dbe6;font-size:15px;margin-top:13px}.reading-part{margin-bottom:28px}.reading-part h2{font-size:19px;margin-bottom:12px}.reading-part p{color:#cbd3df;font-size:16px;line-height:1.9}.reading-part p+p{margin-top:14px}.reading-point{color:#ffccb0;font-weight:650}.recap{padding:21px;background:#192c32;border-radius:14px;margin:24px 0;color:#dce8e6}.recap strong{color:#e2cc99}.end-actions{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:18px}.footer-note{padding:28px 24px 0;color:#9aabba;font-size:12px;text-align:center}.footer-note a{text-decoration:underline;text-underline-offset:3px}.lab-info{max-width:560px;margin:18px auto;padding:0 24px 28px;color:#a9b5c5;font-size:13px;line-height:1.9}.lab-info strong{color:#e1c88e}.lab-info p+p{margin-top:10px}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shuffle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(4deg)}}
@media(max-width:359px){.content{padding:26px 20px 0}.app-header{padding-inline:20px}.intro-preview{gap:25px;padding-block:24px}.preview-stack{width:96px;height:148px}.preview-note{font-size:14px}.preview-note strong{font-size:16px}.deck{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.reveals{gap:9px}.position-name{font-size:12px}.flip-card .card-brand{display:none}.card-front strong{font-size:15px}.card-front small{font-size:10px}.answer{padding:20px}.answer strong{font-size:20px}}@media(min-width:900px){.shell{margin-top:22px;border-radius:22px;overflow:hidden}.review-bar{border-radius:0 0 10px 10px}.content{padding-inline:30px}.intro-preview{gap:50px}.preview-stack{width:126px;height:190px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.flip-card.is-open .flip-inner{transform:rotateY(180deg)}}

/* 78장 전체를 탐색하는 두 줄 카드판. 가로 넘김은 이 영역 안에만 한정한다. */
.deck-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#657486 #142131;padding:12px 3px 16px;min-width:0}
.deck{grid-template-columns:none;grid-template-rows:repeat(2,114px);grid-auto-flow:column;grid-auto-columns:70px;gap:12px;width:max-content;margin:0;padding:0}
.deck-card{width:70px;height:114px;aspect-ratio:auto;scroll-snap-align:start}.deck-card img{pointer-events:none;user-select:none}
.deck-browse{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0}.deck-browse p{color:var(--muted);font-size:13px}.deck-pages{display:flex;align-items:center;gap:10px;flex:none}.deck-pages output{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums;min-width:64px;text-align:center}.deck-pages button{width:44px;height:44px;border:1px solid #47576a;border-radius:8px;background:#182333;color:var(--ink);font-size:20px}.deck-pages button:disabled{opacity:.35}
.card-front strong{font-size:15px;text-align:center;line-height:1.3;word-break:keep-all}.card-front small{font-size:10px;letter-spacing:0;text-align:center;line-height:1.2}.reveal-name{overflow-wrap:anywhere}
@media(min-width:600px){.deck{grid-template-rows:repeat(2,134px);grid-auto-columns:84px}.deck-card{width:84px;height:134px}}
@media(max-width:359px){.deck-browse{align-items:flex-start}.deck-browse p{max-width:96px}.deck-pages{gap:5px}.card-front{padding:6px}.card-front strong{font-size:13px}}

/* 사용자가 요청한 몽환적인 밤하늘은 자체 Canvas 장면으로 표현한다. UI 패널은 불투명하게 유지한다. */
html,body{background:#080b1c}#night-sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.shell,.review-bar,.lab-info{position:relative;z-index:1}.shell{background:rgba(9,12,27,.54)}.app-header{background:rgba(15,20,38,.88)}.header-actions{display:flex;align-items:center;gap:14px}.header-actions .quiet{font-size:12px;white-space:nowrap}.brand{font-size:21px}.card-front{padding:0;gap:0;background:#e7d9b6}.card-front .tarot-art{display:block;width:100%;height:100%;object-fit:contain}.deck-viewport{background:rgba(8,12,28,.26);border-radius:8px}.question-box,.question-summary,.sample-note,.answer,.recap{background-color:#182333}
@media(max-width:359px){.header-actions{gap:10px}.app-header{gap:8px}.brand{font-size:20px;gap:5px}.brand img{width:29px;height:29px}}

/* 카드의 고정된 뜻, 질문에 적용한 해석, 행동을 서로 다른 문단으로 읽는다. */
.card-reading{margin-bottom:38px}.card-reading h2{margin-bottom:16px}.card-reading h2 small{font-size:14px;color:var(--muted);font-weight:500;margin-left:6px;white-space:nowrap}.card-reading h3{margin:0 0 8px;font-size:14px;line-height:1.6;font-weight:650;color:var(--gold)}.card-reading .card-meaning{padding:16px 18px;background:#182333;border-radius:10px;margin-bottom:20px}.card-reading .card-meaning p{color:var(--ink);font-size:15px;line-height:1.8}.card-reading .card-context p,.card-reading .card-advice p{color:var(--ink);font-size:16px;line-height:1.85;overflow-wrap:anywhere}.card-reading .card-advice{margin-top:20px;padding-left:16px;border-left:3px solid var(--gold)}.card-reading .card-advice h3{color:var(--ink)}