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/InvestmentNote.tsx

@@ -3,9 +3,11 @@
 // 종목 페이지의 사이드 메모 패널.
 // Toss "투자 메모" 패턴 — 진입 이유, 관전 포인트를 짧게 적는 자리.
 // localStorage 만 사용, 서버 전송 없음.
+// Collapsible 본문은 hidden 으로만 가리므로 접어도 textarea dirty 텍스트 유지.
 
 import { useEffect, useMemo, useState } from "react";
 import { NOTE_MAX_LEN, readNote, writeNote, type Note } from "../lib/notes";
+import { Collapsible } from "./Collapsible";
 
 const FEEDBACK_TEXT: Record<"saved" | "deleted" | "failed", string> = {
   saved: "저장됨",
@@ -78,14 +80,10 @@ export function InvestmentNote({ code }: Props) {
     setFeedback(FEEDBACK_TEXT[res.status]);
   };
 
+  const subtitle = saved ? fmtUpdatedAt(saved.updatedAt) : "비공개 · 브라우저 저장";
+
   return (
-    <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 p-3">
-      <div className="mb-2 flex items-baseline justify-between">
-        <h3 className="text-xs font-semibold text-zinc-300">투자 메모</h3>
-        <span className="text-[10px] text-zinc-500">
-          {saved ? fmtUpdatedAt(saved.updatedAt) : "비공개 · 브라우저 저장"}
-        </span>
-      </div>
+    <Collapsible title="투자 메모" subtitle={subtitle} storageKey="note">
       <textarea
         value={text}
         onChange={(e) => setText(e.target.value.slice(0, NOTE_MAX_LEN))}
@@ -114,6 +112,6 @@ export function InvestmentNote({ code }: Props) {
           </button>
         </div>
       </div>
-    </div>
+    </Collapsible>
   );
 }