TDD,E2E 개선, 미적용 스타일 개선

src/styles/builder.css

@@ -201,6 +201,19 @@ body {
   white-space: pre-wrap;
 }
 
+/* Screen reader only utility (공통 sr-only 클래스) */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .pb-scroll {
   scrollbar-width: thin;
   scrollbar-color: #1f2937 #020617;
@@ -260,7 +273,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-size: 1rem;
   font-weight: 500;
   border-width: 1px;
   text-decoration: none;
@@ -421,11 +434,67 @@ body {
   gap: 0.25rem;
 }
 
+.pb-form-field--floating {
+  position: relative;
+  margin-top: 0.5rem; /* 윗쪽 엘리먼트와는 살짝만 띄우고, 간격이 너무 넓지 않도록 조정한다. */
+  /* 플로팅 라벨이 사용하는 공통 세로 패딩 기준값.
+     이 값을 변경하면 인풋 높이와 라벨 위치가 함께 조정되도록 한다. */
+  --pb-input-padding-y: 0.5rem;
+}
+
+.pb-form-field--floating .pb-form-label {
+  position: absolute;
+  /* 인풋 내부 세로 패딩을 기준으로 라벨의 기본 위치를 계산한다. */
+  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;
+}
+
+.pb-form-field--floating .pb-input,
+.pb-form-field--floating .pb-textarea {
+  margin-top: 0.25rem;
+  /* 기본 세로 패딩 + 라벨이 들어갈 여유 공간을 함께 적용한다. */
+  padding-top: calc(var(--pb-input-padding-y) + 1rem);
+  padding-bottom: var(--pb-input-padding-y);
+  /* 세로 패딩을 0으로 줄이더라도 플로팅 라벨이 지나치게 눌리지 않도록 최소 높이를 보장한다. */
+  min-height: 2.5rem;
+}
+
+/* 포커스되었거나 값이 입력되어 placeholder 가 사라진 경우, 라벨을 인풋 바깥(상단 보더 근처)으로 플로팅한다. */
+.pb-form-field--floating .pb-input:focus ~ .pb-form-label,
+.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; /* 인풋 상단 보더에 살짝 겹치는 정도로만 띄운다. */
+  font-size: 0.725rem;
+  color: #e5e7eb;
+  background-color: #020617; /* 인풋 배경과 맞춰서 보더 라인을 자연스럽게 가린다. */
+  padding: 0 0.25rem;
+}
+
 .pb-form-label {
   font-size: 0.75rem;
   color: #e5e7eb;
 }
 
+.pb-form-options {
+  display: flex;
+  font-size: 0.75rem;
+}
+
+.pb-form-options--stacked {
+  flex-direction: column;
+}
+
+.pb-form-options--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .pb-form-option {
   display: flex;
   align-items: center;
@@ -441,12 +510,19 @@ body {
   border-radius: 0.375rem;
   border: 1px solid #1f2937;
   background-color: #020617;
-  padding: 0.5rem 0.75rem;
+  /* 세로 패딩은 CSS 변수로 정의해 플로팅 라벨/에디터 등이 함께 참조할 수 있게 한다. */
+  padding: var(--pb-input-padding-y, 0.5rem) 0.75rem;
   font-size: 0.75rem;
   color: #e5e7eb;
   box-sizing: border-box;
 }
 
+/* 기본 인풋/셀렉트도 일정 높이 이상을 유지해, 세로 패딩을 0 에 가깝게 줄이더라도 UI 가 붕괴되지 않도록 한다. */
+.pb-input,
+.pb-select {
+  min-height: 2.5rem;
+}
+
 .pb-textarea {
   min-height: 6rem;
 }