/*
  Tabler 테마 (2026-09-26) — preview.tabler.io 의 생김새를 옮긴다.

  [어떻게 입히나]

  DevExpress 부품은 Bootstrap 테마(`bootstrap-external.bs5.min.css`)로 그린다.
  그 테마는 색을 `--bs-*` 변수에서 읽으므로, 여기서 그 변수를 **Tabler 값으로
  채우면** 그리드·편집기·팝업이 한꺼번에 Tabler 색을 따른다. 모서리·높이·여백은
  DevExpress 자체 변수(`--dxbl-*`)로 준다.

  치수와 색은 눈대중이 아니라 Tabler 1.6 미리보기에서 잰 값이다.

    바탕         밝게 base-50  · 어둡게 base-900
    카드·판      밝게 #fff     · 어둡게 base-800
    입력 칸      밝게 #fff     · 어둡게 base-900 (카드보다 한 단 어둡다)
    글자         밝게 base-700 · 어둡게 base-200,  흐린 글자 base-500 / base-400
    테두리       밝게 base-200 · 어둡게 base-700,  카드 테두리는 반투명
    모서리       6px (카드 8px), 서랍의 「모서리」 배율을 곱한다
    입력·단추    높이 40px, 라벨은 칸 위 14px/500, 칸 사이 16px
                 (**조회 판만 라벨을 칸 앞에** 둔다 — `.commsch__item`)
    표 머리      12px/500 대문자, 흐린 글자, 옅은 바탕

  [이 파일이 맨 마지막에 실린다]

  JSiniHead 가 app.css · 모듈 CSS 뒤에 싣는다. 옛 규칙과 같은 자릿수면 이 파일이 이긴다.
*/

/* ── 1. 바탕 톤 팔레트 (Tailwind 회색 계열 — Tabler 가 그대로 쓴다) ── */

:root,
:root[data-tb-base='neutral'] {
  --tb-50: #fafafa; --tb-100: #f5f5f5; --tb-200: #e5e5e5; --tb-300: #d4d4d4;
  --tb-400: #a3a3a3; --tb-500: #737373; --tb-600: #525252; --tb-700: #404040;
  --tb-800: #262626; --tb-900: #171717; --tb-950: #0a0a0a;
}

:root[data-tb-base='slate'] {
  --tb-50: #f8fafc; --tb-100: #f1f5f9; --tb-200: #e2e8f0; --tb-300: #cbd5e1;
  --tb-400: #94a3b8; --tb-500: #64748b; --tb-600: #475569; --tb-700: #334155;
  --tb-800: #1e293b; --tb-900: #0f172a; --tb-950: #020617;
}

:root[data-tb-base='gray'] {
  --tb-50: #f9fafb; --tb-100: #f3f4f6; --tb-200: #e5e7eb; --tb-300: #d1d5db;
  --tb-400: #9ca3af; --tb-500: #6b7280; --tb-600: #4b5563; --tb-700: #374151;
  --tb-800: #1f2937; --tb-900: #111827; --tb-950: #030712;
}

:root[data-tb-base='zinc'] {
  --tb-50: #fafafa; --tb-100: #f4f4f5; --tb-200: #e4e4e7; --tb-300: #d4d4d8;
  --tb-400: #a1a1aa; --tb-500: #71717a; --tb-600: #52525b; --tb-700: #3f3f46;
  --tb-800: #27272a; --tb-900: #18181b; --tb-950: #09090b;
}

:root[data-tb-base='stone'] {
  --tb-50: #fafaf9; --tb-100: #f5f5f4; --tb-200: #e7e5e4; --tb-300: #d6d3d1;
  --tb-400: #a8a29e; --tb-500: #78716c; --tb-600: #57534e; --tb-700: #44403c;
  --tb-800: #292524; --tb-900: #1c1917; --tb-950: #0c0a09;
}

/* ── 2. Tabler 토큰 ─────────────────────────────────────── */

:root {
  --tb-radius-scale: 1;
  --tb-radius: calc(6px * var(--tb-radius-scale));
  --tb-radius-lg: calc(8px * var(--tb-radius-scale));
  --tb-radius-sm: calc(4px * var(--tb-radius-scale));

  /* 강조색은 theme.js 가 `<html>` 에 적는다(--tb-primary · --tb-primary-rgb). */
  --tb-primary: #066fd1;
  --tb-primary-rgb: 6, 111, 209;
  --tb-primary-fg: #fff;
  --tb-primary-lt: rgba(var(--tb-primary-rgb), 0.1);
  --tb-primary-hover: color-mix(in srgb, var(--tb-primary) 88%, #000);

  --tb-green: #2fb344; --tb-green-rgb: 47, 179, 68;
  --tb-red: #d63939; --tb-red-rgb: 214, 57, 57;
  --tb-yellow: #f59f00; --tb-yellow-rgb: 245, 159, 0;
  --tb-azure: #4299e1; --tb-azure-rgb: 66, 153, 225;

  --tb-font: system-ui, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI',
    'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', Roboto, 'Helvetica Neue', sans-serif;

  --tb-control-h: 2.5rem;          /* 40px */
  --tb-control-py: 0.5625rem;      /* 9px — 글자 20px + 위아래 9px + 테두리 1px */
  --tb-control-px: 0.75rem;

  --tb-space-card: 1.25rem;        /* 카드 안쪽 20px */
  --tb-space-field: 1rem;          /* 칸 사이 16px */
}

:root[data-tb-radius='0'] { --tb-radius-scale: 0; }
:root[data-tb-radius='0.5'] { --tb-radius-scale: 0.5; }
:root[data-tb-radius='1'] { --tb-radius-scale: 1; }
:root[data-tb-radius='1.5'] { --tb-radius-scale: 1.5; }
:root[data-tb-radius='2'] { --tb-radius-scale: 2; }

:root,
:root[data-bs-theme='light'] {
  color-scheme: light;

  --tb-body-bg: var(--tb-50);
  --tb-surface: #ffffff;
  --tb-surface-2: var(--tb-50);              /* 표 머리 · 판 머리 */
  --tb-surface-3: var(--tb-100);             /* 누른 것 · 흐린 칸 */
  --tb-input-bg: #ffffff;
  --tb-text: var(--tb-700);
  --tb-heading: var(--tb-900);
  --tb-muted: var(--tb-500);
  --tb-border: var(--tb-200);
  --tb-border-soft: color-mix(in srgb, var(--tb-800) 12%, transparent);
  --tb-hover: color-mix(in srgb, var(--tb-800) 4%, transparent);
  --tb-shadow-card: 0 1px 2px 0 rgba(18, 18, 23, 0.05);
  --tb-shadow-input: 0 1px 2px 0 rgba(18, 18, 23, 0.05);
  --tb-shadow-dropdown: 0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06),
    0 8px 10px -5px rgba(0, 0, 0, 0.1);
  --tb-scrim: rgba(24, 24, 27, 0.24);
}

:root[data-bs-theme='dark'] {
  color-scheme: dark;

  --tb-body-bg: var(--tb-900);
  --tb-surface: var(--tb-800);
  --tb-surface-2: var(--tb-800);
  --tb-surface-3: var(--tb-700);
  --tb-input-bg: var(--tb-900);
  --tb-text: var(--tb-200);
  --tb-heading: #ffffff;
  --tb-muted: var(--tb-400);
  --tb-border: var(--tb-700);
  --tb-border-soft: rgba(128, 150, 172, 0.2);
  --tb-hover: rgba(255, 255, 255, 0.04);
  --tb-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.125);
  --tb-shadow-input: 0 1px 2px 0 rgba(0, 0, 0, 0.125);
  --tb-shadow-dropdown: 0 16px 24px 2px rgba(0, 0, 0, 0.3), 0 6px 30px 5px rgba(0, 0, 0, 0.25);
  --tb-scrim: rgba(0, 0, 0, 0.5);
  --tb-primary-lt: rgba(var(--tb-primary-rgb), 0.16);
}

/* ── 3. DevExpress 가 읽는 Bootstrap 변수 ──────────────────
   Bootstrap 은 `[data-bs-theme=dark]`(0,1,0)에 값을 두므로 `:root[…]`(0,2,0)로 이긴다. */

:root,
:root[data-bs-theme='light'],
:root[data-bs-theme='dark'] {
  --bs-font-sans-serif: var(--tb-font);
  --bs-body-font-family: var(--tb-font);
  --bs-body-font-size: var(--jsini-fs-base, 0.875rem);
  --bs-body-line-height: 1.4285;

  --bs-body-bg: var(--tb-surface);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--tb-text);
  --bs-emphasis-color: var(--tb-heading);
  --bs-secondary-color: var(--tb-muted);
  --bs-tertiary-color: var(--tb-muted);
  --bs-secondary-bg: var(--tb-surface-3);
  --bs-tertiary-bg: var(--tb-surface-2);
  --bs-border-color: var(--tb-border);
  --bs-border-color-translucent: var(--tb-border-soft);
  --bs-border-radius: var(--tb-radius);
  --bs-border-radius-sm: var(--tb-radius-sm);
  --bs-border-radius-lg: var(--tb-radius-lg);
  --bs-link-color: var(--tb-primary);
  --bs-link-color-rgb: var(--tb-primary-rgb);
  --bs-link-hover-color: var(--tb-primary-hover);
  --bs-heading-color: var(--tb-heading);

  --bs-primary: var(--tb-primary);
  --bs-primary-rgb: var(--tb-primary-rgb);
  --bs-secondary: var(--tb-muted);
  --bs-success: var(--tb-green);
  --bs-success-rgb: var(--tb-green-rgb);
  --bs-danger: var(--tb-red);
  --bs-danger-rgb: var(--tb-red-rgb);
  --bs-warning: var(--tb-yellow);
  --bs-warning-rgb: var(--tb-yellow-rgb);
  --bs-info: var(--tb-azure);
  --bs-info-rgb: var(--tb-azure-rgb);

  --bs-gray-100: var(--tb-100);
  --bs-gray-200: var(--tb-200);
  --bs-gray-300: var(--tb-300);
  --bs-gray-400: var(--tb-400);
  --bs-gray-500: var(--tb-500);
  --bs-gray-600: var(--tb-600);
  --bs-gray-700: var(--tb-700);
  --bs-gray-800: var(--tb-800);
  --bs-gray-900: var(--tb-900);
  --bs-gray: var(--tb-500);
  --bs-light: var(--tb-surface-3);
  --bs-dark: var(--tb-800);
}

:root[data-bs-theme='dark'] {
  --bs-body-bg-rgb: 38, 38, 38;
}

/* ── 4. 우리 토큰을 Tabler 에 잇는다 ─────────────────────
   app.css 와 모듈 CSS 는 전부 `--jsini-*` 로 색을 적는다. 여기서 뿌리를 갈면
   옛 규칙들이 그대로 Tabler 색을 따른다. */

:root,
:root[data-theme='light'],
:root[data-theme='dark'] {
  --jsini-bg: var(--tb-body-bg);
  --jsini-surface: var(--tb-surface);
  --jsini-surface-raised: var(--tb-surface);
  --jsini-surface-hover: var(--tb-hover);
  --jsini-border: var(--tb-border);
  --jsini-text: var(--tb-text);
  --jsini-text-muted: var(--tb-muted);
  --jsini-accent: var(--tb-primary);
  --jsini-accent-soft: var(--tb-primary-lt);
  --jsini-success-soft: rgba(var(--tb-green-rgb), 0.12);
  --jsini-warning-soft: rgba(var(--tb-yellow-rgb), 0.14);
  --jsini-danger-soft: rgba(var(--tb-red-rgb), 0.12);
  --jsini-field-label-bg: var(--tb-surface);
  --jsini-shadow-card: var(--tb-shadow-card);
  --jsini-field-h: var(--tb-control-h);
  --jsini-surface-muted: var(--tb-surface-2);
  --jsini-accent-text: var(--tb-primary);
  --jsini-focus: rgba(var(--tb-primary-rgb), 0.25);
  --jsini-grid-header: var(--tb-surface-2);
  --jsini-grid-hover: var(--tb-hover);
  --jsini-success: var(--tb-green);
  --jsini-warning: var(--tb-yellow);
  --jsini-danger: var(--tb-red);
  --jsini-info: var(--tb-azure);
  --jsini-theme-picked: var(--tb-primary-lt);
  --jsini-theme-hover: var(--tb-hover);

  --jsini-radius-sm: var(--tb-radius-sm);
  --jsini-radius-md: var(--tb-radius);
  --jsini-radius-lg: var(--tb-radius-lg);
  --jsini-radius-xl: calc(12px * var(--tb-radius-scale));

  --jsini-shadow-xs: var(--tb-shadow-card);
  --jsini-shadow-sm: var(--tb-shadow-card);
  --jsini-shadow-md: var(--tb-shadow-dropdown);
  --jsini-shadow-lg: var(--tb-shadow-dropdown);
}

html,
body {
  font-family: var(--tb-font);
  background: var(--tb-body-bg);
  color: var(--tb-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv03', 'cv04', 'cv11';
}

a { color: var(--tb-primary); }

/* ── 5. DevExpress 부품 ─────────────────────────────────── */

/* 편집기 — 40px · 6px 모서리 · 옅은 그림자. Small/Large 모드는 DevExpress 치수를 쓴다. */
.dxbl-text-edit {
  --dxbl-text-edit-bg: var(--tb-input-bg);
  --dxbl-text-edit-btn-bg: transparent;
  --dxbl-text-edit-color: var(--tb-text);
  --dxbl-text-edit-border-color: var(--tb-border);
  --dxbl-text-edit-border-radius: var(--tb-radius);
  --dxbl-text-edit-box-shadow: var(--tb-shadow-input);
  --dxbl-text-edit-focus-border-color: color-mix(in srgb, var(--tb-primary) 55%, var(--tb-border));
  --dxbl-text-edit-focus-shadow-color: rgba(var(--tb-primary-rgb), 0.25);
  --dxbl-text-edit-focus-shadow-blur: 0;
  --dxbl-text-edit-focus-shadow-spread: 0.25rem;
  --dxbl-text-edit-readonly-bg: var(--tb-surface-2);
  --dxbl-text-edit-disabled-bg: var(--tb-surface-3);
}

.dxbl-text-edit:not(.dxbl-sm):not(.dxbl-lg) {
  --dxbl-text-edit-padding-y: var(--tb-control-py);
  --dxbl-text-edit-padding-x: var(--tb-control-px);
  --dxbl-text-edit-line-height: 1.4285;
}

/* 표 안의 거르개 줄 · 셀 편집기 · 쪽 번호 칸은 키우지 않는다 — 줄 높이만 는다. */
.dxbl-grid .dxbl-text-edit,
.dxbl-pager .dxbl-text-edit,
.dxbl-treelist .dxbl-text-edit {
  --dxbl-text-edit-padding-y: 0.25rem;
  --dxbl-text-edit-box-shadow: none;
}

.dxbl-text-edit-input::placeholder,
.dxbl-memo-input::placeholder {
  color: var(--tb-muted);
  opacity: 1;
}

/* 체크박스 · 라디오 */
.dxbl-checkbox {
  --dxbl-checkbox-check-element-checked-bg: var(--tb-primary);
  --dxbl-checkbox-check-element-unchecked-border-color: var(--tb-border);
  --dxbl-checkbox-check-element-unchecked-bg: var(--tb-input-bg);
  --dxbl-checkbox-checked-focus-shadow-color: rgba(var(--tb-primary-rgb), 0.25);
}

/* 단추 — Tabler 의 `.btn`. 보조 단추(Secondary)는 회색 면이 아니라 흰 판 + 테두리다. */
.dxbl-btn {
  --dxbl-btn-border-radius: var(--tb-radius);
  --dxbl-btn-font-weight: 500;
}

.dxbl-btn:is(.dxbl-btn-primary, .dxbl-btn-secondary, .dxbl-btn-success, .dxbl-btn-danger,
  .dxbl-btn-warning, .dxbl-btn-info, .dxbl-btn-dark, .dxbl-btn-light,
  .dxbl-btn-outline-primary, .dxbl-btn-outline-secondary, .dxbl-btn-outline-danger):where(:not(.dxbl-sm):not(.dxbl-lg):not(.dxbl-btn-icon-only)) {
  --dxbl-btn-padding-y: var(--tb-control-py);
  --dxbl-btn-padding-x: 1rem;
  font-weight: 500;
}

.dxbl-btn.dxbl-btn-primary {
  --dxbl-btn-bg: var(--tb-primary);
  --dxbl-btn-color: var(--tb-primary-fg);
  --dxbl-btn-border-color: transparent;
  --dxbl-btn-hover-bg: var(--tb-primary-hover);
  --dxbl-btn-hover-border-color: transparent;
  --dxbl-btn-box-shadow: var(--tb-shadow-input);
}

.dxbl-btn.dxbl-btn-secondary,
.dxbl-btn.dxbl-btn-outline-secondary {
  --dxbl-btn-bg: var(--tb-surface);
  --dxbl-btn-color: var(--tb-text);
  --dxbl-btn-border-color: var(--tb-border);
  --dxbl-btn-hover-bg: var(--tb-surface-2);
  --dxbl-btn-hover-color: var(--tb-heading);
  --dxbl-btn-hover-border-color: var(--tb-border);
  --dxbl-btn-active-bg: var(--tb-surface-3);
  --dxbl-btn-active-color: var(--tb-heading);
  --dxbl-btn-box-shadow: var(--tb-shadow-input);
  --dxbl-btn-disabled-bg: var(--tb-surface);
  --dxbl-btn-disabled-color: var(--tb-muted);
  --dxbl-btn-disabled-border-color: var(--tb-border);
}

.dxbl-btn.dxbl-btn-primary:disabled,
.dxbl-btn.dxbl-btn-primary.dxbl-disabled {
  --dxbl-btn-disabled-bg: var(--tb-primary);
  --dxbl-btn-disabled-color: var(--tb-primary-fg);
  opacity: 0.55;
}

.dxbl-btn.dxbl-btn-danger {
  --dxbl-btn-bg: var(--tb-red);
  --dxbl-btn-border-color: transparent;
  --dxbl-btn-hover-bg: color-mix(in srgb, var(--tb-red) 88%, #000);
}

/* 표 · 나무 */
.dxbl-grid,
.dxbl-treelist {
  --dxbl-grid-bg: var(--tb-surface);
  --dxbl-grid-color: var(--tb-text);
  --dxbl-grid-border-color: var(--tb-border-soft);
  --dxbl-grid-border-radius: var(--tb-radius-lg);
  --dxbl-grid-header-bg: var(--tb-surface-2);
  --dxbl-grid-header-color: var(--tb-muted);
  --dxbl-grid-header-font-weight: 500;
  --dxbl-grid-h-line-color: var(--tb-border-soft);
  --dxbl-grid-v-line-color: transparent;
  --dxbl-grid-hover-bg: var(--tb-hover);
  --dxbl-grid-hover-color: var(--tb-text);
  --dxbl-grid-selection-bg: var(--tb-primary-lt);
  --dxbl-grid-selection-color: var(--tb-heading);
  --dxbl-grid-selection-focus-bg: var(--tb-primary-lt);
  --dxbl-grid-selection-focus-color: var(--tb-heading);
  --dxbl-grid-focus-bg: var(--tb-primary-lt);
  --dxbl-grid-focus-color: var(--tb-heading);
  --dxbl-grid-footer-bg: var(--tb-surface-2);
  --dxbl-grid-footer-color: var(--tb-muted);
  --dxbl-grid-text-cell-padding-y: 0.625rem;
  --dxbl-grid-text-cell-padding-x: 0.75rem;
}

/* 표 머리 — Tabler `.table thead th`: 12px · 500 · 대문자 · 자간 0.04em. */
.dxbl-grid .dxbl-grid-header,
.dxbl-treelist .dxbl-grid-header {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-muted);
  background: var(--tb-surface-2);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-inline: 0;
}

/* 세로선을 걷는다 — Tabler 표는 가로선만 긋는다. */
.dxbl-grid .dxbl-grid-table > thead > tr > th,
.dxbl-grid .dxbl-grid-table > tbody > tr > td {
  border-left-color: transparent;
  border-right-color: transparent;
}

/* 고른 줄 — 진한 강조색 면이 아니라 옅은 강조 + 왼쪽 막대(Tabler 목록의 활성 표시). */
.dxbl-grid .dxbl-grid-focused-row > td,
.dxbl-grid .dxbl-grid-selected-row > td {
  background-color: var(--tb-primary-lt) !important;
  color: var(--tb-heading) !important;
}

/* Bootstrap 테마는 고른 줄의 칸마다 `::before` 에 강조색을 통째로 덮는다 — 끈다. */
.dxbl-grid .dxbl-grid-table .dxbl-grid-focused-row > td::before,
.dxbl-grid .dxbl-grid-table .dxbl-grid-selected-row > td::before {
  background: transparent !important;
}

.dxbl-grid .dxbl-grid-focused-row > td:first-child {
  box-shadow: inset 2px 0 0 var(--tb-primary);
}

/* 표 줄 — 줄무늬 없이 판 색 그대로, 얹으면 옅게, 고르면 옅은 강조.
   고정 칸(관리)은 따로 칠해야 옆 칸과 같은 색이 된다. */
.commgrd .dxbl-grid-table > tbody > tr,
.commgrd .dxbl-grid-table > tbody > tr.commgrd__row--alt,
.commgrd .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-fixed-cell,
.commgrd .dxbl-grid .dxbl-grid-table > tbody > tr.commgrd__row--alt > td.dxbl-grid-fixed-cell,
.commtree .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-fixed-cell,
.commtree .dxbl-grid .dxbl-grid-table > tbody > tr.commtree__row--alt > td.dxbl-grid-fixed-cell {
  background-color: var(--tb-surface);
}

.commtree .dxbl-grid-table > tbody > tr,
.commtree .dxbl-grid-table > tbody > tr.commtree__row--alt {
  background-color: var(--tb-surface);
}

.commtree .dxbl-grid-table > tbody > tr:hover > td,
.commgrd .dxbl-grid-table > tbody > tr:hover > td {
  background-color: color-mix(in srgb, var(--tb-heading) 3%, var(--tb-surface));
}

.commgrd .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td,
.commgrd .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td,
.commgrd .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td.dxbl-grid-fixed-cell {
  background-color: color-mix(in srgb, var(--tb-primary) 10%, var(--tb-surface)) !important;
}

.commgrd .dxbl-grid-header,
.commtree .dxbl-grid-header {
  border-top: 0;
  border-bottom: 1px solid var(--tb-border-soft);
}

.commgrd .dxbl-grid-header-content,
.commtree .dxbl-grid-header-content {
  color: var(--tb-muted);
}

/* 관리 칸의 아이콘 단추 — 여백을 줄여 칸 폭 안에 셋이 들어가게 한다.
   Bootstrap 테마의 기본 좌우 여백(0.75rem)이면 아이콘이 6px 로 눌린다. */
.commgrd__actions .dxbl-btn,
.commtree__actions .dxbl-btn,
.jsini-actions .dxbl-btn,
.commgrd__footer .dxbl-btn,
.commtree__footer .dxbl-btn {
  --dxbl-btn-padding-x: 0.3125rem;
  --dxbl-btn-padding-y: 0.25rem;
}

.dxbl-btn > [class*='jsini-icon-'] {
  flex-shrink: 0;
}

/* 쪽 넘김 */
.dxbl-pager {
  --dxbl-pager-btn-border-radius: var(--tb-radius);
  --dxbl-pager-active-page-btn-bg: var(--tb-primary);
  --dxbl-pager-active-page-btn-color: var(--tb-primary-fg);
  --dxbl-pager-page-btn-hover-bg: var(--tb-hover);
  --dxbl-pager-color: var(--tb-muted);
}

/* 팝업 — Tabler `.modal`: 머리 · 발 사이에 선, 안쪽 20px, 제목 16px/600. */
.dxbl-popup,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup {
  --dxbl-popup-bg: var(--tb-surface);
  --dxbl-popup-color: var(--tb-text);
  --dxbl-popup-border-color: var(--tb-border-soft);
  --dxbl-popup-border-radius: var(--tb-radius-lg);
  --dxbl-popup-shadow: var(--tb-shadow-dropdown);
  --dxbl-popup-header-bg: transparent;
  --dxbl-popup-header-color: var(--tb-heading);
  --dxbl-popup-header-font-size: 1rem;
  --dxbl-popup-header-font-weight: 600;
  --dxbl-popup-header-padding-x: var(--tb-space-card);
  --dxbl-popup-header-padding-y: 1rem;
  --dxbl-popup-body-padding-x: var(--tb-space-card);
  --dxbl-popup-body-padding-y: var(--tb-space-card);
  --dxbl-popup-footer-bg: var(--tb-surface-2);
  --dxbl-popup-footer-padding-x: var(--tb-space-card);
  --dxbl-popup-footer-padding-y: 0.875rem;
}

.dxbl-modal-header,
.dxbl-popup-header {
  border-bottom: 1px solid var(--tb-border-soft);
}

.dxbl-modal-footer,
.dxbl-popup-footer {
  border-top: 1px solid var(--tb-border-soft);
  gap: 0.5rem;
}

.dxbl-modal-back {
  --dxbl-popup-back-bg: var(--tb-scrim);
  --dxbl-popup-back-opacity: 1;
  backdrop-filter: blur(2px);
}

/* 드롭다운 목록 */
.dxbl-dropdown,
.dxbl-dropdown-dialog {
  --dxbl-dropdown-bg: var(--tb-surface);
  --dxbl-dropdown-border-color: var(--tb-border-soft);
  --dxbl-dropdown-border-radius: var(--tb-radius);
  --dxbl-dropdown-box-shadow: var(--tb-shadow-dropdown);
}

.dxbl-list-box {
  --dxbl-list-box-item-hover-bg: var(--tb-hover);
  --dxbl-list-box-item-selected-bg: var(--tb-primary-lt);
  --dxbl-list-box-item-selected-color: var(--tb-heading);
}

/* 탭 — Tabler `.nav-tabs`: 밑줄 한 줄, 고른 탭은 강조색 2px. */
.dxbl-tabs {
  --dxbl-tabs-bg: transparent;
  --dxbl-tabs-color: var(--tb-muted);
  --dxbl-tabs-separator-border-color: var(--tb-border-soft);
  --dxbl-tabs-tab-hover-bg: transparent;
  --dxbl-tabs-tab-hover-color: var(--tb-heading);
  --dxbl-tabs-tab-selected-bg: transparent;
  --dxbl-tabs-tab-selected-color: var(--tb-heading);
  --dxbl-tabs-tab-padding-y: 0.625rem;
  --dxbl-tabs-tab-padding-x: 0.25rem;
  --dxbl-tabs-font-size: 0.875rem;
}

.dxbl-tabs .dxbl-tabs-item {
  margin-right: 1.25rem;
  font-weight: 500;
}

.dxbl-tabs .dxbl-tabs-item.dxbl-active,
.dxbl-tabs .dxbl-tabs-item[aria-selected='true'] {
  box-shadow: inset 0 -2px 0 var(--tb-primary);
}

/* 태그 상자의 태그 — Tabler `.badge` 옅은 면. */
.dxbl-tag-box .dxbl-tag,
.dxbl-tagbox-tag {
  border-radius: var(--tb-radius-sm);
  background: var(--tb-surface-3);
  color: var(--tb-text);
  border: 1px solid var(--tb-border-soft);
  font-weight: 500;
}

/* 나무(사이드바 메뉴 · 트리 뷰) */
.dxbl-treeview {
  --dxbl-treeview-item-border-radius: var(--tb-radius);
  --dxbl-treeview-item-hover-bg: var(--tb-hover);
  --dxbl-treeview-item-hover-color: var(--tb-heading);
  --dxbl-treeview-item-selection-bg: var(--tb-primary-lt);
  --dxbl-treeview-item-selection-color: var(--tb-primary);
  --dxbl-treeview-item-selection-focused-color: var(--tb-primary);
}

/* 토스트 */
.dxbl-toast {
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-shadow-dropdown);
}

/* ── 6. 폼 — 라벨은 칸 위에 ─────────────────────────────
   Tabler `.form-label`: 칸 위 14px/500, 아래 8px, 칸 사이 16px.
   DxFormLayout 은 기본이 가로 배치(라벨 왼쪽)다. 모든 폼을 세로로 세운다. */

.dxbl-fl {
  --dxbl-fl-item-spacing-y: var(--tb-space-field);
  --dxbl-fl-item-spacing-x: 1rem;
  --dxbl-fl-caption-color: var(--tb-heading);
  --dxbl-fl-caption-font-weight: 500;
  --dxbl-fl-group-bg: transparent;
  --dxbl-fl-group-border-radius: var(--tb-radius-lg);
  --dxbl-fl-group-header-bg: transparent;
  --dxbl-fl-group-header-color: var(--tb-muted);
  --dxbl-fl-group-header-font-size: 0.75rem;
  --dxbl-fl-group-header-font-weight: 600;
  --dxbl-fl-group-header-padding-x: 0;
  --dxbl-fl-group-header-padding-y: 0.5rem;
  --dxbl-fl-group-content-padding-x: 0;
  --dxbl-fl-group-content-padding-y: 1rem;
}

/* 자릿수를 DevExpress 규칙(`.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal`)과 맞춘다 —
   클래스 하나라도 모자라면 가로 배치가 이긴다(실제로 그랬다). */
.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none;
  min-width: 0;
  margin: 0 0 0.5rem;
  padding: 0;
  text-align: left;
  white-space: normal;
}

.dxbl-fl .dxbl-fl-cpt {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--tb-heading);
}

.dxbl-fl .dxbl-fl-item > .dxbl-fl-ctrl {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

/* 폼 묶음 — 두꺼운 상자가 아니라 Tabler 의 소제목 한 줄 + 밑줄. */
.dxbl-fl .dxbl-group {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dxbl-fl .dxbl-group > .dxbl-group-header {
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--tb-border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--tb-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dxbl-fl .dxbl-group > .dxbl-group-body {
  padding: 1rem 0 0;
  border: 0;
  background: transparent;
}

/* 표의 편집 창 아래 단추 줄 — Tabler `.modal-footer` 처럼 선을 긋고 오른쪽에 모은다. */
.dxbl-grid-edit-form-buttons,
.dxbl-popup .dxbl-grid-edit-form-buttons {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tb-border-soft);
  gap: 0.5rem;
}

/* 칸 아래 한 줄 설명 — Tabler `.form-hint`. */
.jsini-hint,
.ad-editform .jsini-hint {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--tb-muted);
}

/* ── 7. 셸 ──────────────────────────────────────────────── */

/* 헤더 — Tabler `.navbar`: 판 색, 아래 한 줄. */
.jsini-header {
  background: var(--tb-surface) !important;
  color: var(--tb-text);
  border-bottom: 1px solid var(--tb-border-soft);
  box-shadow: none;
}

.jsini-header__brand-text {
  color: var(--tb-heading);
  font-weight: 600;
}

.jsini-header__sep {
  background: var(--tb-border-soft);
}

.jsini-crumbs,
.jsini-crumbs__item {
  color: var(--tb-muted);
}

.jsini-crumbs__item:last-child {
  color: var(--tb-heading);
  font-weight: 500;
}

/* 사이드바 — Tabler `.navbar-vertical`: 판 색 + 오른쪽 안쪽 선. */
.jsini-shell__sidebar,
.jsini-sidebar {
  background: var(--tb-surface) !important;
  color: var(--tb-text);
  box-shadow: inset -1px 0 0 var(--tb-border-soft);
  border-right: 0 !important;
}

.jsini-sidebar__search .dxbl-text-edit {
  --dxbl-text-edit-bg: var(--tb-input-bg);
  --dxbl-text-edit-border-color: var(--tb-border);
}

.jsini-sidebar__tabs {
  border-bottom: 1px solid var(--tb-border-soft);
}

.jsini-sidebar__tab {
  color: var(--tb-muted);
  font-weight: 500;
}

.jsini-sidebar__tab--on,
.jsini-sidebar__tab[aria-selected='true'] {
  color: var(--tb-heading);
  box-shadow: inset 0 -2px 0 var(--tb-primary);
}

/* 고른 메뉴 — Bootstrap 테마가 `::before` 에 강조색을 통째로 칠한다. 끄고
   옅은 강조 면 + 강조색 글자로 둔다(Tabler 세로 메뉴의 활성 표시). */
.dxbl-treeview .dxbl-treeview-item-container.dxbl-active::before {
  background: transparent !important;
}

.jsini-sidebar__tree .dxbl-treeview-item-container.dxbl-active {
  background: var(--tb-primary-lt);
  color: var(--tb-primary);
  font-weight: 500;
}

.jsini-sidebar__tree .dxbl-treeview-item-container:not(.dxbl-active):hover {
  background: var(--tb-hover);
}

.jsini-sidebar__tree .dxbl-treeview-item-container.dxbl-active .jsini-mi {
  color: var(--tb-primary);
}

/* 메뉴 줄 — 40px, 6px 모서리, 아이콘 흐리게. */
.jsini-sidebar .dxbl-treeview-item-content {
  min-height: 2.25rem;
  border-radius: var(--tb-radius);
}

.jsini-sidebar .dxbl-treeview-item-container {
  min-height: 2.25rem;
  border-radius: var(--tb-radius);
}

.jsini-sidebar .jsini-mi {
  color: color-mix(in srgb, var(--tb-text) 70%, transparent);
}

.jsini-sidebar__foot {
  border-top: 1px solid var(--tb-border-soft);
  background: var(--tb-surface);
}

/* 본문 바탕 */
.jsini-shell__main,
.jsini-shell__content {
  background: var(--tb-body-bg);
}

/* 열린 화면 탭 줄 */
.jsini-tabs {
  background: var(--tb-surface);
  border-bottom: 1px solid var(--tb-border-soft);
}

.jsini-tab {
  color: var(--tb-muted);
  border: 0 !important;
  background: transparent !important;
}

.jsini-tab:hover {
  color: var(--tb-heading);
}

.jsini-tab--active,
.jsini-tab[aria-current='page'],
.jsini-tab.active {
  color: var(--tb-heading) !important;
  box-shadow: inset 0 -2px 0 var(--tb-primary);
}

/* ── 8. 판 · 카드 ─────────────────────────────────────────
   조회 영역(CommSch) · 자료 영역(CommCont) · 대시보드 조각은 Tabler `.card` 다. */

.commsch,
.commcont,
.jsini-card,
.jsini-stat,
.jsini-dashboard-section {
  background: var(--tb-surface) !important;
  border: 1px solid var(--tb-border-soft) !important;
  border-radius: var(--tb-radius-lg) !important;
  box-shadow: var(--tb-shadow-card) !important;
}

.commsch {
  padding: 1rem var(--tb-space-card);
}

/* ── 조회 칸: 라벨은 **칸 앞**에 선다 (2026-09-27) ───────────

   한동안 Tabler 폼을 따라 라벨을 칸 위에 얹었는데(「라벨은 칸 위 14px/500」),
   조회 판에서는 그 한 줄이 비싸다. 업무 화면은 쪽이 구르면 안 되므로
   (`.commcont` 의 높이 규칙) **판이 먹는 높이가 그대로 표에서 빠진다** —
   한 화면에 보이는 줄 수가 준다. 재어 보니 판 하나가 100px → 76px 이고
   (계정 관리 · 다국어 자원 · 푸시 기록 셋이 한결같았다), 표의 한 줄이
   대략 그만큼이다.

   조건은 대개 둘에서 넷이라 앞에 붙이면 판이 한 줄로 끝난다. 이것이
   app.css 가 처음부터 잡아 둔 모양이고(`.commsch__item`), 여기서 그것을
   덮고 있었다.

   **편집 폼은 그대로 위에 얹는다.** 거기서는 칸이 열몇 개라 세로로 쌓이고,
   라벨을 앞에 붙이면 라벨 폭만큼 모든 칸이 밀려 들쭉날쭉해진다.

   `Stacked="true"` 를 준 판만 위로 얹는다 — 라벨이 길거나 조건이 예닐곱
   개인 화면(프로젝트 일정)이 그렇다. */
.commsch__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.commsch--stacked .commsch__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.commsch__label {
  position: static;
  align-self: center;
  margin: 0;
  padding: 0;
  background: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tb-heading);
  line-height: 1.25rem;

  /* 라벨이 두 줄로 접히지 않는다 — 「등록일(시작)」 여덟 자가 접히면
     칸 하나만 키가 커져 줄이 어긋난다. */
  white-space: nowrap;
}

.commsch--stacked .commsch__label {
  align-self: flex-start;
}

.commcont__head,
.jsini-dashboard-section__head {
  padding: 1rem var(--tb-space-card);
  border-bottom: 1px solid var(--tb-border-soft);
}

/* 표의 머리줄(건수)도 같은 띠다. **안쪽 여백을 카드에 맞춘다** — 위의 조회
   판 라벨·구역 제목과 한 세로줄에 서야 카드 안이 정돈되어 보인다(표만 담은
   판은 `padding: 0` 이라 머리줄이 스스로 그 여백을 가져야 한다).

   높이는 구역 제목보다 한 단 낮다 — 이름이 아니라 곁들이 표시라서. */
.commgrd__head {
  padding: 0.6rem var(--tb-space-card);
  background: transparent;
  border: 0;
}

/* 제목이 선 머리줄은 왼쪽 여백이 없다 — 앞의 막대가 표의 왼쪽 끝 선에
   맞춰 서야 한다(app.css 의 `.commgrd__title`). 여기서 한 번 더 적는 것은
   위 규칙이 `padding` 한 벌로 왼쪽까지 덮어쓰기 때문이다. */
.commgrd__head:has(.commgrd__title) {
  padding-left: 0;
}

/* 구역 제목 띠가 바로 위에 있으면 **한 줄로 붙인다.** 제목 바로 밑이라
   건수는 띠가 아니라 제목에 딸린 한마디로 읽히는 편이 낫다 — 위에 바짝
   붙이고 아래로 띄운다. */
.commcont__head + .commcont__body .commgrd__head {
  min-height: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.15rem;
}

.commgrd__total {
  color: var(--tb-muted);
}

.commgrd__total b {
  color: var(--tb-heading);
}

.commgrd__unit {
  color: var(--tb-muted);
}

.commcont__title,
.jsini-dashboard-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tb-heading);
}

.commcont__hint,
.jsini-dashboard-section__hint {
  color: var(--tb-muted);
}

/* 표만 담은 판은 안쪽 여백을 없애 표를 판 가장자리에 붙인다(Tabler `.card > .table`).
   테를 한 번 더 두르면 휴대폰에서 폭만 잃는다. */
.commcont:has(> .commcont__body > :is(.commgrd, .commtree):only-child) {
  padding: 0 !important;
  overflow: hidden;
}

.commcont:has(> .commcont__body > :is(.commgrd, .commtree):only-child) .dxbl-grid {
  border-radius: 0;
}

/* 판 안의 표는 판 테두리와 겹치지 않게 제 테두리를 걷는다. */
.commcont .dxbl-grid,
.commcont .dxbl-treelist {
  --dxbl-grid-border-width: 0;
  border: 0;
}

.commgrd__footer,
.commtree__footer {
  color: var(--tb-muted);
}

/* 끌어서 나누는 좌우 판(`ad-vsplit`)도 카드다. 판 사이는 구분선 자리만큼 띄운다. */
.ad-vsplit__pane {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border-soft);
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-shadow-card);
}

.ad-vsplit__pane--left {
  margin-right: 0.375rem;
  padding: 0;
}

.ad-vsplit__pane--right {
  margin-left: 0.375rem;
  padding: 1rem var(--tb-space-card);
}

.ad-vsplit__pane .commgrd .dxbl-grid,
.ad-vsplit__pane .commtree .dxbl-grid {
  --dxbl-grid-border-width: 0;
  border: 0;
}

.ad-company__body {
  overflow-x: hidden;
}

@media (width < 992px) {
  .ad-vsplit__pane {
    margin: 0 0 1rem;
  }
}

/* 통계 타일 — Tabler `.subheader` + 큰 숫자. */
.jsini-stat::after {
  display: none;
}

.jsini-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem var(--tb-space-card);
}

.jsini-stat__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-muted);
}

.jsini-stat__value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tb-heading);
  letter-spacing: 0;
}

.jsini-stat:hover,
.jsini-card:hover {
  transform: none;
  box-shadow: var(--tb-shadow-card) !important;
}

/* 배지 — Tabler `.badge` 옅은 면(-lt). */
.jsini-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 0;
  border-radius: var(--tb-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  background: var(--tb-surface-3);
  color: var(--tb-text);
}

.jsini-badge--on { background: rgba(var(--tb-green-rgb), 0.12); color: var(--tb-green); }
.jsini-badge--off { background: var(--tb-surface-3); color: var(--tb-muted); }
.jsini-badge--warn { background: rgba(var(--tb-yellow-rgb), 0.14); color: color-mix(in srgb, var(--tb-yellow) 80%, #000); }
.jsini-badge--err { background: rgba(var(--tb-red-rgb), 0.12); color: var(--tb-red); }

:root[data-bs-theme='dark'] .jsini-badge--warn { color: var(--tb-yellow); }

/* 안내 줄 — Tabler `.alert`: 판 색 + 테두리, 색은 왼쪽 막대에만. */
.jsini-notice {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border-soft);
  border-left: 3px solid var(--tb-azure);
  border-radius: var(--tb-radius);
  color: var(--tb-text);
  box-shadow: var(--tb-shadow-card);
}

.jsini-notice--warning { border-left-color: var(--tb-yellow); }
.jsini-notice--error { border-left-color: var(--tb-red); }

/* 부제목 · 도장 */
.ad-subhead,
.jsini-subhead {
  color: var(--tb-heading);
  font-weight: 600;
}

.ad-stamp {
  color: var(--tb-muted);
}

/* 테마 서랍 — Tabler Customize 판의 알약 · 색 동그라미. */
.jsini-theme-panel {
  background: var(--tb-surface);
  border-left: 1px solid var(--tb-border-soft);
  box-shadow: var(--tb-shadow-dropdown);
}

.jsini-theme-scrim--on {
  background: var(--tb-scrim);
}

.tb-custom {
  padding: 0.25rem 0 1rem;
}

.tb-custom__label {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tb-muted);
}

.tb-custom__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  background: var(--tb-surface);
  color: var(--tb-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--tb-shadow-input);
}

.tb-pill:hover {
  background: var(--tb-surface-2);
  color: var(--tb-heading);
}

.tb-pill--on {
  border-color: var(--tb-primary);
  color: var(--tb-primary);
  box-shadow: 0 0 0 1px var(--tb-primary) inset;
}

.tb-pill__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--swatch);
}

.tb-custom__swatches {
  display: grid;
  grid-template-columns: repeat(6, 2rem);
  gap: 0.5rem;
}

.tb-swatch {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.tb-swatch--on {
  box-shadow: 0 0 0 2px var(--tb-surface), 0 0 0 4px var(--swatch);
}

/* 스크롤 막대 — 굵기·색은 app.css 한 곳에서만 정한다.

   여기 있던 `* { scrollbar-color }` 를 걷었다. 크로미움은 `scrollbar-color`
   가 `auto` 가 아닌 요소에서 `::-webkit-scrollbar` 를 통째로 무시하는데,
   이 규칙이 `*` 에 걸려 있어서 app.css 의 3px 규칙이 **화면 전체에서** 죽고
   브라우저 기본 막대(15~17px)가 그려졌다. 파이어폭스용 색은 app.css 의
   `@supports not selector(::-webkit-scrollbar)` 블록이 들고 있다. */

/* ── 9. 창 머리 · 탭 테 ─────────────────────────────────── */

.dxbl-popup .dxbl-modal-header,
.dxbl-popup .dxbl-popup-header {
  background: var(--tb-surface);
}

.dxbl-tabs {
  --dxbl-tabs-tab-border-color: transparent;
}

/* ── 10. 휴대폰 (≤767px) ───────────────────────────────────
   preview.tabler.io 를 375px 로 잰 값이다 — 헤더 56px, 좌우 여백 8px,
   카드는 폭을 다 쓰고 안쪽 16~20px, 칸 40px, 창은 좌우 8px 만 남긴다.
   높이 사슬·아래 탭 줄 자리는 app.css 의 휴대폰 규칙이 그대로 쥐고 있다 —
   여기서는 여백과 겉모양만 고친다. */

@media (width < 768px) {
  /* **본문 여백은 여기서 정하지 않는다** — `app.css` 의 `--jsini-shell-pad-*`
     하나가 정본이다(2026-10-07 에 3px 로 내려왔다). 여기 8px 짜리 세 줄이
     `!important` 로 그것을 덮고 있어서, 토큰을 내려도 휴대폰만 8px 로
     남아 있었다. 테마는 겉모양만 맡고 자리는 안 잡는다. */
  .jsini-shell__content {
    padding-left: var(--jsini-shell-pad-inline) !important;
    padding-right: var(--jsini-shell-pad-inline) !important;
    padding-top: var(--jsini-shell-pad-top) !important;
  }

  .jsini-header {
    box-shadow: none;
  }

  /* 판 사이 8px, 판 안쪽 16px. */
  .commsch,
  .commcont,
  .jsini-dashboard-section,
  .ad-vsplit__pane {
    margin-bottom: 0.5rem;
  }

  .commsch {
    padding: 0.75rem 1rem;
  }

  .commcont__head,
  .jsini-dashboard-section__head {
    padding: 0.75rem 1rem;
  }

  /* 카드 안의 표는 카드 가장자리에 붙인다 — 테를 한 번 더 두르면 폭만 잃는다. */
  .commcont__body {
    padding: 0 !important;
  }

  .commcont .dxbl-grid,
  .commcont .dxbl-treelist,
  .ad-vsplit__pane .dxbl-grid {
    border-radius: 0 0 var(--tb-radius-lg) var(--tb-radius-lg);
  }

  .ad-vsplit__pane--right {
    padding: 0.75rem 1rem;
  }

  .ad-company__head {
    margin: 0 0 0.5rem;
  }

  /* 통계 타일은 두 칸으로 — 한 줄에 하나면 숫자 넷이 화면 하나를 먹는다. */
  .jsini-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .jsini-stat {
    padding: 0.75rem 1rem;
  }

  .jsini-stat__value {
    font-size: 1.25rem;
  }

  /* 창 — 좌우 8px 만 남기고, 머리·발은 Tabler 모달처럼. */
  .dxbl-modal > .dxbl-modal-root > .dxbl-popup,
  .dxbl-modal > .dxbl-modal-root > .dxbl-popup.ad-editpopup {
    --dxbl-popup-margin: 0.5rem;
    --dxbl-popup-max-width: calc(100vw - 1rem);
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    --dxbl-popup-header-padding-x: 1rem;
    --dxbl-popup-body-padding-x: 1rem;
    --dxbl-popup-footer-padding-x: 1rem;
  }

  /* 폼 칸은 한 줄에 하나 — DevExpress 의 반 칸(ColSpanMd=6)은 이미 풀린다. 칸 사이만 좁힌다. */
  .dxbl-fl {
    --dxbl-fl-item-spacing-y: 0.875rem;
  }

  /* 아래 탭 줄 — Tabler 의 판 색 + 윗선, 글자는 작고 흐리게. */
  .jsini-bottom-nav {
    background: var(--tb-surface) !important;
    border-top: 1px solid var(--tb-border-soft) !important;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.04);
  }

  .jsini-bottom-nav__item {
    color: var(--tb-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    gap: 0.125rem;
  }

  .jsini-bottom-nav__item:hover,
  .jsini-bottom-nav__item:active {
    color: var(--tb-primary);
  }

  /* 메뉴 서랍이 열리면 본문을 Tabler 덮개 색으로 가린다. */
  .jsini-shell__scrim {
    background: var(--tb-scrim) !important;
  }

  .jsini-shell__sidebar {
    box-shadow: var(--tb-shadow-dropdown) !important;
  }
}