@charset "UTF-8";

.header {
  align-items: center;
  background-color: var(--color-bg-dark);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  width: 100%;
}

.header__logo {
  align-items: center;
  color: var(--color-primary);
  display: flex;
  gap: 12px;
  text-decoration: none;
}

.header__logo-icon {
  height: 48px;
  width: auto;
}

.header__logo-text {
  font-size: x-large;
  font-weight: normal;
}

.header__menu {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.footer {
  background-color: var(--color-bg-dark);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: medium;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: 0px;
  padding: 12px 24px;
  width: 100%;
}

.footer__copyright a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__copyright a:hover {
  color: var(--color-accent);
}

/* 홈 화면에서는 안보이도록 */
body[id="tt-body-index"] .header,
body[id="tt-body-index"] .footer {
  display: none;
}

.content-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 774px;
}

.article-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

.article-list__item {
  align-items: center;
  display: flex;
  gap: var(--space-large);
}

.article-list__item-thumbnail {
  align-items: center;
  background-color: var(--color-bg-dark);
  border-radius: var(--border-radius);
  display: flex;
  height: 128px;
  justify-content: center;
  transition: all 0.2s ease;
  width: 128px;
}

.article-list__item-thumbnail:hover {
  background-color: var(--color-bg-light);
}

.article-list__item-thumbnail img {
  height: 64px;
  width: 64px;
}

.article-list__item-content {
  box-sizing: border-box;
  flex: 1;
}

.article-list__item-title {
  color: var(--color-primary);
  font-size: x-large;
  font-weight: bold;
}

.article-list__item-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-list__item-title a:hover {
  color: var(--color-accent);
}

.article-list__item-summary {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-list__item-info {
  color: var(--color-info);
  display: flex;
  font-size: small;
  gap: 4px;
  margin-bottom: 12px;
}

.article-list__item-info a {
  color: var(--color-info);
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-list__item-info a:hover {
  color: var(--color-accent);
}

.paging {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 64px 0px;
}

.paging__nav-button {
  height: 24px;
  width: 24px;
}

.paging__index-button:has(.selected) {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  pointer-events: none;
}