@freegridjs/core 1.9.0 → 1.9.2

package/dist/cdn/freegrid.css

@@ -1,525 +1,525 @@
-[class*="fg-theme-"] {
-  --fg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans", sans-serif;
-  --fg-font-size: 13px;
-  --fg-radius: 8px;
-  --fg-cell-px: 12px;
-  --fg-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
-}
-.fg-theme-light {
-  --fg-bg: #ffffff; --fg-fg: #1f2430; --fg-muted: #636b7c;
-  --fg-header-bg: #f6f7f9; --fg-header-fg: #39404f; --fg-border: #e3e6eb; --fg-row-border: #eef0f3;
-  --fg-row-odd: #fbfbfc; --fg-row-hover: #f2f6ff; --fg-row-selected: #e3edff;
-  --fg-accent: #2563eb; --fg-accent-fg: #ffffff; --fg-focus: #2563eb; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
-}
-.fg-theme-dark {
-  --fg-bg: #11141b; --fg-fg: #e6e9f0; --fg-muted: #8c95a8;
-  --fg-header-bg: #171b24; --fg-header-fg: #c9cfdc; --fg-border: #262c38; --fg-row-border: #1c212b;
-  --fg-row-odd: #13171f; --fg-row-hover: #1a2233; --fg-row-selected: #1d3157;
-  --fg-accent: #4f8cff; --fg-accent-fg: #0b0d12; --fg-focus: #4f8cff; --fg-popup-bg: #171b24; --fg-input-bg: #0f1218;
-  --fg-shadow: 0 12px 32px rgba(0, 0, 0, .5);
-  color-scheme: dark;
-}
-.fg-root {
-  position: relative; display: flex; flex-direction: row; box-sizing: border-box;
-  width: 100%; height: 100%; overflow: hidden; outline: none;
-  font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-bg);
-  border: 1px solid var(--fg-border); border-radius: var(--fg-radius);
-  border-top: var(--fg-top-border, 1px solid var(--fg-border));
-  font-variant-numeric: tabular-nums;
-}
-.fg-root *, .fg-menu * { box-sizing: border-box; }
-.fg-main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
-.fg-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
-.fg-root [hidden], .fg-menu [hidden] { display: none !important; }
-.fg-header { display: flex; flex: none; background: var(--fg-header-bg); color: var(--fg-header-fg); border-bottom: var(--fg-header-border, 1px solid var(--fg-border)); }
-.fg-header-pane { position: relative; overflow: hidden; flex: none; }
-.fg-header-pane-center { flex: 1 1 0; min-width: 0; }
-.fg-header-pane-left { border-right: 1px solid var(--fg-border); }
-.fg-header-pane-right { border-left: 1px solid var(--fg-border); }
-.fg-header-inner { position: relative; will-change: transform; }
-.fg-header-cell {
-  position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 var(--fg-cell-px);
-  font-weight: var(--fg-header-weight, 600); white-space: nowrap; overflow: hidden; user-select: none;
-  box-shadow: inset -1px -1px 0 var(--fg-header-line, var(--fg-row-border));
-}
-.fg-header-group { justify-content: center; }
-.fg-header-cell.fg-sortable { cursor: pointer; }
-.fg-header-cell.fg-align-right { flex-direction: row-reverse; }
-.fg-header-label { overflow: hidden; text-overflow: ellipsis; flex: var(--fg-header-label-flex, 0 1 auto); text-align: var(--fg-header-text-align, left); }
-.fg-sort-icon { color: var(--fg-accent); font-size: 12px; }
-.fg-sort-icon sup { font-size: 9px; margin-left: 1px; }
-.fg-menu-btn {
-  margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
-  border: 0; border-radius: 5px; background: none; color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity .12s;
-}
-.fg-header-cell.fg-align-right .fg-menu-btn { margin-left: 0; margin-right: auto; }
-.fg-header-cell:hover .fg-menu-btn, .fg-menu-btn.fg-filter-active { opacity: 1; }
-.fg-menu-btn:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
-.fg-menu-btn.fg-filter-active { color: var(--fg-accent); }
-.fg-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
-.fg-resize:hover, .fg-resizing .fg-resize:active { background: linear-gradient(90deg, transparent 5px, var(--fg-accent) 5px, var(--fg-accent) 8px); }
-.fg-resizing { cursor: col-resize; user-select: none; }
-.fg-header-cell.fg-dragging { opacity: .45; }
-.fg-drop-marker { position: absolute; top: 0; width: 2px; background: var(--fg-accent); z-index: 5; pointer-events: none; }
-.fg-drag-ghost {
-  position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; padding: 6px 10px; border-radius: 6px;
-  font: 600 var(--fg-font-size) var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg); box-shadow: var(--fg-shadow);
-}
-.fg-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
-.fg-body-pane { position: relative; overflow: hidden; flex: none; }
-.fg-body-pane-center { flex: 1 1 0; min-width: 0; overflow: auto; }
-.fg-body-pane-left { border-right: 1px solid var(--fg-border); box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
-.fg-body-pane-right { border-left: 1px solid var(--fg-border); box-shadow: -4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
-.fg-canvas { position: relative; }
-.fg-row { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg); }
-.fg-row-odd { background: var(--fg-row-odd); }
-.fg-row:hover { background: var(--fg-row-hover); }
-.fg-row-selected, .fg-row-selected:hover { background: var(--fg-row-selected); }
-.fg-cell {
-  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 var(--fg-cell-px);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  box-shadow: var(--fg-col-line, none);
-}
-.fg-cell.fg-align-right { justify-content: flex-end; }
-.fg-cell.fg-align-center { justify-content: center; }
-.fg-cell-focused { outline: 2px solid var(--fg-focus); outline-offset: -2px; border-radius: 2px; }
-.fg-cell-select, .fg-header-select { justify-content: center; padding: 0; }
-.fg-checkbox { width: 15px; height: 15px; margin: 0; accent-color: var(--fg-accent); cursor: pointer; }
-.fg-summary { display: flex; flex: none; background: var(--fg-header-bg); font-weight: 600; }
-.fg-summary-top { border-bottom: 1px solid var(--fg-border); }
-.fg-summary-bottom { border-top: 1px solid var(--fg-border); }
-.fg-summary-pane { position: relative; overflow: hidden; flex: none; }
-.fg-summary-pane-center { flex: 1 1 0; min-width: 0; }
-.fg-summary-pane-left { border-right: 1px solid var(--fg-border); }
-.fg-summary-pane-right { border-left: 1px solid var(--fg-border); }
-.fg-summary-inner { position: relative; will-change: transform; }
-.fg-summary-row, .fg-summary-row:hover { background: var(--fg-header-bg); font-weight: 600; }
-.fg-summary-label { color: var(--fg-muted); }
-.fg-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; color: var(--fg-muted); pointer-events: none; }
-.fg-menu {
-  position: fixed; z-index: 10000; width: 248px; padding: 6px; border-radius: 10px; overflow: auto; overscroll-behavior: contain;
-  font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg);
-  border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow);
-}
-.fg-menu-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
-.fg-menu-section + .fg-menu-section { border-top: 1px solid var(--fg-border); }
-.fg-menu-item { text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
-.fg-menu-item:hover, .fg-menu-item:focus-visible { background: var(--fg-row-hover); outline: none; }
-.fg-menu-title { padding: 4px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
-.fg-filter { gap: 6px; padding: 6px 4px; }
-.fg-input, .fg-filter-op {
-  width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--fg-border); border-radius: 6px;
-  background: var(--fg-input-bg); color: inherit; font: inherit;
-}
-.fg-input:focus, .fg-filter-op:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
-/* every select in the grid, its menus and dialogs: a drawn chevron with room on the right */
-.fg-root select:not([multiple]):not([size]), .fg-menu select:not([multiple]):not([size]) {
-  appearance: none; -webkit-appearance: none; padding-right: 26px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
-}
-.fg-set-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
-.fg-set-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.fg-set-item:hover { background: var(--fg-row-hover); }
-.fg-set-all { font-weight: 600; }
-.fg-set-more { padding: 4px 6px; color: var(--fg-muted); }
-.fg-menu-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }
-.fg-btn { height: 28px; padding: 0 12px; border: 1px solid var(--fg-border); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
-.fg-btn:hover { background: var(--fg-row-hover); }
-.fg-btn-primary { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
-.fg-btn-primary:hover { background: var(--fg-accent); filter: brightness(1.08); }
-.fg-sidebar { display: flex; flex: none; border-left: 1px solid var(--fg-border); background: var(--fg-header-bg); }
-.fg-sidebar-panel { width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--fg-border); background: var(--fg-bg); }
-.fg-sidebar-tabs { width: 28px; display: flex; flex-direction: column; }
-.fg-sidebar-tab {
-  writing-mode: vertical-rl; padding: 12px 0; border: 0; background: none; color: var(--fg-header-fg);
-  font: 600 var(--fg-font-size) var(--fg-font); cursor: pointer;
-}
-.fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset 2px 0 var(--fg-accent); }
-.fg-sidebar-open .fg-sidebar-tabs { width: 32px; gap: 4px; padding: 8px 4px 8px 0; }
-.fg-sidebar-open .fg-sidebar-tab {
-  position: relative; margin-left: -1px; padding: 14px 0; border: 1px solid var(--fg-border); border-left-color: transparent;
-  border-radius: 0 7px 7px 0; background: var(--fg-header-bg); color: var(--fg-muted);
-}
-.fg-sidebar-open .fg-sidebar-tab:hover { color: var(--fg-header-fg); background: var(--fg-row-hover); }
-.fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] {
-  background: var(--fg-bg); color: var(--fg-accent); border-left-color: var(--fg-bg); box-shadow: inset -3px 0 var(--fg-accent); z-index: 1;
-}
-.fg-sidebar-open .fg-sidebar-tab:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: -2px; }
-.fg-chooser { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; flex: 1; }
-.fg-chooser-dialog { width: 280px; }
-.fg-chooser-dialog .fg-chooser { max-height: 420px; }
-.fg-chooser-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0 0; }
-.fg-chooser-close { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font-size: 18px; cursor: pointer; }
-.fg-chooser-close:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
-.fg-chooser-all { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-weight: 600; cursor: pointer; }
-.fg-chooser-list { position: relative; overflow: auto; flex: 1; min-height: 0; }
-.fg-chooser-item { display: flex; align-items: center; gap: 6px; height: 28px; padding-right: 6px; border-radius: 6px; white-space: nowrap; }
-.fg-chooser-item:hover { background: var(--fg-row-hover); }
-.fg-chooser-item.fg-dragging { opacity: .45; }
-.fg-chooser-group > .fg-chooser-label { font-weight: 600; }
-.fg-chooser-handle { color: var(--fg-muted); cursor: grab; letter-spacing: -3px; padding: 0 4px 0 0; user-select: none; }
-.fg-chooser-caret { width: 16px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; padding: 0; }
-.fg-chooser-label { overflow: hidden; text-overflow: ellipsis; }
-.fg-chooser-pin { margin-left: auto; color: var(--fg-muted); font-size: 11px; }
-.fg-chooser-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); pointer-events: none; }
-
-/* ── Korean-style themes: simple lines, centered headers ─────────────────── */
-.fg-theme-board, .fg-theme-erp, .fg-theme-excel, .fg-theme-classic {
-  --fg-font: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
-  --fg-header-label-flex: 1 1 auto; --fg-header-text-align: center;
-  --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff; --fg-accent-fg: #ffffff; --fg-shadow: 0 8px 24px rgba(0, 0, 0, .14);
-}
-/* 게시판형: thick top rule, light grey header, horizontal lines only */
-.fg-theme-board {
-  --fg-radius: 0; --fg-bg: #ffffff; --fg-fg: #222222; --fg-muted: #767676;
-  --fg-header-bg: #f7f7f7; --fg-header-fg: #222222; --fg-border: #dddddd; --fg-row-border: #e5e5e5;
-  --fg-row-odd: #ffffff; --fg-row-hover: #f6f8fb; --fg-row-selected: #eef3fc;
-  --fg-accent: #1f5bd6; --fg-focus: #1f5bd6;
-  --fg-top-border: 2px solid #222222; --fg-header-border: 1px solid #bbbbbb; --fg-header-line: transparent;
-}
-.fg-theme-board.fg-root { border-left: 0; border-right: 0; }
-/* 관리자·ERP형: every cell bordered, blue-grey header, compact */
-.fg-theme-erp {
-  --fg-font-size: 12px; --fg-radius: 2px; --fg-cell-px: 8px;
-  --fg-bg: #ffffff; --fg-fg: #333333; --fg-muted: #7a8494;
-  --fg-header-bg: #eef2f7; --fg-header-fg: #2b3442; --fg-border: #c5ceda; --fg-row-border: #dde3eb;
-  --fg-row-odd: #fafbfd; --fg-row-hover: #eef5ff; --fg-row-selected: #fff6d5;
-  --fg-accent: #2f6fde; --fg-focus: #2f6fde;
-  --fg-col-line: inset -1px 0 #dde3eb; --fg-header-line: #c5ceda;
-}
-/* 엑셀형: gridlines, plain grey header, green focus */
-.fg-theme-excel {
-  --fg-radius: 0; --fg-cell-px: 8px;
-  --fg-bg: #ffffff; --fg-fg: #1f1f1f; --fg-muted: #6e6e6e;
-  --fg-header-bg: #f3f3f3; --fg-header-fg: #444444; --fg-header-weight: 500;
-  --fg-border: #d4d4d4; --fg-row-border: #e2e2e2;
-  --fg-row-odd: #ffffff; --fg-row-hover: #f7f7f7; --fg-row-selected: #e6f2ea;
-  --fg-accent: #107c41; --fg-focus: #107c41;
-  --fg-col-line: inset -1px 0 #e2e2e2; --fg-header-line: #d4d4d4;
-}
-/* 진한 헤더형: calm navy header with white text */
-.fg-theme-classic {
-  --fg-radius: 4px; --fg-bg: #ffffff; --fg-fg: #2a2f37; --fg-muted: #6b7380;
-  --fg-header-bg: #3d4b63; --fg-header-fg: #ffffff; --fg-border: #cfd5de; --fg-row-border: #e3e7ed;
-  --fg-row-odd: #f8f9fb; --fg-row-hover: #eef2f8; --fg-row-selected: #e2e9f5;
-  --fg-accent: #3d4b63; --fg-focus: #3d6bb3;
-  --fg-col-line: inset -1px 0 #e3e7ed; --fg-header-line: #56657e;
-}
-.fg-theme-classic .fg-menu-btn { color: #c9d2e0; }
-.fg-theme-classic .fg-menu-btn:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
-.fg-theme-classic .fg-sort-icon, .fg-theme-classic .fg-menu-btn.fg-filter-active { color: #ffd166; }
-.fg-theme-classic .fg-sidebar-tab { color: #c9d2e0; }
-.fg-theme-classic .fg-sidebar-tab[aria-expanded="true"] { color: #ffd166; box-shadow: inset 2px 0 #ffd166; }
-.fg-theme-classic .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset -3px 0 var(--fg-accent); }
-.fg-theme-board .fg-header-cell, .fg-theme-erp .fg-header-cell, .fg-theme-excel .fg-header-cell, .fg-theme-classic .fg-header-cell { flex-direction: row; justify-content: center; }
-.fg-theme-board .fg-menu-btn, .fg-theme-erp .fg-menu-btn, .fg-theme-excel .fg-menu-btn, .fg-theme-classic .fg-menu-btn {
-  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0;
-}
-.fg-theme-board .fg-header-label, .fg-theme-erp .fg-header-label, .fg-theme-excel .fg-header-label, .fg-theme-classic .fg-header-label { flex: 0 1 auto; }
-
-/* ── cell ranges, context menu, toast ───────────────────────────────── */
-.fg-cell-range { background: var(--fg-range-bg, color-mix(in srgb, var(--fg-accent) 13%, transparent)); }
-.fg-range-dragging, .fg-range-dragging * { user-select: none; cursor: cell; }
-.fg-context-menu { width: 236px; }
-.fg-cm-item { display: flex; align-items: center; gap: 12px; width: 100%; }
-.fg-cm-item:disabled { opacity: .45; cursor: default; background: none; }
-.fg-cm-label { flex: 1; }
-.fg-cm-shortcut { color: var(--fg-muted); font-size: .9em; }
-.fg-cm-sep { height: 1px; margin: 4px 2px; background: var(--fg-border); }
-.fg-toast {
-  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; max-width: 90%;
-  padding: 8px 14px; border-radius: 8px; background: var(--fg-fg); color: var(--fg-bg); font-size: .95em; box-shadow: var(--fg-shadow);
-}
-
-/* ── editing ────────────────────────────────────────────────────────── */
-.fg-editor { position: absolute; z-index: 15; display: flex; background: var(--fg-bg); box-shadow: 0 0 0 2px var(--fg-focus), var(--fg-shadow); border-radius: 2px; }
-.fg-editor-control { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; padding: 0 var(--fg-cell-px); background: transparent; color: var(--fg-fg); font: inherit; }
-textarea.fg-editor-control { padding-top: 8px; resize: none; }
-.fg-editor-msg { position: absolute; left: -2px; top: 100%; margin-top: 4px; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #c2361f; color: #fff; font-size: .9em; }
-.fg-editor-msg:empty { display: none; }
-.fg-editor-invalid { box-shadow: 0 0 0 2px #c2361f, var(--fg-shadow); }
-.fg-cell-dirty { background-image: linear-gradient(225deg, var(--fg-dirty, #f2a900) 6px, transparent 6px); }
-.fg-row-created { box-shadow: inset 3px 0 0 var(--fg-accent); }
-
-/* ── v0.3: merge, pinned rows, status bar, fill handle, find, header wrap ── */
-.fg-cell-merged { z-index: 1; background: var(--fg-bg); align-items: flex-start; padding-top: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2); border-bottom: 1px solid var(--fg-row-border); box-shadow: var(--fg-col-line, none); }
-.fg-row-odd .fg-cell-merged { background: var(--fg-bg); }
-.fg-cell-merge-hidden { visibility: hidden; }
-.fg-pinned-rows { display: flex; flex: none; background: var(--fg-bg); }
-.fg-pinned-top { border-bottom: 2px solid var(--fg-border); }
-.fg-pinned-bottom { border-top: 2px solid var(--fg-border); }
-.fg-section-pane { position: relative; overflow: hidden; flex: none; }
-.fg-section-pane-center { flex: 1 1 0; min-width: 0; }
-.fg-section-pane-left { border-right: 1px solid var(--fg-border); }
-.fg-section-pane-right { border-left: 1px solid var(--fg-border); }
-.fg-section-inner { position: relative; will-change: transform; }
-.fg-row-pinned, .fg-row-pinned:hover { background: var(--fg-row-odd); font-weight: 500; }
-.fg-statusbar { display: flex; flex: none; justify-content: space-between; gap: 16px; padding: 6px var(--fg-cell-px); border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-muted); font-size: .92em; white-space: nowrap; overflow: hidden; }
-.fg-status-aggs { color: var(--fg-fg); font-variant-numeric: tabular-nums; white-space: pre; }
-.fg-fill-handle { position: absolute; z-index: 16; width: 8px; height: 8px; background: var(--fg-accent); border: 1px solid var(--fg-bg); cursor: crosshair; }
-.fg-fill-preview { position: absolute; z-index: 15; border: 1px dashed var(--fg-accent); pointer-events: none; }
-.fg-cell-match { background: color-mix(in srgb, #f2a900 22%, transparent); }
-.fg-cell-match-current { background: #f2a900; color: #1a1300; }
-.fg-findbar { position: absolute; top: 6px; right: 18px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; background: var(--fg-popup-bg); border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow); }
-.fg-findbar .fg-input { width: 200px; height: 28px; }
-.fg-findbar-count { min-width: 56px; text-align: center; color: var(--fg-muted); font-size: .9em; font-variant-numeric: tabular-nums; }
-.fg-findbar-btn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-fg); cursor: pointer; }
-.fg-findbar-btn:hover { background: var(--fg-row-hover); }
-.fg-header-wrap .fg-header-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }
-
-/* grouping, tree data, master/detail, row drag */
-.fg-group-panel {
-  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px;
-  background: var(--fg-bg); border-bottom: 1px solid var(--fg-border); color: var(--fg-muted, #6b7280);
-}
-.fg-group-panel-over { background: var(--fg-row-hover); outline: 2px dashed var(--fg-accent); outline-offset: -4px; }
-.fg-group-hint { font-size: .92em; }
-.fg-group-chip {
-  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--fg-border);
-  border-radius: 999px; background: var(--fg-header-bg); color: var(--fg-header-fg); cursor: grab; user-select: none;
-}
-.fg-group-chip.fg-dragging { opacity: .5; }
-.fg-group-chip-remove {
-  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
-  font: inherit; line-height: 1; cursor: pointer;
-}
-.fg-group-chip-remove:hover { background: var(--fg-row-hover); }
-.fg-group-sep { opacity: .6; }
-.fg-row-group, .fg-row-group:hover { background: var(--fg-header-bg); font-weight: 600; }
-.fg-group-cell { overflow: visible; z-index: 1; padding-left: calc(4px + var(--fg-level, 0) * 16px); }
-.fg-group-label { white-space: nowrap; }
-.fg-cell-agg { color: var(--fg-header-fg); }
-.fg-group-toggle, .fg-tree-toggle, .fg-detail-toggle {
-  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-right: 4px;
-  padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer;
-}
-.fg-group-toggle:hover, .fg-tree-toggle:hover, .fg-detail-toggle:hover { background: var(--fg-row-hover); }
-.fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: transform .12s ease; }
-.fg-expanded svg { transform: rotate(90deg); }
-.fg-tree-spacer { display: inline-block; flex: none; width: 24px; }
-.fg-cell-lead { padding-left: calc(4px + var(--fg-level, 0) * 16px); }
-.fg-row-detail, .fg-row-detail:hover { background: var(--fg-bg); }
-.fg-detail {
-  position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: auto; padding: 10px 14px;
-  border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg);
-}
-.fg-cell-drag { justify-content: center; padding: 0; cursor: grab; }
-.fg-drag-handle { color: var(--fg-muted, #9aa1ad); cursor: grab; letter-spacing: -1px; user-select: none; }
-.fg-drag-handle.fg-drag-disabled { opacity: .35; cursor: not-allowed; }
-.fg-row-dragging, .fg-row-dragging * { cursor: grabbing !important; }
-.fg-row-drop-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); z-index: 6; pointer-events: none; }
-.fg-row-drop-marker.fg-row-drop-inside { background: color-mix(in srgb, var(--fg-accent) 8%, transparent); box-shadow: inset 0 0 0 2px var(--fg-accent); }
-@media (prefers-reduced-motion: reduce) { .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: none; } }
-.fg-tree-loading svg { animation: fg-spin .8s linear infinite; opacity: .6; }
-@keyframes fg-spin { to { transform: rotate(360deg); } }
-@media (prefers-reduced-motion: reduce) { .fg-tree-loading svg { animation: none; } }
-
-/* pagination and server rows */
-.fg-pager {
-  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 38px; padding: 4px 10px;
-  border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-header-fg); font-variant-numeric: tabular-nums;
-}
-.fg-pager-spacer { flex: 1; }
-.fg-pager-size-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
-.fg-pager-size { font: inherit; color: var(--fg-fg); background: var(--fg-input-bg); border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px; }
-.fg-pager-page { padding: 0 8px; }
-.fg-pager-btn {
-  min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px;
-  background: transparent; color: inherit; font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer;
-}
-.fg-pager-btn:hover:not(:disabled) { background: var(--fg-row-hover); border-color: var(--fg-border); }
-.fg-pager-btn:disabled { opacity: .35; cursor: default; }
-.fg-skeleton {
-  display: block; width: 70%; height: .8em; border-radius: 4px;
-  background: linear-gradient(90deg, var(--fg-row-border) 25%, var(--fg-border) 50%, var(--fg-row-border) 75%);
-  background-size: 200% 100%; animation: fg-shimmer 1.2s ease-in-out infinite;
-}
-@keyframes fg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
-@media (prefers-reduced-motion: reduce) { .fg-skeleton { animation: none; } }
-
-/* filters tool panel */
-.fg-filters-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
-.fg-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--fg-border); }
-.fg-filters-title { font-weight: 600; }
-.fg-filters-clear { font-size: .9em; padding: 2px 8px; }
-.fg-filters-list { overflow: auto; flex: 1; }
-.fg-filters-item { border-bottom: 1px solid var(--fg-row-border); }
-.fg-filters-item > summary { padding: 7px 10px; cursor: pointer; list-style-position: inside; }
-.fg-filters-item > summary:hover { background: var(--fg-row-hover); }
-.fg-filters-item.fg-filter-on > summary { color: var(--fg-accent); font-weight: 600; }
-.fg-filters-item.fg-filter-on > summary::after { content: ' ●'; font-size: .7em; vertical-align: middle; }
-.fg-filters-item .fg-filter { border: 0; padding: 4px 10px 10px; }
-
-/* pivot panel */
-.fg-pivot-panel { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; padding: 8px 10px; }
-.fg-pivot-mode { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-weight: 600; border-bottom: 1px solid var(--fg-border); }
-.fg-pivot-zone { padding: 8px 0; border-bottom: 1px solid var(--fg-row-border); }
-.fg-pivot-zone-title { font-size: .9em; color: var(--fg-muted); margin-bottom: 6px; }
-.fg-pivot-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
-.fg-pivot-chips .fg-group-chip { cursor: default; }
-.fg-pivot-agg, .fg-pivot-add {
-  font: inherit; font-size: .92em; color: var(--fg-fg); background: var(--fg-input-bg);
-  border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px;
-}
-.fg-pivot-add { width: 100%; }
-
-/* charts */
-.fg-chart-panel {
-  position: absolute; top: 12px; right: 12px; z-index: 20; width: min(640px, calc(100% - 24px));
-  background: var(--fg-popup-bg); border: 1px solid var(--fg-border); border-radius: 8px; box-shadow: var(--fg-shadow);
-  display: flex; flex-direction: column;
-}
-.fg-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--fg-border); }
-.fg-chart-type {
-  padding: 3px 8px; border: 1px solid var(--fg-border); border-radius: 999px; background: transparent;
-  color: var(--fg-fg); font: inherit; font-size: .88em; cursor: pointer;
-}
-.fg-chart-type[aria-pressed="true"] { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
-.fg-chart-spacer { flex: 1; }
-.fg-chart-body { padding: 4px 8px 8px; }
-.fg-chart { display: block; width: 100%; height: auto; font: 11px var(--fg-font); color: var(--fg-fg); }
-.fg-chart text { fill: var(--fg-muted); }
-.fg-chart .fg-chart-title { fill: var(--fg-fg); font-size: 14px; font-weight: 600; }
-.fg-chart-grid { stroke: var(--fg-row-border); }
-.fg-chart-zero { stroke: var(--fg-border); stroke-width: 1.5; }
-.fg-chart-legend-item text { fill: var(--fg-fg); }
-.fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: opacity .12s; }
-.fg-chart-plot:hover .fg-chart-bar:not(:hover), .fg-chart:hover .fg-chart-slice:not(:hover) { opacity: .55; }
-.fg-chart-slice { stroke: var(--fg-popup-bg, #fff); stroke-width: 1.5; }
-@media (prefers-reduced-motion: reduce) { .fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: none; } }
-
-/* free-use badge (unlicensed company domains) */
-.fg-free-badge {
-  position: absolute; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 6px;
-  padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(14, 23, 38, .15);
-  box-shadow: 0 2px 8px rgba(14, 23, 38, .12); color: #0E1726; font: 600 11px/1.2 var(--fg-font); text-decoration: none; opacity: .9;
-}
-.fg-free-badge:hover { opacity: 1; }
-.fg-free-badge svg { flex: none; }
-
-/* column spans */
-.fg-cell-span-hidden { visibility: hidden; }
-.fg-cell-colspan { z-index: 1; background: inherit; }
-
-/* per-cell locks */
-.fg-cell-readonly { color: var(--fg-muted); background-image: linear-gradient(rgba(14, 23, 38, .025), rgba(14, 23, 38, .025)); }
-.fg-cell-select-locked .fg-checkbox { cursor: not-allowed; opacity: .45; }
-
-/* wrapped cells (autoRowHeight grows the row to fit) */
-.fg-cell-wrap { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }
-
-/* right-to-left: mirror the grid area, then turn every cell back so text reads normally */
-/* the root keeps dir=rtl (side bar on the left); the grid inside is laid out ltr and mirrored */
-.fg-rtl .fg-main { transform: scaleX(-1); direction: ltr; }
-.fg-rtl .fg-cell, .fg-rtl .fg-header-cell, .fg-rtl .fg-statusbar, .fg-rtl .fg-pager, .fg-rtl .fg-group-panel,
-.fg-rtl .fg-overlay, .fg-rtl .fg-find, .fg-rtl .fg-chart-panel, .fg-rtl .fg-row-detail .fg-detail { transform: scaleX(-1); direction: rtl; }
-.fg-rtl .fg-sidebar { direction: rtl; border-left: 0; border-right: 1px solid var(--fg-border); }
-
-/* touch */
-.fg-body { touch-action: pan-x pan-y; }
-@media (pointer: coarse) {
-  .fg-editor input, .fg-editor select, .fg-editor textarea { font-size: 16px; } /* no zoom-in on focus in mobile Safari */
-}
-
-/* card view for narrow screens */
-.fg-card-mode .fg-header, .fg-card-mode .fg-body, .fg-card-mode .fg-grid, .fg-card-mode .fg-summary, .fg-card-mode .fg-pinned-rows { display: none; }
-.fg-cards { flex: 1; min-height: 0; overflow: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
-.fg-cards-canvas { position: relative; }
-.fg-card {
-  position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 10px 14px; overflow: hidden;
-  border: 1px solid var(--fg-border); border-radius: 10px; background: var(--fg-bg); box-shadow: 0 1px 2px rgba(14, 23, 38, .06);
-}
-.fg-card-selected { border-color: var(--fg-accent); background: var(--fg-row-selected); }
-.fg-card-other { background: var(--fg-header-bg); font-weight: 600; display: flex; align-items: center; }
-.fg-card-head { display: flex; align-items: center; gap: 8px; height: var(--fg-card-line, 27px); color: var(--fg-muted); font-size: .92em; }
-.fg-card-line { display: grid; grid-template-columns: minmax(80px, 38%) 1fr; gap: 10px; align-items: center; height: var(--fg-card-line, 27px); }
-.fg-card-label { color: var(--fg-muted); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.fg-card-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* row numbers */
-.fg-cell-rownum, .fg-header-rownum { justify-content: center; color: var(--fg-muted); font-variant-numeric: tabular-nums; cursor: default; }
-.fg-cell-rownum { background: var(--fg-header-bg); }
-
-/* filter row */
-.fg-filter-row { position: relative; border-top: 1px solid var(--fg-border); will-change: transform; }
-.fg-filter-cell { position: absolute; top: 0; box-sizing: border-box; display: flex; align-items: center; padding: 3px 4px; border-right: 1px solid var(--fg-border); }
-.fg-filter-input { width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--fg-border); border-radius: 4px; padding: 0 6px; background: var(--fg-bg); color: var(--fg-fg); font: inherit; font-size: .92em; }
-.fg-filter-input:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
-.fg-filter-input::placeholder { color: var(--fg-muted); opacity: .7; }
-.fg-filter-active .fg-filter-input { border-color: var(--fg-accent); }
-.fg-filter-bad.fg-filter-input { border-color: #dc2626; }
-.fg-rtl .fg-filter-cell { transform: scaleX(-1); direction: rtl; }
-
-/* tooltips */
-.fg-tooltip { position: fixed; z-index: 1000; max-width: 360px; padding: 6px 9px; border-radius: 6px; background: #1f2430; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
-.fg-tooltip.fg-theme-dark { background: #e6e9f0; color: #11141b; }
-
-/* cells changed by applyTransaction */
-.fg-cell-flash { animation: fg-flash var(--fg-flash-duration, 1s) ease-out; }
-@keyframes fg-flash { from { background: color-mix(in srgb, var(--fg-accent) 35%, transparent); } to { background: transparent; } }
-.fg-cell-flash-up { animation-name: fg-flash-up; }
-.fg-cell-flash-down { animation-name: fg-flash-down; }
-@keyframes fg-flash-up { from { background: color-mix(in srgb, var(--fg-up, #16a34a) 32%, transparent); } to { background: transparent; } }
-@keyframes fg-flash-down { from { background: color-mix(in srgb, var(--fg-down, #dc2626) 32%, transparent); } to { background: transparent; } }
-@media (prefers-reduced-motion: reduce) { .fg-cell-flash { animation: none; outline: 1px solid var(--fg-accent); outline-offset: -1px; }
-  .fg-cell-flash-up { outline-color: var(--fg-up, #16a34a); }
-  .fg-cell-flash-down { outline-color: var(--fg-down, #dc2626); } }
-
-/* editType 'row': the row being edited */
-.fg-row-editing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg-accent) 45%, transparent); background: color-mix(in srgb, var(--fg-accent) 5%, var(--fg-bg)); }
-
-/* collapsible column groups */
-.fg-colgroup-toggle { margin-left: 6px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--fg-border); border-radius: 4px; background: var(--fg-bg); color: var(--fg-muted); font: 600 12px/1 var(--fg-font); cursor: pointer; flex: none; }
-.fg-colgroup-toggle:hover { color: var(--fg-fg); border-color: var(--fg-muted); }
-
-/* two conditions in a column filter */
-.fg-filter-cond { display: flex; flex-direction: column; gap: 6px; }
-.fg-filter-join { display: flex; gap: 14px; padding: 2px 2px 0; font-size: .92em; color: var(--fg-muted); }
-.fg-filter-join label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
-
-/* autoHeight: grow with the rows */
-.fg-root.fg-auto-height { height: auto; }
-.fg-auto-height .fg-main, .fg-auto-height .fg-grid { flex: none; }
-.fg-auto-height .fg-body { flex: none; min-height: 0; }
-.fg-auto-height .fg-body-pane-center { overflow-y: hidden; }
-
-.fg-sparkline { display: block; overflow: visible; }
-
-.fg-overlay.fg-overlay-custom { pointer-events: auto; }
-
-/* density */
-.fg-density-compact { --fg-cell-px: 7px; }
-.fg-density-comfortable { --fg-cell-px: 14px; }
-
-/* conditional formats */
-.fg-cf-bar { background-image: linear-gradient(to right, transparent var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-to), transparent var(--fg-bar-to)); background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 50%; }
-.fg-cf-icon { display: inline-block; margin-inline-end: 6px; font-size: .9em; line-height: 1; }
-.fg-cf-dialog { width: 340px; }
-.fg-cf-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
-.fg-cf-rule { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid var(--fg-border); border-radius: 6px; }
-.fg-cf-rule-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.fg-cf-sample { flex: none; width: 34px; height: 18px; border-radius: 4px; border: 1px solid var(--fg-border); display: grid; place-items: center; font-size: 11px; }
-.fg-cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
-.fg-cf-form > .fg-cf-wide { grid-column: 1 / -1; }
-.fg-cf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
-.fg-cf-swatch { width: 30px; height: 22px; border-radius: 5px; border: 1px solid var(--fg-border); cursor: pointer; font: 600 11px/1 var(--fg-font); padding: 0; }
-.fg-cf-swatch[aria-pressed="true"] { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
-.fg-cf-empty { color: var(--fg-muted); padding: 4px 0; }
-
-/* AI assistant */
-.fg-ai-panel { width: 360px; display: flex; flex-direction: column; gap: 8px; }
-.fg-ai-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
-.fg-ai-log:empty { display: none; }
-.fg-ai-msg { padding: 7px 10px; border-radius: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
-.fg-ai-user { align-self: flex-end; background: var(--fg-accent); color: var(--fg-accent-fg); border-bottom-right-radius: 3px; }
-.fg-ai-ai { align-self: flex-start; background: var(--fg-header-bg); border: 1px solid var(--fg-border); border-bottom-left-radius: 3px; }
-.fg-ai-error { align-self: flex-start; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
-.fg-ai-wait { color: var(--fg-muted); }
-.fg-ai-note { margin-top: 4px; font-size: .9em; color: var(--fg-muted); }
-.fg-ai-undo { margin-top: 6px; height: 24px; padding: 0 10px; }
-.fg-ai-form { display: flex; gap: 6px; align-items: flex-end; }
-.fg-ai-input { flex: 1; resize: vertical; min-height: 40px; max-height: 140px; padding: 6px 8px; font: inherit; }
-.fg-ai-tips { display: flex; flex-wrap: wrap; gap: 6px; }
-.fg-ai-tip { border: 1px solid var(--fg-border); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .92em; padding: 3px 10px; cursor: pointer; }
-.fg-ai-tip:hover { background: var(--fg-row-hover); }
+[class*="fg-theme-"] {
+  --fg-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans", sans-serif;
+  --fg-font-size: 13px;
+  --fg-radius: 8px;
+  --fg-cell-px: 12px;
+  --fg-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
+}
+.fg-theme-light {
+  --fg-bg: #ffffff; --fg-fg: #1f2430; --fg-muted: #636b7c;
+  --fg-header-bg: #f6f7f9; --fg-header-fg: #39404f; --fg-border: #e3e6eb; --fg-row-border: #eef0f3;
+  --fg-row-odd: #fbfbfc; --fg-row-hover: #f2f6ff; --fg-row-selected: #e3edff;
+  --fg-accent: #2563eb; --fg-accent-fg: #ffffff; --fg-focus: #2563eb; --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff;
+}
+.fg-theme-dark {
+  --fg-bg: #11141b; --fg-fg: #e6e9f0; --fg-muted: #8c95a8;
+  --fg-header-bg: #171b24; --fg-header-fg: #c9cfdc; --fg-border: #262c38; --fg-row-border: #1c212b;
+  --fg-row-odd: #13171f; --fg-row-hover: #1a2233; --fg-row-selected: #1d3157;
+  --fg-accent: #4f8cff; --fg-accent-fg: #0b0d12; --fg-focus: #4f8cff; --fg-popup-bg: #171b24; --fg-input-bg: #0f1218;
+  --fg-shadow: 0 12px 32px rgba(0, 0, 0, .5);
+  color-scheme: dark;
+}
+.fg-root {
+  position: relative; display: flex; flex-direction: row; box-sizing: border-box;
+  width: 100%; height: 100%; overflow: hidden; outline: none;
+  font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-bg);
+  border: 1px solid var(--fg-border); border-radius: var(--fg-radius);
+  border-top: var(--fg-top-border, 1px solid var(--fg-border));
+  font-variant-numeric: tabular-nums;
+}
+.fg-root *, .fg-menu * { box-sizing: border-box; }
+.fg-main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
+.fg-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; outline: none; }
+.fg-root [hidden], .fg-menu [hidden] { display: none !important; }
+.fg-header { display: flex; flex: none; background: var(--fg-header-bg); color: var(--fg-header-fg); border-bottom: var(--fg-header-border, 1px solid var(--fg-border)); }
+.fg-header-pane { position: relative; overflow: hidden; flex: none; }
+.fg-header-pane-center { flex: 1 1 0; min-width: 0; }
+.fg-header-pane-left { border-right: 1px solid var(--fg-border); }
+.fg-header-pane-right { border-left: 1px solid var(--fg-border); }
+.fg-header-inner { position: relative; will-change: transform; }
+.fg-header-cell {
+  position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 var(--fg-cell-px);
+  font-weight: var(--fg-header-weight, 600); white-space: nowrap; overflow: hidden; user-select: none;
+  box-shadow: inset -1px -1px 0 var(--fg-header-line, var(--fg-row-border));
+}
+.fg-header-group { justify-content: center; }
+.fg-header-cell.fg-sortable { cursor: pointer; }
+.fg-header-cell.fg-align-right { flex-direction: row-reverse; }
+.fg-header-label { overflow: hidden; text-overflow: ellipsis; flex: var(--fg-header-label-flex, 0 1 auto); text-align: var(--fg-header-text-align, left); }
+.fg-sort-icon { color: var(--fg-accent); font-size: 12px; }
+.fg-sort-icon sup { font-size: 9px; margin-left: 1px; }
+.fg-menu-btn {
+  margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
+  border: 0; border-radius: 5px; background: none; color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity .12s;
+}
+.fg-header-cell.fg-align-right .fg-menu-btn { margin-left: 0; margin-right: auto; }
+.fg-header-cell:hover .fg-menu-btn, .fg-menu-btn.fg-filter-active { opacity: 1; }
+.fg-menu-btn:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
+.fg-menu-btn.fg-filter-active { color: var(--fg-accent); }
+.fg-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
+.fg-resize:hover, .fg-resizing .fg-resize:active { background: linear-gradient(90deg, transparent 5px, var(--fg-accent) 5px, var(--fg-accent) 8px); }
+.fg-resizing { cursor: col-resize; user-select: none; }
+.fg-header-cell.fg-dragging { opacity: .45; }
+.fg-drop-marker { position: absolute; top: 0; width: 2px; background: var(--fg-accent); z-index: 5; pointer-events: none; }
+.fg-drag-ghost {
+  position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; padding: 6px 10px; border-radius: 6px;
+  font: 600 var(--fg-font-size) var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg); box-shadow: var(--fg-shadow);
+}
+.fg-body { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
+.fg-body-pane { position: relative; overflow: hidden; flex: none; }
+.fg-body-pane-center { flex: 1 1 0; min-width: 0; overflow: auto; }
+.fg-body-pane-left { border-right: 1px solid var(--fg-border); box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
+.fg-body-pane-right { border-left: 1px solid var(--fg-border); box-shadow: -4px 0 8px -6px rgba(0, 0, 0, .18); z-index: 1; }
+.fg-canvas { position: relative; }
+.fg-row { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg); }
+.fg-row-odd { background: var(--fg-row-odd); }
+.fg-row:hover { background: var(--fg-row-hover); }
+.fg-row-selected, .fg-row-selected:hover { background: var(--fg-row-selected); }
+.fg-cell {
+  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 var(--fg-cell-px);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  box-shadow: var(--fg-col-line, none);
+}
+.fg-cell.fg-align-right { justify-content: flex-end; }
+.fg-cell.fg-align-center { justify-content: center; }
+.fg-cell-focused { outline: 2px solid var(--fg-focus); outline-offset: -2px; border-radius: 2px; }
+.fg-cell-select, .fg-header-select { justify-content: center; padding: 0; }
+.fg-checkbox { width: 15px; height: 15px; margin: 0; accent-color: var(--fg-accent); cursor: pointer; }
+.fg-summary { display: flex; flex: none; background: var(--fg-header-bg); font-weight: 600; }
+.fg-summary-top { border-bottom: 1px solid var(--fg-border); }
+.fg-summary-bottom { border-top: 1px solid var(--fg-border); }
+.fg-summary-pane { position: relative; overflow: hidden; flex: none; }
+.fg-summary-pane-center { flex: 1 1 0; min-width: 0; }
+.fg-summary-pane-left { border-right: 1px solid var(--fg-border); }
+.fg-summary-pane-right { border-left: 1px solid var(--fg-border); }
+.fg-summary-inner { position: relative; will-change: transform; }
+.fg-summary-row, .fg-summary-row:hover { background: var(--fg-header-bg); font-weight: 600; }
+.fg-summary-label { color: var(--fg-muted); }
+.fg-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; color: var(--fg-muted); pointer-events: none; }
+.fg-menu {
+  position: fixed; z-index: 10000; width: 248px; padding: 6px; border-radius: 10px; overflow: auto; overscroll-behavior: contain;
+  font: var(--fg-font-size)/1.4 var(--fg-font); color: var(--fg-fg); background: var(--fg-popup-bg);
+  border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow);
+}
+.fg-menu-section { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
+.fg-menu-section + .fg-menu-section { border-top: 1px solid var(--fg-border); }
+.fg-menu-item { text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.fg-menu-item:hover, .fg-menu-item:focus-visible { background: var(--fg-row-hover); outline: none; }
+.fg-menu-title { padding: 4px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
+.fg-filter { gap: 6px; padding: 6px 4px; }
+.fg-input, .fg-filter-op {
+  width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--fg-border); border-radius: 6px;
+  background: var(--fg-input-bg); color: inherit; font: inherit;
+}
+.fg-input:focus, .fg-filter-op:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
+/* every select in the grid, its menus and dialogs: a drawn chevron with room on the right */
+.fg-root select:not([multiple]):not([size]), .fg-menu select:not([multiple]):not([size]) {
+  appearance: none; -webkit-appearance: none; padding-right: 26px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
+}
+.fg-set-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
+.fg-set-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fg-set-item:hover { background: var(--fg-row-hover); }
+.fg-set-all { font-weight: 600; }
+.fg-set-more { padding: 4px 6px; color: var(--fg-muted); }
+.fg-menu-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }
+.fg-btn { height: 28px; padding: 0 12px; border: 1px solid var(--fg-border); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.fg-btn:hover { background: var(--fg-row-hover); }
+.fg-btn-primary { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
+.fg-btn-primary:hover { background: var(--fg-accent); filter: brightness(1.08); }
+.fg-sidebar { display: flex; flex: none; border-left: 1px solid var(--fg-border); background: var(--fg-header-bg); }
+.fg-sidebar-panel { width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--fg-border); background: var(--fg-bg); }
+.fg-sidebar-tabs { width: 28px; display: flex; flex-direction: column; }
+.fg-sidebar-tab {
+  writing-mode: vertical-rl; padding: 12px 0; border: 0; background: none; color: var(--fg-header-fg);
+  font: 600 var(--fg-font-size) var(--fg-font); cursor: pointer;
+}
+.fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset 2px 0 var(--fg-accent); }
+.fg-sidebar-open .fg-sidebar-tabs { width: 32px; gap: 4px; padding: 8px 4px 8px 0; }
+.fg-sidebar-open .fg-sidebar-tab {
+  position: relative; margin-left: -1px; padding: 14px 0; border: 1px solid var(--fg-border); border-left-color: transparent;
+  border-radius: 0 7px 7px 0; background: var(--fg-header-bg); color: var(--fg-muted);
+}
+.fg-sidebar-open .fg-sidebar-tab:hover { color: var(--fg-header-fg); background: var(--fg-row-hover); }
+.fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] {
+  background: var(--fg-bg); color: var(--fg-accent); border-left-color: var(--fg-bg); box-shadow: inset -3px 0 var(--fg-accent); z-index: 1;
+}
+.fg-sidebar-open .fg-sidebar-tab:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: -2px; }
+.fg-chooser { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; flex: 1; }
+.fg-chooser-dialog { width: 280px; }
+.fg-chooser-dialog .fg-chooser { max-height: 420px; }
+.fg-chooser-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0 0; }
+.fg-chooser-close { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font-size: 18px; cursor: pointer; }
+.fg-chooser-close:hover { background: var(--fg-row-hover); color: var(--fg-fg); }
+.fg-chooser-all { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-weight: 600; cursor: pointer; }
+.fg-chooser-list { position: relative; overflow: auto; flex: 1; min-height: 0; }
+.fg-chooser-item { display: flex; align-items: center; gap: 6px; height: 28px; padding-right: 6px; border-radius: 6px; white-space: nowrap; }
+.fg-chooser-item:hover { background: var(--fg-row-hover); }
+.fg-chooser-item.fg-dragging { opacity: .45; }
+.fg-chooser-group > .fg-chooser-label { font-weight: 600; }
+.fg-chooser-handle { color: var(--fg-muted); cursor: grab; letter-spacing: -3px; padding: 0 4px 0 0; user-select: none; }
+.fg-chooser-caret { width: 16px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; padding: 0; }
+.fg-chooser-label { overflow: hidden; text-overflow: ellipsis; }
+.fg-chooser-pin { margin-left: auto; color: var(--fg-muted); font-size: 11px; }
+.fg-chooser-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); pointer-events: none; }
+
+/* ── Korean-style themes: simple lines, centered headers ─────────────────── */
+.fg-theme-board, .fg-theme-erp, .fg-theme-excel, .fg-theme-classic {
+  --fg-font: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
+  --fg-header-label-flex: 1 1 auto; --fg-header-text-align: center;
+  --fg-popup-bg: #ffffff; --fg-input-bg: #ffffff; --fg-accent-fg: #ffffff; --fg-shadow: 0 8px 24px rgba(0, 0, 0, .14);
+}
+/* 게시판형: thick top rule, light grey header, horizontal lines only */
+.fg-theme-board {
+  --fg-radius: 0; --fg-bg: #ffffff; --fg-fg: #222222; --fg-muted: #767676;
+  --fg-header-bg: #f7f7f7; --fg-header-fg: #222222; --fg-border: #dddddd; --fg-row-border: #e5e5e5;
+  --fg-row-odd: #ffffff; --fg-row-hover: #f6f8fb; --fg-row-selected: #eef3fc;
+  --fg-accent: #1f5bd6; --fg-focus: #1f5bd6;
+  --fg-top-border: 2px solid #222222; --fg-header-border: 1px solid #bbbbbb; --fg-header-line: transparent;
+}
+.fg-theme-board.fg-root { border-left: 0; border-right: 0; }
+/* 관리자·ERP형: every cell bordered, blue-grey header, compact */
+.fg-theme-erp {
+  --fg-font-size: 12px; --fg-radius: 2px; --fg-cell-px: 8px;
+  --fg-bg: #ffffff; --fg-fg: #333333; --fg-muted: #7a8494;
+  --fg-header-bg: #eef2f7; --fg-header-fg: #2b3442; --fg-border: #c5ceda; --fg-row-border: #dde3eb;
+  --fg-row-odd: #fafbfd; --fg-row-hover: #eef5ff; --fg-row-selected: #fff6d5;
+  --fg-accent: #2f6fde; --fg-focus: #2f6fde;
+  --fg-col-line: inset -1px 0 #dde3eb; --fg-header-line: #c5ceda;
+}
+/* 엑셀형: gridlines, plain grey header, green focus */
+.fg-theme-excel {
+  --fg-radius: 0; --fg-cell-px: 8px;
+  --fg-bg: #ffffff; --fg-fg: #1f1f1f; --fg-muted: #6e6e6e;
+  --fg-header-bg: #f3f3f3; --fg-header-fg: #444444; --fg-header-weight: 500;
+  --fg-border: #d4d4d4; --fg-row-border: #e2e2e2;
+  --fg-row-odd: #ffffff; --fg-row-hover: #f7f7f7; --fg-row-selected: #e6f2ea;
+  --fg-accent: #107c41; --fg-focus: #107c41;
+  --fg-col-line: inset -1px 0 #e2e2e2; --fg-header-line: #d4d4d4;
+}
+/* 진한 헤더형: calm navy header with white text */
+.fg-theme-classic {
+  --fg-radius: 4px; --fg-bg: #ffffff; --fg-fg: #2a2f37; --fg-muted: #6b7380;
+  --fg-header-bg: #3d4b63; --fg-header-fg: #ffffff; --fg-border: #cfd5de; --fg-row-border: #e3e7ed;
+  --fg-row-odd: #f8f9fb; --fg-row-hover: #eef2f8; --fg-row-selected: #e2e9f5;
+  --fg-accent: #3d4b63; --fg-focus: #3d6bb3;
+  --fg-col-line: inset -1px 0 #e3e7ed; --fg-header-line: #56657e;
+}
+.fg-theme-classic .fg-menu-btn { color: #c9d2e0; }
+.fg-theme-classic .fg-menu-btn:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
+.fg-theme-classic .fg-sort-icon, .fg-theme-classic .fg-menu-btn.fg-filter-active { color: #ffd166; }
+.fg-theme-classic .fg-sidebar-tab { color: #c9d2e0; }
+.fg-theme-classic .fg-sidebar-tab[aria-expanded="true"] { color: #ffd166; box-shadow: inset 2px 0 #ffd166; }
+.fg-theme-classic .fg-sidebar-open .fg-sidebar-tab[aria-expanded="true"] { color: var(--fg-accent); box-shadow: inset -3px 0 var(--fg-accent); }
+.fg-theme-board .fg-header-cell, .fg-theme-erp .fg-header-cell, .fg-theme-excel .fg-header-cell, .fg-theme-classic .fg-header-cell { flex-direction: row; justify-content: center; }
+.fg-theme-board .fg-menu-btn, .fg-theme-erp .fg-menu-btn, .fg-theme-excel .fg-menu-btn, .fg-theme-classic .fg-menu-btn {
+  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0;
+}
+.fg-theme-board .fg-header-label, .fg-theme-erp .fg-header-label, .fg-theme-excel .fg-header-label, .fg-theme-classic .fg-header-label { flex: 0 1 auto; }
+
+/* ── cell ranges, context menu, toast ───────────────────────────────── */
+.fg-cell-range { background: var(--fg-range-bg, color-mix(in srgb, var(--fg-accent) 13%, transparent)); }
+.fg-range-dragging, .fg-range-dragging * { user-select: none; cursor: cell; }
+.fg-context-menu { width: 236px; }
+.fg-cm-item { display: flex; align-items: center; gap: 12px; width: 100%; }
+.fg-cm-item:disabled { opacity: .45; cursor: default; background: none; }
+.fg-cm-label { flex: 1; }
+.fg-cm-shortcut { color: var(--fg-muted); font-size: .9em; }
+.fg-cm-sep { height: 1px; margin: 4px 2px; background: var(--fg-border); }
+.fg-toast {
+  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; max-width: 90%;
+  padding: 8px 14px; border-radius: 8px; background: var(--fg-fg); color: var(--fg-bg); font-size: .95em; box-shadow: var(--fg-shadow);
+}
+
+/* ── editing ────────────────────────────────────────────────────────── */
+.fg-editor { position: absolute; z-index: 15; display: flex; background: var(--fg-bg); box-shadow: 0 0 0 2px var(--fg-focus), var(--fg-shadow); border-radius: 2px; }
+.fg-editor-control { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; padding: 0 var(--fg-cell-px); background: transparent; color: var(--fg-fg); font: inherit; }
+textarea.fg-editor-control { padding-top: 8px; resize: none; }
+.fg-editor-msg { position: absolute; left: -2px; top: 100%; margin-top: 4px; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #c2361f; color: #fff; font-size: .9em; }
+.fg-editor-msg:empty { display: none; }
+.fg-editor-invalid { box-shadow: 0 0 0 2px #c2361f, var(--fg-shadow); }
+.fg-cell-dirty { background-image: linear-gradient(225deg, var(--fg-dirty, #f2a900) 6px, transparent 6px); }
+.fg-row-created { box-shadow: inset 3px 0 0 var(--fg-accent); }
+
+/* ── v0.3: merge, pinned rows, status bar, fill handle, find, header wrap ── */
+.fg-cell-merged { z-index: 1; background: var(--fg-bg); align-items: flex-start; padding-top: calc((var(--fg-font-size, 13px) * 2.75 - 1.4em) / 2 + var(--fg-merge-shift, 0px)); border-bottom: 1px solid var(--fg-row-border); box-shadow: var(--fg-col-line, none); }
+.fg-row-odd .fg-cell-merged { background: var(--fg-bg); }
+.fg-cell-merge-hidden { visibility: hidden; }
+.fg-pinned-rows { display: flex; flex: none; background: var(--fg-bg); }
+.fg-pinned-top { border-bottom: 2px solid var(--fg-border); }
+.fg-pinned-bottom { border-top: 2px solid var(--fg-border); }
+.fg-section-pane { position: relative; overflow: hidden; flex: none; }
+.fg-section-pane-center { flex: 1 1 0; min-width: 0; }
+.fg-section-pane-left { border-right: 1px solid var(--fg-border); }
+.fg-section-pane-right { border-left: 1px solid var(--fg-border); }
+.fg-section-inner { position: relative; will-change: transform; }
+.fg-row-pinned, .fg-row-pinned:hover { background: var(--fg-row-odd); font-weight: 500; }
+.fg-statusbar { display: flex; flex: none; justify-content: space-between; gap: 16px; padding: 6px var(--fg-cell-px); border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-muted); font-size: .92em; white-space: nowrap; overflow: hidden; }
+.fg-status-aggs { color: var(--fg-fg); font-variant-numeric: tabular-nums; white-space: pre; }
+.fg-fill-handle { position: absolute; z-index: 16; width: 8px; height: 8px; background: var(--fg-accent); border: 1px solid var(--fg-bg); cursor: crosshair; }
+.fg-fill-preview { position: absolute; z-index: 15; border: 1px dashed var(--fg-accent); pointer-events: none; }
+.fg-cell-match { background: color-mix(in srgb, #f2a900 22%, transparent); }
+.fg-cell-match-current { background: #f2a900; color: #1a1300; }
+.fg-findbar { position: absolute; top: 6px; right: 18px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; background: var(--fg-popup-bg); border: 1px solid var(--fg-border); box-shadow: var(--fg-shadow); }
+.fg-findbar .fg-input { width: 200px; height: 28px; }
+.fg-findbar-count { min-width: 56px; text-align: center; color: var(--fg-muted); font-size: .9em; font-variant-numeric: tabular-nums; }
+.fg-findbar-btn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--fg-fg); cursor: pointer; }
+.fg-findbar-btn:hover { background: var(--fg-row-hover); }
+.fg-header-wrap .fg-header-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.25; }
+
+/* grouping, tree data, master/detail, row drag */
+.fg-group-panel {
+  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px;
+  background: var(--fg-bg); border-bottom: 1px solid var(--fg-border); color: var(--fg-muted, #6b7280);
+}
+.fg-group-panel-over { background: var(--fg-row-hover); outline: 2px dashed var(--fg-accent); outline-offset: -4px; }
+.fg-group-hint { font-size: .92em; }
+.fg-group-chip {
+  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--fg-border);
+  border-radius: 999px; background: var(--fg-header-bg); color: var(--fg-header-fg); cursor: grab; user-select: none;
+}
+.fg-group-chip.fg-dragging { opacity: .5; }
+.fg-group-chip-remove {
+  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
+  font: inherit; line-height: 1; cursor: pointer;
+}
+.fg-group-chip-remove:hover { background: var(--fg-row-hover); }
+.fg-group-sep { opacity: .6; }
+.fg-row-group, .fg-row-group:hover { background: var(--fg-header-bg); font-weight: 600; }
+.fg-group-cell { overflow: visible; z-index: 1; padding-left: calc(4px + var(--fg-level, 0) * 16px); }
+.fg-group-label { white-space: nowrap; }
+.fg-cell-agg { color: var(--fg-header-fg); }
+.fg-group-toggle, .fg-tree-toggle, .fg-detail-toggle {
+  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-right: 4px;
+  padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer;
+}
+.fg-group-toggle:hover, .fg-tree-toggle:hover, .fg-detail-toggle:hover { background: var(--fg-row-hover); }
+.fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: transform .12s ease; }
+.fg-expanded svg { transform: rotate(90deg); }
+.fg-tree-spacer { display: inline-block; flex: none; width: 24px; }
+.fg-cell-lead { padding-left: calc(4px + var(--fg-level, 0) * 16px); }
+.fg-row-detail, .fg-row-detail:hover { background: var(--fg-bg); }
+.fg-detail {
+  position: absolute; top: 0; bottom: 0; box-sizing: border-box; overflow: auto; padding: 10px 14px;
+  border-bottom: 1px solid var(--fg-row-border); background: var(--fg-bg);
+}
+.fg-cell-drag { justify-content: center; padding: 0; cursor: grab; }
+.fg-drag-handle { color: var(--fg-muted, #9aa1ad); cursor: grab; letter-spacing: -1px; user-select: none; }
+.fg-drag-handle.fg-drag-disabled { opacity: .35; cursor: not-allowed; }
+.fg-row-dragging, .fg-row-dragging * { cursor: grabbing !important; }
+.fg-row-drop-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg-accent); z-index: 6; pointer-events: none; }
+.fg-row-drop-marker.fg-row-drop-inside { background: color-mix(in srgb, var(--fg-accent) 8%, transparent); box-shadow: inset 0 0 0 2px var(--fg-accent); }
+@media (prefers-reduced-motion: reduce) { .fg-group-toggle svg, .fg-tree-toggle svg, .fg-detail-toggle svg { transition: none; } }
+.fg-tree-loading svg { animation: fg-spin .8s linear infinite; opacity: .6; }
+@keyframes fg-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .fg-tree-loading svg { animation: none; } }
+
+/* pagination and server rows */
+.fg-pager {
+  display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 38px; padding: 4px 10px;
+  border-top: 1px solid var(--fg-border); background: var(--fg-header-bg); color: var(--fg-header-fg); font-variant-numeric: tabular-nums;
+}
+.fg-pager-spacer { flex: 1; }
+.fg-pager-size-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
+.fg-pager-size { font: inherit; color: var(--fg-fg); background: var(--fg-input-bg); border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px; }
+.fg-pager-page { padding: 0 8px; }
+.fg-pager-btn {
+  min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px;
+  background: transparent; color: inherit; font: inherit; font-size: 1.1em; line-height: 1; cursor: pointer;
+}
+.fg-pager-btn:hover:not(:disabled) { background: var(--fg-row-hover); border-color: var(--fg-border); }
+.fg-pager-btn:disabled { opacity: .35; cursor: default; }
+.fg-skeleton {
+  display: block; width: 70%; height: .8em; border-radius: 4px;
+  background: linear-gradient(90deg, var(--fg-row-border) 25%, var(--fg-border) 50%, var(--fg-row-border) 75%);
+  background-size: 200% 100%; animation: fg-shimmer 1.2s ease-in-out infinite;
+}
+@keyframes fg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
+@media (prefers-reduced-motion: reduce) { .fg-skeleton { animation: none; } }
+
+/* filters tool panel */
+.fg-filters-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
+.fg-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--fg-border); }
+.fg-filters-title { font-weight: 600; }
+.fg-filters-clear { font-size: .9em; padding: 2px 8px; }
+.fg-filters-list { overflow: auto; flex: 1; }
+.fg-filters-item { border-bottom: 1px solid var(--fg-row-border); }
+.fg-filters-item > summary { padding: 7px 10px; cursor: pointer; list-style-position: inside; }
+.fg-filters-item > summary:hover { background: var(--fg-row-hover); }
+.fg-filters-item.fg-filter-on > summary { color: var(--fg-accent); font-weight: 600; }
+.fg-filters-item.fg-filter-on > summary::after { content: ' ●'; font-size: .7em; vertical-align: middle; }
+.fg-filters-item .fg-filter { border: 0; padding: 4px 10px 10px; }
+
+/* pivot panel */
+.fg-pivot-panel { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; padding: 8px 10px; }
+.fg-pivot-mode { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-weight: 600; border-bottom: 1px solid var(--fg-border); }
+.fg-pivot-zone { padding: 8px 0; border-bottom: 1px solid var(--fg-row-border); }
+.fg-pivot-zone-title { font-size: .9em; color: var(--fg-muted); margin-bottom: 6px; }
+.fg-pivot-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
+.fg-pivot-chips .fg-group-chip { cursor: default; }
+.fg-pivot-agg, .fg-pivot-add {
+  font: inherit; font-size: .92em; color: var(--fg-fg); background: var(--fg-input-bg);
+  border: 1px solid var(--fg-border); border-radius: 4px; padding: 2px 4px;
+}
+.fg-pivot-add { width: 100%; }
+
+/* charts */
+.fg-chart-panel {
+  position: absolute; top: 12px; right: 12px; z-index: 20; width: min(640px, calc(100% - 24px));
+  background: var(--fg-popup-bg); border: 1px solid var(--fg-border); border-radius: 8px; box-shadow: var(--fg-shadow);
+  display: flex; flex-direction: column;
+}
+.fg-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--fg-border); }
+.fg-chart-type {
+  padding: 3px 8px; border: 1px solid var(--fg-border); border-radius: 999px; background: transparent;
+  color: var(--fg-fg); font: inherit; font-size: .88em; cursor: pointer;
+}
+.fg-chart-type[aria-pressed="true"] { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-accent-fg); }
+.fg-chart-spacer { flex: 1; }
+.fg-chart-body { padding: 4px 8px 8px; }
+.fg-chart { display: block; width: 100%; height: auto; font: 11px var(--fg-font); color: var(--fg-fg); }
+.fg-chart text { fill: var(--fg-muted); }
+.fg-chart .fg-chart-title { fill: var(--fg-fg); font-size: 14px; font-weight: 600; }
+.fg-chart-grid { stroke: var(--fg-row-border); }
+.fg-chart-zero { stroke: var(--fg-border); stroke-width: 1.5; }
+.fg-chart-legend-item text { fill: var(--fg-fg); }
+.fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: opacity .12s; }
+.fg-chart-plot:hover .fg-chart-bar:not(:hover), .fg-chart:hover .fg-chart-slice:not(:hover) { opacity: .55; }
+.fg-chart-slice { stroke: var(--fg-popup-bg, #fff); stroke-width: 1.5; }
+@media (prefers-reduced-motion: reduce) { .fg-chart-bar, .fg-chart-slice, .fg-chart-point { transition: none; } }
+
+/* free-use badge (unlicensed company domains) */
+.fg-free-badge {
+  position: absolute; right: 22px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(14, 23, 38, .15);
+  box-shadow: 0 2px 8px rgba(14, 23, 38, .12); color: #0E1726; font: 600 11px/1.2 var(--fg-font); text-decoration: none; opacity: .9;
+}
+.fg-free-badge:hover { opacity: 1; }
+.fg-free-badge svg { flex: none; }
+
+/* column spans */
+.fg-cell-span-hidden { visibility: hidden; }
+.fg-cell-colspan { z-index: 1; background: inherit; }
+
+/* per-cell locks */
+.fg-cell-readonly { color: var(--fg-muted); background-image: linear-gradient(rgba(14, 23, 38, .025), rgba(14, 23, 38, .025)); }
+.fg-cell-select-locked .fg-checkbox { cursor: not-allowed; opacity: .45; }
+
+/* wrapped cells (autoRowHeight grows the row to fit) */
+.fg-cell-wrap { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }
+
+/* right-to-left: mirror the grid area, then turn every cell back so text reads normally */
+/* the root keeps dir=rtl (side bar on the left); the grid inside is laid out ltr and mirrored */
+.fg-rtl .fg-main { transform: scaleX(-1); direction: ltr; }
+.fg-rtl .fg-cell, .fg-rtl .fg-header-cell, .fg-rtl .fg-statusbar, .fg-rtl .fg-pager, .fg-rtl .fg-group-panel,
+.fg-rtl .fg-overlay, .fg-rtl .fg-find, .fg-rtl .fg-chart-panel, .fg-rtl .fg-row-detail .fg-detail { transform: scaleX(-1); direction: rtl; }
+.fg-rtl .fg-sidebar { direction: rtl; border-left: 0; border-right: 1px solid var(--fg-border); }
+
+/* touch */
+.fg-body { touch-action: pan-x pan-y; }
+@media (pointer: coarse) {
+  .fg-editor input, .fg-editor select, .fg-editor textarea { font-size: 16px; } /* no zoom-in on focus in mobile Safari */
+}
+
+/* card view for narrow screens */
+.fg-card-mode .fg-header, .fg-card-mode .fg-body, .fg-card-mode .fg-grid, .fg-card-mode .fg-summary, .fg-card-mode .fg-pinned-rows { display: none; }
+.fg-cards { flex: 1; min-height: 0; overflow: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
+.fg-cards-canvas { position: relative; }
+.fg-card {
+  position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 10px 14px; overflow: hidden;
+  border: 1px solid var(--fg-border); border-radius: 10px; background: var(--fg-bg); box-shadow: 0 1px 2px rgba(14, 23, 38, .06);
+}
+.fg-card-selected { border-color: var(--fg-accent); background: var(--fg-row-selected); }
+.fg-card-other { background: var(--fg-header-bg); font-weight: 600; display: flex; align-items: center; }
+.fg-card-head { display: flex; align-items: center; gap: 8px; height: var(--fg-card-line, 27px); color: var(--fg-muted); font-size: .92em; }
+.fg-card-line { display: grid; grid-template-columns: minmax(80px, 38%) 1fr; gap: 10px; align-items: center; height: var(--fg-card-line, 27px); }
+.fg-card-label { color: var(--fg-muted); font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fg-card-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* row numbers */
+.fg-cell-rownum, .fg-header-rownum { justify-content: center; color: var(--fg-muted); font-variant-numeric: tabular-nums; cursor: default; }
+.fg-cell-rownum { background: var(--fg-header-bg); }
+
+/* filter row */
+.fg-filter-row { position: relative; border-top: 1px solid var(--fg-border); will-change: transform; }
+.fg-filter-cell { position: absolute; top: 0; box-sizing: border-box; display: flex; align-items: center; padding: 3px 4px; border-right: 1px solid var(--fg-border); }
+.fg-filter-input { width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--fg-border); border-radius: 4px; padding: 0 6px; background: var(--fg-bg); color: var(--fg-fg); font: inherit; font-size: .92em; }
+.fg-filter-input:focus { outline: 2px solid var(--fg-focus); outline-offset: -1px; }
+.fg-filter-input::placeholder { color: var(--fg-muted); opacity: .7; }
+.fg-filter-active .fg-filter-input { border-color: var(--fg-accent); }
+.fg-filter-bad.fg-filter-input { border-color: #dc2626; }
+.fg-rtl .fg-filter-cell { transform: scaleX(-1); direction: rtl; }
+
+/* tooltips */
+.fg-tooltip { position: fixed; z-index: 1000; max-width: 360px; padding: 6px 9px; border-radius: 6px; background: #1f2430; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
+.fg-tooltip.fg-theme-dark { background: #e6e9f0; color: #11141b; }
+
+/* cells changed by applyTransaction */
+.fg-cell-flash { animation: fg-flash var(--fg-flash-duration, 1s) ease-out; }
+@keyframes fg-flash { from { background: color-mix(in srgb, var(--fg-accent) 35%, transparent); } to { background: transparent; } }
+.fg-cell-flash-up { animation-name: fg-flash-up; }
+.fg-cell-flash-down { animation-name: fg-flash-down; }
+@keyframes fg-flash-up { from { background: color-mix(in srgb, var(--fg-up, #16a34a) 32%, transparent); } to { background: transparent; } }
+@keyframes fg-flash-down { from { background: color-mix(in srgb, var(--fg-down, #dc2626) 32%, transparent); } to { background: transparent; } }
+@media (prefers-reduced-motion: reduce) { .fg-cell-flash { animation: none; outline: 1px solid var(--fg-accent); outline-offset: -1px; }
+  .fg-cell-flash-up { outline-color: var(--fg-up, #16a34a); }
+  .fg-cell-flash-down { outline-color: var(--fg-down, #dc2626); } }
+
+/* editType 'row': the row being edited */
+.fg-row-editing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fg-accent) 45%, transparent); background: color-mix(in srgb, var(--fg-accent) 5%, var(--fg-bg)); }
+
+/* collapsible column groups */
+.fg-colgroup-toggle { margin-left: 6px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--fg-border); border-radius: 4px; background: var(--fg-bg); color: var(--fg-muted); font: 600 12px/1 var(--fg-font); cursor: pointer; flex: none; }
+.fg-colgroup-toggle:hover { color: var(--fg-fg); border-color: var(--fg-muted); }
+
+/* two conditions in a column filter */
+.fg-filter-cond { display: flex; flex-direction: column; gap: 6px; }
+.fg-filter-join { display: flex; gap: 14px; padding: 2px 2px 0; font-size: .92em; color: var(--fg-muted); }
+.fg-filter-join label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
+
+/* autoHeight: grow with the rows */
+.fg-root.fg-auto-height { height: auto; }
+.fg-auto-height .fg-main, .fg-auto-height .fg-grid { flex: none; }
+.fg-auto-height .fg-body { flex: none; min-height: 0; }
+.fg-auto-height .fg-body-pane-center { overflow-y: hidden; }
+
+.fg-sparkline { display: block; overflow: visible; }
+
+.fg-overlay.fg-overlay-custom { pointer-events: auto; }
+
+/* density */
+.fg-density-compact { --fg-cell-px: 7px; }
+.fg-density-comfortable { --fg-cell-px: 14px; }
+
+/* conditional formats */
+.fg-cf-bar { background-image: linear-gradient(to right, transparent var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-from), color-mix(in srgb, var(--fg-bar-color) 38%, transparent) var(--fg-bar-to), transparent var(--fg-bar-to)); background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 50%; }
+.fg-cf-icon { display: inline-block; margin-inline-end: 6px; font-size: .9em; line-height: 1; }
+.fg-cf-dialog { width: 340px; }
+.fg-cf-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
+.fg-cf-rule { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid var(--fg-border); border-radius: 6px; }
+.fg-cf-rule-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fg-cf-sample { flex: none; width: 34px; height: 18px; border-radius: 4px; border: 1px solid var(--fg-border); display: grid; place-items: center; font-size: 11px; }
+.fg-cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.fg-cf-form > .fg-cf-wide { grid-column: 1 / -1; }
+.fg-cf-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
+.fg-cf-swatch { width: 30px; height: 22px; border-radius: 5px; border: 1px solid var(--fg-border); cursor: pointer; font: 600 11px/1 var(--fg-font); padding: 0; }
+.fg-cf-swatch[aria-pressed="true"] { outline: 2px solid var(--fg-accent); outline-offset: 1px; }
+.fg-cf-empty { color: var(--fg-muted); padding: 4px 0; }
+
+/* AI assistant */
+.fg-ai-panel { width: 360px; display: flex; flex-direction: column; gap: 8px; }
+.fg-ai-log { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
+.fg-ai-log:empty { display: none; }
+.fg-ai-msg { padding: 7px 10px; border-radius: 10px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
+.fg-ai-user { align-self: flex-end; background: var(--fg-accent); color: var(--fg-accent-fg); border-bottom-right-radius: 3px; }
+.fg-ai-ai { align-self: flex-start; background: var(--fg-header-bg); border: 1px solid var(--fg-border); border-bottom-left-radius: 3px; }
+.fg-ai-error { align-self: flex-start; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
+.fg-ai-wait { color: var(--fg-muted); }
+.fg-ai-note { margin-top: 4px; font-size: .9em; color: var(--fg-muted); }
+.fg-ai-undo { margin-top: 6px; height: 24px; padding: 0 10px; }
+.fg-ai-form { display: flex; gap: 6px; align-items: flex-end; }
+.fg-ai-input { flex: 1; resize: vertical; min-height: 40px; max-height: 140px; padding: 6px 8px; font: inherit; }
+.fg-ai-tips { display: flex; flex-wrap: wrap; gap: 6px; }
+.fg-ai-tip { border: 1px solid var(--fg-border); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .92em; padding: 3px 10px; cursor: pointer; }
+.fg-ai-tip:hover { background: var(--fg-row-hover); }