ANTOOZA-FRONTEND/app/styles/data-table.scss

// ─────────────────────────────────────────────────────────────
// D6 §5.1 — 고밀도 DataTable 스타일 (components/table/DataTable.tsx)
// 원칙: 행 구분 하단 1px 선만(세로선·zebra 없음, nof1/monotaro), 숫자열 우측 정렬 + tabular-nums,
//       sticky thead, 밀도 3단(html[data-density] 변수: --row-h/--cell-fs/--cell-px),
//       우선순위 낮은 열 mobile drop(data-priority='low'), 포인트 컬러는 등락에 미사용.
// ─────────────────────────────────────────────────────────────

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;

	// caption — 기본 sr-only(접근성), captionVisible 시 표시
	.data-table__caption {
		padding: var(--sp-3) 0;
		font-size: var(--fs-sm);
		color: var(--text-muted);
		text-align: left;
		caption-side: top;
	}

	.data-table__caption--sr {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	thead th {
		position: sticky;
		top: 0;
		z-index: 1;
		height: var(--row-h);
		padding: 0 var(--cell-px);
		font-size: var(--cell-fs);
		font-weight: 600;
		color: var(--text-muted);
		background: var(--bg-elevated);
		border-bottom: 1px solid var(--border-strong);
		white-space: nowrap;
	}

	tbody td {
		height: var(--row-h);
		padding: 0 var(--cell-px);
		font-size: var(--cell-fs);
		color: var(--text-primary);
		border-bottom: 1px solid var(--border-light);
		white-space: nowrap;
	}

	// 정렬 (data-align) — 헤더/바디 공통
	[data-align='left'] {
		text-align: left;
	}

	[data-align='right'] {
		text-align: right;
	}

	[data-align='center'] {
		text-align: center;
	}

	tbody tr:hover {
		background: var(--bg-subtle-hover);
	}

	.data-table__row--clickable {
		cursor: pointer;
	}

	// 정렬 가능 헤더 버튼
	.data-table__sort {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		padding: 0;
		font: inherit;
		color: inherit;
		background: none;
		border: none;
		cursor: pointer;

		&:hover {
			color: var(--text-secondary);
		}
	}

	.data-table__sort-icon {
		font-size: var(--fs-2xs);
		color: var(--text-muted);
	}

	// 이름/제목 셀 — 말줄임 (가변 폭)
	.data-table__cell--name {
		max-width: 0;
		width: 40%;
	}

	// 빈 상태
	.data-table__empty {
		padding: var(--sp-7) var(--sp-5);
		font-size: var(--fs-base);
		color: var(--text-muted);
		text-align: center;
	}

	// 우선순위 낮은 열 mobile drop (<768px)
	@media (max-width: 767.98px) {
		[data-priority='low'] {
			display: none;
		}
	}
}

// ── 종목 셀 (StockRow) ──
.stock-cell {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: var(--row-h);
	color: var(--text-primary);

	&:hover .stock-cell__name {
		text-decoration: underline;
	}

	&__name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	&__code {
		flex: 0 0 auto;
		font-size: var(--fs-xs);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}
}

// ── 게시글 셀 (PostRow) ──
.post-cell {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: var(--row-h);
	color: var(--text-primary);

	&:hover .post-cell__subject {
		text-decoration: underline;
	}

	&__prefix {
		flex: 0 0 auto;
		color: var(--text-muted);
	}

	&__subject {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	&__comments {
		flex: 0 0 auto;
		font-size: var(--fs-xs);
		color: var(--az-accent);
		font-variant-numeric: tabular-nums;
	}
}

// ── 등락 표시 (PriceChange) — 색 + 부호 병행 (색맹 대응), 포인트 컬러 미사용 ──
.price-change {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-variant-numeric: tabular-nums;

	&__symbol {
		font-size: var(--fs-2xs);
	}

	&--up {
		color: var(--price-up);
	}

	&--down {
		color: var(--price-down);
	}

	&--flat {
		color: var(--price-flat);
	}
}