feat(sidebar): collapsible AlertsPanel / InvestmentNote / RelatedStocks

Three lower-sidebar panels are now wrapped in a shared Collapsible so
mobile readers can fold away sections they're not actively using.

New shared pieces:
- lib/collapsible.ts — readOpen/writeOpen helpers backed by
  localStorage under 'panel-open:<name>'. Per-panel-name (not
  per-code) because the preference is a panel-level habit; users
  don't want different fold state for every symbol.
- components/Collapsible.tsx — button-as-header + chevron + body.
  aria-expanded for AT. Body uses 'hidden' instead of conditional
  unmount so textarea text, partial alert form input, and
  RelatedStocks fetch results all survive collapse cycles.
  SSR-safe: useState(defaultOpen) then useEffect-sync to avoid React
  hydration mismatch when localStorage diverges from default.

Panel refactors:
- RelatedStocks: outer rounded div + header replaced with Collapsible;
  loading/error/empty/data states all rendered inside body (header
  stays visible so user can still toggle/recognize the section even
  while loading).
- InvestmentNote: same swap. saved.updatedAt drives the subtitle.
- AlertsPanel: same swap. current price drives the subtitle.

Defaults are open=true everywhere; the surface area is the toggle
itself, not a forced collapse. User's first interaction sets the
sticky preference.

web/components/AlertsPanel.tsx

@@ -3,9 +3,11 @@
 // 종목 페이지의 가격 알람 패널.
 // 현재 종목의 활성 알람 리스트 + 새 알람 추가 폼 (≥ / ≤ + 가격).
 // 발사 자체는 AlertsToaster 가 글로벌로 처리. 여기는 입력/표시만.
+// Collapsible 본문은 hidden 으로만 가리므로 접어도 op/target partial 입력 유지.
 
 import { useEffect, useState } from "react";
 import { alerts, type Alert, type AlertOp } from "../lib/alerts";
+import { Collapsible } from "./Collapsible";
 
 type Props = {
   code: string;
@@ -32,14 +34,11 @@ export function AlertsPanel({ code, name, current }: Props) {
     setTarget("");
   };
 
+  const subtitle =
+    current != null ? `현재가 ${current.toLocaleString()}원` : undefined;
+
   return (
-    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">가격 알람</div>
-        <div className="text-[10px] text-zinc-500">
-          {current != null ? `현재가 ${current.toLocaleString()}원` : ""}
-        </div>
-      </div>
+    <Collapsible title="가격 알람" subtitle={subtitle} storageKey="alerts">
       <div className="flex flex-wrap items-center gap-1.5">
         <div className="flex overflow-hidden rounded-md border border-zinc-700 text-[11px]">
           <button
@@ -138,6 +137,6 @@ export function AlertsPanel({ code, name, current }: Props) {
           ))}
         </ul>
       )}
-    </div>
+    </Collapsible>
   );
 }