feat(shows): redesign selection bar and update delete button functionality

frontend/src/index.css

@@ -458,6 +458,39 @@ kbd {
 }
 .show-card .title { font-weight:800; }
 .show-card.selected { outline: 2px solid var(--accent); background: rgba(121,192,255,0.10); }
+.selection-bar {
+  position: sticky;
+  bottom: 0;
+  margin-top: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: rgba(12,16,24,0.96);
+  border: 1px solid rgba(255,255,255,0.14);
+  box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+}
+.selection-meta { display: grid; gap: 4px; min-width: 0; }
+.selection-count { font-size: 12px; color: var(--subtle); font-weight: 700; }
+.selection-title { font-weight: 800; }
+.selection-note { font-size: 12px; color: var(--subtle); }
+.danger-btn {
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1px solid rgba(255,107,107,0.55);
+  background: linear-gradient(135deg, rgba(255,107,107,0.15), rgba(255,107,107,0.28));
+  color: var(--text);
+  font-weight: 800;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.danger-btn:hover { background: linear-gradient(135deg, rgba(255,107,107,0.25), rgba(255,107,107,0.35)); }
+.danger-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 .form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; }
 .input {

frontend/src/pages/ShowsPage.tsx

@@ -126,7 +126,7 @@ export default function ShowsPage() {
         };
     }, []);
 
-    const current = useMemo(() => shows.find(s => s.id === selectedId) || null, [shows, selectedId]);
+    const selectedShow = useMemo(() => shows.find(s => s.id === selectedId) || null, [shows, selectedId]);
 
     async function submit() {
         setError(null);
@@ -239,6 +239,7 @@ export default function ShowsPage() {
             toastInfo("エピソードを削除しました");
             if (selectedId === showId) {
                 setSelectedId(null);
+                setStartTime("");
             }
             await loadShows();
         } catch (e: unknown) {
@@ -342,20 +343,18 @@ export default function ShowsPage() {
                             key={s.id}
                             className={`show-card ${selectedId === s.id ? "selected" : ""}`}
                             onClick={() => {
-                                setSelectedId(s.id);
-                                setStartTime(s.start_time.slice(0, 5));
+                                setSelectedId((prev) => {
+                                    if (prev === s.id) {
+                                        setStartTime("");
+                                        return null;
+                                    }
+                                    setStartTime(s.start_time.slice(0, 5));
+                                    return s.id;
+                                });
                             }}
                         >
                             <div className="title-row">
                                 <div className="title">第{s.ep_num}話：{s.ep_title}</div>
-                                <button
-                                    className="link-btn danger"
-                                    onClick={(e) => { e.stopPropagation(); handleDelete(s.id).catch(() => {}); }}
-                                    disabled={deletingId === s.id || verifying}
-                                    title="このエピソードを削除（認証が必要）"
-                                >
-                                    {deletingId === s.id ? "削除中…" : "削除"}
-                                </button>
                             </div>
                             <div className="season subtle">{s.season_name}</div>
                             <div className="meta subtle">
@@ -366,6 +365,27 @@ export default function ShowsPage() {
                 </div>
             )}
 
+            {selectedShow && (
+                <div className="selection-bar">
+                    <div className="selection-meta">
+                        <div className="selection-count">1件選択中</div>
+                        <div className="selection-title">第{selectedShow.ep_num}話：{selectedShow.ep_title}</div>
+                        <div className="selection-note">
+                            {idToken
+                                ? (verifying ? "トークン確認中…" : backendClaims ? "バックエンドで確認済み" : "バックエンド未確認")
+                                : "削除にはサインインが必要です（サイドバー下部の管理用サインインから）"}
+                        </div>
+                    </div>
+                    <button
+                        className="danger-btn"
+                        disabled={deletingId === selectedShow.id || verifying || !idToken}
+                        onClick={() => handleDelete(selectedShow.id).catch(() => {})}
+                    >
+                        {deletingId === selectedShow.id ? "削除中…" : "選択中を削除"}
+                    </button>
+                </div>
+            )}
+
             <div className="form-row">
                 <input
                     className="input"
@@ -393,11 +413,6 @@ export default function ShowsPage() {
                 </button>
             </div>
 
-            {current && (
-                <div className="subtle" style={{ marginTop: 8 }}>
-                    選択中：第{current.ep_num}話「{current.ep_title}」
-                </div>
-            )}
         </div>
     );
 }