/* COMMON */
/* rem reference set */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* COMMON */
html.fixed {
  font-size: 16px; /* 1rem = 16px */
}

body {
  width: 70rem;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.0;
  color: #333;
  margin:0 auto;
  border: 1px solid #FFF;  
}

html, body {
  height: 200vh;
  overflow-x: auto;
  overflow-y: auto;
}

@media (max-width: 768px) {
  body {
    width: 100%; /* 모바일에서는 폭 고정 대신 전체 너비 사용 */
  }
}

a {
  text-decoration-line: none;
}

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 상단 고정 영역 */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  height: 5.5rem;
  background-color:#38a532;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  z-index: 1000;
  border: 1px solid #2715ca;    
  margin: 0 auto;
}

/* 메인 내용 */
main {
  margin: 10rem 0 2.5rem 0;
  padding: 1rem;
  overflow-y: auto;
  /* 전체 높이 - header - footer */
  /* height: calc(100vh - 10rem); */
  height:auto;
  min-height: 100vh;  /* 화면 한 뷰포트 이상 차지 */
  background: #f9f9f9;
}

/* 하단 고정 영역 */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  background-color: #333;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}