:root {
  /* 별도 컬로 */
  --error: #EC2111;
  
  /* Primitive */
  /* color */
  --color-base-black: #000000;
  --color-base-white: #ffffff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-50: #eff6ff;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-gray-100: #f2f4f7;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-50: #f9fafb;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-50: #f0fdf4;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-50: #eef2ff;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-navy-100: #d8e3f8;
  --color-navy-200: #b2c8f0;
  --color-navy-300: #8bace9;
  --color-navy-400: #6590e2;
  --color-navy-50: #e4edff;
  --color-navy-500: #4175db;
  --color-navy-600: #265dc5;
  --color-navy-700: #1e4b9f;
  --color-navy-800: #102e67;
  --color-navy-900: #102751;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-50: #fff7ed;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-50: #fdf2f8;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-50: #faf5ff;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-50: #fef2f2;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-50: #f0fdfa;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;
  --color-transparent-12: #0000001f;
  --color-transparent-16: #00000029;
  --color-transparent-20: #00000033;
  --color-transparent-24: #0000003d;
  --color-transparent-28: #00000047;
  --color-transparent-32: #00000052;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-300: #fcd34d;
  --color-yellow-400: #fbbf24;
  --color-yellow-50: #fffbeb;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #d97706;
  --color-yellow-700: #b45309;
  --color-yellow-800: #92400e;
  --color-yellow-900: #78350f;
  /* number */
  --unit-0: 0px;
  --unit-1: 1px;
  --unit-2: 2px;
  --unit-4: 4px;
  --unit-6: 6px;
  --unit-8: 8px;
  --unit-12: 12px;
  --unit-14: 14px; /* 필요해서 추가 */
  --unit-16: 16px;
  --unit-20: 20px;
  --unit-24: 24px;
  --unit-28: 28px;
  --unit-32: 32px;
  --unit-36: 36px;
  --unit-40: 40px;
  --unit-48: 48px;
  --unit-56: 56px;
  --unit-64: 64px;
  --unit-80: 80px;
  --unit-100: 100px;
  --unit-120: 120px;
  --unit-320: 320px;

  /* Primitive:typography */
  /* number */
  --font-size-300: 12px;
  --font-size-350: 14px;
  --font-size-400: 16px;
  --font-size-450: 18px;
  --font-size-500: 20px;
  --font-size-550: 22px;
  --font-size-600: 24px;
  --font-size-700: 28px;
  --font-size-800: 32px;
  --font-size-1000: 40px;
  --font-size-1200: 48px;
  --font-size-1500: 60px;
  --font-size-1800: 72px;
  --font-weight-normal-100-thin: 100;
  --font-weight-normal-200-extra-light: 200;
  --font-weight-normal-300-light: 300;
  --font-weight-normal-400-normal: 400;
  --font-weight-normal-500-medium: 500;
  --font-weight-normal-600-semibold: 600;
  --font-weight-normal-700-bold: 700;
  --font-weight-normal-800-extra-bold: 800;
  --font-weight-normal-900-black: 900;
  --font-weight-normal-950-extra-black: 950;
  --letter-spacing-tighter: -0.4000000059604645px;
  --letter-spacing-tight: -0.20000000298023224px;
  --letter-spacing-default: 0px;
  --letter-spacing-loose: 0.20000000298023224px;
  --letter-spacing-looser: 0.4000000059604645px;
  --letter-spacing-loosest: 1px;
  --letter-spacing-expanded: 1.5px;
  --line-height-450: 18px;
  --line-height-500: 20px;
  --line-height-600: 24px;
  --line-height-700: 28px;
  --line-height-750: 30px;
  --line-height-800: 32px;
  --line-height-900: 36px;
  --line-height-1000: 40px;
  --line-height-1200: 48px;
  --line-height-1500: 60px;
  --line-height-1800: 72px;
  --line-height-2200: 88px;
  --line-height-2700: 108px;
  /* string */
  --font-family-system-android: Noto sans KR;
  --font-family-system-ios: SF Pro;
  --font-family-system-windows: Segeo UI;
  --font-family-typeface-monospace: Source code pro;
  --font-family-typeface-sans-serif: Noto sans KR;
  --font-family-typeface-script: Figma hand;
  --font-family-typeface-serif: Georgia;
    
  /* Theme */
  /* color */
  --color-brand-100: var(--color-navy-100);
  --color-brand-200: var(--color-navy-200);
  --color-brand-300: var(--color-navy-300);
  --color-brand-400: var(--color-navy-400);
  --color-brand-50: var(--color-navy-50);
  --color-brand-500: var(--color-navy-500);
  --color-brand-600: var(--color-navy-600);
  --color-brand-700: var(--color-navy-700);
  --color-brand-800: var(--color-navy-800);
  --color-brand-900: var(--color-navy-900);
  --color-danger-100: var(--color-red-100);
  --color-danger-200: var(--color-red-200);
  --color-danger-300: var(--color-red-300);
  --color-danger-400: var(--color-red-400);
  --color-danger-50: var(--color-red-50);
  --color-danger-500: var(--color-red-500);
  --color-danger-600: var(--color-red-600);
  --color-danger-700: var(--color-red-700);
  --color-danger-800: var(--color-red-800);
  --color-danger-900: var(--color-red-900);
  --color-information-100: var(--color-blue-100);
  --color-information-200: var(--color-blue-200);
  --color-information-300: var(--color-blue-300);
  --color-information-400: var(--color-blue-400);
  --color-information-50: var(--color-blue-50);
  --color-information-500: var(--color-blue-500);
  --color-information-600: var(--color-blue-600);
  --color-information-700: var(--color-blue-700);
  --color-information-800: var(--color-blue-800);
  --color-information-900: var(--color-blue-900);
  --color-neutral-100: var(--color-gray-100);
  --color-neutral-200: var(--color-gray-200);
  --color-neutral-300: var(--color-gray-300);
  --color-neutral-400: var(--color-gray-400);
  --color-neutral-50: var(--color-gray-50);
  --color-neutral-500: var(--color-gray-500);
  --color-neutral-600: var(--color-gray-600);
  --color-neutral-700: var(--color-gray-700);
  --color-neutral-800: var(--color-gray-800);
  --color-neutral-900: var(--color-gray-900);
  --color-success-100: var(--color-green-100);
  --color-success-200: var(--color-green-200);
  --color-success-300: var(--color-green-300);
  --color-success-400: var(--color-green-400);
  --color-success-50: var(--color-green-50);
  --color-success-500: var(--color-green-500);
  --color-success-600: var(--color-green-600);
  --color-success-700: var(--color-green-700);
  --color-success-800: var(--color-green-800);
  --color-success-900: var(--color-green-900);
  --color-warning-100: var(--color-yellow-100);
  --color-warning-200: var(--color-yellow-200);
  --color-warning-300: var(--color-yellow-300);
  --color-warning-400: var(--color-yellow-400);
  --color-warning-50: var(--color-yellow-50);
  --color-warning-500: var(--color-yellow-500);
  --color-warning-600: var(--color-yellow-600);
  --color-warning-700: var(--color-yellow-700);
  --color-warning-800: var(--color-yellow-800);
  --color-warning-900: var(--color-yellow-900);
  /* string */
  --typography-font-family-body: var(--font-family-typeface-sans-serif);
  --typography-font-family-heading: var(--font-family-typeface-sans-serif);

  /* Semantic */
  /* color */
  --color-bg-danger: var(--color-danger-500);
  --color-bg-danger-subtle: var(--color-danger-50);
  --color-bg-disabled: var(--color-neutral-300);
  --color-bg-info: var(--color-information-500);
  --color-bg-info-subtle: var(--color-information-50);
  --color-bg-primary: var(--color-base-white);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-success: var(--color-success-500);
  --color-bg-success-subtle: var(--color-success-50);
  --color-bg-tertiary: var(--color-neutral-200);
  --color-bg-warning: var(--color-warning-500);
  --color-bg-warning-subtle: var(--color-warning-50);
  --color-bg-interactive-destructive: var(--color-danger-500);
  --color-bg-interactive-destructive-hovered: var(--color-danger-600);
  --color-bg-interactive-inverse: var(--color-base-black);
  --color-bg-interactive-primary: var(--color-brand-800);
  --color-bg-interactive-primary-hovered: var(--color-brand-900);
  --color-bg-interactive-secondary: var(--color-brand-500);
  --color-bg-interactive-secondary-hovered: var(--color-brand-600);
  --color-bg-interactive-selected: var(--color-brand-50);
  --color-bg-interactive-selected-hovered: var(--color-brand-100);
  --color-border-danger: var(--color-danger-500);
  --color-border-danger-subtle: var(--color-danger-50);
  --color-border-disabled: var(--color-neutral-400);
  --color-border-info: var(--color-information-500);
  --color-border-info-subtle: var(--color-information-50);
  --color-border-primary: var(--color-neutral-300);
  --color-border-secondary: var(--color-neutral-200);
  --color-border-success: var(--color-success-500);
  --color-border-success-subtle: var(--color-success-50);
  --color-border-tertiary: var(--color-neutral-100);
  --color-border-warning: var(--color-warning-500);
  --color-border-warning-subtle: var(--color-warning-50);
  --color-border-interactive-inverse: var(--color-base-white);
  --color-border-interactive-primary: var(--color-brand-800);
  --color-border-interactive-primary-hovered: var(--color-brand-900);
  --color-border-interactive-secondary: var(--color-brand-500);
  --color-border-interactive-secondary-hovered: var(--color-brand-600);
  --color-content-document: #846fb0;
  --color-content-live-streaming: #f9bb00;
  --color-content-notic: #41b797;
  --color-content-streaming-archive: #00b1bf;
  --color-content-video: #eb6b83;
  --color-icon-brand: var(--color-brand-800);
  --color-icon-danger: var(--color-danger-500);
  --color-icon-disabled: var(--color-neutral-400);
  --color-icon-info: var(--color-information-500);
  --color-icon-primary: var(--color-base-black);
  --color-icon-secondary: var(--color-neutral-700);
  --color-icon-success: var(--color-success-500);
  --color-icon-tertiary: var(--color-neutral-500);
  --color-icon-warning: var(--color-warning-500);
  --color-icon-interactive-inverse: var(--color-base-white);
  --color-icon-interactive-primary: var(--color-brand-800);
  --color-icon-interactive-primary-hovered: var(--color-brand-900);
  --color-icon-interactive-secondary: var(--color-brand-500);
  --color-icon-interactive-secondary-hovered: var(--color-brand-600);
  --color-icon-interactive-selected: var(--color-brand-800);
  --color-shadow-bold: var(--color-transparent-20);
  --color-shadow-bolder: var(--color-transparent-24);
  --color-shadow-defult: var(--color-transparent-16);
  --color-shadow-subtle: var(--color-transparent-12);
  --color-text-danger: var(--color-danger-500);
  --color-text-danger-bold: var(--color-danger-700);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-info: var(--color-information-500);
  --color-text-info-bold: var(--color-information-700);
  --color-text-primary: var(--color-base-black);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-success: var(--color-success-500);
  --color-text-success-bold: var(--color-success-700);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-warning: var(--color-warning-500);
  --color-text-warning-bold: var(--color-warning-700);
  --color-text-interactive-inverse: var(--color-base-white);
  --color-text-interactive-primary: var(--color-brand-800);
  --color-text-interactive-primary-hovered: var(--color-brand-900);
  --color-text-interactive-secondary: var(--color-brand-500);
  --color-text-interactive-secondary-hovered: var(--color-brand-600);
  --color-text-interactive-selected: var(--color-brand-800);
  /* number */
  --border-radius-0: 0px;
  --border-radius-5: 5px;
  --border-radius-10: 10px;
  --border-radius-15: 15px;
  --border-radius-20: 20px;
  --border-radius-25: 25px;
  --border-radius-30: 30px;
  --border-radius-circle: 9999px;
  --border-width-1: var(--unit-1);
  --border-width-2: var(--unit-2);
  --border-width-4: var(--unit-4);
  --border-width-8: var(--unit-8);
  --effect-blur-0: var(--unit-0);
  --effect-blur-1: var(--unit-1);
  --effect-blur-2: var(--unit-2);
  --effect-blur-4: var(--unit-4);
  --effect-blur-8: var(--unit-8);
  --effect-blur-16: var(--unit-16);
  --effect-opacity-0: 0px;
  --effect-opacity-20: 20px;
  --effect-opacity-40: 40px;
  --effect-opacity-60: 60px;
  --effect-opacity-80: 80px;
  --effect-opacity-100: 100px;
  --spacing-0: var(--unit-0);
  --spacing-2: var(--unit-2);
  --spacing-4: var(--unit-4);
  --spacing-6: var(--unit-6);
  --spacing-8: var(--unit-8);
  --spacing-12: var(--unit-12);
  --spacing-16: var(--unit-16);
  --spacing-20: var(--unit-20);
  --spacing-24: var(--unit-24);
  --spacing-28: var(--unit-28);
  --spacing-32: var(--unit-32);
  --spacing-36: var(--unit-36);
  --spacing-40: var(--unit-40);
  --spacing-48: var(--unit-48);
  --spacing-56: var(--unit-56);
  --spacing-64: var(--unit-64);
  --spacing-80: var(--unit-80);
  --spacing-100: var(--unit-100);
  --spacing-120: var(--unit-120);
  --spacing-320: var(--unit-320);
  --spacing-1: var(--unit-1); /* 필요해서 추가 */
  --spacing-60: 60px; /* 필요해서 추가 */
  --spacing-88: 88px; /* 필요해서 추가 */
  --spacing-172: 172px; /* 필요해서 추가 */
  --spacing-180: 180px; /* 필요해서 추가 */
  --spacing-280: 280px; /* 필요해서 추가 */
  --spacing-400: 400px; /* 필요해서 추가 */
  
  /* Semantic:typography deskeop */
  /* number */
  --body-lg-letter-spacing: var(--letter-spacing-default);
  --body-lg-font-size: var(--font-size-400);
  --body-lg-line-height: var(--line-height-600);
  --body-lg-font-weight-400: var(--font-weight-normal-400-normal);
  --body-lg-font-weight-500: var(--font-weight-normal-500-medium);
  --body-lg-font-weight-700: var(--font-weight-normal-700-bold);
  --body-md-letter-spacing: var(--letter-spacing-default);
  --body-md-font-size: var(--font-size-350);
  --body-md-line-height: var(--line-height-500);
  --body-md-font-weight-400: var(--font-weight-normal-400-normal);
  --body-md-font-weight-500: var(--font-weight-normal-500-medium);
  --body-md-font-weight-700: var(--font-weight-normal-700-bold);
  --body-sm-letter-spacing: var(--letter-spacing-default);
  --body-sm-font-size: var(--font-size-300);
  --body-sm-line-height: var(--line-height-450);
  --body-sm-font-weight-400: var(--font-weight-normal-400-normal);
  --body-sm-font-weight-500: var(--font-weight-normal-500-medium);
  --body-sm-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-2xl-letter-spacing: var(--letter-spacing-default);
  --heading-2xl-font-size: var(--font-size-700);
  --heading-2xl-line-height: var(--line-height-1000);
  --heading-2xl-font-weight-500: var(--font-weight-normal-500-medium);
  --heading-2xl-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-3xl-letter-spacing: var(--letter-spacing-default);
  --heading-3xl-font-size: var(--font-size-800);
  --heading-3xl-line-height: var(--line-height-1200);
  --heading-3xl-font-weight-500: var(--font-weight-normal-500-medium);
  --heading-3xl-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-4xl-letter-spacing: var(--letter-spacing-default);
  --heading-4xl-font-size: var(--font-size-1000);
  --heading-4xl-line-height: var(--line-height-1500);
  --heading-4xl-font-weight--500: var(--font-weight-normal-500-medium);
  --heading-4xl-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-5xl-letter-spacing: var(--letter-spacing-default);
  --heading-5xl-font-size: var(--font-size-1200);
  --heading-5xl-line-height: var(--line-height-1800);
  --heading-5xl-font-weight-500: var(--font-weight-normal-500-medium);
  --heading-5xl-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-lg-letter-spacing: var(--letter-spacing-default);
  --heading-lg-font-size: var(--font-size-550);
  --heading-lg-line-height: var(--line-height-800);
  --heading-lg-font-weight-500: var(--font-weight-normal-500-medium);
  --heading-lg-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-md-letter-spacing: var(--letter-spacing-default);
  --heading-md-font-size: var(--font-size-500);
  --heading-md-line-height: var(--line-height-750);
  --heading-md-font-weight-500: var(--font-weight-normal-500-medium);
  --heading-md-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-sm-letter-spacing: var(--letter-spacing-default);
  --heading-sm-font-size: var(--font-size-450);
  --heading-sm-line-height: var(--line-height-700);
  --heading-sm-font-weight-500: var(--font-weight-normal-500-medium);
  --heading-sm-font-weight-700: var(--font-weight-normal-700-bold);
  --heading-xl-letter-spacing: var(--letter-spacing-default);
  --heading-xl-font-size: var(--font-size-600);
  --heading-xl-line-height: var(--line-height-900);
  --heading-xl-font-weight-500: var(--font-weight-normal-500-medium);
  --heading-xl-font-weight-700: var(--font-weight-normal-700-bold);
  /* string */
  --body-font-family: var(--typography-font-family-body);
  --body-font-family-encode: var(--font-family-typeface-monospace);
  --heading-font-family: var(--typography-font-family-heading);

  /* Semantic:spacing deskeop */
  /* number */
  --0-equal: var(--unit-0);
  --1-equal: var(--unit-1); /* 필요해서 추가 */
  --2-equal: var(--unit-2);
  --4-equal: var(--unit-4);
  --6-equal: var(--unit-6);
  --8-equal: var(--unit-8);
  --12-equal: var(--unit-12);
  --14-equal: var(--unit-14); /* 필요해서 추가 */
  --16: var(--unit-16);
  --16-equal: var(--unit-16);
  --20: var(--unit-20);
  --20-equal: var(--unit-20);
  --24: var(--unit-24);
  --24-equal: var(--unit-24);
  --28: var(--unit-28);
  --32: var(--unit-32);
  --36: var(--unit-36);
  --40: var(--unit-40);
  --40-equal: var(--unit-40);
  --48: var(--unit-48);
  --56: var(--unit-56);
  --56-modal: var(--unit-56);
  --64: var(--unit-64);
  --80: var(--unit-80);
  --100: var(--unit-100);
  --120: var(--unit-120);
  --320: var(--unit-320);

  /* Responsive */
  /* number */
  --page-margin: 24px;
  --page-min-width: 1024px;
  --page-max-width: 1920px;
  --spacing-responsive-16: var(--spacing-16);
  --spacing-responsive-24: var(--spacing-24);
  --spacing-responsive-40: var(--spacing-40);
  --spacing-responsive-120: var(--spacing-120);
}

/* tablet */
@media screen and (max-width: 1024px) {
  :root {
    /* Semantic:typography */
    /* number */
    --body-lg-letter-spacing: var(--letter-spacing-default);
    --body-lg-font-size: var(--font-size-400);
    --body-lg-line-height: var(--line-height-600);
    --body-lg-font-weight-400: var(--font-weight-normal-400-normal);
    --body-lg-font-weight-500: var(--font-weight-normal-500-medium);
    --body-lg-font-weight-700: var(--font-weight-normal-700-bold);
    --body-md-letter-spacing: var(--letter-spacing-default);
    --body-md-font-size: var(--font-size-350);
    --body-md-line-height: var(--line-height-500);
    --body-md-font-weight-400: var(--font-weight-normal-400-normal);
    --body-md-font-weight-500: var(--font-weight-normal-500-medium);
    --body-md-font-weight-700: var(--font-weight-normal-700-bold);
    --body-sm-letter-spacing: var(--letter-spacing-default);
    --body-sm-font-size: var(--font-size-300);
    --body-sm-line-height: var(--line-height-450);
    --body-sm-font-weight-400: var(--font-weight-normal-400-normal);
    --body-sm-font-weight-500: var(--font-weight-normal-500-medium);
    --body-sm-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-2xl-letter-spacing: var(--letter-spacing-default);
    --heading-2xl-font-size: var(--font-size-500);
    --heading-2xl-line-height: var(--line-height-750);
    --heading-2xl-font-weight-500: var(--font-weight-normal-500-medium);
    --heading-2xl-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-3xl-letter-spacing: var(--letter-spacing-default);
    --heading-3xl-font-size: var(--font-size-550);
    --heading-3xl-line-height: var(--line-height-800);
    --heading-3xl-font-weight-500: var(--font-weight-normal-500-medium);
    --heading-3xl-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-4xl-letter-spacing: var(--letter-spacing-default);
    --heading-4xl-font-size: var(--font-size-700);
    --heading-4xl-line-height: var(--line-height-1000);
    --heading-4xl-font-weight--500: var(--font-weight-normal-500-medium);
    --heading-4xl-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-5xl-letter-spacing: var(--letter-spacing-default);
    --heading-5xl-font-size: var(--font-size-800);
    --heading-5xl-line-height: var(--line-height-1200);
    --heading-5xl-font-weight-500: var(--font-weight-normal-500-medium);
    --heading-5xl-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-lg-letter-spacing: var(--letter-spacing-default);
    --heading-lg-font-size: var(--font-size-450);
    --heading-lg-line-height: var(--line-height-700);
    --heading-lg-font-weight-500: var(--font-weight-normal-500-medium);
    --heading-lg-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-md-letter-spacing: var(--letter-spacing-default);
    --heading-md-font-size: var(--font-size-450);
    --heading-md-line-height: var(--line-height-700);
    --heading-md-font-weight-500: var(--font-weight-normal-500-medium);
    --heading-md-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-sm-letter-spacing: var(--letter-spacing-default);
    --heading-sm-font-size: var(--font-size-450);
    --heading-sm-line-height: var(--line-height-700);
    --heading-sm-font-weight-500: var(--font-weight-normal-500-medium);
    --heading-sm-font-weight-700: var(--font-weight-normal-700-bold);
    --heading-xl-letter-spacing: var(--letter-spacing-default);
    --heading-xl-font-size: var(--font-size-500);
    --heading-xl-line-height: var(--line-height-750);
    --heading-xl-font-weight-500: var(--font-weight-normal-500-medium);
    --heading-xl-font-weight-700: var(--font-weight-normal-700-bold);
    /* string */
    --body-font-family: var(--typography-font-family-body);
    --body-font-family-encode: var(--font-family-typeface-monospace);
    --heading-font-family: var(--typography-font-family-heading);

    /* Semantic:spacing tablet, mobile */
    /* number */
    --0-equal: var(--unit-0);
    --2-equal: var(--unit-2);
    --4-equal: var(--unit-4);
    --6-equal: var(--unit-6);
    --16: var(--unit-8);
    --8-equal: var(--unit-8);
    --12-equal: var(--unit-12);
    --20: var(--unit-12);
    --16-equal: var(--unit-16);
    --24: var(--unit-16);
    --40: var(--unit-16);
    --20-equal: var(--unit-20);
    --28: var(--unit-20);
    --320: var(--unit-20);
    --56-modal: var(--unit-20);
    --24-equal: var(--unit-24);
    --32: var(--unit-24);
    --36: var(--unit-28);
    --48: var(--unit-32);
    --120: var(--unit-40);
    --40-equal: var(--unit-40);
    --56: var(--unit-40);
    --80: var(--unit-40);
    --64: var(--unit-48);
    --100: var(--unit-64);

    /* Responsive */
    /* number */
    --page-margin: 24px;
    --page-min-width: 768px;
    --page-max-width: 1024px;
    --spacing-responsive-120: 0px;
    --spacing-responsive-16: 0px;
    --spacing-responsive-24: 0px;
    --spacing-responsive-40: 0px;
  }
}

/* mobile */
@media screen and (max-width: 768px) {
  :root {
    /* Responsive */
    /* number */
    --page-margin: 20px;
    --page-min-width: 360px;
    --page-max-width: 768px;
    --spacing-responsive-16: var(--spacing-8);
    --spacing-responsive-24: var(--spacing-16);
    --spacing-responsive-40: var(--spacing-20);
    --spacing-responsive-120: var(--spacing-40);
  }
}