@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--paper:#f4f1e8;--ink:#212c25;--orange:#f45b32;--green:#254b38}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f45b32;outline-offset:4px}main{max-width:1440px;margin:auto;padding:0 5%}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9d9cc}.brand{text-decoration:none;color:var(--ink);font-size:19px;letter-spacing:-1px;font-weight:900;display:flex;align-items:center;gap:10px}.brand small{font-size:11px;letter-spacing:0;border-left:1px solid #bbb;padding-left:13px;margin-left:8px}.brand-icon{background:var(--orange);color:var(--paper);font-size:30px;width:36px;height:36px;text-align:center;line-height:30px}.quiet{border:1px solid #c7cbbc;background:transparent;border-radius:30px;padding:10px 16px;font-size:12px;font-weight:700}.intro{display:flex;justify-content:space-between;align-items:center;padding:43px 0 35px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--green);margin:0 0 14px}h1{font-size:clamp(36px,4.4vw,63px);font-weight:900;letter-spacing:-3px;line-height:1.2;margin:0}h1 span{color:var(--orange)}.sub{font-size:13px;color:#72796f;margin-top:17px}.race-stamp{width:174px;height:174px;border:2px solid var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:9px;transform:rotate(12deg);position:relative}.race-stamp b{font-size:85px;font-weight:900;line-height:1}.race-stamp span{font-size:11px;font-weight:900;line-height:1.7}.race-stamp i{position:absolute;bottom:9px;font-size:22px}.game{border:1px solid #274735;border-radius:14px;overflow:hidden;background:#fffaf0;box-shadow:0 7px 0 #dddfd1}.game-top{display:flex;align-items:center;justify-content:space-between;padding:15px 23px;background:var(--green);color:white;font-size:11px}.live{color:#d5f895;font-weight:900;letter-spacing:1px}.round{border-left:1px solid #66806c;margin-left:15px;padding-left:15px;opacity:.7;letter-spacing:1px}.clock{display:flex;align-items:center;gap:25px}.clock span{opacity:.65}.clock b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:2px}.stadium{position:relative}.skyline{height:43px;background:#dbe4cc;text-align:center;overflow:hidden;border-bottom:5px solid #769c7a}.skyline>span{display:block;font-size:9px;font-weight:900;letter-spacing:5px;margin:4px}.crowd{color:#a5b88e;font-size:16px;word-spacing:10px;white-space:nowrap}.field{height:54px;background:repeating-linear-gradient(90deg,#a2b980 0 90px,#abc289 90px 180px);display:flex;align-items:center;justify-content:space-between;padding:0 30px;color:#4b7146}.field>span{font-size:10px;font-weight:700}.field-logo{font-size:27px;font-weight:900;font-style:italic;opacity:.45;letter-spacing:-1px}.track{background:#c96a4c;position:relative;padding:25px 0 12px;overflow:hidden}.markers{position:absolute;top:5px;left:10%;right:9%;display:flex;justify-content:space-between;font-size:8px;font-weight:800;color:#fff6db;letter-spacing:1px}.lane{height:84px;border-top:2px solid #f2c7a0;position:relative;margin:0 0 0;background:linear-gradient(90deg,transparent 24.8%,#ffffff10 25%,transparent 25.2%,transparent 49.8%,#ffffff10 50%,transparent 50.2%,transparent 74.8%,#ffffff10 75%,transparent 75.2%)}.lane:last-child{border-bottom:2px solid #f2c7a0}.lane-num{position:absolute;left:14px;bottom:15px;font-size:30px;font-weight:900;font-style:italic;color:#f4c2a0;opacity:.75}.finish-line{position:absolute;right:8%;top:25px;bottom:12px;width:15px;background:conic-gradient(#fff5d9 25%,#263f31 0 50%,#fff5d9 0 75%,#263f31 0) 0 0/15px 15px;z-index:1;opacity:.9}.runner{position:absolute;bottom:5px;left:10%;width:64px;height:95px;z-index:2;transform:translateX(-50%);will-change:left}.doll{position:absolute;width:64px;height:95px;bottom:0;transform-origin:50% 90%}.head{position:absolute;top:-5px;left:2px;width:60px;height:65px;object-fit:contain;z-index:5;filter:drop-shadow(1px 2px 0 #252a2540)}.body{position:absolute;top:52px;left:23px;width:23px;height:27px;background:var(--color);border:2px solid #26372b;border-radius:7px 8px 3px 3px;transform:rotate(-12deg);z-index:3}.body:after{content:attr(data-number);color:white;font-size:12px;font-weight:900;position:absolute;left:6px;top:3px}.arm,.leg{position:absolute;width:8px;background:var(--color);border:2px solid #26372b;border-radius:7px;transform-origin:50% 3px}.arm{top:55px;height:22px;left:29px;z-index:4;transform:rotate(-55deg)}.arm.back{z-index:1;transform:rotate(55deg)}.leg{height:24px;top:73px;left:28px;transform:rotate(28deg)}.leg:after{content:'';position:absolute;bottom:-3px;left:-3px;width:16px;height:7px;border-radius:5px;background:#fff4d8;border:2px solid #26372b}.leg.back{transform:rotate(-28deg);z-index:1}.shadow{position:absolute;bottom:-3px;left:14px;width:42px;height:7px;border-radius:100%;background:#643f343d}.runner.running .doll{animation:bob .19s infinite alternate}.runner.running .leg,.runner.running .arm{animation:swing .27s infinite alternate}.runner.running .back{animation-direction:alternate-reverse}.runner.fallen .doll{animation:none;transform:translateY(1px) rotate(88deg);transition:transform .55s cubic-bezier(.3,0,.7,1.4)}.runner.fallen .arm,.runner.fallen .leg{animation:none;transform:rotate(-70deg)}.runner.fallen:after{content:'앗! 우당탕';position:absolute;top:-12px;left:-25px;white-space:nowrap;background:#fff3a8;color:#693b25;padding:4px 8px;transform:rotate(-8deg);font-size:10px;font-weight:900;border-radius:5px}.runner.supported:before{content:'▼';position:absolute;left:24px;top:-24px;color:#fff4a1;font-size:15px;z-index:8}.runner.winner .doll{animation:bob .4s infinite alternate}.countdown{position:absolute;inset:0;display:grid;place-content:center;background:#20392845;color:#fff7d9;font-size:110px;font-weight:900;z-index:20;text-shadow:5px 5px #244734}.countdown[hidden],.slow-tag[hidden]{display:none}.slow-tag{position:absolute;top:13px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:2px;padding:6px 14px;background:#ffe8a4;color:#614625;border-radius:20px;z-index:10}.commentary{display:flex;align-items:center;gap:16px;padding:15px 22px;min-height:69px}.mic{font-size:8px;line-height:1.2;color:var(--orange);font-weight:900;border:1px solid var(--orange);padding:4px}.commentary p{font-size:13px;font-weight:700;margin:0;flex:1}.commentary>span:last-child{font-size:9px;color:#8b9183;letter-spacing:1px;white-space:nowrap}.control-area{display:grid;grid-template-columns:1fr 285px;gap:35px;margin-top:34px}.section-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:14px}.section-label span{font-size:10px;color:#848a7b}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.card{position:relative;border:1px solid #d3d6c8;border-radius:9px;padding:12px 9px 10px;background:#eeeee2;text-align:center}.card.picked{border:2px solid var(--green);padding:11px 8px 9px;background:#e0e7d3}.card-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#777f6c}.dot{width:7px;height:7px;border-radius:50%;background:var(--color)}.card img{height:58px;width:58px;object-fit:contain;display:block;margin:4px auto}.card input{width:100%;background:transparent;border:0;text-align:center;font-size:12px;font-weight:800;color:var(--ink);padding:3px 0}.pick{font-size:10px;border:0;background:#dfe2d4;color:#67715e;border-radius:5px;padding:5px;width:100%;margin-top:7px}.picked .pick{background:var(--green);color:white}.start-panel{border-left:1px solid #d3d6c8;padding-left:30px}.start-panel label{font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}.start-panel select{padding:6px;font-size:10px;background:transparent;border:1px solid #cbd0bf;border-radius:5px;color:#4d5d47}.start{width:100%;background:var(--orange);color:#fff8ea;font-size:22px;font-weight:900;border:0;border-radius:8px;padding:23px 20px;margin-top:17px;box-shadow:0 4px 0 #cc4828;display:flex;justify-content:space-between;align-items:center;transition:transform .15s}.start:hover{transform:translateY(-2px)}.start:disabled{background:#9baf8b;box-shadow:0 4px 0 #7a8f6a;cursor:wait}.start-panel p{font-size:9px;color:#8e9484;text-align:center;margin-top:14px}.result{margin-top:25px;padding:25px;background:var(--green);color:#fff3da;border-radius:12px}.result-top{display:flex;align-items:center;gap:18px}.result-top img{width:75px;height:85px;object-fit:contain}.result h2{font-size:26px;margin:0 0 7px;letter-spacing:-1px}.result p{font-size:12px;opacity:.8;margin:0}.results-list{display:flex;gap:10px;margin-top:20px}.result-row{flex:1;padding:12px;background:#ffffff10;border-radius:6px;font-size:12px;display:flex;justify-content:space-between;gap:5px}.result-row b{color:#f7d786}footer{margin:38px 0 22px;border-top:1px solid #d5d8c9;padding-top:20px;display:flex;justify-content:space-between;color:#8a9181;font-size:9px;letter-spacing:.5px}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:100}.confetti{position:absolute;top:-20px;width:9px;height:16px;animation:confetti 3s ease-in forwards}@keyframes bob{to{transform:translateY(-5px) rotate(4deg)}}@keyframes swing{from{transform:rotate(-48deg)}to{transform:rotate(50deg)}}@keyframes confetti{to{transform:translate(80px,110vh) rotate(740deg)}}
@media(min-width:1500px){main{padding:0 80px}}@media(max-width:800px){main{padding:0 5%}header{height:70px}.brand{font-size:14px}.brand small{display:none}.quiet{font-size:10px;padding:8px 10px}.intro{padding:30px 0 24px}.race-stamp{width:100px;height:100px;flex-shrink:0}.race-stamp b{font-size:48px}.race-stamp span{font-size:7px}.race-stamp i{font-size:13px;bottom:3px}h1{font-size:35px;letter-spacing:-2px}.eyebrow{font-size:7px;letter-spacing:1px}.sub{font-size:10px;max-width:230px;line-height:1.8}.control-area{grid-template-columns:1fr;gap:22px;margin-top:25px}.start-panel{border:0;padding:0}.start-panel label{justify-content:flex-end}.start{margin-top:10px;padding:17px 20px}.start-panel p{margin-bottom:0}.section-label span{font-size:8px}.cards{gap:6px}.card{padding:8px 5px}.card.picked{padding:7px 4px}.card input{font-size:10px}.card-top{font-size:8px}.game-top{padding:10px 13px}.clock{gap:10px}.clock span{font-size:9px}.clock b{font-size:18px}.lane{height:80px}.runner{width:54px;transform:translateX(-50%) scale(.85);transform-origin:50% 100%}.commentary{padding:12px;gap:10px}.commentary p{font-size:11px}.commentary>span:last-child{display:none}.field{height:40px;padding:0 16px}.field-logo{font-size:21px}.field>span{font-size:8px}.round{margin-left:9px;padding-left:9px;font-size:9px}.results-list{flex-direction:column}.result h2{font-size:22px}.result{padding:18px}footer{font-size:7px;gap:15px;margin-top:26px}.slow-tag{font-size:8px;white-space:nowrap}.markers{font-size:6px}.lane-num{font-size:22px;left:7px}}
