@import"https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+KR:wght@500;700;800&display=swap";:root{font-family:Manrope,Noto Sans KR,sans-serif;color:#edf0ed;background:#141b21;--yellow: #efbc43;--red: #df4e48;--green: #55c38a}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(#10171db5,#10171db5),url(/assets/backdrop.webp) center/cover fixed}button{font:inherit}header{height:68px;padding:0 clamp(12px,4vw,52px);display:flex;align-items:center;justify-content:space-between;background:#111a20ed;border-bottom:1px solid #b1883f}.brand{display:flex;align-items:center;gap:10px}.brand>span{width:38px;height:38px;background:var(--yellow);color:#182026;border-radius:5px;display:grid;place-items:center}.brand svg{width:21px}.brand strong{display:block;font-size:15px}.brand small,.stage small{display:block;color:#9fadb3;font-size:9px;text-transform:uppercase}.stage{text-align:center}.stage strong{font-size:14px}.icon{width:40px;height:40px;border:1px solid #65747b;border-radius:5px;background:#243139;color:#fff;display:grid;place-items:center;cursor:pointer}.icon svg{width:18px}.shell{min-height:calc(100svh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}.stats{width:min(70vh,680px,92vw);display:flex;justify-content:space-between;padding:6px 3px;color:#bbc5c9;font-size:11px}.stats b{color:#fff}.board-wrap{width:min(70vh,680px,92vw);aspect-ratio:1;padding:clamp(14px,2.5vw,26px);background:#252c31df;border:1px solid #77838a;border-radius:6px;box-shadow:0 24px 80px #000b}.board{width:100%;height:100%;position:relative;background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px calc(100% / 6)),repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px calc(100% / 6)),#161d22;border:2px solid #a6afb2;overflow:visible}.board:before{content:"";position:absolute;right:-28px;top:calc(100% / 3);width:30px;height:calc(100% / 6);background:#182a25;border-block:3px solid var(--green)}.exit{position:absolute;right:-22px;top:calc(41.67% - 5px);font-size:8px;color:var(--green);transform:rotate(90deg);z-index:2}.car{--gap: 5px;position:absolute;left:calc(var(--x) * 100% / 6 + var(--gap));top:calc(var(--y) * 100% / 6 + var(--gap));width:calc((var(--length)) * 100% / 6 - var(--gap) * 2);height:calc(100% / 6 - var(--gap) * 2);border:1px solid #ffffff77;border-radius:6px;background:#52738b;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:5px;box-shadow:inset 0 0 0 3px #ffffff19,0 5px 9px #0007;cursor:grab;touch-action:none;z-index:2}.car.vertical{width:calc(100% / 6 - var(--gap) * 2);height:calc((var(--length)) * 100% / 6 - var(--gap) * 2);flex-direction:column}.car i{width:18%;height:70%;background:#15232c;border-radius:3px}.car.vertical i{width:70%;height:18%}.car span{font-size:clamp(6px,1.2vmin,10px);font-weight:800}.car.target{background:linear-gradient(145deg,#f16c59,#b82f35);z-index:3}.car.c1{background:#d89d37}.car.c2{background:#3e9f8d}.car.c3{background:#6573b3}.car.c4{background:#a167ad}.car.c5{background:#7c8f92}.car.dragging{cursor:grabbing;filter:brightness(1.15);z-index:5}.car.hint{animation:pulse .45s 2}.controls{height:60px;display:flex;align-items:center;gap:10px}.controls>button:not(.icon){height:40px;padding:0 16px;border:1px solid #6f7d82;border-radius:5px;background:#243139;color:#fff;display:flex;align-items:center;gap:7px;cursor:pointer}.controls .primary{background:var(--yellow)!important;color:#172027!important;border:0!important;font-weight:800}.controls svg{width:17px}#toast{position:fixed;bottom:75px;left:50%;transform:translate(-50%,15px);opacity:0;background:#eff2ed;color:#172027;padding:9px 14px;border-radius:5px;font-size:11px;font-weight:800;transition:.2s}#toast.show{opacity:1;transform:translate(-50%)}dialog{width:min(370px,88vw);border:1px solid #879399;border-radius:6px;background:#152028;color:#fff;text-align:center;padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#070c10cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog small{font-size:10px;color:var(--green)}dialog h2{margin:5px}dialog p{color:#b6c1c5;font-size:13px}dialog button{width:100%;height:42px;margin-top:12px;border:0;border-radius:5px;background:var(--yellow);font-weight:800;color:#172027}@keyframes pulse{50%{box-shadow:0 0 0 5px #efbc4355,0 0 30px #efbc43}}@media(max-width:600px){header{height:58px;padding:0 10px}.brand>span{width:34px;height:34px}.brand strong{font-size:13px}.brand small{display:none}.shell{min-height:calc(100svh - 58px);padding:5px}.stats{width:min(78svh,90vw);padding:3px}.board-wrap{width:min(78svh,90vw);padding:11px}.controls{height:52px}.controls>button:not(.icon){padding:0 10px}.car{--gap: 3px;padding:3px}.car i{border-radius:2px}.stage small{display:none}}@media(orientation:landscape)and (max-height:600px){header{height:48px;padding:0 10px}.brand small,.stage small{display:none}.brand>span{width:32px;height:32px}.shell{height:calc(100svh - 48px);min-height:0;padding:3px;overflow:hidden}.stats,.board-wrap{width:min(48vw,calc(100svh - 116px))}.stats{padding:2px}.board-wrap{padding:8px}.controls{height:40px}.controls .icon{width:34px;height:34px}.controls>button:not(.icon){height:34px;padding:0 9px}.car{--gap: 3px}}