/* ─────────────────────────────────────────────
   TABLE — SLUR Design System × slur-guidelines
   table_wrap(카드형 래퍼) + table_data(테이블).
   숫자 열은 m_num(tabular-nums), 정렬 헤더는 m_sort(안에 i_sort 버튼).
   정렬 상태의 정본은 th의 aria-sort="ascending|descending"(표준 속성) —
   data-state를 붙이지 않는다. 정렬 로직은 프로젝트(또는 TanStack Table 등)가
   하고, 표현은 aria-sort를 읽는 CSS가 한다. 페이지네이션은 pagination.css.
   셀 여백은 rem 토큰(텍스트와 함께 확대).
   ───────────────────────────────────────────── */

.table_wrap { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-12); background: var(--color-surface-card); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); }   /* position: relative — 표 안 a11y_hidden(absolute) 같은 절대 배치 자손을 래퍼 안에 가둔다(없으면 모바일에서 문서가 가로로 밀린다) */
/* 좁은 화면 — 표 자체를 줄이지 않고 가로 스크롤. 열을 숨기는 선택은 페이지가 한다 */
.table_wrap .i_scroll, .table_wrap .i_body { overflow-x: auto; }
.table_wrap .i_foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) var(--space-16); border-top: 1px solid var(--color-border-subtle); }
.table_wrap .i_count { font-size: var(--text-xs); color: var(--color-text-muted); }
.table_wrap .i_btn_wrap { display: flex; gap: var(--space-4); }

.table_data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table_data th { padding: var(--space-12) var(--space-16); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-align: left; }
.table_data td { padding: var(--space-12) var(--space-16); }
.table_data thead tr { border-bottom: 1px solid var(--color-border-subtle); }
.table_data tbody tr { border-bottom: 1px solid var(--color-border-subtle); transition: background-color var(--duration-fast) var(--ease-standard); }
.table_data tbody tr:hover { background: var(--color-surface-hover); }
.table_data tbody tr:last-child { border-bottom: none; }

/* 열 변형 */
.table_data .m_num { font-variant-numeric: tabular-nums; text-align: right; }
.table_data td.m_muted { color: var(--color-text-muted); }

/* 정렬 헤더 — th 여백을 버튼이 대신 채워 헤더 전체가 클릭 영역 */
.table_data th.m_sort { padding: 0; }
.table_data .i_sort { display: inline-flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-12) var(--space-16); border: none; background: transparent; font: inherit; color: inherit; text-align: inherit; cursor: pointer; user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
.table_data .i_sort:hover { color: var(--color-text-primary); }
.table_data .i_sort svg { width: 1em; height: 1em; flex: none; opacity: 0.4; transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.table_data th[aria-sort] .i_sort { color: var(--color-text-primary); }
.table_data th[aria-sort] .i_sort svg { opacity: 1; }
.table_data th[aria-sort="descending"] .i_sort svg { transform: rotate(180deg); }
.table_data th.m_num .i_sort { justify-content: flex-end; }

/* 셀 내부 요소 */
.table_data .i_user { display: flex; align-items: center; gap: var(--space-8); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.table_data .i_avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-brand-soft); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-brand); flex: none; }