Aislo/ui_template/ui_template_data_table.css

/* =============================================================================
 * ui_template_data_table.css — 많은 자료용 읽기 표(`ui_template_data_table.ts`)
 * 색은 테마 토큰만 · 칸 배경은 불투명(고정 칸 아래로 비치지 않게)
 * ========================================================================== */

.ui-data-table {
  --dt-row-h: 24px;
  --dt-zebra: var(--color-surface);
  --dt-hover: color-mix(in srgb, var(--color-accent) 14%, var(--color-canvas));
  --dt-head: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
  --dt-line: var(--color-border);
  --dt-edge: color-mix(in srgb, var(--color-text-secondary) 45%, var(--color-border));
  width: fit-content; /* 표가 좁으면 틀도 표만큼 */
  max-width: 100%;
  max-height: calc(100vh - 260px);
  overflow: auto;
  border: 1px solid var(--dt-line);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
  outline: none;
  overflow-anchor: none; /* 줄을 갈아 그릴 때 브라우저가 스크롤을 옮기지 않게 */
}

.ui-data-table:focus-visible {
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.ui-data-table__table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text-body);
  font-size: var(--text-caption);
  line-height: 1.3;
}

.ui-data-table__table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ui-data-table__table th,
.ui-data-table__table td {
  height: var(--dt-row-h);
  padding: 0 var(--spacing-8);
  overflow: hidden;
  border-right: 1px solid var(--dt-line);
  border-bottom: 1px solid var(--dt-line);
  background: var(--color-canvas);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 숫자 — 오른쪽 맞춤 · 자리 폭 같게 */
.ui-data-table__table [data-num] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ui-data-table__table td.is-empty {
  color: var(--color-text-secondary); /* muted 는 작은 글에 대비 3:1 — 모자람 */
  text-align: center;
}

/* 머리 — 스크롤해도 위에 붙음 */
.ui-data-table__table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ui-data-table__table thead th {
  background: var(--dt-head);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* 머리 칸 상태 — 원본에 없는 항목 */
.ui-data-table__table thead th.is-missing {
  color: var(--color-danger);
}

.ui-data-table__table thead tr:last-child th,
.ui-data-table__table thead th[rowspan] {
  border-bottom-color: var(--dt-edge);
}

/* 줄 번갈아 색 · 올린 줄 강조 */
.ui-data-table__table tbody tr.is-alt td {
  background: var(--dt-zebra);
}

.ui-data-table__table tbody tr:hover td {
  background: var(--dt-hover);
}

/* 안 그린 줄 자리 */
.ui-data-table__table tbody tr.ui-data-table__pad td {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* 앞 고정 열 — left 는 칸마다 글에 들어 있음 */
.ui-data-table__table .is-frozen {
  position: sticky;
  z-index: 1;
}

.ui-data-table__table thead .is-frozen {
  z-index: 3;
}

.ui-data-table__table .is-edge {
  border-right-color: var(--dt-edge);
}

/* 합계 줄 — 맨 아래 붙음 · 굵게 */
.ui-data-table__table tfoot {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.ui-data-table__table tfoot td {
  border-top: 1px solid var(--dt-edge);
  background: var(--dt-head);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.ui-data-table__table tbody tr.is-clickable {
  cursor: pointer;
}

/* 이동해 온 줄(PLAN 144 · focusRow) */
.ui-data-table__table tbody tr.is-focus td {
  background: var(--dt-hover);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

/* 고칠 칸(PLAN 121) — 칸 가득 글 상자 · 숫자 오른쪽 맞춤 */
.ui-data-table__table td.is-edit {
  padding: 0;
}

.ui-data-table__input {
  width: 100%;
  height: var(--dt-row-h);
  padding: 0 var(--spacing-8);
  border: 0;
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-canvas));
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ui-data-table__input:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}