From 4072f555fc23e01b40c99b1c45e606435b03496e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9D=80=EC=84=9C?= <yeoneunseo2005@gmail.com>
Date: Fri, 21 Aug 2026 17:53:31 +0900
Subject: [PATCH] =?UTF-8?q?fix(landing):=20=EC=88=98=ED=95=99=20=EB=8D=B0?=
 =?UTF-8?q?=EB=AA=A8=EC=9D=98=20LaTeX=20=EC=95=88=EB=82=B4=20=EB=AC=B8?=
 =?UTF-8?q?=EA=B5=AC=20=ED=8F=B0=ED=8A=B8=EB=A5=BC=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=20=ED=8F=B0=ED=8A=B8=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

'LaTeX가 자동으로 생성됩니다' 줄만 fontFamily=monospace 라서 브라우저
기본 monospace(13px/400)로 그려졌고, 같은 박스 안의 Spoqa Han Sans Neo
500 텍스트와 어긋나 보였다. typography="body" 로 바꿔 나머지 UI 와 맞춘다.

아울러 좌우 박스의 폭 분배를 MathTransPanel 의 selectors
(`&>*:first-child, &>*:last-child`) 대신 MathTransInput 이 스스로
flex=1 / minWidth=0 을 갖는 방식으로 바꾼다. 출력측 TransInput 이 이미
쓰는 방식과 같아지고, 위치 기반 CSS 규칙 4개가 사라진다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/landing/src/app/MathTransInput.tsx | 11 ++++++-----
 apps/landing/src/app/MathTransPanel.tsx |  4 ----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/landing/src/app/MathTransInput.tsx b/apps/landing/src/app/MathTransInput.tsx
index 38cefef2..9b3276ce 100644
--- a/apps/landing/src/app/MathTransInput.tsx
+++ b/apps/landing/src/app/MathTransInput.tsx
@@ -59,10 +59,11 @@ export function MathTransInput({
   }, [ready])
 
   return (
-    // 폭 분배(flex)는 호출부가 맡는다. 바깥 Flex 에 padding 을 두지 않는 이유는
-    // flex-basis:0 이라도 flex 아이템의 border-box 크기가 padding 합보다 작아질 수
-    // 없어서, padding 이 있으면 그만큼 출력측 TransInput 보다 넓어지기 때문이다.
-    <Flex>
+    // 출력측 TransInput 과 마찬가지로 자기 폭은 자기가 잡는다. 바깥 Flex 에
+    // padding 을 두지 않는 이유는 flex-basis:0 이라도 flex 아이템의 border-box
+    // 크기가 padding 합보다 작아질 수 없어서, padding 이 있으면 그만큼 출력측
+    // TransInput 보다 넓어지기 때문이다.
+    <Flex flex="1" minW="0">
       <VStack
         bg="$containerBackground"
         borderRadius={['16px', null, null, '30px']}
@@ -110,9 +111,9 @@ export function MathTransInput({
         </VStack>
         <Text
           color="$text"
-          fontFamily="monospace"
           minH="1.5em"
           opacity={0.7}
+          typography="body"
           wordBreak="break-all"
         >
           {latex ? `LaTeX: $${latex}$` : 'LaTeX가 자동으로 생성됩니다'}
diff --git a/apps/landing/src/app/MathTransPanel.tsx b/apps/landing/src/app/MathTransPanel.tsx
index c28df493..e36a164d 100644
--- a/apps/landing/src/app/MathTransPanel.tsx
+++ b/apps/landing/src/app/MathTransPanel.tsx
@@ -32,10 +32,6 @@ export function MathTransPanel() {
       flexDirection={[null, null, null, 'row']}
       gap={['12px', null, null, '30px']}
       h={['auto', null, null, '500px']}
-      // 좌우 박스가 폭을 반씩 나누도록 호출부에서 분배한다. 화살표(가운데)는 제외.
-      selectors={{
-        '&>*:first-child, &>*:last-child': { flex: 1, minWidth: 0 },
-      }}
     >
       <MathTransInput
         latex={latex}