From 3f481acd8e790983ef1e6feda0bcea2b366664e9 Mon Sep 17 00:00:00 2001 From: "Claude (gbpark)" Date: Wed, 22 Apr 2026 22:02:45 +0900 Subject: [PATCH] =?UTF-8?q?UI=20Phase=20A=20=E2=80=94=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=81=AC=EA=B8=B0/=ED=8F=B0=ED=8A=B8=20?= =?UTF-8?q?=EC=83=81=ED=96=A5,=20UPPERCASE=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- frontend/styles/v5-atomics.css | 86 ++++++++++++++++++---------------- frontend/styles/v5-layout.css | 6 +-- 2 files changed, 49 insertions(+), 43 deletions(-) diff --git a/frontend/styles/v5-atomics.css b/frontend/styles/v5-atomics.css index 79c11d29..5302fa4d 100644 --- a/frontend/styles/v5-atomics.css +++ b/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 { diff --git a/frontend/styles/v5-layout.css b/frontend/styles/v5-layout.css index 108098b0..253cad6a 100644 --- a/frontend/styles/v5-layout.css +++ b/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);}