@charset "utf-8";

/* 변수 정의 */
:root {
    --bg-color: #020617; 
    --card-bg: rgba(15, 23, 42, 0.6);
    --accent-blue: #38bdf8;
    --accent-purple: #818cf8;
    --accent-green: #4ade80;
    --text-main: #f1f5f9;
    --text-dim: #94a3b8;
    --glass-border: rgba(255, 255, 255, 0.08);
    --modal-bg: rgba(15, 23, 42, 0.95);
}

/* 레이아웃 및 배경 */
#SPACE_WRAP {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--bg-color);
    overflow: hidden;
}

#stars-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

.nebula {
    position: absolute;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(129, 140, 248, 0.05) 0%, transparent 40%);
    z-index: 0;
}

#LIST {
    position: relative;
    z-index: 10;
    background: transparent; 
    color: var(--text-main);
    font-family: 'Noto Sans KR', sans-serif;
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
}

/* 애니메이션 */
@keyframes listFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 상단 타이틀 */
.TopTitle { 
    padding: 40px 20px; 
    border-bottom: 1px solid var(--glass-border); 
    margin-bottom: 20px; 
    animation: listFadeUp 0.8s ease forwards;
    text-align: center;
}
.TopTitle p { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 2.2rem; 
    font-weight: 700; 
    margin: 0;
    color: var(--accent-blue); 
    letter-spacing: 4px;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}
.TopTitle span { font-size: 0.9rem; color: var(--text-dim); }

/* 컨트롤 바 */
.Control-Bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 12px 20px; 
    background: var(--card-bg); 
    border-radius: 12px; 
    margin: 0 20px 15px 20px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    animation: listFadeUp 0.8s ease 0.2s forwards; 
    opacity: 0;
}

.ctrl-group { display: flex; gap: 8px; align-items: center; }
.ctrl-group button { padding:0px 20px; }

/* 버튼 및 셀렉트 박스 스타일 수정 */
button, select {
    height: 36px;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.8); 
    border: 1px solid var(--glass-border);
    color: var(--text-main); 
    padding: 0 20px; /* 버튼 및 셀렉트 좌우 패딩 20px 적용 */
    border-radius: 6px; 
    cursor: pointer;
    font-size: 0.85rem; 
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    outline: none;
}

/* 셀렉트 메뉴 마우스 오버 효과 추가 */
select:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

button:hover { 
    background: var(--accent-blue); 
    color: #000; 
    box-shadow: 0 0 10px var(--accent-blue); 
    border-color: var(--accent-blue);
}

button i { margin-right: 8px; }

/* 테이블 공통 */
.List-Table { width: 98%; margin: 0 auto; border-collapse: collapse; backdrop-filter: blur(5px); table-layout: fixed; }
.List-Header { background: rgba(56, 189, 248, 0.1); border-bottom: 2px solid var(--accent-blue); }
.List-Header th { padding: 15px 10px; color: var(--accent-blue); font-size: 0.85rem; font-weight: 500; }

.List-Table tr:not(.List-Header) { 
    opacity: 0;
    animation: listFadeUp 0.6s ease forwards;
    border-bottom: 1px solid var(--glass-border); 
    transition: 0.2s; 
    cursor: pointer; 
    background: rgba(255, 255, 255, 0.02); 
}
.List-Table tr:not(.List-Header):hover { background: rgba(56, 189, 248, 0.07); }
.List-Table td { padding: 18px 10px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 컬럼별 스타일 */
.Num { width: 60px; color: var(--text-dim); font-family: 'Orbitron'; font-size: 0.8rem; }
.Run { width: 95px; text-align: center !important; }
.Subject { width: 250px; text-align: left !important; font-size: 0.95rem; }
.Subject2 { width: auto; text-align: left !important; font-size: 0.95rem; }
.CaName { width: 100px; color: var(--accent-blue); }
.Ca2 { width: 100px; color: var(--text-dim); }
.Ca3 { width: 100px; color: var(--text-dim); }
.Day { width: 150px; color: var(--text-dim); font-size: 0.8rem; }

/* 텍스트 강조 클래스 */
.txt-main-sub { color: var(--accent-green); font-weight: 500; }
.txt-db-table { color: var(--text-dim); font-size: 0.75rem; margin-left: 8px; }
.txt-kor-name { color: var(--accent-blue); font-size: 0.85rem; margin-left: 5px; }
.txt-desc { color: var(--text-dim); font-size: 0.75rem; opacity: 0.8; margin-left: 8px; }

/* 배지 스타일 */
.run_btn, .event_btn {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 55px;
    text-align: center;
    vertical-align: middle;
}
.run_on { background: #22c55e; color: #fff; box-shadow: 0 0 10px rgba(34, 197, 94, 0.4); }
.run_off { background: #7f1d1d; color: #f87171; border: 1px solid #991b1b; }
.ev_done { background: var(--accent-purple); color: #fff; margin-left: 4px; }
.ev_start { background: #475569; color: #cbd5e1; margin-left: 4px; }

/* 모달 레이어 (공통) */
.NoticeLayer { 
    display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 95%; max-width: 480px; background: var(--modal-bg); padding: 30px; border-radius: 20px; 
    border: 1px solid var(--accent-blue); z-index: 10001; box-shadow: 0 0 40px rgba(0,0,0,0.7);
    backdrop-filter: blur(20px);
}
.NoticeLayer h3 { margin-top:0; color:var(--accent-blue); font-family:Orbitron; letter-spacing:1px; }
.notice-content { font-size:0.95rem; line-height:1.7; color:var(--text-main); max-height:300px; overflow-y:auto; padding-right:10px; }
.modal-footer { display:flex; justify-content:space-between; margin-top:25px; }
.modal-footer button { padding:0px 30px; }

/* 검색 레이어 */
section#SCH {
    display: none; position: fixed; top: 0; left: 0; 
    width: 100%; height: 100%; background: rgba(2, 6, 23, 0.85); 
    z-index: 9999; align-items: center; justify-content: center;
    backdrop-filter: blur(10px);
}
.search-box {
    background: rgba(15, 23, 42, 0.9); padding: 35px; border-radius: 20px; 
    width: 90%; max-width: 420px; border: 1px solid var(--accent-blue); 
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.2);
}
.search-box h3 { margin: 0 0 25px 0; color: var(--accent-blue); font-size: 1.1rem; font-family: 'Orbitron'; }
.search-input {
    width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--accent-blue); 
    color: #fff; font-size: 1.2rem; outline: none; padding: 12px 5px;
}

/* 페이지네이션 */
.Pagination { text-align: center; padding: 40px 0; animation: listFadeUp 1s ease 0.5s forwards; opacity: 0; }
.Pagination a, .Pagination b {
    display: inline-block; padding: 7px 14px; margin: 0 3px;
    border-radius: 6px; border: 1px solid var(--glass-border); color: var(--text-dim); text-decoration: none; font-size: 0.9rem;
}
.Pagination b { background: var(--accent-blue); color: #000; border-color: var(--accent-blue); }