/* ============================================================
	table.css
	Hyomin Design System v1.0 — Table Component

	컴포넌트:
	- .table           — table 래퍼
	- .table__head     — thead 영역
	- .table__body     — tbody 영역
	- .table__row      — tr
	- .table__cell     — td / th 공통
	- .table__cell--head — th 전용 스타일

	States:
	- Default — 기본
	- Hover   — tbody tr:hover → bg gray-100
	============================================================ */

/* ─────────────────────────────────────────
	Table — 래퍼
	───────────────────────────────────────── */

.table {
	border-collapse: collapse;
	table-layout: fixed;
	border: 1px solid var(--gray-300);
	background-color: #ffffff;
	width: 100%;
	min-width: 300px;
}

/* ─────────────────────────────────────────
	Head — thead 영역
	───────────────────────────────────────── */

.table__head {
	background-color: var(--gray-50);
}

/* ─────────────────────────────────────────
	Cell — td / th 공통
	rowspan/colspan 대응: 각 셀에 border를 직접 선언,
	───────────────────────────────────────── */

.table__cell {
	padding: var(--spacing-3); /* 12px */
	text-align: center;
	vertical-align: middle;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	line-height: 24px;
	border: 1px solid var(--gray-300);
}

/* ─────────────────────────────────────────
	Head Cell — th 전용
	───────────────────────────────────────── */

.table__cell--head {
	font-size: var(--font-size-body-base); /* 18px — Figma: thead는 18px */
	line-height: 27px;
	font-weight: var(--font-weight-regular);
}

/* thead / tbody 경계선 — tbody 첫 행 top에 선언
   thead rowspan 여부와 무관하게 항상 경계가 정확히 표시됨 */
.table__body .table__row:first-child .table__cell {
	border-top: 2px solid var(--gray-600);
}

/* ─────────────────────────────────────────
	Hover State — tbody row
	───────────────────────────────────────── */

.table__body .table__row:hover {
	background-color: var(--gray-100);
}


/* ─────────────────────────────────────────
	Dark Mode
	───────────────────────────────────────── */

[data-theme="dark"] .table {
	background-color: var(--gray-800);
	border-color: var(--gray-700);
}

[data-theme="dark"] .table__head {
	background-color: var(--gray-700);
}

[data-theme="dark"] .table__cell {
	border-color: var(--gray-700);
	color: var(--gray-200);
}

[data-theme="dark"] .table__body .table__row:first-child .table__cell {
	border-top-color: var(--gray-500);
}

[data-theme="dark"] .table__body .table__row:hover {
	background-color: var(--gray-700);
}