fix(structure): 필수 칸 빈 옛 구조물도 다른 칸 · 측점 바꿈 바로 반영 · 빈 칸 표시 + 안내 한 줄(54-12)

- 실시간 반영이 빈 필수 칸에서 멈추고 포커스만 보내던 것 풂 · [추가] · 서버 [저장] 막기 그대로
- 빈 필수 칸 붉은 테두리 + 그 칸 상자 안 「필수 칸 비어 있음 — [저장] 전 채움」(B05 = B06)
- 시험 test_54_12_live_required · 옛 「실시간 멈춤」 기대 한 줄 바꿈

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

B05_Profile/B05_Profile_UI_Structures_Panel.ts

@@ -25,6 +25,7 @@ import { type FacilityAttributes } from "./B05_Profile_UI_Drainage_Facility";
 import { field, optionDefaults } from "./B05_Profile_UI_Structures_Fields";
 import {
   hidesTypeSummary,
+  markRequired,
   paintStale,
   renderOptionFields as renderOptionFieldsInto,
 } from "./B05_Profile_UI_Structures_Panel_Options";
@@ -99,12 +100,14 @@ export function createStructuresSection(
     groupBoxes,
   } = form;
   /** 옵션 그룹 상자를 지금 종류 · 칸에 맞춰 다시 세움(PLAN 46-3) — 칸을 그린 뒤마다 부름. */
-  const regroup = (): void =>
+  const regroup = (): void => {
     groupBoxes.render(
       currentType(),
       [optionRow, facilityOptions.root],
       facilityFormKind(currentType()),
     );
+    markRequired(optionInputs, optionRow); // 빈 필수 칸 안내 = 칸이 옮겨 간 상자 안(54-12)
+  };
 
   /** 이 타입이 서브폼(계곡 통과 시설 부속)을 쓰는지 — 쓰면 레지스트리 옵션 칸 대신
    *  서브폼이 그린다. 독립 기슭막이(D4)는 서브폼을 떠나 C군과 같은 레지스트리 옵션

B05_Profile/B05_Profile_UI_Structures_Panel_Commit.ts

@@ -329,8 +329,9 @@ export async function commit(ctx: StructuresCommitContext, live = false): Promis
   }
   // 필수 옵션(미확정 기본값 없음)이 비어 있으면 추가하지 않는다 — 서버도 거절한다.
   // 상세(detail) 옵션은 폼에 없으므로 여기 걸리지 않는다(B06/B07에서 받는다).
+  // 실시간 반영은 막지 않음 — 빈 칸은 표시 · 안내만(`markRequired` · 54-12), 막기는 [추가] · 서버 [저장]
   const missing = ctx.optionInputs.find((entry) => entry.required && entry.isEmpty());
-  if (missing) {
+  if (missing && !live) {
     missing.input.focus();
     return;
   }

B05_Profile/B05_Profile_UI_Structures_Panel_Options.ts

@@ -112,8 +112,10 @@ export function renderOptionFields(
     // 상위 값이 바뀌면 하위 기본값 · 선택지 · 보이기를 먼저 맞추고 반영(48-4)
     input.addEventListener("change", () => {
       applyRules(option.key);
+      markRequired(optionInputs, optionRow);
       ctx.liveCommit();
     });
+    input.addEventListener("input", () => markRequired(optionInputs, optionRow));
     all.push({
       wrap,
       entry: {
@@ -203,6 +205,29 @@ export function renderOptionFields(
   ctx.syncRangeDisplay();
 }
 
+/** 빈 필수 칸 표시(54-12) — 칸 테두리 + 그 칸이 든 상자(격자) 안 안내 한 줄. 칸이 그룹 상자로 옮겨 간
+ *  뒤에도 맞게 패널이 칸 그리기 · 그룹 다시 세우기 · 값 바꿈마다 부름. 막지 않음(막기는 [추가] · [저장]). */
+export function markRequired(
+  optionInputs: OptionRenderContext["optionInputs"],
+  optionRow: HTMLElement,
+): void {
+  const scope = optionRow.parentElement ?? optionRow;
+  scope.querySelectorAll(".b05-structure__required-note").forEach((note) => note.remove());
+  scope
+    .querySelectorAll(".is-required-empty")
+    .forEach((input) => input.classList.remove("is-required-empty"));
+  for (const entry of optionInputs) {
+    if (!entry.required || !entry.isEmpty()) continue;
+    entry.input.classList.add("is-required-empty");
+    const box = entry.input.closest<HTMLElement>("[data-option-keys]")?.parentElement;
+    if (!box || box.querySelector(":scope > .b05-structure__required-note")) continue;
+    const note = document.createElement("p");
+    note.className = "b05-structure__required-note";
+    note.textContent = "필수 칸 비어 있음 — [저장] 전 채움";
+    box.append(note);
+  }
+}
+
 /** 고르기 칸 보기를 규칙 선택지로 — 빈 보기는 남기고, 지금 값이 목록 밖이면 그 값만 남겨 보임. */
 function syncChoices(
   element: HTMLSelectElement,

B05_Profile/B05_Profile_UI_Style_Structures.css

@@ -244,6 +244,18 @@
   background: rgba(224, 91, 91, 0.08);
 }
 
+/* 빈 필수 칸 — 칸 테두리 + 그 칸이 든 상자 안 안내 한 줄(54-12) */
+.b05-route__field .is-required-empty {
+  border-color: #e05b5b;
+}
+
+.b05-structure__required-note {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: #e05b5b;
+  font-size: var(--text-caption, 12px);
+}
+
 /* 측점 범위(계산 표시) — C군 등 길이 옵션 기반 구간 타입. 입력 칸이 아니라 기준
  * 측점 + 길이로 계산된 "시작 ~ 종료"를 보여만 준다(2026-08-19 사용자 지시).
  * 글자 크기는 기준 측점 입력 칸과 동일(크롬 input 기본 13.333px — 패널 입력에