/* === Language Toggle === */
#lang-toggle {
  text-decoration: underline;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
}

/* === Blog Layout === */
.content-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.date-list[lang="en"],
.blog-entry[lang="en"] {
  font-family: "Minion", serif;
  font-weight: 200;
  font-size: 1.3rem;
  letter-spacing: -0.005rem;
  transform: scaleY(0.95);
  transform-origin: top;
  line-height: 1.4;

}

.blog-entry[lang="en"]{
  transform: translateY(-.3rem);
}

[lang="en"] em,
[lang="en"] i,
[lang="en"] .italic-text {
  font-style: italic;
  font-size: 1.26rem;
}

.date-list[lang="ko"],
.blog-entry[lang="ko"] {
  font-family: 'Myungjo-B', serif;
  font-size: 1.1rem;
  line-height: 1.8;
  letter-spacing: .08rem;
}

.date-list {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.date {
  display: block;
  cursor: pointer;
  padding: 0 0 0.5rem 0.5rem;
  transition: transform 0.5s ease-out;
  transform-origin: left bottom;s
}

.date:hover {
  transform: skewX(-15deg);
}

.blog-content {
  width: 75%;
  padding-bottom: 20rem;
}

.blog-entry {
  display: none;
  width: 65%;
  word-break: keep-all;
  transform: translateY(-0.1rem);
}

.blog-entry.active {
  display: block;
}

@media screen and (max-width: 400px) {
  html {
    scroll-behavior: smooth;
  }

  .content-wrapper {
    flex-direction: column;
  }

  .date-list {
    width: 100%;
    order: 2; /* 아래로 보냄 */
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.5rem 0.3rem 5rem 0.3rem;
  }

  .date {
    width: 100%; /* 한 줄에 두 개씩 정렬 */
    padding-left: 0;
    text-align: left;
  }

  .blog-content {
    width: 100%;
    order: 1; /* 위에 표시 */
    padding: 0 0.3rem 10rem 0.3rem;
  }

  .blog-entry {
    width: 100%;
  }
}