/* =========================================
   __root.css — 전역 토큰 (실사용 우선)
   [순서] Layout → Typography → Colors(core/primary/accent/state/util)
          → Shape/Shadow → Layers → Responsive helpers
   ========================================= */
:root{
    /* ===== Layout ===== */
    --container-max: 1280px;        /* cont-wrap 최대폭 */
    --container-md-max: 1520px;        /* cont-wrap 최대폭 */
    --container-sub-max: 1600px;        /* cont-wrap 최대폭 */
    --container-lg-max: 1700px;        /* cont-wrap 최대폭 */
    --container-xlg-max: 1920px;
    --container-2xlg-max: 2560px;
    --container-wide-max: 100%;        /* cont-wrap 최대폭 */
    --container-pad: 24px;          /* 좌우 안전 패딩 */
    --container-pad: 24px;          /* 좌우 안전 패딩 */
    --gap: 18px;                    /* 카드/그리드 기본 간격 */
    --stack-sm: 16px;               /* 세로 간격 프리셋 */
    --stack-md: 24px;
    --stack-lg: 32px;

    /* ===== Typography ===== */
    /* rem 기준: html 62.5% → 1rem = 10px */
    --font-basic: "Noto Sans KR","Pretendard Variable",Pretendard,-apple-system,system-ui,Roboto,"Helvetica Neue","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
    --font-title: var(--font-basic);
    --font-emphasis: var(--font-basic);
    --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

    /* Font size scale (REM) */
    --fs-10: 1.0rem;  /* 10px */
    --fs-12: 1.2rem;  /* 12px */
    --fs-13: 1.3rem;  /* 13px */
    --fs-14: 1.4rem;  /* 14px */
    --fs-15: 1.5rem;  /* 15px */
    --fs-16: 1.6rem;  /* 16px */
    --fs-18: 1.8rem;  /* 18px */
    --fs-20: 2.0rem;  /* 20px */
    --fs-24: 2.4rem;  /* 24px */
    --fs-28: 2.8rem;  /* 28px */
    --fs-32: 3.2rem;  /* 32px */
    --fs-40: 4.0rem;  /* 40px */

    /* Font size scale (EM; 부모 기준 상대값 필요할 때 사용) */
    --em-12: 1.2em;
    --em-13: 1.3em;
    --em-14: 1.4em;
    --em-15: 1.5em;
    --em-16: 1.6em;

    /* Line-height & letter-spacing */
    --lh-tight: 1.25;
    --lh-normal: 1.6;
    --lh-loose: 1.75;
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.02em;

    /* ===== Colors : Core ===== */
    --color-white:#ffffff;
    --color-text: #111;
    --color-text-util: #555;
    --color-text-weak: #666;
    --color-warm-gray: #707070;
    --color-light-gray: #e8e8e8;
    --color-thin-light-gray: #f1f2f2;
    --color-dark-white: #eaeaea;
    --color-green: #009992;
    --color-blue: #3a70c3;
    --color-navy: #002d6b;
    --color-blue-purple: #6583d2;
    --color-purple: #72669b;
    --color-light-purple: #9e95bd;
    --color-light-yellow:#ffe798;
    --color-yellow:#ffff00;
    --color-text-inv: var(--color-white);
    --color-bg: var(--color-white);
    --color-bg-soft: #f7f7f7;
    --color-bg-dark: #232323;
    --color-surface: var(--color-white);
    --color-border: #e7e7e7;
    --color-border-strong: #d4d4d4;
    --color-focus: #1a73e8;

    /* ===== Colors : Primary (브랜드/주색) ===== */
    --primary: #4b6fe4;
    --primary-hover: #082857;
    --primary-contrast: #ffffff;
    --primary-soft: #fbf7ee;

    /* ===== Colors : Accent ===== */
    --accent-blue:   #3b82f6;
    --accent-orange: #D94D26;
    --accent-pink:   #c61638;

    /* ===== Colors : State ===== */
    --state-ok:   #22c55e;
    --state-warn: #f59e0b;
    --state-err:  #ef4444;

    /* ===== Shape / Shadow ===== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 6px 18px rgba(0,0,0,.10);

    /* ===== Layers ===== */
    --z-skip: 1000;
    --z-header: 800;
    --z-overlay: 900;

    /* ===== Responsive helpers ===== */
    --bp-xl: 1400px;
    --bp-lg: 1200px;
    --bp-md: 1024px;   /* 주요 전환점(PC→모바일) */
    --bp-sm: 768px;
    --bp-xs: 480px;
    --mb-vw: 0.2375vw;  /* 모바일 뷰포트 계산용 */
    --browser-width: 100%;
    --vh: 1px;         /* 100vh 보정용 단위 */

    /* ===== Table ===== */
    --tbl-border: var(--color-border);
    --tbl-head-bg: var(--color-light-gray);
    --tbl-head-color: var(--primary);
    --tbl-text: var(--color-warm-gray);
}

/* 접근성 보강 토큰 */
@media (prefers-contrast: more){ :root{ --color-border:#3a3a3a } }
@media (forced-colors: active){ :root{ --color-focus: Highlight } }

/* <= 1280 */
@media (max-width:1280px){
    :root {
    }
}
/* <= 1024 */
@media (max-width:1024px){
    :root {
        --container-pad: calc(var(--mb-vw) * 20);
    }
}
/* <= 768 */
@media (max-width:768px){
    :root {
    }
}
/* <= 480 */
@media (max-width:480px){
    :root {
    }
}