:root{--primary-color: #6B2D2D;--primary-dark: #4A1A1A;--secondary-color: #CFA131;--bg-color: #020B14;--surface-color: #0A1624;--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-radius-xl: 32px;--border-radius-lg: 20px;--border-radius-md: 16px;--shadow-sm: 0 4px 12px rgba(0, 0, 0, .4);--shadow-md: 0 12px 32px rgba(0, 0, 0, .6);--shadow-lg: 0 24px 48px rgba(0, 0, 0, .8);--transition-smooth: all .4s cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,Noto Sans KR,sans-serif;background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.6}.app-container{max-width:480px;margin:0 auto;min-height:100vh;background-color:var(--bg-color);position:relative;overflow-x:hidden;padding-bottom:90px;box-shadow:0 0 40px #00000008}.heading-jumbo{font-family:Nanum Myeongjo,serif;font-size:36px;font-weight:700;letter-spacing:-1px;color:var(--text-primary);line-height:1.2}.heading-card{font-family:Nanum Myeongjo,serif;font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}.text-accent{color:var(--primary-color);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:12px}.mosaic-card{background-color:var(--surface-color);border-radius:var(--border-radius-lg);padding:28px;box-shadow:0 8px 32px #00000040;transition:var(--transition-smooth);margin-bottom:24px;cursor:pointer;position:relative;overflow:hidden;border:none}.mosaic-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#8b0000,#b22222);opacity:0;transition:var(--transition-smooth)}.mosaic-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-md)}.mosaic-card:hover:before{opacity:1}.btn-mosaic{background:#ffffff0d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:100px;padding:11px 24px;font-size:16px;font-weight:700;letter-spacing:.5px;cursor:pointer;width:100%;transition:var(--transition-smooth);display:flex;justify-content:center;align-items:center;gap:12px;box-shadow:0 4px 16px #ffffff26}.btn-mosaic:hover{transform:translateY(-2px);box-shadow:0 12px 24px #ffffff40}.btn-mosaic:active{transform:translateY(1px) scale(.98)}.btn-mosaic.completed{background:#2c8c9933;border:1px solid #2C8C99;color:#2c8c99;box-shadow:0 8px 20px #2c8c9933}.top-fixed-bar{position:fixed;top:0;max-width:480px;width:100%;height:calc(env(safe-area-inset-top,54px) + 80px);background-color:#020b14a6;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);z-index:100;border-bottom:1px solid rgba(255,255,255,.05)}.bottom-tab-nav{position:fixed;bottom:0;max-width:480px;width:100%;background-color:#020b14a6;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom,12px)) 0;box-shadow:0 -10px 40px #0000004d;border-top:1px solid rgba(255,255,255,.05);z-index:100}.tab-item{display:flex;flex-direction:column;align-items:center;color:#e5e7eb;cursor:pointer;transition:var(--transition-smooth);font-size:11px;font-weight:600;gap:4px}.tab-item.active{color:var(--primary-color);transform:translateY(-2px)}.hero-gradient-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#0003,#000c);z-index:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes ripple{0%{transform:scale(.8);opacity:1}to{transform:scale(2);opacity:0}}.animate-fade-in-up{animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) forwards}.splash-screen{position:fixed;top:-50px;bottom:-50px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:9999;opacity:1;overflow:hidden;transition:opacity .5s ease-out}@keyframes heartbeatGlow{0%{box-shadow:0 0 10px #ff7a0066;border-color:#ff7a0066;transform:scale(1)}15%{box-shadow:0 0 25px #ff7a00cc;border-color:#ff7a00cc;transform:scale(1.02)}30%{box-shadow:0 0 10px #ff7a0066;border-color:#ff7a0066;transform:scale(1)}45%{box-shadow:0 0 35px #ff7a00;border-color:#ff7a00;transform:scale(1.03)}to{box-shadow:0 0 10px #ff7a0066;border-color:#ff7a0066;transform:scale(1)}}.heartbeat-active{animation:heartbeatGlow 1.2s infinite ease-in-out;border:1px solid rgba(255,122,0,.5)!important}.splash-screen.fade-out{opacity:0;pointer-events:none}.splash-logo{max-width:15%;max-height:10%;object-fit:contain;opacity:0;animation:splashFadeIn 1s cubic-bezier(.16,1,.3,1) .8s forwards,splashSpin 2s cubic-bezier(.25,1,.5,1) 2s forwards;transform-style:preserve-3d}@keyframes splashFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes splashSpin{0%{transform:perspective(800px) rotateY(0) scale(1)}to{transform:perspective(800px) rotateY(720deg) scale(1)}}@keyframes floatParticle{0%{opacity:0;transform:translate(0) scale(0)}10%{opacity:.9;transform:translate(calc(var(--travel-x) * .1),calc(var(--travel-y) * .1)) scale(var(--scale))}to{opacity:0;transform:translate(var(--travel-x),var(--travel-y)) scale(calc(var(--scale) * 1.5))}}.floating-heart-particle{animation:floatParticle ease-out forwards}.toast-notification{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:#0a1624e6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;padding:12px 24px;border-radius:100px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px #00000080;border:1px solid rgba(255,255,255,.2);z-index:1000;animation:toastFadeInUp .3s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}@keyframes toastFadeInUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.toast-fade-out{animation:toastFadeOut .3s ease-in forwards}@keyframes toastFadeOut{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10px)}}