/* Custom Tailwind CSS Font-Size Utilities */
/* custom-tailwind.css */

/* custom-tailwind.css */

/**
 * =================================================================
 * 1. 변수 정의 (Variable Definitions)
 * =================================================================
 * 사이트 전체에서 사용할 폰트 크기와 줄 간격 값을 변수로 정의합니다.
 * 값을 수정해야 할 때 여기만 바꾸면 모든 곳에 적용됩니다.
 */
:root {
  /* 폰트 크기 변수 (Font Size Variables) */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 3.75rem; /* 60px */
  --font-size-7xl: 4.5rem; /* 72px */
  --font-size-8xl: 6rem; /* 96px */
  --font-size-9xl: 8rem; /* 128px */

  /* 간격 변수 (Spacing Variables) */
  --space-0: 0;
  --space-px: 1px;
  --space-0_5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-1_5: 0.375rem; /* 6px */
  --space-2: 0.5rem; /* 8px */
  --space-2_5: 0.625rem; /* 10px */
  --space-3: 0.75rem; /* 12px */
  --space-3_5: 0.875rem; /* 14px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 1.75rem; /* 28px */
  --space-8: 2rem; /* 32px */
  --space-9: 2.25rem; /* 36px */
  --space-10: 2.5rem; /* 40px */
  --space-11: 2.75rem; /* 44px */
  --space-12: 3rem; /* 48px */
  --space-12_5: 3.125rem; /* 50px */
  --space-13: 3.25rem; /* 52px */
  --space-14: 3.5rem; /* 56px */
  --space-15: 3.75rem; /* 60px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-28: 7rem; /* 112px */
  --space-32: 8rem; /* 128px */
  --space-36: 9rem; /* 144px */
  --space-40: 10rem; /* 160px */
  --space-44: 11rem; /* 176px */
  --space-48: 12rem; /* 192px */
  --space-52: 13rem; /* 208px */
  --space-56: 14rem; /* 224px */
  --space-60: 15rem; /* 240px */
  --space-64: 16rem; /* 256px */
  --space-72: 18rem; /* 288px */
  --space-80: 20rem; /* 320px */
  --space-96: 24rem; /* 384px */
  /* 자간 변수 (Letter Spacing Variables) */
  --letter-spacing-tighter: -0.05em; /* -0.8px (16px 기준) */
  --letter-spacing-tight: -0.025em; /* -0.4px (16px 기준) */
  --letter-spacing-normal: 0em; /* 0px */
  --letter-spacing-wide: 0.025em; /* 0.4px (16px 기준) */
  --letter-spacing-wider: 0.05em; /* 0.8px (16px 기준) */
  --letter-spacing-widest: 0.1em; /* 1.6px (16px 기준) */
  /* 테두리 반지름 변수 (Border Radius Variables) */
  --radius-none: 0;
  --radius-sm: 0.125rem; /* 2px */
  --radius-base: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* 너비 변수 (Width Variables) */
  --w-0: 0;
  --w-px: 1px;
  --w-0_5: 0.125rem; /* 2px */
  --w-1: 0.25rem; /* 4px */
  --w-1_5: 0.375rem; /* 6px */
  --w-2: 0.5rem; /* 8px */
  --w-2_5: 0.625rem; /* 10px */
  --w-3: 0.75rem; /* 12px */
  --w-3_5: 0.875rem; /* 14px */
  --w-4: 1rem; /* 16px */
  --w-5: 1.25rem; /* 20px */
  --w-6: 1.5rem; /* 24px */
  --w-7: 1.75rem; /* 28px */
  --w-8: 2rem; /* 32px */
  --w-9: 2.25rem; /* 36px */
  --w-10: 2.5rem; /* 40px */
  --w-11: 2.75rem; /* 44px */
  --w-12: 3rem; /* 48px */
  --w-14: 3.5rem; /* 56px */
  --w-16: 4rem; /* 64px */
  --w-20: 5rem; /* 80px */
  --w-24: 6rem; /* 96px */
  --w-28: 7rem; /* 112px */
  --w-32: 8rem; /* 128px */
  --w-36: 9rem; /* 144px */
  --w-40: 10rem; /* 160px */
  --w-44: 11rem; /* 176px */
  --w-48: 12rem; /* 192px */
  --w-52: 13rem; /* 208px */
  --w-56: 14rem; /* 224px */
  --w-60: 15rem; /* 240px */
  --w-64: 16rem; /* 256px */
  --w-72: 18rem; /* 288px */
  --w-80: 20rem; /* 320px */
  --w-96: 24rem; /* 384px */
  --w-122_5: 30.625rem; /* 490px */
  --w-auto: auto;
  --w-full: 100%;
  --w-screen: 100vw;
  --w-min: min-content;
  --w-max: max-content;
  --w-fit: fit-content;
  --w-1_2: 50%;
  --w-1_3: 33.333333%;
  --w-2_3: 66.666667%;
  --w-1_4: 25%;
  --w-3_4: 75%;
  --w-1_5: 20%;
  --w-2_5: 40%;
  --w-3_5: 60%;
  --w-4_5: 80%;
  --w-1_6: 16.666667%;
  --w-5_6: 83.333333%;

  /* 높이 변수 (Height Variables) */
  --h-0: 0;
  --h-px: 1px;
  --h-0_5: 0.125rem; /* 2px */
  --h-1: 0.25rem; /* 4px */
  --h-1_5: 0.375rem; /* 6px */
  --h-2: 0.5rem; /* 8px */
  --h-2_5: 0.625rem; /* 10px */
  --h-3: 0.75rem; /* 12px */
  --h-3_5: 0.875rem; /* 14px */
  --h-4: 1rem; /* 16px */
  --h-5: 1.25rem; /* 20px */
  --h-6: 1.5rem; /* 24px */
  --h-7: 1.75rem; /* 28px */
  --h-8: 2rem; /* 32px */
  --h-9: 2.25rem; /* 36px */
  --h-10: 2.5rem; /* 40px */
  --h-11: 2.75rem; /* 44px */
  --h-12: 3rem; /* 48px */
  --h-14: 3.5rem; /* 56px */
  --h-16: 4rem; /* 64px */
  --h-20: 5rem; /* 80px */
  --h-24: 6rem; /* 96px */
  --h-28: 7rem; /* 112px */
  --h-32: 8rem; /* 128px */
  --h-36: 9rem; /* 144px */
  --h-40: 10rem; /* 160px */
  --h-44: 11rem; /* 176px */
  --h-48: 12rem; /* 192px */
  --h-52: 13rem; /* 208px */
  --h-56: 14rem; /* 224px */
  --h-60: 15rem; /* 240px */
  --h-64: 16rem; /* 256px */
  --h-72: 18rem; /* 288px */
  --h-77_5: 19.375rem; /* 310px */
  --h-80: 20rem; /* 320px */
  --h-96: 24rem; /* 384px */
  --h-auto: auto;
  --h-full: 100%;
  --h-screen: 100vh;
  --h-min: min-content;
  --h-max: max-content;
  --h-fit: fit-content;
  --h-1_2: 50%;
  --h-1_3: 33.333333%;
  --h-2_3: 66.666667%;
  --h-1_4: 25%;
  --h-3_4: 75%;
  --h-1_5: 20%;
  --h-2_5: 40%;
  --h-3_5: 60%;
  --h-4_5: 80%;
  --h-1_6: 16.666667%;
  --h-5_6: 83.333333%;

  /* 그림자 변수 (Shadow Variables) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(115, 115, 115, 0.1),
    0 1px 2px -1px rgb(115, 115, 115, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(115, 115, 115, 0.1),
    0 2px 4px -2px rgb(115, 115, 115, 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(115, 115, 115, 0.1),
    0 4px 6px -4px rgb(115, 115, 115, 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(115, 115, 115, 0.1),
    0 8px 10px -6px rgb(115, 115, 115, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  /* 전환 변수 (Transition Variables) */
  --transition-none: none;
  --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 전환 지속시간 변수 (Transition Duration Variables) */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* 전환 타이밍 함수 변수 (Transition Timing Function Variables) */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index 변수 (Z-index Variables) */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;

  /* 투명도 변수 (Opacity Variables) */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* 컴포넌트 특화 변수 (Component-specific Variables) */
  --btn-padding-sm: var(--space-1) var(--space-2);
  --btn-padding-md: var(--space-2) var(--space-4);
  --btn-padding-lg: var(--space-3) var(--space-6);
  --btn-radius: var(--radius-md);
  --btn-transition: var(--transition-colors);

  --card-padding: var(--space-6);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);

  --input-padding: var(--space-2) var(--space-3);
  --input-radius: var(--radius-md);
  --input-border-width: 1px;
  --input-transition: var(--transition-colors);

  --modal-backdrop: rgb(0 0 0 / 0.5);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-2xl);

  --nav-height: 64px;
  --sidebar-width: 256px;
  --container-max-width: 1200px;

  /* 색상 변수 (Color Variables) */
  --color-red-50: oklch(0.971 0.013 17.38); /* #fef2f2 */
  --color-red-100: oklch(0.936 0.032 17.717); /* #fee2e2 */
  --color-red-200: oklch(0.885 0.062 18.334); /* #fecaca */
  --color-red-300: oklch(0.808 0.114 19.571); /* #fca5a5 */
  --color-red-400: oklch(0.704 0.191 22.216); /* #f87171 */
  --color-red-500: oklch(0.637 0.237 25.331); /* #ef4444 */
  --color-red-600: oklch(0.577 0.245 27.325); /* #dc2626 */
  --color-red-700: oklch(0.505 0.213 27.518); /* #b91c1c */
  --color-red-800: oklch(0.444 0.177 26.899); /* #991b1b */
  --color-red-900: oklch(0.396 0.141 25.723); /* #7f1d1d */
  --color-red-950: oklch(0.258 0.092 26.042); /* #450a0a */
  --color-yellow-50: oklch(0.987 0.026 102.212); /* #fefce8 */
  --color-yellow-100: oklch(0.973 0.071 103.193); /* #fef9c3 */
  --color-yellow-200: oklch(0.945 0.129 101.54); /* #fef08a */
  --color-yellow-300: oklch(0.905 0.182 98.111); /* #fde047 */
  --color-yellow-400: oklch(0.852 0.199 91.936); /* #facc15 */
  --color-yellow-500: oklch(0.795 0.184 86.047); /* #eab308 */
  --color-yellow-600: oklch(0.681 0.162 75.834); /* #ca8a04 */
  --color-yellow-700: oklch(0.554 0.135 66.442); /* #a16207 */
  --color-yellow-800: oklch(0.476 0.114 61.907); /* #854d0e */
  --color-yellow-900: oklch(0.421 0.095 57.708); /* #713f12 */
  --color-yellow-950: oklch(0.286 0.066 53.813); /* #422006 */

  --color-sky-50: oklch(0.977 0.013 236.62); /* #f0f9ff */
  --color-sky-100: oklch(0.951 0.026 236.824); /* #e0f2fe */
  --color-sky-200: oklch(0.901 0.058 230.902); /* #bae6fd */
  --color-sky-300: oklch(0.828 0.111 230.318); /* #7dd3fc */
  --color-sky-400: oklch(0.746 0.16 232.661); /* #38bdf8 */
  --color-sky-500: oklch(0.685 0.169 237.323); /* #0ea5e9 */
  --color-sky-600: oklch(0.588 0.158 241.966); /* #0284c7 */
  --color-sky-700: oklch(0.5 0.134 242.749); /* #0369a1 */
  --color-sky-800: oklch(0.443 0.11 240.79); /* #075985 */
  --color-sky-900: oklch(0.391 0.09 240.876); /* #0c4a6e */
  --color-sky-950: oklch(0.293 0.066 243.157); /* #082f49 */
  --color-blue-50: oklch(0.97 0.014 254.604); /* #eff6ff */
  --color-blue-100: oklch(0.932 0.032 255.585); /* #dbeafe */
  --color-blue-200: oklch(0.882 0.059 254.128); /* #bfdbfe */
  --color-blue-300: oklch(0.809 0.105 251.813); /* #93c5fd */
  --color-blue-400: oklch(0.707 0.165 254.624); /* #60a5fa */
  --color-blue-500: oklch(0.623 0.214 259.815); /* #3b82f6 */
  --color-blue-600: oklch(0.546 0.245 262.881); /* #2563eb */
  --color-blue-700: oklch(0.488 0.243 264.376); /* #1d4ed8 */
  --color-blue-800: oklch(0.424 0.199 265.638); /* #1e40af */
  --color-blue-900: oklch(0.379 0.146 265.522); /* #1e3a8a */
  --color-blue-950: oklch(0.282 0.091 267.935); /* #172554 */

  --color-purple-50: oklch(0.977 0.014 308.299); /* #faf5ff */
  --color-purple-100: oklch(0.946 0.033 307.174); /* #f3e8ff */
  --color-purple-200: oklch(0.902 0.063 306.703); /* #e9d5ff */
  --color-purple-300: oklch(0.827 0.119 306.383); /* #d8b4fe */
  --color-purple-400: oklch(0.714 0.203 305.504); /* #c084fc */
  --color-purple-500: oklch(0.627 0.265 303.9); /* #a855f7 */
  --color-purple-600: oklch(0.558 0.288 302.321); /* #9333ea */
  --color-purple-700: oklch(0.496 0.265 301.924); /* #7e22ce */
  --color-purple-800: oklch(0.438 0.218 303.724); /* #6b21a8 */
  --color-purple-900: oklch(0.381 0.176 304.987); /* #581c87 */
  --color-purple-950: oklch(0.291 0.149 302.717); /* #3b0764 */

  --color-pink-50: oklch(0.971 0.014 343.198); /* #fdf2f8 */
  --color-pink-100: oklch(0.948 0.028 342.258); /* #fce7f3 */
  --color-pink-200: oklch(0.899 0.061 343.231); /* #fbcfe8 */
  --color-pink-300: oklch(0.823 0.12 346.018); /* #f9a8d4 */
  --color-pink-400: oklch(0.718 0.202 349.761); /* #f472b6 */
  --color-pink-500: oklch(0.656 0.241 354.308); /* #ec4899 */
  --color-pink-600: oklch(0.592 0.249 0.584); /* #db2777 */
  --color-pink-700: oklch(0.525 0.223 3.958); /* #be185d */
  --color-pink-800: oklch(0.459 0.187 3.815); /* #9d174d */
  --color-pink-900: oklch(0.408 0.153 2.432); /* #831843 */
  --color-pink-950: oklch(0.284 0.109 3.907); /* #500724 */
  --color-rose-50: oklch(0.969 0.015 12.422); /* #fff1f2 */
  --color-rose-100: oklch(0.941 0.03 12.58); /* #ffe4e6 */
  --color-rose-200: oklch(0.892 0.058 10.001); /* #fecdd3 */
  --color-rose-300: oklch(0.81 0.117 11.638); /* #fda4af */
  --color-rose-400: oklch(0.712 0.194 13.428); /* #fb7185 */
  --color-rose-500: oklch(0.645 0.246 16.439); /* #f43f5e */
  --color-rose-600: oklch(0.586 0.253 17.585); /* #e11d48 */
  --color-rose-700: oklch(0.514 0.222 16.935); /* #be123c */
  --color-rose-800: oklch(0.455 0.188 13.697); /* #9f1239 */
  --color-rose-900: oklch(0.41 0.159 10.272); /* #881337 */
  --color-rose-950: oklch(0.271 0.105 12.094); /* #4c0519 */
  --color-slate-50: oklch(0.984 0.003 247.858); /* #f8fafc */
  --color-slate-100: oklch(0.968 0.007 247.896); /* #f1f5f9 */
  --color-slate-200: oklch(0.929 0.013 255.508); /* #e2e8f0 */
  --color-slate-300: oklch(0.869 0.022 252.894); /* #cbd5e1 */
  --color-slate-400: oklch(0.704 0.04 256.788); /* #94a3b8 */
  --color-slate-500: oklch(0.554 0.046 257.417); /* #64748b */
  --color-slate-600: oklch(0.446 0.043 257.281); /* #475569 */
  --color-slate-700: oklch(0.372 0.044 257.287); /* #334155 */
  --color-slate-800: oklch(0.279 0.041 260.031); /* #1e293b */
  --color-slate-900: oklch(0.208 0.042 265.755); /* #0f172a */
  --color-slate-950: oklch(0.129 0.042 264.695); /* #020617 */
  --color-gray-50: oklch(0.985 0.002 247.839); /* #f9fafb */
  --color-gray-100: oklch(0.967 0.003 264.542); /* #f3f4f6 */
  --color-gray-200: oklch(0.928 0.006 264.531); /* #e5e7eb */
  --color-gray-300: oklch(0.872 0.01 258.338); /* #d1d5db */
  --color-gray-400: oklch(0.707 0.022 261.325); /* #9ca3af */
  --color-gray-500: oklch(0.551 0.027 264.364); /* #6b7280 */
  --color-gray-600: oklch(0.446 0.03 256.802); /* #4b5563 */
  --color-gray-700: oklch(0.373 0.034 259.733); /* #374151 */
  --color-gray-800: oklch(0.278 0.033 256.848); /* #1f2937 */
  --color-gray-900: oklch(0.21 0.034 264.665); /* #111827 */
  --color-gray-950: oklch(0.13 0.028 261.692); /* #030712 */
  --color-zinc-50: oklch(0.985 0 0); /* #fafafa */
  --color-zinc-100: oklch(0.967 0.001 286.375); /* #f4f4f5 */
  --color-zinc-200: oklch(0.92 0.004 286.32); /* #e4e4e7 */
  --color-zinc-300: oklch(0.871 0.006 286.286); /* #d4d4d8 */
  --color-zinc-400: oklch(0.705 0.015 286.067); /* #a1a1aa */
  --color-zinc-500: oklch(0.552 0.016 285.938); /* #71717a */
  --color-zinc-600: oklch(0.442 0.017 285.786); /* #52525b */
  --color-zinc-700: oklch(0.37 0.013 285.805); /* #3f3f46 */
  --color-zinc-800: oklch(0.274 0.006 286.033); /* #27272a */
  --color-zinc-900: oklch(0.21 0.006 285.885); /* #18181b */
  --color-zinc-950: oklch(0.141 0.005 285.823); /* #09090b */
  --color-neutral-50: oklch(0.985 0 0); /* #fafafa */
  --color-neutral-100: oklch(0.97 0 0); /* #f5f5f5 */
  --color-neutral-200: oklch(0.922 0 0); /* #e5e5e5 */
  --color-neutral-300: oklch(0.87 0 0); /* #d4d4d4 */
  --color-neutral-400: oklch(0.708 0 0); /* #a3a3a3 */
  --color-neutral-500: oklch(0.556 0 0); /* #737373 */
  --color-neutral-600: oklch(0.439 0 0); /* #525252 */
  --color-neutral-700: oklch(0.371 0 0); /* #404040 */
  --color-neutral-800: oklch(0.269 0 0); /* #262626 */
  --color-neutral-900: oklch(0.205 0 0); /* #171717 */
  --color-neutral-950: oklch(0.145 0 0); /* #0a0a0a */
  --color-black: #000;
  --color-white: #fff;

  /* =================================================================
   * 컴포넌트 개발용 CSS 변수 (Component Development Variables)
   * ================================================================= */

  /* 테두리 반지름 변수 (Border Radius Variables) */
  --radius-none: 0;
  --radius-sm: 0.125rem; /* 2px */
  --radius: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* 그림자 변수 (Shadow Variables) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  /* 전환 변수 (Transition Variables) */
  --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    fill 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index 변수 (Z-Index Variables) */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;

  /* 투명도 변수 (Opacity Variables) */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* 컴포넌트별 변수 (Component-specific Variables) */

  /* 버튼 컴포넌트 변수 */
  --btn-padding-sm: var(--space-2) var(--space-3);
  --btn-padding-md: var(--space-2-5) var(--space-4);
  --btn-padding-lg: var(--space-3) var(--space-6);
  --btn-font-size-sm: var(--font-size-sm);
  --btn-font-size-md: var(--font-size-base);
  --btn-font-size-lg: var(--font-size-lg);
  --btn-border-radius: var(--radius-md);
  --btn-transition: var(--transition-colors);

  /* 카드 컴포넌트 변수 */
  --card-padding: var(--space-6);
  --card-border-radius: var(--radius-lg);
  --card-shadow: var(--shadow-lg);
  --card-background: var(--color-white);
  --card-border: 1px solid var(--color-gray-200);

  /* 입력 필드 컴포넌트 변수 */
  --input-padding: var(--space-3) var(--space-4);
  --input-border-radius: var(--radius-md);
  --input-border: 1px solid var(--color-gray-300);
  --input-border-focus: 2px solid var(--color-blue-500);
  --input-font-size: var(--font-size-base);
  --input-line-height: var(--line-height-base);
  --input-transition: var(--transition-colors);

  /* 모달 컴포넌트 변수 */
  --modal-overlay-bg: rgba(0, 0, 0, 0.5);
  --modal-background: var(--color-white);
  --modal-border-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-2xl);
  --modal-padding: var(--space-6);
  --modal-z-index: var(--z-50);

  /* 네비게이션 컴포넌트 변수 */
  --nav-height: 4rem; /* 64px */
  --nav-padding: var(--space-4) var(--space-6);
  --nav-background: var(--color-white);
  --nav-border-bottom: 1px solid var(--color-gray-200);
  --nav-shadow: var(--shadow-sm);
  --nav-z-index: var(--z-40);

  /* 드롭다운 컴포넌트 변수 */
  --dropdown-background: var(--color-white);
  --dropdown-border: 1px solid var(--color-gray-200);
  --dropdown-border-radius: var(--radius-md);
  --dropdown-shadow: var(--shadow-lg);
  --dropdown-padding: var(--space-2);
  --dropdown-z-index: var(--z-50);

  /* 토스트 컴포넌트 변수 */
  --toast-padding: var(--space-4) var(--space-6);
  --toast-border-radius: var(--radius-lg);
  --toast-shadow: var(--shadow-lg);
  --toast-z-index: var(--z-50);
  --toast-transition: var(--transition-all);

  /* 배지 컴포넌트 변수 */
  --badge-padding-sm: var(--space-1) var(--space-2);
  --badge-padding-md: var(--space-1-5) var(--space-2-5);
  --badge-font-size-sm: var(--font-size-xs);
  --badge-font-size-md: var(--font-size-sm);
  --badge-border-radius: var(--radius-full);

  /* 스피너 컴포넌트 변수 */
  --spinner-size-sm: var(--space-4);
  --spinner-size-md: var(--space-6);
  --spinner-size-lg: var(--space-8);
  --spinner-border-width: 2px;
  --spinner-color: var(--color-blue-500);

  /* 프로그레스 바 컴포넌트 변수 */
  --progress-height: var(--space-2);
  --progress-background: var(--color-gray-200);
  --progress-fill: var(--color-blue-500);
  --progress-border-radius: var(--radius-full);

  /* 아바타 컴포넌트 변수 */
  --avatar-size-sm: var(--space-8);
  --avatar-size-md: var(--space-10);
  --avatar-size-lg: var(--space-12);
  --avatar-border-radius: var(--radius-full);
  --avatar-border: 2px solid var(--color-white);
  --avatar-shadow: var(--shadow-sm);
}

/**
 * =================================================================
 * 2. 유틸리티 클래스 정의 (Utility Class Definitions)
 * =================================================================
 * 위에서 정의한 변수를 사용하여 HTML에서 직접 쓸 수 있는
 * .text-*, .leading-* 등의 유틸리티 클래스를 만듭니다.
 */

/* Font Size (with Line Height like Tailwind CSS) */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}
.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.text-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}
.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}
.text-2xl {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
}
.text-3xl {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-3xl);
}
.text-4xl {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-4xl);
}
.text-5xl {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-5xl);
}
.text-6xl {
  font-size: var(--font-size-6xl);
  line-height: var(--line-height-6xl);
}
.text-7xl {
  font-size: var(--font-size-7xl);
  line-height: var(--line-height-7xl);
}
.text-8xl {
  font-size: var(--font-size-8xl);
  line-height: var(--line-height-8xl);
}
.text-9xl {
  font-size: var(--font-size-9xl);
  line-height: var(--line-height-9xl);
}

/* Special size values */
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.size-min {
  width: min-content;
  height: min-content;
}
.size-max {
  width: max-content;
  height: max-content;
}
.size-fit {
  width: fit-content;
  height: fit-content;
}

:root {
  --mobile: 639px; /* 모바일 max-width */
  --tablet: 969px; /* 태블릿 max-width */
  --desktop: 1279px; /* 데스크톱 max-width */
  /* @media (min-width: var(--mobile)) 이렇게 적용안돼서 변수안씀 */
}

/* 테일윈드 기본 브레이크포인트 
**sm: 640px;    Small devices (landscape phones) 
**md: 768px;    Medium devices (tablets) 
lg: 1024px;   Large devices (laptops/desktops) 
**xl: 1280px;   Extra large devices (large laptops) 
2xl: 1536px;  2X large devices (larger desktops) 
*/

/* tailwindcss 미디어 쿼리 (Tailwind CSS Media Queries) 
기본 (모바일, 0px+) sm 미만 (모바일)

 sm (640px+) sm+ (태블릿+)
@media (min-width: 640px) {
}
@media (max-width: 639px) {
}

 md (768px+) md+ (태블릿+)
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}

 lg (1024px+) lg+ (데스크톱+)
@media (min-width: 1024px) {
}
@media (max-width: 1023px) {
}

 xl (1280px+) xl+ (큰 데스크톱+)
@media (min-width: 1280px) {
}
@media (max-width: 1279px) {
}

 2xl (1536px+) 2xl+ (매우 큰 화면+)
@media (min-width: 1536px) {
}
@media (max-width: 1535px) {
}
*/