feat(center-graphic): tunnel and bridge section shapes in simple examples

- CompactFacilityConnection gets an optional segmentShape ('tunnel' |
  'bridge'); omitted keeps the narrow centre strip
- Tunnel: 30% rounded section with a white outline and a dot on each end
- Bridge: 30% square section with white end lines and a square mark at
  each end

packages/center-graphic/src/components/CompactFacilityConnection.css

@@ -37,6 +37,32 @@
   border-inline: 2px solid #fff;
 }
 
+/* Facility section shapes (2026-10-26, user reference): a 30% section centred on the route, a #400500 mark at each end
+   (the joint size, 40% of the route). Tunnel: rounded ends inside a white outline, a dot on each end's centre.
+   Bridge: square ends with the white end lines, a square mark against each end. */
+.compact-facility-connection__segment[data-shape] { width: 30%; }
+.compact-facility-connection__segment[data-shape]::before,
+.compact-facility-connection__segment[data-shape]::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: var(--compact-joint-size);
+  height: var(--compact-joint-size);
+  transform: translateY(-50%);
+  background: #400500;
+}
+.compact-facility-connection__segment[data-shape="tunnel"] {
+  inset-block: calc(var(--compact-route-outline) * -1);
+  border: var(--compact-route-outline) solid #fff;
+  border-radius: 9999px;
+}
+.compact-facility-connection__segment[data-shape="tunnel"]::before,
+.compact-facility-connection__segment[data-shape="tunnel"]::after { border-radius: 50%; }
+.compact-facility-connection__segment[data-shape="tunnel"]::before { left: calc((var(--compact-route-primary) - var(--compact-joint-size)) / 2); }
+.compact-facility-connection__segment[data-shape="tunnel"]::after { right: calc((var(--compact-route-primary) - var(--compact-joint-size)) / 2); }
+.compact-facility-connection__segment[data-shape="bridge"]::before { left: 0; }
+.compact-facility-connection__segment[data-shape="bridge"]::after { right: 0; }
+
 .compact-facility-connection__anchor {
   z-index: 1;
   position: absolute;

packages/center-graphic/src/components/CompactFacilityConnection.tsx

@@ -3,19 +3,22 @@ import type { ReactNode } from 'react';
 import './CompactFacilityConnection.css';
 
 // Shared Web preview relationship; entity assets and text layout remain child-owned.
-export function CompactFacilityConnection({ children, className, routeMode, sourceStatus, label }: {
+// segmentShape (2026-10-26, inline routes only): the facility's section on the route — 'tunnel' = rounded ends with a
+// dot at each end, 'bridge' = square ends with a square mark at each end. Omitted: the narrow centre strip as before.
+export function CompactFacilityConnection({ children, className, routeMode, sourceStatus, label, segmentShape }: {
   children?: ReactNode;
   className?: string;
   routeMode?: string;
   sourceStatus?: string;
   label?: string;
+  segmentShape?: 'tunnel' | 'bridge';
 }) {
   const inline = routeMode === 'inline';
   return (
     <div className={`compact-facility-connection ${className}`} data-source-status={sourceStatus} data-connection-model="tunnel-shared" data-route-attachment={inline ? 'segment' : 'marker'} aria-label={label}>
       <div className="compact-facility-connection__route facility-applied__route tunnel-applied-example__route" aria-hidden="true">
         {inline
-          ? <span className="compact-facility-connection__segment facility-applied__route-segment tunnel-applied-example__segment" />
+          ? <span className="compact-facility-connection__segment facility-applied__route-segment tunnel-applied-example__segment" data-shape={segmentShape} />
           : <span className="compact-facility-connection__anchor facility-applied__route-anchor" />}
       </div>
       <div className="compact-facility-connection__stem facility-applied__connector tunnel-applied-example__connector" aria-hidden="true"><span /></div>

packages/center-graphic/src/components/FacilityBatch.tsx

@@ -343,7 +343,7 @@ function Sample({ title, note, children }: { title: string; note?: string; child
 
 function CompactAppliedExample({ config }: { config: FacilityConfig }) {
   return (
-    <CompactFacilityConnection className={classNames('facility-applied', `facility-applied--${config.routeMode}`)} routeMode={config.routeMode} sourceStatus={config.id === 'interchange' ? 'SOURCE_PENDING' : 'SOURCE_RECEIVED'} label={`${config.label} 간략 적용 예제`}>
+    <CompactFacilityConnection className={classNames('facility-applied', `facility-applied--${config.routeMode}`)} routeMode={config.routeMode} segmentShape={config.id === 'bridge' ? 'bridge' : undefined} sourceStatus={config.id === 'interchange' ? 'SOURCE_PENDING' : 'SOURCE_RECEIVED'} label={`${config.label} 간략 적용 예제`}>
       <LocalAssetFacility config={config} />
     </CompactFacilityConnection>
   );

packages/center-graphic/src/components/TunnelFacility.tsx

@@ -168,7 +168,7 @@ function TunnelSample({ title, note, children }: { title: string; note?: string;
 
 function CompactTunnelExample() {
   return (
-    <CompactFacilityConnection className="tunnel-applied-example" routeMode="inline" sourceStatus="SOURCE_RECEIVED" label="노선과 터널 시설물의 간략 적용 예제">
+    <CompactFacilityConnection className="tunnel-applied-example" routeMode="inline" segmentShape="tunnel" sourceStatus="SOURCE_RECEIVED" label="노선과 터널 시설물의 간략 적용 예제">
       <TunnelFacility name="대산2터널" secondaryText="L=750m" variant="positionMap" />
     </CompactFacilityConnection>
   );