테마 적용

src/styles/builder.css

@@ -28,6 +28,9 @@
   --pb-color-text-accent: #38bdf8;  /* sky-400 */
   --pb-color-text-danger: #f97373;  /* red-400 근처 */
 
+  /* Form input border 기본 색상 (플로팅 라벨 패치 등에서 재사용) */
+  --pb-color-input-border: #4b5563; /* slate-600 근처 */
+
   /* Text max width */
   --pb-text-maxw-prose: 60ch;
   --pb-text-maxw-narrow: 40ch;
@@ -150,7 +153,7 @@ body {
 
 /* Text color palette */
 .pb-text-color-default {
-  color: var(--pb-color-text-default);
+  color: inherit;
 }
 .pb-text-color-muted {
   color: var(--pb-color-text-muted);
@@ -433,6 +436,8 @@ body {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  /* 플로팅 라벨 패치가 참조하는 입력 테두리 색 기본값 */
+  --pb-input-border-color: var(--pb-color-input-border);
 }
 
 .pb-form-field--floating {
@@ -449,10 +454,9 @@ body {
   top: calc(var(--pb-input-padding-y) + 0.3rem);
   left: 0.75rem;
   font-size: 0.75rem;
-  color: #9ca3af;
   pointer-events: none;
   transform-origin: left top;
-  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
+  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease, background 0.3s ease;
 }
 
 .pb-form-field--floating .pb-input,
@@ -470,16 +474,22 @@ body {
 .pb-form-field--floating .pb-input:not(:placeholder-shown) ~ .pb-form-label,
 .pb-form-field--floating .pb-textarea:focus ~ .pb-form-label,
 .pb-form-field--floating .pb-textarea:not(:placeholder-shown) ~ .pb-form-label {
-  top: -0.3rem; /* 인풋 상단 보더에 살짝 겹치는 정도로만 띄운다. */
+  top: -0.425rem; /* 인풋 상단 보더에 살짝 겹치는 정도로만 띄운다. */
   font-size: 0.725rem;
-  color: #e5e7eb;
-  background-color: #020617; /* 인풋 배경과 맞춰서 보더 라인을 자연스럽게 가린다. */
-  padding: 0 0.25rem;
+  padding: 0.25rem 1.725rem;
+  color: #bbf7d0;
+  /* 필드 테두리 색(또는 기본값)을 사용해 라벨 뒤에 부드러운 패치를 그린다.
+     가운데는 var(--pb-input-border-color), 양 끝은 투명으로 페이드되도록 설정한다. */
+  background: radial-gradient(
+    ellipse closest-side,
+    var(--pb-input-border-color) 70%,
+    transparent
+  );
+  background-repeat: no-repeat;
 }
 
 .pb-form-label {
   font-size: 0.75rem;
-  color: #e5e7eb;
 }
 
 .pb-form-options {
@@ -501,20 +511,17 @@ body {
   align-items: center;
   gap: 0.25rem;
   font-size: 0.75rem;
-  color: #e5e7eb;
 }
 
 .pb-input,
 .pb-select,
 .pb-textarea {
   width: 100%;
+  border: 1px solid var(--pb-color-input-border);
   border-radius: 0.375rem;
-  border: 1px solid #1f2937;
-  background-color: #020617;
   /* 세로 패딩은 CSS 변수로 정의해 플로팅 라벨/에디터 등이 함께 참조할 수 있게 한다. */
   padding: var(--pb-input-padding-y, 0.5rem) 0.75rem;
   font-size: 0.75rem;
-  color: #e5e7eb;
   box-sizing: border-box;
 }
 
@@ -534,7 +541,6 @@ body {
   padding-left: 1.25rem;
   font-size: 0.875rem;
   line-height: var(--pb-leading-normal);
-  color: var(--pb-color-text-default);
 }
 
 /* 리스트 아이템 간 여백은 --pb-list-gap 커스텀 프로퍼티로 제어한다.

src/styles/editor.css

@@ -8,3 +8,58 @@
 /* 초기 상태에서는 별도 규칙 없이 파일만 생성해 두고,
  * 이후 에디터 전용 레이아웃/패널 스타일을 점진적으로 이동시킨다.
  */
+
+/*
+ * 에디터/프리뷰용 스크롤바 테마
+ * - .pb-scroll 클래스를 사용하는 컨테이너에서 라이트/다크 테마에 맞는 스크롤바 색상을 적용한다.
+ * - builder.css 의 .pb-scroll 기본값은 다크 톤이므로, 여기서는 Tailwind dark 모드(html.dark)를 기준으로
+ *   라이트/다크 테마별로 명시적으로 override 한다.
+ */
+
+/* 라이트 모드: 밝은 배경에 어울리는 연한 스크롤바 */
+html:not(.dark) .pb-scroll {
+	scrollbar-width: thin;
+	scrollbar-color: #94a3b8 #e5e7eb; /* thumb / track */
+}
+
+html:not(.dark) .pb-scroll::-webkit-scrollbar {
+	width: 8px;
+}
+
+html:not(.dark) .pb-scroll::-webkit-scrollbar-track {
+	background-color: #e5e7eb; /* slate-200 */
+}
+
+html:not(.dark) .pb-scroll::-webkit-scrollbar-thumb {
+	background-color: #94a3b8; /* slate-400 */
+	border-radius: 9999px;
+	border: 2px solid #e5e7eb;
+}
+
+html:not(.dark) .pb-scroll::-webkit-scrollbar-thumb:hover {
+	background-color: #64748b; /* slate-500 */
+}
+
+/* 다크 모드: 기존 builder.css 톤과 유사한 다크 스크롤바 */
+html.dark .pb-scroll {
+	scrollbar-width: thin;
+	scrollbar-color: #1f2937 #020617; /* thumb / track */
+}
+
+html.dark .pb-scroll::-webkit-scrollbar {
+	width: 8px;
+}
+
+html.dark .pb-scroll::-webkit-scrollbar-track {
+	background-color: #020617; /* slate-950 */
+}
+
+html.dark .pb-scroll::-webkit-scrollbar-thumb {
+	background-color: #1f2937; /* slate-800 */
+	border-radius: 9999px;
+	border: 2px solid #020617;
+}
+
+html.dark .pb-scroll::-webkit-scrollbar-thumb:hover {
+	background-color: #374151; /* slate-700 */
+}

src/styles/globals.css

@@ -1,3 +1,4 @@
+@config "../../tailwind.config.js";
 @import "tailwindcss";
 
 html,