:root{font-family:Segoe UI,Noto Sans KR,system-ui,-apple-system,sans-serif;line-height:1.6;font-weight:400;--bg-cream: #FAF7F2;--bg-beige: #F5EBE0;--bg-darker-beige: #E3D5CA;--accent-latte: #C89F77;--accent-espresso: #A67C52;--text-coffee: #5D4E37;--text-light: #8B7355;--shadow-soft: rgba(93, 78, 55, .1);--shadow-medium: rgba(93, 78, 55, .15);--shadow-strong: rgba(93, 78, 55, .25);color:var(--text-coffee);background-color:var(--bg-cream);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;position:fixed}body{margin:0;display:flex;place-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0)}#root{width:100%;height:100%;overflow:hidden}h1{font-size:3.2em;line-height:1.1;color:var(--text-coffee)}button{border-radius:16px;border:none;padding:.8em 1.5em;font-size:1em;font-weight:600;font-family:inherit;background:var(--accent-latte);color:#fff;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px var(--shadow-soft)}button:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow-medium);background:var(--accent-espresso)}button:active{transform:translateY(0);box-shadow:0 2px 8px var(--shadow-soft)}a{font-weight:500;color:var(--accent-latte);text-decoration:none;transition:color .3s ease}a:hover{color:var(--accent-espresso)}.game-select{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0,#e3d5ca);padding:2vh 2vw;position:relative;overflow:hidden;animation:backgroundBreathe 6s ease-in-out infinite}@keyframes backgroundBreathe{0%,to{background:linear-gradient(135deg,#faf7f2,#f5ebe0,#e3d5ca)}50%{background:linear-gradient(135deg,#f5ebe0,#e3d5ca,#d5bdaf)}}.game-select:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(circle at 20% 50%,rgba(200,159,119,.08) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(166,124,82,.08) 0%,transparent 50%);pointer-events:none;animation:patternFloat 8s ease-in-out infinite}@keyframes patternFloat{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.select-container{max-width:900px;width:100%;position:relative;z-index:1;animation:fadeInUp .8s cubic-bezier(.4,0,.2,1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.main-title{font-size:clamp(32px,5vw,56px);font-weight:800;background:linear-gradient(135deg,#5d4e37,#8b7355,#5d4e37);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 100%;text-align:center;margin-bottom:1vh;text-shadow:2px 4px 8px rgba(93,78,55,.1);letter-spacing:-1px;animation:titleSlide .8s cubic-bezier(.4,0,.2,1) .2s backwards,titleShine 3s ease-in-out infinite 1s}@keyframes titleShine{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes titleSlide{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.subtitle{font-size:clamp(16px,2vw,22px);color:#8b7355;text-align:center;margin-bottom:3vh;font-weight:500;animation:titleSlide .8s cubic-bezier(.4,0,.2,1) .3s backwards,subtitlePulse 3s ease-in-out infinite 1.5s}@keyframes subtitlePulse{0%,to{opacity:.9;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2vw;padding:0;max-height:60vh}@media(max-width:768px){.game-grid{grid-template-columns:1fr;gap:25px}.main-title{font-size:40px}.subtitle{font-size:18px}}.game-card{background:linear-gradient(135deg,#fff,#f5ebe0);border:3px solid #C89F77;border-radius:24px;padding:3vh 2vw;cursor:pointer;transition:all .5s cubic-bezier(.4,0,.2,1);text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 24px #5d4e3714,0 2px 8px #5d4e370a;display:flex;flex-direction:column;justify-content:center;align-items:center}@keyframes borderPulse{0%,to{border-color:#c89f77}50%{border-color:#b38b6d}}.game-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(200,159,119,.1) 0%,transparent 70%);opacity:0;transition:opacity .5s ease;animation:cardGlow 4s ease-in-out infinite;pointer-events:none;border-radius:24px}@keyframes cardGlow{0%,to{opacity:0}50%{opacity:.3}}.game-card:nth-child(1){animation:cardFadeIn .6s cubic-bezier(.4,0,.2,1) .4s backwards,borderPulse 4s ease-in-out infinite 0s}.game-card:nth-child(1):after{animation-delay:0s}.game-card:nth-child(1) .game-icon{animation-delay:0s}.game-card:nth-child(1) .game-name{animation-delay:.2s}.game-card:nth-child(2){animation:cardFadeIn .6s cubic-bezier(.4,0,.2,1) .5s backwards,borderPulse 4s ease-in-out infinite 1s}.game-card:nth-child(2):after{animation-delay:1s}.game-card:nth-child(2) .game-icon{animation-delay:.5s}.game-card:nth-child(2) .game-name{animation-delay:.7s}.game-card:nth-child(3){animation:cardFadeIn .6s cubic-bezier(.4,0,.2,1) .6s backwards,borderPulse 4s ease-in-out infinite 2s}.game-card:nth-child(3):after{animation-delay:2s}.game-card:nth-child(3) .game-icon{animation-delay:1s}.game-card:nth-child(3) .game-name{animation-delay:1.2s}.game-card:nth-child(4){animation:cardFadeIn .6s cubic-bezier(.4,0,.2,1) .7s backwards,borderPulse 4s ease-in-out infinite 3s}.game-card:nth-child(4):after{animation-delay:3s}.game-card:nth-child(4) .game-icon{animation-delay:1.5s}.game-card:nth-child(4) .game-name{animation-delay:1.7s}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#c89f771a,#a67c5226);opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1);border-radius:24px}.game-card:hover:before{opacity:1}.game-card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 20px 48px #5d4e3726,0 8px 24px #5d4e371a,inset 0 0 0 3px #a67c524d;border-color:#a67c52!important;animation-play-state:paused}.game-card:active{transform:translateY(-8px) scale(.98);transition-duration:.1s}.game-icon{font-size:clamp(50px,6vw,90px);margin-bottom:1.5vh;position:relative;z-index:1;transition:transform .5s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 4px 12px rgba(93,78,55,.1));animation:iconFloat 3s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-2deg)}75%{transform:translateY(-4px) rotate(2deg)}}.game-card:hover .game-icon{transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 8px 20px rgba(93,78,55,.15));animation:none}.game-name{font-size:clamp(20px,2.5vw,32px);font-weight:700;color:#5d4e37;position:relative;z-index:1;transition:all .4s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;animation:namePulse 4s ease-in-out infinite}@keyframes namePulse{0%,to{color:#5d4e37}50%{color:#8b7355}}.game-card:hover .game-name{color:#a67c52;transform:scale(1.05);animation:none}@keyframes gentlePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.game-complete{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0,#e3d5ca);padding:2vh 2vw;position:relative;overflow:hidden;animation:fadeIn .6s ease-out}.game-complete:before{content:"";position:absolute;width:100%;height:100%;background-image:radial-gradient(circle at 30% 40%,rgba(200,159,119,.06) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(166,124,82,.06) 0%,transparent 50%);pointer-events:none}.complete-container{background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:32px;padding:3vh 4vw;max-width:650px;width:90%;max-height:90vh;text-align:center;box-shadow:0 20px 60px #5d4e3726,0 8px 24px #5d4e3714;position:relative;z-index:1;animation:scaleIn .7s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden}.complete-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(200,159,119,.04) 0%,transparent 70%);pointer-events:none}@keyframes scaleIn{0%{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}.complete-title{font-size:clamp(32px,5vw,52px);font-weight:900;background:linear-gradient(135deg,#5d4e37,#8b7355);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2vh;position:relative;z-index:1;animation:bounceIn .8s cubic-bezier(.4,0,.2,1) .2s backwards;letter-spacing:-.5px}@keyframes bounceIn{0%{opacity:0;transform:scale(.8) translateY(-20px)}60%{transform:scale(1.05) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}.score-display{margin-bottom:2vh;position:relative;z-index:1;animation:slideUp .8s cubic-bezier(.4,0,.2,1) .3s backwards}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-type{font-size:clamp(16px,2vw,22px);color:#8b7355;margin-bottom:1vh;font-weight:600;letter-spacing:.5px}.score{font-size:clamp(40px,7vw,70px);font-weight:900;background:linear-gradient(135deg,#c89f77,#a67c52);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;text-shadow:0 4px 12px rgba(166,124,82,.2);animation:scorePopUp .6s cubic-bezier(.4,0,.2,1) .5s backwards}@keyframes scorePopUp{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.qr-section{position:relative;z-index:1;animation:slideUp .8s cubic-bezier(.4,0,.2,1) .4s backwards}.qr-section h2{font-size:clamp(18px,2.5vw,26px);color:#5d4e37;margin-bottom:2vh;font-weight:700;letter-spacing:-.3px}.qr-code{background:#fff;padding:2vh;border-radius:20px;display:inline-block;margin-bottom:2vh;box-shadow:0 8px 24px #5d4e371a,0 2px 8px #5d4e370d;transition:all .4s cubic-bezier(.4,0,.2,1);border:2px solid #F5EBE0}.qr-code svg{width:clamp(200px,30vw,300px)!important;height:clamp(200px,30vw,300px)!important}.qr-code:hover{transform:scale(1.02);box-shadow:0 12px 32px #5d4e371f,0 4px 12px #5d4e3714;border-color:#e3d5ca}.expire-notice{color:#b8734f;font-size:clamp(14px,1.8vw,17px);margin-top:2vh;font-weight:600;animation:gentlePulse 2.5s ease-in-out infinite;text-shadow:0 2px 4px rgba(184,115,79,.1)}@keyframes gentlePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.02)}}.next-btn{margin-top:2vh;padding:1.5vh 5vw;font-size:clamp(16px,2.2vw,22px);font-weight:700;background:linear-gradient(135deg,#c89f77,#a67c52);color:#fff;border:none;border-radius:16px;cursor:pointer;transition:all .5s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #a67c5240,0 2px 8px #a67c5226;position:relative;z-index:1;letter-spacing:.5px}.next-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px #a67c5259,0 4px 16px #a67c5233;background:linear-gradient(135deg,#d5bdaf,#c89f77)}.next-btn:active{transform:translateY(-2px) scale(1);transition-duration:.1s}@media(max-width:768px){.complete-container{padding:40px 30px}.complete-title{font-size:40px}.score{font-size:56px}.qr-section h2{font-size:22px}.qr-code{padding:20px}.code{font-size:28px;letter-spacing:3px}.next-btn{padding:16px 50px;font-size:20px}}.reaction-game{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#faf7f2,#f5ebe0);animation:fadeIn .6s ease-out;overflow:hidden;padding:2vh 2vw}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-container{background:linear-gradient(135deg,#fff,#f5ebe0);border-radius:28px;padding:5vh 5vw;text-align:center;box-shadow:0 12px 40px #5d4e371f,0 4px 16px #5d4e3714;max-width:600px;width:90%;max-height:90vh;animation:slideUp .7s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.game-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(200,159,119,.05) 0%,transparent 70%);pointer-events:none}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.game-container h1{font-size:clamp(28px,4vw,42px);margin-bottom:2vh;color:#5d4e37;position:relative;z-index:1;font-weight:800;letter-spacing:-.5px}.game-container p{font-size:clamp(16px,2vw,20px);color:#8b7355;margin-bottom:3vh;line-height:1.7;position:relative;z-index:1;font-weight:500}.start-btn{padding:22px 70px;font-size:26px;background:linear-gradient(135deg,#c89f77,#a67c52);color:#fff;border:none;border-radius:18px;cursor:pointer;margin-bottom:20px;transition:all .5s cubic-bezier(.4,0,.2,1);font-weight:700;box-shadow:0 8px 24px #a67c5240,0 2px 8px #a67c5226;position:relative;z-index:1;letter-spacing:.5px}.start-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px #a67c5259,0 4px 16px #a67c5233;background:linear-gradient(135deg,#d5bdaf,#c89f77)}.start-btn:active{transform:translateY(-2px) scale(1);transition-duration:.1s}.back-btn{padding:18px 50px;font-size:20px;background:#e3d5ca;color:#5d4e37;border:2px solid transparent;border-radius:14px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);font-weight:600;box-shadow:0 4px 12px #5d4e3714;position:relative;z-index:1}.back-btn:hover{background:#d5bdaf;transform:translateY(-2px);box-shadow:0 8px 20px #5d4e371f;border-color:#5d4e371a}.back-btn:active{transform:translateY(0);transition-duration:.1s}.game-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .6s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.waiting-screen{background:linear-gradient(135deg,#d5bdaf,#c4b5a0);color:#fff;animation:breathe 3s ease-in-out infinite}@keyframes breathe{0%,to{background:linear-gradient(135deg,#d5bdaf,#c4b5a0)}50%{background:linear-gradient(135deg,#c4b5a0,#b8a792)}}.waiting-screen h2{font-size:54px;font-weight:800;margin-bottom:24px;text-shadow:2px 4px 12px rgba(0,0,0,.1);animation:gentlePulse 2s ease-in-out infinite}.waiting-screen p{font-size:26px;opacity:.95;font-weight:500;text-shadow:1px 2px 8px rgba(0,0,0,.08)}@keyframes gentlePulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.9}}.active-screen{background:linear-gradient(135deg,#c89f77,#6e4627);color:#fff;animation:activateScreen .3s cubic-bezier(.4,0,.2,1)}@keyframes activateScreen{0%{background:linear-gradient(135deg,#d5bdaf,#c4b5a0);transform:scale(1)}50%{transform:scale(1.02)}to{background:linear-gradient(135deg,#c89f77,#b38b6d);transform:scale(1)}}.active-screen h2{font-size:80px;font-weight:900;animation:bounceCall .6s cubic-bezier(.4,0,.2,1) infinite;text-shadow:4px 6px 20px rgba(0,0,0,.15);letter-spacing:2px}@keyframes bounceCall{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.08) translateY(-10px)}}.too-early{position:relative}.too-early:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(200,120,80,.08) 0%,transparent 70%);pointer-events:none}.too-early h1{color:#b8734f;animation:shake .5s cubic-bezier(.4,0,.2,1)}.too-early p{color:#c89f77;font-weight:600}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media(max-width:768px){.game-container{padding:50px 40px}.game-container h1{font-size:34px}.game-container p{font-size:18px}.start-btn{padding:18px 50px;font-size:22px}.waiting-screen h2{font-size:42px}.waiting-screen p{font-size:20px}.active-screen h2{font-size:60px}}#root{width:100%;height:100%;margin:0;padding:0;text-align:center;overflow:hidden}