1 files changed, 14 insertions, 26 deletions
diff --git a/app/routes/band-history.tsx b/app/routes/band-history.tsx
index 11e2f2f..954fd52 100644
--- a/app/routes/band-history.tsx
+++ b/app/routes/band-history.tsx
@@ -12,44 +12,32 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export default function BandHistory() {
   const { band, revisions } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-center gap-3 mb-6">
-        <Link
-          to={`/bands/of/${band.id}`}
-          className="text-gray-400 hover:text-gray-200 transition-colors"
-        >
-          ←
-        </Link>
-        <h1 className="text-xl font-semibold">{band.name} — 編集履歴</h1>
+    <main>
+      <div className="page-header">
+        <Link to={`/bands/of/${band.id}`} className="back">←</Link>
+        <h1>{band.name} — 編集履歴</h1>
       </div>
 
       {revisions.length === 0 ? (
-        <p className="text-gray-400">履歴がありません。</p>
+        <p className="muted">履歴がありません。</p>
       ) : (
-        <ol className="space-y-4">
+        <ol className="rev-list">
           {revisions.map((rev, i) => {
             let snap: { name?: string; area?: string; links?: unknown[]; artists?: unknown[] } = {};
             try { snap = JSON.parse(rev.snapshot); } catch { /* ignore */ }
             return (
-              <li key={rev.id} className="bg-gray-900 rounded-lg p-4">
-                <div className="flex items-start justify-between gap-4">
-                  <div className="flex-1 min-w-0">
-                    <p className="font-medium text-gray-100 truncate">{rev.message}</p>
-                    <p className="text-xs text-gray-500 mt-1">
-                      {rev.created_at} · {rev.ip_address}
-                    </p>
+              <li key={rev.id} className="rev">
+                <div className="rev-header">
+                  <div className="rev-main">
+                    <p className="rev-message">{rev.message}</p>
+                    <p className="rev-time">{rev.created_at} · {rev.ip_address}</p>
                   </div>
-                  {i === 0 && (
-                    <span className="text-xs text-blue-400 shrink-0">最新</span>
-                  )}
+                  {i === 0 && <span className="rev-latest">最新</span>}
                 </div>
-                <div className="mt-3 text-xs text-gray-400 space-y-0.5">
+                <div className="rev-snap">
                   <p>名前: {snap.name ?? "—"}</p>
                   {snap.area && <p>拠点: {snap.area}</p>}
-                  <p>
-                    リンク: {snap.links?.length ?? 0}件 / メンバー:{" "}
-                    {snap.artists?.length ?? 0}人
-                  </p>
+                  <p>リンク: {snap.links?.length ?? 0}件 / メンバー: {snap.artists?.length ?? 0}人</p>
                 </div>
               </li>
             );