style: 統一所有測驗的答案回饋樣式與間距

## 樣式統一化
- 統一所有答案回饋為例句重組的標準格式
- 修正詞彙選擇和詞彙聽力的選項間距問題
- 統一圖片顯示尺寸，以例句重組為標準

## 具體改進
- 答案回饋容器：統一使用 p-6 rounded-lg w-full mb-6
- 標題文字：統一使用 text-left text-xl mb-4
- 選項區域：添加 mb-6 底部間距避免與回饋區域黏合
- 圖片樣式：移除 VoiceRecorder 中的額外樣式限制

## VoiceRecorder 組件優化
- 添加自定義說明文字支援
- 統一圖片容器和樣式
- 改善布局順序和間距

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/app/learn/page.tsx

@@ -568,7 +568,7 @@ export default function LearnPage() {
      
               </div>
 
-            <div className="space-y-3">
+            <div className="space-y-3 mb-6">
               {quizOptions.map((option, idx) => (
                 <button
                   key={idx}
@@ -590,30 +590,35 @@ export default function LearnPage() {
             </div>
 
               {showResult && (
-                <div className={`mt-6 p-4 rounded-lg ${
+                <div className={`p-6 rounded-lg w-full mb-6 ${
                   selectedAnswer === currentCard.word
                     ? 'bg-green-50 border border-green-200'
                     : 'bg-red-50 border border-red-200'
                 }`}>
-                  <p className={`font-semibold ${
+                  <p className={`font-semibold text-left text-xl mb-4 ${
                     selectedAnswer === currentCard.word
                       ? 'text-green-700'
                       : 'text-red-700'
                   }`}>
                     {selectedAnswer === currentCard.word ? '正確！' : '錯誤！'}
                   </p>
+
                   {selectedAnswer !== currentCard.word && (
-                    <p className="text-gray-700 mt-2">
-                      正確答案是：<strong>{currentCard.word}</strong> {currentCard.pronunciation}
-                    </p>
+                    <div className="mb-4">
+                      <p className="text-gray-700 text-left">
+                        正確答案是：<strong className="text-lg">{currentCard.word}</strong>
+                      </p>
+                    </div>
                   )}
-                  {selectedAnswer === currentCard.word && (
-                    <p className="text-gray-700 mt-2">
-                      <strong>{currentCard.word}</strong> {currentCard.pronunciation}
-                    </p>
-                  )}
-                  <div className="mt-3 text-left">
-                    <AudioPlayer text={currentCard.word} />
+
+                  <div className="space-y-3">
+                    <div className="text-left">
+                      <div className="flex items-center text-gray-600">
+                        <strong>發音：</strong>
+                        <span className="mx-2">{currentCard.pronunciation}</span>
+                        <AudioPlayer text={currentCard.word} />
+                      </div>
+                    </div>
                   </div>
                 </div>
               )}
@@ -845,7 +850,7 @@ export default function LearnPage() {
               </div>
 
             {/* Word Options */}
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-2 gap-3 mb-6">
               {[currentCard.word, 'determine', 'achieve', 'consider'].map((word) => (
                 <button
                   key={word}
@@ -867,12 +872,12 @@ export default function LearnPage() {
             </div>
 
               {showResult && (
-                <div className={`mt-6 p-4 rounded-lg ${
+                <div className={`p-6 rounded-lg w-full mb-6 ${
                   selectedAnswer === currentCard.word
                     ? 'bg-green-50 border border-green-200'
                     : 'bg-red-50 border border-red-200'
                 }`}>
-                  <p className={`font-semibold ${
+                  <p className={`font-semibold text-left text-xl mb-4 ${
                     selectedAnswer === currentCard.word
                       ? 'text-green-700'
                       : 'text-red-700'
@@ -880,11 +885,11 @@ export default function LearnPage() {
                     {selectedAnswer === currentCard.word ? '正確！' : '錯誤！'}
                   </p>
                   {selectedAnswer !== currentCard.word && (
-                    <div className="mt-2">
-                      <p className="text-gray-700">
-                        正確答案是：<strong>{currentCard.word}</strong>
+                    <div className="mb-4">
+                      <p className="text-gray-700 text-left">
+                        正確答案是：<strong className="text-lg">{currentCard.word}</strong>
                       </p>
-                      <p className="text-gray-600 mt-1">
+                      <p className="text-gray-600 text-left mt-1">
                         發音：{currentCard.pronunciation}
                       </p>
                     </div>

frontend/components/VoiceRecorder.tsx

@@ -252,7 +252,6 @@ export default function VoiceRecorder({
               src={exampleImage}
               alt="Example context"
               className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
-              style={{ maxHeight: '400px', objectFit: 'contain' }}
             />
           </div>
         </div>