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

/* ====== font ====== */
--ff1 : "crt", serif;
--ff2 : "Cormorant Garamond", serif;
--ff3 : "chw",sans-serif;
/* --ff2 : "Lato", ptd, serif;
--ff3 : "pfr_it", serif; */


/* ====== Head Height ====== */
--headerH0 : 0px;
--headerH : 7rem;
--headTop : 3.45rem;
--gnbHead : 3rem;
--pagePD : 3.15rem;


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

/* ====== 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: #fefbdc;
    --color-point3: #F5F4EE;
    --color-point4: #302523;
    --color-point5: #ebe4dc;
    --color-point6: #3E230C;
    --color-point7: #A8915F;
    --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;

    --gray-line: #f1e7e5;

    --siteC : #111;
    --siteBg : #f9f4f0;

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

}