/* [Define404] */
/* Define404 헤더 로고 Lottie.
   logo-lottie.js 가 .brand 안에 .d404-logo 를 넣고 .brand 에 .is-lottie 를 붙인다.
   붙기 전에는 원래 인라인 SVG(.wordmark)가 그대로 보인다. */

.d404-logo {
  position: relative;
  display: block;
  width: 132px;
  aspect-ratio: 550.63 / 76.56;
  pointer-events: none;
}
/* 컴포지션(600 x 176)은 글자 상자 둘레에 여백을 둔다. 여백만큼 바깥으로 넓혀 글자 상자를 .wordmark 와 겹친다 */
.d404-logo-stage {
  position: absolute;
  left: -4.3587%;
  top: -65.308%;
  width: 108.966%;
  height: 229.885%;
}
.d404-logo-stage svg { display: block; overflow: visible; }

/* Lottie 가 준비되기 전에는 상자를 숨긴 채 자리만 잡지 않는다 */
.brand:not(.is-lottie) .d404-logo { display: none; }

/* 준비되면 인라인 SVG 는 화면에서만 감춘다(링크의 aria-label 이 이름을 맡는다) */
.brand.is-lottie { position: relative; }
.brand.is-lottie .wordmark {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  view-transition-name: none;
}
.brand.is-lottie .d404-logo { view-transition-name: d404-wordmark; }

/* 접힌 상태(D~)에서도 머리 배치가 흔들리지 않도록 상자 폭은 그대로 둔다 */

@media (max-width: 900px) {
  .d404-logo { width: 112px; }
}
@media (max-width: 360px) {
  .d404-logo { width: 96px; }
  .wordmark { width: 96px; }
}