@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);
}
html, body { background: #020617 !important; }
/* 스크롤바 */
* {
scrollbar-width: thin;
scrollbar-color: #334155 #020617;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: #020617;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
border: 2px solid #020617;
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #475569 0%, #334155 100%);
}
/* 레이아웃 및 배경 */
#SPACE_WRAP {
position: relative;
width: 100%;
min-height: 100vh;
background: var(--bg-color);
overflow: hidden;
}
#LIST {
position: relative;
z-index: 10;
background: transparent;
color: var(--text-main);
font-family: 'Noto Sans KR', sans-serif;
width: 100%;
margin: 0 auto;
min-height: 100vh;
}
/* 애니메이션 */
@keyframes listFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 상단 타이틀 */
.TopTitle {
background: #02061b;
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: #1a2436;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
animation: listFadeUp 0.8s ease 0.2s forwards;
opacity: 0;
margin:0px 50px;
}
.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: 4px;
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; }
table {
width: calc(100% - 100px);
border-spacing: 0;
border:1px solid #2c3546;
border-top: 0px;
border-radius: 14px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
margin:0px 50px;
}
/* 테이블 공통 */
.List-Table { font-size: 0.9rem; }
.List-Header { background: rgba(56, 189, 248, 0.1); }
.List-Header th { text-align: center !important; padding: 17px 10px !important; font-size: 1rem; font-weight: 300; border-bottom: 1px solid var(--accent-blue); }
.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: #0c1224;
text-align: center;
}
.list-row { }
.list-row td { border-bottom: 1px solid var(--glass-border); padding: 17px 0px; }
.List-Table tr:not(.List-Header):hover { background: #020617 !important; }
/* 컬럼별 스타일 */
.Num { width: 80px; }
.Run { width: 150px; }
.subject { width: 250px; text-align: left; color: var(--accent-green); }
.daemon { width: 300px; text-align: left; color: var(--accent-blue); }
.memo { width: auto; text-align: left; }
.memo span { color: #656565; }
.event { width: 50px; text-align: left; color: var(--accent-purple); }
.korea_name { width: 230px; text-align: left; }
.caname { width: 100px; }
.ca2 { width: 100px; }
.ca3 { width: 100px; }
.day { width: 150px; }
.txt-events { color:#ecc411 !important; }
/* 배지 스타일 */
.run_btn, .event_btn {
display: inline-block;
width:80px;
padding: 5px 0px;
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_on2 { background: #4522c5; color: #fff; box-shadow: 0 0 10px rgba(77, 18, 185, 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); }
/* 메모 영역 폭 조절 및 말줄임 처리 */
.td-memo {
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 실시간 검색 입력창 스타일 */
.input-realtime {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
color: #fff;
padding: 0 15px;
height: 38px;
border-radius: 4px;
font-size: 0.85rem;
width: 200px;
transition: all 0.3s;
}
.input-realtime:focus {
border-color: var(--accent-blue);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
outline: none;
width: 250px;
}