feat: 검증된 인게임 글자 크기를 네 단계로 통합

app/game-frontend/src/components/battle/BattleGeneralCard.vue

@@ -352,7 +352,7 @@ const officerLevelOptions = [
 
 .general-title {
     font-weight: 600;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
 }
 
 .general-subtitle {
@@ -371,7 +371,7 @@ const officerLevelOptions = [
     background: #3498db;
     color: #fff;
     padding: 4px 9px;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 700;
     cursor: pointer;
 }
@@ -419,7 +419,7 @@ const officerLevelOptions = [
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     color: #ddd;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 
 .field span {
@@ -438,7 +438,7 @@ const officerLevelOptions = [
     background: #ddd;
     color: #303030;
     padding: 6px 10px;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     line-height: 21px;
     box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.075);
 }

app/game-frontend/src/components/chief/ChiefTurnCard.vue

@@ -131,20 +131,20 @@ const handleClick = () => {
 }
 
 .chief-level {
-    font-size: 0.75rem;
+    font-size: var(--sammo-font-size-small);
     color: rgba(232, 221, 196, 0.7);
 }
 
 .chief-name {
     overflow: hidden;
-    font-size: 0.8rem;
+    font-size: var(--sammo-font-size-small);
     font-weight: 600;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .chief-me {
-    font-size: 0.65rem;
+    font-size: var(--sammo-font-size-small);
     padding: 2px 6px;
     border-radius: 0;
     background: rgba(201, 164, 90, 0.2);
@@ -166,7 +166,7 @@ const handleClick = () => {
     /* Ref draws no rule between reservation rows and keeps them left aligned. */
     border: 0;
     text-align: left;
-    font-size: 0.75rem;
+    font-size: var(--sammo-font-size-small);
 }
 
 .chief-card.compact .chief-row {

app/game-frontend/src/components/command/RecruitmentCommandForm.vue

@@ -270,13 +270,18 @@ watch(
 </template>
 
 <style scoped>
+/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
+small {
+    font-size: var(--sammo-font-size-small);
+}
+
 .recruitment-command-form {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
     color: #fff;
     background: #1d1d1d;
-    font: 14px/1.25 var(--sammo-font-sans);
+    font: var(--sammo-font-size-normal)/1.25 var(--sammo-font-sans);
 }
 .recruitment-intro {
     padding: 6px;
@@ -335,7 +340,7 @@ watch(
 }
 .crew-group > header strong {
     padding: 0 12px;
-    font-size: 1.3em;
+    font-size: var(--sammo-font-size-title);
 }
 .crew-group > header button {
     min-height: 34px;
@@ -377,7 +382,7 @@ watch(
 }
 .crew-name small {
     display: block;
-    font-size: 0.72em;
+    font-size: var(--sammo-font-size-small);
 }
 .crew-row small {
     display: none;
@@ -509,11 +514,11 @@ watch(
     }
     .crew-row small {
         display: block;
-        font-size: 0.62em;
+        font-size: var(--sammo-font-size-small);
         line-height: 1;
     }
     .crew-row .crew-name small {
-        font-size: 0.72em;
+        font-size: var(--sammo-font-size-small);
     }
     .crew-header .attack,
     .crew-header .defence,
@@ -521,18 +526,18 @@ watch(
     .crew-header .avoid,
     .crew-header .cost,
     .crew-header .rice {
-        font-size: 0.78em;
+        font-size: var(--sammo-font-size-small);
     }
     .crew-group > header {
         grid-template-columns: 7fr 5fr;
     }
     .crew-group > header button {
-        font-size: 0.82em;
+        font-size: var(--sammo-font-size-small);
     }
     .crew-info {
         overflow: hidden;
         overflow-wrap: anywhere;
-        font-size: 0.9em;
+        font-size: var(--sammo-font-size-small);
     }
 }
 

app/game-frontend/src/components/command/ReservedCommandEditor.vue

@@ -832,13 +832,18 @@ const clickOutsideMenu = (event: Event) => {
 </template>
 
 <style scoped>
+/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
+small {
+    font-size: var(--sammo-font-size-small);
+}
+
 .reserved-command-editor {
     position: relative;
     width: 100%;
     min-width: 0;
     color: #fff;
     background: #1d1d1d;
-    font: 14px/1.05 var(--sammo-font-sans);
+    font: var(--sammo-font-size-normal)/1.05 var(--sammo-font-sans);
 }
 .reserved-command-editor.picker-open {
     z-index: 50;
@@ -850,7 +855,7 @@ const clickOutsideMenu = (event: Event) => {
     align-items: center;
     justify-content: center;
     gap: 5px;
-    font-size: 16.8px;
+    font-size: var(--sammo-font-size-emphasis);
     font-weight: 400;
 }
 .identity strong {
@@ -1069,7 +1074,7 @@ const clickOutsideMenu = (event: Event) => {
     background: #102c35;
     box-shadow: 0 3px 8px #000;
     color: #aaffff;
-    font-size: 0.78rem;
+    font-size: var(--sammo-font-size-small);
     font-weight: 400;
     line-height: 1.35;
     text-align: left;
@@ -1091,7 +1096,7 @@ const clickOutsideMenu = (event: Event) => {
     visibility: visible;
 }
 .action-column small {
-    font-size: 0.72em;
+    font-size: var(--sammo-font-size-small);
     line-height: 1;
 }
 .reserved-command-editor.mobile .action-column > div.autonomous {

app/game-frontend/src/components/directory/DirectoryTooltip.vue

@@ -52,7 +52,7 @@ defineProps<{
     box-shadow: 0 3px 12px rgb(0 0 0 / 65%);
     color: #f5f5f5;
     font-family: var(--sammo-font-sans);
-    font-size: 12.5px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 400;
     line-height: 1.45;
     text-align: left;
@@ -66,7 +66,7 @@ defineProps<{
 .directory-tooltip__content strong {
     margin-bottom: 4px;
     color: #7fd4ff;
-    font-size: 13px;
+    font-size: var(--sammo-font-size-small);
 }
 .directory-tooltip--enabled:hover > .directory-tooltip__content,
 .directory-tooltip--enabled:focus > .directory-tooltip__content {

app/game-frontend/src/components/directory/GeneralDirectoryTable.vue

@@ -355,12 +355,17 @@ const sortHelp = (header: Header): string =>
 </template>
 
 <style scoped>
+/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
+small {
+    font-size: var(--sammo-font-size-small);
+}
+
 .directory-table {
     width: 1000px;
     border-collapse: collapse;
     table-layout: auto;
     padding: 0;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     line-height: 1.3;
     word-break: break-all;
 }
@@ -414,7 +419,7 @@ const sortHelp = (header: Header): string =>
     display: grid;
     grid-template-columns: 66px repeat(4, minmax(0, 1fr));
     color: inherit;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     line-height: 1.2;
 }
 .general-card + .general-card {
@@ -453,7 +458,7 @@ const sortHelp = (header: Header): string =>
     min-height: 32px;
     flex-direction: row;
     gap: 4px;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
 }
 .name-field,
 .nation-field {
@@ -461,11 +466,11 @@ const sortHelp = (header: Header): string =>
 }
 .field-label {
     color: #a8d8bd;
-    font-size: 10px;
+    font-size: var(--sammo-font-size-small);
     line-height: 1;
 }
 .identity-field .field-label {
-    font-size: 11px;
+    font-size: var(--sammo-font-size-small);
 }
 .general-card-loading {
     min-height: 65px;

app/game-frontend/src/components/main/CommandArgumentForm.vue

@@ -699,6 +699,11 @@ watch(
 </template>
 
 <style scoped>
+/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
+small {
+    font-size: var(--sammo-font-size-small);
+}
+
 .target-search-toggle {
     margin: 6px 8px;
 }
@@ -714,7 +719,7 @@ watch(
     flex: 1 1 140px;
     width: 140px;
     margin: 0;
-    font-size: 16px;
+    font-size: var(--sammo-font-size-emphasis);
 }
 .target-search small {
     flex-basis: 100%;
@@ -725,7 +730,7 @@ watch(
 
 .command-argument-form {
     border: 1px solid rgba(201, 164, 90, 0.35);
-    font-size: 0.75rem;
+    font-size: var(--sammo-font-size-small);
 }
 
 .command-map {
@@ -765,7 +770,7 @@ watch(
 .status-key {
     border-radius: 2px;
     padding: 0 4px;
-    font-size: 10px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 700;
 }
 
@@ -877,7 +882,7 @@ watch(
 .target-state {
     grid-column: 3;
     color: #aee6a7;
-    font-size: 10px;
+    font-size: var(--sammo-font-size-small);
     text-align: right;
 }
 

app/game-frontend/src/components/main/CommandSelectForm.vue

@@ -174,6 +174,11 @@ const commandTitle = (command: CommandAvailability) =>
 </template>
 
 <style scoped>
+/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
+small {
+    font-size: var(--sammo-font-size-small);
+}
+
 .command-form {
     display: flex;
     flex-direction: column;
@@ -194,7 +199,7 @@ const commandTitle = (command: CommandAvailability) =>
     --legacy-button-color: #fff;
     min-height: 0;
     padding-inline: 4px;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 
 .category-btn.legacy-button--lumen.active {
@@ -220,7 +225,7 @@ const commandTitle = (command: CommandAvailability) =>
     align-items: center;
     justify-content: center;
     text-align: center;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 
 .command-item.ok {
@@ -251,7 +256,7 @@ const commandTitle = (command: CommandAvailability) =>
 
 .command-duration {
     display: block;
-    font-size: 0.875em;
+    font-size: var(--sammo-font-size-small);
     font-weight: 400;
     line-height: 1.1;
     white-space: nowrap;
@@ -260,7 +265,7 @@ const commandTitle = (command: CommandAvailability) =>
 .command-cost {
     display: block;
     color: #f3d58b;
-    font-size: 0.875em;
+    font-size: var(--sammo-font-size-small);
     font-weight: 400;
     line-height: 1.1;
     overflow-wrap: anywhere;

app/game-frontend/src/components/main/GeneralBasicCard.vue

@@ -465,7 +465,7 @@ const specialText = computed(() => {
     background-color: #172a52;
     background-image: var(--sammo-texture-blue);
     color: #fff;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 
 .general-basic-grid {
@@ -523,7 +523,7 @@ const specialText = computed(() => {
 .general-title {
     grid-column: 2 / 8;
     grid-row: 1;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 700;
     line-height: 18px;
 }

app/game-frontend/src/components/main/GeneralRecordPanels.vue

@@ -75,7 +75,7 @@ const unavailableText: Record<GeneralRecordType, string> = {
     color: orange;
     background-color: #000;
     background-image: var(--sammo-texture-green);
-    font-size: 1.3em;
+    font-size: var(--sammo-font-size-title);
     font-weight: 500;
 }
 

app/game-frontend/src/components/main/MainAutorunStatus.vue

@@ -48,7 +48,7 @@ const detail = computed(() => (props.autorun ? formatAutorunUserDetail(props.aut
     background: #18181b;
     box-shadow: 0 4px 12px rgb(0 0 0 / 45%);
     color: #f4f4f5;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 400;
     line-height: 1.4;
     opacity: 0;

app/game-frontend/src/components/main/MainFrontStatus.vue

@@ -106,7 +106,7 @@ watch(
     background-color: #302016;
     background-image: var(--sammo-texture-walnut);
     color: #fff;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     font-weight: 400;
     line-height: 21px;
 }
@@ -169,7 +169,7 @@ watch(
 .execution-status > span {
     display: block;
     white-space: nowrap;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 .execution-status:disabled {
     opacity: 1;

app/game-frontend/src/components/main/MainMobileBottomBar.vue

@@ -287,7 +287,7 @@ const onAction = (action: NonNullable<MainNavigationLinkItem['action']>) => {
     width: 125px;
     padding: 6px 4px;
     font-family: inherit;
-    font-size: 16px;
+    font-size: var(--sammo-font-size-emphasis);
     line-height: 1.5;
     text-align: center;
     cursor: pointer;
@@ -299,13 +299,13 @@ const onAction = (action: NonNullable<MainNavigationLinkItem['action']>) => {
     align-items: center;
     justify-content: center;
     padding: 2px 1px;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     line-height: 1.15;
 }
 
 .auto-refresh-trigger strong {
     color: #bbb;
-    font-size: 11px;
+    font-size: var(--sammo-font-size-small);
     line-height: 1;
 }
 
@@ -315,7 +315,7 @@ const onAction = (action: NonNullable<MainNavigationLinkItem['action']>) => {
 
 .manual-refresh-trigger {
     padding: 0;
-    font-size: 22px;
+    font-size: var(--sammo-font-size-title);
     line-height: 1;
 }
 
@@ -360,7 +360,7 @@ const onAction = (action: NonNullable<MainNavigationLinkItem['action']>) => {
 .bottom-popup li {
     break-inside: avoid;
     min-width: 125px;
-    font-size: 16px;
+    font-size: var(--sammo-font-size-emphasis);
 }
 
 .bottom-popup :deep(.main-menu-link),
@@ -373,7 +373,7 @@ const onAction = (action: NonNullable<MainNavigationLinkItem['action']>) => {
     justify-content: flex-start;
     padding: 5px 16px;
     font-family: inherit;
-    font-size: 16px;
+    font-size: var(--sammo-font-size-emphasis);
     line-height: 1.5;
     text-align: left;
     text-decoration: none;

app/game-frontend/src/components/main/MainNavigationLink.vue

@@ -94,7 +94,7 @@ const lumenClasses = computed(() =>
     background-image: var(--sammo-texture-walnut);
     color: #fff;
     font-family: inherit;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     font-weight: 400;
     line-height: 1.5;
     text-align: center;

app/game-frontend/src/components/main/MainTurnControls.vue

@@ -75,7 +75,7 @@ const emit = defineEmits<{
 
 .main-turn-controls__auto strong {
     color: #bbb;
-    font-size: 0.85em;
+    font-size: var(--sammo-font-size-small);
 }
 
 .main-turn-controls__auto.active strong {

app/game-frontend/src/components/main/MapCityBasic.vue

@@ -102,7 +102,7 @@ const { touchstart, touchmove, touchend, touchcancel } = useMapCityTouch(
     position: absolute;
     box-sizing: border-box;
     transform: translate(-50%, -50%);
-    font-size: 0.65rem;
+    font-size: var(--sammo-font-size-small);
     color: rgba(232, 221, 196, 0.8);
     cursor: pointer;
     touch-action: manipulation;

app/game-frontend/src/components/main/MapCityDetail.vue

@@ -216,7 +216,7 @@ const cityStateStyle = computed(() => ({
 .city-base {
     position: absolute;
     transform: translate(-50%, -50%);
-    font-size: 0.65rem;
+    font-size: var(--sammo-font-size-small);
     color: #fff;
     cursor: pointer;
     touch-action: manipulation;
@@ -296,7 +296,7 @@ const cityStateStyle = computed(() => ({
     bottom: -10px;
     background: rgba(0, 0, 0, 0.5);
     white-space: nowrap;
-    font-size: 0.6rem;
+    font-size: var(--sammo-font-size-small);
     color: rgba(232, 221, 196, 0.9);
 }
 

app/game-frontend/src/components/main/MapViewer.vue

@@ -816,7 +816,7 @@ const selectCity = (cityId: number) => {
         left top,
         right top;
     background-repeat: no-repeat;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     font-weight: 700;
     line-height: 20px;
     text-align: center;
@@ -834,7 +834,7 @@ const selectCity = (cityId: number) => {
     padding: 5px 8px;
     background: #000;
     color: #fff;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 400;
     line-height: 18px;
     text-align: left;
@@ -880,7 +880,7 @@ const selectCity = (cityId: number) => {
     background: #345c85;
     color: #fff;
     cursor: pointer;
-    font-size: 17px;
+    font-size: var(--sammo-font-size-emphasis);
     line-height: 1;
     pointer-events: auto;
 }
@@ -928,7 +928,7 @@ const selectCity = (cityId: number) => {
     padding: 3px 7px;
     background: #345c85;
     color: #fff;
-    font-size: 11px;
+    font-size: var(--sammo-font-size-small);
     line-height: 18px;
     cursor: pointer;
     text-align: left;
@@ -998,7 +998,7 @@ const selectCity = (cityId: number) => {
     padding: 0;
     background: rgb(30, 164, 255);
     color: #fff;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     line-height: 15px;
     white-space: nowrap;
 }
@@ -1013,7 +1013,7 @@ const selectCity = (cityId: number) => {
     padding: 1px 4px;
     background: rgba(5, 27, 43, 0.92);
     color: #d9f3ff;
-    font-size: 10px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 700;
     line-height: 14px;
     pointer-events: none;

app/game-frontend/src/components/main/MessagePanel.vue

@@ -273,7 +273,7 @@ const forwardResponse = (messageId: number, response: boolean) => {
 <style scoped>
 .MessagePanel {
     color: #fff;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
 }
 
 .MessageInputForm {
@@ -375,7 +375,7 @@ const forwardResponse = (messageId: number, response: boolean) => {
     border: 1px solid transparent;
     border-radius: 3px;
     padding: 2px 6px;
-    font-size: 11.2px;
+    font-size: var(--sammo-font-size-small);
     line-height: 1.5;
     cursor: pointer;
 }

app/game-frontend/src/components/main/MessagePlate.vue

@@ -329,7 +329,7 @@ onBeforeUnmount(() => {
     min-height: 64px;
     outline: 1px solid gray;
     color: #fff;
-    font-size: 12.5px;
+    font-size: var(--sammo-font-size-small);
     word-break: break-all;
 }
 
@@ -414,7 +414,7 @@ button.msg-target {
 }
 
 .msg-time {
-    font-size: 0.75em;
+    font-size: var(--sammo-font-size-small);
     font-weight: 400;
 }
 
@@ -429,7 +429,7 @@ button.msg-target {
     background: transparent;
     padding: 2px 4px;
     color: #ffc107;
-    font-size: 8px;
+    font-size: var(--sammo-font-size-small);
     cursor: pointer;
 }
 
@@ -479,7 +479,7 @@ button.msg-target {
 .message-response .legacy-button {
     min-width: 42px;
     padding: 2px 8px;
-    font-size: 12.5px;
+    font-size: var(--sammo-font-size-small);
     cursor: pointer;
 }
 

app/game-frontend/src/components/main/RecentLogList.vue

@@ -42,7 +42,7 @@ const formattedLogs = computed(() =>
     min-width: 0;
     color: #fff;
     font-family: var(--sammo-font-sans);
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     line-height: 1.35;
 }
 

app/game-frontend/src/components/main/RecordPanel.vue

@@ -17,7 +17,7 @@ defineProps<{
 .record-panel {
     min-width: 0;
     color: #fff;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     font-weight: 400;
     line-height: 21px;
 }

app/game-frontend/src/components/main/SelectedCityPanel.vue

@@ -67,7 +67,7 @@ const props = defineProps<{
 }
 
 .tag {
-    font-size: 0.65rem;
+    font-size: var(--sammo-font-size-small);
     padding: 2px 4px;
     border: 1px solid rgba(201, 164, 90, 0.4);
 }
@@ -76,7 +76,7 @@ const props = defineProps<{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
     gap: 4px;
-    font-size: 0.75rem;
+    font-size: var(--sammo-font-size-small);
 }
 
 .empty {

app/game-frontend/src/components/personnel/PermissionMultiSelect.vue

@@ -203,7 +203,7 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', handleDocument
     border-radius: 2px;
     color: #111;
     background: #fff;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 700;
     line-height: 1;
 }
@@ -212,7 +212,7 @@ onBeforeUnmount(() => document.removeEventListener('pointerdown', handleDocument
     margin: 0;
     padding: 6px 8px;
     color: #bbb;
-    font-size: 11px;
+    font-size: var(--sammo-font-size-small);
 }
 .permission-multiselect-help {
     border-top: 1px solid #454545;

app/game-frontend/src/components/personnel/PersonnelSelectionDialog.vue

@@ -216,6 +216,11 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+/* UI 보조 글자는 부모의 80%가 아니라 공통 소형 크기를 사용한다. */
+small {
+    font-size: var(--sammo-font-size-small);
+}
+
 .personnel-picker-backdrop {
     position: fixed;
     z-index: 2050;
@@ -237,7 +242,7 @@ onBeforeUnmount(() => {
     border: 1px solid #78653d;
     border-radius: 14px;
     box-shadow: 0 24px 70px rgb(0 0 0 / 78%);
-    font: 14px/1.45 var(--sammo-font-sans);
+    font: var(--sammo-font-size-normal)/1.45 var(--sammo-font-sans);
 }
 .personnel-picker-header {
     display: flex;
@@ -251,13 +256,13 @@ onBeforeUnmount(() => {
 .personnel-picker-eyebrow {
     margin: 0 0 3px;
     color: #cbb171;
-    font-size: 11px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 700;
     letter-spacing: 0.13em;
 }
 .personnel-picker h2 {
     margin: 0;
-    font-size: 22px;
+    font-size: var(--sammo-font-size-title);
     line-height: 1.25;
 }
 .personnel-picker-header p:last-child {
@@ -273,7 +278,7 @@ onBeforeUnmount(() => {
     padding: 0;
     color: #ddd7ca;
     background: rgb(0 0 0 / 28%);
-    font-size: 24px;
+    font-size: var(--sammo-font-size-title);
     line-height: 1;
     cursor: pointer;
 }
@@ -385,7 +390,7 @@ onBeforeUnmount(() => {
 }
 .personnel-picker-card-title strong,
 .vacancy-card strong {
-    font-size: 16px;
+    font-size: var(--sammo-font-size-emphasis);
 }
 .personnel-picker-card-title small,
 .vacancy-card small {
@@ -397,7 +402,7 @@ onBeforeUnmount(() => {
     color: #13150f;
     background: #d5bb6f;
     border-radius: 999px;
-    font-size: 10px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 800;
 }
 .personnel-picker-badges {
@@ -412,7 +417,7 @@ onBeforeUnmount(() => {
     background: #32352d;
     border: 1px solid #555948;
     border-radius: 999px;
-    font-size: 10px;
+    font-size: var(--sammo-font-size-small);
 }
 .personnel-picker-stats {
     display: grid;
@@ -431,7 +436,7 @@ onBeforeUnmount(() => {
 .personnel-picker-stats small,
 .personnel-picker-details small {
     color: #aaa99f;
-    font-size: 10px;
+    font-size: var(--sammo-font-size-small);
 }
 .personnel-picker-stats strong {
     color: #f1d47e;

app/game-frontend/src/components/tournament/TournamentBracket.vue

@@ -418,12 +418,12 @@ const mobilePairs = computed(() => {
     left: 50%;
     transform: translate(-50%, -50%);
     color: #ffd25e;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 .tournament-bracket > p {
     margin: 8px 0 0;
     color: skyblue;
-    font-size: 18px;
+    font-size: var(--sammo-font-size-emphasis);
 }
 @media (max-width: 800px) {
     .desktop-bracket {
@@ -434,7 +434,7 @@ const mobilePairs = computed(() => {
     }
     .tournament-bracket > p {
         padding: 0 8px;
-        font-size: 13px;
+        font-size: var(--sammo-font-size-small);
     }
 }
 
@@ -511,13 +511,13 @@ const mobilePairs = computed(() => {
     }
 }
 .bracket-info-identity :deep(.general-identity-name) {
-    font-size: 16px;
+    font-size: var(--sammo-font-size-emphasis);
     line-height: 18px;
 }
 .bracket-info-identity :deep(.general-identity-details) {
     display: flex;
     flex-direction: column;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     line-height: 18px;
     text-align: left;
     overflow-wrap: anywhere;

app/game-frontend/src/components/tournament/TournamentGroupCard.vue

@@ -92,7 +92,7 @@ const pointsOf = (participant: StandingParticipant): number => (participant.win
     padding: 3px;
     background: #000;
     color: #fff;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     font-weight: 400;
     text-align: center;
 }
@@ -129,7 +129,7 @@ const pointsOf = (participant: StandingParticipant): number => (participant.win
     min-width: 0;
     flex-direction: column;
     color: #d8cfca;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
     font-variant-numeric: tabular-nums;
     line-height: 14px;
     white-space: nowrap;
@@ -156,7 +156,7 @@ const pointsOf = (participant: StandingParticipant): number => (participant.win
         grid-template-columns: 28px minmax(0, 1fr);
     }
     .standing-summary {
-        font-size: 12px;
+        font-size: var(--sammo-font-size-small);
         line-height: 15px;
     }
 }

app/game-frontend/src/components/tournament/TournamentPageHeader.vue

@@ -62,7 +62,7 @@ defineProps<{
 .tournament-page-title {
     min-width: 0;
     overflow: hidden;
-    font-size: 16px;
+    font-size: var(--sammo-font-size-emphasis);
     font-weight: 400;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -76,7 +76,7 @@ defineProps<{
 button {
     --legacy-button-height: 44px;
     margin: 0;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
 }
 .tournament-page-tabs button {
     min-width: 72px;
@@ -100,7 +100,7 @@ button:focus-visible {
         padding-inline: 2px;
     }
     .tournament-page-title {
-        font-size: 13px;
+        font-size: var(--sammo-font-size-small);
     }
     .tournament-page-actions,
     .tournament-page-tabs {

app/game-frontend/src/components/ui/GameFeedbackLayer.vue

@@ -220,7 +220,7 @@ onBeforeUnmount(() => {
 
 .game-feedback-copy strong {
     color: #e5c982;
-    font-size: 0.78rem;
+    font-size: var(--sammo-font-size-small);
 }
 
 .game-feedback-close {
@@ -231,7 +231,7 @@ onBeforeUnmount(() => {
     background: transparent;
     border: 0;
     cursor: pointer;
-    font-size: 1.25rem;
+    font-size: var(--sammo-font-size-title);
     line-height: 1;
 }
 
@@ -276,7 +276,7 @@ onBeforeUnmount(() => {
 
 .game-dialog-panel h2 {
     color: #e5c982;
-    font-size: 1rem;
+    font-size: var(--sammo-font-size-emphasis);
 }
 
 .game-dialog-panel p {

app/game-frontend/src/components/ui/GameServerConnectionNotice.vue

@@ -30,7 +30,7 @@ const { reconnecting } = useGameServerConnectionRecovery();
     border-top: 0;
     background: #fff3bf;
     color: #3d3100;
-    font: 13px/1.45 var(--sammo-font-sans);
+    font: var(--sammo-font-size-small)/1.45 var(--sammo-font-sans);
     text-align: center;
     box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
 }

app/game-frontend/src/components/ui/LegacyGeneralProgress.vue

@@ -102,7 +102,7 @@ const experiencePercent = computed(() =>
     max-width: 100%;
     overflow: hidden;
     border-top: 1px solid #666;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 
 .stat-grid {

app/game-frontend/src/components/ui/LegacyHtmlEditor.vue

@@ -427,7 +427,7 @@ onBeforeUnmount(() => editor.value?.destroy());
 }
 .legacy-html-editor__image-toolbar span {
     padding: 0 4px;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 .legacy-html-editor__image-toolbar button {
     border: 1px solid transparent;
@@ -453,7 +453,7 @@ onBeforeUnmount(() => editor.value?.destroy());
     align-items: center;
     gap: 0;
     color: inherit;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-small);
 }
 .legacy-html-editor__select select {
     min-width: 0;

app/game-frontend/src/components/ui/PanelCard.vue

@@ -49,14 +49,14 @@ withDefaults(defineProps<Props>(), {
 .panel-title {
     margin: 0;
     color: #fff;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     font-weight: 700;
 }
 
 .panel-subtitle {
     margin: 1px 0 0;
     color: #ccc;
-    font-size: 11px;
+    font-size: var(--sammo-font-size-small);
 }
 
 .panel-actions {
@@ -68,6 +68,6 @@ withDefaults(defineProps<Props>(), {
 .panel-body {
     padding: 6px;
     color: #fff;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
 }
 </style>

app/game-frontend/src/components/ui/RichTooltip.vue

@@ -112,7 +112,7 @@ watch(
     box-shadow: 0 3px 12px rgb(0 0 0 / 65%);
     color: #f5f5f5;
     font-family: var(--sammo-font-sans);
-    font-size: 12.5px;
+    font-size: var(--sammo-font-size-small);
     line-height: 1.45;
     text-align: left;
 }
@@ -147,7 +147,7 @@ watch(
 .rich-tooltip-content__title {
     margin-bottom: 4px;
     color: #7fd4ff;
-    font-size: 13px;
+    font-size: var(--sammo-font-size-small);
     font-weight: 700;
 }