From e2f492ccae9afcc98ae7eb76bb94dc973aed60d8 Mon Sep 17 00:00:00 2001
From: yyamashita <yyamashita@mosquit.one>
Date: Sat, 9 May 2026 14:11:33 +0900
Subject: simplize css

---
 app/routes/artist-by-uuid.tsx |  75 ++++++++-------------------
 app/routes/artist-edit.tsx    |  71 ++++++++------------------
 app/routes/artist-history.tsx |  35 +++++--------
 app/routes/artist-new.tsx     |  66 ++++++++----------------
 app/routes/band-by-uuid.tsx   |  77 +++++++++-------------------
 app/routes/band-edit.tsx      | 112 +++++++++++++++--------------------------
 app/routes/band-history.tsx   |  40 ++++++---------
 app/routes/band-new.tsx       | 114 +++++++++++++++---------------------------
 app/routes/home.tsx           |  27 ++++------
 9 files changed, 203 insertions(+), 414 deletions(-)

(limited to 'app/routes')

diff --git a/app/routes/artist-by-uuid.tsx b/app/routes/artist-by-uuid.tsx
index 9b8a4b1..6eb06a7 100644
--- a/app/routes/artist-by-uuid.tsx
+++ b/app/routes/artist-by-uuid.tsx
@@ -14,42 +14,23 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export default function ArtistDetail() {
   const { artist, links, bands, latest } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-start justify-between mb-6">
-        <h1 className="text-2xl font-bold">{artist.name}</h1>
-        <div className="flex items-center gap-3 text-sm shrink-0 ml-4">
-          <Link
-            to={`/artists/of/${artist.id}/history`}
-            className="text-gray-400 hover:text-gray-200 transition-colors"
-          >
-            履歴
-          </Link>
-          <Link
-            to={`/artists/of/${artist.id}/edit`}
-            className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors"
-          >
-            編集
-          </Link>
+    <main>
+      <div className="detail-header">
+        <h1>{artist.name}</h1>
+        <div className="detail-actions">
+          <Link to={`/artists/of/${artist.id}/history`} className="history">履歴</Link>
+          <Link to={`/artists/of/${artist.id}/edit`} className="edit">編集</Link>
         </div>
       </div>
 
       {bands.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            バンド
-          </h2>
-          <ul className="space-y-2">
+        <section>
+          <h2>バンド</h2>
+          <ul className="member-list">
             {bands.map((b) => (
-              <li key={b.band_id} className="flex items-center gap-3">
-                <Link
-                  to={`/bands/of/${b.band_id}`}
-                  className="text-blue-400 hover:text-blue-300 transition-colors font-medium"
-                >
-                  {b.band_name}
-                </Link>
-                {b.role && (
-                  <span className="text-gray-400 text-sm">{b.role}</span>
-                )}
+              <li key={b.band_id}>
+                <Link to={`/bands/of/${b.band_id}`}>{b.band_name}</Link>
+                {b.role && <span className="muted">{b.role}</span>}
               </li>
             ))}
           </ul>
@@ -57,42 +38,26 @@ export default function ArtistDetail() {
       )}
 
       {links.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            リンク
-          </h2>
-          <ul className="space-y-1.5">
+        <section>
+          <h2>リンク</h2>
+          <ul className="link-list">
             {links.map((l) => (
               <li key={l.id}>
-                <a
-                  href={l.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-400 hover:text-blue-300 transition-colors text-sm"
-                >
-                  {l.label}
-                </a>
+                <a href={l.url} target="_blank" rel="noopener noreferrer">{l.label}</a>
               </li>
             ))}
           </ul>
         </section>
       )}
 
-      <hr className="border-gray-800 my-6" />
-      <div className="text-xs text-gray-600 space-y-1 font-mono">
+      <hr />
+      <div className="meta">
         <p>/artists/of/{artist.id}</p>
         <p>
-          <Link
-            to={`/artists/named/${artist.slug}`}
-            className="hover:text-gray-400 transition-colors"
-          >
-            /artists/named/{artist.slug}
-          </Link>
+          <Link to={`/artists/named/${artist.slug}`}>/artists/named/{artist.slug}</Link>
         </p>
         {latest && (
-          <p className="font-sans text-gray-500 mt-2">
-            最終更新: {latest.created_at} — {latest.message}
-          </p>
+          <p className="updated">最終更新: {latest.created_at} — {latest.message}</p>
         )}
       </div>
     </main>
diff --git a/app/routes/artist-edit.tsx b/app/routes/artist-edit.tsx
index f2e5c18..e3a49af 100644
--- a/app/routes/artist-edit.tsx
+++ b/app/routes/artist-edit.tsx
@@ -54,24 +54,17 @@ export default function ArtistEdit() {
   const [links, setLinks] = useState(initLinks.map((l) => ({ label: l.label, url: l.url })));
 
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-center gap-3 mb-6">
-        <Link
-          to={`/artists/of/${artist.id}`}
-          className="text-gray-400 hover:text-gray-200 transition-colors"
-        >
-          ←
-        </Link>
-        <h1 className="text-xl font-semibold">Edit Artist</h1>
+    <main>
+      <div className="page-header">
+        <Link to={`/artists/of/${artist.id}`} className="back">←</Link>
+        <h1>Edit Artist</h1>
       </div>
 
-      <Form method="post" className="space-y-5">
+      <Form method="post">
         <input type="hidden" name="links" value={JSON.stringify(links)} />
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            名前 <span className="text-red-400">*</span>
-          </label>
+          <label>名前 <span className="req">*</span></label>
           <input
             name="name"
             value={name}
@@ -79,45 +72,41 @@ export default function ArtistEdit() {
               setName(e.target.value);
               if (!slugManual) setSlug(toSlug(e.target.value));
             }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
           />
-          {errors.name && <p className="text-red-400 text-sm mt-1">{errors.name}</p>}
+          {errors.name && <p className="error">{errors.name}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            Slug <span className="text-red-400">*</span>
-          </label>
+          <label>Slug <span className="req">*</span></label>
           <input
             name="slug"
             value={slug}
             onChange={(e) => { setSlugManual(true); setSlug(e.target.value); }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm"
+            className="mono"
           />
-          {errors.slug && <p className="text-red-400 text-sm mt-1">{errors.slug}</p>}
+          {errors.slug && <p className="error">{errors.slug}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">リンク</label>
-          <div className="space-y-2">
+          <label>リンク</label>
+          <div className="links-form">
             {links.map((link, i) => (
-              <div key={i} className="flex gap-2">
+              <div key={i} className="link-row">
                 <input
+                  className="label-input"
                   value={link.label}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))}
                   placeholder="ラベル (例: X)"
-                  className="w-28 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
                 <input
                   value={link.url}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))}
                   placeholder="https://..."
-                  className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
                 <button
                   type="button"
+                  className="btn-icon"
                   onClick={() => setLinks(links.filter((_, idx) => idx !== i))}
-                  className="text-gray-500 hover:text-red-400 px-2 transition-colors"
                 >
                   ×
                 </button>
@@ -126,38 +115,22 @@ export default function ArtistEdit() {
           </div>
           <button
             type="button"
+            className="btn-text"
             onClick={() => setLinks([...links, { label: "", url: "" }])}
-            className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors"
           >
             + リンクを追加
           </button>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            更新メッセージ <span className="text-red-400">*</span>
-          </label>
-          <input
-            name="message"
-            placeholder="例: SNSリンク追加"
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          />
-          {errors.message && <p className="text-red-400 text-sm mt-1">{errors.message}</p>}
+          <label>更新メッセージ <span className="req">*</span></label>
+          <input name="message" placeholder="例: SNSリンク追加" />
+          {errors.message && <p className="error">{errors.message}</p>}
         </div>
 
-        <div className="flex gap-3 pt-2">
-          <button
-            type="submit"
-            className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors"
-          >
-            保存
-          </button>
-          <Link
-            to={`/artists/of/${artist.id}`}
-            className="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded transition-colors"
-          >
-            キャンセル
-          </Link>
+        <div className="actions">
+          <button type="submit">保存</button>
+          <Link to={`/artists/of/${artist.id}`} className="btn">キャンセル</Link>
         </div>
       </Form>
     </main>
diff --git a/app/routes/artist-history.tsx b/app/routes/artist-history.tsx
index c2fb4cb..2808927 100644
--- a/app/routes/artist-history.tsx
+++ b/app/routes/artist-history.tsx
@@ -12,38 +12,29 @@ export async function loader({ params }: LoaderFunctionArgs) {
 export default function ArtistHistory() {
   const { artist, 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={`/artists/of/${artist.id}`}
-          className="text-gray-400 hover:text-gray-200 transition-colors"
-        >
-          ←
-        </Link>
-        <h1 className="text-xl font-semibold">{artist.name} — 編集履歴</h1>
+    <main>
+      <div className="page-header">
+        <Link to={`/artists/of/${artist.id}`} className="back">←</Link>
+        <h1>{artist.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; links?: 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>
                   <p>リンク: {snap.links?.length ?? 0}件</p>
                 </div>
diff --git a/app/routes/artist-new.tsx b/app/routes/artist-new.tsx
index 168a7cc..ce91dab 100644
--- a/app/routes/artist-new.tsx
+++ b/app/routes/artist-new.tsx
@@ -44,19 +44,17 @@ export default function ArtistNew() {
   const [links, setLinks] = useState<{ label: string; url: string }[]>([]);
 
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-center gap-3 mb-6">
-        <Link to="/" className="text-gray-400 hover:text-gray-200 transition-colors">←</Link>
-        <h1 className="text-xl font-semibold">New Artist</h1>
+    <main>
+      <div className="page-header">
+        <Link to="/" className="back">←</Link>
+        <h1>New Artist</h1>
       </div>
 
-      <Form method="post" className="space-y-5">
+      <Form method="post">
         <input type="hidden" name="links" value={JSON.stringify(links)} />
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            名前 <span className="text-red-400">*</span>
-          </label>
+          <label>名前 <span className="req">*</span></label>
           <input
             name="name"
             value={name}
@@ -64,45 +62,41 @@ export default function ArtistNew() {
               setName(e.target.value);
               if (!slugManual) setSlug(toSlug(e.target.value));
             }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
           />
-          {errors.name && <p className="text-red-400 text-sm mt-1">{errors.name}</p>}
+          {errors.name && <p className="error">{errors.name}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            Slug <span className="text-red-400">*</span>
-          </label>
+          <label>Slug <span className="req">*</span></label>
           <input
             name="slug"
             value={slug}
             onChange={(e) => { setSlugManual(true); setSlug(e.target.value); }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm"
+            className="mono"
           />
-          {errors.slug && <p className="text-red-400 text-sm mt-1">{errors.slug}</p>}
+          {errors.slug && <p className="error">{errors.slug}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">リンク</label>
-          <div className="space-y-2">
+          <label>リンク</label>
+          <div className="links-form">
             {links.map((link, i) => (
-              <div key={i} className="flex gap-2">
+              <div key={i} className="link-row">
                 <input
+                  className="label-input"
                   value={link.label}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))}
                   placeholder="ラベル (例: X)"
-                  className="w-28 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
                 <input
                   value={link.url}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))}
                   placeholder="https://..."
-                  className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
                 <button
                   type="button"
+                  className="btn-icon"
                   onClick={() => setLinks(links.filter((_, idx) => idx !== i))}
-                  className="text-gray-500 hover:text-red-400 px-2 transition-colors"
                 >
                   ×
                 </button>
@@ -111,38 +105,22 @@ export default function ArtistNew() {
           </div>
           <button
             type="button"
+            className="btn-text"
             onClick={() => setLinks([...links, { label: "", url: "" }])}
-            className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors"
           >
             + リンクを追加
           </button>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            更新メッセージ <span className="text-red-400">*</span>
-          </label>
-          <input
-            name="message"
-            placeholder="例: 初回登録"
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          />
-          {errors.message && <p className="text-red-400 text-sm mt-1">{errors.message}</p>}
+          <label>更新メッセージ <span className="req">*</span></label>
+          <input name="message" placeholder="例: 初回登録" />
+          {errors.message && <p className="error">{errors.message}</p>}
         </div>
 
-        <div className="flex gap-3 pt-2">
-          <button
-            type="submit"
-            className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors"
-          >
-            作成
-          </button>
-          <Link
-            to="/"
-            className="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded transition-colors"
-          >
-            キャンセル
-          </Link>
+        <div className="actions">
+          <button type="submit">作成</button>
+          <Link to="/" className="btn">キャンセル</Link>
         </div>
       </Form>
     </main>
diff --git a/app/routes/band-by-uuid.tsx b/app/routes/band-by-uuid.tsx
index 9cb4d33..99a8b5c 100644
--- a/app/routes/band-by-uuid.tsx
+++ b/app/routes/band-by-uuid.tsx
@@ -26,50 +26,33 @@ const STATUS_LABEL: Record<string, string> = {
 export default function BandDetail() {
   const { band, links, artists, latest } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-start justify-between mb-6">
-        <div>
-          <h1 className="text-2xl font-bold">{band.name}</h1>
-          <div className="flex items-center gap-3 mt-1 text-sm text-gray-400">
+    <main>
+      <div className="detail-header">
+        <div className="detail-info">
+          <h1>{band.name}</h1>
+          <div className="detail-subtitle">
             {band.area && <span>{band.area}</span>}
             <span>{STATUS_LABEL[band.status] ?? band.status}</span>
           </div>
           {band.description && (
-            <p className="mt-3 text-gray-300 text-sm leading-relaxed">{band.description}</p>
+            <p className="detail-desc">{band.description}</p>
           )}
         </div>
-        <div className="flex items-center gap-3 text-sm shrink-0 ml-4">
-          <Link
-            to={`/bands/of/${band.id}/history`}
-            className="text-gray-400 hover:text-gray-200 transition-colors"
-          >
-            履歴
-          </Link>
-          <Link
-            to={`/bands/of/${band.id}/edit`}
-            className="bg-gray-800 hover:bg-gray-700 text-gray-200 px-3 py-1.5 rounded transition-colors"
-          >
-            編集
-          </Link>
+        <div className="detail-actions">
+          <Link to={`/bands/of/${band.id}/history`} className="history">履歴</Link>
+          <Link to={`/bands/of/${band.id}/edit`} className="edit">編集</Link>
         </div>
       </div>
 
       {artists.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            メンバー
-          </h2>
-          <ul className="space-y-2">
+        <section>
+          <h2>メンバー</h2>
+          <ul className="member-list">
             {artists.map((a) => (
-              <li key={a.artist_id} className="flex items-center gap-3 flex-wrap">
-                <Link
-                  to={`/artists/of/${a.artist_id}`}
-                  className="text-blue-400 hover:text-blue-300 transition-colors font-medium"
-                >
-                  {a.artist_name}
-                </Link>
+              <li key={a.artist_id}>
+                <Link to={`/artists/of/${a.artist_id}`}>{a.artist_name}</Link>
                 {a.role && a.role.split(", ").filter(Boolean).map((r, i) => (
-                  <span key={i} className="text-gray-500 text-xs bg-gray-900 px-1.5 py-0.5 rounded">{r}</span>
+                  <span key={i} className="badge">{r}</span>
                 ))}
               </li>
             ))}
@@ -78,19 +61,12 @@ export default function BandDetail() {
       )}
 
       {links.length > 0 && (
-        <section className="mb-6">
-          <h2 className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
-            リンク
-          </h2>
-          <ul className="space-y-1.5">
+        <section>
+          <h2>リンク</h2>
+          <ul className="link-list">
             {links.map((l) => (
               <li key={l.id}>
-                <a
-                  href={l.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-400 hover:text-blue-300 transition-colors text-sm"
-                >
+                <a href={l.url} target="_blank" rel="noopener noreferrer">
                   {LINK_TYPE_LABEL[l.label] ?? l.label}
                 </a>
               </li>
@@ -99,21 +75,14 @@ export default function BandDetail() {
         </section>
       )}
 
-      <hr className="border-gray-800 my-6" />
-      <div className="text-xs text-gray-600 space-y-1 font-mono">
+      <hr />
+      <div className="meta">
         <p>/bands/of/{band.id}</p>
         <p>
-          <Link
-            to={`/bands/named/${band.slug}`}
-            className="hover:text-gray-400 transition-colors"
-          >
-            /bands/named/{band.slug}
-          </Link>
+          <Link to={`/bands/named/${band.slug}`}>/bands/named/{band.slug}</Link>
         </p>
         {latest && (
-          <p className="font-sans text-gray-500 mt-2">
-            最終更新: {latest.created_at} — {latest.message}
-          </p>
+          <p className="updated">最終更新: {latest.created_at} — {latest.message}</p>
         )}
       </div>
     </main>
diff --git a/app/routes/band-edit.tsx b/app/routes/band-edit.tsx
index 0a98bd6..2e29277 100644
--- a/app/routes/band-edit.tsx
+++ b/app/routes/band-edit.tsx
@@ -97,13 +97,13 @@ export default function BandEdit() {
   }
 
   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">Edit Band</h1>
+    <main>
+      <div className="page-header">
+        <Link to={`/bands/of/${band.id}`} className="back">←</Link>
+        <h1>Edit Band</h1>
       </div>
 
-      <Form method="post" className="space-y-5">
+      <Form method="post">
         <input type="hidden" name="links" value={JSON.stringify(links)} />
         <input
           type="hidden"
@@ -112,47 +112,34 @@ export default function BandEdit() {
         />
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            バンド名 <span className="text-red-400">*</span>
-          </label>
+          <label>バンド名 <span className="req">*</span></label>
           <input
             name="name"
             value={name}
             onChange={(e) => { setName(e.target.value); if (!slugManual) setSlug(toSlug(e.target.value)); }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
           />
-          {errors.name && <p className="text-red-400 text-sm mt-1">{errors.name}</p>}
+          {errors.name && <p className="error">{errors.name}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            Slug <span className="text-red-400">*</span>
-          </label>
+          <label>Slug <span className="req">*</span></label>
           <input
             name="slug"
             value={slug}
             onChange={(e) => { setSlugManual(true); setSlug(e.target.value); }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm"
+            className="mono"
           />
-          {errors.slug && <p className="text-red-400 text-sm mt-1">{errors.slug}</p>}
+          {errors.slug && <p className="error">{errors.slug}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">活動拠点</label>
-          <input
-            name="area"
-            defaultValue={band.area ?? ""}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          />
+          <label>活動拠点</label>
+          <input name="area" defaultValue={band.area ?? ""} />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">ステータス</label>
-          <select
-            name="status"
-            defaultValue={band.status}
-            className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          >
+          <label>ステータス</label>
+          <select name="status" defaultValue={band.status}>
             <option value="active">活動中</option>
             <option value="hiatus">活動休止</option>
             <option value="disbanded">解散</option>
@@ -160,24 +147,18 @@ export default function BandEdit() {
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">説明</label>
-          <textarea
-            name="description"
-            rows={3}
-            defaultValue={band.description ?? ""}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 resize-none"
-          />
+          <label>説明</label>
+          <textarea name="description" rows={3} defaultValue={band.description ?? ""} />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">リンク</label>
-          <div className="space-y-2">
+          <label>リンク</label>
+          <div className="links-form">
             {links.map((link, i) => (
-              <div key={i} className="flex gap-2">
+              <div key={i} className="link-row">
                 <select
                   value={link.label}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))}
-                  className="w-36 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 >
                   {LINK_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
                 </select>
@@ -185,73 +166,65 @@ export default function BandEdit() {
                   value={link.url}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))}
                   placeholder="https://..."
-                  className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
-                <button type="button" onClick={() => setLinks(links.filter((_, idx) => idx !== i))} className="text-gray-500 hover:text-red-400 px-2 transition-colors">×</button>
+                <button type="button" className="btn-icon" onClick={() => setLinks(links.filter((_, idx) => idx !== i))}>×</button>
               </div>
             ))}
           </div>
           <button
             type="button"
+            className="btn-text"
             onClick={() => setLinks([...links, { label: LINK_TYPES[0].value, url: "" }])}
-            className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors"
           >
             + リンクを追加
           </button>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">メンバー</label>
+          <label>メンバー</label>
           {picked.length > 0 && (
-            <div className="space-y-2 mb-3">
+            <div className="members-form">
               {picked.map((p) => {
                 const pend = pending[p.id] ?? DEFAULT_PENDING;
                 return (
-                  <div key={p.id} className="bg-gray-900 rounded-lg p-3">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-gray-200 text-sm font-medium">{p.name}</span>
+                  <div key={p.id} className="member-card">
+                    <div className="card-header">
+                      <span className="card-name">{p.name}</span>
                       <button
                         type="button"
+                        className="btn-icon"
                         onClick={() => setPicked(picked.filter((a) => a.id !== p.id))}
-                        className="text-gray-500 hover:text-red-400 text-xs transition-colors"
                       >
                         削除
                       </button>
                     </div>
                     {p.roles.length > 0 && (
-                      <div className="flex flex-wrap gap-1.5 mb-2">
+                      <div className="badges">
                         {p.roles.map((r, ri) => (
-                          <span key={ri} className="inline-flex items-center gap-1 bg-gray-800 text-gray-300 text-xs px-2 py-0.5 rounded">
+                          <span key={ri} className="badge">
                             {r}
-                            <button type="button" onClick={() => removeRole(p.id, ri)} className="text-gray-500 hover:text-red-400 leading-none">×</button>
+                            <button type="button" onClick={() => removeRole(p.id, ri)}>×</button>
                           </span>
                         ))}
                       </div>
                     )}
-                    <div className="flex gap-2 items-center">
+                    <div className="role-row">
                       <select
                         value={pend.type}
                         onChange={(e) => setPending({ ...pending, [p.id]: { ...pend, type: e.target.value } })}
-                        className="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-gray-300 text-sm focus:outline-none focus:border-blue-500"
                       >
                         {ARTIST_ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
                         <option value="other">その他...</option>
                       </select>
                       {pend.type === "other" && (
                         <input
+                          className="custom-input"
                           value={pend.custom}
                           onChange={(e) => setPending({ ...pending, [p.id]: { ...pend, custom: e.target.value } })}
                           placeholder="ロール名"
-                          className="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-gray-300 text-sm focus:outline-none focus:border-blue-500 w-32"
                         />
                       )}
-                      <button
-                        type="button"
-                        onClick={() => addRole(p.id)}
-                        className="text-blue-400 hover:text-blue-300 text-sm transition-colors"
-                      >
-                        + 追加
-                      </button>
+                      <button type="button" className="btn-text" onClick={() => addRole(p.id)}>+ 追加</button>
                     </div>
                   </div>
                 );
@@ -269,7 +242,6 @@ export default function BandEdit() {
                 }
               }}
               defaultValue=""
-              className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-400 focus:outline-none focus:border-blue-500 text-sm"
             >
               <option value="">+ アーティストを追加...</option>
               {available.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
@@ -278,20 +250,14 @@ export default function BandEdit() {
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            更新メッセージ <span className="text-red-400">*</span>
-          </label>
-          <input
-            name="message"
-            placeholder="例: メンバー追加"
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          />
-          {errors.message && <p className="text-red-400 text-sm mt-1">{errors.message}</p>}
+          <label>更新メッセージ <span className="req">*</span></label>
+          <input name="message" placeholder="例: メンバー追加" />
+          {errors.message && <p className="error">{errors.message}</p>}
         </div>
 
-        <div className="flex gap-3 pt-2">
-          <button type="submit" className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors">保存</button>
-          <Link to={`/bands/of/${band.id}`} className="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded transition-colors">キャンセル</Link>
+        <div className="actions">
+          <button type="submit">保存</button>
+          <Link to={`/bands/of/${band.id}`} className="btn">キャンセル</Link>
         </div>
       </Form>
     </main>
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>
             );
diff --git a/app/routes/band-new.tsx b/app/routes/band-new.tsx
index a15ce24..62be1d4 100644
--- a/app/routes/band-new.tsx
+++ b/app/routes/band-new.tsx
@@ -75,13 +75,13 @@ export default function BandNew() {
   }
 
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-center gap-3 mb-6">
-        <Link to="/" className="text-gray-400 hover:text-gray-200 transition-colors">←</Link>
-        <h1 className="text-xl font-semibold">New Band</h1>
+    <main>
+      <div className="page-header">
+        <Link to="/" className="back">←</Link>
+        <h1>New Band</h1>
       </div>
 
-      <Form method="post" className="space-y-5">
+      <Form method="post">
         <input type="hidden" name="links" value={JSON.stringify(links)} />
         <input
           type="hidden"
@@ -90,46 +90,34 @@ export default function BandNew() {
         />
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            バンド名 <span className="text-red-400">*</span>
-          </label>
+          <label>バンド名 <span className="req">*</span></label>
           <input
             name="name"
             value={name}
             onChange={(e) => { setName(e.target.value); if (!slugManual) setSlug(toSlug(e.target.value)); }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
           />
-          {errors.name && <p className="text-red-400 text-sm mt-1">{errors.name}</p>}
+          {errors.name && <p className="error">{errors.name}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            Slug <span className="text-red-400">*</span>
-          </label>
+          <label>Slug <span className="req">*</span></label>
           <input
             name="slug"
             value={slug}
             onChange={(e) => { setSlugManual(true); setSlug(e.target.value); }}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm"
+            className="mono"
           />
-          {errors.slug && <p className="text-red-400 text-sm mt-1">{errors.slug}</p>}
+          {errors.slug && <p className="error">{errors.slug}</p>}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">活動拠点</label>
-          <input
-            name="area"
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          />
+          <label>活動拠点</label>
+          <input name="area" />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">ステータス</label>
-          <select
-            name="status"
-            defaultValue="active"
-            className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          >
+          <label>ステータス</label>
+          <select name="status" defaultValue="active">
             <option value="active">活動中</option>
             <option value="hiatus">活動休止</option>
             <option value="disbanded">解散</option>
@@ -137,23 +125,18 @@ export default function BandNew() {
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">説明</label>
-          <textarea
-            name="description"
-            rows={3}
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 resize-none"
-          />
+          <label>説明</label>
+          <textarea name="description" rows={3} />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">リンク</label>
-          <div className="space-y-2">
+          <label>リンク</label>
+          <div className="links-form">
             {links.map((link, i) => (
-              <div key={i} className="flex gap-2">
+              <div key={i} className="link-row">
                 <select
                   value={link.label}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))}
-                  className="w-36 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 >
                   {LINK_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
                 </select>
@@ -161,73 +144,65 @@ export default function BandNew() {
                   value={link.url}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))}
                   placeholder="https://..."
-                  className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
                 />
-                <button type="button" onClick={() => setLinks(links.filter((_, idx) => idx !== i))} className="text-gray-500 hover:text-red-400 px-2 transition-colors">×</button>
+                <button type="button" className="btn-icon" onClick={() => setLinks(links.filter((_, idx) => idx !== i))}>×</button>
               </div>
             ))}
           </div>
           <button
             type="button"
+            className="btn-text"
             onClick={() => setLinks([...links, { label: LINK_TYPES[0].value, url: "" }])}
-            className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors"
           >
             + リンクを追加
           </button>
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">メンバー</label>
+          <label>メンバー</label>
           {picked.length > 0 && (
-            <div className="space-y-2 mb-3">
+            <div className="members-form">
               {picked.map((p) => {
                 const pend = pending[p.id] ?? DEFAULT_PENDING;
                 return (
-                  <div key={p.id} className="bg-gray-900 rounded-lg p-3">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="text-gray-200 text-sm font-medium">{p.name}</span>
+                  <div key={p.id} className="member-card">
+                    <div className="card-header">
+                      <span className="card-name">{p.name}</span>
                       <button
                         type="button"
+                        className="btn-icon"
                         onClick={() => setPicked(picked.filter((a) => a.id !== p.id))}
-                        className="text-gray-500 hover:text-red-400 text-xs transition-colors"
                       >
                         削除
                       </button>
                     </div>
                     {p.roles.length > 0 && (
-                      <div className="flex flex-wrap gap-1.5 mb-2">
+                      <div className="badges">
                         {p.roles.map((r, ri) => (
-                          <span key={ri} className="inline-flex items-center gap-1 bg-gray-800 text-gray-300 text-xs px-2 py-0.5 rounded">
+                          <span key={ri} className="badge">
                             {r}
-                            <button type="button" onClick={() => removeRole(p.id, ri)} className="text-gray-500 hover:text-red-400 leading-none">×</button>
+                            <button type="button" onClick={() => removeRole(p.id, ri)}>×</button>
                           </span>
                         ))}
                       </div>
                     )}
-                    <div className="flex gap-2 items-center">
+                    <div className="role-row">
                       <select
                         value={pend.type}
                         onChange={(e) => setPending({ ...pending, [p.id]: { ...pend, type: e.target.value } })}
-                        className="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-gray-300 text-sm focus:outline-none focus:border-blue-500"
                       >
                         {ARTIST_ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
                         <option value="other">その他...</option>
                       </select>
                       {pend.type === "other" && (
                         <input
+                          className="custom-input"
                           value={pend.custom}
                           onChange={(e) => setPending({ ...pending, [p.id]: { ...pend, custom: e.target.value } })}
                           placeholder="ロール名"
-                          className="bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-gray-300 text-sm focus:outline-none focus:border-blue-500 w-32"
                         />
                       )}
-                      <button
-                        type="button"
-                        onClick={() => addRole(p.id)}
-                        className="text-blue-400 hover:text-blue-300 text-sm transition-colors"
-                      >
-                        + 追加
-                      </button>
+                      <button type="button" className="btn-text" onClick={() => addRole(p.id)}>+ 追加</button>
                     </div>
                   </div>
                 );
@@ -245,34 +220,27 @@ export default function BandNew() {
                 }
               }}
               defaultValue=""
-              className="bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-400 focus:outline-none focus:border-blue-500 text-sm"
             >
               <option value="">+ アーティストを追加...</option>
               {available.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
             </select>
           ) : artists.length === 0 ? (
-            <p className="text-gray-500 text-sm">
+            <p className="muted">
               アーティストがいません。{" "}
-              <Link to="/artists/new" className="text-blue-400 hover:text-blue-300">先に作成</Link>
+              <Link to="/artists/new">先に作成</Link>
             </p>
           ) : null}
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-300 mb-1">
-            更新メッセージ <span className="text-red-400">*</span>
-          </label>
-          <input
-            name="message"
-            placeholder="例: 初回登録"
-            className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500"
-          />
-          {errors.message && <p className="text-red-400 text-sm mt-1">{errors.message}</p>}
+          <label>更新メッセージ <span className="req">*</span></label>
+          <input name="message" placeholder="例: 初回登録" />
+          {errors.message && <p className="error">{errors.message}</p>}
         </div>
 
-        <div className="flex gap-3 pt-2">
-          <button type="submit" className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded font-medium transition-colors">作成</button>
-          <Link to="/" className="bg-gray-800 hover:bg-gray-700 text-gray-300 px-4 py-2 rounded transition-colors">キャンセル</Link>
+        <div className="actions">
+          <button type="submit">作成</button>
+          <Link to="/" className="btn">キャンセル</Link>
         </div>
       </Form>
     </main>
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 5600645..5aa7de1 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -14,32 +14,23 @@ const STATUS_LABEL: Record<string, string> = {
 export default function Home() {
   const { bands } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-2xl mx-auto px-6 py-12">
+    <main>
       {bands.length === 0 ? (
-        <p className="text-gray-600 text-sm">
+        <p className="muted">
           バンドがまだありません。{" "}
-          <Link to="/bands/new" className="underline">
-            追加する
-          </Link>
+          <Link to="/bands/new">追加する</Link>
         </p>
       ) : (
-        <ul className="divide-y divide-gray-900">
+        <ul className="band-list">
           {bands.map((band) => (
-            <li key={band.id} className="py-4 flex items-start justify-between gap-6">
-              <div className="min-w-0">
-                <Link
-                  to={`/bands/of/${band.id}`}
-                  className="text-gray-100 hover:text-white font-medium"
-                >
-                  {band.name}
-                </Link>
+            <li key={band.id}>
+              <div className="name-col">
+                <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
                 {band.description && (
-                  <p className="text-gray-500 text-sm mt-0.5 line-clamp-1">
-                    {band.description}
-                  </p>
+                  <p className="desc">{band.description}</p>
                 )}
               </div>
-              <div className="flex items-center gap-4 text-sm text-gray-500 shrink-0 pt-0.5">
+              <div className="info">
                 {band.area && <span>{band.area}</span>}
                 <span>{STATUS_LABEL[band.status] ?? band.status}</span>
               </div>
-- 
cgit v1.2.3