.table-region {
  width: 100%;
  font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
  font-size: 14px;
}

.history-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border-top: 2px solid #406180;
  border-bottom: 1px solid #406180;
  font-family: 'Noto Sans KR', Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
}

.history-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.history-table .column-number { width: 10%; }
.history-table .column-department { width: 20%; }
.history-table .column-name { width: 30%; }
.history-table .column-period { width: 40%; }

.history-table th,
.history-table td {
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.history-table thead th {
  background: #f8fbfc;
  color: #444;
  font-weight: 700;
  border-bottom: 1px solid #406180;
}

.history-table tbody td {
  background: #fff;
  color: #666;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

/* 내용이 없는 행도 원본의 한 줄 높이를 유지합니다. */
.history-table tbody td:empty::before {
  content: '\00a0';
}

.history-table tbody tr:last-child td {
  border-bottom: 1px solid #406180;
}

.history-table tr > :first-child {
  white-space: nowrap;
  overflow-wrap: normal;
}

.history-table .period-text {
	display: inline-block;
	width: 20ch;
	max-width:100%;
	text-align:left;
	font-variant-numeric: tabular-nums;
}


@media (max-width: 479px) {
  .history-table { font-size: 13px; }
  .history-table tbody td { padding: 10px; }

  .history-table tr > :first-child {
  	padding-left: 4px;
  	padding-rigth: 4px;
	}
}