:root {
  /* =========================
   * percent
   * ========================= */
  --per-0: 0%;
  --per-5: 5%;
  --per-10: 10%;
  --per-20: 20%;
  --per-25: 25%;
  --per-30: 30%;
  --per-33: 33.3333%;
  --per-40: 40%;
  --per-50: 50%;
  --per-60: 60%;
  --per-66: 66.6667%;
  --per-70: 70%;
  --per-75: 75%;
  --per-80: 80%;
  --per-90: 90%;
  --per-100: 100%;

  /* =========================
   * spacing
   * ========================= */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-100: 100px;
  --space-120: 120px;
  --space-160: 160px;
  --space-200: 200px;
  --space-240: 240px;
  --space-280: 280px;
  --space-320: 320px;
  --space-360: 360px;
  --space-400: 400px;
  --space-480: 480px;
  --space-560: 560px;
  --space-640: 640px;
  --space-720: 720px;
  --space-800: 800px;

  /* =========================
   * radius
   * ========================= */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-full: 9999px;

  /* =========================
   * colors
   * ========================= */
  --color-white: #ffffff;
  --color-black: #111111;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-250: #dadada;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-success-500: #22c55e;
  --color-warning-500: #f59e0b;
  --color-danger-500: #ef4444;
  --color-danger-600: #FF2B30;

  /* =========================
   * font-size
   * ========================= */
  --font-10: 10px;
  --font-12: 12px;
  --font-14: 14px;
  --font-16: 16px;
  --font-18: 18px;
  --font-20: 20px;
  --font-24: 24px;
  --font-28: 28px;
  --font-32: 32px;
  --font-40: 40px;
  --font-48: 48px;

  /* =========================
   * line-height
   * ========================= */
  --lh-1: 1;
  --lh-12: 1.2;
  --lh-14: 1.4;
  --lh-15: 1.5;
  --lh-16: 1.6;
  --lh-18: 1.8;

  /* =========================
   * shadow
   * ========================= */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-4: 0 16px 40px rgba(0, 0, 0, 0.14);

  /* =========================
   * border
   * ========================= */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* =========================
   * opacity
   * ========================= */
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;

  /* =========================
   * z-index
   * ========================= */
  --z-0: 0;
  --z-1: 1;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-100: 100;
  --z-999: 999;
  --z-9999: 9999;
}

/* =========================
 * reset helpers
 * ========================= */
.box-border { box-sizing: border-box; }
.box-content { box-sizing: content-box; }

/* =========================
 * display
 * ========================= */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* =========================
 * position
 * ========================= */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* =========================
 * inset
 * ========================= */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* =========================
 * z-index
 * ========================= */
.z-0 { z-index: var(--z-0); }
.z-1 { z-index: var(--z-1); }
.z-10 { z-index: var(--z-10); }
.z-20 { z-index: var(--z-20); }
.z-30 { z-index: var(--z-30); }
.z-40 { z-index: var(--z-40); }
.z-50 { z-index: var(--z-50); }
.z-100 { z-index: var(--z-100); }
.z-999 { z-index: var(--z-999); }
.z-9999 { z-index: var(--z-9999); }

/* =========================
 * overflow
 * ========================= */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-visible { overflow: visible; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }

/* =========================
 * flex
 * ========================= */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* =========================
 * grid
 * ========================= */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* =========================
 * width - percent
 * ========================= */
.w-auto { width: auto; }
.w-p-0 { width: var(--per-0); }
.w-p-5 { width: var(--per-5); }
.w-p-10 { width: var(--per-10); }
.w-p-20 { width: var(--per-20); }
.w-p-25 { width: var(--per-25); }
.w-p-30 { width: var(--per-30); }
.w-p-33 { width: var(--per-33); }
.w-p-40 { width: var(--per-40); }
.w-p-50 { width: var(--per-50); }
.w-p-60 { width: var(--per-60); }
.w-p-66 { width: var(--per-66); }
.w-p-70 { width: var(--per-70); }
.w-p-75 { width: var(--per-75); }
.w-p-80 { width: var(--per-80); }
.w-p-90 { width: var(--per-90); }
.w-p-100 { width: var(--per-100); }


/* =========================
 * width - space
 * ========================= */
.w-s-0 { width: var(--space-0); }
.w-s-2 { width: var(--space-2); }
.w-s-4 { width: var(--space-4); }
.w-s-6 { width: var(--space-6); }
.w-s-8 { width: var(--space-8); }
.w-s-10 { width: var(--space-10); }
.w-s-12 { width: var(--space-12); }
.w-s-14 { width: var(--space-14); }
.w-s-16 { width: var(--space-16); }
.w-s-18 { width: var(--space-18); }
.w-s-20 { width: var(--space-20); }
.w-s-24 { width: var(--space-24); }
.w-s-28 { width: var(--space-28); }
.w-s-32 { width: var(--space-32); }
.w-s-36 { width: var(--space-36); }
.w-s-40 { width: var(--space-40); }
.w-s-44 { width: var(--space-44); }
.w-s-48 { width: var(--space-48); }
.w-s-56 { width: var(--space-56); }
.w-s-64 { width: var(--space-64); }
.w-s-72 { width: var(--space-72); }
.w-s-80 { width: var(--space-80); }
.w-s-96 { width: var(--space-96); }
.w-s-100 { width: var(--space-100); }
.w-s-120 { width: var(--space-120); }
.w-s-160 { width: var(--space-160); }
.w-s-200 { width: var(--space-200); }
.w-s-240 { width: var(--space-240); }
.w-s-280 { width: var(--space-280); }
.w-s-320 { width: var(--space-320); }
.w-s-360 { width: var(--space-360); }
.w-s-400 { width: var(--space-400); }
.w-s-480 { width: var(--space-480); }
.w-s-560 { width: var(--space-560); }
.w-s-640 { width: var(--space-640); }
.w-s-720 { width: var(--space-720); }
.w-s-800 { width: var(--space-800); }

/* =========================
 * min-width - percent
 * ========================= */

.min-w-p-0 { min-width: var(--per-0); }
.min-w-p-5 { min-width: var(--per-5); }
.min-w-p-10 { min-width: var(--per-10); }
.min-w-p-20 { min-width: var(--per-20); }
.min-w-p-25 { min-width: var(--per-25); }
.min-w-p-30 { min-width: var(--per-30); }
.min-w-p-33 { min-width: var(--per-33); }
.min-w-p-40 { min-width: var(--per-40); }
.min-w-p-50 { min-width: var(--per-50); }
.min-w-p-60 { min-width: var(--per-60); }
.min-w-p-66 { min-width: var(--per-66); }
.min-w-p-70 { min-width: var(--per-70); }
.min-w-p-75 { min-width: var(--per-75); }
.min-w-p-80 { min-width: var(--per-80); }
.min-w-p-90 { min-width: var(--per-90); }
.min-w-p-100 { min-width: var(--per-100); }
/* =========================
 * min-width - space
 * ========================= */
.min-w-s-0 { min-width: var(--space-0); }
.min-w-s-2 { min-width: var(--space-2); }
.min-w-s-4 { min-width: var(--space-4); }
.min-w-s-6 { min-width: var(--space-6); }
.min-w-s-8 { min-width: var(--space-8); }
.min-w-s-10 { min-width: var(--space-10); }
.min-w-s-12 { min-width: var(--space-12); }
.min-w-s-14 { min-width: var(--space-14); }
.min-w-s-16 { min-width: var(--space-16); }
.min-w-s-18 { min-width: var(--space-18); }
.min-w-s-20 { min-width: var(--space-20); }
.min-w-s-24 { min-width: var(--space-24); }
.min-w-s-28 { min-width: var(--space-28); }
.min-w-s-32 { min-width: var(--space-32); }
.min-w-s-36 { min-width: var(--space-36); }
.min-w-s-40 { min-width: var(--space-40); }
.min-w-s-44 { min-width: var(--space-44); }
.min-w-s-48 { min-width: var(--space-48); }
.min-w-s-56 { min-width: var(--space-56); }
.min-w-s-64 { min-width: var(--space-64); }
.min-w-s-72 { min-width: var(--space-72); }
.min-w-s-80 { min-width: var(--space-80); }
.min-w-s-96 { min-width: var(--space-96); }
.min-w-s-100 { min-width: var(--space-100); }
.min-w-s-120 { min-width: var(--space-120); }
.min-w-s-160 { min-width: var(--space-160); }
.min-w-s-200 { min-width: var(--space-200); }
.min-w-s-240 { min-width: var(--space-240); }
.min-w-s-280 { min-width: var(--space-280); }
.min-w-s-320 { min-width: var(--space-320); }
.min-w-s-360 { min-width: var(--space-360); }
.min-w-s-400 { min-width: var(--space-400); }
.min-w-s-480 { min-width: var(--space-480); }
.min-w-s-560 { min-width: var(--space-560); }
.min-w-s-640 { min-width: var(--space-640); }
.min-w-s-720 { min-width: var(--space-720); }
.min-w-s-800 { min-width: var(--space-800); }

/* =========================
 * max-width - percent
 * ========================= */

.max-w-none { max-width: none; }
.max-w-p-0 { max-width: var(--per-0); }
.max-w-p-5 { max-width: var(--per-5); }
.max-w-p-10 { max-width: var(--per-10); }
.max-w-p-20 { max-width: var(--per-20); }
.max-w-p-25 { max-width: var(--per-25); }
.max-w-p-30 { max-width: var(--per-30); }
.max-w-p-33 { max-width: var(--per-33); }
.max-w-p-40 { max-width: var(--per-40); }
.max-w-p-50 { max-width: var(--per-50); }
.max-w-p-60 { max-width: var(--per-60); }
.max-w-p-66 { max-width: var(--per-66); }
.max-w-p-70 { max-width: var(--per-70); }
.max-w-p-75 { max-width: var(--per-75); }
.max-w-p-80 { max-width: var(--per-80); }
.max-w-p-90 { max-width: var(--per-90); }
.max-w-p-100 { max-width: var(--per-100); }

/* =========================
 * max-width - space
 * ========================= */
.max-w-s-0 { max-width: var(--space-0); }
.max-w-s-2 { max-width: var(--space-2); }
.max-w-s-4 { max-width: var(--space-4); }
.max-w-s-6 { max-width: var(--space-6); }
.max-w-s-8 { max-width: var(--space-8); }
.max-w-s-10 { max-width: var(--space-10); }
.max-w-s-12 { max-width: var(--space-12); }
.max-w-s-14 { max-width: var(--space-14); }
.max-w-s-16 { max-width: var(--space-16); }
.max-w-s-18 { max-width: var(--space-18); }
.max-w-s-20 { max-width: var(--space-20); }
.max-w-s-24 { max-width: var(--space-24); }
.max-w-s-28 { max-width: var(--space-28); }
.max-w-s-32 { max-width: var(--space-32); }
.max-w-s-36 { max-width: var(--space-36); }
.max-w-s-40 { max-width: var(--space-40); }
.max-w-s-44 { max-width: var(--space-44); }
.max-w-s-48 { max-width: var(--space-48); }
.max-w-s-56 { max-width: var(--space-56); }
.max-w-s-64 { max-width: var(--space-64); }
.max-w-s-72 { max-width: var(--space-72); }
.max-w-s-80 { max-width: var(--space-80); }
.max-w-s-96 { max-width: var(--space-96); }
.max-w-s-100 { max-width: var(--space-100); }
.max-w-s-120 { max-width: var(--space-120); }
.max-w-s-160 { max-width: var(--space-160); }
.max-w-s-200 { max-width: var(--space-200); }
.max-w-s-240 { max-width: var(--space-240); }
.max-w-s-280 { max-width: var(--space-280); }
.max-w-s-320 { max-width: var(--space-320); }
.max-w-s-360 { max-width: var(--space-360); }
.max-w-s-400 { max-width: var(--space-400); }
.max-w-s-480 { max-width: var(--space-480); }
.max-w-s-560 { max-width: var(--space-560); }
.max-w-s-640 { max-width: var(--space-640); }
.max-w-s-720 { max-width: var(--space-720); }
.max-w-s-800 { max-width: var(--space-800); }

/* =========================
 * height - percent
 * ========================= */

.h-auto { height: auto; }
.h-p-0 { height: var(--per-0); }
.h-p-5 { height: var(--per-5); }
.h-p-10 { height: var(--per-10); }
.h-p-20 { height: var(--per-20); }
.h-p-25 { height: var(--per-25); }
.h-p-30 { height: var(--per-30); }
.h-p-33 { height: var(--per-33); }
.h-p-40 { height: var(--per-40); }
.h-p-50 { height: var(--per-50); }
.h-p-60 { height: var(--per-60); }
.h-p-66 { height: var(--per-66); }
.h-p-70 { height: var(--per-70); }
.h-p-75 { height: var(--per-75); }
.h-p-80 { height: var(--per-80); }
.h-p-90 { height: var(--per-90); }
.h-p-100 { height: var(--per-100); }
.h-p-screen { height: 100vh; }

/* =========================
 * height - space
 * ========================= */
.h-s-0 { height: var(--space-0); }
.h-s-2 { height: var(--space-2); }
.h-s-4 { height: var(--space-4); }
.h-s-6 { height: var(--space-6); }
.h-s-8 { height: var(--space-8); }
.h-s-10 { height: var(--space-10); }
.h-s-12 { height: var(--space-12); }
.h-s-14 { height: var(--space-14); }
.h-s-16 { height: var(--space-16); }
.h-s-18 { height: var(--space-18); }
.h-s-20 { height: var(--space-20); }
.h-s-24 { height: var(--space-24); }
.h-s-28 { height: var(--space-28); }
.h-s-32 { height: var(--space-32); }
.h-s-36 { height: var(--space-36); }
.h-s-40 { height: var(--space-40); }
.h-s-44 { height: var(--space-44); }
.h-s-48 { height: var(--space-48); }
.h-s-56 { height: var(--space-56); }
.h-s-64 { height: var(--space-64); }
.h-s-72 { height: var(--space-72); }
.h-s-80 { height: var(--space-80); }
.h-s-96 { height: var(--space-96); }
.h-s-100 { height: var(--space-100); }
.h-s-120 { height: var(--space-120); }
.h-s-160 { height: var(--space-160); }
.h-s-200 { height: var(--space-200); }
.h-s-240 { height: var(--space-240); }
.h-s-280 { height: var(--space-280); }
.h-s-320 { height: var(--space-320); }
.h-s-360 { height: var(--space-360); }
.h-s-400 { height: var(--space-400); }
.h-s-480 { height: var(--space-480); }
.h-s-560 { height: var(--space-560); }
.h-s-640 { height: var(--space-640); }
.h-s-720 { height: var(--space-720); }
.h-s-800 { height: var(--space-800); }

.min-h-0 { min-height: 0; }
.min-h-screen { min-height: 100vh; }

/* =========================
 * min-height - percent
 * ========================= */
.min-h-p-5 { min-height: var(--per-5); }
.min-h-p-10 { min-height: var(--per-10); }
.min-h-p-20 { min-height: var(--per-20); }
.min-h-p-25 { min-height: var(--per-25); }
.min-h-p-30 { min-height: var(--per-30); }
.min-h-p-33 { min-height: var(--per-33); }
.min-h-p-40 { min-height: var(--per-40); }
.min-h-p-50 { min-height: var(--per-50); }
.min-h-p-60 { min-height: var(--per-60); }
.min-h-p-66 { min-height: var(--per-66); }
.min-h-p-70 { min-height: var(--per-70); }
.min-h-p-75 { min-height: var(--per-75); }
.min-h-p-80 { min-height: var(--per-80); }
.min-h-p-90 { min-height: var(--per-90); }
.min-h-p-100 { min-height: var(--per-100); }

/* =========================
 * min-height - space
 * ========================= */
.min-h-s-0 { min-height: var(--space-0); }
.min-h-s-2 { min-height: var(--space-2); }
.min-h-s-4 { min-height: var(--space-4); }
.min-h-s-6 { min-height: var(--space-6); }
.min-h-s-8 { min-height: var(--space-8); }
.min-h-s-10 { min-height: var(--space-10); }
.min-h-s-12 { min-height: var(--space-12); }
.min-h-s-14 { min-height: var(--space-14); }
.min-h-s-16 { min-height: var(--space-16); }
.min-h-s-18 { min-height: var(--space-18); }
.min-h-s-20 { min-height: var(--space-20); }
.min-h-s-24 { min-height: var(--space-24); }
.min-h-s-28 { min-height: var(--space-28); }
.min-h-s-32 { min-height: var(--space-32); }
.min-h-s-36 { min-height: var(--space-36); }
.min-h-s-40 { min-height: var(--space-40); }
.min-h-s-44 { min-height: var(--space-44); }
.min-h-s-48 { min-height: var(--space-48); }
.min-h-s-56 { min-height: var(--space-56); }
.min-h-s-64 { min-height: var(--space-64); }
.min-h-s-72 { min-height: var(--space-72); }
.min-h-s-80 { min-height: var(--space-80); }
.min-h-s-96 { min-height: var(--space-96); }
.min-h-s-100 { min-height: var(--space-100); }
.min-h-s-120 { min-height: var(--space-120); }
.min-h-s-160 { min-height: var(--space-160); }
.min-h-s-200 { min-height: var(--space-200); }
.min-h-s-240 { min-height: var(--space-240); }
.min-h-s-280 { min-height: var(--space-280); }
.min-h-s-320 { min-height: var(--space-320); }
.min-h-s-360 { min-height: var(--space-360); }
.min-h-s-400 { min-height: var(--space-400); }
.min-h-s-480 { min-height: var(--space-480); }
.min-h-s-560 { min-height: var(--space-560); }
.min-h-s-640 { min-height: var(--space-640); }
.min-h-s-720 { min-height: var(--space-720); }
.min-h-s-800 { min-height: var(--space-800); }

/* =========================
 * max-height - percent
 * ========================= */
.max-h-p-none { max-height: none; }
.max-h-p-0 { max-height: var(--per-0); }
.max-h-p-5 { max-height: var(--per-5); }
.max-h-p-10 { max-height: var(--per-10); }
.max-h-p-20 { max-height: var(--per-20); }
.max-h-p-25 { max-height: var(--per-25); }
.max-h-p-30 { max-height: var(--per-30); }
.max-h-p-33 { max-height: var(--per-33); }
.max-h-p-40 { max-height: var(--per-40); }
.max-h-p-50 { max-height: var(--per-50); }
.max-h-p-60 { max-height: var(--per-60); }
.max-h-p-66 { max-height: var(--per-66); }
.max-h-p-70 { max-height: var(--per-70); }
.max-h-p-75 { max-height: var(--per-75); }
.max-h-p-80 { max-height: var(--per-80); }
.max-h-p-90 { max-height: var(--per-90); }
.max-h-p-100 { max-height: var(--per-100); }

/* =========================
 * max-height - space
 * ========================= */
.max-h-s-0 { max-height: var(--space-0); }
.max-h-s-2 { max-height: var(--space-2); }
.max-h-s-4 { max-height: var(--space-4); }
.max-h-s-6 { max-height: var(--space-6); }
.max-h-s-8 { max-height: var(--space-8); }
.max-h-s-10 { max-height: var(--space-10); }
.max-h-s-12 { max-height: var(--space-12); }
.max-h-s-14 { max-height: var(--space-14); }
.max-h-s-16 { max-height: var(--space-16); }
.max-h-s-18 { max-height: var(--space-18); }
.max-h-s-20 { max-height: var(--space-20); }
.max-h-s-24 { max-height: var(--space-24); }
.max-h-s-28 { max-height: var(--space-28); }
.max-h-s-32 { max-height: var(--space-32); }
.max-h-s-36 { max-height: var(--space-36); }
.max-h-s-40 { max-height: var(--space-40); }
.max-h-s-44 { max-height: var(--space-44); }
.max-h-s-48 { max-height: var(--space-48); }
.max-h-s-56 { max-height: var(--space-56); }
.max-h-s-64 { max-height: var(--space-64); }
.max-h-s-72 { max-height: var(--space-72); }
.max-h-s-80 { max-height: var(--space-80); }
.max-h-s-96 { max-height: var(--space-96); }
.max-h-s-100 { max-height: var(--space-100); }
.max-h-s-120 { max-height: var(--space-120); }
.max-h-s-160 { max-height: var(--space-160); }
.max-h-s-200 { max-height: var(--space-200); }
.max-h-s-240 { max-height: var(--space-240); }
.max-h-s-280 { max-height: var(--space-280); }
.max-h-s-320 { max-height: var(--space-320); }
.max-h-s-360 { max-height: var(--space-360); }
.max-h-s-400 { max-height: var(--space-400); }
.max-h-s-480 { max-height: var(--space-480); }
.max-h-s-560 { max-height: var(--space-560); }
.max-h-s-640 { max-height: var(--space-640); }
.max-h-s-720 { max-height: var(--space-720); }
.max-h-s-800 { max-height: var(--space-800); }

/* =========================
 * margin
 * ========================= */
.m-0 { margin: var(--space-0); }
.m-2 { margin: var(--space-2); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-14 { margin: var(--space-14); }
.m-16 { margin: var(--space-16); }
.m-18 { margin: var(--space-18); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }
.m-28 { margin: var(--space-28); }
.m-32 { margin: var(--space-32); }
.m-36 { margin: var(--space-36); }
.m-40 { margin: var(--space-40); }
.m-44 { margin: var(--space-44); }
.m-48 { margin: var(--space-48); }
.m-56 { margin: var(--space-56); }
.m-64 { margin: var(--space-64); }
.m-auto { margin: auto; }

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mt-0 { margin-top: var(--space-0); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-48 { margin-bottom: var(--space-48); }
.mb-64 { margin-bottom: var(--space-64); }

.ml-0 { margin-left: var(--space-0); }
.ml-4 { margin-left: var(--space-4); }
.ml-8 { margin-left: var(--space-8); }
.ml-12 { margin-left: var(--space-12); }
.ml-16 { margin-left: var(--space-16); }
.ml-20 { margin-left: var(--space-20); }
.ml-24 { margin-left: var(--space-24); }
.ml-32 { margin-left: var(--space-32); }
.ml-40 { margin-left: var(--space-40); }
.ml-48 { margin-left: var(--space-48); }
.ml-64 { margin-left: var(--space-64); }

.mr-0 { margin-right: var(--space-0); }
.mr-4 { margin-right: var(--space-4); }
.mr-8 { margin-right: var(--space-8); }
.mr-12 { margin-right: var(--space-12); }
.mr-16 { margin-right: var(--space-16); }
.mr-20 { margin-right: var(--space-20); }
.mr-24 { margin-right: var(--space-24); }
.mr-32 { margin-right: var(--space-32); }
.mr-40 { margin-right: var(--space-40); }
.mr-48 { margin-right: var(--space-48); }
.mr-64 { margin-right: var(--space-64); }

.mx-0 {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}
.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.mx-12 {
  margin-left: var(--space-12);
  margin-right: var(--space-12);
}
.mx-16 {
  margin-left: var(--space-16);
  margin-right: var(--space-16);
}
.mx-20 {
  margin-left: var(--space-20);
  margin-right: var(--space-20);
}
.mx-24 {
  margin-left: var(--space-24);
  margin-right: var(--space-24);
}
.mx-32 {
  margin-left: var(--space-32);
  margin-right: var(--space-32);
}
.mx-40 {
  margin-left: var(--space-40);
  margin-right: var(--space-40);
}
.mx-48 {
  margin-left: var(--space-48);
  margin-right: var(--space-48);
}

.my-0 {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}
.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}
.my-12 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}
.my-16 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
}
.my-20 {
  margin-top: var(--space-20);
  margin-bottom: var(--space-20);
}
.my-24 {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}
.my-32 {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}
.my-40 {
  margin-top: var(--space-40);
  margin-bottom: var(--space-40);
}
.my-48 {
  margin-top: var(--space-48);
  margin-bottom: var(--space-48);
}

/* =========================
 * padding
 * ========================= */
.p-0 { padding: var(--space-0); }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-14 { padding: var(--space-14); }
.p-16 { padding: var(--space-16); }
.p-18 { padding: var(--space-18); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }
.p-28 { padding: var(--space-28); }
.p-32 { padding: var(--space-32); }
.p-36 { padding: var(--space-36); }
.p-40 { padding: var(--space-40); }
.p-44 { padding: var(--space-44); }
.p-48 { padding: var(--space-48); }
.p-56 { padding: var(--space-56); }
.p-64 { padding: var(--space-64); }

.pt-0 { padding-top: var(--space-0); }
.pt-4 { padding-top: var(--space-4); }
.pt-8 { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }
.pt-24 { padding-top: var(--space-24); }
.pt-32 { padding-top: var(--space-32); }
.pt-40 { padding-top: var(--space-40); }
.pt-48 { padding-top: var(--space-48); }
.pt-64 { padding-top: var(--space-64); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-24 { padding-bottom: var(--space-24); }
.pb-32 { padding-bottom: var(--space-32); }
.pb-40 { padding-bottom: var(--space-40); }
.pb-48 { padding-bottom: var(--space-48); }
.pb-64 { padding-bottom: var(--space-64); }

.pl-0 { padding-left: var(--space-0); }
.pl-4 { padding-left: var(--space-4); }
.pl-8 { padding-left: var(--space-8); }
.pl-12 { padding-left: var(--space-12); }
.pl-16 { padding-left: var(--space-16); }
.pl-20 { padding-left: var(--space-20); }
.pl-24 { padding-left: var(--space-24); }
.pl-32 { padding-left: var(--space-32); }
.pl-40 { padding-left: var(--space-40); }
.pl-48 { padding-left: var(--space-48); }
.pl-64 { padding-left: var(--space-64); }

.pr-0 { padding-right: var(--space-0); }
.pr-4 { padding-right: var(--space-4); }
.pr-8 { padding-right: var(--space-8); }
.pr-12 { padding-right: var(--space-12); }
.pr-16 { padding-right: var(--space-16); }
.pr-20 { padding-right: var(--space-20); }
.pr-24 { padding-right: var(--space-24); }
.pr-32 { padding-right: var(--space-32); }
.pr-40 { padding-right: var(--space-40); }
.pr-48 { padding-right: var(--space-48); }
.pr-64 { padding-right: var(--space-64); }

.px-0 {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}
.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}
.px-20 {
  padding-left: var(--space-20);
  padding-right: var(--space-20);
}
.px-24 {
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}
.px-32 {
  padding-left: var(--space-32);
  padding-right: var(--space-32);
}
.px-40 {
  padding-left: var(--space-40);
  padding-right: var(--space-40);
}
.px-48 {
  padding-left: var(--space-48);
  padding-right: var(--space-48);
}

.py-0 {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}
.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.py-20 {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}
.py-24 {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}
.py-32 {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}
.py-40 {
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}
.py-48 {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

/* =========================
 * gap
 * ========================= */
.gap-0 { gap: var(--space-0); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-14 { gap: var(--space-14); }
.gap-16 { gap: var(--space-16); }
.gap-18 { gap: var(--space-18); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }
.gap-28 { gap: var(--space-28); }
.gap-32 { gap: var(--space-32); }
.gap-36 { gap: var(--space-36); }
.gap-40 { gap: var(--space-40); }
.gap-44 { gap: var(--space-44); }
.gap-48 { gap: var(--space-48); }
.gap-56 { gap: var(--space-56); }
.gap-64 { gap: var(--space-64); }

/* =========================
 * text-align
 * ========================= */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* =========================
 * font-size
 * ========================= */
.text-10 { font-size: var(--font-10); }
.text-12 { font-size: var(--font-12); }
.text-14 { font-size: var(--font-14); }
.text-16 { font-size: var(--font-16); }
.text-18 { font-size: var(--font-18); }
.text-20 { font-size: var(--font-20); }
.text-24 { font-size: var(--font-24); }
.text-28 { font-size: var(--font-28); }
.text-32 { font-size: var(--font-32); }
.text-40 { font-size: var(--font-40); }
.text-48 { font-size: var(--font-48); }

/* =========================
 * font-weight
 * ========================= */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

/* =========================
 * line-height
 * ========================= */
.lh-1 { line-height: var(--lh-1); }
.lh-12 { line-height: var(--lh-12); }
.lh-14 { line-height: var(--lh-14); }
.lh-15 { line-height: var(--lh-15); }
.lh-16 { line-height: var(--lh-16); }
.lh-18 { line-height: var(--lh-18); }

/* =========================
 * color
 * ========================= */
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }

.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }

.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }

.text-success-500 { color: var(--color-success-500); }
.text-warning-500 { color: var(--color-warning-500); }
.text-danger-500 { color: var(--color-danger-500); }
.text-danger-600 { color: var(--color-danger-600); }

/* =========================
 * background
 * ========================= */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }

.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-400 { background-color: var(--color-gray-400); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }

.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }

.bg-success-500 { background-color: var(--color-success-500); }
.bg-warning-500 { background-color: var(--color-warning-500); }
.bg-danger-500 { background-color: var(--color-danger-500); }
.bg-danger-600 { background-color: var(--color-danger-600); }

/* =========================
 * border
 * ========================= */
.border { border: var(--border-1) solid var(--color-gray-300); }
.border-0 { border: 0; }
.border-1 { border-width: var(--border-1); border-style: solid; }
.border-2 { border-width: var(--border-2); border-style: solid; }
.border-3 { border-width: var(--border-3); border-style: solid; }

.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-250 { border-color: var(--color-gray-250); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-400 { border-color: var(--color-gray-400); }
.border-gray-500 { border-color: var(--color-gray-500); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.border-danger-500 { border-color: var(--color-danger-500); }
.border-danger-600 { border-color: var(--color-danger-600); }

/* =========================
 * radius
 * ========================= */
.rounded-0 { border-radius: var(--radius-0); }
.rounded-2 { border-radius: var(--radius-2); }
.rounded-4 { border-radius: var(--radius-4); }
.rounded-6 { border-radius: var(--radius-6); }
.rounded-8 { border-radius: var(--radius-8); }
.rounded-10 { border-radius: var(--radius-10); }
.rounded-12 { border-radius: var(--radius-12); }
.rounded-16 { border-radius: var(--radius-16); }
.rounded-20 { border-radius: var(--radius-20); }
.rounded-24 { border-radius: var(--radius-24); }
.rounded-full { border-radius: var(--radius-full); }

/* =========================
 * shadow
 * ========================= */
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.shadow-3 { box-shadow: var(--shadow-3); }
.shadow-4 { box-shadow: var(--shadow-4); }
.shadow-none { box-shadow: none; }

/* =========================
 * opacity
 * ========================= */
.opacity-0 { opacity: var(--opacity-0); }
.opacity-10 { opacity: var(--opacity-10); }
.opacity-20 { opacity: var(--opacity-20); }
.opacity-30 { opacity: var(--opacity-30); }
.opacity-40 { opacity: var(--opacity-40); }
.opacity-50 { opacity: var(--opacity-50); }
.opacity-60 { opacity: var(--opacity-60); }
.opacity-70 { opacity: var(--opacity-70); }
.opacity-80 { opacity: var(--opacity-80); }
.opacity-90 { opacity: var(--opacity-90); }
.opacity-100 { opacity: var(--opacity-100); }

/* =========================
 * object-fit
 * ========================= */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }

/* =========================
 * helpers
 * ========================= */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }

/* ================================================================
   메인 페이지 리뉴얼 — re-pc에서 이관한 규칙 (2026-10-22)
   라이브 CSS 기준에 "리뉴얼에서 새로 만든 규칙"만 규칙 단위로 추가함. 가격 관련 규칙은 라이브 것을 유지.
   ================================================================ */

:root {
  --per-85: 85%;
}

.w-p-85 { width: var(--per-85); }

.h-p-85 { height: var(--per-85); }

.center:not(td):not(th) {
  display: flex;
  justify-content: center;
  align-items: center;
}