/* =============================================================================
* swnm 테이블/그리드 — Tabulator 테마 (사인오프 2026-06-11, Figma 기준)
* 변경: 2026-06-11 · tanwoo · 범위필터 팝업 스타일 추가(.fp-range-* + noUiSlider 토큰 테마)
* 변경: 2026-06-11 · tanwoo · 짝수행 zebra 무효화(.tabulator-row-even→--bg-surface) — 라이브러리 기본 #EFEFEF가 "전 행 동일색" 스펙을 깨던 것 수정
* 변경: 2026-06-11 · tanwoo · 헤더셀 투명화(.tabulator-header .tabulator-col bg/border none) — 라이브러리 기본 회색헤더·컬럼보더가 "헤더 투명" 스펙을 깨던 것 수정(특이성↑로 로드순서 무관)
* 변경: 2026-06-11 · tanwoo · hover 무효화 2건 — 행 hover(.tabulator-selectable:hover #bbb)→--bg-hover, 헤더 정렬 hover(#cdcdcd)→transparent. 라이브러리 기본이 동순위로 테마를 이기던 것(특이성↑)
* 변경: 2026-06-12 · tanwoo · .tabulator-table 흰 배경 무효화(특이성↑) — 행간(background-clip:content-box+8px)에 흰 띠로 비치던 것(다크에서 노출)
* 변경: 2026-06-12 · tanwoo · 짝수행 규칙 background → background-color 정정 — 단축속성이 background-clip을 border-box로 리셋해 짝수행 행간(8px)이 사라지던 버그(3행 이상에서 중간 짝수행이 다음 행과 붙음). pressure(4행)에서 노출, flow(2행)는 잠복.
* 변경: 2026-06-12 · tanwoo · tableholder 내부 스크롤바 토큰 테마 추가 — height 지정 시(상세 시계열 등) 스크롤바가 브라우저 기본(다크에서 흰색)으로 노출되던 것 수정. thumb=--border-strong/투명 트랙(레거시 #586169/#CBD5E1 ≡ 토큰).
* 변경: 2026-06-12 · jiwon · 페이지네이션 .tabulator-page 선택자에 .tabulator-footer 추가(특이성↑ 0,4/0,5) — 뒤에 로드되는 tabulator.min.css 기본 active(빨강 #DD0000)가 동률 특이성으로 이기던 것 무관화. ui-table 그리드 최초 페이지네이션 사용처(/user/manage)에서 노출
* 변경: 2026-06-15 · jiwon · dataTree 펼침 컨트롤 캐럿화 — 라이브러리 기본 박스(⊟/⊞)·가지선(ㄴ)을 ▼/▶ 캐럿으로 교체(특이성↑). /user/manage-detail 권한 편집 트리에서 노출, permission-management 커스텀 그리드와 통일
* 변경: 2026-06-22 · jiwon · 선택 행 배경 특이성 보강 — 체크박스 빠른 토글 시 Tabulator 기본 selected와 짝수행 배경이 섞여 줄무늬처럼 보이던 것 수정
* 변경: 2026-06-23 · jiwon · 페이지네이션 화살표를 문자 glyph에서 CSS chevron으로 교체 — 숫자와 앞/뒤 이동 버튼의 수직 중심이 달라 보이던 것 수정
* 변경: 2026-06-25 · jiwon · 행 선택 체크박스 ui-check 비주얼 등록 — Tabulator 생성 input엔 클래스 훅이 없어 .ui-table 스코프로. 첫 사용처 /user/manage(페이지-로컬 정의를 단일소스로 승격)
* -----------------------------------------------------------------------------
* 앞으로 모든 그리드 = Tabulator. 디자인 = 이 테마. hex 하드코딩은 테이블 전용 색만.
*
* ★ 반드시 .ui-table 래퍼 안에서 Tabulator 생성 (기존 tabulator 페이지와 충돌 방지):
*
* JS: UiTable.create('#grid', { data, columns }) // common/js/components/ui-table.js
*
* 색: --bg-surface(행)/--bg-page(행 사이 간격)/--text-primary/--text-muted/--border/--primary
* 는 tokens.css가 다크·라이트 자동 전환. 상태태그·페이지네이션 일부는 Figma 전용 색.
* ============================================================================= */
/* ===== 테이블 헤더(상단 영역): 좌 Total results · 우 액션 슬롯 · 테이블과 24px ===== */
.ui-table-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6); /* 24px */
}
.ui-table-total {
display: inline-flex;
align-items: center;
gap: var(--space-1); /* 4px */
font-size: var(--font-md); /* 16px */
font-weight: var(--fw-semibold); /* 600 */
color: var(--text-primary);
}
.ui-table-total b { font-weight: var(--fw-bold); color: var(--primary); } /* 숫자 */
.ui-table-actions { display: flex; gap: var(--space-2); }
/* ===== 행 선택 체크박스 = ui-check 비주얼 =====
Tabulator가 생성하는 엔 클래스 훅이 없어 .ui-table 스코프로 직접.
외형은 components/checkbox.css(.ui-check)와 동일: 16px · radius-sm · --primary 채움 + 흰 마크. */
.ui-table .tabulator-cell input[type="checkbox"],
.ui-table .tabulator-headers input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm); /* 4px */
background: transparent;
cursor: pointer;
position: relative;
vertical-align: middle;
transition: background-color .15s ease, border-color .15s ease;
}
.ui-table .tabulator-cell input[type="checkbox"]:checked,
.ui-table .tabulator-headers input[type="checkbox"]:checked,
.ui-table .tabulator-cell input[type="checkbox"]:indeterminate,
.ui-table .tabulator-headers input[type="checkbox"]:indeterminate {
background: var(--primary);
border-color: var(--primary);
}
/* 체크마크(✓) — transform 중앙정렬 (ui-check와 동일) */
.ui-table .tabulator-cell input[type="checkbox"]:checked::after,
.ui-table .tabulator-headers input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 50%;
top: 46%;
width: 4px;
height: 8px;
border: solid #FFFFFF; /* 채움 위 흰 마크 (고정 대비) */
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
/* 전체선택 중간상태(–) */
.ui-table .tabulator-cell input[type="checkbox"]:indeterminate::after,
.ui-table .tabulator-headers input[type="checkbox"]:indeterminate::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 2px;
background: #FFFFFF;
transform: translate(-50%, -50%);
}
/* ===== Tabulator 컨테이너 ===== */
.ui-table .tabulator { background: transparent; border: none; font-family: var(--font-sans); }
.ui-table .tabulator .tabulator-tableholder,
.ui-table .tabulator .tabulator-table { background: transparent; } /* 행 모서리 비침 방지 */
/* tabulator.min.css 기본 .tabulator-table 흰 배경 무효화(동순위·나중로드 대비 특이성↑) — 다크에서 행간에 흰 띠로 비치는 것 방지 */
.ui-table .tabulator .tabulator-tableholder .tabulator-table { background-color: transparent; }
/* 컬럼 헤더: 투명 + 하단 구분선 + 제목↔구분선 14px */
.ui-table .tabulator .tabulator-header {
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
padding-bottom: 14px;
}
.ui-table .tabulator .tabulator-col { background: transparent; border: none; }
/* tabulator.min.css 기본 헤더셀(.tabulator-header .tabulator-col) 회색배경·컬럼보더를 확실히 무효화(동순위+나중로드 대비 특이성↑) → 헤더 투명 */
.ui-table .tabulator .tabulator-header .tabulator-col { background: transparent; border: none; }
.ui-table .tabulator .tabulator-col .tabulator-col-content { padding: 0 var(--space-3); } /* 좌우 12 */
.ui-table .tabulator .tabulator-col-title {
color: var(--text-muted);
font-size: var(--font-base); /* 14px */
font-weight: var(--fw-medium); /* 500 */
}
.ui-table .tabulator .tabulator-col .tabulator-header-popup-button { display: none; }
/* 헤더 구분선 ↔ 바디 첫 행 = 6px */
.ui-table .tabulator .tabulator-tableholder { padding-top: 6px; }
/* 내부 스크롤바 — height 지정 시 tableholder가 스크롤. 토큰 테마(thumb=--border-strong/투명 트랙)로
브라우저 기본(다크에서 흰색) 노출 방지. 다크/라이트는 --border-strong 토큰이 자동 처리. */
.ui-table .tabulator .tabulator-tableholder {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--border-strong) transparent;
}
.ui-table .tabulator .tabulator-tableholder::-webkit-scrollbar { width: 6px; height: 6px; }
.ui-table .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-sm); }
.ui-table .tabulator .tabulator-tableholder::-webkit-scrollbar-track { background: transparent; }
/* ===== 바디 행: 전 행 동일색 + radius4 + 행 사이 8px 간격(내용영역만 채움) ===== */
.ui-table .tabulator-row {
background: var(--bg-surface);
background-clip: content-box; /* 띠는 내용(54)만, 아래 8px는 비움(=패널색 간격) */
padding-bottom: 8px;
border: none;
border-radius: var(--radius-sm); /* 4px */
color: var(--text-primary);
}
/* tabulator.min.css 기본 짝수행 zebra(#EFEFEF) 무효화 → 전 행 동일색(--bg-surface). :hover 뒤에 두지 않음(동순위라 hover 우선 유지). */
.ui-table .tabulator-row.tabulator-row-even { background-color: var(--bg-surface); } /* background-color만 — 단축속성 background는 background-clip을 border-box로 리셋해 행 간격(content-box)이 사라짐 */
.ui-table .tabulator-row:last-child { padding-bottom: 0; }
.ui-table .tabulator-row:hover { background: var(--bg-hover); background-clip: content-box; }
/* tabulator 기본 행 hover(.tabulator-selectable:hover{#bbb})를 특이성↑로 무효화 → --bg-hover(연한 강조) */
.ui-table .tabulator-row.tabulator-selectable:hover { background: var(--bg-hover); background-clip: content-box; }
/* tabulator 기본 selected + 짝수행 배경 충돌 무효화 → 선택 행은 홀/짝 모두 동일한 primary tint */
.ui-table .tabulator-row.tabulator-selected,
.ui-table .tabulator-row.tabulator-selected.tabulator-row-odd,
.ui-table .tabulator-row.tabulator-selected.tabulator-row-even {
background: color-mix(in srgb, var(--primary) 16%, var(--bg-surface));
background-clip: content-box;
}
.ui-table .tabulator-row.tabulator-selected:hover,
.ui-table .tabulator-row.tabulator-selected.tabulator-selectable:hover {
background: color-mix(in srgb, var(--primary) 20%, var(--bg-surface));
background-clip: content-box;
}
/* tabulator 기본 헤더 정렬 hover(#cdcdcd) 무효화 → 헤더 hover 없음(스펙: 헤더 투명) */
.ui-table .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background-color: transparent; }
.ui-table .tabulator-row .tabulator-cell {
border: none;
padding: 0 var(--space-3); /* 0 12 */
font-size: var(--font-base); /* 14 */
font-weight: var(--fw-medium); /* 500 */
color: var(--text-primary);
}
.ui-table .tabulator-row .tabulator-cell[tabulator-field="date"],
.ui-table .tabulator-row .tabulator-cell.is-date { font-size: var(--font-md); } /* 날짜 16 (Figma) */
/* ===== 트리(dataTree) 펼침 컨트롤 — 라이브러리 박스(⊟/⊞)·가지선(ㄴ) → 캐럿(▼/▶) =====
/user/permission-management 커스텀 그리드와 동일한 캐럿. 특이성은 tabulator.min.css 풀체인보다 높게. */
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-branch { display: none; }
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control {
background: transparent; border: none; width: auto; height: auto;
overflow: visible; margin-right: var(--space-1); color: var(--text-secondary);
}
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control:hover { background: transparent; }
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse,
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand {
background: transparent; width: auto; height: auto; position: static;
}
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse::after,
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand::after { display: none; }
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse::before { content: '\25BC'; } /* ▼ 펼침 */
.ui-table .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand::before { content: '\25B6'; } /* ▶ 접힘 */
/* ===== 푸터/페이지네이션: 하단 구분선 없음 ===== */
.ui-table .tabulator .tabulator-footer { background: transparent; border-top: none; padding-top: var(--space-4); }
.ui-table .tabulator .tabulator-footer .tabulator-paginator { text-align: center; }
/* 숫자: 25×25 r4 12/600 · active 사각 #2E363E/흰 · inactive 배경없는 회색텍스트 (Figma 전용 색) */
.ui-table .tabulator .tabulator-footer .tabulator-page {
border: none; background: transparent; border-radius: var(--radius-sm);
color: #AAB5BE; width: 25px; min-width: 25px; height: 25px; padding: 0;
margin: 0 5px; font-size: var(--font-xs); font-weight: var(--fw-semibold);
display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box; line-height: 1; vertical-align: middle;
}
.ui-table .tabulator .tabulator-footer .tabulator-page.active { background: #2E363E; color: #FFFFFF; }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="first"],
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="prev"],
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="next"],
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="last"] {
color: #AAB5BE; font-size: 0; position: relative;
}
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="first"]::before,
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="first"]::after,
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="prev"]::after,
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="next"]::after,
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="last"]::before,
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="last"]::after {
content: "";
position: absolute;
top: 50%;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
box-sizing: border-box;
}
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="prev"] { margin-right: 18px; }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="first"]::before { left: 10px; transform: translate(-50%, -50%) rotate(135deg); }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="first"]::after { left: 15px; transform: translate(-50%, -50%) rotate(135deg); }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="prev"]::after { left: 50%; transform: translate(-50%, -50%) rotate(135deg); }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="next"] { margin-left: 18px; }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="next"]::after { left: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="last"]::before { left: 10px; transform: translate(-50%, -50%) rotate(-45deg); }
.ui-table .tabulator .tabulator-footer .tabulator-page[data-page="last"]::after { left: 15px; transform: translate(-50%, -50%) rotate(-45deg); }
/* ===== 셀 포매터 (필요 시 사용) ===== */
/* ID 등 링크 셀 */
.ui-table .ui-cell-link { color: var(--primary); text-decoration: underline; cursor: pointer; }
/* 상태 태그 (테이블 전용 Figma 색 — 전역 ui-badge와 별개) */
.ui-table .ui-cell-status {
display: inline-flex; align-items: center; justify-content: center;
height: 26px; padding: 0 9.5px; border-radius: var(--radius-sm);
font-size: var(--font-sm); font-weight: var(--fw-bold); border: 1px solid;
}
.ui-table .ui-cell-status--risk { color: #FB3624; border-color: #FB3624; background: rgba(251, 54, 36, .15); }
.ui-table .ui-cell-status--warning { color: #FF9600; border-color: #FF9600; background: rgba(255, 150, 0, .15); }
.ui-table .ui-cell-status--good { color: #22C55F; border-color: #22C55F; background: rgba(34, 197, 95, .10); }
/* ===== 헤더 제목 옆 깔때기(필터 트리거) ===== */
.ui-table .th-funnel { display: inline-flex; align-items: center; margin-left: var(--space-1); color: var(--text-muted); cursor: pointer; vertical-align: middle; }
.ui-table .th-funnel:hover { color: var(--primary); }
/* ===== 컬럼 필터 팝업 (headerFilterPopup) ===== */
.ui-table-filter-popup {
background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); width: 220px; padding: var(--space-3);
font-size: var(--font-sm); color: var(--text-primary);
}
.ui-table-filter-popup .fp-title { font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.ui-table-filter-popup .fp-search-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.ui-table-filter-popup .fp-search-row input[type=text] { flex: 1; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-2); font-size: var(--font-xs); outline: none; background: var(--bg-input); color: var(--text-primary); }
.ui-table-filter-popup .fp-list { max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.ui-table-filter-popup .fp-item { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.ui-table-filter-popup .fp-acts { display: flex; gap: var(--space-2); justify-content: flex-end; }
.ui-table-filter-popup .fp-acts button { height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: var(--fw-semibold); cursor: pointer; border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); }
.ui-table-filter-popup .fp-acts .fp-ok { background: var(--text-primary); color: var(--bg-page); border-color: var(--text-primary); }
/* ===== 범위(min~max) 필터 팝업 (filterable:'range') ===== */
.ui-table-filter-popup .fp-range-info { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.ui-table-filter-popup .fp-range-inputs { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ui-table-filter-popup .fp-range-inputs input { flex: 1; width: 100%; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-2); font-size: var(--font-xs); outline: none; background: var(--bg-input); color: var(--text-primary); }
.ui-table-filter-popup .fp-range-sep { color: var(--text-muted); }
.ui-table-filter-popup .fp-range-slider { margin: var(--space-2) var(--space-1) var(--space-3); }
/* noUiSlider 테마(토큰): 바=primary · 트랙=border · 핸들=surface+border-strong */
.ui-table-filter-popup .noUi-target { background: var(--border); border: none; box-shadow: none; height: 6px; }
.ui-table-filter-popup .noUi-connect { background: var(--primary); }
.ui-table-filter-popup .noUi-handle { background: var(--bg-surface); border: 1px solid var(--border-strong); box-shadow: none; border-radius: 50%; width: 14px; height: 14px; right: -7px; top: -5px; cursor: pointer; }
.ui-table-filter-popup .noUi-handle::before,
.ui-table-filter-popup .noUi-handle::after { display: none; }
/* ===== 밀도 변형: xcompact — 조밀한 모달/팝업 안의 표(report 모달 등) =====
2026-06-23 · tanwoo · DS 기본(rowHeight 62·셀14·헤더14)이 모달엔 커서 신설.
※ CSS(폰트/행간/헤더여백 축소) + JS 옵션 `rowHeight: 34` 를 함께 써야 함:
… + UiTable.create(sel, { rowHeight: 34, … })
특이성은 기본 .ui-table 규칙과 동순위라 소스 뒤(여기)에 둬 우선 적용. */
.ui-table--xcompact .tabulator .tabulator-header { padding-bottom: var(--space-2); } /* 14 → 8 */
.ui-table--xcompact .tabulator .tabulator-col-title { font-size: var(--font-xs); } /* 14 → 12 */
.ui-table--xcompact .tabulator .tabulator-tableholder { padding-top: 3px; } /* 6 → 3 */
.ui-table--xcompact .tabulator-row { padding-bottom: 2px; } /* 행간 8 → 2 */
.ui-table--xcompact .tabulator-row .tabulator-cell { font-size: var(--font-xs); } /* 14 → 12 */