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

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

/* 테이블 스타일링 */
.table-wrapper{
  height: 625px;
  block-size: 625px;
  overflow-y: auto;
  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;
  }

  /* table 요소의 border를 상속시켜서 스타일링 */
  thead, tbody, tr, th, td{
    border: inherit;
  }

  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;
  }
}