2026-04-07 18:55:06 +09:00
|
|
|
@import "tailwindcss";
|
2026-04-14 13:35:39 +09:00
|
|
|
@import "overlayscrollbars/overlayscrollbars.css";
|
2026-04-13 14:20:32 +09:00
|
|
|
|
|
|
|
|
@theme {
|
|
|
|
|
--font-sans: "Maplestory", "Noto Sans KR", system-ui, -apple-system, sans-serif;
|
|
|
|
|
--font-maple: "Maplestory", "Noto Sans KR", sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-17 21:59:35 +09:00
|
|
|
/* 테마 토큰 - dark (default) */
|
|
|
|
|
:root {
|
|
|
|
|
color-scheme: dark;
|
|
|
|
|
--bg-from: #030712;
|
|
|
|
|
--bg-via: #030712;
|
|
|
|
|
--bg-to: #0f172a;
|
|
|
|
|
--scrollbar-thumb: rgba(255, 255, 255, 0.12);
|
|
|
|
|
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
|
|
|
|
|
--scrollbar-track: transparent;
|
|
|
|
|
|
|
|
|
|
--header-bg: rgba(3, 7, 18, 0.8);
|
|
|
|
|
--header-border: rgba(255, 255, 255, 0.05);
|
|
|
|
|
|
|
|
|
|
--text-strong: #ffffff;
|
|
|
|
|
--text-emphasis: #e5e7eb;
|
|
|
|
|
--text-muted: #9ca3af;
|
|
|
|
|
--text-dim: #6b7280;
|
|
|
|
|
--text-slash: rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
|
|
|
|
--toggle-bg: rgba(17, 24, 39, 0.6);
|
|
|
|
|
--toggle-border: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--toggle-thumb-from: #e5e7eb;
|
|
|
|
|
--toggle-thumb-to: #9ca3af;
|
|
|
|
|
--toggle-thumb-icon: #0f172a;
|
2026-04-17 22:05:33 +09:00
|
|
|
|
|
|
|
|
--card-bg-from: rgba(17, 24, 39, 0.8);
|
|
|
|
|
--card-bg-to: rgba(17, 24, 39, 0.4);
|
|
|
|
|
--card-border: rgba(255, 255, 255, 0.05);
|
|
|
|
|
--card-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
|
|
|
|
--icon-box-from: #1f2937;
|
|
|
|
|
--icon-box-to: #111827;
|
|
|
|
|
--icon-box-border: rgba(255, 255, 255, 0.05);
|
|
|
|
|
|
|
|
|
|
--divider-line: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--skeleton-bg: rgba(255, 255, 255, 0.02);
|
|
|
|
|
|
|
|
|
|
--empty-bg: rgba(17, 24, 39, 0.4);
|
|
|
|
|
--empty-border: rgba(255, 255, 255, 0.05);
|
|
|
|
|
|
|
|
|
|
--accent: #10b981;
|
|
|
|
|
--accent-hover-text: #6ee7b7;
|
|
|
|
|
--accent-glow: rgba(16, 185, 129, 0.1);
|
2026-04-17 22:23:18 +09:00
|
|
|
|
|
|
|
|
--panel-bg: rgba(17, 24, 39, 0.5);
|
|
|
|
|
--panel-border: rgba(255, 255, 255, 0.05);
|
|
|
|
|
--panel-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
|
|
|
|
--row-divider: rgba(255, 255, 255, 0.04);
|
|
|
|
|
--row-hover-bg: rgba(255, 255, 255, 0.03);
|
|
|
|
|
|
|
|
|
|
--btn-bg: rgba(17, 24, 39, 0.6);
|
|
|
|
|
--btn-bg-hover: #1f2937;
|
|
|
|
|
--btn-border: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--btn-border-hover: rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
|
|
|
|
--dot-inactive: #4b5563;
|
|
|
|
|
--dot-inactive-hover: #6b7280;
|
|
|
|
|
|
|
|
|
|
--thumb-bg: #030712;
|
|
|
|
|
--thumb-placeholder: #374151;
|
|
|
|
|
|
|
|
|
|
--badge-emerald-bg: #059669;
|
|
|
|
|
--badge-amber-bg: #d97706;
|
|
|
|
|
--badge-gray-bg: #374151;
|
|
|
|
|
--badge-text: #ffffff;
|
|
|
|
|
|
|
|
|
|
--maintenance-text: #fbbf24;
|
|
|
|
|
|
|
|
|
|
--dashed-border: rgba(255, 255, 255, 0.1);
|
2026-04-18 12:15:04 +09:00
|
|
|
|
|
|
|
|
--surface-2: rgba(2, 6, 23, 0.6);
|
|
|
|
|
--surface-3: rgba(17, 24, 39, 0.4);
|
|
|
|
|
--surface-nested: #0f172a;
|
|
|
|
|
|
|
|
|
|
--input-bg: #020617;
|
|
|
|
|
--input-border: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--input-border-hover: rgba(255, 255, 255, 0.2);
|
|
|
|
|
--input-border-focus: rgba(16, 185, 129, 0.5);
|
|
|
|
|
--input-placeholder: #6b7280;
|
|
|
|
|
--input-icon: #6b7280;
|
|
|
|
|
|
|
|
|
|
--selected-bg: rgba(16, 185, 129, 0.08);
|
|
|
|
|
--selected-border: rgba(16, 185, 129, 0.4);
|
|
|
|
|
--option-selected-bg: rgba(16, 185, 129, 0.12);
|
|
|
|
|
--option-selected-text: #6ee7b7;
|
|
|
|
|
|
|
|
|
|
--btn-primary-bg: #059669;
|
|
|
|
|
--btn-primary-bg-hover: #10b981;
|
|
|
|
|
--btn-primary-text: #ffffff;
|
|
|
|
|
--btn-primary-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
|
|
|
|
|
|
|
|
|
|
--danger-text: #f87171;
|
|
|
|
|
--danger-text-strong: #dc2626;
|
|
|
|
|
--danger-bg-hover: rgba(239, 68, 68, 0.1);
|
|
|
|
|
--warning-text: #fbbf24;
|
|
|
|
|
--warning-text-bright: #fcd34d;
|
|
|
|
|
--warning-text-dim: rgba(252, 211, 77, 0.4);
|
|
|
|
|
|
2026-04-21 19:03:52 +09:00
|
|
|
--destiny-date: #38bdf8;
|
|
|
|
|
|
2026-04-18 12:15:04 +09:00
|
|
|
--progress-track: #0f172a;
|
|
|
|
|
--progress-emerald: #10b981;
|
|
|
|
|
--progress-amber: #f59e0b;
|
|
|
|
|
|
|
|
|
|
--accent-bright: #6ee7b7;
|
|
|
|
|
--accent-muted: rgba(16, 185, 129, 0.1);
|
|
|
|
|
--accent-text-on-emerald: #ecfdf5;
|
|
|
|
|
|
|
|
|
|
--tooltip-bg: #111827;
|
|
|
|
|
--tooltip-border: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--tooltip-text: #e5e7eb;
|
|
|
|
|
|
|
|
|
|
--popup-bg: #111827;
|
|
|
|
|
--popup-border: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--popup-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
|
|
|
--disabled-opacity: 0.3;
|
|
|
|
|
--inactive-filter: brightness(0.4);
|
2026-04-18 12:20:55 +09:00
|
|
|
|
|
|
|
|
--dialog-bg-from: #111827;
|
|
|
|
|
--dialog-bg-to: #030712;
|
|
|
|
|
--dialog-border: rgba(255, 255, 255, 0.1);
|
|
|
|
|
--dialog-backdrop: rgba(0, 0, 0, 0.7);
|
|
|
|
|
|
|
|
|
|
--icon-danger-bg: rgba(239, 68, 68, 0.1);
|
|
|
|
|
--icon-danger-border: rgba(239, 68, 68, 0.3);
|
|
|
|
|
--icon-info-bg: rgba(16, 185, 129, 0.1);
|
|
|
|
|
--icon-info-border: rgba(16, 185, 129, 0.3);
|
|
|
|
|
|
|
|
|
|
--ring-danger: rgba(239, 68, 68, 0.2);
|
|
|
|
|
--ring-info: rgba(16, 185, 129, 0.2);
|
|
|
|
|
|
|
|
|
|
--btn-danger-bg: #dc2626;
|
|
|
|
|
--btn-danger-bg-hover: #ef4444;
|
|
|
|
|
--btn-danger-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
|
2026-04-18 16:11:51 +09:00
|
|
|
|
2026-04-21 18:32:21 +09:00
|
|
|
--liberation-primary: rgba(255, 255, 255, 0.55);
|
|
|
|
|
--liberation-primary-bar: rgba(255, 255, 255, 0.25);
|
|
|
|
|
--liberation-secondary: rgb(255, 255, 255);
|
|
|
|
|
--liberation-secondary-bar: rgba(255, 255, 255, 0.5);
|
2026-04-19 11:12:19 +09:00
|
|
|
|
|
|
|
|
--symbol-arcane-text: #c4b5fd;
|
|
|
|
|
--symbol-arcane-bg: rgba(139, 92, 246, 0.15);
|
|
|
|
|
--symbol-arcane-border: rgba(139, 92, 246, 0.3);
|
|
|
|
|
--symbol-authentic-text: #7dd3fc;
|
|
|
|
|
--symbol-authentic-bg: rgba(14, 165, 233, 0.15);
|
|
|
|
|
--symbol-authentic-border: rgba(14, 165, 233, 0.3);
|
|
|
|
|
--symbol-grand-text: #fcd34d;
|
|
|
|
|
--symbol-grand-bg: rgba(245, 158, 11, 0.15);
|
|
|
|
|
--symbol-grand-border: rgba(245, 158, 11, 0.3);
|
2026-04-17 21:59:35 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 테마 토큰 - light */
|
|
|
|
|
[data-theme="light"] {
|
|
|
|
|
color-scheme: light;
|
|
|
|
|
--bg-from: #ffffff;
|
|
|
|
|
--bg-via: #ffffff;
|
|
|
|
|
--bg-to: #ffffff;
|
|
|
|
|
--scrollbar-thumb: #a0a0a0;
|
|
|
|
|
--scrollbar-thumb-hover: #707070;
|
|
|
|
|
--scrollbar-track: transparent;
|
|
|
|
|
|
|
|
|
|
--header-bg: rgba(255, 255, 255, 0.8);
|
|
|
|
|
--header-border: rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
|
|
|
|
--text-strong: #0f172a;
|
|
|
|
|
--text-emphasis: #1f2937;
|
|
|
|
|
--text-muted: #475569;
|
|
|
|
|
--text-dim: #64748b;
|
|
|
|
|
--text-slash: rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
|
|
|
|
--toggle-bg: rgba(241, 245, 249, 0.9);
|
|
|
|
|
--toggle-border: rgba(0, 0, 0, 0.08);
|
|
|
|
|
--toggle-thumb-from: #fde68a;
|
|
|
|
|
--toggle-thumb-to: #f59e0b;
|
|
|
|
|
--toggle-thumb-icon: #78350f;
|
2026-04-17 22:05:33 +09:00
|
|
|
|
|
|
|
|
--card-bg-from: #ffffff;
|
|
|
|
|
--card-bg-to: #ffffff;
|
|
|
|
|
--card-border: rgba(0, 0, 0, 0.06);
|
|
|
|
|
--card-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
|
|
|
|
|
|
|
|
|
|
--icon-box-from: #f3f4f6;
|
|
|
|
|
--icon-box-to: #e5e7eb;
|
|
|
|
|
--icon-box-border: rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
|
|
|
|
--divider-line: rgba(0, 0, 0, 0.1);
|
|
|
|
|
--skeleton-bg: rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
|
|
|
|
--empty-bg: rgba(249, 250, 251, 0.9);
|
|
|
|
|
--empty-border: rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
|
|
|
|
--accent: #059669;
|
|
|
|
|
--accent-hover-text: #047857;
|
|
|
|
|
--accent-glow: rgba(16, 185, 129, 0.12);
|
2026-04-17 22:23:18 +09:00
|
|
|
|
|
|
|
|
--panel-bg: #ffffff;
|
|
|
|
|
--panel-border: rgba(0, 0, 0, 0.06);
|
|
|
|
|
--panel-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
|
|
|
|
|
|
|
|
|
|
--row-divider: rgba(0, 0, 0, 0.06);
|
|
|
|
|
--row-hover-bg: rgba(0, 0, 0, 0.03);
|
|
|
|
|
|
|
|
|
|
--btn-bg: #ffffff;
|
|
|
|
|
--btn-bg-hover: #f3f4f6;
|
|
|
|
|
--btn-border: rgba(0, 0, 0, 0.08);
|
|
|
|
|
--btn-border-hover: rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
|
|
|
|
--dot-inactive: #cbd5e1;
|
|
|
|
|
--dot-inactive-hover: #94a3b8;
|
|
|
|
|
|
|
|
|
|
--thumb-bg: #f3f4f6;
|
|
|
|
|
--thumb-placeholder: #cbd5e1;
|
|
|
|
|
|
|
|
|
|
--badge-emerald-bg: #059669;
|
|
|
|
|
--badge-amber-bg: #d97706;
|
|
|
|
|
--badge-gray-bg: #475569;
|
|
|
|
|
--badge-text: #ffffff;
|
|
|
|
|
|
|
|
|
|
--maintenance-text: #b45309;
|
|
|
|
|
|
|
|
|
|
--dashed-border: rgba(0, 0, 0, 0.12);
|
2026-04-18 12:15:04 +09:00
|
|
|
|
|
|
|
|
--surface-2: #f8fafc;
|
|
|
|
|
--surface-3: #f9fafb;
|
|
|
|
|
--surface-nested: #f3f4f6;
|
|
|
|
|
|
|
|
|
|
--input-bg: #ffffff;
|
|
|
|
|
--input-border: rgba(0, 0, 0, 0.12);
|
|
|
|
|
--input-border-hover: rgba(0, 0, 0, 0.22);
|
|
|
|
|
--input-border-focus: rgba(5, 150, 105, 0.55);
|
|
|
|
|
--input-placeholder: #9ca3af;
|
|
|
|
|
--input-icon: #94a3b8;
|
|
|
|
|
|
|
|
|
|
--selected-bg: rgba(16, 185, 129, 0.08);
|
|
|
|
|
--selected-border: rgba(5, 150, 105, 0.5);
|
|
|
|
|
--option-selected-bg: rgba(16, 185, 129, 0.12);
|
|
|
|
|
--option-selected-text: #047857;
|
|
|
|
|
|
|
|
|
|
--btn-primary-bg: #059669;
|
|
|
|
|
--btn-primary-bg-hover: #047857;
|
|
|
|
|
--btn-primary-text: #ffffff;
|
|
|
|
|
--btn-primary-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
|
|
|
|
|
|
|
|
|
|
--danger-text: #dc2626;
|
|
|
|
|
--danger-text-strong: #b91c1c;
|
|
|
|
|
--danger-bg-hover: rgba(220, 38, 38, 0.08);
|
|
|
|
|
--warning-text: #c2410c;
|
|
|
|
|
--warning-text-bright: #ea580c;
|
|
|
|
|
--warning-text-dim: rgba(234, 88, 12, 0.4);
|
|
|
|
|
|
2026-04-21 19:03:52 +09:00
|
|
|
--destiny-date: #0284c7;
|
|
|
|
|
|
2026-04-18 12:15:04 +09:00
|
|
|
--progress-track: #e5e7eb;
|
|
|
|
|
--progress-emerald: #10b981;
|
|
|
|
|
--progress-amber: #f59e0b;
|
|
|
|
|
|
|
|
|
|
--accent-bright: #047857;
|
|
|
|
|
--accent-muted: rgba(16, 185, 129, 0.1);
|
|
|
|
|
--accent-text-on-emerald: #ecfdf5;
|
|
|
|
|
|
|
|
|
|
--tooltip-bg: #111827;
|
|
|
|
|
--tooltip-border: rgba(255, 255, 255, 0.08);
|
|
|
|
|
--tooltip-text: #f3f4f6;
|
|
|
|
|
|
|
|
|
|
--popup-bg: #ffffff;
|
|
|
|
|
--popup-border: rgba(0, 0, 0, 0.1);
|
|
|
|
|
--popup-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
|
|
|
|
|
|
|
|
|
|
--disabled-opacity: 0.5;
|
|
|
|
|
--inactive-filter: opacity(0.25);
|
2026-04-18 12:20:55 +09:00
|
|
|
|
|
|
|
|
--dialog-bg-from: #ffffff;
|
|
|
|
|
--dialog-bg-to: #ffffff;
|
|
|
|
|
--dialog-border: rgba(0, 0, 0, 0.1);
|
|
|
|
|
--dialog-backdrop: rgba(15, 23, 42, 0.45);
|
|
|
|
|
|
|
|
|
|
--icon-danger-bg: rgba(220, 38, 38, 0.08);
|
|
|
|
|
--icon-danger-border: rgba(220, 38, 38, 0.3);
|
|
|
|
|
--icon-info-bg: rgba(16, 185, 129, 0.08);
|
|
|
|
|
--icon-info-border: rgba(5, 150, 105, 0.4);
|
|
|
|
|
|
|
|
|
|
--ring-danger: rgba(220, 38, 38, 0.15);
|
|
|
|
|
--ring-info: rgba(16, 185, 129, 0.18);
|
|
|
|
|
|
|
|
|
|
--btn-danger-bg: #dc2626;
|
|
|
|
|
--btn-danger-bg-hover: #b91c1c;
|
|
|
|
|
--btn-danger-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
|
2026-04-18 16:11:51 +09:00
|
|
|
|
2026-04-21 18:32:21 +09:00
|
|
|
--liberation-primary: rgba(0, 0, 0, 0.55);
|
|
|
|
|
--liberation-primary-bar: rgba(0, 0, 0, 0.25);
|
|
|
|
|
--liberation-secondary: rgb(0, 0, 0);
|
|
|
|
|
--liberation-secondary-bar: rgba(0, 0, 0, 0.5);
|
2026-04-19 11:12:19 +09:00
|
|
|
|
|
|
|
|
--symbol-arcane-text: #6d28d9;
|
|
|
|
|
--symbol-arcane-bg: rgba(139, 92, 246, 0.12);
|
|
|
|
|
--symbol-arcane-border: rgba(109, 40, 217, 0.4);
|
|
|
|
|
--symbol-authentic-text: #0369a1;
|
|
|
|
|
--symbol-authentic-bg: rgba(14, 165, 233, 0.12);
|
|
|
|
|
--symbol-authentic-border: rgba(3, 105, 161, 0.4);
|
|
|
|
|
--symbol-grand-text: #b45309;
|
|
|
|
|
--symbol-grand-bg: rgba(245, 158, 11, 0.15);
|
|
|
|
|
--symbol-grand-border: rgba(180, 83, 9, 0.4);
|
2026-04-17 21:59:35 +09:00
|
|
|
}
|
|
|
|
|
|
2026-04-13 19:17:49 +09:00
|
|
|
html, body, #root {
|
2026-04-14 13:35:39 +09:00
|
|
|
min-height: 100%;
|
2026-04-17 21:59:35 +09:00
|
|
|
background-color: var(--bg-from);
|
|
|
|
|
background-image: linear-gradient(to bottom right, var(--bg-from), var(--bg-via), var(--bg-to));
|
2026-04-14 13:35:39 +09:00
|
|
|
background-attachment: fixed;
|
2026-04-17 22:11:27 +09:00
|
|
|
transition:
|
|
|
|
|
background-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
|
|
|
background-image 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
2026-04-14 13:35:39 +09:00
|
|
|
}
|
2026-04-15 11:28:02 +09:00
|
|
|
html {
|
|
|
|
|
overscroll-behavior-y: contain;
|
|
|
|
|
}
|
2026-04-14 13:35:39 +09:00
|
|
|
|
|
|
|
|
/* OverlayScrollbars body 오버레이 테마 */
|
|
|
|
|
.os-theme-maple.os-theme-dark {
|
|
|
|
|
--os-handle-bg: rgba(255, 255, 255, 0.25);
|
|
|
|
|
--os-handle-bg-hover: rgba(255, 255, 255, 0.4);
|
|
|
|
|
--os-handle-bg-active: rgba(255, 255, 255, 0.5);
|
|
|
|
|
--os-size: 12px;
|
|
|
|
|
--os-padding-perpendicular: 2px;
|
|
|
|
|
--os-padding-axis: 2px;
|
2026-04-13 19:17:49 +09:00
|
|
|
}
|
|
|
|
|
|
2026-04-17 21:59:35 +09:00
|
|
|
/* 라이트 테마에서는 어두운 handle */
|
|
|
|
|
[data-theme="light"] .os-theme-maple.os-theme-dark {
|
|
|
|
|
--os-handle-bg: #a0a0a0;
|
|
|
|
|
--os-handle-bg-hover: #707070;
|
|
|
|
|
--os-handle-bg-active: #505050;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-13 14:20:32 +09:00
|
|
|
html {
|
|
|
|
|
font-family: "Maplestory", "Noto Sans KR", system-ui, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-feature-settings: "ss01", "ss02";
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
}
|
2026-04-13 15:20:46 +09:00
|
|
|
|
|
|
|
|
button:not(:disabled),
|
|
|
|
|
[role="button"]:not(:disabled),
|
|
|
|
|
a {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-13 15:41:47 +09:00
|
|
|
/* number input 화살표 숨기기 */
|
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
|
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
input[type="number"] {
|
|
|
|
|
-moz-appearance: textfield;
|
|
|
|
|
}
|
2026-04-13 19:17:49 +09:00
|
|
|
|
2026-04-13 20:38:01 +09:00
|
|
|
/* 툴팁 애니메이션 */
|
|
|
|
|
@keyframes fadeIn {
|
|
|
|
|
from { opacity: 0; transform: translateY(2px); }
|
|
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-14 13:35:39 +09:00
|
|
|
|
2026-04-17 21:59:35 +09:00
|
|
|
|
|
|
|
|
/* 커스텀 스크롤바 (테마별) */
|
|
|
|
|
* {
|
2026-04-13 19:17:49 +09:00
|
|
|
scrollbar-width: thin;
|
2026-04-17 21:59:35 +09:00
|
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
2026-04-13 19:17:49 +09:00
|
|
|
}
|
2026-04-17 21:59:35 +09:00
|
|
|
*::-webkit-scrollbar {
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
2026-04-13 19:17:49 +09:00
|
|
|
}
|
2026-04-17 21:59:35 +09:00
|
|
|
*::-webkit-scrollbar-track {
|
|
|
|
|
background: var(--scrollbar-track);
|
2026-04-13 19:17:49 +09:00
|
|
|
}
|
2026-04-17 21:59:35 +09:00
|
|
|
*::-webkit-scrollbar-thumb {
|
|
|
|
|
background: var(--scrollbar-thumb);
|
|
|
|
|
border-radius: 5px;
|
2026-04-13 19:17:49 +09:00
|
|
|
transition: background 0.2s;
|
|
|
|
|
}
|
2026-04-17 21:59:35 +09:00
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: var(--scrollbar-thumb-hover);
|
2026-04-13 19:17:49 +09:00
|
|
|
}
|
2026-04-17 21:59:35 +09:00
|
|
|
*::-webkit-scrollbar-corner {
|
2026-04-13 19:17:49 +09:00
|
|
|
background: transparent;
|
|
|
|
|
}
|
