body{
background:#dcdcdc;
font-family:Arial;
}

.oekaki-app{
display:flex;
width:900px;
margin:auto;
background:#eee;
padding:10px;
}

.left-panel{
width:200px;
}

.canvas-area{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}

.right-panel{
width:200px;
}

#canvas-container{
position:relative;
width:500px;
height:500px;
background:white;
}

canvas{
touch-action: none; /* 브라우저의 기본 스크롤 및 확대/축소 방지 */
user-select: none;  /* 텍스트 선택 방지 */
-webkit-user-select: none;
cursor: crosshair;
position:absolute;
border:1px solid #888;
}

#palette{
display:grid;
grid-template-columns:repeat(7,24px);
gap:4px;
width:fit-content;
}

.color{
width:24px;
height:24px;
border:1px solid #444;
cursor:pointer;
}