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

4
apps/web/e2e/auth-visual.spec.ts
View file

@ -23,13 +23,11 @@ async function expectGlassSurface(page: Page, selector: string) {
const style = getComputedStyle(element); const style = getComputedStyle(element);
return { return {
backgroundImage: style.backgroundImage, backgroundImage: style.backgroundImage,
backdropFilter: style.backdropFilter || style.webkitBackdropFilter,
borderColor: style.borderColor, borderColor: style.borderColor,
boxShadow: style.boxShadow, boxShadow: style.boxShadow,
}; };
}); });
expect(surface.backgroundImage.match(/linear-gradient/g)?.length ?? 0).toBeGreaterThanOrEqual(2); expect(surface.backgroundImage.match(/linear-gradient/g)?.length ?? 0).toBeGreaterThanOrEqual(1);
expect(surface.backdropFilter).toContain("blur(");
expect(surface.borderColor).not.toBe("rgba(0, 0, 0, 0)"); expect(surface.borderColor).not.toBe("rgba(0, 0, 0, 0)");
expect(surface.boxShadow).not.toBe("none"); expect(surface.boxShadow).not.toBe("none");
} }

4
apps/web/e2e/layout-visual-gate.spec.ts
View file

@ -547,8 +547,6 @@ test.describe("layout visual gate @single-run", () => {
}); });
expect(lightAssets.card).toContain("card-leaf-sprig-light.png"); expect(lightAssets.card).toContain("card-leaf-sprig-light.png");
expect(lightAssets.cardSurface).not.toBeNull(); expect(lightAssets.cardSurface).not.toBeNull();
expect(lightAssets.cardSurface!.backgroundImage.match(/linear-gradient/g)?.length ?? 0).toBeGreaterThanOrEqual(2);
expect(lightAssets.cardSurface!.backdropFilter).toContain("blur(");
expect(lightAssets.cardSurface!.boxShadow).not.toBe("none"); expect(lightAssets.cardSurface!.boxShadow).not.toBe("none");
expect(lightAssets.shellBody).toContain("background-light-corner.png"); expect(lightAssets.shellBody).toContain("background-light-corner.png");
expect(lightAssets.nav).toContain("background-light-sidebar.png"); expect(lightAssets.nav).toContain("background-light-sidebar.png");
@ -615,7 +613,7 @@ test.describe("layout visual gate @single-run", () => {
borderRadius: style.borderRadius, borderRadius: style.borderRadius,
}; };
}); });
expect(insetSurface).toEqual({ borderTopWidth: "0px", borderRadius: "0px" }); expect(insetSurface).toEqual({ borderTopWidth: "1px", borderRadius: "6px" });
await page.screenshot({ await page.screenshot({
path: path.join(SHOT_DIR, "session-prestart__1280-reference-light.png"), path: path.join(SHOT_DIR, "session-prestart__1280-reference-light.png"),
fullPage: true, fullPage: true,

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 { body[data-role] .vg-shell--botanical .vg-topbar {
height: var(--topbar-h); 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); border-bottom-color: var(--botanical-hair);
color: var(--text-strong); color: var(--text-strong);
-webkit-backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
} }
[data-theme="dark"] body[data-role] .vg-shell--botanical .vg-topbar { [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__wm,
body[data-role] .vg-shell--botanical .vg-topbar__role, 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) { body[data-role] .vg-shell--botanical .vg-shell__body:not(.vg-shell__body--bare) {
--nav-cur: var(--nav-w); --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: background-image:
linear-gradient(var(--botanical-hair), var(--botanical-hair)), 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 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) 13%, transparent), transparent 42rem), radial-gradient(circle at 42% 72%, color-mix(in srgb, var(--botanical-gold) 9%, transparent), transparent 42rem),
var(--asset-botanical-corner), var(--asset-botanical-corner),
radial-gradient(circle at 76% 10%, var(--botanical-glow), transparent 30rem); radial-gradient(circle at 76% 10%, var(--botanical-glow), transparent 30rem);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -547,12 +547,10 @@ body[data-role] .vg-shell--botanical .vg-nav {
top: auto; top: auto;
padding: var(--sp-5) var(--sp-3); padding: var(--sp-5) var(--sp-3);
background: 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, 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); 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__label,
body[data-role] .vg-shell--botanical .vg-nav__ethic { 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-bottom: 0;
border-right: 0; border-right: 0;
border-left: 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); box-shadow: var(--shadow-island);
-webkit-backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
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 ── */ /* ── Surface SSOT ── */
.vg-surface.vg-surface--panel { .vg-surface.vg-surface--panel {
background: var(--glass-specular), var(--glass-surface); background: var(--glass-surface);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: var(--radius); border-radius: var(--radius-lg);
box-shadow: var(--glass-edge-shadow), var(--glass-shadow); box-shadow: var(--glass-shadow);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
} }
.vg-surface.vg-surface--inset { .vg-surface.vg-surface--inset {
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface-2);
border: 0; border: 1px solid var(--border-subtle);
border-radius: 0; border-radius: var(--radius-sm);
box-shadow: var(--glass-inset-shadow); box-shadow: var(--glass-inset-shadow);
-webkit-backdrop-filter: blur(12px) saturate(110%);
backdrop-filter: blur(12px) saturate(110%);
} }
.vg-surface.vg-surface--interactive { .vg-surface.vg-surface--interactive {
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface);
border: 1px solid var(--glass-inset-border); border: 1px solid var(--border-subtle);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--glass-inset-shadow); box-shadow: var(--shadow-sm);
-webkit-backdrop-filter: blur(12px) saturate(110%);
backdrop-filter: blur(12px) saturate(110%);
transition: transition:
background var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out),
border-color 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); transform var(--dur-fast) var(--ease-out);
} }
.vg-surface.vg-surface--interactive:hover { .vg-surface.vg-surface--interactive:hover {
border-color: color-mix(in srgb, var(--accent) 48%, var(--glass-border)); 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 { .vg-surface.vg-surface--interactive:focus-visible {
outline: 3px solid var(--focus-ring); outline: 3px solid var(--focus-ring);
outline-offset: 2px; outline-offset: 2px;

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

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

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

@ -780,12 +780,11 @@
z-index: 3; z-index: 3;
height: 42px; height: 42px;
padding-block: 6px; 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); color: var(--text-muted);
font-weight: 700; font-weight: 700;
white-space: nowrap; white-space: nowrap;
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
} }
.vgops-user-table tbody tr { .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 { .vg-shell--learner-dashboard .lh-head__status {
border-color: var(--lh-botanical-hair); border-color: var(--lh-botanical-hair);
background: var(--glass-surface-inset); background: var(--bg-surface-2);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 62%, transparent); box-shadow: none;
backdrop-filter: blur(10px);
} }
.vg-shell--learner-dashboard .lh-dashboard-status { .vg-shell--learner-dashboard .lh-dashboard-status {
gap: 12px; gap: 12px;

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

@ -130,8 +130,6 @@
border: 1px solid var(--auth-hero-border); border: 1px solid var(--auth-hero-border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--auth-hero-surface); 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); color: var(--auth-hero-muted);
font-size: 13px; font-size: 13px;
} }

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

@ -126,10 +126,9 @@
gap: 12px; gap: 12px;
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: var(--radius); border-radius: var(--radius);
background: var(--glass-specular), var(--glass-surface-strong); background: var(--glass-surface-strong);
color: var(--text-body); color: var(--text-body);
box-shadow: var(--glass-edge-shadow), var(--glass-shadow); box-shadow: var(--shadow-sm);
backdrop-filter: blur(12px);
min-width: 0; min-width: 0;
box-sizing: border-box; box-sizing: border-box;
} }
@ -149,9 +148,9 @@
.sx-sessionbar__toggle-btn { .sx-sessionbar__toggle-btn {
min-height: 36px; min-height: 36px;
padding: 6px 12px; padding: 6px 12px;
border: 1px solid var(--glass-inset-border); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface-2);
color: var(--text-strong); color: var(--text-strong);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -173,9 +172,9 @@
.sx-sessionbar button { .sx-sessionbar button {
min-height: 44px; /* 터치 타깃 44×44 (WCAG 2.5.5 / 플랫폼 HIG) */ min-height: 44px; /* 터치 타깃 44×44 (WCAG 2.5.5 / 플랫폼 HIG) */
padding: 7px 12px; padding: 7px 12px;
border: 1px solid var(--glass-inset-border); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface-2);
color: var(--text-strong); color: var(--text-strong);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -450,7 +449,6 @@
padding: 18px 4px; padding: 18px 4px;
cursor: pointer; cursor: pointer;
transition: all var(--dur-fast) var(--ease-spring); transition: all var(--dur-fast) var(--ease-spring);
backdrop-filter: blur(12px);
} }
.sx-mini-rail-btn:hover { .sx-mini-rail-btn:hover {
@ -1021,9 +1019,9 @@
width: min(100%, 600px); width: min(100%, 600px);
max-width: calc(100% - 48px); max-width: calc(100% - 48px);
padding: 7px 10px; padding: 7px 10px;
border: 1px solid var(--glass-inset-border); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface-2);
color: var(--text-strong); color: var(--text-strong);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
@ -1471,7 +1469,7 @@
} }
.sx-coach-trigger-btn__badge.is-empty { .sx-coach-trigger-btn__badge.is-empty {
background: var(--neutral-400); background: var(--neutral-400);
color: #fff; color: var(--text-on-accent);
} }
/* ── AI 코칭 버블 팝업 ── */ /* ── AI 코칭 버블 팝업 ── */
@ -1484,11 +1482,7 @@
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-strong)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-strong));
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: box-shadow: var(--shadow-float);
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);
z-index: 120; z-index: 120;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1625,7 +1619,7 @@
padding: 8px 12px; padding: 8px 12px;
font-size: 13px; font-size: 13px;
line-height: 1.45; line-height: 1.45;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-sm);
} }
.sx-coach-msg--coach, .sx-coach-msg--coach,
@ -1642,7 +1636,7 @@
font-size: 13px; font-size: 13px;
line-height: 1.45; line-height: 1.45;
color: var(--text-strong); color: var(--text-strong);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: var(--shadow-sm);
} }
.sx-coach-msg__avatar { .sx-coach-msg__avatar {
@ -1938,9 +1932,9 @@
display: grid; display: grid;
gap: 2px; gap: 2px;
padding: 7px 8px; padding: 7px 8px;
border: 1px solid var(--glass-inset-border); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface-2);
} }
.sx-signal__status b { .sx-signal__status b {
color: var(--text-body); color: var(--text-body);
@ -2037,8 +2031,8 @@
position: absolute; position: absolute;
inset: 6px; inset: 6px;
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--glass-inset-border); border: 1px solid var(--border-subtle);
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface-2);
} }
.sx-coach-avatar__face { .sx-coach-avatar__face {
position: absolute; position: absolute;
@ -2662,8 +2656,8 @@
.sx-page--active .sx-signal__rest, .sx-page--active .sx-signal__rest,
.sx-page--active .sx-mobile-context__row span, .sx-page--active .sx-mobile-context__row span,
.sx-page--active .sx-mobile-context__brief span { .sx-page--active .sx-mobile-context__brief span {
background: var(--glass-specular-inset), var(--glass-surface-inset); background: var(--bg-surface-2);
border-color: var(--glass-inset-border); border-color: var(--border-subtle);
color: var(--text-body); color: var(--text-body);
} }
.sx-page--active .sx-chip.is-clay, .sx-page--active .sx-chip.is-clay,
@ -3958,7 +3952,7 @@
display: grid; display: grid;
gap: 5px; gap: 5px;
padding: 12px 0; padding: 12px 0;
border-top: 1px solid var(--glass-inset-border); border-top: 1px solid var(--border-subtle);
} }
.sx-prestart__plan-list dt { .sx-prestart__plan-list dt {
color: var(--accent-deep); color: var(--accent-deep);
@ -3998,7 +3992,6 @@
border-radius: calc(var(--radius-lg) - 2px); border-radius: calc(var(--radius-lg) - 2px);
background: background:
linear-gradient(135deg, color-mix(in srgb, var(--text-strong) 8%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); 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); 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 { body[data-page="settings"] .vg-set__seg {
grid-template-columns: repeat(4, minmax(0, 1fr)); 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 { body[data-page="settings"] .vg-set__seg-btn.is-active {
background: var(--accent); background: var(--accent);
@ -1532,7 +1532,7 @@ body[data-page="settings"] .vg-set__ticket-note {
gap: 4px; gap: 4px;
padding: 9px 10px; padding: 9px 10px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--glass-surface-inset); background: var(--bg-surface-2);
color: var(--text-body); color: var(--text-body);
font-size: var(--fs-xs); font-size: var(--fs-xs);
line-height: 1.55; line-height: 1.55;
@ -1579,7 +1579,7 @@ body[data-page="settings"] .vg-set__foot {
padding-top: 12px; padding-top: 12px;
} }
body[data-page="settings"] .vg-set__pill { body[data-page="settings"] .vg-set__pill {
background: var(--glass-surface-inset); background: var(--bg-surface-2);
} }
/* 721~1080px 구간을 상단 가로 탭으로 접는다. /* 721~1080px 구간을 상단 가로 탭으로 접는다.

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

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