.marquee-wrapper {
  position: fixed;
  top: 0;
  z-index: 1000;
}

/* === Header Menu Fixed=== */
.header-menu {
  position: fixed;
  top: 2.3rem;
  z-index: 999;
}

/* === Main Layout === */
.content-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  font-family: "minion-pro", serif;
  font-size: 1.25rem;
  margin-top: 4rem;
}

/* === Info List (Sidebar) === */
.info-list {
  position: fixed;
  top: 4rem;
  left: 0;
  z-index: 998;
  width: 25%;
  height: calc(100vh - 5rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.info {
  display: block;
  color: #000;
  text-decoration: none;
  transition: transform 0.4s ease-out;
  transform-origin: left bottom;
  cursor: pointer;
  padding: 0.5rem 0 0 0.5rem;
}

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

/* === Info Content === */
.info-content {
  margin-left: 25%;
  width: 75%;
  padding-bottom: 20rem;
  box-sizing: border-box;
  font-family: "minion-pro", serif;
}

.info-entry {
  font-size: 1.25rem;
  width: 70%;
  margin: 0.2rem 0.125rem 4rem 0;
  line-height: 1.3;
  word-break: keep-all;
  scroll-margin-top: 4.6rem;
}

.info-entry a {
  text-decoration: none;
  color: #0000ff;
}

.info-entry a:hover {
  color: #000;
}

@media screen and (max-width: 400px) {
  /* === Fixed 해제 === */
  .marquee-wrapper,
  .header-menu,
  .info-list {
    position: static;
  }

  .content-wrapper {
    flex-direction: column;
    margin-top: 0; /* fixed 헤더 없는 만큼 여백 제거 */
  }

  .info-list {
    display: none;
  }

  .info-content {
    margin-left: 0;
    width: 100%;
    padding: 0 0.3rem 10rem 0.3rem;
  }

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