:root{--ink:#17251b;--cream:#fff8d9;--sun:#efc542;--leaf:#285f37;--red:#d84a36}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:Arial,"Apple SD Gothic Neo",sans-serif;background:radial-gradient(circle at 12% 15%,#fff0ab 0 2%,transparent 2.2%),#dfcc7b}button,input,select{font:inherit;color:inherit}button{cursor:pointer}header{max-width:1500px;margin:auto;display:flex;align-items:center;gap:13px;padding:18px clamp(12px,3vw,38px) 14px;border-bottom:3px solid var(--ink)}header h1{margin:0;font-size:clamp(25px,4vw,44px);letter-spacing:-.08em}header small{color:#953a2d;font-weight:900;letter-spacing:.12em}.logo,.round{width:50px;height:50px;border:3px solid var(--ink);border-radius:50%;background:var(--leaf);color:#fff7c9;font-weight:900;box-shadow:3px 3px 0 var(--ink)}.round{margin-left:auto;background:var(--sun);color:var(--ink)}main{max-width:1500px;margin:22px auto;padding:0 clamp(12px,3vw,38px)}.setup{max-width:760px;margin:auto;background:var(--cream);border:4px solid var(--ink);box-shadow:9px 9px 0 var(--ink);padding:clamp(20px,4vw,38px)}h2{font-size:clamp(27px,4vw,40px);letter-spacing:-.06em;margin:3px 0 20px}.kicker{color:#953a2d;font-size:11px;font-weight:900;letter-spacing:.12em}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px}.field label,.legend{font-weight:900}.field select,.field input{width:100%;padding:11px;border:2px solid var(--ink);background:#fff}.names{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:17px 0}.name{display:flex;border:2px solid var(--ink);background:white}.name span{width:42px;display:grid;place-items:center;color:#fff;font:26px Georgia;border-right:2px solid var(--ink);text-shadow:1px 1px var(--ink)}.name input{border:0;padding:10px;min-width:0;width:100%}.rules{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rule{border:2px solid var(--ink);background:#efe3b4;padding:11px;text-align:left;display:grid;gap:3px}.rule small{font-size:10px;color:#6e6444}.rule.selected{background:var(--sun);box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}.primary,.secondary{width:100%;margin-top:18px;padding:14px;border:3px solid var(--ink);background:var(--red);color:#fff;font-weight:900;box-shadow:5px 5px 0 var(--ink)}.secondary{background:var(--cream);color:var(--ink)}.game{display:grid;grid-template-columns:210px minmax(560px,1fr) 210px;gap:18px;align-items:start}.panel{background:var(--cream);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:14px}.player{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:7px;padding:8px 4px;border-top:1px dashed #8e7d4c}.player.active{background:var(--sun);border:2px solid var(--ink);margin-inline:-7px;padding-inline:10px}.piece{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:45%;font:27px Georgia;color:#fff;text-shadow:1px 2px var(--ink);box-shadow:0 2px var(--ink)}.player div{display:grid}.player small{font-size:10px;color:#6e6444}.status{text-align:center;padding:9px;border:3px solid var(--ink);border-bottom:0;background:var(--sun);font-weight:900}.board-frame{position:relative;background:#efca38;border:5px solid var(--ink);box-shadow:8px 8px var(--ink);padding:8px}.board{position:relative;display:grid;border:2px solid var(--ink)}.cell{position:relative;aspect-ratio:1;border:1px solid #17251b66;display:grid;place-items:center;font-size:clamp(7px,.8vw,12px);font-weight:900}.cell:nth-child(4n+1){background:#f1da62}.cell:nth-child(4n+2){background:#315c3b;color:#fff5c3}.cell:nth-child(4n+3){background:#da664b}.cell:nth-child(4n){background:#f8ecc2}.cell>span{position:absolute;top:2px;left:3px;z-index:3}.cell.finish:after{content:"끝";font-size:14px}.pieces{display:flex;flex-wrap:wrap;justify-content:center;z-index:4}.pieces .piece{width:clamp(24px,2.7vw,36px);height:clamp(24px,2.7vw,36px);font-size:clamp(19px,2.2vw,30px);animation:hop .35s}.paths{position:absolute;inset:0;z-index:2;pointer-events:none}.turn{text-align:center}.big-piece{width:70px;height:70px;margin:10px auto;display:grid;place-items:center;border:3px solid var(--ink);border-radius:45%;font:52px Georgia;color:white;text-shadow:2px 2px var(--ink);box-shadow:4px 4px var(--ink)}.dice{display:flex;justify-content:center;gap:7px;margin:14px}.die{width:48px;aspect-ratio:1;border:3px solid var(--ink);border-radius:9px;background:#fff;display:grid;place-items:center;font-size:34px;box-shadow:3px 4px #17251b88}.rolling{animation:roll .35s linear infinite}.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#101a12bb;padding:18px}.hidden{display:none}.modal{width:min(620px,100%);background:var(--cream);border:5px solid var(--ink);box-shadow:9px 9px #071008;padding:26px;text-align:center}.npc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.npc-card{border:2px solid var(--ink);background:#f0df9d;padding:9px;min-width:115px;display:grid;gap:6px;justify-items:center}.result-list{display:grid;gap:8px;margin:20px}.result-row{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);padding:10px;background:#f0df9d;font-size:18px;font-weight:900}@keyframes roll{to{transform:rotate(360deg)}}@keyframes hop{50%{transform:translateY(-12px) scale(1.12)}}@media(max-width:1000px){.game{grid-template-columns:180px 1fr}.turn{grid-column:1/-1}.turn .big-piece{display:none}}@media(max-width:720px){.game{grid-template-columns:1fr}.players{order:2}.turn{order:3;grid-column:auto}.form-grid,.names{grid-template-columns:1fr}.board-frame{padding:4px;border-width:3px}.panel{padding:10px}.player-list{display:grid;grid-template-columns:1fr 1fr}}@media(max-width:470px){.rules,.player-list{grid-template-columns:1fr}header{padding-top:10px}.logo,.round{width:42px;height:42px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}