diff --git a/landing/app/components/sections/hero-dataflow.tsx b/landing/app/components/sections/hero-dataflow.tsx
index 48c12bb..13018fe 100644
--- a/landing/app/components/sections/hero-dataflow.tsx
+++ b/landing/app/components/sections/hero-dataflow.tsx
@@ -1,10 +1,14 @@
+import type * as React from "react"
 import { useRef, useState } from "react"
 import { ArrowRight } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import { CTA_GAP, DISPLAY_LEAD_GAP } from "@/components/ui/section-heading"
 import { Typography } from "@/components/ui/typography"
-import { CLUSTER_ANCHORS, DataFlowCanvas, type DataFlowPhase } from "@/components/ui/data-flow-canvas"
+import { BAND_TOP, CLUSTER_ANCHORS, DataFlowCanvas, type DataFlowPhase } from "@/components/ui/data-flow-canvas"
+
+/** 히어로 최소 높이. 밴드 위에 헤더·카피가 들어갈 세로 예산의 하한(계산은 section 주석 참조). */
+const HERO_MIN_H = "780px"
 
 /**
  * 다크 무대 히어로 — 배경 모션이 negotium 파이프라인 자체를 그린다.
@@ -20,7 +24,17 @@ export function HeroDataFlow() {
   return (
     <section
       data-stage-hero
-      className="stage-bg relative min-h-screen text-on-stage flex flex-col overflow-hidden"
+      className="stage-bg relative text-on-stage flex flex-col overflow-hidden"
+      /* 높이와 밴드 시작선을 같은 식에서 뽑는다. 따로 쓰면 반드시 어긋난다 —
+         밴드를 63vh 로 두고 높이만 키우면, 짧은 화면에서 변수가 실제 밴드보다 위를 가리킨다.
+         밴드 위 공간(0.63×높이)에 헤더(104) + 카피(351) + 여유(24) = 479px 가 들어가야 하므로
+         높이 바닥은 760px 이 하한이다. 780px 로 잡으면 짧은 화면은 살짝 스크롤될 뿐이다. */
+      style={
+        {
+          minHeight: `max(100vh, ${HERO_MIN_H})`,
+          "--band-top": `calc(${BAND_TOP} * max(100vh, ${HERO_MIN_H}))`,
+        } as React.CSSProperties
+      }
     >
       <DataFlowCanvas onPhaseChange={setPhase} progressRef={progressRef} className="absolute inset-0 w-full h-full" />
 
@@ -43,8 +57,15 @@ export function HeroDataFlow() {
         ))}
       </div>
 
-      {/* 카피는 상단 55%, 데이터 흐름은 하단 밴드. 둘이 겹치지 않게 층을 나눈다. */}
-      <div className="relative z-10 max-w-4xl mx-auto px-6 w-full text-center pt-[104px] md:pt-[19vh]">
+      {/* 카피는 밴드 위 영역, 데이터 흐름은 하단 밴드.
+          예전엔 pt-[19vh] 로 위치만 잡았는데 그건 경계를 강제하지 못한다 — 카피 높이는
+          px 로 고정인데 밴드는 화면 비율로 내려오니, 뷰포트가 798px 보다 낮으면 버튼이
+          밴드를 파고들었다(1280x720 에서 34px, 라벨과는 7px). 1440x900 에서만 안 보였다.
+          카피 영역 높이를 밴드 시작선에 묶으면 뷰포트와 무관하게 구조적으로 겹칠 수 없다.
+          1.5rem 은 밴드 위 최소 숨통.
+          pt-[104px] 는 md 이상에서도 유지한다 — 헤더가 fixed 라 이걸 빼면 짧은 뷰포트에서
+          가운데 정렬이 카피를 헤더 밑으로 밀어올린다(620px 높이에서 제목 상단 8px). */}
+      <div className="relative z-10 w-full flex-none pt-[104px] md:h-[calc(var(--band-top)-1.5rem)] md:flex md:items-center"><div className="max-w-4xl mx-auto px-6 w-full text-center">
         {/* 히어로 카피에는 진입 애니메이션을 걸지 않는다.
             여기가 LCP 요소라 opacity:0 으로 시작하면 하이드레이션 전까지 첫 화면이 비고,
             광고 유입처럼 JS 가 느린 환경에서 그대로 손실이 된다. 모션은 배경 캔버스가 맡는다. */}
@@ -72,6 +93,7 @@ export function HeroDataFlow() {
             도입 문의
           </Button>
         </div>
+        </div>
       </div>
 
     </section>
diff --git a/landing/app/components/ui/data-flow-canvas.tsx b/landing/app/components/ui/data-flow-canvas.tsx
index 6db037f..2f22a24 100644
--- a/landing/app/components/ui/data-flow-canvas.tsx
+++ b/landing/app/components/ui/data-flow-canvas.tsx
@@ -58,7 +58,9 @@ export type DataFlowPhase = (typeof PHASES)[number]["key"]
 
 /* 구도는 화면 하단 밴드에 앉힌다. 헤드라인·CTA 는 그 위에 서고, 데이터는 무대 바닥을
    흐르는 그림. 아래 목표 좌표는 전부 밴드 기준 지역 좌표(0..1)로 쓰고 band() 로 옮긴다. */
-const BAND_TOP = 0.63
+/* 히어로 카피도 이 값을 읽어 자기 높이를 잡는다 — 카피가 밴드를 침범하지 않는 건
+   두 숫자가 우연히 안 만나서가 아니라 같은 값을 공유하기 때문이어야 한다. */
+export const BAND_TOP = 0.63
 const BAND_H = 0.30  /* 히어로 하단 전체. 순환 링은 강화학습 섹션으로 옮겼다. */
 const band = (localY: number) => BAND_TOP + localY * BAND_H