/* Unified top navigation labels. */
body.is-works #app .works-stitch-page {
  --works-nav-height: clamp(64px, 5.85vw, 120px) !important;
}

body.is-works #app .works-original-nav {
  padding: 0 6.5vw 12px !important;
}

body.is-works #app .works-original-nav::after {
  bottom: 12px !important;
}

body.is-works #app .works-original-nav a,
body.is-works #app .works-original-nav a span,
body #app .detail-original-nav a,
body #app .detail-original-nav a span,
body.is-profile #app .about-nav a,
body.is-profile #app .about-nav a span,
body.is-big-screen #app .big-screen-page > .big-screen-back,
body.is-big-screen #app .big-screen-page > .big-screen-back span,
body.is-black-ant-pc #app .black-pc-page > .big-screen-back,
body.is-black-ant-pc #app .black-pc-page > .big-screen-back span {
  font-size: 20px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

body #app .detail-original-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 102;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108px;
  padding: 0 6.5vw;
  pointer-events: none;
}

body #app .detail-original-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 12px;
  gap: 14px;
  color: rgba(244, 247, 250, 0.9);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: auto;
}

body #app .detail-original-nav a:hover {
  color: #2ce7f5;
  text-shadow: 0 0 14px rgba(44, 231, 245, 0.45);
}

body.is-works #app .works-original-nav a {
  min-height: 52px !important;
  padding: 0 12px !important;
  gap: 14px !important;
}

/* Keep every project detail return bar identical to the works navigation. */
body.is-big-screen #app .big-screen-page,
body.is-black-ant-pc #app .black-pc-page {
  --detail-nav-height: 120px !important;
  padding-top: var(--detail-nav-height) !important;
}

body.is-big-screen #app .big-screen-page::after,
body.is-black-ant-pc #app .black-pc-page::after {
  height: var(--detail-nav-height) !important;
}

body.is-big-screen #app .big-screen-page::before,
body.is-black-ant-pc #app .black-pc-page::before {
  top: calc(var(--detail-nav-height) - 13px) !important;
  right: 6.5vw !important;
  left: 6.5vw !important;
}

body.is-big-screen #app .big-screen-page > .big-screen-back,
body.is-black-ant-pc #app .black-pc-page > .big-screen-back {
  top: 0 !important;
  left: 6.5vw !important;
  width: auto !important;
  height: calc(var(--detail-nav-height) - 12px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  gap: 14px !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 820px) {
  body.is-works #app .works-stitch-page { --works-nav-height: 72px !important; }
  body.is-works #app .works-original-nav { padding: 0 14px 10px !important; }
  body.is-works #app .works-original-nav::after { right: 14px !important; bottom: 10px !important; left: 14px !important; }
  body.is-works #app .works-original-nav a,
  body.is-works #app .works-original-nav a span,
  body #app .detail-original-nav a,
  body #app .detail-original-nav a span,
  body.is-profile #app .about-nav a,
  body.is-profile #app .about-nav a span,
  body.is-big-screen #app .big-screen-page > .big-screen-back,
  body.is-big-screen #app .big-screen-page > .big-screen-back span,
  body.is-black-ant-pc #app .black-pc-page > .big-screen-back,
  body.is-black-ant-pc #app .black-pc-page > .big-screen-back span { font-size: 16px !important; }

  body #app .detail-original-nav {
    height: 62px;
    padding: 0 14px;
  }

  body #app .detail-original-nav a {
    min-height: 44px;
    padding: 0 8px;
    gap: 10px;
  }

  body.is-big-screen #app .big-screen-page,
  body.is-black-ant-pc #app .black-pc-page {
    --detail-nav-height: 72px !important;
  }

  body.is-big-screen #app .big-screen-page::before,
  body.is-black-ant-pc #app .black-pc-page::before {
    top: 61px !important;
    right: 14px !important;
    left: 14px !important;
  }

  body.is-big-screen #app .big-screen-page > .big-screen-back,
  body.is-black-ant-pc #app .black-pc-page > .big-screen-back {
    left: 14px !important;
    height: 62px !important;
    padding: 0 12px !important;
  }
}