Migrate to HeroUI v3 and Tailwind CSS v4

- Upgrade from Tailwind CSS v3 to v4 with CSS-first configuration
- Install HeroUI v3 beta packages (@heroui/react, @heroui/styles)
- Migrate PostCSS config to new @tailwindcss/postcss plugin
- Convert tailwind.config.cjs to CSS @theme directive in globals.css
- Replace @tailwindcss/typography with custom prose styles

Component migrations:
- theme-toggle, back-to-top: HeroUI Button with onPress
- post-card, post-list-item: HeroUI Card compound components
- right-sidebar: HeroUI Card, Avatar, Chip
- search-modal: HeroUI Modal with compound structure
- nav-menu: HeroUI Button for mobile controls
- post-list-with-controls: HeroUI Button for sorting/pagination

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

components/back-to-top.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { Button } from '@heroui/react';
 
 export function BackToTop() {
   const [visible, setVisible] = useState(false);
@@ -22,16 +23,16 @@ export function BackToTop() {
   if (!visible) return null;
 
   return (
-    <button
-      type="button"
-      onClick={() => {
+    <Button
+      isIconOnly
+      variant="secondary"
+      className="fixed bottom-6 right-4 z-40 h-9 w-9 rounded-full bg-slate-900 text-slate-50 shadow-md ring-1 ring-slate-800/70 transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:ring-slate-300/70 dark:hover:bg-slate-300"
+      onPress={() => {
         window.scrollTo({ top: 0, behavior: 'smooth' });
       }}
       aria-label="回到頁面頂部"
-      className="fixed bottom-6 right-4 z-40 inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-900 text-slate-50 shadow-md ring-1 ring-slate-800/70 transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900 dark:ring-slate-300/70 dark:hover:bg-slate-300"
     >
       <span className="text-lg leading-none">↑</span>
-    </button>
+    </Button>
   );
 }
-