Merge remote-tracking branch 'origin/sub_laptop_1' into main_laptop_1

B06_Section/B06_Section_UI_Cross_Design_Surface.ts

@@ -92,18 +92,17 @@ export function appendPavementOverlay(
     const polygon = document.createElementNS(SVG_NS, "polygon");
     polygon.setAttribute("points", points);
     polygon.setAttribute("class", "b06-chart__pavement");
-    svg.append(polygon);
     const spec = entry?.spec;
     const mark = spec ? PAVE_MARKS[spec] : undefined;
-    if (!spec || !mark) continue;
-    const id = `b06-pave-hatch-${(paveSeq += 1)}`;
-    const defs = document.createElementNS(SVG_NS, "defs");
-    defs.innerHTML = `<pattern id="${id}" patternUnits="userSpaceOnUse" width="${mark.size}" height="${mark.size}">${mark.marks}</pattern>`;
-    const hatch = document.createElementNS(SVG_NS, "polygon");
-    hatch.setAttribute("points", points);
-    hatch.setAttribute("class", "b06-chart__pavement-hatch");
-    hatch.setAttribute("fill", `url(#${id})`);
-    hatch.dataset.paveSpec = spec;
-    svg.append(defs, hatch);
+    if (spec && mark) {
+      // 무늬는 바탕 채움째 한 패턴 — 다각형 한 장(B07 도면 수확이 겹선을 안 담음)
+      const id = `b06-pave-hatch-${(paveSeq += 1)}`;
+      const defs = document.createElementNS(SVG_NS, "defs");
+      defs.innerHTML = `<pattern id="${id}" patternUnits="userSpaceOnUse" width="${mark.size}" height="${mark.size}"><rect width="${mark.size}" height="${mark.size}" class="b06-chart__pave-bg"/>${mark.marks}</pattern>`;
+      svg.append(defs);
+      polygon.style.fill = `url(#${id})`;
+      polygon.dataset.paveSpec = spec;
+    }
+    svg.append(polygon);
   }
 }

B06_Section/B06_Section_UI_Style_Cross_Areas.css

@@ -185,9 +185,9 @@
   stroke-width: 1;
 }
 
-/* 노면공 포장사양 무늬(88): 채움 박스 위에 무늬만 한 겹 — 콘크리트 빗금 · 아스콘 점 · 쇄석 돌 */
-.b06-chart__pavement-hatch {
-  stroke: none;
+/* 노면공 포장사양 무늬(88): 포장 박스 채움 = 바탕 + 무늬 — 콘크리트 빗금 · 아스콘 점 · 쇄석 돌 */
+.b06-chart__pave-bg {
+  fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
 }
 
 .b06-chart__pave-mark {