From bae0da42d26bddf65281eebe7446925e492691ac Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewon.sv@gmail.com>
Date: Fri, 31 Jul 2026 18:43:16 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20landing:=20=ED=9E=88=EC=96=B4=EB=A1=9C?=
 =?UTF-8?q?=20=EC=84=B8=EB=A1=9C=20=EB=A6=AC=EB=93=AC=20=ED=99=95=EB=B3=B4?=
 =?UTF-8?q?=20=E2=80=94=20=EA=B0=84=EA=B2=A9=20=ED=99=95=EB=8C=80=C2=B7?=
 =?UTF-8?q?=ED=97=A4=EB=93=9C=EB=9D=BC=EC=9D=B8=2074px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

답답함의 원인은 가로 비율이 아니라 세로 간격이었다. 헤드라인 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 | 4 ++--
 landing/app/components/ui/typography.tsx          | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/landing/app/components/sections/hero-dataflow.tsx b/landing/app/components/sections/hero-dataflow.tsx
index a41be0a..4da983a 100644
--- a/landing/app/components/sections/hero-dataflow.tsx
+++ b/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" />
diff --git a/landing/app/components/ui/typography.tsx b/landing/app/components/ui/typography.tsx
index 6423b2f..3b8cf95 100644
--- a/landing/app/components/ui/typography.tsx
+++ b/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배. 대비는 굵기가 아니라 크기로 만든다 —
          굵기를 올리면 뭉툭해지고, 크기를 올리면 확신이 생긴다.