전체적인 여백 간격 변경

src/lib/components/BottomSheet.svelte

@@ -25,7 +25,7 @@
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}
-          class="flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
+          class="flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white px-4"
           transition:fly={{ y: 100, duration: 200 }}
         >
           {@render children?.()}

src/lib/components/Modal.svelte

@@ -24,7 +24,7 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     onclick={closeModal}
-    class="fixed inset-0 z-10 bg-black bg-opacity-50 px-2"
+    class="fixed inset-0 z-10 bg-black bg-opacity-50 px-4"
     transition:fade={{ duration: 100 }}
   >
     <AdaptiveDiv>

src/lib/components/TopBar.svelte

@@ -21,7 +21,7 @@
     <IconArrowBack class="text-2xl" />
   </button>
   {#if title}
-    <p class="absolute left-1/2 -translate-x-1/2 transform text-xl font-semibold">{title}</p>
+    <p class="absolute left-1/2 -translate-x-1/2 transform text-lg font-semibold">{title}</p>
   {/if}
   {#if children}
     {@render children?.()}

src/lib/components/divs/BottomDiv.svelte

@@ -2,6 +2,6 @@
   let { children } = $props();
 </script>
 
-<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white pb-2">
+<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white pb-4">
   {@render children?.()}
 </div>

src/lib/components/divs/TitleDiv.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <div>
-  <div class="box-content flex min-h-[10vh] items-center pt-2">
+  <div class="box-content flex min-h-[10vh] items-center pt-4">
     {#if Icon}
       <Icon class="text-5xl text-gray-600" />
     {/if}