@import"https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Noto+Serif+KR:wght@400;600;700&family=Quicksand:wght@500;700&family=Cinzel:wght@700&display=swap";:root{--bg-start: #2e1065;--bg-mid: #7c3aed;--bg-end: #ec4899;--glass: rgba(255, 255, 255, .15);--glass-border: rgba(255, 255, 255, .25);--gold: #fcd34d;--text-dark: #1e1b4b}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}body{background:linear-gradient(135deg,var(--bg-start) 0%,var(--bg-mid) 60%,var(--bg-end) 100%);color:#fff;font-family:"Noto Serif KR",serif;margin:0;padding:0;min-height:100vh;overflow-x:hidden;overflow-y:auto;display:flex;justify-content:center}#root{width:100%;max-width:500px;min-height:100vh;position:relative;z-index:10;display:flex;flex-direction:column;justify-content:center;padding-bottom:50px}.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--duration) ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.font-cute{font-family:Gaegu,cursive}.font-eng{font-family:Quicksand,sans-serif}.font-title{font-family:Cinzel,serif}.cute-font{font-family:Gaegu,cursive}.eng-font{font-family:Quicksand,sans-serif}.glass-box{background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:2px solid var(--glass-border);border-radius:24px;padding:25px;box-shadow:0 8px 32px #0003;margin:20px;animation:slideUp .6s cubic-bezier(.2,.8,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{transform:translateY(0)}}.fade-in{animation:slideUp .6s cubic-bezier(.2,.8,.2,1)}.magic-input{width:100%;padding:15px;margin-bottom:15px;background:#fffffff2;border:3px solid rgba(255,255,255,.5);border-radius:15px;color:var(--text-dark);text-align:center;font-weight:700;font-size:1.2rem;outline:none;transition:.3s}.magic-input::placeholder{color:#999;font-weight:400}.magic-input:focus{border-color:var(--gold);transform:scale(1.02);box-shadow:0 0 15px #fcd34d80}.btn-portal{width:100%;padding:18px;margin-bottom:12px;border-radius:20px;border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:flex-start;gap:15px;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px #0003}.btn-portal:active{transform:scale(.96)}.btn-portal:hover{border-color:var(--gold);background:#ffffff1a}.btn-destiny{background:linear-gradient(135deg,#a855f7,#6366f1)}.btn-mind{background:linear-gradient(135deg,#db2777,#f472b6)}.btn-color{background:linear-gradient(135deg,#059669,#34d399)}.btn-potion{background:linear-gradient(135deg,#3b82f6,#0ea5e9)}.btn-tarot{background:linear-gradient(135deg,#f97316,#fde047)}.btn-action{width:100%;padding:18px;background:linear-gradient(90deg,#f472b6,#a78bfa);border:none;border-radius:50px;color:#fff;font-family:Gaegu,cursive;font-weight:700;font-size:1.5rem;cursor:pointer;transition:.3s;box-shadow:0 5px 15px #f472b666;margin-top:10px}.btn-action:hover{transform:translateY(-3px)}.btn-action:disabled{opacity:.5;cursor:not-allowed;transform:none}.card-frame{width:260px;height:380px;margin:0 auto;background:linear-gradient(160deg,#1e1b4b,#000);border:4px solid var(--gold);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:0 0 50px #fcd34d66;animation:popIn .8s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.badge{position:absolute;top:-15px;background:var(--gold);color:#4c1d95;padding:5px 20px;border-radius:20px;font-weight:700;font-family:Quicksand;box-shadow:0 4px 10px #0000004d}.color-grid,.img-grid,.ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.color-circle,.img-card,.ing-item{border-radius:16px;padding:20px;cursor:pointer;transition:.2s;box-shadow:0 5px 15px #0000004d;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.color-circle:hover,.img-card:hover{transform:scale(1.05)}.img-card:active,.color-circle:active{transform:scale(.95)}.img-card{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);text-align:center}.ing-item{background:#ffffff1a;border:2px solid rgba(255,255,255,.2)}.ing-item.selected{background:#ffffff4d;border-color:var(--gold)}.tarot-spread-container{display:flex;justify-content:center;width:100%;max-width:100%;margin:0 auto;padding:0;box-sizing:border-box;overflow-x:hidden}.spread-slots{display:flex;justify-content:center;align-items:flex-start;width:100%;gap:2px;flex-wrap:nowrap;padding:0;box-sizing:border-box;margin:0 auto}.slot{width:162px;height:227px;border-radius:18px;background:#ffffff0d;border:3px dashed rgba(255,255,255,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0;flex-grow:0;box-sizing:border-box}.slot-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px}.slot-label{font-size:.9rem;color:#aaa;font-weight:600;margin-top:0}.card-inner-tarot{width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s;position:absolute;top:0;left:0}.card-face-tarot{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}.cf-back-tarot{background:linear-gradient(135deg,#4a5568,#2d3748);border:3px solid #718096;width:100%;height:100%;border-radius:14px;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.05) 10px,rgba(255,255,255,.05) 20px)}.cf-front-tarot{background:linear-gradient(160deg,#1a1a20,#000);border:3px solid var(--gold);transform:rotateY(180deg);padding:20px;width:100%;height:100%;border-radius:14px;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.drawn .card-inner-tarot{transform:rotateY(180deg)}.drawn{border:none!important;background:transparent!important}.loader-icon{font-size:3rem;animation:spin 2s infinite linear;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}