/* ============================================================
   SYWorks CMS — 디자인 토큰 (Design Tokens)
   ------------------------------------------------------------
   primitive(원시값) → semantic(의미값) 2-tier 구조의 MVP.
   · 화면/컴포넌트 CSS 는 이 토큰만 참조한다(raw hex·매직 z-index 금지).
   · 이 파일이 raw hex 의 "유일한 출처"다. 다른 신규 DS 파일은 토큰만 쓴다.
   · 로드 순서: bootstrap → cms.tokens.css(여기) → cms.css → cms.components.css.
   · 기존 cms.css :root 는 삭제하지 않는다(하위 호환). 이번 단계는 토큰 "정의"만 추가하며
     기존 매직넘버 치환은 후속 작업으로 미룬다(7개 page.css 동시 변경 금지).
   · 미래용 테마/브랜드 훅([data-cms-theme]/[data-cms-brand])은 빈 채로 둔다.
   ============================================================ */

:root,
[data-cms-theme="default"] {
    /* ---------- primitive : color ----------
       (기존 cms.css --primary #3b7ff5 / --primary-dark #2563c9 와 정합) */
    --cms-blue-500: #3b7ff5;
    --cms-blue-600: #2563c9;
    --cms-blue-tint: #eff6ff;   /* blue-50 — 활성/선택 옅은 틴트 */
    --cms-white:    #ffffff;
    --cms-gray-50:  #f8f9fa;
    --cms-gray-100: #f1f5f9;
    --cms-gray-200: #e5e7eb;
    --cms-gray-500: #6b7280;
    --cms-gray-600: #475569;
    --cms-gray-900: #1e2a3b;

    /* ---------- semantic : surface / border / text / action ---------- */
    --cms-bg-surface:      var(--cms-white);     /* 카드·패널·모달 본문 배경 */
    --cms-bg-muted:        var(--cms-gray-50);   /* 헤더·가이드 박스 등 옅은 배경 */
    --cms-border-subtle:   var(--cms-gray-200);  /* 기본 경계선 */
    --cms-text:            var(--cms-gray-900);  /* 본문 텍스트 */
    --cms-text-secondary:  var(--cms-gray-600);  /* 보조 텍스트 */
    --cms-text-muted:      var(--cms-gray-500);  /* 비활성/플레이스홀더 */
    --cms-action-primary:  var(--cms-blue-500);  /* 주요 액션(버튼/링크) */
    --cms-action-strong:   var(--cms-blue-600);  /* hover/active 강조 */
    --cms-action-tint:     var(--cms-blue-tint); /* 선택 항목 배경 */

    /* ---------- semantic : 선택/강조 페어 (다크-aware) ----------
       선택·active·하이라이트의 (배경,텍스트,보더) 페어. 다크 블록에서 밝은 블루로 상향돼
       dark-on-dark / light-on-light 를 해소(sidebar-active 정책과 동일 — 브랜드 추종 아님).
       ★강조 텍스트는 base 상태색(--cms-info 등)을 직접 쓰지 말고 이 -text 토큰을 쓴다(§6-D). */
    --cms-select-bg:      var(--cms-blue-tint);  /* #eff6ff — 선택/active 배경 */
    --cms-select-text:    var(--cms-info);       /* #1d4ed8 — 선택/active 강조 텍스트 */
    --cms-select-border:  var(--cms-blue-300);   /* #93c5fd — 선택 보더 */

    /* ---------- semantic : status (알림/상태색) ---------- */
    --cms-success:      #198754;   /* 성공/식별 텍스트 */
    --cms-danger:       #dc3545;   /* 위험/경고 강조선 */
    --cms-danger-tint:  #fff5f5;   /* 위험 박스 배경(red-50) */
    --cms-warn-tint:    #fffbeb;   /* 경고 행 강조 배경(amber-50) */
    --cms-info:         #1d4ed8;   /* 정보 강조(blue-700) */
    --cms-info-tint:    #dbeafe;   /* 정보 배지 배경(blue-100) — status tint 형제(danger/warn/green/amber-tint) 누락분 보완 */
    --cms-warning:      #d97706;   /* 경고 강조(amber-600) */
    --cms-accent:       #7c3aed;   /* 보조 액센트(violet-600) */

    /* status 강조 텍스트(틴트 배경 위 전경) + 누락 틴트(success/accent). 다크 블록서 밝게 상향. */
    --cms-info-text:    var(--cms-info);       /* #1d4ed8 */
    --cms-success-text: var(--cms-success);    /* #198754 */
    --cms-danger-text:  var(--cms-danger);     /* #dc3545 */
    --cms-warn-text:    var(--cms-warning);    /* #d97706 */
    --cms-accent-text:  var(--cms-accent);     /* #7c3aed */
    --cms-success-tint: var(--cms-green-tint); /* #d1fae5 — success 박스 배경 */
    --cms-accent-tint:  var(--cms-violet-100); /* #ede9fe — accent 박스 배경 */

    /* status/action hover(강조) — 버튼 등 액션의 hover 색. cms.css 레거시 하드코딩 hover hex 를
       토큰으로 흡수해 "토큰 단일 출처"로 통일(Stage A). 값은 각 base 의 어두운 변형. */
    --cms-success-strong:   #146c43;   /* success hover (green-800) */
    --cms-danger-strong:    #bb2d3b;   /* danger hover (red-700) */
    --cms-warning-strong:   #b45309;   /* warning hover (amber-700) */
    --cms-info-strong:      #1e40af;   /* info hover (blue-800) */
    --cms-secondary:        #6b7280;   /* 보조(레거시 --secondary, gray-500) */
    --cms-secondary-strong: #4b5563;   /* 보조 hover (gray-700) */

    /* ---------- 협업 머지 흡수 팔레트 (origin Figma 신규화면: login 회원가입·system/user·user-add) ----------
       B1 정책: 시각 동일 유지 위해 origin 원색을 exact-value 로 토큰화. 1회용 근사색은 가장 가까운 토큰으로 통합(<3 RGB·육안 불가). */
    --cms-ink:          #0a0a0a;   /* near-black 제목/본문 (#000000 통합) */
    --cms-gray-250:     #d1d5dc;   /* 인풋 보더 (#cbd5e1 통합) */
    --cms-gray-400:     #9ca3af;   /* muted 텍스트/아이콘 (#94a3b8·#99a1af 통합) */
    --cms-gray-700:     #4b5563;   /* 진한 보조 텍스트 */
    --cms-gray-750:     #364153;   /* 헤더/강조 텍스트 (#374151 근사 통합 — ΔR≤2, 육안불가·승인) */
    --cms-gray-120:     #f5f5f5;   /* 옅은 패널 배경 (#f1f1f1·#f1f3f5 근사 통합 — ΔR≤4, 육안불가·승인) */
    --cms-gray-60:      #f9fafb;   /* 가장 옅은 배경 (#fafafa 통합) */
    --cms-gray-235:     #eceef1;   /* 옅은 보더 (위젯 검색바 — gray-200 #e5e7eb 보다 옅음) */
    --cms-red-600:      #dc2626;   /* Figma primary 빨강(주 액션) */
    --cms-red-700:      #b91c1c;   /* 빨강 hover (#991b1b 통합) */
    --cms-blue-700:     #2563eb;   /* Figma 파랑(링크/포커스) (#3b82f6 통합) */
    --cms-red-tint:     #fee2e2;   /* 검증 오류 배경 */
    --cms-red-border:   #fecaca;   /* 검증 오류 보더 */
    --cms-green-600:    #16a34a;   /* 성공 텍스트 (#065f46 통합) */
    --cms-green-tint:   #d1fae5;   /* 성공 배경 (#a7f3d0 통합) */
    --cms-amber-tint:   #fef3c7;   /* 경고 배경 (#fde68a 통합) */
    --cms-amber-800:    #92400e;   /* 경고 텍스트 */
    --cms-code-accent:  #c7254e;   /* 인라인 code 강조색(widget picker .cms-wp-table code — 머지 흡수, 값 보존) */

    /* ---------- cms.css 셸·컴포넌트 흡수 (Tier 1 토큰화) ----------
       cms.css 잔여 raw hex 를 exact-value 토큰으로 흡수(시각 동일).
       단 status 잔재(#1a9e5c→success·#d94040→danger)는 Stage A 와 동일하게
       토큰값으로 통일 — 의도된 미세 diff(이 블록 아님, 컴포넌트에서 status 토큰 직접 참조). */
    --cms-gray-110:      #f3f4f6;   /* btn-light·modal-close·code·input-group 배경 */
    --cms-border-input:  #d1d5db;   /* 폼 컨트롤 보더 (gray-300; gray-250 #d1d5dc 와 1 차이라 별도) */
    --cms-border-strong: #000000;   /* topbar/tabbar/sidebar 헤어라인 (검정 1px) */
    --cms-bg-hover:      #f0f4ff;   /* 테이블/그리드/대시보드 row·hover 옅은 블루 틴트 */

    /* alert 박스 팔레트 (.alert-*) — 기존 status 토큰과 색조가 달라 exact-value 신설.
       (재사용: danger 보더=--cms-red-border · warning 배경=--cms-warn-tint · warning 텍스트=--cms-amber-800
        · info 배경=--cms-blue-tint · info 텍스트=--cms-info-strong) */
    --cms-alert-danger-bg:      #fef2f2;
    --cms-alert-danger-text:    #991b1b;
    --cms-alert-success-bg:     #f0fdf4;
    --cms-alert-success-text:   #166534;
    --cms-alert-success-border: #bbf7d0;
    --cms-alert-warning-border: #fde68a;
    --cms-alert-info-border:    #bfdbfe;

    /* session-timer 틴트 (.session-timer.timer-*) — 텍스트색은 success/warning/danger 토큰 참조 */
    --cms-timer-green-bg:      #e6f7ef;
    --cms-timer-green-border:  #b7ebd2;
    --cms-timer-yellow-bg:     #fff8e6;
    --cms-timer-yellow-border: #fcd97a;
    --cms-timer-red-bg:        #ffeaea;
    --cms-timer-red-border:    #f9b4b4;

    /* ---------- Tier 2 page.css 흡수 (slate 스케일·blue 보조·일회색) ----------
       page.css 의 Bootstrap/slate 계열 raw hex 를 exact-value 로 흡수(값-동일). slate 스케일은
       Tier 2 전반 재사용. 분기 액션 블루(#2563eb/#0d6efd/#60a5fa)는 컴포넌트에서 --cms-blue-500/600
       으로 통일(브랜드 추종 — 옵션1). */
    --cms-slate-50:  #f8fafc;   /* 옅은 패널/헤더 배경(gray-50 #f8f9fa 와 다름) */
    --cms-slate-200: #e2e8f0;   /* 옅은 보더/구분선 */
    --cms-slate-300: #cbd5e1;   /* 보더/플레이스홀더 아이콘 */
    --cms-slate-400: #94a3b8;   /* muted 텍스트/아이콘 */
    --cms-slate-500: #64748b;   /* 보조 텍스트 */
    --cms-slate-800: #1e293b;   /* 제목/강조 텍스트 */
    --cms-blue-300:  #93c5fd;   /* 카드 hover 보더(옅은 블루 — 값 보존) */
    --cms-sky-tint:  #e0f2fe;   /* count 배지 배경(sky-100) */
    --cms-sky-text:  #0c4a6e;   /* count 배지 텍스트(sky-900) */
    --cms-sky-50:    #f0f9ff;   /* arrange-box/카드 hover 옅은 sky 배경 */
    --cms-red-500:   #ef4444;   /* 닫기 버튼 hover(빨강) */
    --cms-slate-25:  #fafbfc;   /* near-white 패널 배경 */
    --cms-blue-200:  #bfdbfe;   /* arrange-box 보더(옅은 블루) */
    --cms-blue-900:  #1e3a8a;   /* c-badge/콘텐츠 라벨 진한 네이비 */
    /* amber 강조(layout-tpl 배치 하이라이트·drag) */
    --cms-amber-500: #f59e0b;   /* highlight/drag 보더(amber-500) */
    --cms-amber-300: #fcd34d;   /* unknown 카드 보더(amber-300) */
    --cms-yellow-tint: #fef9c3; /* highlight 배경(yellow-100) */
    /* DOM 트리 구문색(layout-tpl element 라벨 — 의도된 syntax 팔레트, 값 보존) */
    --cms-violet-700: #6d28d9;  /* 태그명 */
    --cms-teal-700:   #0f766e;  /* id */
    --cms-rose-700:   #be123c;  /* CMS 콘텐츠 태그 강조 */
    /* Bootstrap 그레이 패밀리(BS $gray-*) — 기존 --cms-gray-*(Tailwind계)와 색조가 달라
       (#e9ecef ≠ gray-200 #e5e7eb 등) 별도 exact-value 신설. Tier 2 전반 재사용
       (category·content·page·site·site.assign·auth.group·image·skin-tpl 보더/그립/muted). */
    --cms-bsgray-200: #e9ecef;  /* 옅은 보더/배경(BS gray-200) */
    --cms-bsgray-300: #dee2e6;  /* 구분선 보더(BS gray-300) */
    --cms-bsgray-400: #ced4da;  /* 비활성 텍스트(BS gray-400; pager disabled — auth.group·popup 공용) */
    --cms-bsgray-500: #adb5bd;  /* 핸들/그립 아이콘(BS gray-500) */
    --cms-bsgray-600: #6c757d;  /* muted 보조 텍스트(BS gray-600) */
    --cms-bsgray-900: #212529;  /* 진한 배경/텍스트(BS gray-900; pager active — auth.group·image 공용) */

    /* ---------- Tier 2 site.assign Figma 팔레트 흡수 (값-동일, recolor 0) ----------
       Figma 유래 사이트배정 화면의 bespoke 팔레트. action 파랑 없음 → 전부 exact-value(옵션1=값-동일).
       (#f1f3f5 만 Tier1 기확립 --cms-gray-120 로 계승 — 유일한 사전승인 미세차) */
    --cms-ink-700:       #292c33;   /* 다크 잉크 — 제목/본문/보더-top (8+ 화면 공용) */
    --cms-gray-130:      #efefef;   /* 중성 옅은 회색 패널 배경 */
    /* cool-gray(중성 블루 그레이 — 보더/배경/placeholder, 다수 화면 공용) */
    --cms-coolgray-100:  #eef2f7;   /* placeholder 아이콘 박스 배경 */
    --cms-coolgray-150:  #e5e8ec;   /* 테이블 행 보더 */
    --cms-coolgray-200:  #d9dee5;   /* 검색박스/카드 보더 */
    --cms-coolgray-350:  #aab2bd;   /* placeholder 텍스트 */
    --cms-coolgray-400:  #9aa3b2;   /* breadcrumb/검색 아이콘 muted */
    --cms-coolgray-500:  #868e96;   /* muted 보조 텍스트(oc gray-6; auth.group desc/off 배지) */
    /* 사용 ON 배지 페어(open-color blue — info 계열, 브랜드 통일 대상 아님=값 보존) */
    --cms-blue-800:      #1971c2;   /* 사용 ON 배지/선택계정 텍스트(oc blue-8) */
    --cms-blue-tint-2:   #e7f5ff;   /* 사용 ON 배지 배경(oc blue-0; blue-tint #eff6ff 와 별개) */

    /* ---------- Tier 2 sitemenu 트리 배지 팔레트 (tint/text 페어, 값-동일) ----------
       페이지/메뉴 트리의 유형·매핑 배지. 각 hue 의 100 tint + 800 text 페어. */
    --cms-violet-100:  #ede9fe;   /* app 유형 배지 배경(violet-100; text=violet-700) */
    --cms-green-100:   #dcfce7;   /* 매핑 칩 배경(green-100) */
    --cms-green-800:   #166534;   /* 매핑 칩 텍스트(green-800) */
    --cms-indigo-100:  #e0e7ff;   /* 배지 배경(indigo-100) */
    --cms-indigo-800:  #3730a3;   /* 배지 텍스트(indigo-800) */
    --cms-sky-200:     #bae6fd;   /* count 배지 보더(sky-200) */
    --cms-sky-800:     #075985;   /* count 배지 텍스트(sky-800; sky-text #0c4a6e 와 별개) */
    --cms-slate-700:   #334155;   /* 텍스트(slate-700) */

    /* ---------- Tier 2 content 추가 (UI 색 + Tokyo Night 에디터 테마) ---------- */
    --cms-orange-400:  #fb923c;   /* 뷰모드 active 버튼(오렌지 톤) */
    --cms-coolgray-75: #f4f6f9;   /* 프리뷰 패널 배경(coolgray-100 #eef2f7 보다 옅음) */
    --cms-red-300:     #fca5a5;   /* 카드메뉴 삭제 hover(red-300) */
    --cms-green-300:   #86efac;   /* 카드메뉴 복사 hover(green-300) */
    --cms-gray-350:    #aaaaaa;   /* 중성 회색 검색힌트 아이콘(#aaa) */
    --cms-sky-500:     #0ea5e9;   /* 카드유형 아이콘(sky-500) */
    --cms-sky-600:     #0284c7;   /* 카드유형 아이콘(sky-600) */
    --cms-bsgray-700:  #495057;   /* 에디터 탭/프리뷰 버튼 텍스트(BS gray-700) */
    /* Tokyo Night — content Jodit/CodeMirror 소스 에디터 다크 테마(구문 하이라이트, 값 보존).
       layout-tpl 의 syntax 팔레트와 동일 취지의 "의도된 테마 색"이므로 브랜드 통일 대상 아님. */
    --cms-tn-bg:              #1a1b26;   /* 에디터 배경 */
    --cms-tn-bg-dark:         #16161e;   /* gutter 배경 */
    --cms-tn-border:          #292e42;   /* gutter 보더 */
    --cms-tn-selection:       #283457;   /* 선택 영역 */
    --cms-tn-selection-focus: #364a82;   /* 포커스 시 선택 영역 */
    --cms-tn-activeline:      #1f2335;   /* 활성 라인 배경 */
    --cms-tn-fg:              #c0caf5;   /* 본문/변수/커서 전경 */
    --cms-tn-comment:         #565f89;   /* 주석 */
    --cms-tn-purple:          #bb9af7;   /* 키워드/헤더 */
    --cms-tn-orange:          #ff9e64;   /* atom/숫자/괄호매칭 */
    --cms-tn-green:           #9ece6a;   /* 문자열 */
    --cms-tn-blue:            #7aa2f7;   /* variable-2/def */
    --cms-tn-cyan:            #2ac3de;   /* variable-3/builtin */
    --cms-tn-cyan-light:      #7dcfff;   /* property/link */
    --cms-tn-cyan-pale:       #89ddff;   /* operator/meta */
    --cms-tn-red:             #f7768e;   /* tag/qualifier/error */
    --cms-tn-yellow:          #e0af68;   /* attribute */

    /* ---------- Tier 2 image — 파일/미디어 타입 아이콘 팔레트(브랜드/식별색, 값 보존) + 보조 hue ---------- */
    --cms-indigo-50:    #eef2ff;   /* SVG/벡터 배지 배경 */
    --cms-indigo-500:   #6366f1;   /* 미디어 카드 gradient */
    --cms-indigo-700:   #4338ca;   /* SVG/벡터 배지 텍스트 */
    --cms-indigo-900:   #312e81;   /* PSD 카드 gradient 끝 */
    --cms-violet-400:   #a78bfa;   /* 미디어 카드 gradient 끝 */
    --cms-orange-600:   #ea580c;   /* PPT 아이콘/배지 */
    --cms-orange-700:   #c2410c;   /* PPT gradient 끝 */
    --cms-teal-600:     #0d9488;   /* HWP 아이콘/배지 */
    --cms-yellow-700:   #a16207;   /* 압축파일 아이콘/배지 */
    --cms-yellow-800:   #854d0e;   /* 압축파일 gradient 끝 */
    --cms-green-700:    #15803d;   /* Excel gradient 끝 */
    --cms-slate-900:    #0f172a;   /* near-black 제목 */
    --cms-gray-950:     #111827;   /* near-black hover 텍스트 */
    --cms-blue-vivid:   #2965f1;   /* 이미지 카드 gradient(vivid 파랑) */
    --cms-blue-soft:    #5fa8d3;   /* 이미지 카드 gradient 끝(연파랑) */
    --cms-yellow-vivid: #f7df1e;   /* 미디어 카드 gradient(옐로) */
    --cms-yellow-300:   #ffd234;   /* 미디어 카드 gradient 끝 */
    --cms-ink-900:      #323330;   /* 옐로 위 near-black 텍스트 */
    --cms-filetype-js:       #f0db4f;  /* JS 카드 gradient(밝은 옐로) */
    --cms-filetype-js-dark:  #b59f00;  /* JS 아이콘/배지(진한 옐로) */
    --cms-filetype-js-ink:   #1f1f1f;  /* JS 옐로 위 텍스트 */
    --cms-filetype-css:      #1572b6;  /* CSS3 브랜드 블루 */
    --cms-filetype-css-dark: #0f5a8f;  /* CSS 카드 gradient 끝 */
    --cms-editor-bg-material:#263238;  /* material 에디터 배경 */

    /* ---------- Tier 2 popup — 미리보기 윈도우 크롬(macOS/Figma mockup) + 식별색 (값-동일) ---------- */
    --cms-black:        #000000;  /* 윈도우 컨트롤 텍스트(순흑) */
    --cms-gray-820:     #333333;  /* 미리보기 다크 텍스트 */
    --cms-gray-800:     #1f2937;  /* 페이지명 텍스트(Tailwind gray-800) */
    --cms-gray-560:     #888888;  /* note muted */
    --cms-gray-440:     #a7a7a7;  /* Figma 좌측헤더(fill_V08WEB) */
    --cms-gray-238:     #eeeeee;  /* 레이어/리스트 항목 배경 */
    --cms-gray-229:     #e5e5e5;  /* 패널 구분 보더 */
    --cms-gray-221:     #dddddd;  /* 리스트 항목 보더 */
    --cms-gray-217:     #d9d9d9;  /* 타이틀바 배경 */
    --cms-gray-212:     #d4d4d8;  /* 푸터 보더 */
    --cms-gray-206:     #cecece;  /* 리스트 교차 음영 */
    --cms-gray-201:     #c9c9c9;  /* 타이틀바 하단 보더 */
    --cms-coolgray-85:  #f2f3f5;  /* 윈도우 타이틀바 gradient 시작 */
    --cms-coolgray-120: #e9edf2;  /* 미리보기 패널 배경 */
    --cms-coolgray-130: #e4e6ea;  /* 타이틀바 gradient 끝 */
    --cms-coolgray-250: #cfd2d6;  /* 타이틀바 하단 보더(블루그레이) */
    --cms-coolgray-260: #cfd6e0;  /* 윈도우 바디 점선 보더 */
    --cms-coolgray-450: #8a94a4;  /* empty muted(블루그레이) */
    --cms-violet-50:    #f5f3ff;  /* 레이어 항목 hover */
    --cms-violet-500:   #846cf9;  /* 활성 항목 인디케이터 */
    --cms-amber-450:    #f5a623;  /* 콘텐츠 편집 아이콘 */
    --cms-amber-650:    #d18a14;  /* 편집 아이콘 hover */
    --cms-traffic-red:    #ff5f57;  /* 윈도우 닫기 점 */
    --cms-traffic-yellow: #febc2e;  /* 윈도우 최소화 점 */
    --cms-traffic-green:  #28c840;  /* 윈도우 최대화 점 */

    /* ---------- Tier 2 site — 카드 그리드 UI(중성 그레이·옅은 블루틴트·상태색) (값-동일) ----------
       사이트 카드/그리드 화면의 bespoke 팔레트. 분기 블루(#2563eb/#0d6efd/#60a5fa/#3b82f6)는
       컴포넌트에서 --cms-blue-500/600 으로 브랜드 통일(옵션1) — 아래는 그 외 값-보존 신규분.
       순수 그레이는 popup 의 gray-201..238(=hex 바이트 10진) 규칙 계승. */
    --cms-gray-17:   #111111;   /* 카드 site-id near-black 텍스트 */
    --cms-gray-85:   #555555;   /* badge-normal 텍스트(중간 회색) */
    --cms-gray-102:  #666666;   /* folder-toggle 기본 텍스트 */
    --cms-gray-187:  #bbbbbb;   /* unit/empty/drag-handle muted(밝은 회색) */
    --cms-gray-224:  #e0e0e0;   /* 카드 보더(중성 옅은 회색) */
    --cms-gray-240:  #f0f0f0;   /* 카드 헤더/푸터 구분선·divider */
    --cms-coolgray-90:  #f0f2f5;   /* 썸네일 placeholder 배경(블루그레이) */
    --cms-coolgray-220: #d1d9e6;   /* 검색박스 보더(블루그레이) */
    --cms-coolgray-232: #e8edf6;   /* 애널리틱스 패널 구분 보더 */
    --cms-coolgray-238: #eef1f8;   /* analytic-item 구분 보더 */
    --cms-coolgray-300: #c0c8d8;   /* 썸네일 placeholder 텍스트 */
    --cms-blue-tint-3:  #f0f6ff;   /* folder-pick hover 배경(blue-tint #eff6ff 와 1 차이=별개) */
    --cms-blue-tint-4:  #f5f8ff;   /* ctx-item hover 배경 */
    --cms-blue-tint-5:  #f8faff;   /* 애널리틱스 패널 배경(가장 옅은 블루) */
    --cms-blue-tint-6:  #e8f4ff;   /* badge-template 배경(옅은 블루) */
    --cms-red-25:    #fff8f8;   /* thumb-alerts 행 배경(가장 옅은 핑크) */
    --cms-green-500: #22c55e;   /* live-dot/게이지/ctx-edit 그린(green-500) */
    --cms-red-400:   #f87171;   /* 경고 펄스/게이지 그라데이션(red-400) */
    --cms-amber-400: #fbbf24;   /* storage 게이지 그라데이션(amber-400) */
    --cms-violet-300: #c4b5fd;  /* 카드메뉴 이동 hover(violet-300) */
    /* Bootstrap 브랜드 상태색(서비스 running/maintain — stop 은 --cms-danger #dc3545 재사용). bsgray 명명 계승. */
    --cms-bs-cyan:   #0dcaf0;   /* 서비스 운영중(BS $cyan/info) */
    --cms-bs-yellow: #ffc107;   /* 서비스 점검중(BS $yellow/warning) */

    /* ---------- Tier 2 page — 페이지관리 화면 다색 팔레트(상태/유형 배지·아이콘, 값-동일) ----------
       분기 블루(#2563eb→blue-600 · #0d6efd/#60a5fa/#3b82f6→blue-500)는 브랜드 통일(옵션1).
       아래는 그 외 hue(emerald/orange/yellow/cyan/sky/pink/purple/gold/red 음영) 값-보존 신규분.
       (#991b1b→alert-danger-text · #7c3aed→accent · #495057→bsgray-700 등은 기존 토큰 재사용) */
    --cms-emerald-50:   #ecfdf5;   /* 성공/배포 배지 옅은 배경 */
    --cms-emerald-500:  #10b981;   /* 배포/활성 상태 그린 */
    --cms-emerald-600:  #059669;   /* 배포 강조 그린 */
    --cms-emerald-800:  #065f46;   /* 배포 배지 진한 텍스트 */
    --cms-orange-50:    #fff7ed;   /* 경고/주의 옅은 배경 */
    --cms-orange-200:   #fed7aa;   /* 경고 배지 보더 */
    --cms-orange-900:   #78350f;   /* 경고 배지 진한 텍스트 */
    --cms-yellow-500:   #eab308;   /* 임시저장/주의 옐로 */
    --cms-cyan-500:     #06b6d4;   /* 유형 아이콘 시안 */
    --cms-sky-300:      #7dd3fc;   /* 유형 배지 보더(sky-300) */
    --cms-pink-100:     #fce7f3;   /* 핑크 배지 배경 */
    --cms-pink-600:     #db2777;   /* 핑크 배지/아이콘 */
    --cms-pink-900:     #9d174d;   /* 핑크 배지 진한 텍스트 */
    --cms-purple-500:   #a855f7;   /* 보라 유형 아이콘 */
    --cms-amber-50:     #fff8e1;   /* 임시저장 배지 옅은 배경 */
    --cms-gold-500:     #f9a825;   /* 임시저장 골드 아이콘 */
    --cms-gold-800:     #8d6708;   /* 임시저장 골드 진한 텍스트 */
    --cms-red-50:       #fdecea;   /* 오류 배지 옅은 배경(material) */
    --cms-red-550:      #d32f2f;   /* 오류 배지 레드(material) */
    --cms-red-810:      #b71c1c;   /* 오류 배지 진한 레드(material red-900) */

    /* ---------- Tier 2 skin-tpl 추가 ---------- */
    --cms-emerald-700:  #047857;  /* VIEW 스킨 배지 텍스트(emerald-700) */
    /* 동영상 제공자 브랜드 식별색(YouTube/Vimeo — 브랜드 고유색, 통일 대상 아님·값 보존).
       post VIDEO 유형 제공자 배지(.video-provider-badge)에서 참조. */
    --cms-brand-youtube: #ff0000;   /* YouTube 브랜드 레드 */
    --cms-brand-vimeo:   #1ab7ea;   /* Vimeo 브랜드 시안 */
    /* ---------- page/preview.html — 미리보기 영역 윤곽선 토글(body[data-outline="1"]) (값-동일, 신설) ----------
       standalone 미리보기 문서의 어드민 크롬용 보라 강조색. 기존 violet 토큰과 음영이 달라(Tailwind purple-400/700)
       exact-value 신설(값 보존). preview.html 인라인 <style> → page.preview.page.css 이전 시 토큰화(ds-audit §3-2). */
    --cms-purple-400:   #c084fc;   /* 미리보기 영역 outline(윤곽선 토글, Tailwind purple-400) */
    --cms-purple-700:   #7e22ce;   /* 미리보기 영역 head 텍스트 강조(Tailwind purple-700) */
    /* legend(사이트 그룹·서비스상태 식별 팔레트 — open-color 계열, 값 보존) */
    --cms-legend-red:    #e03131;   /* 대표홈페이지/서비스중단/필수표시 */
    --cms-legend-blue:   #4dabf7;   /* 입학페이지 그룹 */
    --cms-legend-green:  #2f9e44;   /* 부설기관 그룹 */
    --cms-legend-orange: #f59f00;   /* 학과 그룹 */
    --cms-legend-yellow: #f0c000;   /* 점검중 상태 */
    --cms-legend-cyan:   #15aabf;   /* 운영중 상태 */

    /* ---------- space : 1..6 (캐노니컬 스케일) ----------
       기존 cms.css --cms-space-xs/sm/md/lg/xl 은 각각 1/2/4/5/6 에 대응하며 공존한다.
       신규 코드는 1..6 을 사용하고, 기존 xs..xl 은 cms.css 정의를 그대로 유지한다. */
    --cms-space-1: 4px;
    --cms-space-2: 8px;
    --cms-space-3: 12px;
    --cms-space-4: 16px;
    --cms-space-5: 24px;
    --cms-space-6: 32px;

    /* ---------- radius ---------- */
    --cms-radius-1: 4px;
    --cms-radius-2: 6px;    /* 기존 --radius 정합 */
    --cms-radius-3: 10px;   /* 기존 --radius-lg 정합 */
    --cms-radius-control: var(--cms-radius-2);  /* 인풋·버튼 */
    --cms-radius-panel:   var(--cms-radius-3);  /* 카드·패널·모달 */

    /* ---------- shadow ---------- */
    --cms-shadow-1:     0 1px 4px rgba(0, 0, 0, .08);   /* 기존 --card-shadow 정합 */
    --cms-shadow-2:     0 2px 8px rgba(0, 0, 0, .10);
    --cms-shadow-panel: 0 1px 3px rgba(0, 0, 0, .06);
    --cms-shadow-pop:   0 8px 24px rgba(0, 0, 0, .16);  /* 모달·팝오버 */

    /* ---------- typography (size) ---------- */
    --cms-fs-body: 14px;   /* 기존 body 14px 정합 */
    --cms-fs-sm:   13px;
    --cms-fs-xs:   12px;

    /* ---------- z-index 스케일 (매직넘버 대체용 단일 사다리) ----------
       기존 매직값과 정합: 사이드바<드롭다운<모달<토스트(컨테이너)<토스트(confirm/center).
       select2 open(10500)은 모달 내부 드롭다운 보정용 국소값(.reg-layout-dropdown) — 전역 최상위 아님.
       cms.js CmsModal 의 base 2000 / cms.css .cms-modal-overlay 2000 과 일치. */
    --cms-z-sticky:   10;     /* 패널 내부 sticky 툴바 등 로컬 스태킹 */
    --cms-z-sidebar:  1000;
    --cms-z-dropdown: 1500;
    --cms-z-modal:    2000;
    --cms-z-modal-sub: 2100;  /* widget 컬럼 sub-모달(.widget-col-modal-overlay) — base 모달(2000) 위에 표시(모달 위 모달). 2026-06-09 스태킹 버그 수정(1100→2100): tpl 모달 떠 있는 상태에서 열리므로 반드시 base 위 */
    --cms-z-select2:  10500;
    --cms-z-toast:    9999;
    --cms-z-toast-top: 10000; /* confirm/center 토스트(컨테이너 위) */
    --cms-z-tooltip:  10001;  /* .cms-help 호버 툴팁 — 토스트 위, select2 아래 */

    /* ---------- tooltip (.cms-help 호버 도움말) ---------- */
    --cms-tooltip-bg:   #1f2937;  /* 다크 고정 — 양 테마 공통(부동 버블) */
    --cms-tooltip-text: #f1f5f9;  /* 툴팁 텍스트 */

    /* ---------- motion ---------- */
    --cms-motion-fast: 120ms;
    --cms-motion-base: 200ms;
    --cms-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   다크 모드 — 관리자 도구 전역 테마(head IIFE 가 <html data-cms-theme="dark"> 주입).
   ------------------------------------------------------------
   · 셀렉터를 html[data-cms-theme="dark"] (specificity 0,1,1) 로 둬, cms.css :root(0,1,0) 의
     셸 변수(--sidebar 계열·--content-bg)를 로드 순서와 무관하게 이긴다(codex ④: 안 그러면 사이드바/톱바 라이트 잔존).
   · 중립(surface/border/text) 토큰 + 셸 변수만 다크값. 브랜드/상태 토큰(--cms-action-*·--cms-success 등)은
     건드리지 않아 /theme 브랜드 override 가 라이트·다크 양쪽에 그대로 적용된다(§6-D cascade 회피).
   · --cms-white 는 버튼/배지의 "on-color 텍스트"로도 쓰여 뒤집지 않는다 → 흰 surface 사용처(.cms-topbar/.card/
     .form-control)는 cms.css 에서 var(--cms-bg-surface) 로 의미 수렴(다크 추종).
   ============================================================ */
html[data-cms-theme="dark"] {
    /* ★네이티브 폼 컨트롤(체크박스·라디오·셀렉트 화살표·날짜입력)·스크롤바를 다크 스킴으로 렌더.
       accent-color 는 체크된 색만 바꿀 뿐 미체크 박스/보더/스크롤바는 라이트로 남아 다크 표면서 깨져 보임 → color-scheme 로 일괄 해결. */
    color-scheme: dark;
    /* 중립 semantic 토큰(컴포넌트가 var() 별칭으로 추종 — --text/--border/--content-bg 등 자동 다크) */
    --cms-bg-surface:     #1e2433;   /* 카드·패널·모달·톱바·인풋 surface */
    --cms-bg-muted:       #161b27;   /* 헤더·옅은 배경 */
    --cms-bg-hover:       #232c3f;   /* 테이블/그리드 row hover */
    --cms-border-subtle:  #2b3445;   /* 기본 경계선 */
    --cms-border-input:   #3a4456;   /* 폼 컨트롤 보더 */
    --cms-text:           #e5e9f0;   /* 본문 텍스트 */
    --cms-text-secondary: #aab4c5;   /* 보조 텍스트 */
    --cms-text-muted:     #7a8699;   /* 비활성/플레이스홀더 */

    /* 셸 변수(토큰 아님 — cms.css :root 정의). 다크값 직접 지정(codex ④). */
    --content-bg:          #11151f;  /* 본문 배경(.cms-body) */
    --sidebar-bg:          #161b27;  /* 사이드바 본체 */
    --sidebar-text:        #aab4c5;  /* 일반 메뉴 텍스트 */
    --sidebar-text-strong: #f1f5f9;  /* 활성/강조 텍스트 */
    --sidebar-muted:       #6b7689;  /* 그룹 헤더 라벨 */
    --sidebar-hover-bg:    #232c3f;  /* 호버 배경 */
    --sidebar-active-bg:   #1d2740;  /* 활성 배경 */
    --sidebar-active:      #93c5fd;  /* 활성 메뉴 텍스트 — 라이트값 #1d4ed8(blue-700)은 다크 활성배경(#1d2740) 위 dark-on-dark 라 안 보임 → 밝은 블루(blue-300) */
    --sidebar-border:      #2b3445;  /* 분리선 */
    /* --sidebar-accent(좌측 액센트바·hover 아이콘)는 미지정 → 브랜드 블루 #3b7ff5(다크 navy 위 가독 OK) 유지 */

    /* ---------- page.css 라이트 표면 프리미티브 → 다크 (Stage-A for dark) ----------
       화면별 page.css 가 직접 참조하는 라이트 배경/보더 프리미티브를 다크값으로 재정의 →
       19개 page.css 의 카드·패널·드롭다운·검색바가 화면별 수정 없이 자동 다크 추종.
       (전부 text=0 으로 grep 검증된 순수 표면/보더 토큰 — 텍스트색으로 안 쓰여 안전.
        mid-gray muted(gray-500/600·slate-400/500 등)·slate-300 은 양 모드 가독이라 미변경.) */
    --cms-slate-50:  #1e2433;  --cms-slate-25:  #1e2433;
    --cms-coolgray-75: #161b27; --cms-coolgray-85: #161b27; --cms-coolgray-90: #1e2433;
    --cms-coolgray-120: #232c3f; --cms-coolgray-130: #2b3445;
    --cms-gray-50: #1e2433;  --cms-gray-60: #1e2433;  --cms-gray-110: #232c3f;  --cms-gray-120: #161b27;
    --cms-gray-130: #232c3f; --cms-gray-238: #232c3f; --cms-gray-240: #2b3445;
    --cms-gray-229: #2b3445; --cms-gray-221: #2b3445; --cms-gray-224: #2b3445; --cms-gray-217: #232c3f;
    --cms-bsgray-200: #2b3445; --cms-bsgray-300: #313c4f;

    /* ---------- 진한 텍스트 프리미티브 → 밝은 텍스트 (다크 표면 가독) ----------
       grep 으로 background 사용 0건(asBg=0) 인 순수 텍스트 토큰만 — 배지 배경으로 안 쓰여 안전.
    */
    --cms-ink: #e5e9f0;  --cms-ink-700: #cfd6e0;  --cms-ink-900: #e5e9f0;
    --cms-gray-820: #d4d9e2;  --cms-gray-17: #e5e9f0;  --cms-gray-950: #e5e9f0;
    /* slate-800/900·gray-700/750/800/900 도 밝게(제목·본문 dark-on-dark 해소 — slate-800 텍스트 36회).
       단 이들은 배지/다크배너 배경 겸용 7곳 있음(page.preview 툴바·dash-kpi·board 휴지통토글·
       site hover-preview 헤더·widget wf-pre·page version pre) → 각 page.css 에
       html[data-cms-theme="dark"] 스코프 오버라이드로 어두운 표면 유지(semantic 토큰 참조). */
    --cms-gray-700: #d4d9e2;  --cms-gray-750: #dde3ec;  --cms-gray-800: #dde3ec;  --cms-gray-900: #e5e9f0;
    --cms-slate-800: #dde3ec;  --cms-slate-900: #e5e9f0;

    /* ---------- 선택/강조 페어 다크 (dark-on-dark / light-on-light 해소) ----------
       라이트 select-bg #eff6ff·select-text #1d4ed8 는 다크 활성배경 위 안 보임 →
       sidebar-active(#1d2740 bg / #93c5fd text) 와 동일 정책으로 밝은 블루 상향. */
    --cms-select-bg:     #1d2740;  --cms-select-text:   #93c5fd;  --cms-select-border: #3b7ff5;

    /* status 틴트(배경)+텍스트(전경) 다크 페어 — 어두운 틴트 표면 + 밝은 상태 텍스트.
       base 상태 토큰(--cms-info/success/danger/warning/accent)은 미변경(solid 배지 on-color·/theme 보존). */
    --cms-info-tint:    #1e2e4a;  --cms-info-text:    #93c5fd;
    --cms-success-tint: #163524;  --cms-success-text: #4ade80;
    --cms-danger-tint:  #3a2024;  --cms-danger-text:  #f87171;
    --cms-warn-tint:    #36290d;  --cms-warn-text:    #fbbf24;
    --cms-accent-tint:  #2c2347;  --cms-accent-text:  #c4b5fd;

    /* alert 박스 팔레트(.alert-success/.alert-danger 는 별도 --cms-alert-* 사용 — info/warning 은 blue-tint/warn-tint
       라 위에서 이미 다크화됨) 다크값. 라이트 연두/분홍 배경이 다크에서 흰 섬으로 남던 것 해소. */
    --cms-alert-success-bg:     #163524;  --cms-alert-success-text: #4ade80;  --cms-alert-success-border: #1f5235;
    --cms-alert-danger-bg:      #3a2024;  --cms-alert-danger-text:  #f87171;

    /* 정적 틴트 프리미티브 다크값 — 라이트 틴트 배경(선택/배지/배너)이 다크에서 흰/밝은 섬으로
       남는 것 방지. 전부 asText=0(color 사용 0건 grep 검증) 순수 배경 토큰만(기존 :406 검증 방식).
       ※ 짝 텍스트(green-700·blue-900·sky-text 등 dual-use)는 여기서 안 뒤집고 스윕서 -text 토큰으로 수렴. */
    --cms-blue-tint:   #1d2740;  --cms-blue-tint-2: #1d2740;  --cms-blue-tint-3: #1a2237;
    --cms-blue-tint-4: #1a2237;  --cms-blue-tint-5: #181f31;  --cms-blue-tint-6: #1e2e4a;
    --cms-green-tint:  #163524;  --cms-sky-tint:    #16304a;  --cms-sky-50:      #14283d;
    --cms-amber-tint:  #36290d;  --cms-yellow-tint: #332b0a;  --cms-red-tint:    #3a2024;
    --cms-red-25:      #2a1a1a;  --cms-violet-100:  #2c2347;  --cms-indigo-50:   #1e2240;
    --cms-indigo-100:  #232a4d;  --cms-pink-100:    #3a1f2e;
}
[data-cms-brand] {
    /* TODO(후속): 브랜드별 --cms-action-* 오버라이드(현재는 /theme cms-theme.css 가 :root 로 처리) */
}