/* ── 테마 시스템: CSS 커스텀 프로퍼티로 색상/모양 토큰을 정의하고,
값에 따라 전체 UI가 즉시 다시 스킨되도록 한다. index.html/app.js는 이 토큰들을
var(--token) 형태로 Tailwind 임의값 클래스에 참조한다. ── */
:root,
[data-theme="control-room"] {
--bg: #0a0a0c;
--text: #e2e8f0;
--text-dim: #64748b;
--panel-from: #1f1f24;
--panel-to: #17171b;
--border: #3a3a42;
--border-w: 2px;
--radius: 0.25rem;
--accent: #f59e0b;
--accent-to: #d97706;
--accent-text: #000000;
--up: #39ff6a;
--down: #ff3b3b;
--pending: #ffb400;
--font-main: 'JetBrains Mono', 'Noto Sans KR', ui-monospace, monospace;
--card-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 30px -10px rgba(0,0,0,0.75);
--btn-shadow: 0 2px 0 #000;
--btn-shadow-lg: 0 3px 0 #7c4a03;
--uppercase: uppercase;
--tracking: 0.05em;
}
[data-theme="terminal"] {
--bg: #020604;
--text: #4dff88;
--text-dim: #1f8a4c;
--panel-from: #061a0d;
--panel-to: #020a05;
--border: #1f8a4c;
--border-w: 1px;
--radius: 0rem;
--accent: #4dff88;
--accent-to: #22c55e;
--accent-text: #021a0a;
--up: #4dff88;
--down: #ff4d4d;
--pending: #ffe14d;
--font-main: 'JetBrains Mono', 'Noto Sans KR', ui-monospace, monospace;
--card-shadow: 0 0 0 1px rgba(77,255,136,0.15), 0 0 22px -6px rgba(77,255,136,0.35);
--btn-shadow: 0 0 0 1px rgba(77,255,136,0.4);
--btn-shadow-lg: 0 0 12px -2px rgba(77,255,136,0.6);
--uppercase: uppercase;
--tracking: 0.08em;
}
[data-theme="neubrutalism"] {
--bg: #fdf3e7;
--text: #14141a;
--text-dim: #55555f;
--panel-from: #ffffff;
--panel-to: #ffffff;
--border: #14141a;
--border-w: 3px;
--radius: 0rem;
--accent: #ff5a5f;
--accent-to: #ff5a5f;
--accent-text: #14141a;
--up: #06d6a0;
--down: #ff5a5f;
--pending: #ffd23f;
--font-main: 'Inter', 'Noto Sans KR', ui-sans-serif, sans-serif;
--card-shadow: 6px 6px 0 0 var(--border);
--btn-shadow: 4px 4px 0 0 var(--border);
--btn-shadow-lg: 5px 5px 0 0 var(--border);
--uppercase: none;
--tracking: 0;
}
[data-theme="synthwave"] {
--bg: #170b2e;
--text: #f4d9ff;
--text-dim: #9d6fc9;
--panel-from: #2c1250;
--panel-to: #1c0a38;
--border: #8b2fc9;
--border-w: 2px;
--radius: 0.75rem;
--accent: #ff2ec4;
--accent-to: #7c3aed;
--accent-text: #0b0014;
--up: #00f0ff;
--down: #ff2f6e;
--pending: #ffd166;
--font-main: 'Orbitron', 'Noto Sans KR', ui-sans-serif, sans-serif;
--card-shadow: 0 0 0 1px rgba(255,46,196,0.15), 0 0 30px -8px rgba(0,240,255,0.35), 0 0 50px -15px rgba(255,46,196,0.4);
--btn-shadow: 0 0 12px -2px rgba(255,46,196,0.6);
--btn-shadow-lg: 0 0 20px -4px rgba(255,46,196,0.8);
--uppercase: uppercase;
--tracking: 0.05em;
}
[data-theme="dotmatrix"] {
--bg: #9bbc0f;
--text: #0f380f;
--text-dim: #4c6b1f;
--panel-from: #aecf2a;
--panel-to: #9bbc0f;
--border: #0f380f;
--border-w: 3px;
--radius: 0rem;
--accent: #306230;
--accent-to: #0f380f;
--accent-text: #9bbc0f;
--up: #1b4d1b;
--down: #8b1a1a;
--pending: #6b5a1a;
--font-main: 'Press Start 2P', 'Noto Sans KR', ui-monospace, monospace;
--card-shadow: inset 0 0 0 2px rgba(15,56,15,0.25), 4px 4px 0 0 rgba(15,56,15,0.6);
--btn-shadow: 3px 3px 0 0 #0f380f;
--btn-shadow-lg: 4px 4px 0 0 #0f380f;
--uppercase: uppercase;
--tracking: 0;
}
[data-theme="paper"] {
--bg: #f7f1e3;
--text: #3d2b1f;
--text-dim: #8a7462;
--panel-from: #fffdf8;
--panel-to: #f3ead9;
--border: #c9a97e;
--border-w: 2px;
--radius: 1rem;
--accent: #e8a1a1;
--accent-to: #d98a8a;
--accent-text: #3d2b1f;
--up: #6f9457;
--down: #c96a6a;
--pending: #d19a3d;
--font-main: 'Gaegu', 'Noto Sans KR', ui-sans-serif, sans-serif;
--card-shadow: 2px 3px 0 rgba(61,43,31,0.1), 0 10px 20px -12px rgba(61,43,31,0.3);
--btn-shadow: 2px 2px 0 0 rgba(61,43,31,0.2);
--btn-shadow-lg: 3px 3px 0 0 rgba(61,43,31,0.25);
--uppercase: none;
--tracking: 0;
}
body { background: var(--bg); }
/* 테마별 배경 패턴 */
.theme-bg-pattern {
background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
background-size: 36px 36px;
}
[data-theme="terminal"] .theme-bg-pattern {
background-image: repeating-linear-gradient(0deg, rgba(77,255,136,0.05) 0 1px, transparent 1px 3px);
background-size: 100% 3px;
}
[data-theme="neubrutalism"] .theme-bg-pattern {
background-image: radial-gradient(#14141a22 1.5px, transparent 1.5px);
background-size: 20px 20px;
}
[data-theme="synthwave"] .theme-bg-pattern {
background-image:
radial-gradient(ellipse at 50% 100%, rgba(255,46,196,0.25), transparent 60%),
repeating-linear-gradient(0deg, rgba(0,240,255,0.08) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(0,240,255,0.08) 0 1px, transparent 1px 40px);
background-size: auto, 100% 40px, 40px 100%;
}
[data-theme="dotmatrix"] .theme-bg-pattern {
background-image:
repeating-linear-gradient(0deg, rgba(15,56,15,0.15) 0 2px, transparent 2px 4px),
repeating-linear-gradient(90deg, rgba(15,56,15,0.15) 0 2px, transparent 2px 4px);
background-size: 4px 4px;
}
[data-theme="paper"] .theme-bg-pattern {
background-image: radial-gradient(rgba(61,43,31,0.1) 1px, transparent 1px);
background-size: 18px 18px;
}
/* 테마 전용 장식 요소 표시/숨김 (관제실 리벳 등) */
[data-theme="control-room"] .decor-rivet { display: inline-block; }
[data-theme="terminal"] .decor-rivet,
[data-theme="neubrutalism"] .decor-rivet,
[data-theme="synthwave"] .decor-rivet,
[data-theme="dotmatrix"] .decor-rivet,
[data-theme="paper"] .decor-rivet { display: none; }
@keyframes led-blink {
0%, 100% { opacity: 1; filter: brightness(1); }
50% { opacity: 0.5; filter: brightness(0.6); }
}
.animate-led-blink { animation: led-blink 1.1s ease-in-out infinite; }
@keyframes text-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.animate-text-blink { animation: text-blink 0.9s step-start infinite; }
::selection {
background: rgba(245, 158, 11, 0.35);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
filter: brightness(1.3);
}