From d66a430847b0b4311f714364bf0486a33a8f9f0b Mon Sep 17 00:00:00 2001
From: Samgu Lee <cable8mm@gmail.com>
Date: Sun, 11 Oct 2026 14:56:41 +0900
Subject: [PATCH 1/2] update: implement code changes to enhance functionality
 and improve performance

---
 index.html | 884 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 668 insertions(+), 216 deletions(-)

diff --git a/index.html b/index.html
index d4719f6..f8744d1 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,10 @@
       name="description"
       content="이미지 리사이즈 작업을 줄이고 이미지 트래픽을 서버 요금과 분리하는 img.repl.net 이미지 프록시"
     />
-    <meta name="keywords" content="이미지 프록시, 이미지 리사이즈, 이미지 최적화, CDN, WebP, AVIF, img.repl.net" />
+    <meta
+      name="keywords"
+      content="이미지 프록시, 이미지 리사이즈, 이미지 최적화, CDN, WebP, AVIF, img.repl.net"
+    />
     <meta name="robots" content="index, follow" />
     <meta name="theme-color" content="#fafaf9" />
     <link rel="canonical" href="https://if.repl.net/" />
@@ -26,20 +29,29 @@
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
-    <meta property="og:image:alt" content="img.repl.net — 이미지 리사이즈와 전송" />
+    <meta
+      property="og:image:alt"
+      content="이미지 포지(Image Forge) — 이미지 리사이즈와 전송"
+    />
     <meta property="og:locale" content="ko_KR" />
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="img.repl.net — 이미지 리사이즈와 전송" />
+    <meta
+      name="twitter:title"
+      content="이미지 포지(Image Forge) — 이미지 리사이즈와 전송"
+    />
     <meta
       name="twitter:description"
-      content="이미지 리사이즈 작업을 줄이고 이미지 트래픽을 서버 요금과 분리하는 img.repl.net 이미지 프록시"
+      content="이미지 리사이즈 작업을 줄이고 이미지 트래픽을 서버 요금과 분리하는 이미지 포지(Image Forge) 이미지 프록시"
     />
     <meta name="twitter:image" content="https://if.repl.net/og.png" />
-    <meta name="twitter:image:alt" content="img.repl.net — 이미지 리사이즈와 전송" />
+    <meta
+      name="twitter:image:alt"
+      content="이미지 포지(Image Forge) — 이미지 리사이즈와 전송"
+    />
 
-    <title>img.repl.net — 이미지 리사이즈와 전송</title>
+    <title>이미지 포지(Image Forge) — 이미지 리사이즈와 전송</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -49,26 +61,48 @@
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <style>
       body {
-        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
+        font-family:
+          "Plus Jakarta Sans",
+          system-ui,
+          -apple-system,
+          sans-serif;
       }
       .font-mono {
-        font-family: 'JetBrains Mono', monospace;
+        font-family: "JetBrains Mono", monospace;
       }
       .dot-grid {
-        background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1.2px, transparent 1.2px);
+        background-image: radial-gradient(
+          rgba(15, 23, 42, 0.08) 1.2px,
+          transparent 1.2px
+        );
         background-size: 20px 20px;
       }
       @keyframes floatOrb1 {
-        0%, 100% { transform: translate(0px, 0px) scale(1); }
-        50% { transform: translate(45px, 25px) scale(1.12); }
+        0%,
+        100% {
+          transform: translate(0px, 0px) scale(1);
+        }
+        50% {
+          transform: translate(45px, 25px) scale(1.12);
+        }
       }
       @keyframes floatOrb2 {
-        0%, 100% { transform: translate(0px, 0px) scale(1); }
-        50% { transform: translate(-35px, -30px) scale(0.92); }
+        0%,
+        100% {
+          transform: translate(0px, 0px) scale(1);
+        }
+        50% {
+          transform: translate(-35px, -30px) scale(0.92);
+        }
       }
       @keyframes floatOrb3 {
-        0%, 100% { transform: translate(0px, 0px) scale(1); }
-        50% { transform: translate(30px, -35px) scale(1.08); }
+        0%,
+        100% {
+          transform: translate(0px, 0px) scale(1);
+        }
+        50% {
+          transform: translate(30px, -35px) scale(1.08);
+        }
       }
       .orb-1 {
         animation: floatOrb1 14s ease-in-out infinite;
@@ -94,89 +128,161 @@
       }
     </style>
   </head>
-  <body class="relative min-h-screen bg-[#fafaf9] text-slate-900 antialiased overflow-x-hidden dot-grid selection:bg-amber-200 selection:text-slate-900">
+  <body
+    class="relative min-h-screen bg-[#fafaf9] text-slate-900 antialiased overflow-x-hidden dot-grid selection:bg-amber-200 selection:text-slate-900"
+  >
     <!-- 배경 은은한 블러 그라데이션 오브 애니메이션 -->
-    <div class="pointer-events-none fixed inset-0 -z-10 overflow-hidden" aria-hidden="true">
-      <div class="orb-1 absolute -top-24 left-1/4 h-80 w-80 rounded-full bg-gradient-to-tr from-pink-200/50 via-rose-200/40 to-amber-200/40 blur-3xl"></div>
-      <div class="orb-2 absolute top-1/3 -right-20 h-96 w-96 rounded-full bg-gradient-to-br from-cyan-200/40 via-sky-200/35 to-indigo-200/30 blur-3xl"></div>
-      <div class="orb-3 absolute -bottom-28 left-10 h-88 w-88 rounded-full bg-gradient-to-tl from-emerald-200/40 via-teal-200/30 to-amber-100/40 blur-3xl"></div>
+    <div
+      class="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
+      aria-hidden="true"
+    >
+      <div
+        class="orb-1 absolute -top-24 left-1/4 h-80 w-80 rounded-full bg-gradient-to-tr from-pink-200/50 via-rose-200/40 to-amber-200/40 blur-3xl"
+      ></div>
+      <div
+        class="orb-2 absolute top-1/3 -right-20 h-96 w-96 rounded-full bg-gradient-to-br from-cyan-200/40 via-sky-200/35 to-indigo-200/30 blur-3xl"
+      ></div>
+      <div
+        class="orb-3 absolute -bottom-28 left-10 h-88 w-88 rounded-full bg-gradient-to-tl from-emerald-200/40 via-teal-200/30 to-amber-100/40 blur-3xl"
+      ></div>
     </div>
 
-    <main class="mx-auto flex min-h-screen w-full max-w-4xl flex-col px-5 py-10 sm:px-8 sm:py-16">
+    <main
+      class="mx-auto flex min-h-screen w-full max-w-4xl flex-col px-5 py-10 sm:px-8 sm:py-16"
+    >
       <!-- 헤더 & 브랜드 스티커 -->
       <header>
         <div class="flex flex-wrap items-center justify-between gap-3">
-          <div class="inline-flex items-center gap-2 rounded-xl border-2 border-slate-900 bg-white px-3 py-1.5 text-xs font-mono font-bold tracking-tight text-slate-900 sticker-shadow-sm">
-            <span class="inline-block h-2.5 w-2.5 rounded-full bg-emerald-400 ring-2 ring-emerald-300 ring-offset-1 animate-pulse"></span>
-            <span>img.repl.net</span>
-            <span class="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-800">EDGE LIVE</span>
+          <div
+            class="inline-flex items-center gap-2 rounded-xl border-2 border-slate-900 bg-white px-3 py-1.5 text-xs font-mono font-bold tracking-tight text-slate-900 sticker-shadow-sm"
+          >
+            <span
+              class="inline-block h-2.5 w-2.5 rounded-full bg-emerald-400 ring-2 ring-emerald-300 ring-offset-1 animate-pulse"
+            ></span>
+            <span>이미지 포지(Image Forge)</span>
+            <span
+              class="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-800"
+              >EDGE LIVE</span
+            >
           </div>
 
-          <div class="inline-flex items-center gap-1.5 rounded-full border border-slate-300 bg-white/80 px-3 py-1 text-xs font-medium text-slate-600 backdrop-blur-sm">
+          <div
+            class="inline-flex items-center gap-1.5 rounded-full border border-slate-300 bg-white/80 px-3 py-1 text-xs font-medium text-slate-600 backdrop-blur-sm"
+          >
             <span>✨ 글로벌 초경량 이미지 프록시</span>
           </div>
         </div>
 
         <div class="mt-10 sm:mt-14">
-          <div class="inline-block -rotate-1 rounded-lg border-2 border-slate-900 bg-amber-200 px-3 py-1 text-xs font-extrabold uppercase tracking-wide text-slate-900 sticker-shadow-sm">
+          <div
+            class="inline-block -rotate-1 rounded-lg border-2 border-slate-900 bg-amber-200 px-3 py-1 text-xs font-extrabold uppercase tracking-wide text-slate-900 sticker-shadow-sm"
+          >
             On-Demand Transformation ⚡
           </div>
-          <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-950 leading-[1.15]">
+          <h1
+            class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-950 leading-[1.15]"
+          >
             이미지 작업과 전송을<br class="hidden sm:inline" />
             <span class="relative inline-block mt-1 sm:mt-0">
               <span class="relative z-10 text-indigo-950">가장 간단하게.</span>
-              <span class="absolute bottom-1.5 left-0 -z-10 h-3.5 w-full bg-pink-200/90 rounded-sm -rotate-1"></span>
+              <span
+                class="absolute bottom-1.5 left-0 -z-10 h-3.5 w-full bg-pink-200/90 rounded-sm -rotate-1"
+              ></span>
             </span>
           </h1>
-          <p class="mt-5 max-w-2xl text-base sm:text-lg leading-relaxed text-slate-600 font-medium">
-            이미지 프록시로 번거로운 리사이즈 작업을 없애고, 이미지 트래픽을 서버와 분리하여 초고속으로 전송합니다.
+          <p
+            class="mt-5 max-w-2xl text-base sm:text-lg leading-relaxed text-slate-600 font-medium"
+          >
+            이미지 프록시로 번거로운 리사이즈 작업을 없애고, 이미지 트래픽을
+            서버와 분리하여 초고속으로 전송합니다.
           </p>
         </div>
 
         <!-- 실제 원본 이미지 변환 매핑 예시 카드 -->
-        <div class="mt-8 -mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-6 shadow-none sm:sticker-shadow">
+        <div
+          class="mt-8 -mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-6 shadow-none sm:sticker-shadow"
+        >
           <div class="flex items-center gap-2 mb-3">
-            <span class="rounded-md border border-slate-900 bg-emerald-200 px-2 py-0.5 text-[11px] font-extrabold text-slate-900">
+            <span
+              class="rounded-md border border-slate-900 bg-emerald-200 px-2 py-0.5 text-[11px] font-extrabold text-slate-900"
+            >
               REAL SAMPLE 🐳
             </span>
-            <span class="text-xs font-bold text-slate-700">실제 원본 ➔ 프록시 URL 변환 예시</span>
+            <span class="text-xs font-bold text-slate-700"
+              >실제 원본 ➔ 프록시 URL 변환 예시</span
+            >
           </div>
 
           <div class="grid gap-3 text-xs font-mono sm:grid-cols-2">
             <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
-              <div class="text-[11px] font-bold text-slate-500 mb-1">원본 이미지 (640 × 640 원본)</div>
-              <div class="break-all text-slate-700">https://www.repl.net/art/samples/cute-whale.png</div>
+              <div class="text-[11px] font-bold text-slate-500 mb-1">
+                원본 이미지 (640 × 640 원본)
+              </div>
+              <div class="break-all text-slate-700">
+                https://www.repl.net/art/samples/cute-whale.png
+              </div>
             </div>
-            <div class="rounded-xl border border-indigo-200 bg-indigo-50/70 p-3">
-              <div class="text-[11px] font-bold text-indigo-700 mb-1">프록시 URL (리사이즈 &amp; WebP 변환)</div>
+            <div
+              class="rounded-xl border border-indigo-200 bg-indigo-50/70 p-3"
+            >
+              <div class="text-[11px] font-bold text-indigo-700 mb-1">
+                프록시 URL (리사이즈 &amp; WebP 변환)
+              </div>
               <div class="break-all font-semibold text-indigo-950">
-                https://img.repl.net/<span class="text-amber-700 font-bold underline">repl</span>/art/samples/cute-whale.png?w=320&amp;f=webp
+                https://img.repl.net/<span
+                  class="text-amber-700 font-bold underline"
+                  >repl</span
+                >/art/samples/cute-whale.png?w=320&amp;f=webp
               </div>
             </div>
           </div>
 
           <div class="mt-3 flex items-start gap-1.5 text-xs text-slate-600">
             <span class="text-amber-600 font-bold">💡</span>
-            <span>경로의 <code class="rounded bg-slate-100 px-1 py-0.5 font-mono font-bold text-slate-800">repl</code>은 미리 지정된 서비스 식별자로 원본 호스트 <code class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800">www.repl.net</code>을 뜻합니다.</span>
+            <span
+              >경로의
+              <code
+                class="rounded bg-slate-100 px-1 py-0.5 font-mono font-bold text-slate-800"
+                >repl</code
+              >은 미리 지정된 서비스 식별자로 원본 호스트
+              <code
+                class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800"
+                >www.repl.net</code
+              >을 뜻합니다.</span
+            >
           </div>
         </div>
       </header>
 
       <!-- 실제 샘플 이미지를 적용한 인터랙티브 플레이그라운드 -->
       <section aria-label="실시간 URL 변환 시연" class="mt-10 sm:mt-12">
-        <div class="-mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-7 shadow-none sm:sticker-shadow-lg">
-          <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-4">
+        <div
+          class="-mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-7 shadow-none sm:sticker-shadow-lg"
+        >
+          <div
+            class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-4"
+          >
             <div class="flex items-center gap-2">
               <span class="inline-flex h-3 w-3 rounded-full bg-rose-400"></span>
-              <span class="inline-flex h-3 w-3 rounded-full bg-amber-400"></span>
-              <span class="inline-flex h-3 w-3 rounded-full bg-emerald-400"></span>
-              <span class="ml-2 font-mono text-xs font-semibold text-slate-500">Live Image Proxy Playground</span>
+              <span
+                class="inline-flex h-3 w-3 rounded-full bg-amber-400"
+              ></span>
+              <span
+                class="inline-flex h-3 w-3 rounded-full bg-emerald-400"
+              ></span>
+              <span class="ml-2 font-mono text-xs font-semibold text-slate-500"
+                >Live Image Proxy Playground</span
+              >
             </div>
             <div class="flex items-center gap-2">
-              <span class="rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 font-mono text-[11px] text-slate-600">
+              <span
+                class="rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 font-mono text-[11px] text-slate-600"
+              >
                 Target: <strong class="text-indigo-600">cute-whale.png</strong>
               </span>
-              <span class="rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 font-mono text-[11px] text-slate-600">
+              <span
+                class="rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 font-mono text-[11px] text-slate-600"
+              >
                 Cache: <strong class="text-emerald-600">Edge Miss/Hit</strong>
               </span>
             </div>
@@ -184,16 +290,34 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
 
           <!-- URL 미리보기 바 -->
           <div class="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center">
-            <div class="flex-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50/80 px-3.5 py-2.5 font-mono text-xs sm:text-sm text-slate-800">
-              <span class="font-bold text-indigo-600">https://img.repl.net</span><span class="text-slate-700">/repl/art/samples/cute-whale.png</span><span id="param-display" class="font-semibold text-amber-600">?w=320&amp;f=webp&amp;q=80</span>
+            <div
+              class="flex-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50/80 px-3.5 py-2.5 font-mono text-xs sm:text-sm text-slate-800"
+            >
+              <span class="font-bold text-indigo-600">https://img.repl.net</span
+              ><span class="text-slate-700"
+                >/repl/art/samples/cute-whale.png</span
+              ><span id="param-display" class="font-semibold text-amber-600"
+                >?w=320&amp;f=webp&amp;q=80</span
+              >
             </div>
             <button
               id="copy-btn"
               type="button"
               class="inline-flex items-center justify-center gap-1.5 rounded-xl border-2 border-slate-900 bg-amber-300 px-4 py-2.5 text-xs font-bold text-slate-900 transition hover:bg-amber-400 sticker-shadow-sm sticker-shadow-button cursor-pointer"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                />
               </svg>
               <span id="copy-btn-text">URL 복사</span>
             </button>
@@ -202,28 +326,70 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
           <!-- 인터랙티브 파라미터 조작 컨트롤 및 실제 이미지 뷰 -->
           <div class="mt-6 grid gap-5 lg:grid-cols-[1.1fr_0.9fr]">
             <!-- 파라미터 제어 버튼군 -->
-            <div class="flex flex-col gap-4 rounded-xl border border-slate-200 bg-slate-50/50 p-4">
+            <div
+              class="flex flex-col gap-4 rounded-xl border border-slate-200 bg-slate-50/50 p-4"
+            >
               <!-- 너비 w -->
               <div>
                 <div class="flex items-center justify-between mb-2">
-                  <label class="text-xs font-bold uppercase tracking-wider text-slate-700">너비 (w)</label>
-                  <span class="font-mono text-[11px] text-slate-500">기본값: 0 (비율 유지 자동)</span>
+                  <label
+                    class="text-xs font-bold uppercase tracking-wider text-slate-700"
+                    >너비 (w)</label
+                  >
+                  <span class="font-mono text-[11px] text-slate-500"
+                    >기본값: 0 (비율 유지 자동)</span
+                  >
                 </div>
                 <div class="flex flex-wrap gap-2" id="width-buttons">
-                  <button type="button" data-w="120" class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    120px <span class="text-[10px] text-slate-500 font-normal">아이콘</span>
+                  <button
+                    type="button"
+                    data-w="120"
+                    class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    120px
+                    <span class="text-[10px] text-slate-500 font-normal"
+                      >아이콘</span
+                    >
                   </button>
-                  <button type="button" data-w="240" class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    240px <span class="text-[10px] text-slate-500 font-normal">썸네일</span>
+                  <button
+                    type="button"
+                    data-w="240"
+                    class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    240px
+                    <span class="text-[10px] text-slate-500 font-normal"
+                      >썸네일</span
+                    >
                   </button>
-                  <button type="button" data-w="320" class="w-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2.5 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer">
-                    320px <span class="text-[10px] text-indigo-700 font-normal">카드</span>
+                  <button
+                    type="button"
+                    data-w="320"
+                    class="w-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2.5 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer"
+                  >
+                    320px
+                    <span class="text-[10px] text-indigo-700 font-normal"
+                      >카드</span
+                    >
                   </button>
-                  <button type="button" data-w="480" class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    480px <span class="text-[10px] text-slate-500 font-normal">미디엄</span>
+                  <button
+                    type="button"
+                    data-w="480"
+                    class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    480px
+                    <span class="text-[10px] text-slate-500 font-normal"
+                      >미디엄</span
+                    >
                   </button>
-                  <button type="button" data-w="640" class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    640px <span class="text-[10px] text-slate-500 font-normal">원본크기</span>
+                  <button
+                    type="button"
+                    data-w="640"
+                    class="w-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    640px
+                    <span class="text-[10px] text-slate-500 font-normal"
+                      >원본크기</span
+                    >
                   </button>
                 </div>
               </div>
@@ -231,24 +397,66 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
               <!-- 포맷 f -->
               <div>
                 <div class="flex items-center justify-between mb-2">
-                  <label class="text-xs font-bold uppercase tracking-wider text-slate-700">포맷 (f)</label>
-                  <span class="font-mono text-[11px] text-slate-500">기본값: Accept 헤더 기준</span>
+                  <label
+                    class="text-xs font-bold uppercase tracking-wider text-slate-700"
+                    >포맷 (f)</label
+                  >
+                  <span class="font-mono text-[11px] text-slate-500"
+                    >기본값: Accept 헤더 기준</span
+                  >
                 </div>
                 <div class="flex flex-wrap gap-2" id="format-buttons">
-                  <button type="button" data-f="webp" class="f-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2.5 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer">
-                    webp <span class="rounded bg-emerald-200 px-1 text-[9px] text-emerald-900 font-extrabold">-98%</span>
+                  <button
+                    type="button"
+                    data-f="webp"
+                    class="f-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2.5 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer"
+                  >
+                    webp
+                    <span
+                      class="rounded bg-emerald-200 px-1 text-[9px] text-emerald-900 font-extrabold"
+                      >-98%</span
+                    >
                   </button>
-                  <button type="button" data-f="avif" class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    avif <span class="rounded bg-sky-200 px-1 text-[9px] text-sky-900 font-extrabold">-98.5%</span>
+                  <button
+                    type="button"
+                    data-f="avif"
+                    class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    avif
+                    <span
+                      class="rounded bg-sky-200 px-1 text-[9px] text-sky-900 font-extrabold"
+                      >-98.5%</span
+                    >
                   </button>
-                  <button type="button" data-f="jpeg" class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    jpeg <span class="text-[10px] text-slate-500 font-normal">표준</span>
+                  <button
+                    type="button"
+                    data-f="jpeg"
+                    class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    jpeg
+                    <span class="text-[10px] text-slate-500 font-normal"
+                      >표준</span
+                    >
                   </button>
-                  <button type="button" data-f="png" class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    png <span class="text-[10px] text-slate-500 font-normal">무손실</span>
+                  <button
+                    type="button"
+                    data-f="png"
+                    class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    png
+                    <span class="text-[10px] text-slate-500 font-normal"
+                      >무손실</span
+                    >
                   </button>
-                  <button type="button" data-f="" class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
-                    (생략) <span class="text-[10px] text-slate-500 font-normal">Accept</span>
+                  <button
+                    type="button"
+                    data-f=""
+                    class="f-btn rounded-lg border-2 border-slate-900 bg-white px-2.5 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                  >
+                    (생략)
+                    <span class="text-[10px] text-slate-500 font-normal"
+                      >Accept</span
+                    >
                   </button>
                 </div>
               </div>
@@ -257,16 +465,31 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
               <div class="grid grid-cols-2 gap-3">
                 <div>
                   <div class="flex items-center justify-between mb-2">
-                    <label class="text-xs font-bold uppercase tracking-wider text-slate-700">방식 (fit)</label>
+                    <label
+                      class="text-xs font-bold uppercase tracking-wider text-slate-700"
+                      >방식 (fit)</label
+                    >
                   </div>
                   <div class="flex flex-wrap gap-1.5" id="fit-buttons">
-                    <button type="button" data-fit="fit" class="fit-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer">
+                    <button
+                      type="button"
+                      data-fit="fit"
+                      class="fit-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer"
+                    >
                       fit
                     </button>
-                    <button type="button" data-fit="fill" class="fit-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
+                    <button
+                      type="button"
+                      data-fit="fill"
+                      class="fit-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                    >
                       fill
                     </button>
-                    <button type="button" data-fit="auto" class="fit-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
+                    <button
+                      type="button"
+                      data-fit="auto"
+                      class="fit-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                    >
                       auto
                     </button>
                   </div>
@@ -274,16 +497,31 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
 
                 <div>
                   <div class="flex items-center justify-between mb-2">
-                    <label class="text-xs font-bold uppercase tracking-wider text-slate-700">품질 (q)</label>
+                    <label
+                      class="text-xs font-bold uppercase tracking-wider text-slate-700"
+                      >품질 (q)</label
+                    >
                   </div>
                   <div class="flex flex-wrap gap-1.5" id="quality-buttons">
-                    <button type="button" data-q="60" class="q-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
+                    <button
+                      type="button"
+                      data-q="60"
+                      class="q-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                    >
                       60
                     </button>
-                    <button type="button" data-q="80" class="q-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer">
+                    <button
+                      type="button"
+                      data-q="80"
+                      class="q-btn rounded-lg border-2 border-slate-900 bg-indigo-100 px-2 py-1 text-xs font-bold text-indigo-950 transition cursor-pointer"
+                    >
                       80 (기본)
                     </button>
-                    <button type="button" data-q="95" class="q-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer">
+                    <button
+                      type="button"
+                      data-q="95"
+                      class="q-btn rounded-lg border-2 border-slate-900 bg-white px-2 py-1 text-xs font-bold text-slate-800 hover:bg-slate-100 transition cursor-pointer"
+                    >
                       95
                     </button>
                   </div>
@@ -292,17 +530,29 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
             </div>
 
             <!-- 실제 샘플 이미지 렌더링 뷰 -->
-            <div class="flex flex-col items-center justify-between rounded-xl border-2 border-dashed border-slate-300 bg-gradient-to-b from-slate-50 to-sky-50/30 p-4">
-              <div class="w-full flex items-center justify-between text-xs font-mono text-slate-500">
+            <div
+              class="flex flex-col items-center justify-between rounded-xl border-2 border-dashed border-slate-300 bg-gradient-to-b from-slate-50 to-sky-50/30 p-4"
+            >
+              <div
+                class="w-full flex items-center justify-between text-xs font-mono text-slate-500"
+              >
                 <span class="flex items-center gap-1.5">
-                  <span class="inline-block h-2 w-2 rounded-full bg-emerald-500"></span>
+                  <span
+                    class="inline-block h-2 w-2 rounded-full bg-emerald-500"
+                  ></span>
                   LIVE IMAGE VIEW
                 </span>
-                <span id="dimension-badge" class="font-bold text-slate-700">320 px</span>
+                <span id="dimension-badge" class="font-bold text-slate-700"
+                  >320 px</span
+                >
               </div>
 
-              <div class="my-3 flex items-center justify-center min-h-[180px] w-full">
-                <div class="relative flex flex-col items-center justify-center rounded-2xl border-2 border-slate-900 bg-white p-3 sticker-shadow transition-all duration-300">
+              <div
+                class="my-3 flex items-center justify-center min-h-[180px] w-full"
+              >
+                <div
+                  class="relative flex flex-col items-center justify-center rounded-2xl border-2 border-slate-900 bg-white p-3 sticker-shadow transition-all duration-300"
+                >
                   <img
                     id="sample-image"
                     src="https://img.repl.net/repl/art/samples/cute-whale.png?w=320&amp;f=webp&amp;q=80"
@@ -311,16 +561,30 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
                     width="160"
                   />
                   <div class="mt-2 flex items-center gap-2">
-                    <span id="preview-label" class="text-[10px] font-mono font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-200">
+                    <span
+                      id="preview-label"
+                      class="text-[10px] font-mono font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded border border-indigo-200"
+                    >
                       320px • webp
                     </span>
-                    <span class="text-[10px] font-mono text-slate-500">원본 412 KB</span>
+                    <span class="text-[10px] font-mono text-slate-500"
+                      >원본 412 KB</span
+                    >
                   </div>
                 </div>
               </div>
 
-              <div class="w-full rounded-lg border border-emerald-300 bg-emerald-50 px-3 py-2 text-center text-xs font-medium text-emerald-900">
-                🚀 실시간 응답: <strong class="line-through text-slate-400 font-normal">412 KB (PNG)</strong> ➔ <strong id="size-badge" class="font-bold text-emerald-700">~12 KB (WebP, -97%)</strong>
+              <div
+                class="w-full rounded-lg border border-emerald-300 bg-emerald-50 px-3 py-2 text-center text-xs font-medium text-emerald-900"
+              >
+                🚀 실시간 응답:
+                <strong class="line-through text-slate-400 font-normal"
+                  >412 KB (PNG)</strong
+                >
+                ➔
+                <strong id="size-badge" class="font-bold text-emerald-700"
+                  >~12 KB (WebP, -97%)</strong
+                >
               </div>
             </div>
           </div>
@@ -329,59 +593,118 @@ <h1 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-5xl text-slate-95
 
       <!-- 쿼리 파라미터 규격 매뉴얼 (Query Parameter Reference Manual) -->
       <section aria-label="쿼리 파라미터 매뉴얼" class="mt-12">
-        <div class="-mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-7 shadow-none sm:sticker-shadow">
-          <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-4">
+        <div
+          class="-mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-7 shadow-none sm:sticker-shadow"
+        >
+          <div
+            class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-4"
+          >
             <div>
-              <div class="inline-block rounded-md border border-slate-900 bg-amber-200 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-slate-900">
+              <div
+                class="inline-block rounded-md border border-slate-900 bg-amber-200 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-slate-900"
+              >
                 Specification 📖
               </div>
               <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-950">
                 이미지 프록시 쿼리 파라미터 규칙
               </h2>
             </div>
-            <span class="font-mono text-xs text-slate-500">Manual &amp; API Reference</span>
+            <span class="font-mono text-xs text-slate-500"
+              >Manual &amp; API Reference</span
+            >
           </div>
 
           <div class="mt-5 overflow-x-auto">
             <table class="w-full text-left text-xs border-collapse">
               <thead>
-                <tr class="border-b-2 border-slate-900 bg-slate-50 font-mono text-[11px] text-slate-700">
+                <tr
+                  class="border-b-2 border-slate-900 bg-slate-50 font-mono text-[11px] text-slate-700"
+                >
                   <th class="py-2.5 px-3 font-extrabold">이름</th>
                   <th class="py-2.5 px-3 font-extrabold">기본값</th>
                   <th class="py-2.5 px-3 font-extrabold">범위 / 허용 값</th>
                   <th class="py-2.5 px-3 font-extrabold">설명</th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
+              <tbody
+                class="divide-y divide-slate-100 font-medium text-slate-700"
+              >
                 <tr class="hover:bg-slate-50/70 transition">
-                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">w</td>
+                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">
+                    w
+                  </td>
                   <td class="py-3 px-3 font-mono text-slate-500">0</td>
                   <td class="py-3 px-3 font-mono text-slate-600">0 ~ 2000</td>
-                  <td class="py-3 px-3">너비(px). <code class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800">0</code>이면 비율에 맞춰 자동 계산</td>
+                  <td class="py-3 px-3">
+                    너비(px).
+                    <code
+                      class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800"
+                      >0</code
+                    >이면 비율에 맞춰 자동 계산
+                  </td>
                 </tr>
                 <tr class="hover:bg-slate-50/70 transition">
-                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">h</td>
+                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">
+                    h
+                  </td>
                   <td class="py-3 px-3 font-mono text-slate-500">0</td>
                   <td class="py-3 px-3 font-mono text-slate-600">0 ~ 2000</td>
-                  <td class="py-3 px-3">높이(px). <code class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800">0</code>이면 비율에 맞춰 자동 계산</td>
+                  <td class="py-3 px-3">
+                    높이(px).
+                    <code
+                      class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800"
+                      >0</code
+                    >이면 비율에 맞춰 자동 계산
+                  </td>
                 </tr>
                 <tr class="hover:bg-slate-50/70 transition">
-                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">fit</td>
+                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">
+                    fit
+                  </td>
                   <td class="py-3 px-3 font-mono text-slate-500">fit</td>
-                  <td class="py-3 px-3 font-mono text-slate-600">fit / fill / auto</td>
-                  <td class="py-3 px-3">리사이징 방식. 그 외 값은 <code class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800">fit</code>으로 처리</td>
+                  <td class="py-3 px-3 font-mono text-slate-600">
+                    fit / fill / auto
+                  </td>
+                  <td class="py-3 px-3">
+                    리사이징 방식. 그 외 값은
+                    <code
+                      class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800"
+                      >fit</code
+                    >으로 처리
+                  </td>
                 </tr>
                 <tr class="hover:bg-slate-50/70 transition">
-                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">q</td>
+                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">
+                    q
+                  </td>
                   <td class="py-3 px-3 font-mono text-slate-500">80</td>
                   <td class="py-3 px-3 font-mono text-slate-600">1 ~ 100</td>
-                  <td class="py-3 px-3">품질. 없거나 <code class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800">0</code>이면 80으로 처리</td>
+                  <td class="py-3 px-3">
+                    품질. 없거나
+                    <code
+                      class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800"
+                      >0</code
+                    >이면 80으로 처리
+                  </td>
                 </tr>
                 <tr class="hover:bg-slate-50/70 transition">
-                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">f</td>
-                  <td class="py-3 px-3 font-mono text-slate-500">Accept 헤더</td>
-                  <td class="py-3 px-3 font-mono text-slate-600">avif / webp / jpeg / png</td>
-                  <td class="py-3 px-3">출력 포맷을 직접 지정. 브라우저의 <code class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800">Accept</code> 헤더보다 우선 적용</td>
+                  <td class="py-3 px-3 font-mono font-bold text-indigo-700">
+                    f
+                  </td>
+                  <td class="py-3 px-3 font-mono text-slate-500">
+                    Accept 헤더
+                  </td>
+                  <td class="py-3 px-3 font-mono text-slate-600">
+                    avif / webp / jpeg / png
+                  </td>
+                  <td class="py-3 px-3">
+                    출력 포맷을 직접 지정. 브라우저의
+                    <code
+                      class="rounded bg-slate-100 px-1 py-0.5 font-mono text-slate-800"
+                      >Accept</code
+                    >
+                    헤더보다 우선 적용
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -390,14 +713,23 @@ <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-950">
       </section>
 
       <!-- 주요 가치 제안 (2개 핵심 항목) -->
-      <section aria-label="이미지 프록시의 역할" class="mt-12 grid gap-6 sm:grid-cols-2">
-        <article class="flex flex-col justify-between -mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-6 sm:p-7 shadow-none sm:sticker-shadow transition-transform hover:-translate-y-1">
+      <section
+        aria-label="이미지 프록시의 역할"
+        class="mt-12 grid gap-6 sm:grid-cols-2"
+      >
+        <article
+          class="flex flex-col justify-between -mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-6 sm:p-7 shadow-none sm:sticker-shadow transition-transform hover:-translate-y-1"
+        >
           <div>
             <div class="flex items-center justify-between">
-              <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl border-2 border-slate-900 bg-rose-200 font-mono text-sm font-black text-slate-900 sticker-shadow-sm">
+              <span
+                class="inline-flex h-9 w-9 items-center justify-center rounded-xl border-2 border-slate-900 bg-rose-200 font-mono text-sm font-black text-slate-900 sticker-shadow-sm"
+              >
                 01
               </span>
-              <span class="rotate-2 rounded-md border border-slate-900 bg-pink-100 px-2 py-0.5 text-[11px] font-bold text-slate-800">
+              <span
+                class="rotate-2 rounded-md border border-slate-900 bg-pink-100 px-2 py-0.5 text-[11px] font-bold text-slate-800"
+              >
                 Zero Asset Duplication ✂️
               </span>
             </div>
@@ -405,23 +737,36 @@ <h2 class="mt-5 text-xl font-bold tracking-tight text-slate-950">
               포토샵 리사이즈 작업을 없앱니다
             </h2>
             <p class="mt-3 text-sm leading-relaxed text-slate-600 font-medium">
-              필요한 크기를 이미지 URL에서 지정해, 크기별 파일을 따로 만들지 않습니다.
+              필요한 크기를 이미지 URL에서 지정해, 크기별 파일을 따로 만들지
+              않습니다.
             </p>
           </div>
 
-          <div class="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-3 font-mono text-xs text-slate-700">
-            <div class="text-rose-600 line-through">❌ cute-whale-100.png, cute-whale-300.png...</div>
-            <div class="mt-1 font-semibold text-emerald-600">✅ ?w=320&amp;f=webp 하나로 자동 생성 &amp; 캐싱</div>
+          <div
+            class="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-3 font-mono text-xs text-slate-700"
+          >
+            <div class="text-rose-600 line-through">
+              ❌ cute-whale-100.png, cute-whale-300.png...
+            </div>
+            <div class="mt-1 font-semibold text-emerald-600">
+              ✅ ?w=320&amp;f=webp 하나로 자동 생성 &amp; 캐싱
+            </div>
           </div>
         </article>
 
-        <article class="flex flex-col justify-between -mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-6 sm:p-7 shadow-none sm:sticker-shadow transition-transform hover:-translate-y-1">
+        <article
+          class="flex flex-col justify-between -mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-6 sm:p-7 shadow-none sm:sticker-shadow transition-transform hover:-translate-y-1"
+        >
           <div>
             <div class="flex items-center justify-between">
-              <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl border-2 border-slate-900 bg-amber-200 font-mono text-sm font-black text-slate-900 sticker-shadow-sm">
+              <span
+                class="inline-flex h-9 w-9 items-center justify-center rounded-xl border-2 border-slate-900 bg-amber-200 font-mono text-sm font-black text-slate-900 sticker-shadow-sm"
+              >
                 02
               </span>
-              <span class="-rotate-1 rounded-md border border-slate-900 bg-amber-100 px-2 py-0.5 text-[11px] font-bold text-slate-800">
+              <span
+                class="-rotate-1 rounded-md border border-slate-900 bg-amber-100 px-2 py-0.5 text-[11px] font-bold text-slate-800"
+              >
                 CDN Edge Offloading 🌍
               </span>
             </div>
@@ -433,13 +778,20 @@ <h2 class="mt-5 text-xl font-bold tracking-tight text-slate-950">
             </p>
           </div>
 
-          <div class="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-3 font-mono text-xs text-slate-700">
+          <div
+            class="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-3 font-mono text-xs text-slate-700"
+          >
             <div class="flex items-center justify-between text-[11px]">
               <span class="text-slate-500">Origin Server Load</span>
               <span class="font-bold text-emerald-600">0% (Edge Cached)</span>
             </div>
-            <div class="mt-1.5 h-1.5 w-full rounded-full bg-slate-200 overflow-hidden">
-              <div class="h-full bg-emerald-500 rounded-full" style="width: 99.4%"></div>
+            <div
+              class="mt-1.5 h-1.5 w-full rounded-full bg-slate-200 overflow-hidden"
+            >
+              <div
+                class="h-full bg-emerald-500 rounded-full"
+                style="width: 99.4%"
+              ></div>
             </div>
           </div>
         </article>
@@ -447,25 +799,37 @@ <h2 class="mt-5 text-xl font-bold tracking-tight text-slate-950">
 
       <!-- 생태계 & 패키지 (Ecosystem & Integrations) -->
       <section aria-label="생태계 및 연동 라이브러리" class="mt-12">
-        <div class="-mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-7 shadow-none sm:sticker-shadow">
-          <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-4">
+        <div
+          class="-mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-7 shadow-none sm:sticker-shadow"
+        >
+          <div
+            class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-4"
+          >
             <div>
-              <div class="inline-block rounded-md border border-slate-900 bg-violet-200 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-slate-900">
+              <div
+                class="inline-block rounded-md border border-slate-900 bg-violet-200 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-slate-900"
+              >
                 Ecosystem 📦
               </div>
               <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-950">
                 연동 패키지 &amp; 생태계
               </h2>
             </div>
-            <span class="font-mono text-xs text-slate-500">Packages &amp; Real-world Usage</span>
+            <span class="font-mono text-xs text-slate-500"
+              >Packages &amp; Real-world Usage</span
+            >
           </div>
 
           <div class="mt-5 grid gap-4 sm:grid-cols-2">
             <!-- Laravel ImageForge 카드 -->
-            <div class="flex flex-col justify-between rounded-xl border-2 border-slate-900 bg-slate-50/60 p-4 transition-all hover:bg-white hover:-translate-y-0.5">
+            <div
+              class="flex flex-col justify-between rounded-xl border-2 border-slate-900 bg-slate-50/60 p-4 transition-all hover:bg-white hover:-translate-y-0.5"
+            >
               <div>
                 <div class="flex items-center justify-between gap-2">
-                  <span class="inline-flex items-center gap-1.5 rounded-md border border-slate-900 bg-rose-100 px-2 py-0.5 text-[11px] font-mono font-bold text-rose-900">
+                  <span
+                    class="inline-flex items-center gap-1.5 rounded-md border border-slate-900 bg-rose-100 px-2 py-0.5 text-[11px] font-mono font-bold text-rose-900"
+                  >
                     <span class="h-1.5 w-1.5 rounded-full bg-rose-500"></span>
                     Laravel
                   </span>
@@ -476,8 +840,19 @@ <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-950">
                     class="inline-flex items-center gap-1 text-[11px] font-mono font-bold text-slate-600 hover:text-slate-950 underline underline-offset-2"
                   >
                     <span>GitHub</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-3 w-3"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                      />
                     </svg>
                   </a>
                 </div>
@@ -492,15 +867,21 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
                     replworks/laravel-imageforge
                   </a>
                 </h3>
-                <p class="mt-1.5 text-xs text-slate-600 leading-relaxed font-medium">
-                  Image Forge를 Laravel 애플리케이션에서 간편하게 연동하고 최적화 URL을 생성하는 패키지입니다.
+                <p
+                  class="mt-1.5 text-xs text-slate-600 leading-relaxed font-medium"
+                >
+                  Image Forge를 Laravel 애플리케이션에서 간편하게 연동하고
+                  최적화 URL을 생성하는 패키지입니다.
                 </p>
               </div>
 
               <!-- 도입 사례 뱃지 / 썸네일 -->
               <div class="mt-4 pt-3.5 border-t border-slate-200/80">
                 <div class="flex items-center justify-between text-xs mb-2.5">
-                  <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">실제 적용 서비스</span>
+                  <span
+                    class="text-[11px] font-bold text-slate-500 uppercase tracking-wider"
+                    >실제 적용 서비스</span
+                  >
                   <a
                     href="https://wifinote.net"
                     target="_blank"
@@ -508,8 +889,19 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
                     class="inline-flex items-center gap-1 font-mono text-[11px] font-bold text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-2 py-0.5 rounded border border-indigo-200 transition"
                   >
                     <span>wifinote.net</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-2.5 w-2.5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                      />
                     </svg>
                   </a>
                 </div>
@@ -528,7 +920,9 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
                     width="640"
                     height="335"
                   />
-                  <div class="absolute bottom-1.5 right-1.5 rounded bg-slate-900/80 px-1.5 py-0.5 font-mono text-[9px] font-bold text-emerald-300 backdrop-blur-xs">
+                  <div
+                    class="absolute bottom-1.5 right-1.5 rounded bg-slate-900/80 px-1.5 py-0.5 font-mono text-[9px] font-bold text-emerald-300 backdrop-blur-xs"
+                  >
                     ⚡ img.repl.net (w=480, webp)
                   </div>
                 </a>
@@ -539,18 +933,38 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
       </section>
 
       <!-- 하단 푸터 (L2 단일 링크 요구사항 만족) -->
-      <footer class="mt-auto pt-14 pb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-t border-slate-200 text-sm text-slate-500 font-medium">
-        <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2 order-2 sm:order-1">
+      <footer
+        class="mt-auto pt-14 pb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-t border-slate-200 text-sm text-slate-500 font-medium"
+      >
+        <div
+          class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2 order-2 sm:order-1"
+        >
           <span class="order-2 sm:order-1">
-            © <a href="https://www.repl.net" target="_blank" rel="noopener noreferrer" class="font-semibold text-slate-700 underline underline-offset-4 decoration-slate-300 hover:text-slate-950">REPL Works</a>
+            ©
+            <a
+              href="https://www.repl.net"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="font-semibold text-slate-700 underline underline-offset-4 decoration-slate-300 hover:text-slate-950"
+              >REPL Works</a
+            >
           </span>
-          <span class="hidden sm:inline text-slate-300 sm:order-2" aria-hidden="true">•</span>
-          <span class="order-1 sm:order-3 text-slate-500">Fast, Lightweight Edge Image Proxy</span>
+          <span
+            class="hidden sm:inline text-slate-300 sm:order-2"
+            aria-hidden="true"
+            >•</span
+          >
+          <span class="order-1 sm:order-3 text-slate-500"
+            >Fast, Lightweight Edge Image Proxy</span
+          >
         </div>
 
         <div class="order-1 sm:order-2">
           운영 도구
-          <a class="ml-2 font-mono font-bold text-slate-800 underline underline-offset-4 hover:text-indigo-600" href="/purge/">
+          <a
+            class="ml-2 font-mono font-bold text-slate-800 underline underline-offset-4 hover:text-indigo-600"
+            href="/purge/"
+          >
             /purge
           </a>
         </div>
@@ -560,123 +974,161 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
     <!-- 인터랙티브 플레이그라운드 바닐라 스크립트 -->
     <script>
       (function () {
-        let currentW = '320';
-        let currentF = 'webp';
-        let currentFit = 'fit';
-        let currentQ = '80';
+        let currentW = "320";
+        let currentF = "webp";
+        let currentFit = "fit";
+        let currentQ = "80";
 
-        const baseUrl = 'https://img.repl.net/repl/art/samples/cute-whale.png';
+        const baseUrl = "https://img.repl.net/repl/art/samples/cute-whale.png";
 
-        const paramDisplay = document.getElementById('param-display');
-        const dimensionBadge = document.getElementById('dimension-badge');
-        const sampleImage = document.getElementById('sample-image');
-        const previewLabel = document.getElementById('preview-label');
-        const sizeBadge = document.getElementById('size-badge');
-        const copyBtn = document.getElementById('copy-btn');
-        const copyBtnText = document.getElementById('copy-btn-text');
+        const paramDisplay = document.getElementById("param-display");
+        const dimensionBadge = document.getElementById("dimension-badge");
+        const sampleImage = document.getElementById("sample-image");
+        const previewLabel = document.getElementById("preview-label");
+        const sizeBadge = document.getElementById("size-badge");
+        const copyBtn = document.getElementById("copy-btn");
+        const copyBtnText = document.getElementById("copy-btn-text");
 
         const sizeEstimateMap = {
-          '120': { 'webp': '~4 KB (-99%)', 'avif': '~3 KB (-99.2%)', 'jpeg': '~6 KB (-98.5%)', 'png': '~35 KB (-91.5%)', '': '~4 KB (-99%)' },
-          '240': { 'webp': '~8 KB (-98%)', 'avif': '~6 KB (-98.5%)', 'jpeg': '~14 KB (-96.6%)', 'png': '~80 KB (-80.5%)', '': '~8 KB (-98%)' },
-          '320': { 'webp': '~12 KB (-97%)', 'avif': '~8 KB (-98%)', 'jpeg': '~20 KB (-95.1%)', 'png': '~135 KB (-67.2%)', '': '~12 KB (-97%)' },
-          '480': { 'webp': '~22 KB (-94.6%)', 'avif': '~15 KB (-96.3%)', 'jpeg': '~38 KB (-90.7%)', 'png': '~240 KB (-41.7%)', '': '~22 KB (-94.6%)' },
-          '640': { 'webp': '~36 KB (-91.2%)', 'avif': '~24 KB (-94.1%)', 'jpeg': '~60 KB (-85.4%)', 'png': '~412 KB (0%)', '': '~36 KB (-91.2%)' }
+          120: {
+            webp: "~4 KB (-99%)",
+            avif: "~3 KB (-99.2%)",
+            jpeg: "~6 KB (-98.5%)",
+            png: "~35 KB (-91.5%)",
+            "": "~4 KB (-99%)",
+          },
+          240: {
+            webp: "~8 KB (-98%)",
+            avif: "~6 KB (-98.5%)",
+            jpeg: "~14 KB (-96.6%)",
+            png: "~80 KB (-80.5%)",
+            "": "~8 KB (-98%)",
+          },
+          320: {
+            webp: "~12 KB (-97%)",
+            avif: "~8 KB (-98%)",
+            jpeg: "~20 KB (-95.1%)",
+            png: "~135 KB (-67.2%)",
+            "": "~12 KB (-97%)",
+          },
+          480: {
+            webp: "~22 KB (-94.6%)",
+            avif: "~15 KB (-96.3%)",
+            jpeg: "~38 KB (-90.7%)",
+            png: "~240 KB (-41.7%)",
+            "": "~22 KB (-94.6%)",
+          },
+          640: {
+            webp: "~36 KB (-91.2%)",
+            avif: "~24 KB (-94.1%)",
+            jpeg: "~60 KB (-85.4%)",
+            png: "~412 KB (0%)",
+            "": "~36 KB (-91.2%)",
+          },
         };
 
         function buildQueryString() {
           const parts = [];
-          if (currentW && currentW !== '0') parts.push('w=' + currentW);
-          if (currentFit && currentFit !== 'fit') parts.push('fit=' + currentFit);
-          if (currentF) parts.push('f=' + currentF);
-          if (currentQ && currentQ !== '80') parts.push('q=' + currentQ);
-          return parts.length > 0 ? '?' + parts.join('&') : '';
+          if (currentW && currentW !== "0") parts.push("w=" + currentW);
+          if (currentFit && currentFit !== "fit")
+            parts.push("fit=" + currentFit);
+          if (currentF) parts.push("f=" + currentF);
+          if (currentQ && currentQ !== "80") parts.push("q=" + currentQ);
+          return parts.length > 0 ? "?" + parts.join("&") : "";
         }
 
         function updateUI() {
           const queryString = buildQueryString();
           if (paramDisplay) {
-            paramDisplay.textContent = queryString || ' (파라미터 없음, 기본값)';
+            paramDisplay.textContent =
+              queryString || " (파라미터 없음, 기본값)";
           }
           if (dimensionBadge) {
-            dimensionBadge.textContent = currentW + ' px';
+            dimensionBadge.textContent = currentW + " px";
           }
           if (sampleImage) {
             sampleImage.src = baseUrl + queryString;
             // width 조절
-            const displayWidth = Math.min(Math.max(parseInt(currentW, 10) / 2, 80), 220);
-            sampleImage.style.maxWidth = displayWidth + 'px';
+            const displayWidth = Math.min(
+              Math.max(parseInt(currentW, 10) / 2, 80),
+              220,
+            );
+            sampleImage.style.maxWidth = displayWidth + "px";
           }
           if (previewLabel) {
-            previewLabel.textContent = currentW + 'px • ' + (currentF || 'auto') + ' • ' + currentFit;
+            previewLabel.textContent =
+              currentW + "px • " + (currentF || "auto") + " • " + currentFit;
           }
           if (sizeBadge && sizeEstimateMap[currentW]) {
-            const estimate = sizeEstimateMap[currentW][currentF] || '~15 KB';
+            const estimate = sizeEstimateMap[currentW][currentF] || "~15 KB";
             sizeBadge.textContent = estimate;
           }
         }
 
         // 너비 버튼 (w)
-        document.querySelectorAll('.w-btn').forEach(function (btn) {
-          btn.addEventListener('click', function () {
-            document.querySelectorAll('.w-btn').forEach(function (b) {
-              b.classList.remove('bg-indigo-100', 'text-indigo-950');
-              b.classList.add('bg-white', 'text-slate-800');
+        document.querySelectorAll(".w-btn").forEach(function (btn) {
+          btn.addEventListener("click", function () {
+            document.querySelectorAll(".w-btn").forEach(function (b) {
+              b.classList.remove("bg-indigo-100", "text-indigo-950");
+              b.classList.add("bg-white", "text-slate-800");
             });
-            btn.classList.remove('bg-white', 'text-slate-800');
-            btn.classList.add('bg-indigo-100', 'text-indigo-950');
-            currentW = btn.getAttribute('data-w') || '320';
+            btn.classList.remove("bg-white", "text-slate-800");
+            btn.classList.add("bg-indigo-100", "text-indigo-950");
+            currentW = btn.getAttribute("data-w") || "320";
             updateUI();
           });
         });
 
         // 포맷 버튼 (f)
-        document.querySelectorAll('.f-btn').forEach(function (btn) {
-          btn.addEventListener('click', function () {
-            document.querySelectorAll('.f-btn').forEach(function (b) {
-              b.classList.remove('bg-indigo-100', 'text-indigo-950');
-              b.classList.add('bg-white', 'text-slate-800');
+        document.querySelectorAll(".f-btn").forEach(function (btn) {
+          btn.addEventListener("click", function () {
+            document.querySelectorAll(".f-btn").forEach(function (b) {
+              b.classList.remove("bg-indigo-100", "text-indigo-950");
+              b.classList.add("bg-white", "text-slate-800");
             });
-            btn.classList.remove('bg-white', 'text-slate-800');
-            btn.classList.add('bg-indigo-100', 'text-indigo-950');
-            currentF = btn.getAttribute('data-f') || '';
+            btn.classList.remove("bg-white", "text-slate-800");
+            btn.classList.add("bg-indigo-100", "text-indigo-950");
+            currentF = btn.getAttribute("data-f") || "";
             updateUI();
           });
         });
 
         // 리사이징 방식 버튼 (fit)
-        document.querySelectorAll('.fit-btn').forEach(function (btn) {
-          btn.addEventListener('click', function () {
-            document.querySelectorAll('.fit-btn').forEach(function (b) {
-              b.classList.remove('bg-indigo-100', 'text-indigo-950');
-              b.classList.add('bg-white', 'text-slate-800');
+        document.querySelectorAll(".fit-btn").forEach(function (btn) {
+          btn.addEventListener("click", function () {
+            document.querySelectorAll(".fit-btn").forEach(function (b) {
+              b.classList.remove("bg-indigo-100", "text-indigo-950");
+              b.classList.add("bg-white", "text-slate-800");
             });
-            btn.classList.remove('bg-white', 'text-slate-800');
-            btn.classList.add('bg-indigo-100', 'text-indigo-950');
-            currentFit = btn.getAttribute('data-fit') || 'fit';
+            btn.classList.remove("bg-white", "text-slate-800");
+            btn.classList.add("bg-indigo-100", "text-indigo-950");
+            currentFit = btn.getAttribute("data-fit") || "fit";
             updateUI();
           });
         });
 
         // 품질 버튼 (q)
-        document.querySelectorAll('.q-btn').forEach(function (btn) {
-          btn.addEventListener('click', function () {
-            document.querySelectorAll('.q-btn').forEach(function (b) {
-              b.classList.remove('bg-indigo-100', 'text-indigo-950');
-              b.classList.add('bg-white', 'text-slate-800');
+        document.querySelectorAll(".q-btn").forEach(function (btn) {
+          btn.addEventListener("click", function () {
+            document.querySelectorAll(".q-btn").forEach(function (b) {
+              b.classList.remove("bg-indigo-100", "text-indigo-950");
+              b.classList.add("bg-white", "text-slate-800");
             });
-            btn.classList.remove('bg-white', 'text-slate-800');
-            btn.classList.add('bg-indigo-100', 'text-indigo-950');
-            currentQ = btn.getAttribute('data-q') || '80';
+            btn.classList.remove("bg-white", "text-slate-800");
+            btn.classList.add("bg-indigo-100", "text-indigo-950");
+            currentQ = btn.getAttribute("data-q") || "80";
             updateUI();
           });
         });
 
         // URL 복사 버튼
         if (copyBtn) {
-          copyBtn.addEventListener('click', function () {
+          copyBtn.addEventListener("click", function () {
             const url = baseUrl + buildQueryString();
             if (navigator.clipboard && navigator.clipboard.writeText) {
-              navigator.clipboard.writeText(url).then(showCopied, function () { fallbackCopy(url); });
+              navigator.clipboard.writeText(url).then(showCopied, function () {
+                fallbackCopy(url);
+              });
             } else {
               fallbackCopy(url);
             }
@@ -684,14 +1136,14 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
         }
 
         function fallbackCopy(text) {
-          const textarea = document.createElement('textarea');
+          const textarea = document.createElement("textarea");
           textarea.value = text;
-          textarea.style.position = 'fixed';
-          textarea.style.opacity = '0';
+          textarea.style.position = "fixed";
+          textarea.style.opacity = "0";
           document.body.appendChild(textarea);
           textarea.select();
           try {
-            document.execCommand('copy');
+            document.execCommand("copy");
             showCopied();
           } catch (e) {}
           document.body.removeChild(textarea);
@@ -700,11 +1152,11 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
         function showCopied() {
           if (copyBtnText) {
             const original = copyBtnText.textContent;
-            copyBtnText.textContent = '복사 완료! ✨';
-            copyBtn.classList.add('bg-emerald-300');
+            copyBtnText.textContent = "복사 완료! ✨";
+            copyBtn.classList.add("bg-emerald-300");
             setTimeout(function () {
               copyBtnText.textContent = original;
-              copyBtn.classList.remove('bg-emerald-300');
+              copyBtn.classList.remove("bg-emerald-300");
             }, 1800);
           }
         }

From af4eca3f0123c2c2ab3601694b42beb4877a47c9 Mon Sep 17 00:00:00 2001
From: Samgu Lee <cable8mm@gmail.com>
Date: Sun, 11 Oct 2026 14:59:27 +0900
Subject: [PATCH 2/2] feat: enhance footer with contact email link and adjust
 order of elements

---
 index.html | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index f8744d1..1e2ff06 100644
--- a/index.html
+++ b/index.html
@@ -939,7 +939,7 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
         <div
           class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2 order-2 sm:order-1"
         >
-          <span class="order-2 sm:order-1">
+          <span class="order-3 sm:order-1">
             ©
             <a
               href="https://www.repl.net"
@@ -954,7 +954,32 @@ <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
             aria-hidden="true"
             >•</span
           >
-          <span class="order-1 sm:order-3 text-slate-500"
+          <a
+            href="mailto:works@repl.net"
+            class="order-2 sm:order-3 inline-flex items-center gap-1.5 font-mono text-xs sm:text-sm underline underline-offset-4 decoration-slate-300 hover:text-slate-950"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-3.5 w-3.5 text-slate-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              />
+            </svg>
+            <span>works@repl.net</span>
+          </a>
+          <span
+            class="hidden sm:inline text-slate-300 sm:order-4"
+            aria-hidden="true"
+            >•</span
+          >
+          <span class="order-1 sm:order-5 text-slate-500"
             >Fast, Lightweight Edge Image Proxy</span
           >
         </div>