:root {
    --bs-border-color-translucent: var(--bs-gray-900);
    --bs-border-color: var(--bs-gray-600);
    
    /* 市松模様背景のサイズ・色はここで調整可能 */
    --ichimatsu-size: 8px;
    --ichimatsu-a: #ffffff;
    --ichimatsu-b: #cfcfcf;
}

canvas {
    image-rendering: pixelated;
    max-width: 100%;
    background: transparent;
}

.ichimatsu {
    /* 45度の斜線2枚を半マスずらして重ね、市松を作る */
    background-image:
        linear-gradient(45deg, var(--ichimatsu-b) 25%, transparent 25%, transparent 75%, var(--ichimatsu-b) 75%),
        linear-gradient(45deg, var(--ichimatsu-b) 25%, transparent 25%, transparent 75%, var(--ichimatsu-b) 75%);
    /* 1枚目は原点、2枚目は「1マスぶん」ずらす */
    background-position: 0 0, var(--ichimatsu-size) var(--ichimatsu-size);
    /* 1レピートの大きさは「2マス×2マス」 */
    background-size: calc(var(--ichimatsu-size) * 2) calc(var(--ichimatsu-size) * 2);
    /* 透明部の下地になる色（もう一方の色） */
    background-color: var(--ichimatsu-a);
}

.drop {
    border: 2px dashed #888;
    border-radius: .5rem;
    padding: 2rem;
    text-align: center;
    color: #555;
    cursor: pointer;
}

.drop.drag {
    background: #f0f7ff;
    border-color: #0d6efd;
}