/* 1. 가로/세로 스크롤 컨테이너 설정 */
.overflow-x-auto {
    max-height: 80vh; /* 세로 높이 제한 */
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem;
}

/* 2. 테이블 레이아웃 고정 (잘림 방지 핵심) */
table {
    width: 100%;
    min-width: 850px; /* 기존 900에서 조금 줄여서 여유 확보 */
    border-collapse: separate; /* sticky 사용 시 필수 */
    border-spacing: 0;
    table-layout: fixed; /* 열 너비를 강제로 고정 */
}

/* 3. 헤더 고정 및 배경색 설정 */
.sticky-th th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #1e293b; /* 배경색이 없으면 본문이 겹쳐 보임 */
    box-shadow: inset 0 -1px 0 #334155; /* 하단 테두리 대체 */
    white-space: nowrap;
}

/* 4. 각 열의 너비 배분 (전체 합이 min-width에 맞게 조정) */
th:nth-child(1) { width: 25%; } /* 월 실수령액 */
th:nth-child(2) { width: 25%; } /* 진짜 세전 연봉 */
th:nth-child(3) { width: 25%; } /* 월 세전 총급여 */
th:nth-child(4) { width: 25%; } /* 공제 합계 */

/* 5. 지브라 패턴 및 호버 효과 (선택사항) */
tbody tr:nth-child(even) { background-color: #f8fafc; }
tbody tr:hover { background-color: #f1f5f9; }

td {
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}