Update styles/custom.css

styles/custom.css

@@ -12,6 +12,7 @@ body {
     transition: all 0.3s ease;
     margin-bottom: 1rem;
     position: relative;
+    margin-top: 2rem;  /* 라벨을 위한 공간 확보 */
 }
 
 #object_image_uploader:hover {
@@ -31,27 +32,46 @@ body {
 
 #object_image_uploader img {
     object-fit: contain !important;
-    max-height: 280px;
+    max-height: 260px;  /* 이미지 높이 줄임 */
     width: auto;
     margin: 0 auto;
     display: block;
 }
 
+/* 라벨 스타일 강화 */
+label[for="object_image_uploader"],
+div:has(> #object_image_uploader) > .block-label {
+    position: absolute;
+    top: -1.5rem;
+    left: 0;
+    z-index: 10;
+    background-color: white;
+    padding: 0 0.5rem;
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: #4f46e5;
+}
+
+/* 업로드 영역 위치 조정 */
 #object_image_uploader .svelte-1p4r00y {
-    padding-top: 1.5rem;
+    padding-top: 1rem;
 }
 
-/* 업로드 이미지와 라벨 간격 조정 */
+/* 이미지 컨테이너 상단 패딩 추가 */
 .block.padded:has(#object_image_uploader) {
     position: relative;
-    padding-top: 2rem;
+    padding-top: 0.5rem;
 }
 
-.block.padded:has(#object_image_uploader) .block-label {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
+/* 업로드 버튼 스타일 개선 */
+#object_image_uploader button {
+    background-color: #e0e7ff;
+    color: #4338ca;
+    transition: all 0.2s ease;
+}
+
+#object_image_uploader button:hover {
+    background-color: #c7d2fe;
 }
 
 /* 제목 스타일 */