refactor: 작은 글자 비율과 예외 크기를 공통 변수로 정리

app/game-frontend/src/assets/main.css

@@ -143,7 +143,7 @@ input[inputmode='search'] {
 }
 
 .small_war_log .name_plate {
-    font-size: 0.75em;
+    font-size: var(--sammo-font-size-war-name);
 }
 
 .small_war_log .name_plate_cover {
@@ -152,5 +152,5 @@ input[inputmode='search'] {
 
 .small_war_log .crew_plate {
     color: orangered;
-    font-size: 90%;
+    font-size: var(--sammo-font-size-war-crew);
 }

app/game-frontend/src/assets/styles/tokens.css

@@ -1,9 +1,22 @@
 :root {
     /* 검증된 화면이 공유하는 네 단계. 콘텐츠 내부 축소/숨김은 별도 계약이다. */
-    --sammo-font-size-small: 12px;
+    --sammo-font-size-small: calc(var(--sammo-font-size-normal) * 12 / 14);
     --sammo-font-size-normal: 14px;
     --sammo-font-size-emphasis: 16px;
     --sammo-font-size-title: 24px;
+    /* 크기 변경을 보류한 밀집 UI와 콘텐츠의 상대 축소 계약. */
+    --sammo-font-size-nation-card: 12px;
+    --sammo-font-size-chief-compact-base: 0.75rem;
+    --sammo-font-size-chief-compact-row: 0.55rem;
+    --sammo-font-size-chief-compact-header: 0.65rem;
+    --sammo-font-size-chief-compact-name: 0.6rem;
+    --sammo-font-size-hall-name: 11px;
+    --sammo-font-size-hall-secondary: 95%;
+    --sammo-font-size-personnel-mobile-name: 15px;
+    --sammo-font-size-personnel-mobile-lock: 10px;
+    --sammo-font-size-bracket-bet-button: 11px;
+    --sammo-font-size-war-name: 0.75em;
+    --sammo-font-size-war-crew: 90%;
     --sammo-font-sans: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
     --sammo-color-text: #fff;
     --sammo-color-text-muted: rgba(232, 221, 196, 0.7);

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

@@ -107,7 +107,7 @@ const handleClick = () => {
 
 .chief-card.compact {
     padding: 0;
-    font-size: 0.75rem;
+    font-size: var(--sammo-font-size-chief-compact-base);
 }
 
 .chief-header {
@@ -175,7 +175,7 @@ const handleClick = () => {
     height: 13px;
     min-height: 0;
     padding: 0 2px;
-    font-size: 0.55rem;
+    font-size: var(--sammo-font-size-chief-compact-row);
     line-height: 11px;
 }
 
@@ -183,7 +183,7 @@ const handleClick = () => {
     box-sizing: border-box;
     height: 20px;
     min-height: 0;
-    font-size: 0.65rem;
+    font-size: var(--sammo-font-size-chief-compact-header);
 }
 
 .compact-name,
@@ -210,7 +210,7 @@ const handleClick = () => {
 
 .chief-card.compact .chief-level,
 .chief-card.compact .chief-name {
-    font-size: 0.6rem;
+    font-size: var(--sammo-font-size-chief-compact-name);
 }
 
 .chief-row.rest {

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

@@ -214,7 +214,7 @@ const displayChiefName = (chief: NationChief | undefined): string => {
     min-width: 0;
     height: 193px;
     color: #fff;
-    font-size: 12px;
+    font-size: var(--sammo-font-size-nation-card);
 }
 
 .nation-grid {

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

@@ -376,7 +376,7 @@ small {
     place-items: center;
     color: #d8be79;
     background: #25271f;
-    font: 700 24px/1 var(--sammo-font-sans);
+    font: 700 var(--sammo-font-size-title)/1 var(--sammo-font-sans);
 }
 .personnel-picker-card-body,
 .personnel-picker-card-title,

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

@@ -342,7 +342,7 @@ const mobilePairs = computed(() => {
     border-radius: 3px;
     color: #fff3cd;
     background: #59400e;
-    font: 700 11px/1 var(--sammo-font-sans);
+    font: 700 var(--sammo-font-size-bracket-bet-button)/1 var(--sammo-font-sans);
     cursor: pointer;
 }
 .bracket-bet-button:hover,
@@ -440,7 +440,7 @@ const mobilePairs = computed(() => {
 
 /* Betting uses the same paired cards at every viewport; rounds remain selectable. */
 .inline-betting-bracket {
-    font-size: var(--bet-font-normal, 14px);
+    font-size: var(--sammo-font-size-normal);
 }
 .inline-betting-bracket .mobile-bracket {
     display: block;
@@ -471,14 +471,14 @@ const mobilePairs = computed(() => {
     text-align: left;
 }
 .bracket-candidate-identity :deep(.general-identity-name) {
-    font-size: var(--bet-font-large, 16px);
+    font-size: var(--sammo-font-size-emphasis);
     font-weight: 700;
     white-space: normal;
     overflow-wrap: anywhere;
 }
 .bracket-core-stat {
     color: #fff;
-    font-size: var(--bet-font-normal, 14px);
+    font-size: var(--sammo-font-size-normal);
 }
 .bracket-bet-summary {
     display: grid;

app/game-frontend/src/views/BestGeneralView.vue

@@ -346,7 +346,7 @@ small {
 
 .hall-nation,
 .hall-name {
-    font-size: 11px;
+    font-size: var(--sammo-font-size-hall-name);
 }
 
 .hall-name {
@@ -357,7 +357,7 @@ small {
 }
 
 .hall-name small {
-    font-size: 95%;
+    font-size: var(--sammo-font-size-hall-secondary);
 }
 
 .hall-value {

app/game-frontend/src/views/BettingView.vue

@@ -287,10 +287,6 @@ small {
 }
 
 .betting-page {
-    --bet-font-title: var(--sammo-font-size-title);
-    --bet-font-large: var(--sammo-font-size-emphasis);
-    --bet-font-normal: var(--sammo-font-size-normal);
-    --bet-font-small: var(--sammo-font-size-small);
     width: 100%;
     max-width: 1200px;
     min-width: 0;
@@ -298,7 +294,7 @@ small {
     margin: 0 auto;
     color: #fff;
     font-family: var(--sammo-font-sans);
-    font-size: var(--bet-font-normal);
+    font-size: var(--sammo-font-size-normal);
     line-height: 1.3;
     text-align: center;
 }
@@ -328,7 +324,7 @@ small {
     --legacy-button-height: 44px;
     min-width: 72px;
     padding: 10px 16px;
-    font-size: var(--bet-font-normal);
+    font-size: var(--sammo-font-size-normal);
 }
 .error {
     min-height: 32px;
@@ -338,7 +334,7 @@ small {
 .state {
     min-height: 42px;
     padding: 5px;
-    font-size: var(--bet-font-title);
+    font-size: var(--sammo-font-size-title);
 }
 .state span {
     color: cyan;
@@ -347,11 +343,11 @@ small {
     min-height: 50px;
     padding: 5px;
     color: limegreen;
-    font-size: var(--bet-font-title);
+    font-size: var(--sammo-font-size-title);
 }
 .section-title small {
     color: orange;
-    font-size: var(--bet-font-normal);
+    font-size: var(--sammo-font-size-normal);
 }
 select {
     width: 100%;
@@ -413,7 +409,7 @@ select:disabled {
     border-radius: 3px;
     color: #fff;
     background: #201610;
-    font-size: var(--bet-font-normal);
+    font-size: var(--sammo-font-size-normal);
 }
 .inline-bet .bracket-bet-button {
     position: static;
@@ -427,7 +423,7 @@ select:disabled {
 }
 .bet-message {
     grid-column: 1 / -1;
-    font-size: var(--bet-font-small);
+    font-size: var(--sammo-font-size-small);
     line-height: 16px;
     color: #b8e6ac;
     overflow-wrap: anywhere;
@@ -439,7 +435,7 @@ select:disabled {
     min-height: 50px;
     padding: 8px;
     color: yellow;
-    font-size: var(--bet-font-title);
+    font-size: var(--sammo-font-size-title);
 }
 .ranking-placeholder {
     min-height: 40px;
@@ -457,7 +453,7 @@ select:disabled {
     width: 100%;
     border-collapse: collapse;
     font-variant-numeric: tabular-nums;
-    font-size: var(--bet-font-small);
+    font-size: var(--sammo-font-size-small);
     line-height: 14px;
 }
 .ranking-table th,
@@ -472,7 +468,7 @@ select:disabled {
 .ranking-table thead tr:first-child th {
     height: 18px;
     background: #000;
-    font-size: var(--bet-font-large);
+    font-size: var(--sammo-font-size-emphasis);
     line-height: 18px;
     font-weight: normal;
 }
@@ -503,14 +499,14 @@ select:disabled {
 @media (max-width: 800px) {
     .betting-page {
         max-width: 100%;
-        font-size: var(--bet-font-normal);
+        font-size: var(--sammo-font-size-normal);
     }
     .state {
-        font-size: var(--bet-font-large);
+        font-size: var(--sammo-font-size-emphasis);
     }
     .section-title,
     .ranking-title {
-        font-size: var(--bet-font-title);
+        font-size: var(--sammo-font-size-title);
     }
     .ranking-placeholder {
         display: none;
@@ -538,7 +534,7 @@ select:disabled {
     .ranking-table {
         display: none;
         min-width: 390px;
-        font-size: var(--bet-font-small);
+        font-size: var(--sammo-font-size-small);
     }
     .ranking-table.mobile-active {
         display: table;
@@ -557,7 +553,7 @@ select:disabled {
     }
 }
 .betting-page small {
-    font-size: var(--bet-font-small);
+    font-size: var(--sammo-font-size-small);
 }
 .bet-preset {
     position: relative;
@@ -587,9 +583,9 @@ select:disabled {
     display: none;
 }
 .betting-page :deep(.tournament-page-title) {
-    font-size: var(--bet-font-large);
+    font-size: var(--sammo-font-size-emphasis);
 }
 .betting-page :deep(.tournament-page-header button) {
-    font-size: var(--bet-font-normal);
+    font-size: var(--sammo-font-size-normal);
 }
 </style>

app/game-frontend/src/views/ChiefCenterView.vue

@@ -832,7 +832,7 @@ const repeatTurns = async (amount: number) => {
     padding: 0;
     gap: 0;
     text-align: center;
-    font-size: 0.55rem;
+    font-size: var(--sammo-font-size-chief-compact-row);
     line-height: 11.25px !important;
 }
 .chief-overview :deep(.chief-card.compact .chief-header) {
@@ -859,7 +859,7 @@ const repeatTurns = async (amount: number) => {
     width: 12px;
     height: 155px;
     color: #fff;
-    font-size: 0.55rem;
+    font-size: var(--sammo-font-size-chief-compact-row);
     line-height: 11.25px;
     text-align: center;
 }

app/game-frontend/src/views/HallOfFameView.vue

@@ -349,7 +349,7 @@ small {
 .hall-server,
 .hall-nation,
 .hall-name {
-    font-size: 11px;
+    font-size: var(--sammo-font-size-hall-name);
 }
 
 .hall-name {
@@ -360,7 +360,7 @@ small {
 }
 
 .hall-name small {
-    font-size: 95%;
+    font-size: var(--sammo-font-size-hall-secondary);
 }
 
 .hall-value {

app/game-frontend/src/views/NationPersonnelView.vue

@@ -946,7 +946,7 @@ select {
         background-size: 48px 48px;
     }
     .chief-entry-copy strong {
-        font-size: 15px;
+        font-size: var(--sammo-font-size-personnel-mobile-name);
     }
     .chief-entry-copy small {
         font-size: var(--sammo-font-size-small);
@@ -958,7 +958,7 @@ select {
         line-height: 18px;
     }
     .personnel-lock-label {
-        font-size: 10px;
+        font-size: var(--sammo-font-size-personnel-mobile-lock);
     }
     .award-label {
         font-size: var(--sammo-font-size-small);

app/game-frontend/src/views/SelectGeneralView.vue

@@ -540,7 +540,7 @@ onBeforeUnmount(() => {
     border-right-color: #000;
     border-bottom-color: #000;
     border-spacing: 0;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     text-align: center;
     word-break: break-all;
 }
@@ -578,7 +578,7 @@ onBeforeUnmount(() => {
     margin: 0;
     padding: 0;
     color: inherit;
-    font-size: 14px;
+    font-size: var(--sammo-font-size-normal);
     font-weight: 700;
     line-height: 18.2px;
 }

docs/frontend-css-architecture.md

@@ -139,7 +139,7 @@ The game UI uses four starting sizes from `assets/styles/tokens.css`:
 
 | Token suffix (`--sammo-font-size-`) | CSS size | Role |
 | --- | --- | --- |
-| `small` | 12px | Compact controls, metadata, secondary labels |
+| `small` | `normal × 12 / 14` (12px) | Compact controls, metadata, secondary labels |
 | `normal` | 14px | Body, tables, ordinary controls |
 | `emphasis` | 16px | Emphasized names and section labels |
 | `title` | 24px | Page and major section headings |
@@ -193,3 +193,20 @@ before their fonts are enlarged. The `typographyPolicy.spec.ts` fixture tests
 protect the safe main labels, personnel breakpoints, dense chief rows, NPC
 length branches, and battle log ratios. They use mocked read responses and do
 not constitute live game or public deployment verification.
+
+
+### Relative small tier and exception variables (2026-09-15)
+
+`small` is `calc(var(--sammo-font-size-normal) * 12 / 14)`. The reference is the
+14px normal tier, not the immediate parent. An 80% declaration on nested `small`
+elements would shrink repeatedly and would yield 12.8px inside a 16px parent;
+the token keeps UI metadata at 12px regardless of nesting.
+
+The retained exceptions are also named in `tokens.css`: `nation-card`,
+`chief-compact-{base,row,header,name}`, `hall-{name,secondary}`,
+`personnel-mobile-{name,lock}`, `bracket-bet-button`, and `war-{name,crew}`
+(all with the `--sammo-font-size-` prefix). Their values preserve the previous
+rendering, including rem/em/% semantics. Zero-sized hidden markers and arbitrary
+user HTML remain content contracts. The betting page and bracket now reference
+the shared tier variables directly instead of the redundant `--bet-font-*` aliases.
+The historical deferral reasons above describe the original 12px proposal.