diff --git a/web/components/OrderbookPanel.tsx b/web/components/OrderbookPanel.tsx
index 73f9de8..84febda 100644
--- a/web/components/OrderbookPanel.tsx
+++ b/web/components/OrderbookPanel.tsx
@@ -13,6 +13,7 @@
 
 import { useEffect, useState } from "react";
 import { api, type OrderbookLevel, type OrderbookResponse } from "../lib/api";
+import { Collapsible } from "./Collapsible";
 
 type Props = {
   code: string;
@@ -20,6 +21,10 @@ type Props = {
   // 시야에 남도록. 일봉 이상에선 호가의 실시간 가치가 낮아 일반 흐름으로 두는 게 사이드바
   // 다른 패널(PriceTargets/AlertsPanel/InvestmentNote/RelatedStocks) 의 위치 안정성을 해치지
   // 않음.
+  //
+  // sticky + collapsible 조합: Collapsible 의 outer 래퍼 자체에 sticky 를 걸어두면 접혔을
+  // 때는 헤더 한 줄(호가 + ts) 만 상단에 떠 있고, 펼치면 본문 포함 전체가 시야에 남는다.
+  // — 사용자가 차트/지표 영역을 길게 스크롤하다 호가 보고 싶을 때 늘 접근 가능.
   sticky?: boolean;
 };
 
@@ -55,21 +60,19 @@ export function OrderbookPanel({ code, sticky = false }: Props) {
     };
   }, [code]);
 
+  // 호가는 사이드바에서 정보 밀도/시의성 모두 가장 높음 → 기본 펼침 유지.
+  // 사용자가 접고 싶다면 헤더 클릭 한 번 + localStorage 영속.
   return (
-    <div
+    <Collapsible
+      title="호가"
+      subtitle={data?.ts ? `${data.ts} · 10초 갱신` : "10초 갱신"}
+      storageKey="orderbook"
       className={
         sticky
-          ? "sticky top-4 rounded-md border border-zinc-800 bg-zinc-900/80 p-3 backdrop-blur"
-          : "rounded-md border border-zinc-800 bg-zinc-900/40 p-3"
+          ? "sticky top-4 rounded-md border border-zinc-800 bg-zinc-900/80 backdrop-blur"
+          : "rounded-md border border-zinc-800 bg-zinc-900/40"
       }
     >
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <span className="text-xs font-medium text-zinc-300">호가</span>
-        <span className="text-[10px] text-zinc-500">
-          {data?.ts ? `${data.ts} · 10초 갱신` : "10초 갱신"}
-        </span>
-      </div>
-
       {loading && !data && (
         <div className="py-6 text-center text-[11px] text-zinc-500">불러오는 중…</div>
       )}
@@ -87,7 +90,7 @@ export function OrderbookPanel({ code, sticky = false }: Props) {
       )}
 
       {data && data.status === "ok" && <OrderbookTable data={data} />}
-    </div>
+    </Collapsible>
   );
 }