@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Jua&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--paper:#f7f4ed;--ink:#273d35;--green:#31634a;--muted:#83877c;--lime:#e3edb7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans KR',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ed9c58;outline-offset:5px}header{height:100px;max-width:1300px;margin:auto;padding:0 56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dddcd3}.brand{text-decoration:none;color:var(--ink);font-size:23px;font-weight:900;display:flex;align-items:center;gap:12px}.brand-icon{font-size:39px;color:var(--green)}.brand-en{font-size:9px;letter-spacing:1.6px;font-weight:600;border-left:1px solid #c8cabc;padding-left:16px;margin-left:6px}.sound{border:1px solid #d5d8cb;border-radius:24px;padding:10px 16px;background:transparent;color:var(--ink);font-size:14px}.sound span{margin-left:6px;font-size:11px}main{min-height:calc(100vh - 180px)}.screen{max-width:1000px;margin:auto;padding:49px 20px 30px;text-align:center}.hidden{display:none!important}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:700;color:var(--green);display:flex;align-items:center;justify-content:center;gap:8px}.eyebrow i{width:6px;height:6px;background:var(--green);border-radius:50%}h1{font-weight:900;font-size:60px;line-height:1.25;letter-spacing:-3.5px;margin:22px 0 18px;position:relative}h1 em{font-style:normal;color:var(--green);position:relative}h1 em:after{content:'';position:absolute;height:9px;background:#dce7b5;bottom:1px;left:0;right:0;z-index:-1}.title-spark{position:absolute;font-size:59px;color:#e2a85d;transform:rotate(10deg);margin:13px 0 0 24px}.intro{font-size:13px;color:#7c8076;line-height:1.9}.mobile{display:none}.select-heading{display:flex;justify-content:space-between;max-width:790px;margin:36px auto 14px;font-size:12px;font-weight:600}.select-heading span:last-child{font-size:10px;letter-spacing:2px;color:#94968a}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:790px;margin:auto}.character{position:relative;border:1px solid #dcded0;border-radius:16px;background:#efeee5;padding:20px 15px 15px;color:var(--ink);transition:.2s;overflow:hidden}.character:nth-child(2){background:#eeebe5}.character:nth-child(3){background:#eaece4}.character.selected{border:2px solid var(--green);padding:19px 14px 14px;background:#edf0df;box-shadow:0 5px 0 #3062470b}.character:hover{transform:translateY(-4px)}.char-num{position:absolute;left:17px;top:14px;font-size:10px;color:#8f9583;letter-spacing:1px}.check{position:absolute;right:14px;top:12px;width:22px;height:22px;border:1px solid #cbd0bd;border-radius:50%;display:grid;place-items:center;color:transparent;font-size:12px}.selected .check{background:var(--green);color:white;border-color:var(--green)}.character svg{width:100%;height:165px;margin:10px 0 5px}.char-name{display:block;font-size:16px;font-weight:800}.char-desc{display:block;font-size:10px;color:#7e8778;margin-top:6px}.primary{border:0;background:var(--green);color:#fff;border-radius:12px;width:320px;max-width:100%;padding:18px 24px;display:flex;justify-content:center;align-items:center;gap:32px;margin:25px auto 0;font-size:14px;font-weight:700;box-shadow:0 4px 0 #214933;transition:background .2s,transform .1s}.primary:hover{background:#244f3a}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #214933}.primary span{font-size:21px;font-weight:400}.how{display:flex;justify-content:center;gap:12px;margin-top:19px;font-size:10px;color:#8a8b7f;align-items:center}kbd{font:9px 'DM Sans',sans-serif;border:1px solid #cdd0c2;border-radius:4px;padding:3px 6px;margin-right:4px;color:#7a8272}.stage-preview{border-top:1px dashed #d5d8c9;display:flex;justify-content:center;gap:24px;align-items:center;max-width:790px;margin:34px auto 0;padding-top:21px;font-size:11px}.stage-preview b{font:10px 'DM Sans';color:#98a28b;margin-right:7px}.stage-preview small{font-size:10px;background:#e8ebdc;padding:3px 7px;border-radius:5px;margin-left:7px}.stage-preview i{font-style:normal;color:#b5bba8}footer{max-width:1188px;margin:auto;border-top:1px solid #dedfd3;height:80px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#929486;padding:0 10px}footer>span:last-child{font-size:9px;letter-spacing:1.2px}.footer-star{color:var(--green);font-size:21px;margin-left:18px}.game-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px;color:#8b927d}.text-button{border:0;background:none;color:#75816e;font-size:12px;padding:10px}.game-heading{display:flex;align-items:center;justify-content:space-between;text-align:left;margin:28px 0 22px}.game-heading .eyebrow{justify-content:flex-start}h2{font-size:36px;letter-spacing:-1.5px;margin:6px 0}.game-heading p{font-size:12px;color:#858b7a;margin:5px 0}.score{text-align:right}.score small{display:block;font-size:9px;letter-spacing:2px;color:#839075}.score strong{font-size:35px;font-weight:600}.play-area{height:330px;background:#e9eddd;border:1px solid #d8dfcb;border-radius:22px;position:relative;overflow:hidden;touch-action:manipulation;cursor:pointer;user-select:none}.play-area svg{height:100%;width:100%;display:block}.play-decor{position:absolute;left:12%;top:20%;font-size:48px;color:#b5c596}.combo{position:absolute;right:7%;top:28%;display:flex;flex-direction:column;color:#618056}.combo strong{font-size:44px;font-weight:500}.combo span{font-size:9px;letter-spacing:2px}.stage-tag{position:absolute;bottom:17px;left:22px;font-size:9px;letter-spacing:2px;color:#8a9b76}#face-stage{height:100%}.target-ring{fill:none;stroke:#f8fbef;stroke-width:2.5}.target-dot{fill:#41694b;stroke:#fbfff0;stroke-width:3}.approach-ring{fill:none;stroke:#467254;stroke-width:2;opacity:.85}#judgment{position:absolute;top:18px;left:0;right:0;font-weight:900;font-size:27px;letter-spacing:2px;color:var(--green);pointer-events:none;text-shadow:0 2px 0 #fff}.judge-animate{animation:pop .3s ease-out}.progress-row{display:flex;align-items:center;gap:15px;margin-top:16px;font-size:10px;color:#809072}.progress{height:4px;background:#e2e7d6;flex:1;border-radius:3px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:#578259;transition:width .25s}.beat-track{height:74px;position:relative;overflow:hidden;margin-top:10px}.beat-caption{position:absolute;top:4px;left:0;font-size:8px;letter-spacing:2px;color:#8a937e}.track-line{height:1px;background:#d0d8c2;position:absolute;left:0;right:0;top:42px}.hit-zone{position:absolute;width:32px;height:32px;border:1px solid #8aa075;border-radius:50%;left:calc(50% - 16px);top:26px;background:#e4ead5}.note{position:absolute;top:33px;width:18px;height:18px;background:var(--green);border-radius:50%;transform:translateX(-50%);border:3px solid var(--paper)}.hit-label{position:absolute;top:62px;font-size:8px;letter-spacing:2px;left:calc(50% - 8px);color:#668452}.hit-button{margin-top:5px;width:390px;gap:8px}.hit-button kbd{color:#d6e4ca;border-color:#6c8a6d;margin-left:auto}.game-hint{font-size:10px;color:#88947a;margin:16px 0}.transition{position:absolute;inset:0;background:#e9edddf5;display:flex;align-items:center;justify-content:center;flex-direction:column;animation:slide .4s ease-out;z-index:5}.transition>span{font-size:48px;color:#648753}.transition h3{font-size:30px;letter-spacing:-1px;margin:8px}.transition p{font-size:12px;color:#83916e}.burst{animation:burst .4s ease-out forwards;transform-box:fill-box;transform-origin:center}.result-icon{font-size:60px;color:var(--green);margin-bottom:24px}#result-face svg{height:150px}.result-stats{display:flex;justify-content:center;gap:55px;margin:15px auto 30px}.result-stats small{display:block;color:#86917b;font-size:11px}.result-stats strong{display:block;font-size:30px;margin-top:10px}#choose-again{margin-top:15px}@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes burst{to{transform:translateY(-25px) scale(0);opacity:0}}@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}@media(min-width:1100px){#game{max-width:850px}}@media(max-width:600px){header{height:76px;padding:0 22px}.brand{font-size:20px;gap:7px}.brand-en{display:none}.brand-icon{font-size:30px}.screen{padding:32px 20px 25px}h1{font-size:43px;letter-spacing:-2.5px}.title-spark{font-size:37px;margin-left:8px}.intro{font-size:12px}.mobile{display:block}.characters{gap:9px}.character{padding:19px 5px 15px;border-radius:12px}.character.selected{padding:18px 4px 14px}.character svg{height:118px;margin-top:15px}.char-num{left:11px;top:12px;font-size:8px}.check{right:8px;top:9px;width:18px;height:18px}.char-name{font-size:14px}.char-desc{font-size:8px;line-height:1.5;min-height:24px;padding:0 5px}.select-heading{font-size:11px;margin-top:28px}.primary{width:100%}.how{gap:7px;font-size:9px}.stage-preview{gap:10px;font-size:10px;margin-top:28px}.stage-preview small{display:none}.stage-preview b{margin-right:3px}.stage-preview i{font-size:9px}footer{margin:0 20px;font-size:9px;height:65px}footer>span:last-child{font-size:7px;letter-spacing:.4px}.footer-star{margin-left:6px}.game-heading{margin-top:18px}h2{font-size:29px}.game-heading p{font-size:10px;max-width:210px;line-height:1.7}.score strong{font-size:27px}.play-area{height:300px}.combo{right:6%;top:12%}.combo strong{font-size:32px}.game-top{font-size:9px}.result-stats{gap:30px}.result-stats strong{font-size:25px}#result h1{font-size:40px}}