fix(B05): 확폭 구간 단추 켬 표식 · [추가] 단추와 겹치지 않게 · 화면 시험 맞춤(87-3 · 87-4)

- 켬 단추 class is-primary 대신 is-on(시험 · [추가] 찾기와 겹침) · 켬 표식 ✓ · 단추 높이 자동
- ui_checks 52-10 · 53-1 노면공 = 시작 · 종료만 · 길이 출력 · 카드 23+0 기준으로 맞춤

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

B05_Profile/B05_Profile_UI_Structures_Widening.ts

@@ -62,10 +62,12 @@ export function createWideningBox(hooks: {
         const on = !isRunOff(run, off);
         const button = document.createElement("button");
         button.type = "button";
-        button.className = `b05-route__irregular-btn${on ? " is-primary" : ""}`;
+        button.className = `b05-route__irregular-btn${on ? " is-on" : ""}`;
         button.setAttribute("aria-pressed", String(on));
         button.dataset.wideningRun = `${run.start_m}-${run.end_m}`;
-        button.textContent = `${stationLabel(run.start_m, step)} ~ ${stationLabel(run.end_m, step)} · 확폭 ${Number(run.widening_m.toFixed(2))} m`;
+        const from = stationLabel(run.start_m, step);
+        const to = stationLabel(run.end_m, step);
+        button.textContent = `${from === to ? from : `${from} ~ ${to}`} · 확폭 ${Number(run.widening_m.toFixed(2))} m`;
         button.title = on ? "확폭 포함 — 누르면 규격 폭만" : "규격 폭만 — 누르면 확폭 포함";
         button.addEventListener("click", () => {
           off = toggleRun(list, off, run);

B05_Profile/B05_Profile_UI_Style_Structures.css

@@ -582,8 +582,12 @@
   gap: 4px;
 }
 
-.b05-structure__widening .b05-structure__group-body button {
+.b05-structure__widening .b05-structure__group-body button:not(.b05-structure__step) {
   align-self: stretch;
+  height: auto;
+  min-height: var(--b05-control-h);
+  padding-block: 3px;
+  line-height: 1.3;
   text-align: left;
   white-space: normal;
 }
@@ -592,3 +596,13 @@
   color: var(--text-muted, inherit);
   font-size: var(--text-caption);
 }
+
+/* 켬 = 확폭 포함 — 테두리색 + 표식(`.is-primary` 는 [추가] 단추 몫이라 안 씀) */
+.b05-structure__widening .b05-route__irregular-btn.is-on {
+  border-color: color-mix(in srgb, var(--color-royal-amethyst, rgb(109 40 217)) 55%, transparent);
+  color: var(--color-text);
+}
+
+.b05-structure__widening [data-widening-run][aria-pressed="true"]::before {
+  content: "✓ ";
+}

resources/tester/ui_checks/52-10_노면공_기타.js

@@ -262,7 +262,7 @@
     !etc.missing &&
     etc.name === NAME &&
     JSON.stringify(etc.containers) === '["detail"]' &&
-    JSON.stringify(etc.legend) === '["상세 내용 1"]' &&
+    JSON.stringify(etc.legend) === '["상세 내용"]' &&
     JSON.stringify(etc.notes) === '["52-14 비고"]' &&
     JSON.stringify(etc.containerLinks) === "[true]" &&
     (etc.phase !== "edit" ||

resources/tester/ui_checks/53-1_횡단_고르기.js

@@ -132,7 +132,7 @@
   };
   /** 세션에만 넣는 종류(표 01~08) — 이미 있으면 건너뜀. [군, 종류, 측점, +m, 길이(구간형)] */
   const ADD = [
-    ["G", "pavement_concrete", 22, 0, 10],
+    ["G", "pavement_concrete", 23, 0, 10], // 노면공 = 시작 · 종료만(87-1) — 23+0 ~ 23+10 · 카드 23+0 에 다른 구조물 없음
     ["A", "cross_underdrain", 22, 0],
     ["E", "mirror", 22, 0],
     ["A", "ford_pavement", 3, 0],
@@ -181,10 +181,12 @@
       if (!labels[1].hidden) {
         const [s0, s1] = labels[1].querySelectorAll("input");
         const [e0, e1] = labels[3].querySelectorAll("input");
-        fire(s0, String(no - 1));
-        fire(s1, "10");
+        // 기준 칸 없는 종류(노면공 87-1)는 시작 = 누른 측점 · 종료 = +10 m(알약 = 시점)
+        const rangeOnly = labels[2].hidden;
+        fire(s0, String(rangeOnly ? no : no - 1));
+        fire(s1, rangeOnly ? String(plus) : "10");
         fire(e0, String(no));
-        fire(e1, "10");
+        fire(e1, rangeOnly ? String(plus + 10) : "10");
       }
       await w(300);
     } else if (!labels[1].hidden) {