From 15c74ae26cff01336be974b5a7f605d352ca55b6 Mon Sep 17 00:00:00 2001
From: gbpark <puget159@gmail.com>
Date: Wed, 22 Apr 2026 00:12:53 +0900
Subject: [PATCH] =?UTF-8?q?=EB=9D=BC=EC=9D=B4=ED=8A=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EC=83=89=EC=83=81=20=ED=86=A4=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 패널/카드 배경을 솔리드 흰색으로 변경
- 캔버스/카드/보더 대비 강화
- v5 본문 라벤더 그라데이션 제거, 흰색 + 우측 보더 분리

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/styles/builder-ide.css | 39 +++++++++++++++++----------------
 frontend/styles/v5-layout.css   |  5 ++---
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/styles/builder-ide.css b/frontend/styles/builder-ide.css
index 7a4e5dd4..070e0543 100644
--- a/frontend/styles/builder-ide.css
+++ b/frontend/styles/builder-ide.css
@@ -17,28 +17,28 @@
 
 /* ─── 라이트 모드 ─── */
 .ide-builder {
-  /* 배경 f5f5f8 */
-  --background: 240 12% 97%;
-  /* 카드 (패널) ededf2 */
-  --card: 240 13% 94%;
+  /* 배경 e8e8ef — 캔버스. 카드보다 확실히 어둡게 해서 패널이 도드라지게 */
+  --background: 240 13% 92%;
+  /* 카드 (패널) #ffffff — v5 솔리드 흰색 */
+  --card: 0 0% 100%;
   --card-foreground: 240 17% 12%;
-  /* 팝오버 ededf2 */
-  --popover: 240 13% 94%;
+  /* 팝오버 #ffffff */
+  --popover: 0 0% 100%;
   --popover-foreground: 240 17% 12%;
   /* 전경 1a1a24 */
   --foreground: 240 17% 12%;
-  /* muted e4e4ec / 5a5a6e */
-  --muted: 240 12% 91%;
+  /* muted dedde6 / 5a5a6e — 캔버스와 카드 사이 톤 */
+  --muted: 240 12% 88%;
   --muted-foreground: 240 10% 39%;
-  /* accent (hover 배경) e4e4ec */
-  --accent: 240 12% 91%;
+  /* accent (hover 배경) dedde6 */
+  --accent: 240 12% 88%;
   --accent-foreground: 240 17% 12%;
-  /* secondary ededf2 */
-  --secondary: 240 13% 94%;
+  /* secondary f4f4f8 */
+  --secondary: 240 13% 96%;
   --secondary-foreground: 240 17% 12%;
-  /* 보더 d8d8e2 */
-  --border: 240 13% 87%;
-  --input: 240 13% 87%;
+  /* 보더 c9c9d6 — 대비 강화 */
+  --border: 240 13% 81%;
+  --input: 240 13% 81%;
   /* 액센트 (primary) #6c5ce7 — v5 Cosmic 보라 */
   --primary: 249 75% 63%;
   --primary-foreground: 0 0% 100%;
@@ -47,13 +47,13 @@
   --destructive: 0 73% 51%;
   --destructive-foreground: 0 0% 100%;
   /* 사이드바 (패널 안의 보조 영역) */
-  --sidebar-background: 240 13% 94%;
+  --sidebar-background: 0 0% 100%;
   --sidebar-foreground: 240 17% 12%;
   --sidebar-primary: 249 75% 63%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 12% 91%;
+  --sidebar-accent: 240 12% 88%;
   --sidebar-accent-foreground: 240 17% 12%;
-  --sidebar-border: 240 13% 87%;
+  --sidebar-border: 240 13% 81%;
   --sidebar-ring: 249 75% 63%;
   /* 반경을 살짝 더 타이트하게 — IDE 느낌 */
   --radius: 0.375rem;
@@ -1039,7 +1039,8 @@
   height: 100%;
   width: 260px;
   background: hsl(var(--card));
-  border-right: 1px solid hsl(var(--border) / 0.35);
+  border-right: 1px solid hsl(var(--border));
+  box-shadow: 1px 0 0 0 hsl(var(--border) / 0.4);
   overflow: hidden;
   animation: slide-in-left 0.2s ease;
 }
diff --git a/frontend/styles/v5-layout.css b/frontend/styles/v5-layout.css
index d0fa56fa..8f1e6855 100644
--- a/frontend/styles/v5-layout.css
+++ b/frontend/styles/v5-layout.css
@@ -463,9 +463,8 @@ html:not(.dark) .v5-hdr{
 
 /* ===== GLASS SIDEBAR ===== */
 .v5-body{display:flex;flex:1;overflow:hidden;position:relative;z-index:5;}
-/* Light mode: 본문 영역에 옅은 라벤더 톤 깔아 헤더/사이드바 흰색과 분리 */
-html:not(.dark) .v5-body{
-  background:linear-gradient(135deg,#e8e1f5 0%,#ede6f7 35%,#e6dff3 70%,#e0d8ee 100%);}
+/* Light mode: 본문 영역은 흰색. 사이드바 우측 border 가 분리 역할 담당 */
+html:not(.dark) .v5-body{background:#ffffff;}
 .v5-side{width:var(--v5-sidebar-w);background:var(--v5-surface-solid);
   border-right:1px solid var(--v5-border);
   padding:.85rem .6rem;overflow-y:auto;display:flex;flex-direction:column;gap:1px;flex-shrink:0;}