/* tokens.linkbiz.css — food_rnd 토큰 다리 (tokens.css 뒤에 링크한다)
 *
 * 역할: tokens.css §B 의 food_rnd 이름을 LinkBiz 실측값(work-*.css → colors_and_type.css)으로 바꾼다.
 * 색은 이미 §A 로 들어와 있으므로(#5629ee · color01~28) 여기서는 **치수·서체·면·반경**만 갈아 끼운다.
 * 화면 JS(app.js) 는 건드리지 않는다. */
:root{
  /* 셸 치수 — LinkBiz: 다크 앱바 65 · LNB 300 · 툴바(제품 문맥 포함) 70 */
  --gnb-h: 65px;
  --lnb-w: 300px;
  --ctx-h: 70px;                 /* .ctx 를 없애지 않고 툴바로 쓴다 (shell.linkbiz.css) */
  --toolbar-h: 70px;
  --content-pad: 6px 40px 40px;

  /* 서체 — Malgun Gothic → pps(Poppins + LINESeed KR), 15px, 음수 자간 */
  --font: 'pps','ptd','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* ★ 표(DHTMLX) 전용 서체 — DHTMLX 기본 스택은 `Roboto, Arial, Tahoma, Verdana` 로
   * **한글이 하나도 없다**. 한글이 정처 없이 폴백되지 않도록 명시한다.
   * 조밀한 표에는 제목용 기하 서체(`pps`)보다 UI용(Pretendard)이 읽기 낫다.
   *
   * ※ 헷갈리지 말 것 — headless 캡처에서 이 표의 한글이 "원료→훤툐", 단위 "g→α" 로 보이는데
   *   이는 **서체와 무관한 캡처(래스터) 아티팩트**다. `textContent` 는 정상이고, 서체를 맑은
   *   고딕으로 바꿔도 똑같이 나오며, **스킨을 얹기 전 2026-09-10 캡처에도 이미 있었다**
   *   (finsh_test/20260910-0915…/nutrition__1440x900__light__ko.png). 실화면 결함이 아니다. */
  --font-table: 'ptd','Pretendard','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif;
  --font-title: 'nsq','ptd','Pretendard',sans-serif;
  --font-num: 'pps','roboto','Roboto',sans-serif;
  --fs-base: 15px;
  --fs-sm: 14px;
  --fs-caption: 13px;
  --tracking: -0.5px;
  --tracking-tight: -1px;

  /* 면 — 캔버스 #f7f6fa(LinkBiz 앱 바탕), 표면 white */
  --bg: #f7f6fa;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --line: #ebebeb;               /* 행 구분선 */
  --line-2: #d3d3d3;             /* 컨트롤 테두리 */
  --text: #303030;               /* 본문 강조 */
  --text-2: #505050;             /* 본문 */
  --muted: #606060;
  --muted-2: #909090;
  --app-bar: #5b5866;
  --app-bar-pill: #3d3752;
  --brand-hover: #3917af;

  /* 반경 — 버튼/입력/카드 8 · 작은 버튼 5 · 로그인 카드 24 · 알약 1000 */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-card: 24px;
  --radius-field: 8px;
  --radius-pill: 1000px;

  /* 그림자 — 넓고 옅게 */
  --shadow: 1px 4px 8px 1px rgba(1,4,47,.08);
  --shadow-pop: 1px 5px 30px rgba(0,0,0,.10);
  --shadow-lnb: 1px -1px 10px rgba(0,0,0,.10);

  /* 그리드(lbz-grid / com-grid) */
  --lbz-grid-top: 0;
  --lbz-grid-border: #ebebeb;
  --lbz-grid-header-bg: #f6f5fa;
  --lbz-grid-header-fg: #303030;
  --lbz-grid-row-hover: #faf9fe;
  --lbz-grid-row-sel: #f3effe;
}
body.theme-dark{
  --bg:#1e1e1e; --surface:#242424; --surface-2:#2a2a2a; --line:#333; --line-2:#3a3a3a;
  --text:#f2f2f2; --text-2:#d0d0d0; --muted:#a0a0a0; --muted-2:#8a8a8a;
  --app-bar:#2b2838; --app-bar-pill:#3d3752;
  --lbz-grid-header-bg:#2a2a2a; --lbz-grid-header-fg:#e8e8e8;
}