[ooMia]

아티클의 Mermaid를 정적 다이어그램으로 표시하고, 코드·표 UI를 native Markdown/MDX 빌드 단계에서 구성합니다. 코드 블록은 짧은 내용과 toolbar에 맞춰 좁아지며, 긴 줄은 본문 최대 너비 안에서 스크롤됩니다. 기본 syntax theme은 Catppuccin Latte/Mocha입니다.

• .md는 Sätteri, .mdx는 native MDX를 유지합니다. hydration 이후 구조 재작성은 제거하고 클라이언트에는 복사 이벤트를 남깁니다. 원본 공백·끝 빈 줄·복사 문자열을 보존합니다.
• Mermaid는 네트워크를 차단한 build-time renderer로 light/dark SVG를 생성합니다. 원문은 JavaScript 없이 펼쳐 볼 수 있으며 복사는 원문을 사용합니다. SVG 외부 자원을 검사하고 reader bundle에는 Mermaid를 추가하지 않습니다.
• LinkCard 이미지의 intrinsic ratio·contain과 UI sans를 적용하고, inline code 문단의 코드 내부 공백이 늘어나지 않도록 합니다.
• 기존 Site CI/Publish Site에서 native fixture, immutable Docs 소비, local assets·navigation·social metadata·KO/EN 경로를 검증합니다. 저장된 Docs gitlink와 원문은 변경하지 않습니다.

검증한 head: dc72d81a981a4846008f36f379657d3752cc301c.

• 로컬 check, unit 162개, Astro 81파일 진단 0, network-blocked native fixture 9페이지 통과.
• Docs 5a2eaff17e6a8136d32c4eb9a32211adde0b9317 전체 24페이지·Article 11쌍·1,676 references 검사 통과.
• 실제 Pattern 글의 데스크톱/390px 화면에서 짧은 코드의 너비, 긴 코드의 내부 스크롤, Latte/Mocha 색상을 확인했습니다. 새로운 픽셀/DOM 구조 고정 테스트는 추가하지 않았습니다.
• 이전 head 3988507의 CI는 통과했으며, 새 head의 CI 결과는 별도로 확인합니다. 기존 3 OS 검증을 이번 변경에서 반복 실행하지 않았습니다.

남은 경계: Mermaid SVG는 해당 글 HTML을 늘립니다(기존 관찰 약 25→88KB). 본문 전체의 LCP 개선을 주장하지 않습니다. optional translation과 기존 Invalid WSL audio authoring 경고는 유지됩니다. main 병합과 Pages 배포는 아직 실행하지 않았습니다.

Refs #64
Refs #76
Refs #89