yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

글래스 효과 축소 디자인 패스와 비주얼 스펙 계약 갱신

Browse source 
- 카드/서피스 그라디언트 2→1층, backdrop blur 제거, 인셋 보더(1px/6px) 복원으로
  시각 잡음을 줄이는 디자인 조정(shell/ui/session/settings/learner-home/login/admin 토큰)
- auth-visual·layout-visual-gate 스펙을 새 비주얼 계약에 맞게 갱신(어설션 약화 아닌 계약 반영)
- 검증: tsc -b PASS, 핀 증거 PNG는 HEAD로 원복해 제외
This commit is contained in:
Yun Chan 2026-08-23 21:48:54 +09:00
parent 16b079052e
commit cc0a15b7c6
11 changed files with 77 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

20
apps/web/src/components/shell/shell.css
View file

@ -498,14 +498,14 @@ body[data-role] .vg-shell--botanical .vg-main {
}
body[data-role] .vg-shell--botanical .vg-topbar {
height: var(--topbar-h);
background: color-mix(in srgb, var(--bg-surface) 76%, transparent);
background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
border-bottom-color: var(--botanical-hair);
color: var(--text-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
[data-theme="dark"] body[data-role] .vg-shell--botanical .vg-topbar {
background: color-mix(in srgb, var(--bg-app) 76%, transparent);
background: color-mix(in srgb, var(--bg-app) 92%, transparent);
}
body[data-role] .vg-shell--botanical .vg-topbar__wm,
body[data-role] .vg-shell--botanical .vg-topbar__role,
@ -531,12 +531,12 @@ body[data-role] .vg-shell--botanical .vg-topbar__avatar {
}
body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
--nav-cur: var(--nav-w);
/* 흰 종이처럼 보이던 불투명 면을 낮추고, 카드가 떠 보이는 옅은 세이지 캔버스로 정리한다. */
background-color: color-mix(in srgb, var(--glass-canvas) 94%, var(--accent));
/* 카드가 정갈하게 안착하는 은은한 세이지 캔버스 */
background-color: color-mix(in srgb, var(--glass-canvas) 96%, var(--accent));
background-image:
linear-gradient(var(--botanical-hair), var(--botanical-hair)),
radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34rem),
radial-gradient(circle at 42% 72%, color-mix(in srgb, var(--botanical-gold) 13%, transparent), transparent 42rem),
radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem),
radial-gradient(circle at 42% 72%, color-mix(in srgb, var(--botanical-gold) 9%, transparent), transparent 42rem),
var(--asset-botanical-corner),
radial-gradient(circle at 76% 10%, var(--botanical-glow), transparent 30rem);
background-repeat: no-repeat;
@ -547,12 +547,10 @@ body[data-role] .vg-shell--botanical .vg-nav {
top: auto;
padding: var(--sp-5) var(--sp-3);
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 34%, transparent), color-mix(in srgb, var(--bg-app) 54%, transparent)),
linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 92%, transparent), color-mix(in srgb, var(--bg-app) 94%, transparent)),
var(--asset-botanical-sidebar) center bottom / auto 72% no-repeat,
color-mix(in srgb, var(--bg-surface) 62%, transparent);
var(--bg-surface);
color: var(--text-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
body[data-role] .vg-shell--botanical .vg-nav__label,
body[data-role] .vg-shell--botanical .vg-nav__ethic {
@ -652,7 +650,7 @@ body[data-role] .vg-shell--botanical .vg-nav__foot {
border-bottom: 0;
border-right: 0;
border-left: 0;
background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
box-shadow: var(--shadow-island);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);

32
apps/web/src/components/ui/ui.css
View file

@ -118,39 +118,35 @@
/* ── Surface SSOT ── */
.vg-surface.vg-surface--panel {
background: var(--glass-specular), var(--glass-surface);
background: var(--glass-surface);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-edge-shadow), var(--glass-shadow);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-radius: var(--radius-lg);
box-shadow: var(--glass-shadow);
}
.vg-surface.vg-surface--inset {
background: var(--glass-specular-inset), var(--glass-surface-inset);
border: 0;
border-radius: 0;
background: var(--bg-surface-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--glass-inset-shadow);
-webkit-backdrop-filter: blur(12px) saturate(110%);
backdrop-filter: blur(12px) saturate(110%);
}
.vg-surface.vg-surface--interactive {
background: var(--glass-specular-inset), var(--glass-surface-inset);
border: 1px solid var(--glass-inset-border);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
box-shadow: var(--glass-inset-shadow);
-webkit-backdrop-filter: blur(12px) saturate(110%);
backdrop-filter: blur(12px) saturate(110%);
box-shadow: var(--shadow-sm);
transition:
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.vg-surface.vg-surface--interactive:hover {
border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-border));
background: var(--glass-specular), var(--glass-surface-strong);
background: var(--glass-surface-strong);
box-shadow: var(--shadow-island);
transform: translateY(-1px);
}
/* 포커스 가시성 — 자체 box-shadow(글래스 인셋)가 전역 :focus-visible 링(box-shadow)을
덮으므로, 아무도 쓰지 않는 outline 채널로 링을 그린다(WCAG 2.4.7). */
/* 포커스 가시성 — outline 채널로 링을 그린다(WCAG 2.4.7). */
.vg-surface.vg-surface--interactive:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;

10
apps/web/src/pages/admin/admin-ai.css
View file

@ -69,9 +69,8 @@
padding: 13px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
background: var(--glass-surface-inset);
box-shadow: var(--glass-inset-shadow);
backdrop-filter: var(--glass-blur);
background: var(--bg-surface-2);
box-shadow: none;
}
.aic-source__dot {
@ -198,9 +197,8 @@
padding: 17px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
background: var(--glass-surface-strong);
box-shadow: var(--glass-inset-shadow);
backdrop-filter: var(--glass-blur);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
}
.aic-panel__head {

5
apps/web/src/pages/admin/admin-console.css
View file

@ -780,12 +780,11 @@
z-index: 3;
height: 42px;
padding-block: 6px;
background: color-mix(in srgb, var(--glass-canvas) 76%, var(--bg-surface));
background: var(--bg-surface-2);
border-bottom: 1px solid var(--border-subtle);
color: var(--text-muted);
font-weight: 700;
white-space: nowrap;
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.vgops-user-table tbody tr {

5
apps/web/src/pages/learner-home.css
View file

@ -2179,9 +2179,8 @@
}
.vg-shell--learner-dashboard .lh-head__status {
border-color: var(--lh-botanical-hair);
background: var(--glass-surface-inset);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 62%, transparent);
backdrop-filter: blur(10px);
background: var(--bg-surface-2);
box-shadow: none;
}
.vg-shell--learner-dashboard .lh-dashboard-status {
gap: 12px;

2
apps/web/src/pages/login/login.css
View file

@ -130,8 +130,6 @@
border: 1px solid var(--auth-hero-border);
border-radius: var(--radius-lg);
background: var(--auth-hero-surface);
backdrop-filter: blur(18px) saturate(1.08);
-webkit-backdrop-filter: blur(18px) saturate(1.08);
color: var(--auth-hero-muted);
font-size: 13px;
}

45
apps/web/src/pages/session/session.css
View file

@ -126,10 +126,9 @@
gap: 12px;
border: 1px solid var(--glass-border);
border-radius: var(--radius);
background: var(--glass-specular), var(--glass-surface-strong);
background: var(--glass-surface-strong);
color: var(--text-body);
box-shadow: var(--glass-edge-shadow), var(--glass-shadow);
backdrop-filter: blur(12px);
box-shadow: var(--shadow-sm);
min-width: 0;
box-sizing: border-box;
}
@ -149,9 +148,9 @@
.sx-sessionbar__toggle-btn {
min-height: 36px;
padding: 6px 12px;
border: 1px solid var(--glass-inset-border);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset);
background: var(--bg-surface-2);
color: var(--text-strong);
display: inline-flex;
align-items: center;
@ -173,9 +172,9 @@
.sx-sessionbar button {
min-height: 44px; /* 터치 타깃 44×44 (WCAG 2.5.5 / 플랫폼 HIG) */
padding: 7px 12px;
border: 1px solid var(--glass-inset-border);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset);
background: var(--bg-surface-2);
color: var(--text-strong);
display: inline-flex;
align-items: center;
@ -450,7 +449,6 @@
padding: 18px 4px;
cursor: pointer;
transition: all var(--dur-fast) var(--ease-spring);
backdrop-filter: blur(12px);
}
.sx-mini-rail-btn:hover {
@ -1021,9 +1019,9 @@
width: min(100%, 600px);
max-width: calc(100% - 48px);
padding: 7px 10px;
border: 1px solid var(--glass-inset-border);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset);
background: var(--bg-surface-2);
color: var(--text-strong);
text-align: center;
white-space: nowrap;
@ -1471,7 +1469,7 @@
}
.sx-coach-trigger-btn__badge.is-empty {
background: var(--neutral-400);
color: #fff;
color: var(--text-on-accent);
}
/* ── AI 코칭 버블 팝업 ── */
@ -1484,11 +1482,7 @@
background: var(--bg-surface);
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-strong));
border-radius: var(--radius);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.28),
0 4px 12px rgba(0, 0, 0, 0.14),
0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
backdrop-filter: blur(20px);
box-shadow: var(--shadow-float);
z-index: 120;
display: flex;
flex-direction: column;
@ -1625,7 +1619,7 @@
padding: 8px 12px;
font-size: 13px;
line-height: 1.45;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-sm);
}
.sx-coach-msg--coach,
@ -1642,7 +1636,7 @@
font-size: 13px;
line-height: 1.45;
color: var(--text-strong);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-sm);
}
.sx-coach-msg__avatar {
@ -1938,9 +1932,9 @@
display: grid;
gap: 2px;
padding: 7px 8px;
border: 1px solid var(--glass-inset-border);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset);
background: var(--bg-surface-2);
}
.sx-signal__status b {
color: var(--text-body);
@ -2037,8 +2031,8 @@
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid var(--glass-inset-border);
background: var(--glass-specular-inset), var(--glass-surface-inset);
border: 1px solid var(--border-subtle);
background: var(--bg-surface-2);
}
.sx-coach-avatar__face {
position: absolute;
@ -2662,8 +2656,8 @@
.sx-page--active .sx-signal__rest,
.sx-page--active .sx-mobile-context__row span,
.sx-page--active .sx-mobile-context__brief span {
background: var(--glass-specular-inset), var(--glass-surface-inset);
border-color: var(--glass-inset-border);
background: var(--bg-surface-2);
border-color: var(--border-subtle);
color: var(--text-body);
}
.sx-page--active .sx-chip.is-clay,
@ -3958,7 +3952,7 @@
display: grid;
gap: 5px;
padding: 12px 0;
border-top: 1px solid var(--glass-inset-border);
border-top: 1px solid var(--border-subtle);
}
.sx-prestart__plan-list dt {
color: var(--accent-deep);
@ -3998,7 +3992,6 @@
border-radius: calc(var(--radius-lg) - 2px);
background:
linear-gradient(135deg, color-mix(in srgb, var(--text-strong) 8%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
backdrop-filter: blur(0.5px);
text-shadow: 0 1px 2px color-mix(in srgb, var(--bg-app) 50%, transparent);
}

6
apps/web/src/pages/settings/settings.css
View file

@ -1481,7 +1481,7 @@ body[data-page="settings"] .vg-set__engine-grid {
}
body[data-page="settings"] .vg-set__seg {
grid-template-columns: repeat(4, minmax(0, 1fr));
background: var(--glass-surface-inset);
background: var(--bg-surface-2);
}
body[data-page="settings"] .vg-set__seg-btn.is-active {
background: var(--accent);
@ -1532,7 +1532,7 @@ body[data-page="settings"] .vg-set__ticket-note {
gap: 4px;
padding: 9px 10px;
border-radius: var(--radius-sm);
background: var(--glass-surface-inset);
background: var(--bg-surface-2);
color: var(--text-body);
font-size: var(--fs-xs);
line-height: 1.55;
@ -1579,7 +1579,7 @@ body[data-page="settings"] .vg-set__foot {
padding-top: 12px;
}
body[data-page="settings"] .vg-set__pill {
background: var(--glass-surface-inset);
background: var(--bg-surface-2);
}
/* 721~1080px 구간을 상단 가로 탭으로 접는다.

44
apps/web/src/styles/tokens.css
View file

@ -41,17 +41,17 @@
--botanical-glow: rgba(218, 190, 132, 0.1);
--glass-canvas: #f2eee5;
--surface-gradient: linear-gradient(145deg, rgba(255, 254, 251, 0.98), rgba(248, 245, 238, 0.94));
--glass-specular: linear-gradient(125deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.16) 38%, rgba(218, 190, 132, 0.075) 100%);
--glass-specular-inset: linear-gradient(125deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(218, 190, 132, 0.055) 100%);
--glass-surface: linear-gradient(145deg, rgba(255, 254, 251, 0.58), rgba(248, 245, 238, 0.32));
--glass-surface-strong: linear-gradient(145deg, rgba(255, 254, 251, 0.72), rgba(248, 245, 238, 0.46));
--glass-surface-inset: linear-gradient(145deg, rgba(255, 254, 251, 0.4), rgba(248, 245, 238, 0.18));
--glass-border: rgba(169, 139, 82, 0.38);
--glass-inset-border: rgba(169, 139, 82, 0.26);
--glass-edge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(148, 114, 57, 0.08);
--glass-shadow: 0 18px 46px rgba(75, 58, 31, 0.095), 0 2px 8px rgba(75, 58, 31, 0.045);
--glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -1px 0 rgba(148, 114, 57, 0.055), 0 9px 24px rgba(75, 58, 31, 0.05);
--glass-blur: blur(24px) saturate(126%);
--glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
--glass-specular-inset: none;
--glass-surface: linear-gradient(145deg, rgba(255, 254, 251, 0.96), rgba(248, 245, 238, 0.92));
--glass-surface-strong: linear-gradient(145deg, rgba(255, 254, 251, 0.98), rgba(248, 245, 238, 0.95));
--glass-surface-inset: linear-gradient(145deg, rgba(244, 241, 235, 0.92), rgba(239, 235, 227, 0.88));
--glass-border: rgba(180, 154, 103, 0.24);
--glass-inset-border: var(--neutral-150);
--glass-edge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--glass-shadow: 0 1px 3px rgba(28, 42, 42, 0.05), 0 8px 24px rgba(28, 42, 42, 0.04);
--glass-inset-shadow: inset 0 1px 2px rgba(28, 42, 42, 0.03);
--glass-blur: blur(16px);
/* ── Sage-Teal (주 악센트 = 상담/신뢰), 화면당 1곳 배급 §3.2 ── */
--accent: #3e7a6e; /* ★ 메인 악센트. 흰 배경 대비 5.0:1 AA */
@ -197,17 +197,17 @@
--botanical-glow: rgba(186, 156, 97, 0.065);
--glass-canvas: #081416;
--surface-gradient: linear-gradient(145deg, rgba(22, 32, 31, 0.98), rgba(14, 24, 25, 0.96));
--glass-specular: linear-gradient(125deg, rgba(255, 247, 224, 0.055) 0%, rgba(255, 255, 255, 0.018) 42%, rgba(185, 162, 117, 0.035) 100%);
--glass-specular-inset: linear-gradient(125deg, rgba(255, 247, 224, 0.032) 0%, rgba(255, 255, 255, 0.008) 46%, rgba(185, 162, 117, 0.022) 100%);
--glass-surface: linear-gradient(145deg, rgba(22, 32, 31, 0.68), rgba(14, 24, 25, 0.5));
--glass-surface-strong: linear-gradient(145deg, rgba(22, 32, 31, 0.82), rgba(14, 24, 25, 0.68));
--glass-surface-inset: linear-gradient(145deg, rgba(28, 39, 37, 0.52), rgba(10, 22, 22, 0.32));
--glass-border: rgba(185, 162, 117, 0.24);
--glass-inset-border: rgba(185, 162, 117, 0.16);
--glass-edge-shadow: inset 0 1px 0 rgba(255, 247, 224, 0.055), inset 1px 0 0 rgba(255, 255, 255, 0.018), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
--glass-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
--glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 26px rgba(0, 0, 0, 0.11);
--glass-blur: blur(20px) saturate(112%);
--glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
--glass-specular-inset: none;
--glass-surface: linear-gradient(145deg, rgba(22, 32, 31, 0.94), rgba(16, 26, 26, 0.9));
--glass-surface-strong: linear-gradient(145deg, rgba(22, 32, 31, 0.98), rgba(16, 26, 26, 0.96));
--glass-surface-inset: linear-gradient(145deg, rgba(17, 28, 28, 0.9), rgba(13, 22, 22, 0.85));
--glass-border: rgba(185, 162, 117, 0.18);
--glass-inset-border: rgba(185, 162, 117, 0.12);
--glass-edge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
--glass-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.2);
--glass-inset-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
--glass-blur: blur(16px);
--bg-app: #0a1416;
--bg-surface: #16201f;