styles.css

/* 전체 페이지 배경 이미지 설정 */
body, html {
    margin: 0;
    padding: 0;
    height: 100vh; /* 전체 화면 높이를 보장 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('backimage.png');
    background-size: cover; /* 배경 이미지가 요소를 꽉 채우도록 설정 */
    background-position: center; /* 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 방지 */
    background-attachment: fixed; /* 배경 고정 */
}

/* 슬롯을 감싸는 컨테이너 */
.slots-container {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 슬롯 세로 중앙 정렬 */
    position: relative;
    width: 700px; /* 슬롯 컨테이너 너비 */
    height: 800px; /* 슬롯 컨테이너 높이 */
    margin-top: -15px;
    z-index: 1; /* 배경 레이어 위에 위치 */
}

/* 슬롯들을 담고 있는 컨테이너 */
.slots {
    display: flex;
    justify-content: center; /* 슬롯 간 간격 조정 */
    align-items: flex-start; /* 슬롯을 위쪽으로 정렬 */
    position: relative; /* 슬롯들을 겹쳐지도록 설정 */
    width: 100%; /* 슬롯 컨테이너 너비를 부모에 맞춤 */
    height: 700px; /* 슬롯 컨테이너와 동일한 높이 */
    background-image: url('slot.png'); /* 슬롯 박스 배경 설정 */
    background-size: cover; /* 슬롯 배경 이미지 크기 조정 */
    background-position: center;
}

.reel {
    width: 166px; /* 기존 184px의 1.1배로 변경 */
    height: 304px; /* 기존 338px의 1.1배로 변경 */
    overflow: hidden; /* 슬롯 이미지가 슬롯 박스를 넘지 않도록 설정 */
    margin: 0 14px; /* 슬롯 간의 여백을 18px로 설정 */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 슬롯을 위쪽으로 정렬 */
    margin-top: 240px;
    position: relative; /* 슬롯 이미지를 겹치도록 설정 */
}

/* 이미지의 크기와 위치 설정 */
.reel img {
    width: 200px; /* 기존 184px의 크기 유지 */
    height: 2160px; /* 기존 1656px의 크기 유지 */
    position: absolute; /* 슬롯 이미지 겹치기 위해 설정 */
    top: 0; /* 이미지의 시작 위치는 변하지 않음 */
}

/* 슬롯 이미지 애니메이션 */
@keyframes spin {
    0% {
        top: 0;
    }
    100% {
        top: -1713px; /* 기존 -1318px의 1.3배로 변경 */
    }
}

/* 레버 이미지 스타일 */
.lever {
    position: absolute;
    left: 690px;
    top: 47%; /* 세로 중앙 정렬 */
    transform: translateY(-50%); /* 세로 중앙 정렬 보강 */
}

#lever {
    width: 100px; /* 크기 조정 */
    height: auto; /* 비율 유지 */
}

/* 알림 창 스타일 */
.alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 다른 요소들 위에 표시되도록 설정 */
}

/* 알림 창 안의 요소들 */
.alert-window {
    position: relative; /* 버튼 위치 조정을 위한 설정 */
}

.alert-message {
    position: absolute; /* 텍스트를 알림 창의 중앙에 위치 */
    top: 45%; /* 중앙 정렬 */
    left: 50%; /* 중앙 정렬 */
    transform: translate(-50%, -50%); /* 중앙 정렬 보강 */
    color: #f2d7bc; /* 텍스트 색상 설정 */
    text-align: center; /* 텍스트 가운데 정렬 */
    font-size: 22px; /* 텍스트 크기 조정 */
    z-index: 1001; /* 다른 요소들 위에 표시되도록 설정 */
    white-space: nowrap; /* 줄바꿈 방지 */
}

.alert-button {
    position: absolute;
    margin-top: 200px;
    transform: translateX(-50%, -50%); /* 중앙 정렬 보강 */
    cursor: pointer; /* 마우스 포인터 변경 */
    z-index: 1001; /* 다른 요소들 위에 표시되도록 설정 */
}

/* 닫기 버튼 */
.alert-close {
    position: absolute;
    margin-left: 450px;
    margin-bottom: 250px;
    transform: translate(50%, -50%); /* 중앙 기준 위치 보정 */
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1001;
}

/* 화면 가로 사이즈가 1000px 이하일 때 */
@media (max-width: 1000px) {
    .content-container {
        transform: scale(0.45); /* 전체 컨텐츠를 0.8배로 줄임 */
        transform-origin: center; /* 변환 기준 설정 */
    }
    .alert-message {
        font-size: 22px; /* 원하는 폰트 크기로 조정 */
        white-space: nowrap; /* 줄바꿈 방지 */
    }
}
/* 화면 가로 사이즈가 3000px 이상일 때 */
@media (min-width: 2000px) {
    .content-container {
        transform: scale(1.5); /* 전체 컨텐츠를 1.2배로 확대 */
        transform-origin: center; /* 변환 기준 설정 */
    }
}