diff --git a/.jules/palette.md b/.jules/palette.md
index 2dcd639e..1daaf421 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -81,3 +81,6 @@
 ## 2024-08-04 - 숫자 입력 필드 빈 문자열 상태 초기화 처리
 **학습:** 숫자 입력 필드에서 빈 문자열('')을 입력할 때 브라우저는 이전의 유효하지 않은 상태를 암시적으로 유지하므로, 사용자 정의 검증을 명시적으로 초기화하지 않으면 네이티브 HTML5 유효성 검사가 정상 작동하지 않을 수 있음을 확인했습니다.
 **실행:** 인라인 검증 스크립트 작성 시 빈 문자열 상태를 별도로 확인하여 this.setCustomValidity('') 및 this.removeAttribute('aria-invalid')를 명시적으로 호출하는 로직을 추가해야 합니다.
+## 2024-08-11 - 대상 바이트 입력 필드 최대값 검증 추가
+**학습:** 서버에서 허용하는 최대 파일 크기 제한이 있음에도 프론트엔드의 대상 바이트 숫자 입력 필드에 HTML5 `max` 속성 및 클라이언트 측 검증이 없어, 사용자가 허용치를 초과하는 값을 입력하고 제출할 때까지 오류를 인지하지 못하는 사용성 문제가 있었습니다.
+**실행:** 숫자 입력 필드에 `max` 속성을 추가하고, JavaScript `input` 이벤트 리스너에서 입력값이 최대값을 초과하는지 검사하여 초과 시 즉각적인 시각적 피드백과 함께 `setCustomValidity` 및 `aria-invalid`를 설정해야 합니다.
diff --git a/saas_web.py b/saas_web.py
index 63265e94..b5404ca9 100644
--- a/saas_web.py
+++ b/saas_web.py
@@ -178,7 +178,7 @@ async def add_security_headers(request: Request, call_next):
             </p>
             <p>
                 <label for="target_bytes">Target Bytes: <span class="required-star" aria-hidden="true">*</span></label><br>
-                <input type="number" id="target_bytes" name="target_bytes" value="2000000000" min="1" aria-describedby="target_bytes_help target_bytes_preview" required>
+                <input type="number" id="target_bytes" name="target_bytes" value="2000000000" min="1" max="5368709120" aria-describedby="target_bytes_help target_bytes_preview" required>
                 <br><span id="target_bytes_help" class="help-text">Maximum allowed file size in bytes (e.g., 2000000000 for ~1.86 GiB)</span>
                 <br><span id="target_bytes_preview" class="help-text" aria-live="polite" style="font-weight: bold; color: #1e7e34;">1.86 GiB</span>
                 <div id="preset_buttons_container" class="preset-container" role="group" aria-label="Preset target sizes">
@@ -190,6 +190,31 @@ async def add_security_headers(request: Request, call_next):
             </p>
             <button type="submit" id="submit-btn">Upload and Shrink</button>
         </form>
+    </div>
+    <div class="box" id="batch-drop-zone" style="margin-top: 20px;">
+        <h2>Shrink Multiple Files</h2>
+        <form action="/shrink-batch" method="post" enctype="multipart/form-data" id="shrink-batch-form">
+            <p>
+                <label for="batch_files">Media Files (up to 20): <span class="required-star" aria-hidden="true">*</span></label><br>
+                <input type="file" id="batch_files" name="files" accept="audio/*,video/*" multiple aria-describedby="batch_files_help batch_files_preview" required onchange="updateBatchFilePreview(this)">
+                <br><span id="batch_files_help" class="help-text">Select several audio or video files, or drag and drop them here. You get back one zip with every output plus a results.json manifest.</span>
+                <br><span id="batch_files_preview" class="help-text" aria-live="polite" style="font-weight: bold; color: #0f6674;"></span>
+            </p>
+            <p>
+                <label for="batch_target_bytes">Target Bytes (per file): <span class="required-star" aria-hidden="true">*</span></label><br>
+                <input type="number" id="batch_target_bytes" name="target_bytes" value="2000000000" min="1" max="5368709120" aria-describedby="batch_target_bytes_help batch_target_bytes_preview" required>
+                <br><span id="batch_target_bytes_help" class="help-text">Maximum allowed size in bytes for each output file</span>
+                <br><span id="batch_target_bytes_preview" class="help-text" aria-live="polite" style="font-weight: bold; color: #1e7e34;">1.86 GiB</span>
+                <div id="batch_preset_buttons_container" class="preset-container" role="group" aria-label="Preset target sizes for batch">
+                    <button type="button" class="preset-btn" data-bytes="26214400" aria-pressed="false">25 MiB</button>
+                    <button type="button" class="preset-btn" data-bytes="104857600" aria-pressed="false">100 MiB</button>
+                    <button type="button" class="preset-btn" data-bytes="524288000" aria-pressed="false">500 MiB</button>
+                    <button type="button" class="preset-btn" data-bytes="1073741824" aria-pressed="false">1 GiB</button>
+                </div>
+            </p>
+            <button type="submit" id="batch-submit-btn">Upload and Shrink Batch</button>
+        </form>
+    </div>
         <script>
             const MAX_UPLOAD_BYTES = 5 * 1024 * 1024 * 1024;
             function formatBinaryBytes(value) {
@@ -268,6 +293,12 @@ async def add_security_headers(request: Request, call_next):
                     preview.style.color = '#dc3545';
                     this.setCustomValidity('Must be greater than 0.');
                     this.setAttribute('aria-invalid', 'true');
+                } else if (val > MAX_UPLOAD_BYTES) {
+                    const limitText = formatBinaryBytes(MAX_UPLOAD_BYTES);
+                    preview.innerText = 'Must be ' + limitText + ' or less.';
+                    preview.style.color = '#dc3545';
+                    this.setCustomValidity('Must be ' + limitText + ' or less.');
+                    this.setAttribute('aria-invalid', 'true');
                 } else {
                     preview.innerText = formatBinaryBytes(val);
                 }
@@ -302,6 +333,12 @@ async def add_security_headers(request: Request, call_next):
                     preview.style.color = '#dc3545';
                     this.setCustomValidity('Must be greater than 0.');
                     this.setAttribute('aria-invalid', 'true');
+                } else if (val > MAX_UPLOAD_BYTES) {
+                    const limitText = formatBinaryBytes(MAX_UPLOAD_BYTES);
+                    preview.innerText = 'Must be ' + limitText + ' or less.';
+                    preview.style.color = '#dc3545';
+                    this.setCustomValidity('Must be ' + limitText + ' or less.');
+                    this.setAttribute('aria-invalid', 'true');
                 } else {
                     preview.innerText = formatBinaryBytes(val);
                 }
@@ -404,31 +441,6 @@ async def add_security_headers(request: Request, call_next):
             }, false);
         }
         </script>
-    </div>
-    <div class="box" id="batch-drop-zone" style="margin-top: 20px;">
-        <h2>Shrink Multiple Files</h2>
-        <form action="/shrink-batch" method="post" enctype="multipart/form-data" id="shrink-batch-form">
-            <p>
-                <label for="batch_files">Media Files (up to 20): <span class="required-star" aria-hidden="true">*</span></label><br>
-                <input type="file" id="batch_files" name="files" accept="audio/*,video/*" multiple aria-describedby="batch_files_help batch_files_preview" required onchange="updateBatchFilePreview(this)">
-                <br><span id="batch_files_help" class="help-text">Select several audio or video files, or drag and drop them here. You get back one zip with every output plus a results.json manifest.</span>
-                <br><span id="batch_files_preview" class="help-text" aria-live="polite" style="font-weight: bold; color: #0f6674;"></span>
-            </p>
-            <p>
-                <label for="batch_target_bytes">Target Bytes (per file): <span class="required-star" aria-hidden="true">*</span></label><br>
-                <input type="number" id="batch_target_bytes" name="target_bytes" value="2000000000" min="1" aria-describedby="batch_target_bytes_help batch_target_bytes_preview" required>
-                <br><span id="batch_target_bytes_help" class="help-text">Maximum allowed size in bytes for each output file</span>
-                <br><span id="batch_target_bytes_preview" class="help-text" aria-live="polite" style="font-weight: bold; color: #1e7e34;">1.86 GiB</span>
-                <div id="batch_preset_buttons_container" class="preset-container" role="group" aria-label="Preset target sizes for batch">
-                    <button type="button" class="preset-btn" data-bytes="26214400" aria-pressed="false">25 MiB</button>
-                    <button type="button" class="preset-btn" data-bytes="104857600" aria-pressed="false">100 MiB</button>
-                    <button type="button" class="preset-btn" data-bytes="524288000" aria-pressed="false">500 MiB</button>
-                    <button type="button" class="preset-btn" data-bytes="1073741824" aria-pressed="false">1 GiB</button>
-                </div>
-            </p>
-            <button type="submit" id="batch-submit-btn">Upload and Shrink Batch</button>
-        </form>
-    </div>
 </body>
 </html>
 """