/* 기본 초기화 */
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100%; 
    font-family: 'Pretendard', sans-serif;
    background: #f8f9fa;
}

/* 1. 풀스크린 배너 (첫 화면) */
.full-banner-container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden; /* 배너가 밖으로 나가는 것을 숨김 */
    background: #000; /* 배너 교체 시 빈 공간이 검게 보이도록 함 */
}

.banner-item {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0; /* 기본 위치는 0으로 잡고 transform으로 움직입니다 */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 애니메이션 설정: 위아래 이동과 투명도를 동시에 조절 */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    opacity: 0;
    z-index: 1;
}

/* [상태 1] 새로 들어오는 배너: 위에서 대기 */
.banner-item.incoming {
    transform: translateY(-100%); 
    opacity: 1;
    z-index: 3; /* 가장 위에 있음 */
}

/* [상태 2] 현재 활성화된 배너: 화면 중앙 */
.banner-item.active {
    transform: translateY(0);
    opacity: 1;
    z-index: 2;
}

/* [상태 3] 나가는 배너: 아래로 밀려남 */
.banner-item.outgoing {
    transform: translateY(100%);
    opacity: 0;
    z-index: 1;
}

/* 배너 내부 텍스트 영역 */ 
.banner-content {
    text-align: center;
    color: white;
    /* background: rgba(0, 0, 0, 0.4);  <- 이 부분을 삭제하거나 아래처럼 바꿉니다 */
    background: none; 
    padding: 0; 
    border-radius: 0;
    
    /* 배경 이미지가 밝을 때 글자가 안 보일 수 있으므로 그림자 추가 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
}
.banner-content a { text-decoration: none; color: white; }
.banner-content h2 { 
    font-size: 3.5rem; /* 크기를 조금 더 키워도 예쁩니다 */
    margin: 0 0 15px; 
    font-weight: 700;
}

.banner-content p {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 400;
}
/* 2. 티켓팅 공지 스타일 (스크롤 영역) */
.ticket-notice-container {
    width: 800px;
    margin: 40px auto;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.notice-header { background: #ff4d4d; color: white; padding: 8px 15px; border-radius: 4px; margin-right: 20px; }
.notice-body a { text-decoration: none; color: #333; }
.notice-body h4 { margin: 0 0 5px 0; font-size: 18px; }
.notice-body p { margin: 0; color: #555; font-size: 14px; }



/* [추가] 배너 컨트롤 버튼 그룹 스타일 */
.banner-controls {
    position: absolute;
    bottom: 40px; /* 하단 여백 */
    left: 40px;   /* 왼쪽 여백 */
    display: flex;
    gap: 15px;    /* 버튼 사이 간격 */
    z-index: 10;  /* 배너 이미지보다 위에 노출 */
}

.control-btn {
    background: rgba(255, 255, 255, 0.2); /* 반투명 흰색 배경 */
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5); /* 반투명 테두리 */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 동그랗게 */
    font-size: 24px;
    cursor:pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* 마우스 올렸을 때 스타일 */
.control-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border-color: #fff;
    transform: scale(1.05); /* 약간 커짐 */
}

/* 버튼 클릭 시 약간 들어가는 효과 */
.control-btn:active {
    transform: scale(0.95);
}