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

html, body, #root {
  min-height: 100%;
  background: linear-gradient(to bottom right, #030712, #030712, #0f172a);
  background-attachment: fixed;
}

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

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


/* 내부 스크롤 영역만 얇은 커스텀 스크롤바 (메인 페이지 스크롤은 기본) */
*:not(html):not(body) {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
*:not(html):not(body)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*:not(html):not(body)::-webkit-scrollbar-track {
  background: transparent;
}
*:not(html):not(body)::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  transition: background 0.2s;
}
*:not(html):not(body)::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}
*:not(html):not(body)::-webkit-scrollbar-corner {
  background: transparent;
}