refactor: 改善學習場景卡片的顯示方式

- 移除透明遮罩效果，使用純白背景提升可讀性
- 電腦版改為網格布局，避免橫向滾動的操作困難
- 手機版保留橫向滾動設計，維持觸控體驗
- 滾動指示器僅在手機版顯示

Author: yulin0629

script.js

@@ -291,18 +291,75 @@ window.onload = function() {
     initScenarioScroll();
 }
 
+// 場景導航功能
+function scrollScenarios(direction) {
+    const scenarioList = document.querySelector('.scenario-list');
+    const scenarioItems = document.querySelectorAll('.scenario-item');
+    
+    if (!scenarioList || !scenarioItems.length) return;
+    
+    // 計算每個項目的寬度和間距
+    const itemWidth = scenarioItems[0].offsetWidth + 20; // 包含 gap
+    const currentScroll = scenarioList.scrollLeft;
+    const maxScroll = scenarioList.scrollWidth - scenarioList.clientWidth;
+    
+    let targetScroll;
+    
+    if (direction === 'prev') {
+        targetScroll = Math.max(0, currentScroll - itemWidth);
+    } else {
+        targetScroll = Math.min(maxScroll, currentScroll + itemWidth);
+    }
+    
+    scenarioList.scrollTo({
+        left: targetScroll,
+        behavior: 'smooth'
+    });
+    
+    // 更新按鈕狀態
+    setTimeout(updateNavButtons, 300);
+}
+
+// 更新導航按鈕狀態
+function updateNavButtons() {
+    const scenarioList = document.querySelector('.scenario-list');
+    const prevBtn = document.querySelector('.scenario-nav-btn.prev');
+    const nextBtn = document.querySelector('.scenario-nav-btn.next');
+    
+    if (!scenarioList || !prevBtn || !nextBtn) return;
+    
+    const scrollLeft = scenarioList.scrollLeft;
+    const maxScroll = scenarioList.scrollWidth - scenarioList.clientWidth;
+    
+    // 更新上一個按鈕
+    if (scrollLeft <= 10) {
+        prevBtn.classList.add('disabled');
+    } else {
+        prevBtn.classList.remove('disabled');
+    }
+    
+    // 更新下一個按鈕
+    if (scrollLeft >= maxScroll - 10) {
+        nextBtn.classList.add('disabled');
+    } else {
+        nextBtn.classList.remove('disabled');
+    }
+}
+
 // 場景滾動功能
 function initScenarioScroll() {
     const scenarioList = document.querySelector('.scenario-list');
     const scrollDots = document.querySelectorAll('.scroll-dot');
     const scenarioItems = document.querySelectorAll('.scenario-item');
     const scenarioWrapper = document.querySelector('.scenario-wrapper');
+    const scenariosSection = document.querySelector('.scenarios');
 
     if (!scenarioList || !scrollDots.length || !scenarioItems.length) return;
 
     // 計算每個項目的寬度和間距
     const itemWidth = scenarioItems[0].offsetWidth + 20; // 包含 gap
 
+    
     // 更新滾動指示器
     function updateScrollIndicator() {
         const scrollLeft = scenarioList.scrollLeft;
@@ -339,7 +396,10 @@ function initScenarioScroll() {
     let scrollTimeout;
     scenarioList.addEventListener('scroll', () => {
         clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(updateScrollIndicator, 50);
+        scrollTimeout = setTimeout(() => {
+            updateScrollIndicator();
+            updateNavButtons();
+        }, 50);
     });
 
     // 點擊指示器滾動到對應場景
@@ -355,6 +415,7 @@ function initScenarioScroll() {
 
     // 初始化指示器狀態
     updateScrollIndicator();
+    updateNavButtons();
 
     // 添加觸摸滑動支持
     let startX = 0;

style.css

@@ -171,48 +171,39 @@ body {
 }
 
 .scenario-list {
-    display: flex;
-    gap: 20px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    gap: 24px;
     padding: 20px 0;
     margin: 0;
-    cursor: grab;
-    /* Safari 優化 */
-    -webkit-transform: translateZ(0);
-    -webkit-backface-visibility: hidden;
 }
 
 @media (max-width: 768px) {
     .scenario-list {
+        display: flex;
         gap: 15px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        -webkit-overflow-scrolling: touch;
         padding: 20px 0;
+        cursor: grab;
+        /* Safari 優化 */
+        -webkit-transform: translateZ(0);
+        -webkit-backface-visibility: hidden;
+        grid-template-columns: none;
     }
 }
 
-.scenario-list::-webkit-scrollbar {
-    height: 0;
-}
-
-@media (min-width: 769px) {
-    .scenario-list {
-        padding: 20px calc(max((100vw - 1200px) / 2, 20px));
-        margin: -20px calc(min((100vw - 1200px) / -2, -20px));
+@media (max-width: 768px) {
+    .scenario-list::-webkit-scrollbar {
+        height: 0;
     }
 }
 
-/* 確保第一個和最後一個項目有足夠的空間 */
-.scenario-item:first-child {
-    margin-left: 20px;
-}
-
-.scenario-item:last-child {
-    margin-right: 20px;
-}
 
+/* 只在手機版添加邊距 */
 @media (max-width: 768px) {
     .scenario-item:first-child {
         margin-left: 20px;
@@ -223,38 +214,25 @@ body {
     }
 }
 
-@media (min-width: 769px) {
-    .scenario-item:first-child {
-        margin-left: 0;
-    }
-    
-    .scenario-item:last-child {
-        margin-right: 0;
-    }
-}
-
 .scenario-item {
-    background: rgba(255, 255, 255, 0.72);
+    background: #ffffff;
     color: #1d1d1f;
     padding: 40px;
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid #e5e5e7;
     border-radius: 18px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-    flex: 0 0 340px;
-    scroll-snap-align: start;
     min-height: 420px;
     display: flex;
     flex-direction: column;
-    backdrop-filter: blur(40px) saturate(1.8);
-    -webkit-backdrop-filter: blur(40px) saturate(1.8);
 }
 
 @media (max-width: 768px) {
     .scenario-item {
         flex: 0 0 calc(100vw - 80px);
+        scroll-snap-align: start;
         padding: 20px;
         min-height: 400px;
         max-width: none;
@@ -277,7 +255,7 @@ body {
 .scenario-item:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 20px 60px rgba(0,0,0,0.15);
-    background: rgba(255, 255, 255, 0.9);
+    background: #ffffff;
 }
 
 .scenario-item:hover::before {
@@ -512,13 +490,19 @@ body {
     font-size: 0.9rem;
 }
 
-/* 滾動指示器 */
+/* 滾動指示器 - 只在手機版顯示 */
 .scroll-indicator {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 32px;
-    padding: 20px;
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .scroll-indicator {
+        display: flex;
+        justify-content: center;
+        gap: 8px;
+        margin-top: 32px;
+        padding: 20px;
+    }
 }
 
 .scroll-dot {
@@ -536,59 +520,7 @@ body {
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
-/* 添加滑動提示漸變 */
-.scenario-wrapper::after {
-    content: '';
-    position: absolute;
-    top: 20px;
-    right: 0;
-    bottom: 20px;
-    width: 80px;
-    background: linear-gradient(to left, 
-        rgba(251,251,253,0.95) 0%, 
-        rgba(251,251,253,0.8) 20%,
-        rgba(251,251,253,0.4) 60%,
-        rgba(251,251,253,0) 100%
-    );
-    pointer-events: none;
-    z-index: 1;
-    opacity: 1;
-    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.scenario-wrapper::before {
-    content: '';
-    position: absolute;
-    top: 20px;
-    left: 0;
-    bottom: 20px;
-    width: 80px;
-    background: linear-gradient(to right, 
-        rgba(251,251,253,0.95) 0%, 
-        rgba(251,251,253,0.8) 20%,
-        rgba(251,251,253,0.4) 60%,
-        rgba(251,251,253,0) 100%
-    );
-    pointer-events: none;
-    z-index: 1;
-    opacity: 0;
-    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@media (min-width: 769px) {
-    .scenario-wrapper::after,
-    .scenario-wrapper::before {
-        width: 100px;
-    }
-}
-
-.scenario-wrapper.scrolled::before {
-    opacity: 1;
-}
-
-.scenario-wrapper.scrolled-end::after {
-    opacity: 0;
-}
+/* 移除滑動提示漸變效果 */
 
 /* 場景卡片內容細節樣式 */
 .scenario-details {