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

/* ====== Head Height ====== */
--headH: 6.5rem;
--linkH: 2.5rem;
--headAll: 9rem;


/* ====== HTML Font Persent ====== */

/* ====== Color Invert ====== */
--crWhitefil: brightness(0) invert(1);
--crBlackfil: brightness(0) invert(0);
--crfilRE: invert(1);


/* ====== SNS Color ====== */
    --snsIn:#e82155;
    --snsFb:#2167be;
    --snsYt:#ed3023;
    --snsKa:#f7e111;
    --snsNv:#07bb58;
    --snsTw:#1d9bf0;

/* ====== ====== Font Size ====== ======*/

/* ====== html Font-Size 100% 기준 (1rem = 16px) ====== */
/*고령층 대상 서비스, 접근성이 중요한 서비스*/
--html-font-size-1 : 100%;
/*콘텐츠 밀도가 높은 서비스 (포털, 뉴스 등)*/
--html-font-size-2 : 87.5%;
/*미니멀 UI, 대시보드, 내부 툴처럼 공간이 부족한 UI에 적합*/
--html-font-size-3 : 75%;
/*대규모 프로젝트, 유지보수 중심 코드베이스*/
--html-font-size-4 : 62.5%;

--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:  clamp(0.875rem, 1vw, 1rem);        /* 14px ~ 16px */
--font-size-base: clamp(1rem, 1.2vw, 1.125rem);     /* 16px ~ 18px */
--font-size-md:  clamp(1.125rem, 1.4vw, 1.375rem);  /* 18px ~ 22px */
--font-size-lg:  clamp(1.35rem, 2vw, 1.75rem);       /* 24px ~ 28px */
--font-size-lg-2:  clamp(1.5rem, 2.5vw, 2rem);     /* 28px ~ 32px */
--font-size-xl:  clamp(1.75rem, 3vw, 2.5rem);          /* 32px ~ 40px */
--font-size-xxl: clamp(2rem, 3.5vw, 2.85rem);     /* 40px ~ 45.6px */
--font-size-xxl-2: clamp(2.4rem, 3.9vw, 3.25rem);   /* 46.4px ~ 52px */
--font-size-xxxl: clamp(2.5rem, 4vw, 4rem);           /* 48px ~ 64px */
--font-size-xxxxl: clamp(3.25rem, 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-xs);
    --gap-sm: var(--space-sm);
    --gap-md: var(--space-md);
    --gap-lg: var(--space-lg);
    --gap-xl: var(--space-xl);

/* ====== Container Widths (max-width 기준) ====== */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1260px;
    --container-xxl: 1320px;
    --container-xxxl: 1420px;
    --container-ultra: 1520px;
    --container-ultra-xl: 1560px;
    --container-ultra-xxl: 1620px;
    --container-ultra-xxxl: 1760px;

/* ====== Color Palette (light mode 기본) ====== */
    --color-point: #1b3551;
    --color-point2: #1e292d;
    --color-point3: #2177be;
    --color-point4: #eaf4ff;
    --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-bg: #ffffff;
    --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;

/* ====== Accessibility / Misc ====== */
--focus-outline: 2px solid var(--color-primary);

/* ====== Media Query Breakpoints (px 단위) ====== */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

}

/* ====== Dark mode example (data-theme 속성 사용) ====== */
[data-theme="dark"] {
    --color-bg: #121212;
    --color-text: #eeeeee;
    --color-primary: #3399ff;
    --color-primary-hover: #66b2ff;
    --color-secondary: #222222;
    --color-border: #444444;
    --color-error: #ff6666;
    --color-success: #66ff66;
    --color-warning: #ffcc33;
}