From 6323ad7f08e6224c11d8395dde850ca0b82a0371 Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Sun, 7 Jun 2026 15:43:00 +0900
Subject: [PATCH] =?UTF-8?q?fix(study):=20=EA=B2=80=EC=88=98=ED=95=A8=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=A7=88=ED=81=AC=EB=8B=A4=EC=9A=B4+?=
 =?UTF-8?q?=EC=88=98=EC=8B=9D=20=EB=A0=8C=EB=8D=94=20=E2=80=94=20=EA=B7=BC?=
 =?UTF-8?q?=EA=B1=B0/=EC=95=9E=EB=A9=B4/=EC=A0=95=EB=8B=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

cards-review view 모드가 cue/cloze/fact/근거를 평문으로 뿌려 표·**굵게**·수식이 raw 노출. cards-study와 동일하게 renderMathMarkdown(근거 블록)·renderMathMarkdownInline(앞면·정답) 적용. 편집모드 textarea는 raw 유지.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/routes/study/cards-review/+page.svelte    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/study/cards-review/+page.svelte b/frontend/src/routes/study/cards-review/+page.svelte
index 55a8aaf..0070b21 100644
--- a/frontend/src/routes/study/cards-review/+page.svelte
+++ b/frontend/src/routes/study/cards-review/+page.svelte
@@ -17,6 +17,7 @@
   import Button from '$lib/components/ui/Button.svelte';
   import Skeleton from '$lib/components/ui/Skeleton.svelte';
   import EmptyState from '$lib/components/ui/EmptyState.svelte';
+  import { renderMathMarkdown, renderMathMarkdownInline } from '$lib/utils/mathMarkdown';
 
   let loading = $state(true);
   let groups = $state([]); // [{ source_question_id, question_text, correct_choice, cards: [...] }]
@@ -200,18 +201,22 @@
                 {:else}
                   <!-- 보기 모드 -->
                   <div class="rounded-md border border-default bg-surface-active px-3 py-2 text-sm">
-                    <div class="text-[10px] font-bold uppercase tracking-wide text-faint">앞</div>{c.cue}
+                    <div class="text-[10px] font-bold uppercase tracking-wide text-faint">앞</div>
+                    <div class="math-area break-words">{@html renderMathMarkdownInline(c.cue)}</div>
                   </div>
                   <div class="mt-1.5 rounded-md border border-accent-ring bg-bg px-3 py-2 text-sm">
                     {#if c.format === 'cloze' && c.cloze_text}
-                      {c.cloze_text}
-                      <div class="mt-1 text-xs text-accent">정답: <b>{c.fact}</b></div>
+                      <span class="math-area break-words">{@html renderMathMarkdownInline(c.cloze_text)}</span>
+                      <div class="mt-1 text-xs text-accent">정답: <b class="math-area break-words">{@html renderMathMarkdownInline(c.fact)}</b></div>
                     {:else}
-                      <b class="text-accent">{c.fact}</b>
+                      <b class="math-area break-words text-accent">{@html renderMathMarkdownInline(c.fact)}</b>
                     {/if}
                   </div>
                   {#if c.evidence?.length}
-                    <div class="mt-2 text-[11px] text-dim">근거: {c.evidence[0].snippet}</div>
+                    <div class="mt-2">
+                      <span class="text-[10px] font-bold uppercase tracking-wide text-faint">근거</span>
+                      <div class="markdown-body math-area mt-1 overflow-x-auto text-[11px] leading-relaxed text-dim">{@html renderMathMarkdown(c.evidence[0].snippet)}</div>
+                    </div>
                   {:else if c.source_kind === 'manual'}
                     <div class="mt-2 text-[11px] text-faint">출처: 직접 추가 자료</div>
                   {:else}