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

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

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 400ms ease, background-image 400ms ease;
}
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); }
}

/* 테마 전환 뷰 트랜지션 - 부드러운 크로스페이드 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 400ms;
  animation-timing-function: ease;
}
::view-transition-old(root) {
  animation-name: themeFadeOut;
}
::view-transition-new(root) {
  animation-name: themeFadeIn;
}
@keyframes themeFadeOut {
  to { opacity: 0; }
}
@keyframes themeFadeIn {
  from { opacity: 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;
}