/* 공지사항 전체를 화면 중앙에 띄우는 오버레이 */
.notice-overlay {
    /* [변경] fixed 대신 absolute를 사용하여 본문 흐름에 맞춤 */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    /* [변경] height 100% 대신 내용물만큼만 높이를 차지하도록 설정 */
    min-height: 100vh; 
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    
    /* [변경] 중앙 정렬 대신 위쪽부터 배치되도록 수정 */
    align-items: flex-start; 
    padding-top: 70px; /* 상단 여백 */
    z-index: 9999;
}

/* 두 개의 공지를 감싸는 가로 정렬 컨테이너 */
.notice-wrapper {
    display: flex;
    gap: 20px; /* 공지 창 사이의 간격 */
    max-width: 90%;
    justify-content: center;
    align-items: flex-start;
}

/* 개별 공지 창 스타일 */
.notice-box {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

/* 공지 이미지 */
.notice-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 하단 버튼 영역 */
.notice-footer {
    display: flex;
    justify-content: space-between;
    background: #222;
    padding: 10px;
}

/* 버튼 공통 스타일 */
.notice-footer button {
    background: none;
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    padding: 5px 10px;
}

.notice-footer button:hover {
    text-decoration: underline;
}

/* 반응형: 화면이 작아지면 세로로 나란히 배치 */
@media (max-width: 768px) {
    .notice-wrapper {
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        max-height: 90vh; /* 모바일에서 화면을 벗어나지 않도록 조절 */
    }
}