body {
    margin: 0;
    padding: 0;
}

.image-container {
    /* 뷰포트 전체를 채우도록 설정 */
    position: relative; /* 페이지 스크롤과 무관하게 고정 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 1080px;
    overflow: auto; /* 내용이 넘칠 때 스크롤바 생성 */
}

.image-container .background-image {
    /* 이미지가 컨테이너를 꽉 채우도록 설정 */
    min-width: 100%;
    min-height: 100%;

    /* 가운데 정렬을 위한 설정 */
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    object-fit: cover;
}
/* 텍스트 오버레이: 이미지를 기준으로 위치와 크기를 결정 */
    .overlay-text {
    position: absolute; /* 부모 컨테이너를 기준으로 위치 지정 */
    transform: translate(-50%, -50%); /* 정확한 가운데 정렬 */
    
    /* 텍스트의 크기와 위치를 이미지 비율에 맞춤 */
    text-align: center;
    color: white; /* 텍스트 색상 */
    top: 72%;
    left: 51%;
    font-size: clamp(30px, 2vw, 32px); /* 뷰포트 너비의 2%로 폰트 크기 설정 */

}

/* 추가 스타일 */
.overlay-text p {
    margin: 0;
    white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 설정 */
}