目標
加入排序下拉與方向切換；排序與目前的「類型/搜尋」同時作用（在首頁），心得牆也支援「新→舊 / 舊→新」。

改哪裡：首頁（index.html/front.html）、js/app.js、review.html、js/reviews.js

1. 首頁 HTML（在 filters 右邊新增排序 UI）

<div class="sorter">
  <label class="visually-hidden" for="sortKey">排序欄位</label>
  <select id="sortKey">
    <option value="title">片名</option>
    <option value="rating">評分</option>
  </select>
  <button id="sortDir" class="btn" type="button" data-dir="desc">降序 ⬇</button>
</div>

2. CSS（style.css）

.sorter{ display:inline-flex; align-items:center; gap:8px; margin-left: 8px; }
#sortKey{ padding: 8px 10px; border-radius: 10px; border:1px solid var(--border); background: var(--surface); }

3. JS（首頁 js/app.js：在渲染前加排序）

// 狀態
let sortKey = 'title'; // title | rating
let sortDir = 'desc';  // asc | desc

function sortList(list){
  const arr = list.slice();
  arr.sort((a,b)=>{
    let av = sortKey === 'rating' ? a.rating : a.title;
    let bv = sortKey === 'rating' ? b.rating : b.title;
    if (sortKey === 'title'){ av = av.toString().toLowerCase(); bv = bv.toString().toLowerCase(); }
    if (av < bv) return sortDir === 'asc' ? -1 : 1;
    if (av > bv) return sortDir === 'asc' ?  1 : -1;
    return 0;
  });
  return arr;
}

// 在 render(applyFilters()) 的地方改成：
function render(list){
  if (!onHome) return;
  const data = sortList(list);
  if (!data.length){ $cards.html(`<div class="empty">沒有符合條件的劇集</div>`); return; }
  $cards.html(data.map(cardTemplate).join(""));
}

// 綁定 UI
$(document).on('change', '#sortKey', function(){
  sortKey = $(this).val();
  render(applyFilters());
});
$(document).on('click', '#sortDir', function(){
  sortDir = $(this).data('dir') === 'desc' ? 'asc' : 'desc';
  $(this).data('dir', sortDir).text(sortDir === 'asc' ? '升序 ⬆' : '降序 ⬇');
  render(applyFilters());
});

4. 心得牆排序（js/reviews.js 簡易切換）

在 Day12 的 render() 前方，加入全域狀態與切換（HTML 你可在心得區標題旁放兩顆按鈕）：

<!-- review.html 的「最新心得」旁邊 -->
<div style="display:flex; gap:8px; align-items:center; margin:8px 0;">
  <button id="rvSortNew" class="btn" type="button">新→舊</button>
  <button id="rvSortOld" class="btn" type="button">舊→新</button>
</div>

let reviewSort = 'new'; // new | old
// render 裡的 sorted 改成：
const sorted = REVIEWS.slice().sort((a,b)=>{
  const cmp = (a.createdAt||'').localeCompare(b.createdAt||'');
  return reviewSort === 'new' ? -cmp : cmp;
});

$('#rvSortNew').on('click', ()=>{ reviewSort='new'; render(); });
$('#rvSortOld').on('click', ()=>{ reviewSort='old'; render(); });