Aislo/ui_template/ui_template_data_table.css

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

.ui-data-table {
  --dt-row-h: 28px;
  --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));
  /* 들여쓰기 한 단 = 표 기본 글자 1em(레벨 글자 크기와 무관 · 끌기 한 단과 같음) */
  --dt-indent: var(--text-body-sm);
  /* 레벨 글자 크기(PLAN 228-1) — 줄 높이 28px 안 · Lv3 = 표 기본(14px) */
  --dt-lv1-size: var(--text-body);
  --dt-lv2-size: 15px;
  --dt-lv4-size: 13px;
  --dt-lv5-size: var(--text-caption);
  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-body-sm);
  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;
  white-space-collapse: preserve-spaces; /* 앞 빈칸(들여쓰기) · 겹 빈칸을 접지 않음 · 줄바꿈은 안 함 */
}

/* 숫자 — 오른쪽 맞춤 · 자리 폭 같게 */
.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);
}

/* 제목 줄(PLAN 155-2 · rowClass) — 굵게 */
.ui-data-table__table tbody tr.is-title td {
  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;
}

/* 레벨(PLAN 201-1 · level 옵션 · 보기 전용) — 레벨 열 왼쪽 맞춤 · 레벨마다 1em(표 기본) 들여쓰기(글 상자도) */
.ui-data-table__table td.ui-data-table__lv {
  padding-left: calc(var(--spacing-8) + var(--dt-lv, 0) * var(--dt-indent));
  text-align: left;
}

.ui-data-table__table td.ui-data-table__lv.is-edit {
  padding-left: 0;
}

.ui-data-table__table td.ui-data-table__lv .ui-data-table__input {
  padding-left: calc(var(--spacing-8) + var(--dt-lv, 0) * var(--dt-indent));
  text-align: left;
}

/* 레벨 글꼴(PLAN 228-1) — 묶음 줄(is-node) 굵게 · 크기는 레벨 · 항목 줄은 14px 보다 크지 않게(Lv1 · 2 항목 = 기본) */
.ui-data-table__table td.ui-data-table__lv.is-node {
  font-weight: var(--font-weight-bold);
}

.ui-data-table__table td.ui-data-table__lv.is-lv1.is-node {
  font-size: var(--dt-lv1-size);
}

.ui-data-table__table td.ui-data-table__lv.is-lv2.is-node {
  font-size: var(--dt-lv2-size);
}

.ui-data-table__table td.ui-data-table__lv.is-lv4 {
  font-size: var(--dt-lv4-size);
}

.ui-data-table__table td.ui-data-table__lv.is-lv5 {
  font-size: var(--dt-lv5-size);
}

/* 같은 값 세로 병합(PLAN 201-1 · mergeSame) — 한 칸 글은 위에 */
.ui-data-table__table td.is-merged {
  vertical-align: top;
  padding-top: calc((var(--dt-row-h) - 1.3em) / 2);
}