[fix] landing: 히어로 세로 리듬 확보 — 간격 확대·헤드라인 74px

답답함의 원인은 가로 비율이 아니라 세로 간격이었다. 헤드라인 80px 에 대해
헤드라인↔서브 28px, 서브↔CTA 40px 는 너무 촘촘했다.

- 간격 확대: mt-7 → mt-11(44px), mt-10 → mt-14(56px).
- 헤드라인 80 → 74px. 글자 실폭이 뷰포트의 40% (레퍼런스 statworx 는 48%).
- 측정 주의사항을 주석에 남김: h1 은 블록이라 getBoundingClientRect 로 재면
  컨테이너 폭(848px)이 나온다. Range 로 텍스트 노드를 재야 실제 글자 폭이다.
  이걸 헷갈려 한 번 과교정(66px, 36%)했다가 되돌렸다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

landing/app/components/sections/hero-dataflow.tsx

@@ -55,12 +55,12 @@ export function HeroDataFlow() {
           <span className="text-on-stage-soft/60">동시에 협상합니다.</span>
         </Typography>
 
-        <p className="mt-7 text-base sm:text-lg text-on-stage-soft leading-relaxed break-keep max-w-2xl mx-auto">
+        <p className="mt-11 text-base sm:text-lg text-on-stage-soft leading-relaxed break-keep max-w-2xl mx-auto">
           품목·목표가·마감일만 정하면 됩니다. 협상 에이전트가 협력사마다 따로 붙어 단가를 조율하고, 마감 시각에
           최저 투찰가로 낙찰까지 판정합니다.
         </p>
 
-        <div className="mt-10 flex flex-col sm:flex-row gap-3 justify-center">
+        <div className="mt-14 flex flex-col sm:flex-row gap-3 justify-center">
           <Button href="#how-it-works" variant="stage" size="stageRound" className="group">
             <span>직접 협상해 보기</span>
             <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />

landing/app/components/ui/typography.tsx

@@ -12,6 +12,10 @@ import { cn } from "@/lib/utils"
  *  1) 크기·굵기·조임은 같이 움직인다. 44px 에 900 은 뭉툭하지만, 72px 에 800 +
  *     자간 -0.044em + 행간 1.0 은 확신으로 읽힌다(jitter.video 실측: 72px/800/-0.044em/0.95).
  *     굵기만 올리면 둔해지고, 크기만 올리면 헐거워진다.
+ *  1-1) 크기 판단은 "글자가 화면 폭의 몇 %를 쓰는가"로 한다(레퍼런스 statworx 는 48%).
+ *     주의: h1 은 블록이라 getBoundingClientRect 로 재면 컨테이너 폭이 나온다.
+ *     Range 로 텍스트 노드를 재야 실제 글자 폭이다 — 이걸 헷갈리면 엉뚱한 값으로 조정하게 된다.
+ *     지금 74px 에서 약 40%. 답답함의 원인은 가로 비율이 아니라 세로 간격이었다.
  *  2) 한글 줄바꿈은 break-keep 만으로 부족하다. break-keep 은 어절 안에서 안 쪼개지게
  *     할 뿐 어디서 넘어갈지는 못 정해서 "에이전트는 기준 / 밖으로 안 나갑니다" 같은
  *     어색한 분절이 나온다. text-balance 를 같이 걸어 줄 길이를 고르게 맞춘다.
@@ -32,7 +36,7 @@ const typographyVariants = cva("", {
       display: "text-[44px] sm:text-[58px] md:text-[68px] font-extrabold tracking-[-0.04em] leading-[1.14] text-ink break-keep text-balance",
       // 다크 무대 히어로 h1. 색은 쓰는 쪽에서 준다(2톤 헤드라인).
       stageDisplay:
-        "text-[40px] sm:text-[56px] md:text-[70px] lg:text-[80px] font-extrabold tracking-[-0.042em] leading-[1.07] break-keep text-balance",
+        "text-[38px] sm:text-[52px] md:text-[64px] lg:text-[74px] font-extrabold tracking-[-0.042em] leading-[1.1] break-keep text-balance",
       // 섹션 제목 h2
       /* 본문(15px)의 4.3배. 대비는 굵기가 아니라 크기로 만든다 —
          굵기를 올리면 뭉툭해지고, 크기를 올리면 확신이 생긴다.