body {
    margin: 0;
    overflow: hidden;
}

.gallery {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.artwork {
    position: absolute;
    cursor: pointer;
    z-index: 2;
}
.artwork.big-art img {
    /* 기존 100px 대신 적용할 더 큰 크기 */
    max-width: 250px; 
    
    /* 혹시 자바스크립트로 랜덤 배치할 때 너무 커서 겹친다면, */
    /* 아래 코드로 우선순위를 높여줄 수 있습니다. */
    /* width: 250px !important; height: auto !important; */
}

.artwork img {
    max-width: 120px; /* 이미지 크기 조정 */
}

.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
    border-radius: 5px;
    display: none; /* 숨김 상태 */
    z-index: 3;
}

.artwork img {
    /* 🌟 매우 중요: 이미지 자체를 마우스가 통과해 부모(.artwork)가 클릭을 인식하게 만듭니다 */
    pointer-events: none; 
}

.tooltip {
    /* 🌟 매우 중요: 툴팁이 마우스 커서를 가려도 드래그를 방해하지 않게 합니다 */
    pointer-events: none; 
}