문제 풀이 화면의 step progress bar 수정

app/(game)/number-parentheses/play/NumberPlayClient.tsx

@@ -196,15 +196,11 @@ export default function NumberPlayClient({
               문제 풀이
             </h1>
           </div>
-          <StageIndicator
-            currentIndex={session.currentIndex}
-            results={session.results}
-          />
         </div>
 
         <div
           ref={problemCardRef}
-          className="rounded-md bg-white px-6 pt-6 pb-2 shadow-sm ring-1 ring-slate-200 sm:p-8"
+          className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8"
         >
           <p className="mb-4 text-sm font-semibold text-slate-500">
             괄호를 풀어 두 항을 순서대로 입력하세요.
@@ -212,6 +208,12 @@ export default function NumberPlayClient({
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
             <KatexRenderer latex={currentProblem.latexBefore} displayMode />
           </div>
+          <div className="mt-6">
+            <StageIndicator
+              currentIndex={session.currentIndex}
+              results={session.results}
+            />
+          </div>
         </div>
 
         {!submitted ? (

app/(game)/variable-parentheses/play/VariablePlayClient.tsx

@@ -146,19 +146,21 @@ export default function VariablePlayClient({
               문제 풀이
             </h1>
           </div>
-          <StageIndicator
-            currentIndex={session.currentIndex}
-            results={session.results}
-          />
         </div>
 
-        <div className="rounded-md bg-white px-6 pt-6 pb-2 shadow-sm ring-1 ring-slate-200 sm:p-8">
+        <div className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8">
           <p className="mb-4 text-sm font-semibold text-slate-500">
             괄호를 풀어 첫째 항과 둘째 항의 답을 보기에서 고르세요.
           </p>
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
             <KatexRenderer latex={currentProblem.latexBefore} displayMode />
           </div>
+          <div className="mt-6">
+            <StageIndicator
+              currentIndex={session.currentIndex}
+              results={session.results}
+            />
+          </div>
         </div>
 
         {!submitted ? (