diff --git a/src/pages/ProcessPurposePracticePage.tsx b/src/pages/ProcessPurposePracticePage.tsx
index 16ac013..bc70cb8 100644
--- a/src/pages/ProcessPurposePracticePage.tsx
+++ b/src/pages/ProcessPurposePracticePage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { processPurposePracticeItems } from '@/data/process-purpose-practice'
 import { InputArea } from '@/components/practice/InputArea'
@@ -219,7 +219,7 @@ export default function ProcessPurposePracticePage() {
     }
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const deck = deckScrollRef.current
     if (!deck) return
 
@@ -227,7 +227,9 @@ export default function ProcessPurposePracticePage() {
       const currentCard = deck.querySelector('[data-current-question="true"]') as HTMLElement | null
       if (!currentCard) return
 
-      const targetTop = Math.max(currentCard.offsetTop - 8, 0)
+      const deckTop = deck.getBoundingClientRect().top
+      const cardTop = currentCard.getBoundingClientRect().top
+      const targetTop = Math.max(deck.scrollTop + cardTop - deckTop - 8, 0)
       deck.scrollTo({ top: targetTop, behavior: 'smooth' })
     })
   }, [progress.currentIndex])