maplestory/frontend/src/index.css

@import "tailwindcss";
@import "overlayscrollbars/overlayscrollbars.css";

@theme {
  --font-sans: "Maplestory", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --font-maple: "Maplestory", "Noto Sans KR", sans-serif;
}

/* 테마 토큰 - 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;

  --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);

  --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);

  --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);

  --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);

  --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);

  --liberation-primary: #a78bfa;
  --liberation-primary-bar: rgba(167, 139, 250, 0.5);
  --liberation-secondary: #fda4af;
  --liberation-secondary-bar: rgba(253, 164, 175, 0.5);
}

/* 테마 토큰 - 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;

  --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);

  --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);

  --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);

  --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);

  --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);

  --liberation-primary: #7c3aed;
  --liberation-primary-bar: rgba(124, 58, 237, 0.5);
  --liberation-secondary: #e11d48;
  --liberation-secondary-bar: rgba(225, 29, 72, 0.5);
}

html, body, #root {
  min-height: 100%;
  background-color: var(--bg-from);
  background-image: linear-gradient(to bottom right, var(--bg-from), var(--bg-via), var(--bg-to));
  background-attachment: fixed;
  transition:
    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1),
    background-image 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
html {
  overscroll-behavior-y: contain;
}

/* 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;
}

/* 라이트 테마에서는 어두운 handle */
[data-theme="light"] .os-theme-maple.os-theme-dark {
  --os-handle-bg: #a0a0a0;
  --os-handle-bg-hover: #707070;
  --os-handle-bg-active: #505050;
}

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;
}

button:not(:disabled),
[role="button"]:not(:disabled),
a {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

/* 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;
}

/* 툴팁 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}



/* 커스텀 스크롤바 (테마별) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
  transition: background 0.2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}