8. 레이아웃 & 반응형

8-1. 브레이크포인트

--bp-mobile:639px; --bp-tablet:1023px; --bp-desktop:1439px;

v4.0은 “12컬럼 · 1200px 단일”이었습니다. 문서형 화면은 너무 넓고 데이터 대시보드는 너무 좁아, 앱들이 각자 벗어나면서 시스템이 무력해졌습니다. v5.0은 강제 규칙을 3개로 줄이고 컨테이너를 4종으로 넓힙니다.

강제되는 것은 이 3개뿐: ① 간격 4px 단위 ② 터치 타깃 44px ③ 가로 스크롤 금지

컨테이너	최대폭	용도	근거
`--container-narrow`	720px	문서·읽기 중심	Bootstrap md와 동일 폭 · 본문 가독 65~75자
`--container-max`	1200px	표준 앱·대시보드	기존 기본값 유지 (Bootstrap xl 1140 ~ Tailwind xl 1280 사이)
`--container-wide`	1440px	데이터 밀집 대시보드	Tailwind 2xl(1536) 계열 와이드 폭
full	없음	에디터·맵·풀블리드	좌우 패딩만 유지

모바일 안정성: 전부 max-width이므로 좁은 화면에서는 자동으로 100% + 좌우 패딩(desktop 40 / tablet 24 / mobile 16px)으로 동작합니다.

그리드 컬럼 수·사이더 폭 등은 앱 소관입니다(§2-5). 다만 폭은 4px 그리드에 맞춥니다.

뷰포트 메타 필수: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
모바일 안전영역: env(safe-area-inset-*) — 노치·홈바 대응
터치 타깃 최소 44×44px (--touch-target-min)
가로 스크롤 금지 — 표는 overflow-x:auto 컨테이너로 감싸기
이미지 반응형: max-width:100%; height:auto

한국어는 세계에서 가장 짧은 언어 축에 듭니다. 유럽어로 번역하면 +30~40%, 짧은 라벨은 최대 7배까지 길어집니다.

저장(2자) → Enregistrer(11자) · 승인 대기(5자) → En attente d’approbation(24자)

규칙	내용
버튼·탭·메뉴	고정 `width` 금지 — `min-width` + 좌우 패딩만
모든 컨트롤	고정 `height` 금지 — `min-height:var(--control-height)`
말줄임(ellipsis)	표 셀에서만 허용(`.jt-ellipsis`). 버튼·메뉴·알림에 금지
사이더 메뉴 라벨	2줄 줄바꿈 허용 설계 (높이 고정 금지)
판정 배지	예외 — `white-space:nowrap`. “부적/합”처럼 잘리면 안 되는 정보

모바일에서 주요 메뉴를 상단에 두지 않습니다. 화면이 커지면서 엄지가 상단에 닿지 않기 때문입니다.

주요 메뉴 개수	패턴
5개 이하	하단 탭바 (`.jt-tabbar`) — 아이콘 + 라벨
6개 이상	하단 탭바 4개 + “더보기” → 드로어, 또는 드로어 단독

env(safe-area-inset-bottom)으로 iPhone 홈바를 피합니다.
탭바가 있으면 본문 하단에 자동으로 여백이 생깁니다(body:has(.jt-tabbar) .jt-main). 앱이 따로 계산할 필요 없습니다.
탭바 아이콘은 SVG 방식(.jt-ico-mask)을 쓰세요 — CDN이 막혀도 항상 보입니다(§10-2).