:root {
  /* 배경: 완전한 검정 대신 톤을 살짝 밝혀 눈이 편안하도록 조정 */
  --bg-main: #13131A;
  --bg-main-soft: #16161F;
  --bg-card: #1D1D28;
  --bg-card-hover: #23232F;
  --bg-card-alt: #272734;

  /* 글자 */
  --text-main: #F5F5F7;
  --text-sub: #B2B2BD;
  --text-faint: #7E7E8C;

  /* 포인트 색상 (조금 더 밝고 채도 있게) */
  --color-red: #FF7A86;
  --color-blue: #6FA8FF;
  --color-yellow: #FFD56B;
  --color-purple: #B48BFF;
  --color-purple-soft: #8F6FE8;
  --color-online: #6CE89F;

  /* 그림자 (선 대신 구분용) */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(180, 139, 255, 0.15), 0 12px 32px rgba(180, 139, 255, 0.18);

  /* 간격/반경 */
  --radius-md: 16px;
  --radius-lg: 28px;
  --gap-sm: 0.75rem;
  --gap-md: 1.5rem;
  --gap-lg: 3rem;

  --header-height: 72px;

  /* 모션 */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-mid: 0.45s;
  --dur-slow: 0.8s;
}