From cc0a15b7c6a156cd4b1dc7283a35eb1edc44226e Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Sun, 23 Aug 2026 21:48:54 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=80=EB=9E=98=EC=8A=A4=20=ED=9A=A8?=
 =?UTF-8?q?=EA=B3=BC=20=EC=B6=95=EC=86=8C=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8C=A8=EC=8A=A4=EC=99=80=20=EB=B9=84=EC=A3=BC=EC=96=BC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=99=20=EA=B3=84=EC=95=BD=20=EA=B0=B1=EC=8B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 카드/서피스 그라디언트 2→1층, backdrop blur 제거, 인셋 보더(1px/6px) 복원으로
  시각 잡음을 줄이는 디자인 조정(shell/ui/session/settings/learner-home/login/admin 토큰)
- auth-visual·layout-visual-gate 스펙을 새 비주얼 계약에 맞게 갱신(어설션 약화 아닌 계약 반영)
- 검증: tsc -b PASS, 핀 증거 PNG는 HEAD로 원복해 제외
---
 apps/web/e2e/auth-visual.spec.ts           |  4 +-
 apps/web/e2e/layout-visual-gate.spec.ts    |  4 +-
 apps/web/src/components/shell/shell.css    | 20 +++++-----
 apps/web/src/components/ui/ui.css          | 32 +++++++--------
 apps/web/src/pages/admin/admin-ai.css      | 10 ++---
 apps/web/src/pages/admin/admin-console.css |  5 +--
 apps/web/src/pages/learner-home.css        |  5 +--
 apps/web/src/pages/login/login.css         |  2 -
 apps/web/src/pages/session/session.css     | 45 +++++++++-------------
 apps/web/src/pages/settings/settings.css   |  6 +--
 apps/web/src/styles/tokens.css             | 44 ++++++++++-----------
 11 files changed, 77 insertions(+), 100 deletions(-)

diff --git a/apps/web/e2e/auth-visual.spec.ts b/apps/web/e2e/auth-visual.spec.ts
index 549df91..efad025 100644
--- a/apps/web/e2e/auth-visual.spec.ts
+++ b/apps/web/e2e/auth-visual.spec.ts
@@ -23,13 +23,11 @@ async function expectGlassSurface(page: Page, selector: string) {
     const style = getComputedStyle(element);
     return {
       backgroundImage: style.backgroundImage,
-      backdropFilter: style.backdropFilter || style.webkitBackdropFilter,
       borderColor: style.borderColor,
       boxShadow: style.boxShadow,
     };
   });
-  expect(surface.backgroundImage.match(/linear-gradient/g)?.length ?? 0).toBeGreaterThanOrEqual(2);
-  expect(surface.backdropFilter).toContain("blur(");
+  expect(surface.backgroundImage.match(/linear-gradient/g)?.length ?? 0).toBeGreaterThanOrEqual(1);
   expect(surface.borderColor).not.toBe("rgba(0, 0, 0, 0)");
   expect(surface.boxShadow).not.toBe("none");
 }
diff --git a/apps/web/e2e/layout-visual-gate.spec.ts b/apps/web/e2e/layout-visual-gate.spec.ts
index 6e67cad..9cb68fa 100644
--- a/apps/web/e2e/layout-visual-gate.spec.ts
+++ b/apps/web/e2e/layout-visual-gate.spec.ts
@@ -547,8 +547,6 @@ test.describe("layout visual gate @single-run", () => {
     });
     expect(lightAssets.card).toContain("card-leaf-sprig-light.png");
     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.shellBody).toContain("background-light-corner.png");
     expect(lightAssets.nav).toContain("background-light-sidebar.png");
@@ -615,7 +613,7 @@ test.describe("layout visual gate @single-run", () => {
         borderRadius: style.borderRadius,
       };
     });
-    expect(insetSurface).toEqual({ borderTopWidth: "0px", borderRadius: "0px" });
+    expect(insetSurface).toEqual({ borderTopWidth: "1px", borderRadius: "6px" });
     await page.screenshot({
       path: path.join(SHOT_DIR, "session-prestart__1280-reference-light.png"),
       fullPage: true,
diff --git a/apps/web/src/components/shell/shell.css b/apps/web/src/components/shell/shell.css
index 7d1bd93..1bfea49 100644
--- a/apps/web/src/components/shell/shell.css
+++ b/apps/web/src/components/shell/shell.css
@@ -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);
diff --git a/apps/web/src/components/ui/ui.css b/apps/web/src/components/ui/ui.css
index 4c2d87c..5de5c32 100644
--- a/apps/web/src/components/ui/ui.css
+++ b/apps/web/src/components/ui/ui.css
@@ -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;
diff --git a/apps/web/src/pages/admin/admin-ai.css b/apps/web/src/pages/admin/admin-ai.css
index 4210e54..b6d8ff0 100644
--- a/apps/web/src/pages/admin/admin-ai.css
+++ b/apps/web/src/pages/admin/admin-ai.css
@@ -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 {
diff --git a/apps/web/src/pages/admin/admin-console.css b/apps/web/src/pages/admin/admin-console.css
index 4ffc294..afcc891 100644
--- a/apps/web/src/pages/admin/admin-console.css
+++ b/apps/web/src/pages/admin/admin-console.css
@@ -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 {
diff --git a/apps/web/src/pages/learner-home.css b/apps/web/src/pages/learner-home.css
index 76d9363..b41fc3f 100644
--- a/apps/web/src/pages/learner-home.css
+++ b/apps/web/src/pages/learner-home.css
@@ -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;
diff --git a/apps/web/src/pages/login/login.css b/apps/web/src/pages/login/login.css
index 2261978..8924182 100644
--- a/apps/web/src/pages/login/login.css
+++ b/apps/web/src/pages/login/login.css
@@ -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;
 }
diff --git a/apps/web/src/pages/session/session.css b/apps/web/src/pages/session/session.css
index 64cf4b8..b5fcf82 100644
--- a/apps/web/src/pages/session/session.css
+++ b/apps/web/src/pages/session/session.css
@@ -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);
 }
 
diff --git a/apps/web/src/pages/settings/settings.css b/apps/web/src/pages/settings/settings.css
index 5a4c288..8a98de9 100644
--- a/apps/web/src/pages/settings/settings.css
+++ b/apps/web/src/pages/settings/settings.css
@@ -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 구간을 상단 가로 탭으로 접는다.
diff --git a/apps/web/src/styles/tokens.css b/apps/web/src/styles/tokens.css
index 878da17..d0dc4fe 100644
--- a/apps/web/src/styles/tokens.css
+++ b/apps/web/src/styles/tokens.css
@@ -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;