@charset "utf-8";

:root {
    /* 우주 테마 색상 팔레트 */
    --dark-bg: #020617; /* 매우 깊은 우주색 */
    --dark-card-bg: rgba(15, 23, 42, 0.7); /* 반투명 카드 */
    --dark-card-border: rgba(99, 102, 241, 0.2);
    --dark-text-primary: #f8fafc;
    --dark-text-secondary: #cbd5e1;
    --dark-accent: #818cf8; /* 네온 느낌의 블루 */
    --dark-accent-hover: #c084fc; /* 보라색 은하계 포인트 */
    
    --title-bg: rgba(30, 41, 59, 0.8);
    --subject-bg: rgba(51, 65, 85, 0.6);
    --span-bg: #4f46e5;
}

body {
    background-color: var(--dark-bg);
    margin: 0;
    overflow-x: hidden;
    color: var(--dark-text-primary);
}

/* --- 우주 배경 애니메이션 --- */
.space-background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background: #000 url('https://i.imgur.com/Y79879A.png') repeat; /* 은하계 텍스처 */
    background-size: cover;
}

.stars {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent url('https://i.imgur.com/u79879A.png') repeat; /* 작은 별들 */
    z-index: 0;
}

.twinkling {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent url('https://i.imgur.com/897879A.png') repeat; /* 반짝이는 효과 */
    z-index: 1;
    animation: move-twink-back 200s linear infinite;
}

@keyframes move-twink-back {
    from { background-position: 0 0; }
    to { background-position: -10000px 5000px; }
}

/* --- INDEX 컨테이너 및 카드 (Glassmorphism 적용) --- */
#INDEX {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
    gap: 25px;
    position: relative;
    z-index: 10;
}

#INDEX section {
    width: 240px;
}

#INDEX section div {
    background: var(--dark-card-bg);
    border: 1px solid var(--dark-card-border);
    border-radius: 12px;
    margin-top: 20px;
    backdrop-filter: blur(10px); /* 배경 흐림 효과 */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

#INDEX section div:hover {
    transform: translateY(-5px);
    border-color: var(--dark-accent);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* 제목 및 리스트 스타일 (구조 유지) */
#INDEX section div .Title {
    background: var(--title-bg);
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--dark-card-border);
}

#INDEX section div .Title span {
    background: var(--span-bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

#INDEX section .Subjedt {
    background: var(--subject-bg);
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: var(--dark-accent);
    font-weight: bold;
    border-bottom: 1px solid var(--dark-card-border);
}

#INDEX section div .List {
    padding: 12px 16px 12px 28px;
    font-size: 12px;
    color: var(--dark-text-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

#INDEX section div .List::before {
    content: '★'; /* 우주 컨셉에 맞춘 별표 불렛 */
    position: absolute;
    left: 12px;
    color: var(--dark-accent);
    font-size: 10px;
}

#INDEX section a .List:hover {
    background-color: rgba(99, 102, 241, 0.2);
    color: #fff;
}

/* 로딩 오버레이 (구조 유지) */
.loading-overlay {
    background: #020617;
}


/* 킬릭 팝업 */
.PopupBackdrop {
    display:none; 
    position:fixed; 
    z-index:9998; 
    top:0; left:0; width:100%; height:100%; 
    background:rgba(0,0,0,0.8);
}
.PopupBlock {
    display:none; 
    position:fixed; 
    z-index:9999;
    width: 500px;
    background:#0c1224; 
    border:1px solid #232e42; 
    border-radius:8px;
    padding:30px 25px; 
    min-width:320px; 
    max-width:90%; 
    box-shadow:0 4px 24px rgba(0,0,0,0.8); 
    left:50%; 
    top:50%;
    transform:translate(-50%,-50%);
}

.PopupTitle {
    border-bottom: 1px solid var(--dark-accent);
    font-size: 16px;
    padding: 0px 0px 8px 15px;    
}
.PopupContent a {
    color: #ccc;
}
.PopupContent ul {
    padding: 15px 15px;
    border-bottom: 1px solid #232e42;
}
.PopupContent ul:hover {
    background: rgba(30, 31, 87, 0.3);
    border-bottom: 1px solid #303964;
}