/* 배경은 채우고, 히어로는 여백 있게 중앙 배치 */
.home-body {
  background: #010a19;
  min-height: 100dvh;
}

.hero-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100dvh - var(--nav-h, 64px));
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
  box-sizing: border-box;
  overflow: hidden;
  background: #010a19;
}

.hero-screen__circuit {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%237ec8ff' stroke-opacity='0.11' stroke-width='1'%3E%3Cpath d='M12 40h48l22 22v48l-18 18M100 14v42l28 28h46M156 110l28 28v42M56 156h56l22 22M0 100h36l18-18h44'/%3E%3Ccircle cx='82' cy='62' r='2.5' fill='%237ec8ff' fill-opacity='0.2' stroke='none'/%3E%3Ccircle cx='128' cy='84' r='2' fill='%237ec8ff' fill-opacity='0.16' stroke='none'/%3E%3Ccircle cx='178' cy='138' r='2' fill='%237ec8ff' fill-opacity='0.16' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

.hero-screen__frame {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: calc(100dvh - var(--nav-h, 64px) - clamp(2.5rem, 7vw, 5.5rem));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-screen__img {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--nav-h, 64px) - clamp(2.5rem, 7vw, 5.5rem));
  max-width: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(126, 200, 255, 0.18),
    0 18px 48px rgba(0, 0, 0, 0.45);
}

@media (max-width: 720px) {
  .hero-screen {
    padding: 1rem 0.85rem 1.5rem;
    align-items: flex-start;
  }

  .hero-screen__frame,
  .hero-screen__img {
    max-height: none;
  }
}