@font-face {
  font-family: 'NeoDunggeunmo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== 색상 팔레트 ===== */
  --color-bg-darkest:  #0d1117;
  --color-bg-dark:     #161b22;
  --color-bg-medium:   #1c2333;
  --color-bg-light:    #2d333b;
  --color-bg-lighter:  #3d4450;

  --color-primary:     #e94560;
  --color-secondary:   #533483;
  --color-accent:      #7c3aed;

  --color-gold:        #f5c518;
  --color-gold-dark:   #c49b0e;
  --color-exp-green:   #4ecca3;
  --color-hp-red:      #e74c3c;
  --color-mp-blue:     #3498db;
  --color-warning:     #f39c12;
  --color-success:     #2ecc71;
  --color-danger:      #e74c3c;

  --color-text:        #e6e6e6;
  --color-text-dim:    #8b949e;
  --color-text-bright: #ffffff;

  /* 퀘스트 등급 색상 */
  --grade-s:           #ff6b6b;
  --grade-s-glow:      rgba(255, 107, 107, 0.4);
  --grade-a:           #ffa502;
  --grade-a-glow:      rgba(255, 165, 2, 0.3);
  --grade-b:           #7bed9f;
  --grade-b-glow:      rgba(123, 237, 159, 0.3);
  --grade-c:           #70a1ff;
  --grade-c-glow:      rgba(112, 161, 255, 0.3);
  --grade-d:           #a4b0be;
  --grade-d-glow:      rgba(164, 176, 190, 0.2);

  /* 미션 유형 색상 */
  --mission-main:      #e94560;
  --mission-side:      #7c3aed;
  --mission-daily:     #4ecca3;
  --mission-emergency: #f39c12;

  /* 직업 색상 */
  --class-narrator:    #9b59b6;
  --class-strategist:  #e74c3c;
  --class-connector:   #2ecc71;
  --class-sage:        #3498db;
  --class-commander:   #f39c12;

  /* ===== 픽셀 단위 ===== */
  --pixel: 4px;
  --pixel-2: 8px;
  --pixel-3: 12px;
  --pixel-4: 16px;

  /* ===== 폰트 ===== */
  --font-main: 'NeoDunggeunmo', 'DungGeunMo', monospace;
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  20px;
  --font-size-xl:  24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;

  /* ===== 간격 ===== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ===== 픽셀 테두리 ===== */
  --border-color: #4a5568;
  --border-color-light: #5a6578;
  --border-color-highlight: #e94560;

  /* ===== 레이아웃 ===== */
  --sidebar-width: 220px;
  --header-height: 56px;
  --content-max-width: 1200px;

  /* ===== 트랜지션 ===== */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
}