@import"https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500;700;900&display=swap";html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Noto Sans KR,Malgun Gothic,sans-serif;background:#254246}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:4px solid #0369a1;outline-offset:2px}button:active:not(:disabled){transform:translateY(2px)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#123e3ba6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:grid;place-items:center;padding:2vw}.dialog{width:min(760px,85vw);max-height:94dvh;overflow:auto;background:#fff8e8;border:7px solid #ddc393;border-radius:28px;padding:3vh 3vw;box-shadow:0 20px 70px #14292299;color:#3d4e40}.dialog h2{font:clamp(28px,3vw,42px) Jua,sans-serif;margin:1vh 0 2vh}.dialog li{font-size:clamp(16px,1.5vw,23px);padding:.7vh 0;line-height:1.6}.dialog p{font-size:clamp(13px,1.1vw,18px)}.dialog .primary{width:100%;font-size:clamp(20px,1.7vw,28px);margin-top:1vh;min-height:64px;background:linear-gradient(#ffce6d,#ec963a);box-shadow:0 4px #946124;border:2px solid #fff2c0;border-radius:1.2vh;color:#503917;font-weight:900;padding:1vh .5vw}.results{display:flex;gap:10px;margin:20px 0}.results>div{flex:1;border:3px solid;border-radius:15px;display:grid;text-align:center;padding:15px}.results strong{font-size:36px}@media(max-height:600px){.dialog{padding:2vh 3vw}.dialog li{padding:0}}*{box-sizing:border-box}.workshop{height:100dvh;display:flex;flex-direction:column;background:url(/assets/bg.png) center/cover;position:relative;overflow:hidden;color:#463a2d}.workshop-header{height:15%;flex-shrink:0;display:flex;justify-content:center;align-items:center;position:relative;padding:1vh 2vw}.sign{background:linear-gradient(#936b42,#533d2d);border:5px ridge #d4ae70;border-radius:1.6vh;box-shadow:0 5px #352b2488;padding:.8vh 2.5vw;color:#fff1c4}.sign h1{font:clamp(28px,3.3vw,56px) Jua,sans-serif;margin:0;text-shadow:0 3px #4a3525}.tools{position:absolute;right:1vw;top:1vh;display:flex;gap:.4vw;font-size:clamp(10px,.9vw,15px)}.tools button,.tools>span{background:#fff6dfdf;color:#345053;border:1px solid #cab88a;border-radius:1vh;padding:.5vh .6vw;white-space:nowrap}.work-stage{height:37%;flex-shrink:0;position:relative;padding:1vh 3vw;min-height:0}.work-lanes{height:46%;display:grid;grid-template-columns:repeat(var(--players),minmax(0,1fr));gap:.8vw;padding:0 1vw 1vh;flex-shrink:0;min-height:0}.work-panel{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;gap:.8vh;border:5px solid var(--tint);border-radius:2vh;background:linear-gradient(120deg,#fff9e9f5,#e5d8bdf2);box-shadow:inset 0 0 0 2px #fff9,0 5px #4b3c3166;padding:1vh .8vw;isolation:isolate}.panel-label{display:flex;align-items:center;justify-content:space-between;gap:.3vw;border-radius:1vh;background:linear-gradient(#fff2,#0001),var(--tint);color:#fff;padding:.4vh .5vw;min-height:4.5vh;margin:-1.1vh -.65vw .5vh;font-weight:900;font-size:clamp(12px,1.15vw,19px);box-shadow:0 3px #5d574755}.panel-label b{font:clamp(20px,2vw,34px) Jua}.panel-label small{font-size:.72em}.work-panel button{touch-action:manipulation}.prompt-box,.sequence{background:#fff8e9;border:2px solid #c9b994;border-radius:1vh;padding:.7vh .5vw;text-align:center;font-weight:700;font-size:clamp(14px,1.3vw,22px);line-height:1.45}.number-options,.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6vw}.options button,.number-options button,.key{min-height:5.8vh;border:2px solid #fff8;border-radius:1vh;background:linear-gradient(#fffdf5,#e7daba);box-shadow:0 4px #a78d68;color:#403a31;font:700 clamp(15px,1.5vw,25px)/1.3 "Malgun Gothic","Noto Sans KR",sans-serif;padding:.7vh .3vw}.options button.selected,.number-options button.selected,.key.selected{background:linear-gradient(#fff4a8,#ffd370);outline:3px solid var(--tint);outline-offset:-2px}.confirm,.aux{border:2px solid #fff8;border-radius:1.3vh;padding:.7vh .4vw;min-height:5.8vh;background:linear-gradient(#fff3,#0001),var(--tint,#4b9f77);box-shadow:inset 0 2px #fff6,0 4px #4d655c;color:#fff;font-weight:900;font-size:clamp(13px,1.2vw,21px)}.confirm:disabled,.aux:disabled{background:#c6c7b6;color:#737969;box-shadow:0 3px #999c8d;cursor:default}.aux{background:linear-gradient(#fff1a0,#e4b64d);color:#584320;box-shadow:0 4px #9a7b36}.work-actions{display:flex;gap:.5vw;margin-top:auto;flex-shrink:0}.work-actions>button{flex:1;min-width:0}.feedback{min-height:3.8vh;line-height:1.4;font-size:clamp(11px,.96vw,16px);padding:.4vh .3vw;text-align:center;color:#36544b;font-weight:700;background:#fffbeecc;border-radius:.8vh;display:flex;align-items:center;justify-content:center}.work-footer{height:2%;text-align:center;font-size:clamp(9px,.8vw,14px);color:#fff;text-shadow:0 1px 3px #000;background:#243e4455;flex-shrink:0}.atlas{width:100%;height:100%;display:block;overflow:hidden}.shared-board{background:#fff7e6ef;border:4px ridge #c7ac79;border-radius:1.4vh;padding:1vh 1.5vw;box-shadow:0 4px #66523777;text-align:center}.shared-board h2{font:clamp(19px,2vw,34px) Jua;margin:.4vh 0}.shared-board p{font-size:clamp(12px,1.1vw,19px);margin:.5vh 0}.goal-done{flex:1;display:grid;place-content:center;text-align:center;color:#417257;gap:1vh;font-size:clamp(14px,1.3vw,22px)}.goal-done strong{font:clamp(25px,2.7vw,44px) Jua}.slot-strip{display:flex;gap:.5vw;justify-content:center;align-items:center}.slot-strip span{background:#fff9e7;border:2px solid #c7b995;border-radius:.6vh;padding:.7vh .5vw;min-width:3vw;font:700 clamp(20px,2vw,34px) "Malgun Gothic",sans-serif;text-align:center}.slot-strip .empty{border-style:dashed;color:#ad9c7e;background:#fff5c3}.status-badge{background:#fff9e6;border:2px solid #cab480;border-radius:2vh;padding:.4vh 1vw;font-size:clamp(12px,1.1vw,19px);font-weight:900}.gauge-bottle{width:100%;height:100%;overflow:visible}@media(max-height:650px){.tools>span{display:none}.work-panel{gap:.5vh;padding:.8vh .7vw}.feedback{font-size:11px;min-height:3.5vh}.sign h1{font-size:clamp(23px,3vw,40px)}}.refill .sign{background:linear-gradient(#238571,#104d43);border-color:#e4cb81}.refill .work-lanes{height:83%}.refill .work-panel{border:5px ridge #bbdbb1;border-radius:5vh 5vh 1vh 1vh;background:linear-gradient(100deg,#dcfffca8,#95d8c767,#efffffd4);box-shadow:inset 0 0 0 4px #efffffa6,0 5px #658c7855;padding:1vh 1vw}.refill .panel-label{margin:.2vh 1.5vw 0;border-radius:3vh}.target-label{text-align:center;background:#fff7de;border:3px ridge #d0b877;margin:.6vh 2vw 0;padding:.5vh;font-size:clamp(12px,1.1vw,19px)}.target-label strong{display:block;font:clamp(27px,3vw,50px) Jua;color:var(--tint)}.bottle-wrap{height:35vh;min-height:0;flex:1}.amount-readout{text-align:center;background:#eefffaad;border:1px solid #acd9c6;border-radius:1vh;padding:.2vh;font-size:clamp(13px,1.2vw,20px)}.amount-readout strong{font-size:1.4em;color:#265f56}.refill-keys{display:flex;gap:.4vw}.refill-keys button{flex:1;font-size:clamp(14px,1.4vw,23px);min-height:7vh}.refill-keys button:nth-child(2){background:linear-gradient(#68c5f0,#378dd2)}.refill-keys button:nth-child(3){background:linear-gradient(#b996ee,#8461c2);color:#fff;font-size:clamp(11px,1vw,17px)}.refill .feedback{font-size:clamp(10px,.9vw,15px)}.work-panel{--sprite-x:0%}.work-panel:nth-child(2){--sprite-x:33.333333%}.work-panel:nth-child(3){--sprite-x:66.666667%}.work-panel:nth-child(4){--sprite-x:100%}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button){position:relative;isolation:isolate;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:1.5vh;color:#382c20;padding:.8vh .55vw;font-weight:900;--key-x:0%;--key-y:22%}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button):before{content:"";position:absolute;top:-.2vh;right:-.2vw;bottom:-.2vh;left:-.2vw;z-index:-1;background:url(/assets/controls.png) var(--key-x) var(--key-y)/300% 280% no-repeat;pointer-events:none}.workshop .work-panel .confirm{--key-x:0%;--key-y:82%;color:#fff;text-shadow:0 1px 2px #17472d}.workshop .work-panel .aux{--key-x:50%;--key-y:82%}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button):disabled{opacity:.6;filter:saturate(.45);color:#3b443e;text-shadow:none}.workshop .work-panel :where(.key,.options button,.number-options button).selected{outline:3px solid #fff171;outline-offset:-4px;filter:brightness(1.08)}.work-panel button:focus-visible{outline:3px solid #24c6ff!important;outline-offset:2px}.workshop .feedback{box-shadow:none}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button){display:grid;place-items:center;padding:.2vh .4vw;line-height:1.15}.workshop .work-panel :where(.key,.confirm,.aux,.options button,.number-options button):disabled{opacity:.72;color:#fff9e9;text-shadow:0 1px 2px #251b13;filter:saturate(.35)}.refill .workshop-header{height:12%}.refill .work-lanes{height:86%;gap:0;padding:0 1vw 1vh}.refill .work-panel{background:none;border:0;box-shadow:none;border-radius:0;display:block;padding:0}.refill .work-panel:before{content:"";position:absolute;top:0;right:-3%;bottom:0;left:-3%;z-index:-1;background:url(/assets/cabinet.png) center/124% 100% no-repeat}.refill .panel-label{position:absolute;top:5%;left:30%;right:30%;height:4%;min-height:0;margin:0;background:none;box-shadow:none;justify-content:center;color:#164f4f;padding:0}.refill .panel-label span,.refill .panel-label small{display:none}.refill .target-label{position:absolute;top:11.5%;left:20%;right:20%;height:9%;margin:0;padding:0;background:none;border:0;font-size:1.45vh}.refill .target-label strong{font-size:4vh}.refill .bottle-wrap{position:absolute;left:18%;right:18%;top:24%;height:49%;min-height:0}.refill .amount-readout{position:absolute;top:74%;left:20%;right:20%;font-size:1.5vh;background:#e6ffebdf;border:1px solid #85b8a3}.refill .refill-keys{position:absolute;left:12%;right:12%;top:80%;height:6%;gap:.25vw}.refill .refill-keys button{min-height:0;font-size:1.7vh;padding:0}.refill .refill-keys button:nth-child(3){--key-x:100%;--key-y:82%;color:#fff;font-size:1.35vh}.refill .feedback{position:absolute;top:86.5%;left:14%;right:14%;height:3.5%;min-height:0;padding:0;background:#eefff4ce;font-size:1.1vh}.refill .work-actions{position:absolute;top:91%;left:13%;right:13%;height:5.5%;gap:.4vw}.refill .work-actions button{min-height:0;font-size:1.7vh;padding:0}.refill .goal-done{position:absolute;top:26%;right:17%;bottom:20%;left:17%;background:#f8fff0e8;border-radius:3vh;font-size:2vh}.refill .work-panel:nth-child(1){--tint:#24b9a2!important}.refill .work-panel:nth-child(2){--tint:#ed8a9d!important}.refill .work-panel:nth-child(3){--tint:#e6b93b!important}.refill .work-panel:nth-child(4){--tint:#4eafeb!important}.refill .refill-keys button:first-child{--key-x:0%;--key-y:82%}.refill .refill-keys button:nth-child(2){--key-x:50%;--key-y:22%}.refill .refill-keys button:nth-child(3){--key-x:100%;--key-y:82%}.refill .work-actions .aux{--key-x:50%;--key-y:82%}.refill .work-actions .confirm{--key-x:0%;--key-y:82%}.addition .target-label{left:12%;right:12%;top:11%;height:9%}.addition .target-label strong{font:2.8vh Jua;white-space:nowrap;color:#235c50}.addition .target-label small{font-size:1.4vh}.addition .bottle-wrap{top:20%;height:32%;left:25%;right:25%}.addition .amount-readout{top:52%;left:18%;right:18%;height:5.5%;display:flex;align-items:center;justify-content:center;gap:.5vw;font-size:2vh}.addition .decimal-pad{position:absolute;top:59%;left:17%;right:17%;height:26%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:.4vh .3vw}.addition .decimal-pad button{background:linear-gradient(#fffbea,#e7d3a3);border:1px solid #a88d52;border-radius:.6vh;box-shadow:0 2px #806844;font:2.5vh Jua;color:#304d43;padding:0;min-width:0;touch-action:manipulation}.addition .decimal-pad button:disabled{opacity:.65}.addition .feedback{top:86%;font-size:1.25vh}.addition .work-actions{top:91%}.addition .target-label{top:13%;height:10%;left:15%;right:15%;display:flex;align-items:center;justify-content:center;padding:0;margin:0}.addition .target-label strong{font:3.2vh/1.1 Jua,sans-serif;margin:0;white-space:nowrap;text-align:center}.addition .target-label small{position:absolute;left:0;right:0;top:-3.4vh;text-align:center;font:1.45vh/1.2 Jua,sans-serif;white-space:nowrap;color:#235c50}.addition .amount-readout{left:24%;right:24%;top:54%;height:4.5%;font-size:1.7vh}.addition .decimal-pad{left:23%;right:23%;top:60%;height:23%;gap:.45vh .35vw}.addition .decimal-pad button{font-size:2.15vh}.addition .target-label strong{font-size:2.6vh}.addition .target-label small{font-size:1.3vh;top:-3vh}.addition .target-label{top:12%;height:12%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.7vh}.addition .target-label small{position:static;display:block;font:1.35vh/1.2 Jua,sans-serif;margin:0;padding:0;color:#356458}.addition .target-label strong{font-size:2.6vh;line-height:1.1;margin:0}.addition .target-label{transform:translateY(-8px)}