/* news/index */

/* Year filter tab bar */
.news-yr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.yr-tab {
  display: inline-block;
  padding: 5px 18px;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 14px;
  font-family: inherit;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s, color .12s;
}

.yr-tab:hover {
  background-color: #e8f1f8;
}

.yr-tab.active {
  background-color: var(--color-primary);
  color: #fff;
}

/* News table */
.news-table {
  border-collapse: collapse;
  width: 100%;
}

.news-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

.news-date {
  width: 160px;
  white-space: nowrap;
  color: #555;
  font-size: 14px;
}

.news-title a {
  color: var(--color-link);
  text-decoration: none;
}

.news-title a:hover {
  text-decoration: underline;
}

.news-badge-new {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background-color: #e00;
  color: #fff;
  font-size: 11px;
  border-radius: 2px;
  vertical-align: middle;
}

.yr-tab--active {
  background-color: var(--color-primary);
  color: #fff;
}

/* show-more */
.news-more-wrap {
  text-align: center;
  margin-top: 20px;
}

.news-more-btn {
  padding: 8px 28px;
  border: 1px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}

.news-more-btn:hover {
  background-color: var(--color-primary);
  color: #fff;
}