body {
    background-color: #fff1f2;
    background-image: radial-gradient(#fda4af 1px, transparent 1px);
    background-size: 20px 20px;
    overflow-x: hidden;
    overscroll-behavior: none; /* 모바일 새로고침 방지 */
}
/* 커스텀 스크롤바 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #ffe4e6;
}
::-webkit-scrollbar-thumb {
    background: #fb7185;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e11d48;
}
.canvas-container {
    box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.3), 0 8px 10px -6px rgba(244, 63, 94, 0.1);
}
input[type=range] {
    accent-color: #e11d48;
}
/* 드래그 앤 드롭 스타일 */
.draggable-tab {
    cursor: move; /* fallback */
    cursor: grab;
}
.draggable-tab:active {
    cursor: grabbing;
}
.dragging {
    opacity: 0.5;
    border: 2px dashed #e11d48;
}
/* 모달 스타일 */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
/* 컬러 피커 스타일 커스텀 */
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
}