Sync from GitHub Actions

CLAUDE.md

@@ -53,6 +53,7 @@ nbeats/
 ├── static/                          # 모델별 UI (index=N-BEATS, prophet, arima,
 │   │                                #  xgboost, ets, lightgbm, theta,
 │   ├── hybrid.html                  #  하이브리드 앙상블, timesfm)
+│   ├── nav.js                       # 공유 모델 드롭다운 내비 (모델 추가 시 MODELS 배열만 수정)
 │   └── ...
 ├── timesfm-frontend/                # TimesFM 전용 Next.js 앱 (Vercel 배포)
 ├── test_data/                       # 테스트용 CSV 데이터셋

docs/superpowers/specs/2026-07-11-model-nav-dropdown-design.md

@@ -0,0 +1,49 @@
+# 모델 선택 드롭다운 내비게이션 설계
+
+날짜: 2026-07-11
+상태: 승인됨 (대화에서 설계 승인 후 기록)
+
+## 문제
+
+상단 내비가 9개 모델 링크를 한 줄에 담고 `overflow-x: auto`로 처리해,
+화면이 좁으면 옆으로 밀어서(슬라이드) 모델을 찾아야 한다. 사용자가 확인한
+불편: (1) 가로 스크롤로 목록이 잘림, (2) 현재 어떤 모델 페이지인지 파악 어려움.
+또한 동일 내비 마크업+CSS가 9개 HTML에 복붙되어 드리프트가 발생했다
+(예: index.html은 `.tag-classic` CSS 누락).
+
+## 결정: 드롭다운 + 공유 스크립트 추출
+
+검토한 대안: 드롭다운(채택) / flex-wrap 줄바꿈 내비 / 하이브리드(반응형 전환).
+드롭다운이 두 불편을 모두 해결하고 폭과 무관하게 동작해 채택.
+
+### 구조
+
+- **`static/nav.js` 신규** — 내비 전체(스타일 주입 + 마크업 생성 + 이벤트)를 담당.
+  - 모델 메타데이터(이름·경로·태그·태그 색)는 파일 내 `MODELS` 배열 하나로 관리.
+  - `location.pathname`으로 현재 모델을 판별해 버튼 라벨과 목록 강조에 반영.
+  - 페이지의 CSS 변수(`--surface`, `--accent` 등)를 사용해 페이지별 테마 유지
+    (변수 부재 대비 폴백 값 포함).
+- **9개 HTML 페이지** — 기존 `<nav class="top-nav">` 블록과 내비 전용 CSS
+  (`.top-nav`, `.nav-*`, `.model-tag`, `.tag-*`)를 제거하고
+  `<script defer src="/static/nav.js"></script>` 한 줄로 대체.
+- 새 모델 추가 시 `MODELS` 배열에 항목 하나만 추가.
+
+### 동작
+
+- 내비 바: 브랜드("시계열 예측") + 현재 모델명·태그가 표시된 드롭다운 버튼(▾)
+- 버튼 클릭 → 세로 목록(9개, 현재 모델 강조, 카테고리 태그) 토글
+- 닫기: 항목 선택(페이지 이동), 바깥 클릭, Esc(버튼으로 포커스 복귀)
+- 접근성: `aria-haspopup`/`aria-expanded`, 항목은 일반 `<a>`라 Tab/Enter 동작
+- 모바일: 동일 컴포넌트 (가로 스크롤 원천 제거)
+
+### 범위 제외
+
+- `timesfm-frontend/`(Vercel Next.js)는 별개 앱 — 미변경
+- JS 로드 실패 폴백(noscript) — 로컬 정적 파일이라 생략 (YAGNI)
+
+## 테스트
+
+- `tests/test_api_contract.py`에 추가: `/static/nav.js` 200 + 모델 목록 포함,
+  9개 페이지가 nav.js를 로드하고 인라인 `<nav class="top-nav">`가 없음
+- 실동작: 로컬 기동 후 브라우저에서 드롭다운 열기 → 모델 전환 → 현재 모델
+  표시 확인 (`.claude/skills/verify` 레시피)

static/arima.html

@@ -28,21 +28,6 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
 
-    .top-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
-    .nav-inner { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; height: 56px; overflow-x: auto; }
-    .nav-brand { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
-    .nav-links { display: flex; gap: 0.25rem; list-style: none; }
-    .nav-links a { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 8px; text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
-    .nav-links a:hover { color: var(--text); background: var(--surface-hover); }
-    .nav-links a.active { color: var(--accent); background: rgba(6, 182, 212, 0.1); }
-    .nav-links .model-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
-    .tag-dl { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
-    .tag-classic { background: rgba(6, 182, 212, 0.15); color: #67e8f9; }
-    .tag-ets { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta { background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-
     .container { max-width: 1060px; margin: 0 auto; padding: 2rem; }
     header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
     h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #67e8f9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@@ -115,24 +100,9 @@
     .disabled-fields input, .disabled-fields select { opacity: 0.35; }
     #manualOrderRow input:disabled { cursor: not-allowed; background: var(--surface); }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima" class="active">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background: rgba(236, 72, 153, 0.15); color: #f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>

static/ets.html

@@ -28,21 +28,6 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
 
-    .top-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
-    .nav-inner { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; height: 56px; overflow-x: auto; }
-    .nav-brand { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
-    .nav-links { display: flex; gap: 0.25rem; list-style: none; }
-    .nav-links a { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 8px; text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
-    .nav-links a:hover { color: var(--text); background: var(--surface-hover); }
-    .nav-links a.active { color: var(--accent); background: rgba(16, 185, 129, 0.1); }
-    .nav-links .model-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
-    .tag-dl { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
-    .tag-classic { background: rgba(6, 182, 212, 0.15); color: #67e8f9; }
-    .tag-ets { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta { background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-
     .container { max-width: 1060px; margin: 0 auto; padding: 2rem; }
     header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
     h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #6ee7b7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@@ -108,24 +93,9 @@
     .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -0.15em; margin-right: 0.4em; }
     @keyframes spin { to { transform: rotate(360deg); } }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets" class="active">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background: rgba(236, 72, 153, 0.15); color: #f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>

static/hybrid.html

@@ -44,103 +44,6 @@
       line-height: 1.6;
     }
 
-    .top-nav {
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .nav-inner {
-      max-width: 1060px;
-      margin: 0 auto;
-      padding: 0 2rem;
-      display: flex;
-      align-items: center;
-      gap: 2rem;
-      height: 56px;
-      overflow-x: auto;
-    }
-
-    .nav-brand {
-      font-weight: 700;
-      font-size: 1rem;
-      color: var(--text);
-      text-decoration: none;
-      letter-spacing: -0.01em;
-      white-space: nowrap;
-    }
-
-    .nav-links {
-      display: flex;
-      gap: 0.25rem;
-      list-style: none;
-    }
-
-    .nav-links a {
-      display: flex;
-      align-items: center;
-      gap: 0.4rem;
-      padding: 0.5rem 0.75rem;
-      border-radius: 8px;
-      text-decoration: none;
-      font-size: 0.82rem;
-      font-weight: 500;
-      color: var(--text-muted);
-      transition: all 0.15s;
-      white-space: nowrap;
-    }
-
-    .nav-links a:hover {
-      color: var(--text);
-      background: var(--surface-hover);
-    }
-
-    .nav-links a.active {
-      color: var(--accent);
-      background: rgba(99, 102, 241, 0.1);
-    }
-
-    .nav-links .model-tag {
-      font-size: 0.6rem;
-      padding: 0.1rem 0.35rem;
-      border-radius: 4px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.03em;
-    }
-
-    .tag-dl {
-      background: rgba(99, 102, 241, 0.15);
-      color: #a5b4fc;
-    }
-
-    .tag-stat {
-      background: rgba(34, 197, 94, 0.15);
-      color: #86efac;
-    }
-
-    .tag-ml {
-      background: rgba(245, 158, 11, 0.15);
-      color: #fcd34d;
-    }
-
-    .tag-classic {
-      background: rgba(6, 182, 212, 0.15);
-      color: #67e8f9;
-    }
-
-    .tag-ets {
-      background: rgba(16, 185, 129, 0.15);
-      color: #6ee7b7;
-    }
-
-    .tag-theta {
-      background: rgba(168, 85, 247, 0.15);
-      color: #c4b5fd;
-    }
-
     .tag-hybrid {
       background: rgba(99, 102, 241, 0.2);
       color: #a5b4fc;
@@ -536,25 +439,10 @@
       text-align: left;
     }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid" class="active">하이브리드 <span class="model-tag tag-hybrid">Hybrid</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>

static/index.html

@@ -37,70 +37,6 @@
     }
 
     /* ---- 네비게이션 ---- */
-    .top-nav {
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-    .nav-inner {
-      max-width: 1060px;
-      margin: 0 auto;
-      padding: 0 2rem;
-      display: flex;
-      align-items: center;
-      gap: 2rem;
-      height: 56px;
-      overflow-x: auto;
-    }
-    .nav-brand {
-      font-weight: 700;
-      font-size: 1rem;
-      color: var(--text);
-      text-decoration: none;
-      letter-spacing: -0.01em;
-      white-space: nowrap;
-    }
-    .nav-links {
-      display: flex;
-      gap: 0.25rem;
-      list-style: none;
-    }
-    .nav-links a {
-      display: flex;
-      align-items: center;
-      gap: 0.4rem;
-      padding: 0.5rem 0.75rem;
-      border-radius: 8px;
-      text-decoration: none;
-      font-size: 0.82rem;
-      font-weight: 500;
-      white-space: nowrap;
-      color: var(--text-muted);
-      transition: all 0.15s;
-    }
-    .nav-links a:hover {
-      color: var(--text);
-      background: var(--surface-hover);
-    }
-    .nav-links a.active {
-      color: var(--accent);
-      background: rgba(99, 102, 241, 0.1);
-    }
-    .nav-links .model-tag {
-      font-size: 0.6rem;
-      padding: 0.1rem 0.35rem;
-      border-radius: 4px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.03em;
-    }
-    .tag-dl { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-ets { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta { background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
 
     .container {
       max-width: 1060px;
@@ -388,24 +324,9 @@
     }
     @keyframes spin { to { transform: rotate(360deg); } }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/" class="active">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background: rgba(236, 72, 153, 0.15); color: #f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>

static/lightgbm.html

@@ -28,21 +28,6 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
 
-    .top-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
-    .nav-inner { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; height: 56px; overflow-x: auto; }
-    .nav-brand { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
-    .nav-links { display: flex; gap: 0.25rem; list-style: none; }
-    .nav-links a { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 8px; text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
-    .nav-links a:hover { color: var(--text); background: var(--surface-hover); }
-    .nav-links a.active { color: var(--accent); background: rgba(132, 204, 22, 0.1); }
-    .nav-links .model-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
-    .tag-dl { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
-    .tag-classic { background: rgba(6, 182, 212, 0.15); color: #67e8f9; }
-    .tag-ets { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta { background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-
     .container { max-width: 1060px; margin: 0 auto; padding: 2rem; }
     header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
     h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #bef264 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@@ -106,24 +91,9 @@
     .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -0.15em; margin-right: 0.4em; }
     @keyframes spin { to { transform: rotate(360deg); } }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm" class="active">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background: rgba(236, 72, 153, 0.15); color: #f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>

static/nav.js

@@ -0,0 +1,98 @@
+/**
+ * 공유 모델 내비게이션 (드롭다운)
+ *
+ * 모든 static 페이지가 <script defer src="/static/nav.js">로 로드한다.
+ * 모델 추가 시 MODELS 배열에 항목 하나만 추가하면 전 페이지에 반영된다.
+ * 색상은 페이지의 CSS 변수(--surface 등)를 사용해 페이지별 테마를 따른다.
+ */
+(function () {
+  "use strict";
+
+  var MODELS = [
+    { path: "/",         name: "N-BEATS",  tag: "DL",        bg: "rgba(99, 102, 241, 0.15)",  color: "#a5b4fc" },
+    { path: "/prophet",  name: "Prophet",  tag: "Stat",      bg: "rgba(34, 197, 94, 0.15)",   color: "#86efac" },
+    { path: "/xgboost",  name: "XGBoost",  tag: "ML",        bg: "rgba(245, 158, 11, 0.15)",  color: "#fcd34d" },
+    { path: "/lightgbm", name: "LightGBM", tag: "ML",        bg: "rgba(245, 158, 11, 0.15)",  color: "#fcd34d" },
+    { path: "/arima",    name: "ARIMA",    tag: "Classical", bg: "rgba(6, 182, 212, 0.15)",   color: "#67e8f9" },
+    { path: "/theta",    name: "Theta",    tag: "Classical", bg: "rgba(168, 85, 247, 0.15)",  color: "#c4b5fd" },
+    { path: "/ets",      name: "ETS",      tag: "Smoothing", bg: "rgba(16, 185, 129, 0.15)",  color: "#6ee7b7" },
+    { path: "/hybrid",   name: "Hybrid",   tag: "Ensemble",  bg: "rgba(236, 72, 153, 0.15)",  color: "#f472b6" },
+    { path: "/timesfm",  name: "TimesFM",  tag: "FM",        bg: "rgba(56, 189, 248, 0.15)",  color: "#7dd3fc" }
+  ];
+
+  var CSS = [
+    '.top-nav { background: var(--surface, #17171c); border-bottom: 1px solid var(--border, #2a2a33); position: sticky; top: 0; z-index: 100; }',
+    '.nav-inner { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 1.25rem; height: 56px; }',
+    '.nav-brand { font-weight: 700; font-size: 1rem; color: var(--text, #e8e8ed); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }',
+    '.model-dd { position: relative; }',
+    '.model-dd-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 8px; border: 1px solid var(--border, #2a2a33); background: transparent; color: var(--text, #e8e8ed); font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color 0.15s; }',
+    '.model-dd-btn:hover { border-color: var(--accent, #6366f1); }',
+    '.model-dd-caret { font-size: 0.65rem; color: var(--text-muted, #9a9aa5); transition: transform 0.15s; }',
+    '.model-dd.open .model-dd-caret { transform: rotate(180deg); }',
+    '.model-dd-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; margin: 0; padding: 0.4rem; list-style: none; background: var(--surface, #17171c); border: 1px solid var(--border, #2a2a33); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); z-index: 101; }',
+    '.model-dd-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: 7px; text-decoration: none; font-size: 0.85rem; font-weight: 500; color: var(--text-muted, #9a9aa5); }',
+    '.model-dd-list a:hover { color: var(--text, #e8e8ed); background: var(--surface-hover, rgba(255, 255, 255, 0.05)); }',
+    '.model-dd-list a.active { color: var(--accent, #6366f1); background: rgba(99, 102, 241, 0.1); }',
+    '.model-tag { font-size: 0.6rem; padding: 0.12rem 0.4rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }'
+  ].join('\n');
+
+  function tagHtml(model) {
+    return '<span class="model-tag" style="background:' + model.bg + ';color:' + model.color + ';">' + model.tag + '</span>';
+  }
+
+  function normalizePath(p) {
+    return p.length > 1 && p.slice(-1) === '/' ? p.slice(0, -1) : p;
+  }
+
+  var currentPath = normalizePath(window.location.pathname);
+  var current = MODELS.filter(function (m) { return m.path === currentPath; })[0] || MODELS[0];
+
+  var items = MODELS.map(function (m) {
+    var active = m.path === current.path ? ' class="active"' : '';
+    return '<li><a href="' + m.path + '"' + active + '><span>' + m.name + '</span>' + tagHtml(m) + '</a></li>';
+  }).join('');
+
+  var style = document.createElement('style');
+  style.textContent = CSS;
+  document.head.appendChild(style);
+
+  var nav = document.createElement('nav');
+  nav.className = 'top-nav';
+  nav.innerHTML =
+    '<div class="nav-inner">' +
+      '<a href="/" class="nav-brand">시계열 예측</a>' +
+      '<div class="model-dd">' +
+        '<button type="button" class="model-dd-btn" aria-haspopup="true" aria-expanded="false">' +
+          '<span>' + current.name + '</span>' + tagHtml(current) +
+          '<span class="model-dd-caret">▾</span>' +
+        '</button>' +
+        '<ul class="model-dd-list" hidden>' + items + '</ul>' +
+      '</div>' +
+    '</div>';
+  document.body.insertAdjacentElement('afterbegin', nav);
+
+  var dd = nav.querySelector('.model-dd');
+  var btn = nav.querySelector('.model-dd-btn');
+  var list = nav.querySelector('.model-dd-list');
+
+  function setOpen(open) {
+    list.hidden = !open;
+    dd.classList.toggle('open', open);
+    btn.setAttribute('aria-expanded', String(open));
+  }
+
+  btn.addEventListener('click', function () {
+    setOpen(list.hidden);
+  });
+
+  document.addEventListener('click', function (e) {
+    if (!list.hidden && !dd.contains(e.target)) setOpen(false);
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !list.hidden) {
+      setOpen(false);
+      btn.focus();
+    }
+  });
+})();

static/prophet.html

@@ -28,21 +28,6 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
 
-    .top-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
-    .nav-inner { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; height: 56px; overflow-x: auto; }
-    .nav-brand { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
-    .nav-links { display: flex; gap: 0.25rem; list-style: none; }
-    .nav-links a { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 8px; text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
-    .nav-links a:hover { color: var(--text); background: var(--surface-hover); }
-    .nav-links a.active { color: var(--accent); background: rgba(34, 197, 94, 0.1); }
-    .nav-links .model-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
-    .tag-dl { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
-    .tag-classic { background: rgba(6, 182, 212, 0.15); color: #67e8f9; }
-    .tag-ets { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta { background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-
     .container { max-width: 1060px; margin: 0 auto; padding: 2rem; }
     header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
     h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #86efac 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@@ -106,24 +91,9 @@
     .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -0.15em; margin-right: 0.4em; }
     @keyframes spin { to { transform: rotate(360deg); } }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet" class="active">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background: rgba(236, 72, 153, 0.15); color: #f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>

static/theta.html

@@ -28,21 +28,6 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
 
-    .top-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
-    .nav-inner { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; height: 56px; overflow-x: auto; }
-    .nav-brand { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
-    .nav-links { display: flex; gap: 0.25rem; list-style: none; }
-    .nav-links a { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 8px; text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
-    .nav-links a:hover { color: var(--text); background: var(--surface-hover); }
-    .nav-links a.active { color: var(--accent); background: rgba(168, 85, 247, 0.1); }
-    .nav-links .model-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
-    .tag-dl { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
-    .tag-classic { background: rgba(6, 182, 212, 0.15); color: #67e8f9; }
-    .tag-ets { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta { background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-
     .container { max-width: 1060px; margin: 0 auto; padding: 2rem; }
     header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
     h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@@ -108,24 +93,9 @@
     .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -0.15em; margin-right: 0.4em; }
     @keyframes spin { to { transform: rotate(360deg); } }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta" class="active">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background: rgba(236, 72, 153, 0.15); color: #f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>

static/timesfm.html

@@ -38,70 +38,6 @@
     }
 
     /* ---- 네비게이션 ---- */
-    .top-nav {
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-    .nav-inner {
-      max-width: 1060px;
-      margin: 0 auto;
-      padding: 0 2rem;
-      display: flex;
-      align-items: center;
-      gap: 2rem;
-      height: 56px;
-      overflow-x: auto;
-    }
-    .nav-brand {
-      font-weight: 700;
-      font-size: 1rem;
-      color: var(--text);
-      text-decoration: none;
-      letter-spacing: -0.01em;
-      white-space: nowrap;
-    }
-    .nav-links {
-      display: flex;
-      gap: 0.25rem;
-      list-style: none;
-    }
-    .nav-links a {
-      display: flex;
-      align-items: center;
-      gap: 0.4rem;
-      padding: 0.5rem 0.75rem;
-      border-radius: 8px;
-      text-decoration: none;
-      font-size: 0.82rem;
-      font-weight: 500;
-      white-space: nowrap;
-      color: var(--text-muted);
-      transition: all 0.15s;
-    }
-    .nav-links a:hover {
-      color: var(--text);
-      background: var(--surface-hover);
-    }
-    .nav-links a.active {
-      color: var(--sky);
-      background: rgba(56, 189, 248, 0.1);
-    }
-    .nav-links .model-tag {
-      font-size: 0.6rem;
-      padding: 0.1rem 0.35rem;
-      border-radius: 4px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.03em;
-    }
-    .tag-dl   { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-ets  { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta{ background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml   { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
     .tag-fm   { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }
 
     .container {
@@ -333,26 +269,10 @@
     .result-table tr:hover td { background: rgba(255,255,255,0.02); }
     .row-future td:first-child { color: var(--sky); }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
 
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-stat">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background:rgba(236,72,153,0.15);color:#f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm" class="active">TimesFM <span class="model-tag tag-fm">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
-
   <div class="container">
     <header>
       <div>

static/xgboost.html

@@ -28,21 +28,6 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; }
 
-    .top-nav { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
-    .nav-inner { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; height: 56px; overflow-x: auto; }
-    .nav-brand { font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
-    .nav-links { display: flex; gap: 0.25rem; list-style: none; }
-    .nav-links a { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 8px; text-decoration: none; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
-    .nav-links a:hover { color: var(--text); background: var(--surface-hover); }
-    .nav-links a.active { color: var(--accent); background: rgba(245, 158, 11, 0.1); }
-    .nav-links .model-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
-    .tag-dl { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
-    .tag-stat { background: rgba(34, 197, 94, 0.15); color: #86efac; }
-    .tag-ml { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
-    .tag-classic { background: rgba(6, 182, 212, 0.15); color: #67e8f9; }
-    .tag-ets { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
-    .tag-theta { background: rgba(168, 85, 247, 0.15); color: #c4b5fd; }
-
     .container { max-width: 1060px; margin: 0 auto; padding: 2rem; }
     header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
     h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff 0%, #fcd34d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@@ -106,24 +91,9 @@
     .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -0.15em; margin-right: 0.4em; }
     @keyframes spin { to { transform: rotate(360deg); } }
   </style>
+  <script defer src="/static/nav.js"></script>
 </head>
 <body>
-  <nav class="top-nav">
-    <div class="nav-inner">
-      <a href="/" class="nav-brand">시계열 예측</a>
-      <ul class="nav-links">
-        <li><a href="/">N-BEATS <span class="model-tag tag-dl">DL</span></a></li>
-        <li><a href="/prophet">Prophet <span class="model-tag tag-stat">Stat</span></a></li>
-        <li><a href="/xgboost" class="active">XGBoost <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/lightgbm">LightGBM <span class="model-tag tag-ml">ML</span></a></li>
-        <li><a href="/arima">ARIMA <span class="model-tag tag-classic">Classical</span></a></li>
-        <li><a href="/theta">Theta <span class="model-tag tag-theta">Classical</span></a></li>
-        <li><a href="/ets">ETS <span class="model-tag tag-ets">Smoothing</span></a></li>
-        <li><a href="/hybrid">Hybrid <span class="model-tag" style="background: rgba(236, 72, 153, 0.15); color: #f472b6;">Ensemble</span></a></li>
-        <li><a href="/timesfm">TimesFM <span class="model-tag" style="background: rgba(56, 189, 248, 0.15); color: #7dd3fc;">FM</span></a></li>
-      </ul>
-    </div>
-  </nav>
 
   <div class="container">
     <header>