body { 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    width: 100vw;
    height: 100vh;
    background:#222; 
    margin:0;
    overflow:hidden;
}

#canvasContainer { 
    position: relative;
    cursor: crosshair; 
}
canvas { 
    image-rendering: pixelated; 
    border: 1px solid #fff; 
    display:block;
}
#controls {
  position: fixed;
  bottom: 0;             /* 아래쪽에 붙이기 */
  left: 0;
  width: 100%;           /* 화면 가로 전체 */
  display: flex;
  justify-content: space-around; /* 버튼들 사이 간격 균등 */
  background: rgba(0,0,0,0.7);
  padding: 8px 0;
  color: #fff;
  font-family: sans-serif;
  align-items: center;
  z-index: 1000;
}

#controls input[type="color"] { width: 50px; height: 30px; border:none; }
#dragToggle { position: relative; font-size: 24px; cursor: pointer; user-select: none; padding: 4px; border-radius: 4px; }
#dragToggle.active { background: #0f0; transform: scale(1.2); }

#controls input[type="color"] { width: 60px; height: 30px; padding:0; border:none; }

#controls button {
    padding: 16px 20px;
    font-size: 22px;
    border-radius: 8px;
}

#controls input[type="color"] {
    width: 60px;
    height: 60px;
}

#dragToggle {
    font-size: 36px;
    padding: 10px;
    border-radius: 8px;
}