@charset "utf-8";
/* CSS Document */
:root{

--headerT: 5.5em;


--color-point: #1c3a93; 
--color-point2: #E60012; 
--color-black: #1e292d; 
--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; 
--color-gray: #ededed; 
--color-gray-1: #f7f7f7; 
--color-gray-2: #f5f5f5; 
--color-gray-3: #f3f3f3; 
--color-gray-4: #f1f1f1; 
--color-bg-1: #f2fbff; 
--color-bg-2: #eff2f5; 
--color-bg-3: #f7f8fa; 
--color-text: #111111; 
--color-primary: #0052cc; 
--color-primary-hover: #003d99; 
--color-secondary: #f5f5f5; 
--color-border: #dddddd; 
--color-error: #cc0000; 
--color-success: #00aa00; 
--color-warning: #ffaa00;
--gray-line: #d1d1d1; --gray-line-1: #eaeaea;

--crWhite: #fff;
--crBlack: #000;
--crGray: #f2f7fd;
--crGray2: #e6ebf1; 
--gradC1: #004ab8;
--gradC2: #cfe1fa;
--crRed: #e40f18;
--crWhitefil: brightness(0) invert(1);
--crBlackfil: brightness(0) invert(0);
--crfilRE: invert(1);

--crGrad1: linear-gradient(to right,var(--gradC1),var(--gradC2));
--crGrad2: linear-gradient(to bottom,var(--gradC1),var(--gradC2)); 

/* 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, 4rem); /* 48px ~ 64px */
--font-size-xxxxl: clamp(4rem, 6vw, 6rem); /* 64px ~ 96px */

/* ====== Line Heights ====== */
 --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-loose: 1.75;

/* ====== 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 */


/* ====== 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);


--snsIn:#e82155;
--snsFb:#2167be;
--snsYt:#ed3023;
--snsKa:#f7e111;
--snsNv:#07bb58;
--snsTw:#1d9bf0;
}