#board-open{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 92px);transform:translateX(-50%);z-index:18;padding:10px 18px}
#board-panel{position:fixed;z-index:90;inset:5vh max(12px,env(safe-area-inset-left));margin:auto;width:min(680px,calc(100vw - 32px));max-height:90dvh;overflow:auto;box-sizing:border-box;padding:16px;background:var(--ui-panel-board-board-panel-background);color:var(--ui-panel-board-board-panel-text);border:3px solid var(--ui-panel-board-board-panel-border);border-radius:12px;box-shadow:0 12px 48px var(--ui-panel-board-board-panel-shadow)}
#board-panel[hidden],#board-open[hidden]{display:none}
#board-panel .panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}#board-panel h2{margin:0}#board-panel p{margin:8px 0}
#board-panel canvas{display:block;width:100%;height:auto;aspect-ratio:2/1;background:var(--ui-panel-board-board-panel-background);image-rendering:pixelated;touch-action:none;cursor:crosshair;border:1px solid var(--ui-panel-board-board-panel-border-2);box-sizing:border-box}
.board-colors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:8px 0}.board-colors button{min-height:44px;padding:5px 3px;border:2px solid var(--ui-panel-board-board-colors-border);background:var(--ui-panel-board-board-colors-background);color:var(--ui-panel-board-board-colors-text);font-size:12px;overflow-wrap:anywhere}.board-colors button:before{content:'';display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:middle;background:var(--pencil);border:1px solid var(--ui-panel-board-board-colors-border-2)}.board-colors button[aria-pressed=true]{outline:2px solid var(--ui-panel-board-board-colors-true-focus);outline-offset:1px}.board-colors button:disabled{opacity:.4}.board-color-choice{flex-basis:100%;padding:8px;background:var(--ui-panel-board-board-color-choice-background);color:var(--ui-panel-board-board-color-choice-text);border-radius:8px}
#board-panel progress{width:100%;height:8px;display:block}
@media(max-height:500px) and (min-width:600px){#board-panel{inset:8px max(12px,env(safe-area-inset-left));max-height:calc(100dvh - 16px);width:min(780px,calc(100vw - 32px));padding:10px}#board-panel:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 160px;grid-template-rows:auto auto auto auto auto auto;gap:4px 10px;align-content:start}#board-panel .panel-heading{grid-column:1/-1}#board-panel .board-help{grid-column:1/-1;grid-row:2;font-size:12px;line-height:1.4;margin:0}#board-panel canvas{grid-column:1;grid-row:4;width:min(100%,calc((100dvh - 190px)*2));margin:auto;align-self:start}#board-panel .board-pencils{grid-column:2;grid-row:3/7}#board-panel .board-pencils .board-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0}#board-panel .board-colors button{font-size:12px}#board-panel>[role=status]{grid-column:1;grid-row:3;margin:2px 0;font-size:12px}#board-panel progress{grid-column:1;grid-row:5}}
/* F227: 좁은 세로 화면은 연필 3열 · 이름을 낱말 가운데서 안 끊음 */
@media (max-width:520px){.board-colors{grid-template-columns:repeat(3,minmax(0,1fr))}.board-colors button{overflow-wrap:normal;word-break:keep-all}}

#board-panel .board-help{font-size:12px;line-height:1.4}