@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body { font-family: 'Noto Sans KR', sans-serif; background-color: #f3f4f6; overflow: hidden; user-select: none; touch-action: none; }

.scrollable-area { touch-action: pan-y; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.draggable-item {
    cursor: grab;
    transition: transform 0.1s, box-shadow 0.1s;
}
.draggable-item:active { cursor: grabbing; transform: scale(0.95); }

#canvas-area {
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 20px 20px;
}

.canvas-node {
    position: absolute;
    cursor: grab;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}
.canvas-node:active { cursor: grabbing; }

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes mergeEffect {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.3); filter: brightness(1.5); }
    100% { transform: scale(0); opacity: 0; }
}

.merging { animation: mergeEffect 0.4s forwards; pointer-events: none; }

.modal-enter { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px; width: 16px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    margin-top: -6px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px;
    cursor: pointer;
    background: #cbd5e1;
    border-radius: 2px;
}