/* agilebus_style.css */
@charset "UTF-8";

/* 가로 스크롤 테이블 : 테이블을 감싸는 래퍼 */
.div_wrap {
  width: 100%;          /* 보여줄 영역의 너비 */
  height: auto;            /* 테이블 높이에 맞게 자동 확장 */
  overflow-x: auto;      /* 가로 스크롤 활성화 */
  overflow-y: hidden;    /* 세로 스크롤 숨김 */
  margin: 0 auto;        /* 가운데 정렬 */
  border: 0px solid #ccc; /* 영역 확인용 테두리 */
  padding: 1px;
  -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
}

/* 테이블 기본 스타일 */
.div_wrap table {
  border-collapse: collapse;
  display: block;            /* block으로 설정해야 부모 div 높이에 반영됨 */
  min-width: 600px;      /* 테이블이 wrap보다 넓게 설정 */
}

.div_wrap th,
.div_wrap td {
  border: 1px solid #999;
  padding: 8px 12px;
  text-align: center;
  white-space: nowrap;   /* 셀 내용도 줄바꿈 방지 */
}

/* 헤더 스타일 */
.div_wraps th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 모바일 최적화 */
@media screen and (max-width: 768px) {
  .div_wrap {
    width: 100%;         /* 모바일에서는 전체 너비 사용 */
	height: auto;            /* 테이블 높이에 맞게 자동 확장 */
    padding: 0;          /* 여백 최소화 */
  }
  .div_wrap table {
    min-width: 500px;    /* 모바일에서도 스크롤 발생 */
  }
  .div_wrap th,
  .div_wrap td {
    padding: 6px 8px;    /* 모바일에서 셀 간격 줄이기 */
    font-size: 14px;     /* 글자 크기 축소 */
  }
}

/* 사용 예시
<div class="div_wrap">
  <table>
    <tr><td>..</td>
	</tr>
  </table>
</div>
*/