/* Page article */

body.page-article {
  --page-footer-gap: var(--space-192);
  --page-footer-bar: 72px;
  --page-content-width: 568px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page-article > main {
  flex: 1 0 auto;
  min-height: calc(100vh - var(--page-footer-gap) - var(--page-footer-bar));
  padding-inline: var(--space-48);
}

.article-page {
  margin: 0 auto;
  padding-top: var(--space-128);
}

.article {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--page-content-width);
  margin-inline: auto;
}

.article__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.article__date {
  font-size: var(--text-13);
  line-height: 1.3;
  color: var(--color-gray);
}

.article__title {
  margin: 0;
  font-size: var(--text-40);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

.article__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.article__content > * {
  margin: 0;
}

.article__content p,
.article__content li,
.article__summary p,
.article__faq-answer {
  font-size: var(--text-16);
  line-height: 1.5;
  font-weight: 300;
  color: var(--color-black);
}

.article__content h2 {
  font-size: var(--text-24);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-black);
  margin-top: var(--space-8);
}

.article__content h3 {
  font-size: var(--text-20);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-black);
}

.article__content ul,
.article__content ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-left: var(--space-24);
}

.article__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-4);
  background-color: var(--color-white);
}

.article__summary-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--space-8) var(--space-16);
  background-color: var(--color-gray-light);
  border-radius: var(--radius-full);
}

.article__summary-label {
  font-size: var(--text-13);
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-black);
  margin: 0;
}

.article__faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.article__faq-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-gray-light);
}

.article__faq-item:first-child {
  padding-top: 0;
  border-top: none;
}

.article__faq-question {
  font-size: var(--text-17);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-black);
}

.article-page[hidden] {
  display: none;
}

@media (max-width: 968px) {
  body.page-article > main {
    padding-inline: var(--space-24);
  }
}

@media (max-width: 768px) {
  body.page-article {
    --page-footer-gap: var(--space-128);
  }

  .article-page {
    padding-top: var(--space-96);
  }

  .article {
    gap: var(--space-24);
  }

  .article__title {
    font-size: var(--text-32);
  }

  .article__content h2 {
    font-size: var(--text-22);
  }

  .article__content h3 {
    font-size: var(--text-18);
  }
}

@media (max-width: 468px) {
  body.page-article {
    --page-footer-gap: var(--space-64);
  }

  .article-page {
    padding-top: var(--space-128);
  }

  .article__title {
    font-size: var(--text-28);
  }
}