/* ======================================= */
/* 🔹 🚀 테이블 색 스타일링 */
/* ======================================= */

/* 🔹 테이블 (Table) */
.table {
    background-color: var(--table-bg);
    color: var(--text-color);
}

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

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


/* ======================================= */
/* 🔹 🚀 스크롤바 스타일링 */
/* ======================================= */

/* ✅ 모든 스크롤바 두께 조정 */
::-webkit-scrollbar {
    width: 6px; /* 스크롤바 너비 (더 얇게 조정) */
}

/* ✅ 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 연한 회색 */
    border-radius: 10px;
}

/* ✅ 스크롤바 핸들 (움직이는 부분) */
::-webkit-scrollbar-thumb {
    background: #888; /* 기본 색상 */
    border-radius: 10px; /* 둥글게 */
}

/* ✅ 스크롤바 핸들 호버 시 */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* 더 어두운 색 */
}

/* ✅ Firefox에서 스크롤바 두께 조정 */
.scroll-container {
    scrollbar-width: thin; /* 기본보다 얇은 스크롤바 */
    scrollbar-color: #888 #f1f1f1; /* 스크롤 핸들 & 배경 색상 */
}

/* ================================ */
/* 🔹 1. 테이블 전체 스타일 */
/* ================================ */
.table {
    font-size: 0.8rem;  /* 기본 폰트 크기 */
    border-collapse: collapse;  /* 셀 간격 제거 */
    width: 100%;
    cursor: pointer; /* 🔹 테이블 커서 변경 */
}

.table td,
.table th {
    padding: 0.3rem;  /* 기본 패딩 */
    vertical-align: middle;  /* 텍스트 중앙 정렬 */
    white-space: nowrap;  /* 줄바꿈 방지 */
    overflow: hidden;
    text-overflow: ellipsis;  /* 긴 텍스트는 ... 처리 */
    border: 1px solid #dee2e6; /* 셀 보더 추가 */
}

/* ================================ */
/* 🔹 2. 테이블 헤더 (thead) */
/* ================================ */
.table thead th {
    position: sticky;
    top: 0;
    background-color: #f4f6f9;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
    font-weight: 600;
    font-size: 0.75rem;  /* 12px */
    letter-spacing: 0.03em;
    z-index: 1;
}

/* ================================ */
/* 🔹 3. 작은 테이블 (table-sm) */
/* ================================ */
.table-sm td, 
.table-sm th {
    padding: 0.3rem 0.5rem;  /* 상하 패딩 축소 */
    line-height: 1.2;  /* 줄 높이 축소 */
}

/* ================================ */
/* 🔹 4. 테이블 행 강조 (하이라이트) */
/* ================================ */
.table tr.highlight {
    background-color: rgba(0, 123, 255, 0.15);
    /* box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.2); */
    transition: all 0.2s ease;
    font-weight: 500;
}

/* ================================ */
/* 🔹 5. 테이블 보더 및 반응형 */
/* ================================ */
.table-responsive {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/* ================================ */
/* 🔹 6. 테이블 호버시 애니메이션 */
/* ================================ */
/* 🔹 행(tr) 기본 상태 */
.table tr {
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 효과 */
}

/* 🔹 셀(td)에 마우스를 올리면 행(tr)이 살짝 떠오름 */
.table tr:hover {
    transform: translateY(-3px); /* 행을 살짝 위로 이동 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 살짝 떠오르는 그림자 */
    background-color: rgba(0, 123, 255, 0.1); /* 배경색 강조 */
}

/* ================================ */
/* 🔹 6. 테이블 열 크기 고정 */
/* ================================ */
.fixed-table {
    width: 100%; /* ✅ 테이블이 부모 컨테이너의 전체 너비를 차지하도록 설정 */
    table-layout: fixed; /* ✅ `colgroup`의 너비 값을 강제 적용 */
}