@charset "utf-8";
/* ═══════════════════════════════════════════
CSS 변수
═══════════════════════════════════════════ */
:root {
--bg: #020617;
--card-bg: #1a2436;
--card-border: rgba(255, 255, 255, 0.07);
--accent-blue: #38bdf8;
--accent-purple: #818cf8;
--accent-green: #4ade80;
--accent-amber: #f59e0b;
--accent-red: #f87171;
--text-main: #f1f5f9;
--text-dim: #64748b;
--text-mid: #94a3b8;
--modal-bg: rgba(10, 18, 40, 0.97);
--row-core-bg: rgba(56, 189, 248, 0.055);
--row-prio-bg: rgba(245, 158, 11, 0.06);
}
body, html { background: #020617 !important; }
/* ═══════════════════════════════════════════
전체 레이아웃
═══════════════════════════════════════════ */
#SPACE_WRAP {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
}
.nebula {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 15% 25%, rgba(56,189,248,.04) 0%, transparent 50%),
radial-gradient(ellipse at 85% 75%, rgba(129,140,248,.04) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
#LIST {
position: relative;
z-index: 10;
color: var(--text-main);
font-family: 'Noto Sans KR', sans-serif;
padding: 20px 0 60px;
width: 100%;
margin: 0 auto;
min-height: 100vh;
}
/* ═══════════════════════════════════════════
애니메이션
═══════════════════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════
상단 타이틀
═══════════════════════════════════════════ */
.TopTitle {
padding: 38px 24px 30px;
border-bottom: 1px solid var(--card-border);
margin-bottom: 18px;
text-align: center;
animation: fadeUp .8s ease forwards;
background:#020617;
}
.TopTitle p {
font-family: 'Orbitron', sans-serif;
font-size: 2rem;
font-weight: 700;
margin: 0 0 6px;
color: var(--accent-blue);
letter-spacing: 4px;
text-shadow: 0 0 20px rgba(56,189,248,.35);
}
.TopTitle span {
font-size: .85rem;
color: var(--text-dim);
letter-spacing: 1px;
}
/* ═══════════════════════════════════════════
컨트롤 바
═══════════════════════════════════════════ */
.Control-Bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 20px;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 5px;
margin: 0 20px 16px;
animation: fadeUp .8s ease .15s both;
flex-wrap: wrap;
}
.ctrl-group {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
/* ─── 공통 버튼 / 셀렉트 ─── */
.ctrl-group button, button, select {
height: 40px;
box-sizing: border-box;
background: rgba(30, 41, 59, .75);
border: 1px solid var(--card-border);
color: var(--text-main);
border-radius: 3px;
cursor: pointer;
font-size: .82rem;
font-family: inherit;
transition: border-color .18s, box-shadow .18s, background .18s, color .18s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
outline: none;
padding: 0px 20px;
}
select option {
background-color: #0f172a;
color: #f1f5f9;
}
button i { pointer-events: none; }
button:hover,
select:hover {
border-color: var(--accent-blue);
box-shadow: 0 0 8px rgba(56,189,248,.2);
background: rgba(56,189,248,.08);
}
/* 특수 버튼 */
.btn-admin { background: #334155; }
.btn-write { background: var(--accent-blue) !important; color: #000 !important; font-weight: 700; border-color: var(--accent-blue) !important; }
.btn-write:hover { box-shadow: 0 0 14px rgba(56,189,248,.5) !important; }
.btn-purple { background: var(--accent-purple); color: #fff; border: none; }
.btn-cancel { background: transparent; border: 1px solid var(--text-dim); color: var(--text-dim); }
/* 필터 활성 상태 */
button.filter-active {
background: rgba(56,189,248,.15) !important;
border-color: var(--accent-blue) !important;
color: var(--accent-blue) !important;
box-shadow: 0 0 10px rgba(56,189,248,.25) !important;
}
/* ─── 실시간 검색 인풋 ─── */
.realtime-search-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
background: rgba(30, 41, 59, .75);
border: 1px solid var(--card-border);
border-radius: 5px;
padding: 0 0 0 12px;
transition: border-color .18s;
}
.realtime-search-wrap:focus-within {
border-color: var(--accent-blue);
box-shadow: 0 0 8px rgba(56,189,248,.2);
}
.realtime-search-wrap input {
background: transparent;
border: none;
color: var(--text-main);
font-size: .82rem;
font-family: inherit;
width: 100%;
outline: none;
height: 100%;
padding: 0;
}
.realtime-search-wrap input::placeholder { color: var(--text-dim); }
/* ═══════════════════════════════════════════
테이블
═══════════════════════════════════════════ */
.List-Table {
width: 98%;
margin: 0 auto;
border-collapse: collapse;
table-layout: fixed;
background: #0c1224;
}
/* 헤더 */
.List-Header {
background: #0c1224;
border-bottom: 2px solid rgba(56,189,248,.4);
}
.List-Header th {
font-size: 0.9rem;
font-weight: 400;
letter-spacing: .5px;
white-space: nowrap;
padding:20px 0px;
}
/* 바디 행 */
.List-Table tbody tr {
opacity: 0;
animation: fadeUp .55s ease forwards;
border-bottom: 1px solid #1a2436;
transition: background .18s;
cursor: pointer;
}
.List-Table tbody tr:hover { background: #020617 }
/* 핵심 행 */
.List-Table tbody tr.row-core {
background: #020617;
}
.List-Table tbody tr.row-core:hover { background: rgba(56,189,248,.1); }
/* 우선 행 */
.List-Table tbody tr.row-priority {
}
.List-Table tbody tr.row-priority:hover { background: #000000; }
/* 셀 공통 */
.List-Table td {
padding: 20px 8px;
font-size: 0.9rem;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* ─── 컬럼 너비 ─── */
td { text-align:left !important; }
.col-num { width: 80px; color: var(--text-dim); font-family: 'Orbitron'; text-align:center !important; }
.col-run { width: 82px; text-align:center !important; }
.col-subject { width: 220px; }
.col-desc { }
.col-icons { width: 230px; }
.col-ca { width: 80px; color: var(--accent-blue); text-align:center !important; }
.col-ca2 { width: 72px; color: var(--text-dim); text-align:center !important; }
.col-day { width: 120px; color: var(--text-dim); font-family: 'Orbitron'; text-align:center !important; }
/* 빈 행 */
.empty-row {
text-align: center !important;
padding: 80px !important;
color: var(--text-dim);
font-size: .9rem;
letter-spacing: 2px;
}
/* ─── 텍스트 클래스 ─── */
.txt-main-sub { color: var(--accent-green); font-weight: 400; }
.txt-ledger { color: var(--accent-purple); }
.txt-db-table { }
.txt-kor-name { color: var(--accent-blue); }
.txt-desc { color: var(--text-mid); }
.txt-empty { color: var(--text-dim); opacity: .4; }
/* ─── 상태 배지 ─── */
.run_btn, .event_btn {
display: inline-block;
padding: 3px 9px;
border-radius: 4px;
font-size: .72rem;
font-weight: 700;
min-width: 46px;
text-align: center;
letter-spacing: .3px;
}
.run_on { background: #166534; color: #4ade80; border: 1px solid #15803d; box-shadow: 0 0 8px rgba(74,222,128,.2); }
.run_off { background: #7f1d1d; color: #f87171; border: 1px solid #991b1b; }
.ev_done { background: rgba(129,140,248,.2); color: var(--accent-purple); border: 1px solid rgba(129,140,248,.3); }
.ev_start{ background: rgba(100,116,139,.2); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }
/* ─── 아이콘 그룹 ─── */
.icon-group {
float:right;
align-items: center;
justify-content: center;
gap: 5px;
flex-wrap: wrap;
}
.ico {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: .7rem;
padding: 2px 5px;
border-radius: 3px;
white-space: nowrap;
cursor: default;
}
.ico em {
font-style: normal;
font-size: .68rem;
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ico i { font-size: .72rem; }
.ico-label { color: var(--accent-purple); background: rgba(129,140,248,.12); border: 1px solid rgba(129,140,248,.2); }
.ico-core { color: var(--accent-blue); background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.2); }
.ico-priority { color: var(--accent-amber); background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2); }
.ico-content { color: #67e8f9; background: rgba(103,232,249,.08); border: 1px solid rgba(103,232,249,.18); }
.ico-special { color: var(--accent-amber); background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.15); }
.ico-memo { color: #a78bfa; background: rgba(167,139,250,.08); border: 1px solid rgba(167,139,250,.18); }
.ico-link { color: var(--accent-green); background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.15); }
.ico-file { color: var(--text-mid); background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.15); }
/* ═══════════════════════════════════════════
모달 공통
═══════════════════════════════════════════ */
.ModalLayer {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: min(95%, 500px);
background: var(--modal-bg);
padding: 30px;
border-radius: 18px;
border: 1px solid rgba(56,189,248,.3);
z-index: 10001;
box-shadow: 0 0 50px rgba(0,0,0,.7), 0 0 20px rgba(56,189,248,.08);
backdrop-filter: blur(24px);
}
.ModalLayer h3 {
margin: 0 0 18px;
color: var(--accent-blue);
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
letter-spacing: 1px;
}
.modal-body {
font-size: .92rem;
line-height: 1.75;
color: var(--text-main);
max-height: 300px;
overflow-y: auto;
padding-right: 6px;
}
.modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
gap: 10px;
}
.modal-footer button { padding: 0 24px; }
/* ═══════════════════════════════════════════
검색 레이어
═══════════════════════════════════════════ */
section#SCH {
display: none;
position: fixed;
inset: 0;
background: rgba(2, 6, 23, .88);
z-index: 9999;
align-items: center;
justify-content: center;
backdrop-filter: blur(12px);
}
.search-box {
background: rgba(15, 23, 42, .95);
padding: 36px;
border-radius: 20px;
width: min(92%, 440px);
border: 1px solid rgba(56,189,248,.3);
box-shadow: 0 0 50px rgba(56,189,248,.1);
}
.search-box h3 {
margin: 0 0 22px;
color: var(--accent-blue);
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
letter-spacing: 1px;
}
.search-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid var(--accent-blue);
color: #fff;
font-size: 1.15rem;
font-family: inherit;
outline: none;
padding: 10px 4px;
box-sizing: border-box;
}
.search-input::placeholder { color: var(--text-dim); }
.search-actions {
margin-top: 20px;
display: flex;
gap: 10px;
}
/* ═══════════════════════════════════════════
페이지네이션
═══════════════════════════════════════════ */
#TERM_PAGING_DIRECT {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
padding: 44px 0 20px;
animation: fadeUp .8s ease .4s both;
}
.trm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 6px;
border: 1px solid var(--card-border);
color: var(--text-dim);
text-decoration: none;
font-size: .85rem;
font-family: 'Orbitron', monospace;
background: rgba(15,23,42,.5);
transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
cursor: pointer;
}
.trm-btn:hover {
border-color: var(--accent-blue);
color: var(--accent-blue);
background: rgba(56,189,248,.08);
}
.trm-btn.trm-current {
background: var(--accent-blue);
color: #000;
border-color: var(--accent-blue);
font-weight: 700;
box-shadow: 0 0 12px rgba(56,189,248,.35);
cursor: default;
}
.trm-btn i {
font-size: .75rem;
}
/* ═══════════════════════════════════════════
메모 사이드 패널
═══════════════════════════════════════════ */
.memo-note-btn i { color: #f472b6; }
.memo-side-panel {
position: fixed;
left: 14px;
top: 14px;
width: 360px;
height: calc(100vh - 28px);
display: flex;
flex-direction: column;
background: rgba(15, 23, 42, 0.96);
border: 1px solid rgba(56, 189, 248, 0.28);
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.8);
backdrop-filter: blur(12px);
padding: 18px 16px 14px;
border-radius: 10px;
box-sizing: border-box;
z-index: 11000;
overflow: hidden;
transform: translateX(-110%);
transition: transform 0.25s ease;
}
.memo-side-panel.open {
transform: translateX(0);
}
.memo-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 2px 12px;
}
.memo-panel-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-family: 'Orbitron', sans-serif;
color: #f472b6;
font-weight: 700;
}
.memo-panel-close {
padding: 6px 10px;
font-size: 0.8rem;
line-height: 1;
}
.memo-panel-layout-wrap {
margin: 4px 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.memo-total-text {
font-size: 0.78rem;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
letter-spacing: 0.4px;
color: #cbd5e1;
white-space: nowrap;
}
.memo-layout-switch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 130px;
height: 34px;
padding: 0 10px;
background: rgba(2, 6, 23, 0.72);
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 999px;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.08);
}
.memo-layout-label {
position: relative;
z-index: 2;
font-size: 0.75rem;
font-weight: 700;
color: #94a3b8;
letter-spacing: 0.2px;
}
.memo-layout-thumb {
position: absolute;
left: 4px;
top: 4px;
width: 58px;
height: 24px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.45), rgba(129, 140, 248, 0.45));
border: 1px solid rgba(125, 211, 252, 0.45);
transition: transform 0.2s ease;
}
.memo-layout-switch.is-layout-2 .memo-layout-thumb {
transform: translateX(64px);
}
.memo-layout-switch:not(.is-layout-2) .memo-layout-label-1,
.memo-layout-switch.is-layout-2 .memo-layout-label-2 {
color: #e2e8f0;
}
.memo-card-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 0 10px 14px 0;
}
.memo-card-list.layout-2 {
grid-template-columns: 1fr 1fr;
}
.memo-card-list::-webkit-scrollbar { width: 6px; }
.memo-card-list::-webkit-scrollbar-track { background: transparent; }
.memo-card-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.memo-card-list.has-scroll::-webkit-scrollbar-track { background: rgba(2, 6, 23, 0.78); }
.memo-card-list.has-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(56, 189, 248, 0.55), rgba(129, 140, 248, 0.55));
border: 1px solid rgba(56, 189, 248, 0.35);
}
.memo-card-list.has-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(56, 189, 248, 0.75), rgba(129, 140, 248, 0.75));
}
.memo-card-item {
border: 1px solid rgba(56, 189, 248, 0.45);
background: rgba(30, 41, 59, 0.7);
border-radius: 6px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.memo-card-date {
font-size: 0.72rem;
color: #cbd5e1;
font-family: 'Orbitron', sans-serif;
}
.memo-card-subject {
font-size: 0.78rem;
font-weight: 700;
color: var(--accent-blue);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.memo-card-content {
font-size: 0.82rem;
line-height: 1.55;
color: #e2e8f0;
min-height: 52px;
word-break: break-word;
}
.memo-card-link {
text-decoration: none;
text-align: center;
font-size: 0.72rem;
font-weight: 700;
padding: 6px 8px;
border-radius: 7px;
border: 1px solid rgba(56, 189, 248, 0.4);
color: #7dd3fc;
background: rgba(56, 189, 248, 0.08);
transition: 0.2s;
}
.memo-card-link:hover {
border-color: var(--accent-blue);
color: #dbeafe;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}
.memo-empty {
color: var(--text-dim);
font-size: 0.85rem;
padding: 20px 6px;
}
#SPACE_WRAP.memo-open #LIST {
padding-left: 374px;
transition: padding-left 0.25s ease;
}
@media (max-width: 1200px) {
#SPACE_WRAP.memo-open #LIST { padding-left: 0; }
.memo-side-panel { left: 0; top: 0; height: 100vh; border-radius: 0; }
}