feat(가이드): 538-2 [?] = 넓은 모달 한 가이드 · 차례 묶음 → 페이지 → 기능 · 그림 · 주의/참고 · B01 [?]

- [?] = openModal wide · 왼쪽 차례(임도 설계 B → 안정성평가 E → 예정노선 D · 지금 페이지 펼침) ·
  오른쪽 = 모든 페이지 이어 그림 · 처음 = 보이는 data-help-topic 절 → 지금 페이지 절 → 맨 앞 · B05↔B06 짝 걷음
- 그리기: 덩어리마다 원문 줄(data-src) · `![설명](이름.webp)` → figure(loading=lazy · ?v=판) ·
  없는 그림 = 관리자 「그림 없음 — 더블클릭해 지정」 / 일반 「그림 준비 중」 · `> 주의:` · `> 참고:` 상자 ·
  `[글](B06/00_설명서)` → 모달 안 이동 · 페이지를 안 넘기면(B01 지식 채팅) 옛 출력 그대로
- GET /api/help 에 페이지마다 그림 판 · GET /api/help/{page}/img/{name}(이름 규칙 · no-cache) ·
  옛 GET /api/help/{page} 걷음(모달이 한 가이드로 바뀜)
- B01 대시보드 머리 역할 배지 왼쪽에 [?]
- 시험 test_538_help_guide.py(변환 글 · 그림 404 · admin 칸) + helper_538_help_render.cjs

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui_template/ui_template_help.css

@@ -1,4 +1,4 @@
-/* [?] 설명서(54-2) — 단추는 글자 폭만 · 모달은 왼쪽 차례 · 오른쪽 글 · [<] [>](280-2)도 같은 정사각 */
+/* [?] 사용자 가이드(54-2 · 538) — 단추는 글자 폭만 · 넓은 모달 = 왼쪽 차례 · 오른쪽 가이드 통째 · [<] [>](280-2)도 같은 정사각 */
 .ui-sidebar-actions .ui-help-btn,
 .ui-help-btn,
 .ui-sidebar-actions .ui-step-nav-btn,
@@ -10,19 +10,22 @@
   padding-inline: 0;
 }
 
-.ui-help.ui-modal {
-  width: min(960px, 92vw);
-  height: var(--modal-max, 80vh);
+/* B01 대시보드 머리 — [?] + 역할 배지 한 줄 */
+.ui-help-head {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
 }
 
 .ui-help .ui-modal__body {
   flex: 1 1 auto;
   min-height: 0;
+  overflow: hidden;
 }
 
 .ui-help__grid {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 240px 1fr;
   gap: var(--spacing-16);
   height: 100%;
   min-height: 0;
@@ -37,7 +40,30 @@
   overflow-y: auto;
 }
 
-.ui-help__link {
+.ui-help__group {
+  margin: var(--spacing-12) 0 var(--spacing-4);
+  color: var(--color-text-secondary);
+  font-size: 0.85em;
+  font-weight: 600;
+}
+
+.ui-help__group:first-child {
+  margin-top: 0;
+}
+
+.ui-help__subs {
+  display: none;
+  flex-direction: column;
+  padding-left: var(--spacing-12);
+}
+
+.ui-help__toc-page.is-open > .ui-help__subs {
+  display: flex;
+}
+
+.ui-help__link,
+.ui-help__link--sub {
+  width: 100%;
   padding: var(--spacing-4) var(--spacing-8);
   border: none;
   border-radius: var(--radius-sm);
@@ -48,17 +74,91 @@
   cursor: pointer;
 }
 
+.ui-help__link--sub {
+  font-size: 0.9em;
+}
+
+.ui-help__toc-page.is-open > .ui-help__link {
+  color: var(--color-text-body);
+  font-weight: 600;
+}
+
 .ui-help__link:hover,
-.ui-help__link.is-active {
+.ui-help__link--sub:hover,
+.ui-help__link.is-active,
+.ui-help__link--sub.is-active {
   background: color-mix(in srgb, var(--color-border) 60%, transparent);
   color: var(--color-text-body);
 }
 
 .ui-help__text {
   overflow-y: auto;
+  padding-right: var(--spacing-8);
   line-height: 1.6;
 }
 
+.ui-help__page + .ui-help__page {
+  margin-top: var(--spacing-24);
+  padding-top: var(--spacing-24);
+  border-top: 2px solid var(--color-border);
+}
+
+.ui-help__item + .ui-help__item {
+  margin-top: var(--spacing-16);
+}
+
+.ui-help__page,
+.ui-help__item {
+  scroll-margin-top: var(--spacing-8);
+}
+
+.ui-help-figure {
+  max-width: 900px;
+  margin: var(--spacing-12) 0;
+}
+
+.ui-help-figure img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.ui-help-figure figcaption {
+  margin-top: var(--spacing-4);
+  color: var(--color-text-secondary);
+  font-size: 0.9em;
+}
+
+.ui-help-figure__empty {
+  display: grid;
+  place-items: center;
+  min-height: 120px;
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
+  font-size: 0.9em;
+}
+
+.ui-help-note {
+  display: block;
+  margin: 0 0 var(--spacing-8);
+  padding: var(--spacing-8) var(--spacing-12);
+  border-left: 4px solid var(--color-accent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+
+.ui-help-note--warn {
+  border-left-color: var(--color-warning);
+  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
+}
+
+.ui-help-goto {
+  color: var(--color-accent);
+}
+
 .ui-help__text h2 {
   margin: 0 0 var(--spacing-12);
   font-size: 1.4em;