feat(center-graphic): centre administrative labels on their column axis

- Section 4 demo: each row centred in its column, captions kept left
- Plain labels take the trailing letter-spacing out of their box so a
  centred label is centred on its letters

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

@@ -310,6 +310,9 @@
   white-space: nowrap;
   font-size: calc(var(--csi-admin-size) * var(--csi-u));
   letter-spacing: calc(var(--csi-admin-track) * var(--csi-u));
+  /* letter-spacing also follows the last character; take that trailing space out of the box so a centred label is
+     centred on its letters (2026-10-26). */
+  margin-right: calc(-1 * var(--csi-admin-track) * var(--csi-u));
   paint-order: stroke fill;
   -webkit-text-stroke: calc(2 * var(--csi-admin-outline) * var(--csi-u)) #000000;
 }

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

@@ -550,17 +550,18 @@ export function CenterSpatialInformationReferenceDemo() {
           + "강조형: 행정구역을 명확히 구분하거나 주요 위치정보로 강조할 경우 — 글자마다 베벨 타일 하나."
         }
       >
+        {/* 2026-10-26 (user request): each row centred on its column's vertical axis; the captions stay left. */}
         <div className="csi-scale-40" style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
-          <div>
-            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 12 }}>기본형</div>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 12, alignSelf: 'flex-start' }}>기본형</div>
             {Object.values(ADMIN_LEVELS).map((lv) => (
               <div key={lv.key} style={{ marginBottom: 16 }}>
                 <AdministrativeLabel level={lv.key as AdminLevelKey} form="plain" name={content === 'long' ? '서울특별시' : undefined} />
               </div>
             ))}
           </div>
-          <div>
-            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 12 }}>강조형</div>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 12, alignSelf: 'flex-start' }}>강조형</div>
             {Object.values(ADMIN_LEVELS).map((lv) => (
               <div key={lv.key} style={{ marginBottom: 16 }}>
                 <AdministrativeLabel level={lv.key as AdminLevelKey} form="tiles" name={content === 'long' ? '서울특별시' : undefined} />