feat(fe): implement user age-tier font scale selector with localStorage persistence

frontend/src/shared/shell/KsHeader.vue

@@ -37,6 +37,19 @@ const handleLogout = () => {
   showUserMenu.value = false
 }
 
+const currentFontScale = ref<string>(localStorage.getItem('font-scale') || 'compact')
+
+const setFontScale = (scale: string) => {
+  currentFontScale.value = scale
+  document.documentElement.setAttribute('data-font-scale', scale)
+  localStorage.setItem('font-scale', scale)
+}
+
+// Initial application
+if (typeof document !== 'undefined') {
+  document.documentElement.setAttribute('data-font-scale', currentFontScale.value)
+}
+
 const toggleTheme = () => {
   const root = document.documentElement
   const isDark = root.getAttribute('data-theme') === 'dark'
@@ -93,6 +106,34 @@ const toggleTheme = () => {
 
       <!-- Right side actions -->
       <div class="ks-header__end">
+        <!-- User Age-Tier Font Scale Selector -->
+        <div class="ks-header__font-scale-selector" title="연령별 / 가독성 폰트 크기 선택">
+          <button
+            type="button"
+            :class="['ks-header__font-btn', { 'ks-header__font-btn--active': currentFontScale === 'compact' }]"
+            title="청년/청장년층 (초고밀도 11px)"
+            @click="setFontScale('compact')"
+          >
+            청년 (소)
+          </button>
+          <button
+            type="button"
+            :class="['ks-header__font-btn', { 'ks-header__font-btn--active': currentFontScale === 'standard' }]"
+            title="중장년층 50대 (표준 13px)"
+            @click="setFontScale('standard')"
+          >
+            중장년 (중)
+          </button>
+          <button
+            type="button"
+            :class="['ks-header__font-btn', { 'ks-header__font-btn--active': currentFontScale === 'senior' }]"
+            title="시니어 60대 이상 (대형가독 15px)"
+            @click="setFontScale('senior')"
+          >
+            시니어 (대)
+          </button>
+        </div>
+
         <!-- Theme toggle -->
         <button
           type="button"
@@ -301,10 +342,45 @@ const toggleTheme = () => {
 .ks-header__end {
   display: flex;
   align-items: center;
-  gap: var(--spacing-3);
+  gap: var(--ks-space-2);
   flex-shrink: 0;
 }
 
+.ks-header__font-scale-selector {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background-color: var(--ks-color-canvas);
+  border: 1px solid var(--ks-color-border);
+  border-radius: var(--ks-radius-sm);
+  padding: 2px;
+}
+
+.ks-header__font-btn {
+  background: transparent;
+  border: none;
+  color: var(--ks-color-text-muted);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 6px;
+  height: 22px;
+  border-radius: 2px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--ks-transition-fast);
+}
+
+.ks-header__font-btn:hover {
+  color: var(--ks-color-text);
+  background-color: var(--ks-color-neutral-200);
+}
+
+.ks-header__font-btn--active {
+  background-color: var(--ks-color-action);
+  color: #ffffff !important;
+  font-weight: 600;
+}
+
 .ks-header__action-btn {
   background-color: var(--color-background-secondary);
   border: 1px solid var(--color-border-primary);