.nav-content {
  color: var(--color-red);
}

.three-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  margin: 0 auto;
  padding: 0 var(--body-padding);
  max-width: calc(100vw - 2 * var(--body-padding));
}

.column {
  cursor: pointer;
}

.nav-content .column:hover .column-title {
  color: var(--color-red-50);
}

.nav-content .column:hover hr {
  border-color: var(--color-red-50);
}

.column a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.lang-en .column a {
  align-items: flex-start;
}

.column-title-kr {
  font-size: calc(var(--base-font-size) * 1.4);
}

.column-title-en {
  font-size: calc(var(--base-font-size) * 1.0);
}

.nav-content .column-title {
  color: var(--color-gray-light);
  transition: color 0.2s ease;
}

.nav-content .column a.active .column-title {
  color: var(--color-red);
}

.nav-content .column hr {
  border: none;
  border-top: 1px solid var(--color-gray-light);
  width: 100%;
  transition: border-color 0.2s ease;
  margin: 0.4rem 0 0.2rem 0;
}

.nav-content .column a.active hr {
  border-color: var(--color-red);
}

/* Mobile responsive padding */
@media (max-width: 1024px) {
  .nav-content {
    /* padding: 0 2rem; */
    max-width: calc(100vw);
  }
  
  .three-column-layout {
    padding: 0 2rem;
    max-width: calc(100vw - 4rem);
  }
}

@media (max-width: 768px) {
  .three-column-layout {
    padding: 0 1rem;
    max-width: calc(100vw - 2rem);
  }
}