From c56cfc49317e630d24c0993d60f79c20e3c0a428 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= <shkim4@samaneng.com>
Date: Mon, 26 Oct 2026 20:15:09 +0900
Subject: [PATCH] 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
---
 .../src/components/CenterSpatialInformation.css          | 3 +++
 .../src/components/CenterSpatialInformation.tsx          | 9 +++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/center-graphic/src/components/CenterSpatialInformation.css b/packages/center-graphic/src/components/CenterSpatialInformation.css
index 0cf420a..df1228b 100644
--- a/packages/center-graphic/src/components/CenterSpatialInformation.css
+++ b/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;
 }
diff --git a/packages/center-graphic/src/components/CenterSpatialInformation.tsx b/packages/center-graphic/src/components/CenterSpatialInformation.tsx
index 0264614..f83271f 100644
--- a/packages/center-graphic/src/components/CenterSpatialInformation.tsx
+++ b/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} />