@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans KR',sans-serif;color:#183e66;background:#e5f4fd;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#f5fcff,#d3ebfa);min-height:100vh}button,select{font:inherit}button{border:0;border-radius:12px;background:#e7f2fd;color:#33668d;font-weight:800;padding:12px 16px;cursor:pointer;transition:.18s}button:hover{filter:brightness(.96);transform:translateY(-1px)}button:disabled{opacity:.43;cursor:default;transform:none}button:focus-visible,select:focus-visible{outline:3px solid #ffbd43;outline-offset:3px}.app{max-width:1800px;margin:auto;padding:0 28px}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c4e0f0;gap:15px}.brand{text-decoration:none;color:#1579d4;display:flex;align-items:center;gap:12px;font-size:25px;font-weight:900;letter-spacing:-1px}.brand-icon{background:linear-gradient(150deg,#52b8fc,#1266d4);color:#fff;border:3px solid white;box-shadow:0 5px 0 #a7cde5;border-radius:17px;padding:5px 11px;font-size:29px;transform:rotate(-8deg)}.brand small{display:block;font-size:10px;letter-spacing:2px;color:#719bb4;font-weight:600;margin-top:1px}.round{display:flex;gap:12px;align-items:center;font-size:12px}.round span{color:#71a0bc;letter-spacing:2px}.round b{background:#fff;padding:10px 16px;border-radius:20px;color:#2588d7}nav{display:flex;gap:8px}nav button{font-size:12px;padding:9px 13px;background:#ffffffa8}main{display:grid;grid-template-columns:220px minmax(400px,1fr) 238px;gap:22px;margin-top:27px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#6c9ab6}h2{font-size:20px;letter-spacing:-.8px;margin:7px 0 22px}h3{font-size:14px}.players{padding-top:7px}.player{position:relative;display:flex;gap:12px;padding:16px 12px;background:#ffffffb0;border:2px solid #fff;border-radius:19px;margin-bottom:12px;box-shadow:0 5px 12px #6b9fba0b}.player.active{border-color:var(--player);background:#fff;box-shadow:0 6px 18px #298cdb19}.avatar{display:grid;place-items:center;align-self:start;font-size:30px;width:49px;height:53px;border-radius:16px;background:color-mix(in srgb,var(--player) 18%,white);border-bottom:4px solid color-mix(in srgb,var(--player) 30%,white)}.player-details{display:flex;flex-direction:column;gap:3px}.player b{font-size:12px}.player small{font-size:9px;color:#82a0b6}.player strong{font-size:21px;margin:4px 0;color:#245988;letter-spacing:-.5px}.player em{font-style:normal;font-size:12px;color:#e9ac37}.turn-dot{position:absolute;right:10px;top:10px;font-size:9px;color:var(--player)}.out{opacity:.4}.tip{padding:18px 12px;font-size:11px;line-height:1.9;color:#7799af}.tip b{color:#4d89b0}.save-state{font-size:10px;color:#87a7b7;padding:12px}.play-area{position:relative;min-width:0}.board-caption{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#83a7bd;margin:8px 12px 0}.world{height:min(61vh,660px);min-height:430px;width:100%;touch-action:pan-y}.world canvas{width:100%;height:100%;display:block}.board-hint{display:flex;justify-content:space-between;margin:0 10px 18px;color:#7ea1b7;font-size:10px}.board-hint span{color:#54a69a;font-size:8px;letter-spacing:1px}.action-panel{border-radius:23px;background:linear-gradient(115deg,#237ed8,#1263bf);padding:22px 24px;display:flex;gap:15px;align-items:center;justify-content:space-between;box-shadow:0 7px 0 #bad6eb,0 16px 25px #267fb420;color:white;min-height:124px}.action-copy small{font-size:9px;letter-spacing:2px;color:#aedbff}.action-copy h2{margin:5px 0 8px;font-size:20px}.action-copy p{font-size:11px;margin:0;color:#d7ecff;line-height:1.6}.action-buttons{display:flex;gap:7px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;max-width:245px}.action-buttons button{font-size:12px;padding:13px 16px}.primary{background:linear-gradient(#ffe284,#ffbe42);color:#704d12;box-shadow:0 4px 0 #d59d35}.dice-result{font-size:13px;font-weight:900;background:#ffffff1c;padding:10px;border-radius:11px}.right-panel{display:flex;flex-direction:column;gap:20px}.city-card{padding:20px;background:#ffffffd9;border:2px solid white;border-radius:23px;box-shadow:0 8px 24px #669db412}.city-illustration{height:120px;display:grid;place-items:center;font-size:69px;border-radius:14px;margin:16px 0}.city-card>small{font-size:9px;color:#8fa6b8;letter-spacing:2px}.city-card h2{margin:4px 0 8px;font-size:25px}.city-status{font-size:10px;color:#489cc8;background:#edf7fc;border-radius:9px;padding:8px 10px}.city-card dl{display:grid;grid-template-columns:1fr auto;font-size:10px;gap:12px;margin-top:22px}.city-card dt{color:#8ba1b5}.city-card dd{margin:0;font-weight:800}.city-card p{font-size:10px;line-height:1.8;color:#8ca4b6;margin:18px 0 0}.journal{padding:4px 10px}.journal h3{display:flex;justify-content:space-between;margin:0 0 15px}.journal h3 span{font-size:8px;color:#5caaa6;letter-spacing:1px}.log{max-height:205px;overflow:auto;scrollbar-width:thin}.log p{font-size:10px;line-height:1.7;color:#83a0b3;margin:0 0 11px}.log p:first-child{color:#347cb3;font-weight:700}.log span{color:#5aafd6}footer{display:flex;gap:25px;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#9cb7c8;margin:35px 0 20px}footer>span:last-child{letter-spacing:0}.overlay{position:fixed;inset:0;background:#103d6680;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:10;padding:20px}.modal{position:relative;background:#f8fcff;border:4px solid white;border-radius:27px;width:min(520px,100%);max-height:90vh;overflow:auto;padding:35px;box-shadow:0 25px 100px #16486966}.modal p,.modal li{font-size:12px;line-height:1.9;color:#64869e}.modal li{margin-bottom:10px}.modal ol{padding-left:20px}.close{position:absolute;right:10px;top:10px;background:transparent;font-size:23px;padding:3px 10px}.modal label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:22px 0}.modal select{padding:8px;border:1px solid #c1d9ec;border-radius:9px;color:#245988}.modal>.primary{width:100%;margin-top:15px}.error{padding:20px;background:#fff4dd;border-radius:15px;font-size:13px}
@media(min-width:1550px){main{grid-template-columns:245px minmax(500px,1fr) 260px;gap:30px}.world{height:650px}}@media(max-width:1150px){.app{padding:0 16px}main{grid-template-columns:175px minmax(320px,1fr);gap:16px}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.city-card{display:grid;grid-template-columns:100px 1fr;gap:5px 20px}.city-illustration{grid-column:1;grid-row:1/6;height:100px;margin:0}.city-card .eyebrow{display:none}.city-card dl{grid-column:1/-1;grid-template-columns:1fr auto 1fr auto;margin:8px 0}.city-card p{grid-column:1/-1}.world{height:530px}.avatar{font-size:24px;width:38px;height:42px}.player{padding:13px 9px;gap:8px}.player strong{font-size:19px}.round span{display:none}.action-panel{padding:20px;align-items:flex-start;flex-direction:column}.action-buttons{max-width:none;width:100%}}@media(max-width:650px){.app{padding:0 10px}header{height:82px;flex-wrap:wrap;align-content:center;gap:10px}.brand{font-size:18px}.brand small{font-size:8px}.brand-icon{font-size:23px;padding:4px 9px}.round{margin-left:auto}.round b{font-size:9px;padding:8px}nav{width:100%;justify-content:flex-end;margin-top:-7px}nav button{font-size:9px;padding:4px 9px}main{display:flex;flex-direction:column;margin-top:15px;gap:10px}.players{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.players>.eyebrow,.players>h2,.tip,.save-state{display:none}.player{margin:0;padding:9px 10px;border-radius:15px}.player strong{font-size:16px;margin:0}.player small{font-size:8px}.player-details{gap:1px}.player b{font-size:10px}.avatar{width:35px;height:40px;font-size:23px}.world{height:440px;min-height:350px;margin-top:-18px}.board-caption{font-size:7px;letter-spacing:1px}.board-hint{font-size:8px;margin-top:-18px}.action-panel{border-radius:19px;padding:18px;gap:14px}.action-copy h2{font-size:18px}.action-buttons{justify-content:space-between}.action-buttons button{font-size:12px;flex-grow:1}.right-panel{display:flex;gap:13px;margin-top:12px}.city-card{padding:15px}.city-illustration{height:85px;font-size:49px}.city-card h2{font-size:21px;margin:0}.city-card dl{font-size:9px;gap:8px}.journal{padding:10px}.log{max-height:135px}footer{font-size:7px;gap:5px;letter-spacing:1px}footer>span:last-child{display:none}.modal{padding:28px 22px}.modal h2{font-size:20px}.modal label{font-size:11px}.modal select{max-width:100px}}