임동욱 임동욱 08-18
fix: 폼 조작기가 브라우저 기본 서체로 떨어지던 문제
버튼·입력칸이 Pretendard가 아니라 Arial 13.33px으로 그려지고 있었다. 폼 조작기는 CSS
명세상 `font`를 상속받지 않는데 그걸 되돌리는 규칙이 없어, 아무도 서체를 지정하지 않은
자리는 브라우저 기본값이 이겼다. 그래서 제목·본문은 Pretendard인데 그 옆 버튼만 다른
서체로 나와 한 화면에 두 서체가 섞였다.

app/globals.scss에 조작기 리셋을 한 번 둔다. 타입 선택자(0,0,1)라 클래스로 서체·크기를
정한 곳은 그대로 이긴다.

확인한 범위:
- @fox 컴포넌트: 글자 크기(17/15/13px)·상자 크기(360×40) 모두 그대로. 서체를 지정하지
  않았던 FoxInput의 지우기 버튼만 Arial → Pretendard로 바뀐다(아이콘만 있어 보이는 변화 없음).
- 카탈로그: Arial이던 버튼 49개가 전부 Pretendard로. 크기·굵기는 유지되고 높이만 1px
  줄어드는데 서체가 바뀌면서 `line-height: normal` 계산이 달라진 결과다.
- 로그인 화면: 조작기 4개 모두 Pretendard. Arial 0건.

폰트 파일 자체와 시안 대조는 이상이 없었다 — 파일은 정품 Pretendard 400/600/700/800이고,
탭 label(20px/800)의 잉크 폭이 자간 반영 시 42px로 Figma 렌더와 같다.

Co-Authored-By: Claude Opus 5 
@fe7f656d0a60fcbd1267b3998da3faa88f27435c
app/globals.scss
--- app/globals.scss
+++ app/globals.scss
@@ -55,6 +55,19 @@
   --app-font-sans: "Pretendard";
 }
 
+// 폼 조작기는 CSS 명세상 `font`를 상속받지 않아, 아무도 지정하지 않으면 브라우저 기본값
+// (macOS 크롬 기준 Arial 13.33px)이 이긴다. 그래서 제목·본문은 Pretendard인데 그 옆 버튼만
+// 다른 서체로 나오는 일이 생긴다. 여기서 한 번 되돌린다.
+//
+// 타입 선택자(특이도 0,0,1)라 클래스로 서체·크기를 정한 곳은 그대로 이긴다 — @fox 컴포넌트도
+// 앱의 module.scss도 영향받지 않고, 아무도 정하지 않은 자리만 앱 서체를 따라온다.
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
 // 앱 셸 — 루트 레이아웃이 뷰포트 높이를 채우고 세로로 쌓이는 구조.
 // 푸터를 바닥에 붙이거나 본문 영역만 스크롤시키는 화면들이 이 전제에 기댄다.
 html,
Add a comment
List