body {
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#startButton {
    padding: 20px 40px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
}

#appContainer {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #4eadea;
    position: relative;
    touch-action: none;
}

#drawingCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(to right, transparent, transparent 49.9%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 50.1%);
    background-size: 25% 100%;
    z-index: 1;
}

#gridLabels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
    z-index: 2;
}

#gridLabels div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.3);
}

#imageContainer {
    /* SVGはimageContainerの中で中央に配置されるようにする */
    position: absolute; /* 親要素いっぱいに広げる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* FlexboxでSVGを中央に配置する */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    touch-action: none;
}

#draggableImage {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    
    /* SVG自体のサイズ設定 */
    width: 100%; /* 親要素の幅いっぱい（max-widthで調整） */
    height: auto;
    max-width: 90%; /* 例えば、画面幅の90%がSVGの最大幅 */
    max-height: 90%; /* 縦方向も考慮 */
    object-fit: contain; /* アスペクト比を保ちつつコンテナに収める */
    
    cursor: grab;
    
    /* --- 修正: SVG自体の位置決め --- */
    /* これでFlexboxで中央に配置された状態から、JSで追加のtranslateを適用 */
    position: relative; /* imageContainer の中で中央に配置される */
    
    /* 初期状態のtransformはresetDrawingAndImage関数で設定される */
    transform: translate(0, 0) scale(1); 
    transform-origin: 50% 50%; /* スケールの中心は画像の中央 */
    touch-action: none;
}