diff --git a/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte b/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte
index 6a24bea..be341d1 100644
--- a/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte
@@ -233,7 +233,7 @@
           </div>
 
           <!-- 본문 -->
-          <div class="text-base text-text leading-relaxed math-area">
+          <div class="text-base text-text leading-relaxed markdown-body math-area">
             {@html renderMathMarkdown(q.question_text)}
           </div>
 
@@ -262,9 +262,9 @@
 
           <!-- 사용자 입력 해설 (있을 때만) -->
           {#if q.explanation}
-            <div class="rounded border border-default bg-bg/30 p-3 text-sm text-text math-area">
+            <div class="rounded border border-default bg-bg/30 p-3 text-sm text-text">
               <div class="text-[10px] text-dim mb-1.5 font-medium">사용자 입력 해설</div>
-              <div>{@html renderMathMarkdown(q.explanation)}</div>
+              <div class="markdown-body math-area">{@html renderMathMarkdown(q.explanation)}</div>
             </div>
           {/if}
 
@@ -305,7 +305,7 @@
             {/if}
 
             {#if (aiState === 'success' || aiState === 'stale') && aiData?.ai_explanation}
-              <div class="text-xs text-text leading-relaxed prose prose-sm prose-invert max-w-none math-area">
+              <div class="text-xs text-text leading-relaxed markdown-body math-area">
                 {@html renderMathMarkdown(aiData.ai_explanation)}
               </div>
               {#if aiData.evidence?.length}
diff --git a/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte b/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte
index e945f11..828c18b 100644
--- a/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte
@@ -387,7 +387,7 @@
           {/if}
 
           {#if aiOpen && aiBody}
-            <div class="text-sm text-text leading-relaxed bg-bg/30 border border-default rounded p-3 prose prose-sm prose-invert max-w-none math-area">
+            <div class="text-sm text-text leading-relaxed bg-bg/30 border border-default rounded p-3 markdown-body math-area">
               {@html renderMathMarkdown(aiBody)}
             </div>
             {#if aiEvidence?.length}
diff --git a/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte b/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte
index 7b72d48..66c202a 100644
--- a/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte
@@ -320,7 +320,7 @@
 
           {#if isOpen}
             <div class="border-t border-default p-3 flex flex-col gap-3 bg-bg/20">
-              <div class="text-sm text-text leading-relaxed math-area">{@html renderMathMarkdown(it.q.question_text)}</div>
+              <div class="text-sm text-text leading-relaxed markdown-body math-area">{@html renderMathMarkdown(it.q.question_text)}</div>
 
               {#if it.q.images?.length > 0}
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
@@ -349,9 +349,9 @@
               </div>
 
               {#if it.q.explanation}
-                <div class="rounded border border-default bg-surface p-3 text-xs text-text math-area">
+                <div class="rounded border border-default bg-surface p-3 text-xs text-text">
                   <div class="text-[10px] text-dim mb-1">사용자 입력 해설</div>
-                  <div class="text-text">{@html renderMathMarkdown(it.q.explanation)}</div>
+                  <div class="markdown-body math-area">{@html renderMathMarkdown(it.q.explanation)}</div>
                 </div>
               {/if}
 
@@ -420,7 +420,7 @@
       <div class="text-[11px] text-error">{st.error}</div>
     {/if}
     {#if isLoaded}
-      <div class="text-xs text-text leading-relaxed prose prose-sm prose-invert max-w-none math-area">
+      <div class="text-xs text-text leading-relaxed markdown-body math-area">
         {@html renderMathMarkdown(data.ai_explanation)}
       </div>
       {#if data.evidence?.length}
@@ -468,7 +468,7 @@
       <div class="text-[11px] text-error">{st.error}</div>
     {/if}
     {#if isLoaded}
-      <div class="text-xs text-text leading-relaxed prose prose-sm prose-invert max-w-none math-area">
+      <div class="text-xs text-text leading-relaxed markdown-body math-area">
         {@html renderMathMarkdown(data.content)}
       </div>
       {#if data.evidence?.length}
diff --git a/frontend/src/routes/study/topics/[id]/review/+page.svelte b/frontend/src/routes/study/topics/[id]/review/+page.svelte
index 56fd8ac..dd4ca16 100644
--- a/frontend/src/routes/study/topics/[id]/review/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/review/+page.svelte
@@ -224,7 +224,7 @@
     <Card>
       {#snippet children()}
         <div class="p-5 flex flex-col gap-4">
-          <div class="text-base text-text leading-relaxed math-area">{@html renderMathMarkdown(currentQ.question_text)}</div>
+          <div class="text-base text-text leading-relaxed markdown-body math-area">{@html renderMathMarkdown(currentQ.question_text)}</div>
 
           {#if currentQ.images?.length > 0}
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-1">