Data table (Table 1 · 표준 카드 테이블)

Hereby 표는 두 종류

이 페이지 = Table 1 — 일반 모든 데이터 테이블(리스트/현황/내역). 카드 룩 + 중앙정렬 + 풀 격자선. 근무 스케줄표(.sched-grid)는 완전히 다른 스프레드시트형 패턴입니다 → 근무 스케줄표 (Table 2). Table 1 스펙을 스케줄표에 적용하지 마세요.

규칙 (강제) · 코딩 에이전트용 — 사람은 접힌 채로 두어도 됩니다

Table 1(표준 카드 테이블) 강제 규칙 요약입니다. 상세·예시·근거는 아래 본문. Table 1 스펙을 근무 스케줄표(.sched-grid, Table 2)에 적용하지 마세요.

• 래퍼·구조: 스크롤 래퍼 bg-white border border-line-normal rounded-lg overflow-x-auto, 표는 border-separate border-spacing-0.
• 헤더 고정(sticky thead)을 쓰려면 래퍼가 실제로 「세로 스크롤 컨테이너」여야 합니다 — overflow-auto + 높이 제약. 높이가 없으면 세로 스크롤이 안 생겨서 바깥 컨테이너가 대신 스크롤되고, 헤더가 표와 함께 떠내려갑니다(스티키 탭바가 있으면 그 위로 겹쳐 보임). 표준 스크롤 박스는 .ds-table-scroll(overflow-auto와 함께 사용). ⚠️ overflow-x-auto만 준 래퍼가 가장 흔한 함정입니다 — 가로 축만 열려 있어도 sticky 기준은 그 래퍼로 바뀌는데 세로로는 스크롤되지 않습니다.
• 가로 스크롤바는 자동입니다 — 가로로 넘치는 표에는 setupTableXScroll()(@hereby/components, 앱 main.ts에서 1회 호출)이 표 위·아래 양쪽에 상시 노출 가로 스크롤바를 붙입니다. 마크업에 .ds-xscroll을 직접 쓰지 마세요(JS 전용). 화면별 해제는 래퍼/조상에 data-ds-xscroll="off". PC·태블릿(≥768px)만, 레이아웃 높이 0(표 위에 겹침), .sched-grid만 제외(급여 시트 .sheet-scroll은 아래쪽 바만). 썸은 평상시 반투명(--ds-opacity-50)이고 만질 때 또렷해집니다. 가로 flex/grid 부모 아래 래퍼에는 붙지 않습니다. → 가로 스크롤바
• 격자선(풀 격자): 각 th/td에 직접 border-bottom + border-right(둘 다 --color-line-normal). :last-child는 border-right:0, 마지막 행 border-bottom:0(단 .tbl-outline-flow는 바닥선 유지). border-separate라 divide-y 미동작.
• thead: bg-neutral-50 + text-label-assistive text-xs font-semibold, 셀 text-center px-3 h-9. sticky 필요 시 sticky top-0 z-10(스크롤 컨테이너 안).
• tbody td: text-center px-3 h-9. hover는 opt-in .row-hover:hover(= --color-bg-alternative). tfoot: thead와 동일 bg-neutral-50 + font-semibold.
• 폰트(12px 바닥선): 폰트 토큰만 — admin text-b6(12px), management-dashboard text-b5(13px). 임의 px 금지, 12px 미만 금지(라벨·배지 포함). 헤더는 본문과 동일 크기 + font-semibold로만 구분(키우지 않음).
• 숫자·식별자: 정렬 숫자 열(금액·시간·건수·날짜)은 tabular-nums + 천 단위 쉼표. 식별자(사번·코드)에 font-mono 금지(Inter 기본).
• 빈 상태: 0건은 <tbody> 안 한 줄 <td colspan="열 수" class="cell text-center" style="height:200px">, 카드 테두리·thead 유지. 안내문 ~해요체 + 마침표.
• 금지: 드래그 선택·fill-handle 등 스프레드시트형 인터랙션은 Table 1에 없음(그건 Table 2).
• 주의(하드락 금지): .tbl-v2-sticky-*·.tbl-outline-flow는 admin 직원관리 전용(공통 강제 아님), .cell-input:focus 색은 토큰화 검토 중. 라이팅·용어·숫자표기 정본은 서비스 공통 UI/UX 정책.

라이브 미리보기

실제 서비스의 대표 테이블을 그대로 가져왔어요. 공통 클래스(.employees-tbl-v2 + .cell-header/.cell · .row-hover · .cell--compact · .badge · .icon-btn)는 같고, 화면별 기능만 다릅니다.

예시 1 · 팀 관리 (트리)

organization.html의 팀 트리 — 상위 팀(굵게)·하위 팀(들여쓰기) + 하위 N 힌트, 마지막 미소속 행. 행 hover·상태 .badge·관리 .icon-btn.

팀명	관리자	멤버 수	상태	관리
간호본부	김수간	24	활성
진료지원본부	최지원	13	활성
원무행정본부	서원무	9	활성
미소속	-	3

ℹ️ organization.html의 팀 트리 마크업을 그대로 가져왔어요(데이터만 샘플). 스타일은 실제 admin CSS(.demo-admin으로 리스코프)와 동일.

예시 2 · 직원 관리 (체크박스·고정 컬럼·정렬·페이지네이션)

employees-content.html — 9컬럼(체크박스·사번·이름·이메일·소속·역할·입사일·근무형태·상태·관리). 좌측 3열 고정(.tbl-v2-sticky-*) + 가로 스크롤, 헤더 클릭 정렬(▲/▼), .ds-checkbox 선택(.is-selected), 하단 페이지네이션(.ds-page-btn). 카드를 가로로 스크롤하면 좌측 컬럼이 고정돼요.

	사번	이름	이메일	소속 · 역할	입사일	근무형태	상태	관리
	2018-002	오총무	ga.oh@hereby.example	총무팀 · 팀장	2018-11-03	주간	퇴사
	2019-007	박원무	front.park@hereby.example	원무행정본부 · 팀원	2019-08-20	주간	휴직
	2019-021	조진단	lab.cho@hereby.example	진료지원본부 · 팀원	2019-12-16	교대	재직
	2020-018	정수술	or.jung@hereby.example	수술간호팀 · 팀장	2020-06-01	교대	재직
	2020-033	서경영	biz.seo@hereby.example	경영지원팀 · 팀장	2020-03-02	주간	재직
	2021-001	김간호	nurse.kim@hereby.example	간호 1팀 · 팀장	2021-03-05	교대	재직

총 12건 중 1-6건

ℹ️ employees-content.html 마크업을 그대로 가져왔어요(데이터만 샘플). 좌측 3열 고정 + 가로 스크롤 확인. 스타일은 실제 admin CSS(.demo-admin 리스코프).

예시 3 · 접기/펴기 (트리 테이블) 2026-06-18

경영 대시보드의 본부별·팀별 인건비처럼 계층 데이터를 접고 펴는 트리 테이블이에요. 본부 행을 클릭하거나 전체 펼치기/접기로 하위(팀) 행을 토글하고, ▶ 셰브론이 90° 회전해 상태를 나타내요. 합계·실지급액 같은 숫자 열은 우측 정렬 + 천 단위 쉼표.

본부별 · 팀별 인건비

본부 / 팀	총지급액	공제	실지급액
▶간호본부	152,300,000	18,420,000	133,880,000
▶간호 1팀	64,200,000	7,810,000	56,390,000
▶간호 2팀	52,100,000	6,240,000	45,860,000
▶수술간호팀	36,000,000	4,370,000	31,630,000
▶진료지원본부	61,500,000	7,180,000	54,320,000
원무행정본부	44,900,000	5,260,000	39,640,000
합계	258,700,000	30,860,000	227,840,000

ℹ️ 실제 경영 대시보드의 본부·팀 인건비 트리(dashboard.html ②번 카드) 그대로 — 본부 → 팀 → 수당/공제 3단 트리. 행 클릭 또는 전체 펼치기/접기로 접고 펴요. ▶ 셰브론이 90° 회전해 상태를 표시하고, 하단 합계 행은 항상 고정.

ℹ️ 일반 리스트(Table 1)와 달리 카드 내부 자체 표(border-separate, 본부=흰 배경/굵게, 팀=틴트/들여쓰기)예요. 출처: management-dashboard/dashboard.html.

ℹ️ docs 렌더 메모: 실제 룩은 .admin-app table 전역 CSS(+.badge·.icon-btn·.ds-checkbox·.ds-page-btn·.tbl-v2-sticky-*)가 입히는데 docs는 이를 로드하지 않아서, 해당 규칙을 데모에 복제했어요(색은 모두 DS 토큰 그대로 → 프로덕션과 동일). 팀 표는 트리 경계가 빈 구간 없이 그려지도록 border-collapse: collapse, 직원 표는 고정 컬럼 테두리 유지를 위해 border-separate를 씁니다(프로덕션과 동일).

단일 출처

파트	파일
공유 스타일	packages/static/styles/design-system.css (.employees-tbl-v2, .cell--compact, .row-hover, .cell-input)
admin 글로벌 적용	apps/admin/src/styles/main.css (.admin-app table:not(.sched-grid))

표 마크업(<table>)은 각 화면이 작성하고 클래스만 부여합니다. admin은 .admin-app 스코프 글로벌 CSS가 셸 안 모든 표에 자동 적용(모달 포함, .sched-grid 제외). 다른 앱(management-dashboard·team-manager·hr-system)은 글로벌 CSS가 없으므로 인라인 Tailwind 유틸로 동일 룩을 재현합니다.

핵심 스펙

래퍼 (스크롤 컨테이너)

• bg-white border border-line-normal rounded-lg overflow-x-auto
• admin은 :has(> table) 룰로 자동 처리, 다른 앱은 인라인.

헤더 고정 — 래퍼가 세로 스크롤 컨테이너여야 해요

thead에 sticky top-0을 줬는데도 헤더가 표와 함께 떠내려간다면, 십중팔구 래퍼에 높이 제약이 없어서예요. sticky는 "가장 가까운 스크롤 조상"을 기준으로 붙는데, 래퍼가 스크롤되지 않으면 붙을 자리가 없어 그냥 흘러갑니다.

<!-- ❌ 가로 축만 열려 있음 — 세로 높이가 없어 스크롤이 안 생기고 헤더가 떠내려간다 -->
<div class="bg-white border border-line-normal rounded-lg overflow-x-auto">

<!-- ✅ 두 축 + 높이 제약 → 이 래퍼가 세로 스크롤 컨테이너가 되고 sticky thead가 그 안에서 고정 -->
<div class="bg-white border border-line-normal rounded-lg overflow-auto ds-table-scroll">

클래스	값
.ds-table-scroll	max-height: calc(100vh - 320px) · min-height: 180px

높이가 다르게 필요하면 이 클래스 대신 그 화면에 맞는 max-height를 주면 돼요 — 중요한 건 "높이 제약 + overflow-auto" 조합이지 특정 수치가 아니에요.

스티키 탭바와 함께 쓸 때

헤더가 안 붙으면 위쪽 스티키 탭바 위로 겹쳐 보이는 증상으로 먼저 드러나요(헤더가 화면 최상단까지 올라감). 탭바 z-index를 올리는 건 임시방편이고, 근본 해결은 위처럼 래퍼를 스크롤 컨테이너로 만드는 거예요.

카드 목록(표가 아닌 것)도 같은 클래스로 "상단 액션 줄 고정 + 목록만 스크롤"을 만들 수 있어요. 참고 구현: admin 역할 관리(roles.html)의 min-h-0 overflow-auto, 직원·팀 관리의 .tbl-outline-flow.

가로 스크롤바 — 표 위·아래에 자동으로 붙어요 2026-07-24

가로로 넘치는 표에는 표 위와 아래 양쪽에 끌 수 있는 가로 스크롤바가 자동으로 붙어요. 마크업에서 할 일은 없습니다 — 앱 시작 시 한 번 호출하는 setupTableXScroll()(@hereby/components)이 DOM을 훑어 붙이고, 나중에 그려지는 표·모달 안 표까지 따라가요.

왜 넣었냐면, 윈도우에는 표를 가로로 스크롤할 방법이 사실상 없어요. 휠은 세로 전용이고 Shift+휠은 대부분 모릅니다. 네이티브 가로 스크롤바는 스크롤 컨테이너 바닥에만 생기는데, 표가 길면 그 바닥이 화면 밖이에요. 그래서 위에도 하나 더 두고, 둘 다 항상 보이게 합니다.

항목	값
대상	가로로 넘치는(scrollWidth > clientWidth) 표의 스크롤 래퍼
노출 범위	PC·태블릿(≥768px = md)만. 모바일은 터치 스크롤이라 붙이지 않아요
레이아웃	높이를 차지하지 않아요 — 음수 마진으로 표 위에 겹쳐 그려요. 표가 아래로 밀리지 않습니다
겹치지 않게 하려면	래퍼(또는 조상)에 data-ds-xscroll-inflow — 바가 자기 자리를 차지하고, 표와의 사이에 분리선(border-top)이 들어가요. 급여 시트(.sheet-scroll)는 기본으로 이쪽입니다
제외	근무 스케줄표(.sched-grid)만 — 자체 스크롤 정책이 따로 있어요
아래쪽 바만	급여 시트(.sheet-scroll), 그리고 data-ds-xscroll="bottom"을 단 래퍼
개별 해제	래퍼나 그 조상에 data-ds-xscroll="off"
썸 색	평상시 neutral-300 + --ds-opacity-50(반투명), hover·드래그 중에는 neutral-400 + 불투명

왜 네이티브 스크롤바를 안 쓰나요?

::-webkit-scrollbar로 "항상 보이는 바"를 만드는 방법은 플랫폼을 너무 탑니다 — macOS는 오버레이라 스크롤하는 동안에만 보이고, Chrome은 같은 요소에 scrollbar-width/scrollbar-color가 있으면 ::-webkit-scrollbar 규칙을 통째로 무시하며, OS의 "스크롤 막대 표시" 설정에도 흔들려요. 그래서 트랙(.ds-xscroll)과 썸(.ds-xscroll__thumb)을 직접 그리고 포인터 드래그를 직접 처리합니다. 어느 OS·브라우저에서도 똑같이 보이고 똑같이 끌려요.

급여 시트는 아래쪽 바만, 그리고 겹치지 않게 붙어요

급여 시트(.sheet-scroll)는 2026-08부터 이 바를 씁니다 — 열이 수십 개라 가로로 넘치는 대표 화면이고, 위의 "윈도우에는 가로 스크롤 입력 수단이 없다"가 가장 아프게 걸리는 곳이에요. 시트만 두 가지가 다릅니다.

• 아래쪽 바 하나만 — 시트의 스크롤 박스는 flex-1로 화면 높이에 맞춰져 있어 아래 바가 항상 보이고, 위 바는 sticky 열 헤더를 10px 가려 스프레드시트에서는 손해가 커요.
• 겹치지 않고 자기 자리를 차지해요(.ds-xscroll--inflow) — 다른 표는 아래에 여백이 있어 겹쳐도 되지만, 시트는 스크롤 박스가 화면 끝까지 차서 맨 아래가 데이터 행(또는 sticky 합계 행) 이에요. 겹쳐 그리면 그 줄이 바에 잘립니다. 흐름 안에 두면 flex-1인 박스가 그만큼 줄고 시트 전체가 바 위쪽에 온전히 들어와요.
• 표와 바 사이에 분리선이 들어가요 — border-top: 1px solid var(--color-line-normal)(시트 툴바·오른쪽 레일과 같은 선). 겹치는 바에는 넣지 않아요, 표 위에 얹혀 있어 행 사이를 가로지르는 줄로 읽히니까요. 테두리가 트랙 안쪽을 먹지 않게 바 높이만 10 → 11px입니다.

둘 다 table-xscroll.ts의 BOTTOM_ONLY_SELECTOR / INFLOW_SELECTOR에 들어 있어 마크업에서 할 일은 없습니다.

가로 flex/grid 부모에는 붙지 않아요

바는 래퍼의 앞뒤 형제로 삽입돼요. 부모가 가로 flex(또는 grid)면 형제가 새 "열"이 돼서 배치가 무너지므로, 그 경우엔 붙이지 않고 넘어갑니다. 바가 안 보이면 래퍼의 부모가 flex-direction: row인지 먼저 확인하세요.

Table

• border-separate border-spacing-0 — sticky thead 안정화 + 라운드 클리핑 정상화.

격자선 — 가로 + 세로 풀 격자 2026-06-15

• 모든 셀(th/td)에 border-bottom + border-right (둘 다 --color-line-normal) → 가로·세로 구분선 격자.
• 우측 끝 셀(:last-child)은 border-right: 0 — 래퍼(:has > table) 외곽선 / .tbl-outline-flow 프레임과 이중선 방지.
• 마지막 행 border-bottom: 0(일반). 단 .tbl-outline-flow(스크롤 따라가는 프레임)는 바닥선 유지.
• border-separate에서는 divide-y가 동작하지 않으므로 각 셀에 직접 지정.

thead

• bg: bg-neutral-50
• text: text-label-assistive text-xs font-semibold
• 셀: text-center px-3 h-9 + 격자선
• sticky 필요 시: sticky top-0 z-10 (스크롤 컨테이너 안에서)

tbody td

• 모두 중앙정렬: text-center px-3 h-9
• hover: hover:bg-bg-alternative

tfoot

• thead와 동일한 bg: bg-neutral-50, font-semibold text-label-normal

그룹 헤더 (rowspan/colspan)

• 묶음 영역 시작 셀에 border-l border-line-normal로 세로 구분.
• rowspan/colspan 셀에도 border-b border-line-normal 유지.

폰트 사이즈 2026-06-19

표 본문 기본 사이즈는 앱 성격에 따라 두 가지를 씁니다. 정보 밀도가 높은 관리형 화면은 12px, 한 화면에 보여주는 양이 적고 가독성을 우선하는 화면은 13px이 기본입니다.

앱	기본 사이즈	적용 방식
admin (4001) — 직원·팀·역할 등 밀도 높은 관리 화면	12px	.cell / .cell-header 에 font-size: 0.75rem(=text-b6)
management-dashboard (4006) — 인건비·청구·인력 분석 등	13px	표 <table> 에 text-b5 유틸 (--text-b5: 13px)

• 토큰 기준: --text-b6 = 12px · --text-b5 = 13px (packages/static/styles/design-system.css). 임의 px 대신 text-b6 / text-b5 토큰 유틸을 쓰세요.
• 12px 바닥선 — 두 앱 모두 12px보다 작은 값 금지. admin은 .admin-app table:not(.sched-grid) .text-[1px]~[11px] { font-size: 12px } 룰로 sub-12px 임의 px 유틸을 전 구간 끌어올립니다(13px+ 유지, !important 없음). 모달 포함, .sched-grid만 제외.
• 헤더(thead)는 본문과 동일 사이즈 + font-semibold 로만 구분(별도 폰트 사이즈 키우지 않음).
• 라벨(배지·칩·필·태그·카운트)도 12px 이상만 사용. text-[10px]/text-[11px] 대신 text-xs(12px)+ 사용.
• 근무 스케줄표(Table 2, .sched-grid)는 이 규칙에서 제외 — 별도 스펙(≈11.2px)을 따릅니다(근무 스케줄표).

숫자·식별자 표기 2026-07-07

• 정렬 숫자 열은 tabular-nums — 금액·시간·건수·날짜가 세로로 늘어서는 열은 Tailwind tabular-nums 유틸로 자릿수 폭을 고정해 줄을 맞춥니다(우측 정렬 + 천 단위 쉼표와 함께). 셀에 값 한 개만 있는 열(단독 카운트 등)은 굳이 붙이지 않아도 됩니다.
• 사번·코드 등 식별자에 font-mono 금지 — --font-mono(source-code-pro)는 UI 폰트(Inter) 옆에서 코드처럼 튀어 보입니다. 사번·조직 코드·수당/공제 코드는 Inter 기본으로 두세요(font-mono는 코드 블록·키캡 전용). 이번 정리에서 급여 등급표·조직 코드·사번(admin 증명서·설정, team-manager 문서관리)의 font-mono를 제거하고 정렬 열에 tabular-nums를 적용했습니다.
• 근거·전체 규칙: 타이포그래피 §숫자 표기.

빈 상태 (empty state) 2026-07-07

데이터가 0건일 때는 표 밖 별도 블록이 아니라 <tbody> 안 한 줄로 그립니다 — <td colspan="열 수" class="cell text-center" style="height:200px">. 카드 테두리·헤더(thead)는 그대로 두고 본문만 안내 문구로 채워 레이아웃이 흔들리지 않습니다. 안내 문장은 ~해요체 + 마침표(아래 콘텐츠·라이팅). 자격유형 표(admin 설정)·공지 표(총무)·문서관리(team-manager)가 이 방식으로 통일됐습니다.

콘텐츠·라이팅 (UI/UX 정책 연계) 2026-06-16

표의 시각 스펙(격자·크기·토큰)과 별개로, 표 안에 들어가는 셀 값·컬럼명·빈 상태 문구의 라이팅·용어·숫자 표기는 서비스 공통 UI/UX 정책이 단일 출처입니다.

• 숫자 표기: 금액·건수·시간은 천 단위 쉼표(1,000 · 100,000) — 셀·tfoot 합계·요약 모두 동일 (정책 §5).
• 짧은 셀 값: 이름없음·미지정 등은 작은 문구(띄어쓰기 없음), 빈 상태 안내 문장은 ~해요체 + 마침표 (정책 §1).
• 용어 통일: 컬럼명·라벨은 역할·관리·저장·미지정 등 정책 §2 용어표 기준.

클래스 & 룩

클래스	적용	값
.employees-tbl-v2 td/th	모든 셀	height 36px(h-9) · px-3 · 가로+세로 격자선 1px var(--color-line-normal)
.cell--compact	좁은 셀	padding 축소
td/th:last-child	마지막 열	border-right: 0 (우측 격자 제거)
tbody tr:last-of-type td	마지막 행	border-bottom: 0 (단 .tbl-outline-flow 제외)
thead th	헤더	bg-neutral-50 + 하단 격자선
.row-hover:hover	행	background var(--color-bg-alternative) (= neutral-50)
.cell-input:focus	인라인 편집 셀	bg #eef4ff + focus ring (※ 검토 필요)

.tbl-v2-sticky-*(고정 컬럼)·.tbl-outline-flow(스크롤 프레임)는 admin 직원관리 등 일부 화면 전용입니다.

인터랙션 & 상태 2026-06-18

표에서 실제로 호버·클릭·포커스·스크롤 시 어떤 시각 반응이 일어나는지 정리한 구간이에요. 라이브 미리보기에서 직접 확인할 수 있어요.

트리거	대상	효과	출처
행 hover	.row-hover:hover	행 배경 --color-bg-alternative로 틴트 (= neutral-50, 불투명 표면 교체)	design-system.css .row-hover:hover
행 hover (유틸 방식)	hover:bg-bg-alternative가 붙은 행	동일 — 일부 화면이 .row-hover 대신 직접 유틸로 적용	화면 인라인
셀 클릭(인라인 편집)	.cell-input	클릭/포커스 시 편집 모드 진입	화면 마크업
셀 포커스	.cell-input:focus	배경 #eef4ff + box-shadow focus ring(--ds-color-focus 65%)	design-system.css .cell-input:focus
액션 아이콘 hover	.icon-btn:hover	28px 원형 배경 --color-neutral-100 + 아이콘색 neutral-400 → neutral-700. title로 툴팁	admin main.css .icon-btn (모달+아이콘 버튼 패턴)
세로 스크롤	thead th.sticky	헤더가 스크롤 컨테이너 상단에 고정(sticky top-0 z-10)	화면 마크업
가로 스크롤	.is-x-scrolled 토글	고정 컬럼(.tbl-v2-sticky-3::after) 우측에 그림자 노출 → 스크롤됨을 표시	admin main.css
고정 컬럼 + 행 hover	tr.row-hover:hover .tbl-v2-sticky-*	고정 컬럼도 같은 hover 배경으로 동기화(흰 배경이 비쳐 보이지 않게)	admin main.css

• 호버 효과가 있는 것: 데이터 행(.row-hover 또는 hover:bg-bg-alternative). 호버 효과가 없는 것: thead/tfoot(bg-neutral-50 고정), 격자선.
• 클릭/포커스 효과가 있는 것: 인라인 편집 셀(.cell-input)만. 일반 표시용 셀은 클릭 반응 없음.
• 드래그 선택·fill-handle 등 스프레드시트형 인터랙션은 Table 1에 없습니다 → 그건 Table 2의 영역.

베리에이션 2026-06-18

같은 카드 테이블이지만 화면 요구에 따라 어떻게 나뉘는지 정리했어요. 기본형(위 핵심 스펙)에 아래 모디파이어를 더해 변형합니다.

베리에이션	클래스	무엇이 달라지나	사용처
기본형	.employees-tbl-v2 (또는 admin 글로벌)	36px 행·중앙정렬·풀 격자 카드 표	대부분의 리스트/현황/내역
컴팩트 셀	.cell--compact	셀 padding 축소(0 6px) — 좁은 열(체크박스·아이콘·짧은 코드)에 부분 적용	직원관리 등
고정 컬럼(1~3열)	.tbl-v2-sticky-1 / -2 / -3	좌측 N개 컬럼을 가로 스크롤에도 고정. .frz-2col이면 2열 기준으로 그림자 위치 조정	admin 직원관리 전용
스크롤 추종 프레임	.tbl-outline-flow	외곽선을 wrapper가 아닌 셀 border로 옮겨, 풀-블리드 레이아웃에서 표와 함께 스크롤. 우측 세로선/우상단 라운드는 .tbl-frame-right·.tbl-frame-corner 오버레이가 그림. 마지막 행 바닥선 유지	admin 직원관리 전용
opt-in 행 hover	.row-hover	행에 hover 틴트를 켜는 선택형 클래스(모든 표가 자동으로 갖지는 않음)	인터랙티브 행
그룹 헤더	rowspan/colspan + border-l	묶음 컬럼 헤더. 묶음 시작 셀에 세로 구분선	병동별 인력 현황 등

앱별 구현 분기(같은 룩, 다른 적용 방식):

• admin — .admin-app table:not(.sched-grid) 글로벌 CSS가 셸 안 모든 표(모달 포함)에 자동 적용. 클래스 부여 불필요.
• management-dashboard · team-manager · hr-system — 글로벌 CSS 없음 → 인라인 Tailwind 유틸로 동일 룩 재현. 고정 컬럼·스크롤 프레임 변형은 admin 전용이라 미공유.

사용된 토큰

토큰	용도
--color-line-normal	셀 가로·세로 격자선
--color-neutral-50	thead/tfoot 배경
--color-bg-alternative	.row-hover hover 배경 (= neutral-50 별칭)
#eef4ff (하드코딩)	.cell-input:focus 배경 — 토큰화 검토 대상

검토 필요 사항

• 🔴 .cell-input:focus #eef4ff 하드코딩 — blue 계열 focus 틴트라 토큰(예: focus tint)으로 매핑 검토.
• ✅ .row-hover hover 배경 토큰 통일(2026-06-18) — DS·admin 모두 --color-neutral-50 → 의미 별칭 --color-bg-alternative로 정리(렌더 동일). 호버 틴트(--ds-hover-tint-*)는 버튼/옵션용, 불투명 표면 교체(bg-alternative)는 표 행용으로 역할 분리.
• 🟡 .tbl-v2-sticky-* / .tbl-outline-flow 미공유 — 고정 컬럼·스크롤 프레임은 직원관리 등 전용. 공유 필요 시 별도 정리.

사용처

• admin — .admin-app 스코프 글로벌 CSS로 모든 표에 자동 적용(직원관리·연차·병동·발급내역·근무시간·증명서 양식 등)
• management-dashboard — 병동별 인력 현황(그룹 헤더), 인센티브 내역 (인라인 유틸)
• team-manager — 문서관리(발급내역 정렬·사번 tabular-nums), 근무 관리 목록(.work-tbl)
• admin 설정 · general-affairs — 자격유형 표·공지 표를 공유 스켈레톤(employees-tbl-v2 + 카드 래퍼 + ds-label 상태배지 + colspan 빈 상태)으로 통일 (design/adjust-table)

변경 이력

날짜	내용
2026-08-04	가로 스크롤바를 급여 시트에도 적용 — 제외 목록에서 .sheet-grid/.sheet-scroll을 빼고 .sched-grid만 남겼습니다. 시트는 아래쪽 바만(위 바는 sticky 열 헤더를 가림), 그리고 겹치지 않고 자기 자리를 차지 + 표와의 분리선이 붙습니다(.ds-xscroll--inflow — 시트는 맨 아래가 데이터 행이라 겹치면 잘림). 썸은 평상시 --ds-opacity-50로 반투명, hover·드래그 중에만 불투명 — 표 위에 상시 겹쳐 그려지는 바라 진하면 읽는 내내 눈에 걸립니다 (design/sheet-uiux-fx)
2026-07-24	가로 스크롤바 자동 부착 신설 — 가로로 넘치는 표 위·아래 양쪽에 상시 노출 스크롤바(setupTableXScroll). 윈도우에 가로 스크롤 입력 수단이 없다는 문제에서 출발. 레이아웃 높이 0(음수 마진 오버레이), PC·태블릿(≥768px)만, 트랙·썸 직접 렌더(::-webkit-scrollbar는 플랫폼 편차가 커서 미사용)
2026-07-07	숫자·식별자 표기 + 빈 상태(colspan 행) 스펙 신설 — 정렬 열 tabular-nums·식별자 font-mono 금지 규칙을 표 문서에도 명시(근거는 타이포그래피), 빈 상태를 <tbody> 안 colspan 행으로 통일. 자격유형 표(admin 설정)·공지 표(총무)·문서관리(team-manager)를 공유 스켈레톤(employees-tbl-v2 + 카드 래퍼 + ds-label 상태배지)으로 마이그레이션 (design/adjust-table)
2026-06-19	라이브 미리보기를 페이지 최상단으로 이동(소개 tip 바로 아래) + 접기/펴기 트리 테이블을 예시 3으로 편입(<DemoCollapsibleTable>) — 예시 1 팀 트리·예시 2 직원 관리와 한 섹션으로 통합 (사용자 요청)
2026-06-19	폰트 사이즈 섹션으로 확장 — 앱별 기본 사이즈(admin 12px / management-dashboard 13px) + 토큰(text-b6/text-b5)·헤더 동일 사이즈 규칙 명시(기존 "최소 폰트 12px") (사용자 요청)
2026-06-18	라이브 미리보기를 예시 1 팀 관리(트리) + 예시 2 직원 관리(체크박스·고정 컬럼·정렬·페이지네이션·가로 스크롤) 두 실제 테이블로 분리 재현(<DemoDataTable>·<DemoEmployeeTable>) + 접기/펴기 트리 테이블(<DemoCollapsibleTable>, 경영 대시보드) 섹션 신설
2026-06-18	라이브 미리보기를 단일 표로 통합 — 그룹 헤더·행 hover·컴팩트 셀·인라인 편집(.cell-input)·아이콘 버튼(.icon-btn)을 한 표에서. 인터랙션 & 상태 + 베리에이션 섹션 추가, 액션 아이콘 hover 항목 포함. .row-hover hover 배경을 DS·admin 모두 neutral-50 → 의미 별칭 bg-alternative로 통일(렌더 동일)
2026-06-16	콘텐츠·라이팅(숫자 천 단위 쉼표·짧은 셀 값·용어 통일) UI/UX 정책 연계 섹션 추가
2026-06-15	가로+세로 풀 격자선 + 표 내부 최소 12px 바닥선 규칙 반영(사용자 요청). 우측 끝 셀 border-right:0로 이중선 방지
2026-06-08	Data table 패턴 페이지 신규 작성 + 라이브 미리보기(<DemoDataTable>) (PR #247)
PR #247	.employees-tbl-v2 표 룩을 .admin-app 스코프 → 공유 DS로 승격(!important 없이)