@charset "UTF-8";

/* 디자인 토큰 (색상·radius·shadow·typography). 라이트=:root / 다크=:root[data-mode="dark"].
   정의는 hex 직접값 유지 — var() 순환 참조 금지. */
:root {
    /* 하위호환 (기존 코드 참조) */
    --color-blue: #32b4ff;
    --color-orange: #ff772b;

    /* Brand */
    --color-brand-50:  #EEF3FF;
    --color-brand-100: #DCE7FF;
    --color-brand-200: #C0D2FF;
    --color-brand-300: #94B2FF;
    --color-brand-400: #6188FF;
    --color-brand-500: #3A65FD;
    --color-brand-600: #1B4FD8;
    --color-brand-700: #1540B3;
    --color-brand-800: #133490;
    --color-brand-900: #132C72;
    --color-brand-950: #0C1A47;

    /* Neutral */
    --color-white:    #FFFFFF;
    --color-gray-50:  #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;
    --color-gray-950: #020617;

    /* Status scales */
    --color-green-50:  #F0FDF4;
    --color-green-200: #BBF7D0;
    --color-green-500: #22C55E;
    --color-green-600: #16A34A;
    --color-green-700: #15803D;
    --color-amber-50:  #FFFBEB;
    --color-amber-200: #FDE68A;
    --color-amber-500: #F59E0B;
    --color-amber-700: #B45309;
    --color-red-50:    #FEF2F2;
    --color-red-200:   #FECACA;
    --color-red-500:   #EF4444;
    --color-red-600:   #DC2626;
    --color-red-700:   #B91C1C;
    --color-sky-50:    #F0F9FF;
    --color-sky-200:   #BAE6FD;
    --color-sky-500:   #0EA5E9;
    --color-sky-600:   #0284C7;
    --color-sky-700:   #0369A1;

    /* Surface */
    --color-surface:           var(--color-white);
    --color-surface-rgb:       255, 255, 255;
    --color-surface-secondary: var(--color-gray-50);
    --color-surface-tertiary:  var(--color-gray-100);
    --color-surface-inverse:   var(--color-gray-900);

    --color-input-bg-require: var(--color-warning-bg);

    /* Border */
    --color-border:        var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);
    --color-border-focus:  var(--color-brand-500);

    /* Text */
    --color-text-primary:   var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary:  var(--color-gray-400);
    --color-text-disabled:  var(--color-gray-300);
    --color-text-inverse:   var(--color-white);

    /* Primary */
    --color-primary:        var(--color-brand-600);
    --color-primary-hover:  var(--color-brand-700);
    --color-primary-active: var(--color-brand-800);
    --color-primary-subtle: var(--color-brand-50);
    --color-primary-muted:  var(--color-brand-100);
    --color-primary-rgb:    27, 79, 216;   /* focus ring rgba용 */

    /* Status (semantic) */
    --color-success:        var(--color-green-600);
    --color-success-bg:     var(--color-green-50);
    --color-success-border: var(--color-green-200);
    --color-success-text:   var(--color-green-700);
    --color-warning:        var(--color-amber-500);
    --color-warning-bg:     var(--color-amber-50);
    --color-warning-border: var(--color-amber-200);
    --color-warning-text:   var(--color-amber-700);
    --color-danger:         var(--color-red-600);
    --color-danger-bg:      var(--color-red-50);
    --color-danger-border:  var(--color-red-200);
    --color-danger-text:    var(--color-red-700);
    --color-info:           var(--color-sky-600);
    --color-info-bg:        var(--color-sky-50);
    --color-info-border:    var(--color-sky-200);
    --color-info-text:      var(--color-sky-700);

    /* 페이지/사이드바 배경 */
    --color-page-bg:    #F1F5F9;
    --color-sidebar-bg: var(--color-gray-900);

    /* Radius */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.05);
    --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);

    /* Typography */
    --font-sans: "SUIT", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-sans-bold: "SUIT-Bold", "SUIT-Regular", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    /* 사용자 글꼴 크기 조정 오프셋 (환경설정 > 글꼴). 기본 0px, 범위 -1~+2px.
       아래 --text-* 토큰과 전역 리셋(unidocu.css의 * / #unipost-unidocu)이 이 값을 더해 계산한다. */
    --font-offset: 0px;
    --text-2xs:  calc(11px + var(--font-offset));
    --text-xs:   calc(12px + var(--font-offset));
    --text-sm:   calc(13px + var(--font-offset));
    --text-base: calc(14px + var(--font-offset));
    --text-md:   calc(16px + var(--font-offset));
    --text-lg:   calc(18px + var(--font-offset));
    --text-xl:   calc(20px + var(--font-offset));
    --text-2xl:  calc(24px + var(--font-offset));
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --tracking-normal: -0.01em;
    --tracking-tight:  -0.02em;

    /* RealGrid 테마 별칭 */
    --bg-page:        var(--color-page-bg);
    --bg-surface:     var(--color-white);
    --bg-subtle:      var(--color-gray-50);
    --bg-hover:       var(--color-gray-100);
    --text-strong:    var(--color-gray-700);
    --text-label:     var(--color-gray-600);
    --border:         var(--color-gray-200);
    --border-subtle:  #EEEEEE;
    --border-strong:  var(--color-gray-300);
}

/* 헤더(탭메뉴·유틸리티)·좌측 메뉴는 사용자 글꼴 크기 조정(--font-offset)에서 제외 — 항상 기본 크기 유지.
   --text-* 토큰은 :root에서 계산되므로 오프셋 무력화만으로는 부족 → 고정값으로 재선언한다. */
#top-logo-area, #siderWrap, #unidocu-left-nav-v2, #tab-menu, #unidocu-main-menu, .unidocu-menu-settings-btn {
    --font-offset: 0px;
    --text-2xs:  11px;
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
}

/* 다크 테마 — 표면/텍스트/보더 토큰만 덮어씀. 라이트 :root는 수정 금지.
   값 출처: Radix Colors sand/red/amber/green/blue dark 스케일. sand 라벨=Radix 스텝. */
:root[data-mode="dark"] {
    color-scheme: dark;   /* 브라우저 네이티브 폼 컨트롤·스크롤바를 다크로 */

    /* 표면 레이어: page(sand1) < 헤더/readonly(sand2) < 데이터표면(sand3) */
    --color-surface:           #222221;  /* sand3 */
    --color-surface-rgb:       34, 34, 33;
    --color-surface-secondary: #1c1c1b;  /* sand2~3 중간 */
    --color-surface-tertiary:  #2a2a28;  /* sand4 */
    --color-surface-inverse:   #F1F5F9;
    --color-page-bg:           #111110;  /* sand1 */

    --color-border:        #3b3a37;  /* sand6 */
    --color-border-strong: #494844;  /* sand7 */

    --color-text-primary:   #eeeeec;  /* sand12 */
    --color-text-secondary: #b5b3ad;  /* sand11 */
    --color-text-tertiary:  #7c7b74;  /* sand10 */
    --color-text-disabled:  #6f6d66;  /* sand9 */

    --bg-page:        #111110;  /* sand1 */
    --bg-surface:     #222221;  /* sand3 */
    --bg-subtle:      #1c1c1b;  /* sand2~3 중간 */
    --bg-hover:       #2a2a28;  /* sand4 */
    --text-strong:    #eeeeec;
    --text-label:     #b5b3ad;
    --border:         #3b3a37;
    --border-subtle:  #31312e;  /* sand5 */
    --border-strong:  #494844;

    --color-primary-subtle: rgba(var(--color-primary-rgb), 0.20);
    --color-primary-muted:  rgba(var(--color-primary-rgb), 0.30);

    --color-input-bg:     #2a2a28;  /* sand4 */
    --color-input-border: #62605b;  /* sand8 — Radix "interactive component border" */
    --color-input-bg-require: #372F22;

    /* 상태색: Radix step4=bg / step7=border / step11=text */
    --color-success-bg:     #113b29;  /* green4 */
    --color-success-border: #28684a;  /* green7 */
    --color-success-text:   #3dd68c;  /* green11 */
    --color-warning-bg:     #302008;  /* amber3 */
    --color-warning-border: #714f19;  /* amber7 */
    --color-warning-text:   #ffca16;  /* amber11 */
    --color-danger-bg:      #3b1219;  /* red3 */
    --color-danger-border:  #8c333a;  /* red7 */
    --color-danger-text:    #ff9592;  /* red11 */
    --color-info-bg:        #003362;  /* blue4 */
    --color-info-border:    #205d9e;  /* blue7 */
    --color-info-text:      #70b8ff;  /* blue11 */
}