:root {
--headerH: 100px;
--shead: 60px;
--controlH: 5em;
--color-point : #0166da;
--color-point2: #f02128;
--color-text-gray: #7f7f7f;
--color-back-1: #f2f7fb;
--color-black: #000;
--color-black-1: #000000;
--color-black-2: #111111;
--color-black-3: #171717;
--color-black-4: #222222;
--color-black-5: #333333;
--color-black-6: #444444;
--color-black-7: #555555;
--color-black-8: #666666;
--color-black-9: #777777;
--color-black-10: #888888;
--color-black-11: #999999;
--crGrad2: linear-gradient(to bottom, var(--color-point2), var(--color-point3));
--crWhitefil: brightness(0) invert(1);
--gray-line: #d1d1d1;
--gray-line-1: #eaeaea;
/* ====== html Font-Size 100% 기준 (1rem = 16px) ====== */
 --html-font-size-1 : 100%; --html-font-size-2 : 87.5%; --html-font-size-3 : 75%; --html-font-size-4 : 62.5%; /* 1rem = 16px 기준 */
 --font-size-xxxs: clamp(0.5rem, 0.5vw, 0.625rem); /* 8px ~ 10px */
 --font-size-xxs: clamp(0.625rem, 0.6vw, 0.75rem); /* 10px ~ 12px */
 --font-size-xs: clamp(0.75rem, 0.8vw, 0.875rem); /* 12px ~ 14px */
 --font-size-sm-1: clamp(0.8125rem, 0.9vw, 0.9375rem); /* 13px ~ 15px */
 --font-size-sm: clamp(0.875rem, 1vw, 1rem); /* 14px ~ 16px */
 --font-size-base: clamp(1rem, 1.2vw, 1.125rem); /* 16px ~ 18px */
 --font-size-md-1: clamp(1.0625rem, 1.3vw, 1.25rem); /* 17px ~ 20px */
 --font-size-md: clamp(1.125rem, 1.4vw, 1.375rem); /* 18px ~ 22px */
 --font-size-lg-1: clamp(1.375rem, 1.7vw, 1.625rem); /* 22px ~ 26px */
 --font-size-lg: clamp(1.5rem, 2vw, 1.75rem); /* 24px ~ 28px */
 --font-size-lg-2: clamp(1.75rem, 2.5vw, 2rem); /* 28px ~ 32px */
 --font-size-xl-1: clamp(1.875rem, 2.7vw, 2.25rem); /* 30px ~ 36px */
 --font-size-xl: clamp(2rem, 3vw, 2.5rem); /* 32px ~ 40px */
 --font-size-xxl: clamp(2.5rem, 3.5vw, 2.85rem); /* 40px ~ 45.6px */
 --font-size-xxl-2: clamp(2.9rem, 3.9vw, 3.25rem); /* 46.4px ~ 52px */
 --font-size-xxxl: clamp(3rem, 4vw, 3.65rem); /* 48px ~ 64px */
 --font-size-xxxxl: clamp(4rem, 6vw, 6rem); /* 64px ~ 96px */

 /* ====== Border Radius ====== */
 --radius-none: 0;
 --radius-sm: 0.4rem; /* 4px */
 --radius-md: 0.8rem; /* 8px */
 --radius-lg: 1.6rem; /* 16px */
 --radius-xl: 2.4rem; /* 24px */
 --radius-pill: 9999px;
 
 /* ====== Gaps (Grid / Flexbox) ====== */
 --gap-xs: var(--space-1);
 --gap-sm: var(--space-2);
 --gap-md: var(--space-3);
 --gap-lg: var(--space-4);
 --gap-xl: var(--space-5);
 
/* ====== Spacing (margin, padding, gap) - 8px 기반 ====== */
 --space-0: 0; /* 0px */
 --space-1: 0.4rem; /* 4px */
 --space-2: 0.8rem; /* 8px */
 --space-3: 1.2rem; /* 12px */
 --space-4: 1.6rem; /* 16px */
 --space-5: 2.4rem; /* 24px */
 --space-6: 3.2rem; /* 32px */
 --space-7: 4.8rem; /* 48px */
 --space-8: 6.4rem; /* 64px */

/* ====== Line Heights ====== */
 --line-height-tight: 1.2;
 --line-height-normal: 1.5;
 --line-height-loose: 1.75;
 
/* ====== Border Radius ====== */
 --radius-none: 0; --radius-sm: 0.4rem; /* 4px */
 --radius-md: 0.8rem; /* 8px */
 --radius-lg: 1.6rem; /* 16px */
 --radius-xl: 2.4rem; /* 24px */
 --radius-pill: 9999px; 

 /* ====== animation ====== */
--ani-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ani-2: cubic-bezier(0.65, 0, 0.35, 1);

}