html, body { background: #0b0f14; color: #e5e7eb; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Malgun Gothic', '맑은 고딕', sans-serif; }
.card { background: #141b24; border: 1px solid #1f2937; border-radius: 10px; }
.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.ipt { background: #0f1520; border: 1px solid #334155; color: #e5e7eb; padding: 8px 10px; border-radius: 6px; width: 100%; font-size: 14px; }
.ipt:focus { outline: none; border-color: #3b82f6; }
.row-error .ipt { border-color: #ef4444 !important; background: #2a1518; }
.btn { padding: 8px 14px; border-radius: 6px; font-weight: 500; font-size: 14px; transition: all .15s; cursor: pointer; border: none; }
.btn-primary { background: #ef4444; color: white; }
.btn-primary:hover:not(:disabled) { background: #dc2626; }
.btn-primary:disabled { background: #7f1d1d; opacity: .5; cursor: not-allowed; }
.btn-secondary { background: #374151; color: white; }
.btn-secondary:hover { background: #4b5563; }
.btn-ghost { color: #9ca3af; background: transparent; }
.btn-ghost:hover { color: white; background: #1f2937; }
.seg-btn { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: #1f2937; color: #9ca3af; border: 1px solid #374151; cursor: pointer; transition: all .15s; }
.seg-btn:hover { background: #374151; color: white; }
.seg-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; }
.seg-input { background: #0f1520; border: 1px solid #334155; color: #e5e7eb; padding: 4px 8px; border-radius: 6px; font-size: 12px; width: 60px; }
.seg-input:focus { outline: none; border-color: #3b82f6; }
/* 탭 */
.tab-btn { padding: 8px 16px; font-size: 14px; font-weight: 600; color: #9ca3af; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all .15s; }
.tab-btn:hover { color: #e5e7eb; }
.tab-btn.active { color: #3b82f6; border-bottom-color: #3b82f6; }
/* 토글 스위치 */
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #374151; border-radius: 999px; transition: .2s; }
.toggle-slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; }
input:checked + .toggle-slider { background: #10b981; }
input:checked + .toggle-slider::before { transform: translateX(16px); }
input:disabled + .toggle-slider { opacity: .5; cursor: not-allowed; }
/* 댓글 피드 버블 */
.comment-bubble { background: #0f1520; border-left: 3px solid #3b82f6; padding: 8px 12px; border-radius: 4px; animation: fade-in .25s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.toast { animation: slide-in .3s ease-out; }
@keyframes slide-in { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip-live { background: rgba(239, 68, 68, .15); color: #fca5a5; }
.chip-ended { background: rgba(107, 114, 128, .2); color: #9ca3af; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
.modal-bg { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
canvas { max-width: 100%; }