ux: 優化選擇題模式的對齊方式和答案回饋

- 統一選擇題內容為左對齊：問題文字、選項按鈕、答案回饋
- 完善答案顯示：答對和答錯時都顯示詞彙、音標和播放功能
- 改善學習回饋體驗，確保用戶獲得完整的發音資訊
- 優化視覺一致性，與翻卡模式保持統一設計語言

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

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

frontend/app/learn/page.tsx

@@ -454,7 +454,7 @@ export default function LearnPage() {
                   <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
                   <p className="text-gray-700 text-left">{currentCard.definition}</p>
                 </div>
-                <p className="text-lg text-gray-700 mb-2 text-center">
+                <p className="text-lg text-gray-700 mb-2 text-left">
                   請選擇符合上述定義的英文詞彙：
                 </p>
               </div>
@@ -465,7 +465,7 @@ export default function LearnPage() {
                   key={idx}
                   onClick={() => !showResult && handleQuizAnswer(option)}
                   disabled={showResult}
-                  className={`w-full p-4 text-center rounded-lg border-2 transition-all ${
+                  className={`w-full p-4 text-left rounded-lg border-2 transition-all ${
                     showResult
                       ? option === currentCard.word
                         ? 'border-green-500 bg-green-50 text-green-700'
@@ -495,13 +495,15 @@ export default function LearnPage() {
                   </p>
                   {selectedAnswer !== currentCard.word && (
                     <p className="text-gray-700 mt-2">
-                      正確答案是：<strong>{currentCard.word}</strong>
+                      正確答案是：<strong>{currentCard.word}</strong> {currentCard.pronunciation}
                     </p>
                   )}
-                  <div className="mt-3 text-center">
-                    <p className="text-gray-600 text-sm mb-2">
-                      翻譯：{currentCard.translation}
+                  {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>
                 </div>