260720_0

B07_wf4_DesignDetail/B07_wf4_DesignDetail_UI_Page.ts

@@ -182,11 +182,6 @@ export async function renderB07DesignDetail(root: HTMLElement): Promise<void> {
   license.textContent = "Drawing engine based on OpenWebCAD · MIT License";
   cadHost.append(frame, license);
 
-  // CAD 영역 + 하단 수량 산출표를 세로로 묶는 메인 콘텐츠
-  const mainContent = document.createElement("div");
-  mainContent.className = "b07-main-stack";
-  mainContent.append(cadHost);
-
   let cadReady = false;
   let pendingDrawing: CadDrawing | undefined;
   let currentDrawing: DesignDrawingItem | undefined;
@@ -194,6 +189,11 @@ export async function renderB07DesignDetail(root: HTMLElement): Promise<void> {
   let currentConfirmed = false;
   let allDrawingsConfirmed = drawings.length > 0 && drawings.every((item) => item.confirmed);
   let resolveSave: ((drawing: CadDrawing) => void) | undefined;
+
+  // 편집 가능한 수량 산출표 (횡단도 선택 시 CAD 영역 위에 오버레이).
+  // 값 편집은 CAD 도면 변경과 동일하게 확정 상태를 롤백시킨다.
+  const quantityTable = buildQuantityTable(() => void invalidateCurrentDrawing());
+  cadHost.append(quantityTable.element);
   const confirmButton = createButton({
     label: "현재 도면 확정",
     variant: "filled",

B07_wf4_DesignDetail/B07_wf4_DesignDetail_UI_Style.css

@@ -72,11 +72,12 @@
   width: 100%;
   min-height: 34px;
   padding: var(--spacing-4) var(--spacing-8);
-  border: 1px solid transparent;
+  /* 경계가 뚜렷하도록 배경색과 유사하지만 조금 짙은 톤 + 은은한 테두리 */
+  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
   /* 확정 여부를 나타내는 좌측 색 띠 (미확정: 투명) */
   border-left: 3px solid transparent;
   border-radius: var(--radius-buttons);
-  background: transparent;
+  background: color-mix(in srgb, var(--color-surface) 84%, #000);
   color: var(--color-text);
   cursor: pointer;
   text-align: center;
@@ -156,3 +157,89 @@
   color: var(--color-text-muted);
   text-decoration: underline;
 }
+
+/* -----------------------------------------------------------------------------
+ * 수량 산출표 (횡단도 편집 오버레이) — 첨부 양식 재현
+ * -------------------------------------------------------------------------- */
+.b07-qtable {
+  position: absolute;
+  z-index: 2;
+  bottom: 10px;
+  left: 10px;
+  max-width: min(600px, 62%);
+  max-height: 48%;
+  overflow: auto;
+  padding: var(--spacing-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
+  box-shadow: 0 6px 18px #0006;
+}
+
+.b07-qtable[hidden] {
+  display: none;
+}
+
+.b07-qtable table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.b07-qtable th,
+.b07-qtable td {
+  padding: 2px 3px;
+  border: 1px solid var(--color-border);
+  font-size: 11px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.b07-qtable__label {
+  color: var(--color-text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+  background: color-mix(in srgb, var(--color-surface) 78%, #000);
+}
+
+/* 세로 라벨(흙깎기 / 옆도랑파기 / 비탈보호공) */
+.b07-qtable__label--vertical {
+  width: 20px;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  letter-spacing: 1px;
+}
+
+.b07-qtable__station {
+  color: var(--color-text);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.b07-qtable__value {
+  padding: 0;
+}
+
+.b07-qtable__value input {
+  width: 100%;
+  min-width: 0;
+  padding: 3px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  text-align: center;
+}
+
+.b07-qtable__value input:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+
+/* 파생 읽기전용 (절토고 / 성토고) */
+.b07-qtable__value--derived input {
+  color: var(--color-text-muted);
+  background: color-mix(in srgb, var(--color-surface) 68%, #000);
+  cursor: not-allowed;
+}