/* 표(552-3) — 대시보드 꼴(줄 40 · 세로선 없음 · 카드 테두리) · 데이터표 = 줄 28 */ .ui-table-wrap { overflow-x: auto; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-cards); } .ui-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--color-text); } .ui-table th { height: 36px; padding: 0 12px; text-align: left; font-weight: 600; font-size: 12px; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); white-space: nowrap; } .ui-table td { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .ui-table tbody tr:last-child td { border-bottom: 0; } .ui-table tbody tr:is(:hover, [data-state="hover"]) { background: var(--color-hover); } .ui-table .is-end { text-align: right; } .ui-table td.ui-table__menucell { width: 44px; padding: 0 8px; text-align: right; } /* 데이터표 — 줄 28 · 글 12 */ .ui-table--data { font-size: var(--text-caption); } .ui-table--data th { height: 28px; padding: 0 8px; } .ui-table--data td { height: 28px; padding: 0 8px; } /* 격자표 — 세로선 · 칸마다 테두리(바깥 선은 감쌈 테두리 한 줄) · 가운데 맞춤 · 몸 안 이름 칸(th) = 머리색 */ .ui-table--grid { border-style: hidden; font-variant-numeric: tabular-nums; } .ui-table--grid :is(th, td) { border: 1px solid var(--color-border); text-align: center; white-space: nowrap; } .ui-table--grid tbody th { font-weight: 500; font-size: inherit; color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)); } /* 줄 상태 — 고름 · 바뀜 · 지움 */ .ui-table tbody tr:is(.is-active, [aria-selected="true"]) { background: var(--color-accent-soft); } .ui-table tbody tr.is-changed > td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); } .ui-table tbody tr.is-removed { color: var(--color-text-muted); text-decoration: line-through; } /* 빈 줄 · 펼침 줄 */ .ui-table td.ui-table__empty { height: 64px; color: var(--color-text-muted); text-align: center; } .ui-table tr.is-sub > td { height: auto; padding: 0; background: var(--color-bg); } .ui-table tbody tr.is-sub:is(:hover, [data-state="hover"]) { background: var(--color-bg); }