@import "./../../common/modern-reset.css";

body {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  margin: 50px;
}

/* 테이블 스타일링 */
.table-wrapper {
  height: 625px;
  block-size: 625px;
  overflow-y: auto; /* 지정한 높이값 넘어갔을 때 table 감싸는 컨테이너에 스크롤바 생성시킴 */
  scroll-snap-type: y mandatory;
}

.table-styling {
  table-layout: fixed;
  border: 1px solid currentColor;
  border-collapse: collapse;
  border-spacing: 0; /* 사이 여백 안주기 */
  width: 100%;
  inline-size: 100%;

  .number {
    inline-size: 10%;
  }

  .name {
    inline-size: 20%;
  }

  .email {
    inline-size: 40%;
  }

  .phone {
    inline-size: 30%;
  }

  th {
    background-color: sandybrown;
  }

  thead,
  tbody,
  tr,
  th,
  td {
    border: inherit;
  }

  thead,
  th,
  td {
    padding: 1em;
  }

  thead {
    position: sticky;
    top: 0;
    inset-block-start: 0;
  }

  tbody tr:nth-child(even) {
    background-color: silver; /* 짝수행에만 지정 */
  }

  tbody tr {
    scroll-snap-align: start; /* 스크롤이 가까운 시작 위치로 자동 이동 */
  }
}