UI Phase A — 컴포넌트 크기/폰트 상향, UPPERCASE 제거

- v5-btn 30→34px, sm 26→28px, lg 40px 추가. 폰트 11.2→13px
- v5-bdg UPPERCASE/letter-spacing 제거 (한글 자간 왜곡 해결), 9.28→11.5px
- v5-tbl 헤더 UPPERCASE 제거, font-weight 600, 폰트 9.6→13px, 행 padding 증가
- v5-kpi-num 1.85→2rem (display 토큰 정렬), delta/sub 9.9→12px
- v5-card-title UPPERCASE 제거, 10.5→13px
- v5-crumbs 9.6→11.5px, 몬오스페이스 제거
- v5-page-sub 10.9→13px
- v5-modal max-width 420→560, size 변형 추가 (sm 420, lg 720, xl 960)
- v5-modal-body body-sm→body 토큰
- 사이드바 .v5-si 폰트 12.3→13px, 여백 증가
- 헤더 breadcrumb 11.5→13px

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/styles/v5-atomics.css

@@ -11,10 +11,10 @@
    Defaults: 30px height, 0.7rem text, primary fills, glow on hover.
    ================================================================= */
 .v5-btn {
-  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
-  height: 30px; padding: 0 var(--v5-sp-3);
+  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
+  height: 34px; padding: 0 var(--v5-sp-4);
   font-family: var(--v5-font-sans);
-  font-size: .7rem; font-weight: var(--v5-fw-semi);
+  font-size: .8125rem; font-weight: var(--v5-fw-semi);
   border: 1px solid transparent; border-radius: var(--v5-radius-md);
   background: transparent; color: var(--v5-text);
   cursor: pointer; user-select: none; white-space: nowrap;
@@ -25,7 +25,7 @@
               transform .12s var(--v5-ease-move),
               opacity .2s var(--v5-ease-move);
 }
-.v5-btn svg { width: 13px; height: 13px; stroke-width: 1.75; flex-shrink: 0; }
+.v5-btn svg { width: 14px; height: 14px; stroke-width: 1.75; flex-shrink: 0; }
 .v5-btn:disabled { opacity: .4; cursor: not-allowed; }
 .v5-btn:active:not(:disabled) { transform: scale(.98); }
 
@@ -63,13 +63,20 @@
   opacity: .92; box-shadow: var(--v5-glow-danger); transform: translateY(-1px);
 }
 
-/* size: sm — compact 26px */
+/* size: sm — compact 28px */
 .v5-btn.sm {
-  height: 26px; padding: 0 var(--v5-sp-2);
-  font-size: .64rem; border-radius: var(--v5-radius-sm);
+  height: 28px; padding: 0 var(--v5-sp-3);
+  font-size: .75rem; border-radius: var(--v5-radius-sm);
 }
 .v5-btn.sm svg { width: 12px; height: 12px; }
 
+/* size: lg — prominent 40px */
+.v5-btn.lg {
+  height: 40px; padding: 0 var(--v5-sp-5);
+  font-size: .875rem; border-radius: var(--v5-radius-md-2);
+}
+.v5-btn.lg svg { width: 16px; height: 16px; }
+
 /* focus ring (keyboard) */
 .v5-btn:focus-visible {
   outline: none;
@@ -82,13 +89,13 @@
    Pill, tiny caps, status-tinted.
    ================================================================= */
 .v5-bdg {
-  display: inline-flex; align-items: center; gap: .3rem;
-  padding: .18rem .5rem;
-  font-size: .58rem; font-weight: var(--v5-fw-bold);
-  letter-spacing: var(--v5-ls-wide); text-transform: uppercase;
+  display: inline-flex; align-items: center; gap: .35rem;
+  padding: .22rem .55rem;
+  font-size: .72rem; font-weight: var(--v5-fw-semi);
   border-radius: var(--v5-radius-pill);
   background: var(--v5-bg-subtle); color: var(--v5-text-sec);
   white-space: nowrap;
+  line-height: 1.2;
 }
 .v5-bdg .v5-bdg-dot {
   width: 5px; height: 5px; border-radius: 50%;
@@ -122,9 +129,9 @@
   gap: .6rem; margin-bottom: .4rem;
 }
 .v5-card-title {
-  font-size: .66rem; font-weight: var(--v5-fw-bold);
-  text-transform: uppercase; letter-spacing: var(--v5-ls-wide);
-  color: var(--v5-text-muted);
+  font-size: var(--v5-fs-body-sm); font-weight: 700;
+  color: var(--v5-text);
+  line-height: 1.3;
 }
 
 /* =================================================================
@@ -138,11 +145,9 @@
 .v5-page-head-l { min-width: 0; flex: 1; }
 .v5-page-head-r { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
 .v5-crumbs {
-  font-size: .6rem; color: var(--v5-text-muted);
-  display: flex; align-items: center; gap: .35rem;
-  font-family: var(--v5-font-mono);
-  letter-spacing: var(--v5-ls-wide);
-  margin-bottom: .25rem;
+  font-size: .72rem; color: var(--v5-text-muted);
+  display: flex; align-items: center; gap: .4rem;
+  margin-bottom: .3rem;
 }
 .v5-crumbs .sep { opacity: .5; }
 .v5-page-title {
@@ -152,8 +157,8 @@
   color: var(--v5-text);
 }
 .v5-page-sub {
-  font-size: .68rem; color: var(--v5-text-muted);
-  margin-top: .15rem;
+  font-size: var(--v5-fs-body-sm); color: var(--v5-text-muted);
+  margin-top: .25rem;
 }
 
 /* =================================================================
@@ -172,18 +177,16 @@
 }
 .v5-tbl thead th {
   text-align: left;
-  padding: var(--v5-sp-3) var(--v5-sp-4);
-  font-size: var(--v5-fs-caption);
-  font-weight: var(--v5-fw-bold);
-  letter-spacing: var(--v5-ls-wide);
-  text-transform: uppercase;
-  color: var(--v5-text-muted);
+  padding: .7rem var(--v5-sp-4);
+  font-size: var(--v5-fs-caption-lg);
+  font-weight: 600;
+  color: var(--v5-text-sec);
   background: var(--v5-bg-subtle);
   border-bottom: 1px solid var(--v5-border);
   white-space: nowrap;
 }
 .v5-tbl tbody td {
-  padding: .55rem var(--v5-sp-4);
+  padding: .65rem var(--v5-sp-4);
   border-bottom: 1px solid var(--v5-border-subtle);
   vertical-align: middle;
 }
@@ -205,12 +208,12 @@
    Large number with trend pill underneath.
    ================================================================= */
 .v5-kpi-num {
-  font-size: 1.85rem; font-weight: 800;
+  font-size: var(--v5-fs-display); font-weight: 800;
   letter-spacing: -0.03em;
   font-variant-numeric: tabular-nums;
   line-height: 1.05;
   color: var(--v5-text);
-  display: flex; align-items: baseline; gap: .55rem;
+  display: flex; align-items: baseline; gap: .6rem;
 }
 .v5-kpi-num.kpi-cyan  { color: rgb(var(--v5-cyan-rgb)); }
 .v5-kpi-num.kpi-green { color: rgb(var(--v5-green-rgb)); }
@@ -218,18 +221,18 @@
 .v5-kpi-num.kpi-amber { color: rgb(var(--v5-amber-rgb)); }
 
 .v5-kpi-delta {
-  display: inline-flex; align-items: center; gap: .15rem;
-  font-size: .62rem; font-weight: var(--v5-fw-bold);
-  padding: .12rem .4rem; border-radius: var(--v5-radius-sm);
+  display: inline-flex; align-items: center; gap: .2rem;
+  font-size: .75rem; font-weight: var(--v5-fw-bold);
+  padding: .18rem .5rem; border-radius: var(--v5-radius-sm);
 }
 .v5-kpi-delta.up   { background: rgba(var(--v5-green-rgb), .12); color: rgb(var(--v5-green-rgb)); }
 .v5-kpi-delta.down { background: rgba(var(--v5-red-rgb), .12);   color: rgb(var(--v5-red-rgb)); }
 .v5-kpi-delta svg { width: 11px; height: 11px; stroke-width: 2; }
 
 .v5-kpi-sub {
-  font-size: .62rem;
+  font-size: .75rem;
   color: var(--v5-text-muted);
-  margin-top: .25rem;
+  margin-top: .3rem;
 }
 
 /* =================================================================
@@ -287,9 +290,9 @@
 .v5-feed-txt b { color: var(--v5-text); font-weight: var(--v5-fw-semi); }
 .v5-feed-txt .tm {
   display: block;
-  font-size: .6rem; color: var(--v5-text-muted);
+  font-size: .72rem; color: var(--v5-text-muted);
   font-family: var(--v5-font-mono);
-  margin-top: .15rem;
+  margin-top: .2rem;
 }
 
 /* =================================================================
@@ -390,7 +393,7 @@
   animation: v5-overlay-in .22s var(--v5-ease-enter);
 }
 .v5-modal {
-  width: 100%; max-width: 420px;
+  width: 100%; max-width: 560px;
   background: var(--v5-surface-solid);
   border: 1px solid var(--v5-border);
   border-radius: var(--v5-radius-lg-2);
@@ -398,6 +401,9 @@
   padding: var(--v5-sp-5);
   animation: v5-modal-in .3s var(--v5-ease-enter);
 }
+.v5-modal.sm { max-width: 420px; }
+.v5-modal.lg { max-width: 720px; }
+.v5-modal.xl { max-width: 960px; }
 .v5-modal-head {
   display: flex; align-items: flex-start; justify-content: space-between;
   gap: .6rem; margin-bottom: .7rem;
@@ -409,10 +415,10 @@
   color: var(--v5-text);
 }
 .v5-modal-body {
-  font-size: var(--v5-fs-body-sm);
+  font-size: var(--v5-fs-body);
   color: var(--v5-text-sec);
   line-height: 1.55;
-  margin-bottom: 1rem;
+  margin-bottom: 1.1rem;
 }
 .v5-modal-body b { color: var(--v5-text); font-weight: var(--v5-fw-bold); }
 .v5-modal-foot {

frontend/styles/v5-layout.css

@@ -220,7 +220,7 @@ html:not(.dark) .v5-hdr{
 .v5-hdr-logo{font-size:1.05rem;font-weight:900;letter-spacing:-.03em;
   background:linear-gradient(135deg,var(--v5-primary),var(--v5-cyan));-webkit-background-clip:text;
   -webkit-text-fill-color:transparent;background-clip:text;cursor:default;}
-.v5-hdr-bc{font-size:.72rem;color:var(--v5-text-muted);}
+.v5-hdr-bc{font-size:.8125rem;color:var(--v5-text-muted);}
 .v5-hdr-bc b{color:var(--v5-text);font-weight:600;}
 .v5-hdr-r{display:flex;align-items:center;gap:.65rem;}
 
@@ -479,8 +479,8 @@ html:not(.dark) .v5-side{
   transition:opacity .3s,height .3s,padding .3s;}
 .v5-side-sec:first-child{padding-top:.25rem;}
 
-.v5-si{padding:.5rem .7rem;border-radius:10px;font-size:.77rem;color:var(--v5-text-sec);cursor:pointer;
-  transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:450;display:flex;align-items:center;gap:.6rem;
+.v5-si{padding:.55rem .75rem;border-radius:10px;font-size:.8125rem;color:var(--v5-text-sec);cursor:pointer;
+  transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:500;display:flex;align-items:center;gap:.6rem;
   position:relative;overflow:hidden;height:auto;}
 .v5-si .ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;opacity:.65;flex-shrink:0;}
 .v5-si:hover{background:var(--v5-surface-hover);color:var(--v5-text);transform:translateX(2px);}