feat(B05): 노선 추천 모달 오른쪽 설명 칸 — 세로 구분선 · 갈래 여덟 · 공통 제약 넷 · 결과 줄 읽는 법

- 기존 칸 그대로 · 모달 폭 960 → 1320px · 좁은 폭(1000px 이하)은 아래로
- 글은 서버 엔진 실제 동작 기준(만드는 법 · 이럴 때 · 주의) — `_Recommend_Help.ts` 로 나눔
- 고른 갈래 설명 강조 · 보이는 자리로 굴림
- 검증 시나리오 ui_checks/48-2

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015KYZ2HWWdUwZWYnn3tQz7X

B05_Profile/B05_Profile_UI_Style_RouteRecommend.css

@@ -14,8 +14,9 @@
   z-index: calc(var(--z-modal, 1000) + 2);
 }
 
+/* 오른쪽 설명 칸(계획서 48-2)만큼 넓힘 — 왼쪽 기존 칸은 예전 폭 그대로. */
 .ui-modal.b05-routerec {
-  width: min(960px, 94vw);
+  width: min(1320px, 96vw);
   --modal-max: 92vh;
   font-size: var(--text-body-sm);
 }
@@ -25,6 +26,119 @@
   font-size: var(--text-body-sm);
 }
 
+/* 왼쪽 = 기존 칸 넷(알약 · 지도 · 결과 줄 · 바닥) · 오른쪽 = 세로 구분선 + 설명 칸. */
+.ui-modal.b05-routerec .b05-routerec__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
+  align-content: start;
+  column-gap: var(--spacing-16, 16px);
+}
+
+.b05-routerec__body > :not(.b05-routerec__help) {
+  grid-column: 1;
+}
+
+/* 설명 칸 — 왼쪽 높이를 따라가고(제 글 길이로 창을 키우지 않음) 넘치면 제 안에서 굴림. */
+.b05-routerec__help {
+  grid-column: 2;
+  grid-row: 1 / span 4;
+  contain: size;
+  overflow-y: auto;
+  padding-left: var(--spacing-16, 16px);
+  border-left: 1px solid var(--color-border);
+  color: var(--color-text-body);
+  font-size: var(--text-body-sm);
+  line-height: 1.55;
+}
+
+.b05-routerec__help h3 {
+  margin: var(--spacing-12) 0 var(--spacing-4, 4px);
+  color: var(--color-text-heading, var(--color-text-body));
+  font-size: var(--text-body);
+  font-weight: 700;
+}
+
+.b05-routerec__help h3:first-child {
+  margin-top: 0;
+}
+
+.b05-routerec__help-lead {
+  margin: 0 0 var(--spacing-8);
+  color: var(--color-text-secondary);
+}
+
+.b05-routerec__help-item {
+  margin-bottom: var(--spacing-8);
+  padding: var(--spacing-8);
+  border: 1px solid transparent;
+  border-radius: var(--radius-8, 6px);
+}
+
+/* 고른 갈래 — 알약과 같은 강조색 테두리. */
+.b05-routerec__help-item.is-on {
+  border-color: var(--color-primary);
+  background: var(--color-surface);
+}
+
+.b05-routerec__help-item h4 {
+  margin: 0 0 2px;
+  font-size: var(--text-body-sm);
+  font-weight: 700;
+}
+
+.b05-routerec__help-item.is-on h4 {
+  color: var(--color-primary);
+}
+
+.b05-routerec__help-item p,
+.b05-routerec__help dd {
+  margin: 2px 0;
+}
+
+.b05-routerec__help-item ul {
+  margin: 2px 0;
+  padding-left: 1.1em;
+}
+
+.b05-routerec__help-summary {
+  font-weight: 600;
+}
+
+.b05-routerec__help-caution {
+  color: var(--color-text-secondary);
+}
+
+.b05-routerec__help dl {
+  margin: 0;
+}
+
+.b05-routerec__help dt {
+  margin-top: var(--spacing-8);
+  font-weight: 600;
+}
+
+.b05-routerec__help dd {
+  color: var(--color-text-secondary);
+}
+
+/* 좁은 폭 — 설명 칸은 아래로(가로 구분선 · 제 높이 한도 안에서 굴림). */
+@media (max-width: 1000px) {
+  .ui-modal.b05-routerec .b05-routerec__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .b05-routerec__help {
+    grid-column: 1;
+    grid-row: auto;
+    contain: none;
+    max-height: 280px;
+    padding-top: var(--spacing-12);
+    padding-left: 0;
+    border-top: 1px solid var(--color-border);
+    border-left: none;
+  }
+}
+
 /* 알약 — 하나만 고른 상태(라디오 묶음). */
 /* 여덟 알약 — 네 칸 두 줄로 고르게(좁은 폭은 두 칸 네 줄). */
 .b05-routerec__pills {