:root{--color-primary: #0064FF;--color-primary-dark: #004FCC;--color-success: #31C48D;--color-warning: #FDBA74;--color-bg: #F9FAFB;--color-bg-dark: #F3F4F6;--color-dark: #1F2937;--color-text: #374151;--color-text-muted: #9CA3AF;--color-border: #E5E7EB;--color-white: #FFFFFF;--color-shadow: rgba(0, 0, 0, .15);--font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}#root{height:100%}button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;-webkit-tap-highlight-color:transparent}button:active{transform:scale(.97)}.app{height:100%;max-width:480px;margin:0 auto;position:relative;overflow:hidden}.screen{height:100%;display:flex;flex-direction:column;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.header{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0;background:#f9fafbd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10}.header-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--color-dark);border-radius:var(--radius-full);transition:background .15s}.header-back:hover{background:var(--color-bg-dark)}.header-title{font-size:17px;font-weight:700;color:var(--color-dark)}.header-right{min-width:36px;display:flex;justify-content:flex-end}.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:var(--radius-md);font-size:15px;font-weight:600;transition:all .15s ease}.btn-large{height:56px;font-size:17px;border-radius:var(--radius-lg)}.btn-primary{background:var(--color-primary);color:var(--color-white);box-shadow:0 2px 8px #0064ff40;width:100%}.btn-primary:hover{background:var(--color-primary-dark)}.btn-primary:disabled{background:#b0c4de;box-shadow:none}.btn-secondary{background:var(--color-white);color:var(--color-dark);border:1px solid var(--color-border);flex:1}.btn-secondary:hover{background:var(--color-bg-dark)}.btn-ghost{color:var(--color-text-muted);width:100%}.btn-ghost:hover{color:var(--color-text)}.main-menu{justify-content:center;align-items:center;padding:32px;background:linear-gradient(180deg,#F0F6FF 0%,var(--color-bg) 50%)}.menu-content{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:40px}.menu-logo{text-align:center;position:relative}.menu-logo-shadow{width:80px;height:80px;margin:0 auto 16px;background:var(--color-dark);border-radius:20px;transform:rotate(15deg);opacity:.1;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:rotate(15deg) translateY(0)}50%{transform:rotate(15deg) translateY(-8px)}}.menu-title{font-size:42px;font-weight:800;letter-spacing:-1px;color:var(--color-dark)}.menu-subtitle{font-size:16px;color:var(--color-text-muted);margin-top:4px;font-weight:500}.menu-actions{width:100%;display:flex;flex-direction:column;gap:12px}.menu-stats{text-align:center}.stats-text{font-size:13px;color:var(--color-text-muted)}.level-select{background:var(--color-bg)}.level-grid{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:24px 16px;align-content:start;overflow-y:auto}.level-btn{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--color-white);border:2px solid var(--color-border);border-radius:var(--radius-md);transition:all .15s}.level-btn.completed{border-color:var(--color-primary);background:#f0f6ff}.level-btn.locked{background:var(--color-bg-dark);border-color:transparent;opacity:.5}.level-number{font-size:18px;font-weight:700;color:var(--color-dark)}.level-btn.locked .level-number{font-size:14px}.level-stars{margin-top:2px}.level-select-footer{padding:16px;text-align:center;font-size:13px;color:var(--color-text-muted);flex-shrink:0}.game-screen{background:linear-gradient(180deg,#EDF4FF 0%,var(--color-bg) 40%,#F9FAFB 100%)}.game-target-area{flex-shrink:0;display:flex;justify-content:center;padding:12px 16px 8px}.game-object-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:grab;touch-action:none;min-height:0}.game-object-area:active{cursor:grabbing}.game-object-container{display:flex;align-items:center;justify-content:center;pointer-events:none}.game-shadow-container{display:flex;align-items:center;justify-content:center;pointer-events:none;transform:scaleY(.3) perspective(200px) rotateX(45deg);opacity:.6}.game-match-area{flex-shrink:0;padding:0 24px 8px}.game-actions{flex-shrink:0;display:flex;gap:10px;padding:12px 16px 24px}.btn-hint{flex:1;height:48px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;font-weight:600;color:var(--color-dark)}.btn-hint:disabled{opacity:.4}.btn-reset{height:48px;width:48px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:18px}.btn-check{flex:1.5;height:48px;background:var(--color-primary);color:var(--color-white);border-radius:var(--radius-md);font-size:15px;font-weight:700;box-shadow:0 2px 8px #0064ff33}.btn-check:disabled{background:#b0c4de;box-shadow:none}.tutorial-toast{position:absolute;bottom:140px;left:50%;transform:translate(-50%);background:var(--color-dark);color:var(--color-white);padding:10px 20px;border-radius:var(--radius-full);font-size:14px;font-weight:500;white-space:nowrap;animation:toastIn .3s ease,toastOut .3s ease 2.5s forwards;z-index:20}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0}}.result-screen{justify-content:center;align-items:center;padding:32px;background:#f9fafbf2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.result-card{width:100%;max-width:340px;background:var(--color-white);border-radius:var(--radius-xl);padding:40px 28px 32px;box-shadow:0 8px 32px #00000014;display:flex;flex-direction:column;align-items:center;gap:24px;animation:cardIn .4s ease;position:relative;overflow:hidden}@keyframes cardIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.result-confetti{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#0064ff,#31c48d,#fcd34d,#f87171,#0064ff);background-size:200% 100%;animation:confettiSlide 2s linear infinite}@keyframes confettiSlide{0%{background-position:200% 0}to{background-position:0% 0}}.result-title{font-size:26px;font-weight:800;color:var(--color-dark)}.result-stars{padding:8px 0}.result-stats{display:flex;gap:32px}.result-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-label{font-size:13px;color:var(--color-text-muted)}.stat-value{font-size:20px;font-weight:700;color:var(--color-dark)}.result-actions{width:100%;display:flex;flex-direction:column;gap:12px}.result-secondary-actions{display:flex;gap:10px}.settings-screen{background:var(--color-bg)}.settings-list{padding:16px;display:flex;flex-direction:column}.settings-item{display:flex;align-items:center;justify-content:space-between;padding:16px 0}.settings-label{font-size:16px;font-weight:500;color:var(--color-dark)}.settings-label.settings-muted{color:var(--color-text-muted)}.settings-value{font-size:15px;color:var(--color-text-muted)}.settings-divider{height:1px;background:var(--color-border);margin:8px 0}.toggle{width:52px;height:32px;border-radius:var(--radius-full);background:#d1d5db;position:relative;transition:background .2s ease;flex-shrink:0}.toggle.on{background:var(--color-primary)}.toggle-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--color-white);box-shadow:0 1px 4px #00000026;transition:transform .2s ease}.toggle.on .toggle-knob{transform:translate(20px)}