/* ===========================================
   나주다 디자인 시스템 — 공통 기반 토큰
   school + nineview 양쪽에서 참조

   v1.1 (2026-05-06) — 컴포넌트 토큰 + contextual primary 추가:
   .nv-page 컨테이너 안에서는 nineview 색상으로 자동 분기 (스쿨 페이지에는
   .nv-page 가 없으므로 :root 기본값(school) 그대로 사용).

   v1.2 (2026-05-06) — 노안 친화 type scale + 가독성 보강:
   - 본문 base 14 → 16 (한글 + 노안 가독성, WCAG 권장 16+)
   - line-height 1.6 → 1.65 (호흡감)
   - text-secondary/tertiary/muted darken — WCAG AA 4.5:1 통과
   - --nj-fs-* size scale 신규 (xs 12 / sm 13 / base 16 / md 17 / lg 18 / xl 20 / 2xl 26 / 3xl 30)
   =========================================== */

/* ---- Breakpoints (참조용 — CSS 변수는 @media에 사용 불가) ----
   Desktop:   > 870px
   Tablet:    <= 870px
   Mobile:    <= 500px

   기존 768px 규칙은 파일별로 870px에 병합 진행 중.
   새 브레이크포인트를 추가하지 말 것.
   ---- */

:root {
    /* ---- Brand Colors ---- */
    --nj-school-primary: #32C387;
    --nj-school-primary-hover: #2AAD75;
    --nj-nineview-primary: #2D5BFF;
    --nj-nineview-primary-hover: #1A3FA0;
    --nj-accent-red: #FF6446;
    --nj-accent-red-hover: #E04E30;
    --nj-kakao-yellow: #FFC83C;

    /* ---- Neutral Palette (v1.2 — 가독성 보강, WCAG AA 4.5:1 통과) ---- */
    --nj-dark: #1A1A1A;
    --nj-text-primary: #333333;     /* 12.6:1 — AAA */
    --nj-text-secondary: #5A5A5A;   /* #747474 → 6.4:1 (AA) */
    --nj-text-tertiary: #6E6E6E;    /* #888888 → 5.0:1 (AA) */
    --nj-text-muted: #777777;       /* #999999 → 4.7:1 (AA) */
    --nj-text-disabled: #B8B8B8;    /* #D4D4D4 → 살짝 진하게 (disabled 도 인지 가능) */

    /* ---- Border ---- */
    --nj-border: #E0E0E0;
    --nj-border-light: #EBEBEB;
    --nj-border-lightest: #F5F5F5;
    --nj-border-form: #F2F2F2;
    --nj-border-dark: #E9EDF0;

    /* ---- Background ---- */
    --nj-bg-page: #FFFFFF;
    --nj-bg-light: #F8F9FA;
    --nj-bg-muted: #FAFAFA;
    --nj-bg-overlay: rgba(0, 0, 0, 0.5);

    /* ---- Typography (v1.2 — 노안 친화 + 한글 가독성) ---- */
    --nj-font-heading: 'GmarketSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
    --nj-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
    --nj-font-size-base: 16px;
    --nj-line-height-base: 1.65;

    /* ---- Type Scale (v1.2 신규 — 컴포넌트 통일 활용) ---- */
    --nj-fs-xs: 12px;    /* 배지 / pill */
    --nj-fs-sm: 13px;    /* meta / help / caption */
    --nj-fs-md: 14px;    /* secondary body */
    --nj-fs-base: 16px;  /* base body */
    --nj-fs-lg: 17px;    /* article body */
    --nj-fs-xl: 18px;    /* section subtitle */
    --nj-fs-2xl: 20px;   /* section title */
    --nj-fs-3xl: 26px;   /* page title */
    --nj-fs-4xl: 30px;   /* article title / hero */

    /* ---- Layout ---- */
    --nj-max-width: 1200px;
    --nj-padding-container: 24px;
    --nj-padding-container-mobile: 16px;

    /* ---- Spacing Scale ---- */
    --nj-space-xs: 4px;
    --nj-space-sm: 8px;
    --nj-space-md: 16px;
    --nj-space-lg: 24px;
    --nj-space-xl: 32px;
    --nj-space-2xl: 48px;
    --nj-space-3xl: 64px;

    /* ---- Border Radius ---- */
    --nj-radius-sm: 5px;
    --nj-radius-md: 8px;
    --nj-radius-lg: 12px;
    --nj-radius-round: 50%;

    /* ---- Shadows ---- */
    --nj-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --nj-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --nj-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* ---- Z-Index Scale ---- */
    --nj-z-dropdown: 100;
    --nj-z-sticky: 100;
    --nj-z-header: 101;
    --nj-z-overlay: 999;
    --nj-z-modal: 1000;

    /* ---- Transitions ---- */
    --nj-transition-fast: 0.15s ease;
    --nj-transition-normal: 0.2s ease;
    --nj-transition-slow: 0.3s ease;

    /* ---- Contextual Primary (school 기본값) ----
       .nv-page 컨테이너 내부에서는 nineview 색상으로 override (아래 cascade) */
    --nj-primary: var(--nj-school-primary);
    --nj-primary-hover: var(--nj-school-primary-hover);
    --nj-primary-soft: rgba(50, 195, 135, 0.10);
    --nj-input-focus: var(--nj-school-primary);

    /* ---- Component tokens ---- */
    --nj-row-padding-y: 16px;
    --nj-row-padding-x: 12px;
    --nj-row-border: #E8EBF1;
    --nj-row-hover-bg: #FAFBFD;

    --nj-btn-h-sm: 32px;
    --nj-btn-h-md: 40px;
    --nj-btn-h-lg: 48px;
    --nj-btn-padding-sm: 6px 14px;
    --nj-btn-padding-md: 10px 20px;
    --nj-btn-padding-lg: 12px 28px;
    --nj-btn-radius: 8px;

    --nj-input-padding: 10px 14px;
    --nj-input-radius: 8px;
    --nj-input-border-color: #DDE3EE;

    --nj-card-padding: 24px;
    --nj-card-radius: 12px;
    --nj-card-shadow: var(--nj-shadow-sm);
}

/* nineview 컨텍스트 — .nv-page (또는 body.nv-page) 컨테이너 안에서만 적용 */
.nv-page,
body.nv-page {
    --nj-primary: var(--nj-nineview-primary);
    --nj-primary-hover: var(--nj-nineview-primary-hover);
    --nj-primary-soft: rgba(45, 91, 255, 0.10);
    --nj-input-focus: var(--nj-nineview-primary);
}