body, html { height: 100%; margin: 0; background: #000; font-family: 'Poppins', sans-serif; overflow: hidden; }

.bgimg {
    background-image: url('image/web1.jpg');
    height: 100vh !important;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* 날짜 컨테이너: 훨씬 위쪽으로 조정 (15% 지점) */
.date-area {
    position: absolute;
    top: 15%; /* 이 숫자를 10%, 20% 등으로 조절해서 시계탑에 맞추세요 */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 1;
}

.date-text {
    font-size: 32px; /* 크기 유지 */
    letter-spacing: 15px; 
    font-weight: 200; /* 얇게 설정해서 딱딱함을 완화 */
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    /* 부드러운 그림자 효과: 텍스트가 배경에 자연스럽게 묻히게 함 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 2px 2px 5px rgba(0,0,0,0.5); 
}

/* 푸터: 왼쪽 하단 구석 고정 */
.custom-footer {
    position: absolute !important;
    bottom: 30px !important;
    left: 30px !important;
    z-index: 5;
    text-align: left;
}

/* 상단 버튼 */
.custom-btn {
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.4);
    color: white; padding: 10px 25px; cursor: pointer; transition: 0.3s;
    margin-right: 5px; border-radius: 5px;
}
.custom-btn:hover { background: white; color: black; }

.modal-list-item {
    padding: 15px; border-bottom: 1px solid #333; cursor: pointer;
    text-align: center; transition: 0.3s;
}
.modal-list-item:hover { background: white; color: black; }