/* 스크롤하면 숨었다 나타나는 고정 헤더. 다시 나타날 때 본문 글자와 겹치지 않게 화면 폭 전체에 배경을 깔고,
   안쪽 여백으로 메인 헤더와 같은 폭(92%, 최대 1480px)을 맞춘다 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  width: auto;
  max-width: none;
  padding-inline: max(4%, (100% - var(--header-max)) / 2);
  background: var(--color-paper);
}
body {
  padding-top: 112px;
}

/* 화살표를 영문 서체용 span으로 분리해도 원래처럼 한 칸만 띄운다 (.text-link 기본 gap은 32px).
   본문용 위 여백(.text-link의 margin-top)을 없애고, 상자 아래 끝의 밑줄까지 포함해 로고와 가운데가 맞도록 9px 올린다.
   상자 중앙에 두면 글자는 로고와 맞아도 밑줄이 로고 아래로 내려가 버튼 전체가 처져 보인다 */
.header .text-link {
  gap: 0.3em;
  margin-top: 0;
  transform: translateY(-9px);
}

/* 404 페이지도 이 파일을 쓴다. 본문이 짧아 푸터가 화면 중간에 뜨지 않도록 본문을 남은 높이만큼 늘린다 */
.page-not-found {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.page-not-found .legal {
  flex: 1;
}
.legal .not-found-code {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: clamp(88px, 14vw, 160px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.legal {
  width: var(--wrap-width);
  max-width: 900px;
  margin: auto;
  padding: 45px 0 70px;
}
.legal h1 {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.6;
}
.legal h2 {
  margin-top: 30px;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 18px;
}
.legal p {
  font-size: 14px;
  line-height: 2;
}
.legal a {
  text-decoration: underline;
}
/* .text-link는 border-bottom으로 밑줄을 긋으므로 본문 링크의 text-decoration과 겹치지 않게 끈다 */
.legal .text-link {
  text-decoration: none;
}
.legal .eyebrow {
  font-family: var(--font-en);
  font-size: 12px;
}

@media (max-width: 700px) {
  .header {
    padding-inline: calc((100% - var(--wrap-width)) / 2);
  }
  body {
    padding-top: 85px;
  }
  .legal {
    padding: 30px 0 45px;
  }
  .legal h1 {
    font-size: 26px;
  }
  .legal h2 {
    font-size: 17px;
  }
  .legal p {
    font-size: 13px;
  }
}