/* ===== Main / Hero ===== */
body[data-page="home"] {
  background: var(--blue-bg);
}

/* header + main = 100vh */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: transparent;
  position: relative;
  overflow: hidden;
  padding: 0;
  height: calc(100vh - var(--header-h));
  min-height: calc(100vh - var(--header-h));
  max-height: calc(100vh - var(--header-h));
}

.hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 0 0 var(--side-pad);
  box-sizing: border-box;
}

.hero-text {
  flex: 0 1 45%;
  max-width: 960px;
  min-width: 0;
  z-index: 2;
}

.hero-title-img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-visual {
  flex: 0 1 45%;
  max-width: 960px;
  min-width: 650px;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}

/* 1024 이하이거나, 세로가 가로보다 길거나 같으면 (portrait) */
@media (max-width: 1024px), (max-aspect-ratio: 1/1) {
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .hero-body {
    height: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0 0 0 var(--side-pad);
  }

  .hero-text {
    flex: 1 1 100%;
    max-width: clamp(180px, 72vw, 420px);
    margin-top: clamp(60px, 8vw, 80px);
  }

  .hero-visual {
    flex: 1 1 auto;
    width: 90%;
    max-width: 650px;
    min-width: 0;
    margin-left: auto;
  }
}