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

resources/tester/ui_checks/48-2_노선추천_설명칸.js

@@ -0,0 +1,48 @@
+/* 48-2 · B05 계획노선 편집 [노선 추천] 모달 — 오른쪽 세로 구분선 + 설명 칸
+ * 시작 화면: B05 종단설계 · [계획노선 편집] 창이 떠 있음(노선 추천 모달은 닫힘)
+ * 부르는 법: orca eval --expression "$(cat 이 파일)" (async 식 · JSON 글을 돌려줌)
+ * 하는 일: [노선 추천] 열기 → 설명 칸 자리 · 구분선 · 갈래 여덟 확인 → 「비중 계산」 누름 → 강조가 따라가고
+ *   보이는 자리에 있는지 확인 → 셈이 끝나면 [닫기](미리 보기 버림 · 편집값 안 바뀜)
+ * 기대 수치: 설명 칸이 왼쪽 칸 오른쪽(left > 지도 right) · 왼쪽 테두리 1px · 갈래 글 8 · 처음 강조 follow
+ *   · 누른 뒤 강조 weighted 1개 · 강조 글이 설명 칸 안에 보임 · 설명 칸 높이 = 본문 높이(창을 키우지 않음)
+ */
+(async () => {
+  const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+  const editor = document.querySelector(".b05-routeedit");
+  [...editor.querySelectorAll("button")].find((b) => b.textContent.trim() === "노선 추천").click();
+  await wait(1500);
+  const modal = document.querySelector(".ui-modal.b05-routerec");
+  const body = modal.querySelector(".b05-routerec__body");
+  const help = modal.querySelector(".b05-routerec__help");
+  const map = modal.querySelector(".b05-routerec__main").getBoundingClientRect();
+  const box = help.getBoundingClientRect();
+  const out = {
+    rightOfLeft: box.left > map.right,
+    border: getComputedStyle(help).borderLeftWidth,
+    items: help.querySelectorAll("[data-help-logic]").length,
+    first: help.querySelector(".is-on")?.dataset.helpLogic,
+    sameHeight: Math.abs(box.height - body.clientHeight) <= 2,
+  };
+  modal.querySelector('[data-logic="weighted"]').click();
+  await wait(300);
+  const on = help.querySelectorAll(".is-on");
+  const onBox = on[0].getBoundingClientRect();
+  out.after = on[0].dataset.helpLogic;
+  out.onCount = on.length;
+  out.visible = onBox.top >= box.top - 1 && onBox.bottom <= box.bottom + 1;
+  for (let i = 0; i < 300 && modal.querySelector('[data-logic="weighted"]').disabled; i += 1)
+    await wait(100);
+  modal.querySelector('[data-act="close"]').click();
+  out.closed = !document.querySelector(".ui-modal.b05-routerec");
+  out.pass =
+    out.rightOfLeft &&
+    out.border === "1px" &&
+    out.items === 8 &&
+    out.first === "follow" &&
+    out.sameHeight &&
+    out.after === "weighted" &&
+    out.onCount === 1 &&
+    out.visible &&
+    out.closed;
+  return JSON.stringify(out);
+})();