/* ============================================================
   common/table.css — 전체 공통 테이블 스타일
   ============================================================ */


/* ============================================================
   1. 전역 스크롤바
   ============================================================ */

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--bg-light); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb        { background: var(--color-gray-400); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover  { background: var(--color-gray-600); }

.scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-400) var(--bg-light);
}


/* ============================================================
   2. 테이블 기본
   ============================================================ */

.table {
    font-size: var(--fs-sm);
    border-collapse: collapse;
    width: 100%;
    cursor: pointer;
    background-color: var(--table-bg);
    color: var(--text-primary);
}

.table td,
.table th {
    padding: var(--space-xs) var(--space-sm);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--table-border);
}

.table th {
    background-color: var(--table-header-bg);
}

.table td {
    border-color: var(--table-border);
}


/* ============================================================
   3. 테이블 헤더 (sticky)
   ============================================================ */

.table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-base);
    background-color: var(--table-header-bg);
    border-bottom: 2px solid var(--table-border);
    color: var(--color-gray-600);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    letter-spacing: 0.03em;
}


/* ============================================================
   4. table-sm 패딩
   ============================================================ */

.table-sm td,
.table-sm th {
    padding: var(--space-xs) var(--space-sm);
    line-height: 1.2;
}


/* ============================================================
   5. 행 강조 (highlight)
   ============================================================ */

.table tr.highlight {
    background-color: var(--table-hover-bg);
    transition: var(--transition-base);
    font-weight: var(--fw-medium);
}


/* ============================================================
   6. 행 호버 애니메이션
   ============================================================ */

.table tr {
    transition: background-color .15s ease;
}

.table tr:hover {
    background-color: var(--table-hover-bg);
}


/* ============================================================
   7. table-responsive 보더
   ============================================================ */

.table-responsive {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}


/* ============================================================
   8. 고정 테이블 레이아웃
   ============================================================ */

.fixed-table {
    width: 100%;
    table-layout: fixed;
}