katex

frontend/src/views/QuizView.vue

@@ -1265,4 +1265,42 @@ function handleTouchEnd(e: TouchEvent) {
   background-color: var(--fallback-b3, oklch(var(--b3)/0.5)) !important;
   font-weight: bold !important;
 }
+
+/* 마크다운 컨텐츠 영역이 부모를 벗어나지 않도록 방지 */
+.markdown-content {
+  max-width: 100% !important;
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+/* 코드 블록(pre, code)이 화면을 벗어나지 않게 하고 가로 스크롤 적용 */
+.markdown-content pre {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  white-space: pre !important;
+  word-wrap: normal !important;
+  word-break: normal !important;
+}
+
+.markdown-content code {
+  white-space: pre-wrap !important;
+  word-break: break-all !important;
+}
+
+/* 수식(KaTeX) 영역이 화면을 벗어나지 않게 하고 가로 스크롤 적용 */
+.markdown-content .katex-display {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  -webkit-overflow-scrolling: touch !important;
+  padding: 0.5rem 0 !important;
+}
+
+.markdown-content .katex {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  vertical-align: middle;
+}
 </style>