:root{color:#173b49;background:#e7f5f8;font-family:system-ui,sans-serif}body{margin:0}main{max-width:980px;margin:auto;padding:20px}header h1{margin-bottom:4px}section{flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0;display:flex}button{font:inherit;color:#173b49;cursor:pointer;background:#fff;border:2px solid #bfdce4;border-radius:15px;min-height:48px;padding:10px 18px;font-weight:650}button[aria-pressed=true]{border-color:#173b49;box-shadow:0 0 0 2px #173b49}.primary{color:#fff;background:#087c97;border-color:#087c97}.paper{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 6px 20px #173b4918}canvas{touch-action:none;width:100%;height:auto;display:block}#colors{flex-wrap:wrap;gap:6px;display:flex}#colors button{width:48px;padding:0}label{align-items:center;gap:8px;margin:8px;display:inline-flex}input{font:inherit;border:1px solid #adc5cd;border-radius:8px;max-width:100%;padding:8px}details{background:#fff;border-radius:16px;margin-top:24px;padding:16px}dialog{border:0;border-radius:24px;max-width:90vw}dialog img{width:100%;max-width:600px;display:block}#status{min-height:28px}button:disabled{opacity:.45}input[type=range]{width:110px}@media (width<=600px){main{padding:12px}button{padding:10px}h1{font-size:26px}}#pairing{min-width:0;display:block}#pairing label{flex-direction:column;align-items:flex-start;gap:6px;width:100%;max-width:560px;margin:12px 0;display:flex}#pairing input{box-sizing:border-box;width:100%;min-width:0}#pairing details{margin-top:12px}@media (orientation:landscape) and (width>=700px){main{grid-template-columns:clamp(190px,22vw,260px) minmax(0,1fr);gap:8px 16px;max-width:none;padding:12px;display:grid}header{grid-column:1/-1}header h1{margin:0;font-size:24px}header p{display:none}section[aria-label=색칠\ 도구]{grid-area:2/1;align-content:start;align-items:center;gap:8px;margin:0}section[aria-label=색칠\ 도구] button{padding:10px}#colors{width:100%}label{margin:4px}.paper{grid-area:2/2;place-self:start center;width:min(100%,133.333vh - 200px)}.paper+section{grid-area:3/2;justify-content:center;gap:8px;margin:0}#draftStatus,#status,#pairing,#connection{grid-column:1/-1;margin:4px 0}#connection{margin-top:12px}}@supports (height:100svh){@media (orientation:landscape) and (width>=700px){.paper{width:min(100%,133.333svh - 200px)}}}