/*
 * @erp/ui-tokens — ERP 화면 기준(그룹웨어 UI 값 그대로). 정본 설명 E:\erp-suite\UI-STANDARD.md
 * 글꼴: import '@erp/ui-tokens/fonts.css' 를 먼저(Pretendard 가변 글꼴 파일을 함께 실음 — 이름만 적으면 PC 마다 다른 글꼴이 나온다, 11-13)
 * 쓰는 법: import '@erp/ui-tokens/tokens.css'  (package.json: "@erp/ui-tokens": "file:<경로>/erp-suite/packages/ui-tokens")
 * 앱 고유 CSS 는 이 변수(--erp-*)를 읽기만 한다 — 색·크기 값을 앱에 다시 적지 않는다.
 * 값을 바꿀 때는 그룹웨어(apps/web/src/framework/framework.css · shell/shell.css)와 UI-STANDARD.md 를 같이 고친다.
 */
:root {
  --erp-accent: #1a9d6f;
  --erp-accent-dark: #148059;
  --erp-accent-deep: #0e5c41;
  --erp-accent-weak: #e8f6f0;
  --erp-text: #2b2f36;
  --erp-ink: #22312b;
  --erp-sub: #6b7280;
  --erp-line: #dfe7e2;
  --erp-card-line: #e0e0e0; /* 카드 선(UI-STANDARD §7) */
  --erp-bg: #f5f8f6;
  --erp-panel: #f7f8fa;
  --erp-card: #ffffff;
  --erp-danger: #d14343;
  --erp-font: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
  --erp-font-size: 14px;
  --erp-ctl-h: 28px;
  --erp-radius: 4px;

  /* 동작색(11-14 93 §9-② ⓐ) — 주 단추 바탕·주색 «글자»(링크·선택 탭·강조 글자)는 이것. 흰 바탕 대비 4.93:1(AA 통과).
     브랜드 주색 --erp-accent(#1a9d6f, 대비 3.44:1)는 로고·■·선·옅은 배경·아이콘에만 — 글자색·흰 글자 바탕으로 쓰지 않는다(contract-check 대비 규칙) */
  --erp-action: #148059;
  --erp-action-hover: #0e5c41;
  --erp-on-action: #ffffff;

  /* 필수 칸 — 색만으로 구분하지 않는다: 이름표 뒤 «*» 글자 + 색(.erp-req) */
  --erp-required: #d14343;

  /* 확인 필요(경고) — OCR 확신 낮은 칸 등(11-15 @erp/ocr). 색만으로 알리지 않는다(«확인» 글자 같이).
     --erp-warn = 글자·선(흰 바탕 5.6:1 · warn-weak 바탕 5.2:1, AA) · --erp-warn-weak = 칸 바탕 */
  --erp-warn: #8a5f00;
  --erp-warn-weak: #fff4cc;

  /* 달력 요일 글자(11-15 @erp/date) — 원본 그룹웨어 달력 꼴(일 빨강·토 파랑). 흰 바탕·옅은 기간 바탕(--erp-accent-weak) 둘 다 AA:
     일 #c4393b 5.3:1 / 4.7:1 · 토 #1f5fbf 6.1:1 / 5.5:1 (--erp-danger #d14343 는 옅은 바탕에서 4.1:1 이라 따로 둔다) */
  --erp-sun: #c4393b;
  --erp-sat: #1f5fbf;
  /* 떠 있는 판(달력·고르기 팝업) 그림자 — 그룹웨어 드롭다운(코드 고르기 목록 .gw-picker-list)과 같은 값 */
  --erp-pop-shadow: 0 6px 18px rgba(0, 0, 0, .12);

  /* 겹침 단계(z-index, 11-15) — 창 위에 창: 대화상자·인쇄 미리보기 < 고르기(주소·엑셀) < 알림·확인(늘 맨 위) */
  --erp-z-dialog: 10000;
  --erp-z-picker: 10100;
  --erp-z-alert: 10300;

  /* 체크박스·라디오(11-15 프로듀서 «14px») — 폰·터치는 아래 media 에서 18px */
  --erp-check-size: 14px;

  /* 치수(93 §4.1-3) — 디자인 도구(f1)도 이 값을 그대로 쓴다 */
  --erp-fs-body: 14px;   /* 본문 */
  --erp-fs-title: 15px;  /* 화면 제목 */
  --erp-fs-ctl: 12px;    /* 단추·검색칸 */
  --erp-fs-label: 11px;  /* 검색칸 이름표 */
  --erp-fs-grid: 13px;   /* 표 칸 */
  --erp-fs-nav: 13px;    /* 왼쪽 트리 메뉴(@erp/menu) — 본문 14 보다 한 단계 작게: 메뉴는 훑어보는 글(11-14) */

  /* 밀도(93 §9-③) — 기본 «보통»(PC). 앱은 이 변수만 읽고, 고르기는 <html data-density="…"> 한 곳 */
  --erp-row-h: 28px;     /* 표 줄 */
  --erp-head-h: 30px;    /* 표 머리글 */

  /* 스크롤바(11-14 프로듀서 «원본은 깔끔한데 우리는 틀리다») — 원본 그룹웨어: 5~6px·바탕 투명·화살표 없음·둥근 회청 손잡이 */
  --erp-scroll-size: 6px;
  --erp-scroll-thumb: #c5ccd8;
  --erp-scroll-thumb-hover: #98a2b3;
}
:root[data-density='comfortable'] { --erp-ctl-h: 32px; --erp-row-h: 32px; --erp-head-h: 34px; } /* 넓게 — 태블릿 기본 */
:root[data-density='compact'] { --erp-ctl-h: 24px; --erp-row-h: 24px; --erp-head-h: 26px; }     /* 빽빽 — 사용자 선택 */
@media (pointer: coarse) and (max-width: 1280px) { :root:not([data-density]) { --erp-ctl-h: 32px; --erp-row-h: 32px; --erp-head-h: 34px; } }
.erp-req::after { content: ' *'; color: var(--erp-required); font-weight: 700; }
body { font-family: var(--erp-font); font-size: var(--erp-font-size); color: var(--erp-text); background: var(--erp-bg); }

/* 스크롤바 — 네 앱 공통(윈도 기본 막대: 17px·회색 바탕·▲▼ 화살표 → 얇은 손잡이만).
   크롬·엣지는 ::-webkit-scrollbar(scrollbar-color 를 같이 쓰면 이 꾸밈이 꺼지므로 표준 속성은 파이어폭스에만).
   표(.rgx-scroll)는 @rg/grid 가 더 구체적인 선택자로 따로 꾸민다. */
::-webkit-scrollbar { width: var(--erp-scroll-size); height: var(--erp-scroll-size); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--erp-scroll-thumb); border-radius: var(--erp-scroll-size); }
::-webkit-scrollbar-thumb:hover { background: var(--erp-scroll-thumb-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--erp-scroll-thumb) transparent; } }

/* 제목줄: «■ 화면 이름» + 오른쪽 단추 */
.erp-toolbar { display: flex; align-items: center; gap: 12px; }
.erp-title { font-size: 15px; font-weight: 700; margin: 0; }
.erp-title::before { content: '■'; color: var(--erp-accent); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.erp-toolbar-extra { flex: 1; }
.erp-toolbar-buttons { display: flex; gap: 6px; }

/* 단추: 높이 28 · 모서리 4 · 흰 바탕 + 선 · 주 단추만 채움 */
.erp-btn { height: var(--erp-ctl-h); padding: 0 12px; border: 1px solid var(--erp-line); border-radius: var(--erp-radius); background: #fff; font: inherit; font-size: 12px; color: var(--erp-text); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.erp-btn:hover { border-color: var(--erp-accent); }
.erp-btn.primary { background: var(--erp-action); border-color: var(--erp-action); color: var(--erp-on-action); }
.erp-btn.primary:hover { background: var(--erp-action-hover); }
.erp-btn.danger { color: var(--erp-danger); }
.erp-btn:disabled { opacity: .45; cursor: default; }
.erp-btn img { width: 16px; height: 16px; }

/* 검색칸 판: 이름표 위 · 입력 아래 */
.erp-search { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--erp-line); border-radius: 6px; background: var(--erp-panel); }
.erp-search-item { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--erp-sub); min-width: 140px; }
.erp-search-item input, .erp-search-item select { height: var(--erp-ctl-h); border: 1px solid var(--erp-line); border-radius: var(--erp-radius); padding: 0 6px; font: inherit; font-size: 12px; color: var(--erp-text); background: #fff; }

/* 건수줄 · 빈/오류 안내 */
.erp-count { text-align: right; font-size: 12px; color: var(--erp-sub); }
.erp-empty { padding: 40px 0; text-align: center; color: var(--erp-sub); }
.erp-error { padding: 12px; text-align: center; color: var(--erp-danger); }

/* 화면 안 탭 */
.erp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--erp-line); }
.erp-tabs button { border: 1px solid transparent; border-bottom: 0; background: none; padding: 6px 14px; font: inherit; font-size: 12px; color: var(--erp-sub); cursor: pointer; border-radius: 4px 4px 0 0; }
.erp-tabs button.on { border-color: var(--erp-line); background: #fff; color: var(--erp-action); font-weight: 600; margin-bottom: -1px; }

/* RG 그리드 ERP 테마(11-13) — 네 앱 표 칸 글자·선을 기준값으로. RG 자체 기본(파랑 계열)은 범용이라 ERP 값은 여기서 덮는다 */
/* html 을 앞에 붙여 한 단계 높인다 — @rg/grid 가 실행 중 같은 우선순위 .rgx{--rgx-text:#1f2430…} 를 나중에 넣어 덮던 것(11-15 회계 design 갈래: text.main #1f2430·grid.line #e3e7ee 153화면) */
html .rgx, html .rgx-pop { --rgx-text: var(--erp-text); --rgx-line: var(--erp-line); --rgx-size: var(--erp-fs-grid); }
/* 표 글자 13px(--erp-fs-grid) — 프로듀서 11-15 «13px 기준서대로»(그룹웨어 14·인사급여 12 섞여 있던 것) ·
   @rg/ui 화면 글자색 --rg-text(#1f2430)도 기준 본문색(UI-STANDARD §8 #2b2f36)으로 — html:root 로 @rg/ui :root 보다 앞선다 */
html:root { --rg-text: var(--erp-text); }

/* 글자색 둘(프로듀서 11-15): 본문 = --erp-text(#2b2f36) · 보조(설명·회색 안내·행 번호·빈 표 안내) = --erp-sub(#6b7280).
   뿌리 — @rg/grid 가 읽기 전용 칸(.rgx-ro)을 보조색(--rgx-sub #667085)으로 칠해 조회 목록의 자료 칸 전부가 회색이었다
   (ui-style text.main #667085 — 회계 23·인사급여 34 화면, 11-15 실측 .rgx-c.rgx-ro). 자료 칸은 고칠 수 있든 없든 본문색.
   입력 표(고칠 칸이 섞인 표 = .rgx-edit)에서만 읽기 전용 칸을 옅은 바탕(--erp-panel)으로 구분한다 — 글자는 본문색 그대로.
   .rgx 를 두 번 적어 @rg/grid 기본 테마(.rgx:not(.rgx-modern){--rgx-text:#000})보다도 앞선다. */
html .rgx.rgx, html .rgx-pop.rgx-pop, html .rgx-tip.rgx-tip { --rgx-text: var(--erp-text); --rgx-sub: var(--erp-sub); --rgx-ro-text: var(--erp-text); --rgx-ro-bg: var(--erp-panel); --rgx-chk-size: var(--erp-check-size); }
/* @rg/ui: 보조 글자(이름표·설명·빈 안내) = --erp-sub · 주색(선택 탭 글자·주 단추·포커스) = 동작색 — RG 기본 파랑(#2f5bea) 걷기
   (회계 N64·그룹웨어 달력이 따로 덮던 것을 한 곳에서) */
html:root { --rg-text-sub: var(--erp-sub); --rg-primary: var(--erp-action); --rg-primary-hover: var(--erp-action-hover); }

/* 체크박스·라디오 — 네 앱 공통 크기·색(UI-STANDARD §2 · 11-15). 화면마다 크기를 따로 적지 않는다.
   세로 flex 칸(폼 칸) 안에서 칸 폭만큼 늘어나던 것(그룹웨어 «숙박여부» 133×13) 막기 */
input[type=checkbox], input[type=radio] { width: var(--erp-check-size); height: var(--erp-check-size); min-width: var(--erp-check-size); accent-color: var(--erp-action); align-self: flex-start; flex: none; vertical-align: middle; cursor: pointer; }
/* 글과 한 줄인 체크(label 안 · 가로 flex)는 세로 가운데 — 위 align-self:flex-start 는 세로 flex 칸에서 늘어남만 막는 것(11-15 25: 폰 «아이디 기억하기» 상자가 글 위로 붙음) */
label > input[type=checkbox], label > input[type=radio] { align-self: center; }
@media (pointer: coarse) { :root { --erp-check-size: 18px; } }