/* ===================================================================================================
   상세화면 푸터 — 사이트 푸터(.footer)와 같은 모양.

   src/styles/style.css 의 chapter 08 블록을 그대로 옮겼다. 상세는 sandbox iframe 안의 별개
   문서라 Next 가 번들한 CSS 를 쓸 수 없고, style.css(140KB) 를 통째로 부르면 문서 고유
   스타일과 충돌한다 — 필요한 .footer* 만 뽑았다.
   ⚠️ src/styles/style.css 의 .footer 규칙을 바꾸면 여기도 같이 볼 것.

   원본과 딱 하나 다른 점: 원본은 흰 페이지 위에 얹히는 것을 전제로 background:transparent
   지만, 상세는 그 위가 어두운 밴드(#0C0C0C)라 흰 배경을 직접 칠한다.
   =================================================================================================== */

/* chapter 08: footer (Figma Frame 47). White full-screen — big logo upper-left + a bottom bar:
   links + copyright (left) / address + contact (right). All #3E3F44. z-index:1 covers the bg-line. */
.footer {
  position: relative;
  z-index: 1;
  height: 100vh;
  background: transparent;
  overflow: hidden;
  color: #3e3f44;
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
/* logo = container holding two overlaid SVGs (wordmark + planet) so each animates independently and
   the wordmark's blur is a CSS filter on the SVG ELEMENT (spreads freely, no SVG filter-region clip). */
.footer-logo {
  position: absolute;
  left: clamp(48px, calc(18.75vw - 144px), 216px);
  top: 38%; /* Figma top is ~37-41% of the frame across breakpoints; 38% is the balanced single value */
  width: clamp(448px, calc(14.286vw + 301.71px), 576px);
  line-height: 0;
}
.footer-wordmark {
  display: block;
  width: 100%;
  height: auto;
} /* in flow -> sizes the container */
.footer-planet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
} /* overlay, same coords */
/* reveal on scroll-in (.footer.in): wordmark blur-fades up first, then the planet "arrives" (scales
   in from small with a soft overshoot, a beat later). */
.footer-wordmark,
.footer-planet {
  opacity: 0;
  will-change: opacity, filter, transform;
}
.footer-wordmark {
  filter: blur(14px);
  transform: translateY(12px);
  transition:
    opacity 0.9s ease,
    filter 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-planet {
  transform-origin: 90% 33%;
  transform: scale(0.35); /* origin ~ planet centre in the viewBox */
  transition:
    opacity 0.4s ease 0.24s,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s;
}
.footer.in .footer-wordmark {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.footer.in .footer-planet {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .footer-wordmark,
  .footer-planet {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}
.footer-bottom {
  position: absolute;
  bottom: clamp(48px, calc(1.7857vw + 29.71px), 64px);
  left: clamp(48px, calc(18.75vw - 144px), 216px);
  right: clamp(48px, calc(18.75vw - 144px), 216px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}
.footer-left {
  display: flex;
  flex-direction: column;
  gap: clamp(50px, calc(1.0045vw + 39.71px), 59px);
} /* Figma links->copyright 52 + line-box compensation */
.footer-links {
  display: flex;
  gap: 80px;
}
.footer-links a {
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  line-height: 1;
  padding: 4px 0;
  border-bottom: 1px solid #3e3f44; /* underline-button style (Figma) */
  font-size: clamp(14px, calc(0.2232vw + 11.71px), 16px);
}

.footer-copy {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5;
  font-size: clamp(12px, calc(0.4464vw + 7.43px), 16px);
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-weight: 600;
  line-height: 1.5;
  font-size: clamp(12px, calc(0.4464vw + 7.43px), 16px);
  margin-right: min(0.9375vw, 24px);
} /* Figma: contact sits 18px (@1920) -> 24px (@2560) inside the right gutter (layout grid) */
.footer-contact p {
  margin: 0;
}
.footer-tf {
  display: flex;
}
.footer-tf span:first-child {
  flex: 0 0 159px;
}
/* 상세 문서에서는 위가 어두운 밴드라 푸터가 자기 배경을 갖는다 (원본은 transparent) */
.footer {
  background: #fff;
}

/* ---------------------------------------------------------------------------------------------------
   모바일 (≤1023) — 푸터를 감춘다 (사용자 요청).

   상세 문서는 모바일에서 본문만 보여 준다. 사이트 자체 모바일 푸터가 목록/홈에 따로 있으므로
   상세 안에 또 두면 중복이고, PC 푸터는 로고 448px + 좌우 절대배치라 375 에서 121px 넘친다.

   ⚠️ 다시 보여 주려면 display:none 만 지우면 되는 게 아니다 — 넘침을 막던 모바일 레이아웃
   규칙(로고 246px · 패딩 80/20/32 · 13px · column-reverse)이 여기 있었고 지금은 지웠다.
   git 이력(footer.css, 이 커밋 직전)에서 그대로 꺼내 올 것.
   --------------------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .footer {
    display: none;
  }
}