canvas {
    border: 1px solid #ccc;
    margin-top: 0.5rem;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 두 개의 열 */
    gap: 1rem;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr; /* 모바일에서는 한 개의 열 */
    }
}

.skin-viewer-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

#skinACanvas, #skinBCanvas, #resultCanvas1, #resultCanvas2 {
    image-rendering: pixelated;
    width: 256px;
    height: 256px;
}

#skinAViewer, #skinBViewer, #resultViewer1, #resultViewer2 {
    width: 100%;
    max-width: 300px;
    height: 400px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
}