:root {
    --xv63ga7: #000019;    /* 최상단 깊은 남색 */
    --xv63ga8: #101029;    /* 상단 남색 */
    --xv63gaa: rgb(10, 27, 78);  /* 중간 진한 파란색 */
    --xv63gaf: #202039;    /* 하단 어두운 회색-파랑 */
    --xv63gag: #333338;    /* 최하단 회색-파랑 */
    --xv63gah: #fff;       /* 흰색 (별들용) */
}

/* ========== CLUBTABLE 전용 우주 테마 ========== */

/* 전체 페이지 컨테이너 */
.clubtable-page {
    position: relative;
    background: transparent;
    min-height: auto;
    padding-bottom: 0;
}

/* 우주 배경 - 전체 화면을 덮지만 스크롤에 영향 없음 */
.clubtable-page .space-background {
    background: 
        /* 상단: 깊은 밤하늘 */
        linear-gradient(180deg, var(--xv63ga7) 0%, var(--xv63ga8) 30%, var(--xv63gaa) 60%, var(--xv63gaf) 80%, var(--xv63gag) 100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

/* 별들 컨테이너 - 전체 화면 */
.clubtable-page .stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

/* 메인 콘텐츠 래퍼 - 우주 배경 위에 */
.clubtable-content-wrapper {
    position: relative;
    z-index: 2;
    background: transparent;
    min-height: auto;
    padding-bottom: 0;
}

/* all.css의 main-container와 완벽 호환 */
.clubtable-content-wrapper .main-container {
    position: relative;
    z-index: 3;
    background: transparent;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 개별 별 - 성능 최적화된 애니메이션 */
.clubtable-page .star {
    position: absolute !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    transform: translateZ(0); /* GPU 가속 */
    will-change: opacity, transform; /* 애니메이션 최적화 */
    box-shadow: 0 0 2px #ffffff !important;
    display: block !important;
    min-width: 1px !important;
    min-height: 1px !important;
}

/* 큰 별들 (더 밝게) */
.clubtable-page .star:nth-child(3n) {
    background: #ffffff !important;
    box-shadow: 0 0 3px #ffffff, 0 0 6px rgba(255, 255, 255, 0.6);
}

/* 중간 별들 */
.clubtable-page .star:nth-child(3n+1) {
    background: #e6f3ff !important;
    box-shadow: 0 0 2px #e6f3ff;
}

/* 작은 별들 */
.clubtable-page .star:nth-child(3n+2) {
    background: #b8d4f0 !important;
    box-shadow: 0 0 1px #b8d4f0;
}

/* 별 깜빡임 애니메이션 - 성능 최적화 */
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.3; 
        transform: translateZ(0) scale(0.8);
    }
    50% { 
        opacity: 1; 
        transform: translateZ(0) scale(1.2);
    }
}

/* 다양한 별 크기와 애니메이션 지연 - 성능 분산 */
.clubtable-page .star:nth-child(5n) { 
    animation: twinkle 4s infinite; 
    animation-delay: 0s;
}
.clubtable-page .star:nth-child(5n+1) { 
    animation: twinkle 4s infinite; 
    animation-delay: 0.8s;
}
.clubtable-page .star:nth-child(5n+2) { 
    animation: twinkle 4s infinite; 
    animation-delay: 1.6s;
}
.clubtable-page .star:nth-child(5n+3) { 
    animation: twinkle 4s infinite; 
    animation-delay: 2.4s;
}
.clubtable-page .star:nth-child(5n+4) { 
    animation: twinkle 4s infinite; 
    animation-delay: 3.2s;
}

/* card-box 클래스도 반투명하게 */
.card-box {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* ========== 푸터 전체 너비 스타일 ========== */
/* clubtable 페이지에서 푸터가 전체 너비를 차지하도록 설정 */
.clubtable-page ~ footer,
.clubtable-page + footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* 푸터 내부 컨테이너도 전체 너비로 */
.clubtable-page ~ footer .container,
.clubtable-page + footer .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 더 확실한 방법: body에 clubtable 클래스가 있을 때 푸터 스타일링 */
body.clubtable-page footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

body.clubtable-page footer .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 추가: Bootstrap의 container 클래스 오버라이드 */
body.clubtable-page footer .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}