.page-content {
  /* padding-top: 0.5rem; */
}

.page-section {
  margin: 1rem calc(var(--body-padding) / 1.1);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.post-item{
  /* padding: 0 0 1rem 0; */
}
.post-item .title-kr{
  max-width: 85%;
  width: 100%;
  margin: 0 auto;
}

.post-content {
  color: var(--color-text);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-red);
}

/* Ensure links inside posts use the text color */
.post-content a {
  color: var(--color-text);
}

.post-content .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin: 0;
  align-items: center;
  font-size: calc(var(--base-font-size) * 0.9);
}

.post-content .column {
  grid-column: span var(--span, 12);
}

.post-content .blocks p {
  color: var(--color-text);
}

.post-title-toggle {
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.post-title-toggle .title-kr,
.post-title-toggle .title-en {
  color: var(--color-text);
  transition: all 0.2s ease;
  max-width: 45%;
  width: 100%;
}

.post-title-toggle .title-kr.active,
.post-title-toggle .title-en.active {
  color: var(--color-red);
}

.toggle-content {
  width: 45%;
  margin: 0 auto 0 auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

.toggle-content.active {
  max-height: 2000px;
  opacity: 1;
}

/* Mobile responsive padding */
@media (max-width: 1024px) {
  .page-section {
    margin: 1rem 2rem;
  }
}

@media (max-width: 768px) {
  .post-item .title-kr {
    max-width: 90%;
  }
  
  .post-title-toggle .title-kr,
  .post-title-toggle .title-en {
    max-width: 90%;
  }
  
  .toggle-content {
    width: 90%;
  }
}