테마 적용

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 커스텀 프로퍼티로 제어한다.