diff --git a/data/furniture.js b/data/furniture.js
index 9ede82d..df92630 100644
--- a/data/furniture.js
+++ b/data/furniture.js
@@ -1,60 +1,4 @@
 const furniture = [
-    {
-        id: 'h2j5k8l1',
-        title: 'Artek Stool 60 Birch',
-        price: 280000,
-        currency: '₩',
-        category: 'Furniture',
-        status: '판매중',
-        description: '알바 알토 디자인, 핀란드 정품, 비치 내츄럴',
-        fullDescription: [
-            '북유럽 디자인의 아이콘, 아르텍 스툴 60입니다.',
-            '편집숍에서 구매한 핀란드 생산 정품입니다.',
-            '',
-            '상태:',
-            '• 상판 미세한 생활 기스 외 찍힘 없음',
-            '• 다리 연결부 흔들림 없이 견고함',
-            '',
-            '인테리어용으로만 두어 실제 앉은 횟수는 적습니다.',
-        ],
-        images: ['/images/furniture/h2j5k8l1_01.jpg', '/images/furniture/h2j5k8l1_02.jpg'],
-        customTag: '정품',
-        specs: {
-            purchaseDate: '2023-05',
-            condition: 'Used (Good)',
-            isVerified: true,
-        },
-        tags: ['Chair', 'Finland', 'Iconic'],
-        createdAt: '2025-02-01',
-        updatedAt: '2025-02-01',
-    },
-    {
-        id: 'f9d3s7a4',
-        title: 'Hermer Miller Sayl Chair',
-        price: 650000,
-        currency: '₩',
-        category: 'Furniture',
-        status: '판매중',
-        description: '화이트 프레임, 오션블루 메쉬, 풀기능형',
-        fullDescription: [
-            '허먼밀러 세일 체어 풀옵션 모델입니다.',
-            '포워드 틸팅 및 팔걸이 조절 기능이 모두 포함되어 있습니다.',
-            '',
-            '판매 사유:',
-            '이사 후 방 분위기와 맞지 않아 다른 의자로 교체하게 되었습니다.',
-            '',
-            '좌판 오염 방지를 위해 항상 방석을 깔고 사용했습니다.',
-        ],
-        images: ['/images/furniture/f9d3s7a4_01.jpg', '/images/furniture/f9d3s7a4_02.jpg'],
-        customTag: '풀옵션',
-        specs: {
-            purchaseDate: '2022-09',
-            condition: 'Used (Mint)',
-            isVerified: true,
-        },
-        tags: ['Office', 'HermanMiller', 'Chair'],
-        createdAt: '2025-02-03',
-        updatedAt: '2025-02-03',
-    }
+   
 ];
 export default furniture;
\ No newline at end of file
diff --git a/data/tech.js b/data/tech.js
index 1da1bbd..6ec77b1 100644
--- a/data/tech.js
+++ b/data/tech.js
@@ -1,62 +1,4 @@
 const tech = [
-    {
-        id: 'k7r2p9xm',
-        title: 'Keychron Q1 Knob Version',
-        price: 185000,
-        currency: '₩',
-        category: 'Tech',
-        status: '판매중',
-        description: '풀윤활 작업 완료, 노브 버전, 블루 스위치',
-        fullDescription: [
-            '키크론 Q1 QMK 커스텀 기계식 키보드입니다.',
-            '모든 스위치와 스테빌라이저 풀윤활 작업을 마쳐 서걱임이 없습니다.',
-            '',
-            '특징:',
-            '• CNC 알루미늄 바디 (네이비 컬러)',
-            '• 사우스페이싱 RGB LED',
-            '• 가스켓 마운트 구조로 쫀득한 타건감',
-            '',
-            '실사용 기간이 짧아 하우징에 스크래치 전혀 없으며,',
-            '풀박스 구성품 그대로 보관 중입니다.',
-        ],
-        images: ['/images/tech/k7r2p9xm_01.jpg', '/images/tech/k7r2p9xm_02.jpg'],
-        customTag: '풀윤활완료',
-        specs: {
-            purchaseDate: '2024-01',
-            condition: 'Like New (S-Grade)',
-            isVerified: true,
-        },
-        tags: ['Keyboard', 'Mechanical', 'Custom'],
-        createdAt: '2025-01-15',
-        updatedAt: '2025-01-15',
-    },
-    {
-        id: 'n3m8v2ws',
-        title: 'Sony WH-1000XM5 Black',
-        price: 320000,
-        currency: '₩',
-        category: 'Tech',
-        status: '판매완료',
-        description: '정품 등록 가능, 배터리 상태 최상',
-        fullDescription: [
-            '소니의 최신 노이즈 캔슬링 헤드폰 XM5 블랙입니다.',
-            '실내에서만 가끔 사용하여 이어패드 갈라짐이나 오염 없습니다.',
-            '',
-            '구성품:',
-            '• 헤드폰 본체',
-            '• 전용 하드 케이스',
-            '• 미사용 오디오 케이블 및 충전 케이블',
-        ],
-        images: ['/images/tech/n3m8v2ws_01.jpg', '/images/tech/n3m8v2ws_02.jpg', '/images/tech/n3m8v2ws_03.jpg'],
-        customTag: '급매',
-        specs: {
-            purchaseDate: '2023-11',
-            condition: 'Mint (A-Grade)',
-            isVerified: true,
-        },
-        tags: ['Audio', 'Headphones', 'Sony'],
-        createdAt: '2025-01-20',
-        updatedAt: '2025-01-20',
-    }
+    
 ];
 export default tech;
\ No newline at end of file
diff --git a/index.html b/index.html
index 1793e94..03f3331 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,8 @@
     <head>
         <meta charset="utf-8" />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-        <title>Minimalist Product Catalog</title>
+        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
+        <title>zenn's inventory</title>
         <!-- Tailwind CSS -->
         <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
         <!-- Google Fonts: Inter -->
@@ -38,12 +39,12 @@
             }
         </script>
         <style>
-                        .material-symbols-outlined {
+                        /* .material-symbols-outlined {
                             font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
                         }
                         body {
                             font-family: 'Inter', sans-serif;
-                        }
+                        } */
                         /* 스크롤바 완전히 숨기기 */
                         .no-scrollbar::-webkit-scrollbar {
                             display: none;
@@ -57,18 +58,18 @@
               scroll-snap-type: none;
               overflow-x: hidden;
             }
-            .filter-chip,
+            /* .filter-chip,
             .status-chip {
               @apply px-4 py-2 rounded-full text-sm font-medium transition
                      border border-slate-200 dark:border-slate-700
                      bg-slate-50 dark:bg-slate-800
                      text-slate-700 dark:text-slate-300;
-            }
+            } */
 
-            .filter-chip.active,
+            /* .filter-chip.active,
             .status-chip.active {
               @apply bg-primary text-white border-primary;
-            }
+            } */
         </style>
     </head>
     <body class="bg-background-light dark:bg-background-dark transition-colors duration-200">
@@ -83,11 +84,6 @@
                             </div>
                             <h2 class="text-lg font-bold leading-tight tracking-tight">sori.inventory</h2>
                         </div>
-                        <!-- <nav class="hidden md:flex items-center gap-8">
-                            <a class="text-slate-900 dark:text-slate-100 text-sm font-medium hover:text-primary transition-colors" href="#">Collection</a>
-                            <a class="text-slate-500 dark:text-slate-400 text-sm font-medium hover:text-primary transition-colors" href="#">Tech</a>
-                            <a class="text-slate-500 dark:text-slate-400 text-sm font-medium hover:text-primary transition-colors" href="#">Archive</a>
-                        </nav> -->
                     </div>
                     <div class="flex flex-1 justify-end gap-4 items-center">
                         <label class="hidden sm:flex flex-col min-w-40 !h-10 max-w-64">
@@ -98,10 +94,10 @@
                                 <input id="search-input" class="form-input flex w-full min-w-0 flex-1 border-none bg-transparent focus:outline-0 focus:ring-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 px-3 text-sm font-normal" placeholder="검색어 입력..." value="" />
                             </div>
                         </label>
-                        <!-- <div
-                            class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-9 border border-slate-200 dark:border-slate-700"
-                            data-alt="Portrait of a person profile picture"
-                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBU9SHb3BY7t3kVP81gp9gRzobkneoAoEWyLZTb8OkxnYI0bwWzk_iPiExHkPUCEq1AnlBnrCBOTB0rRx0qdDYF_KML3YtftYZP4bXiA1IY5Y5u0r16HQpYhzTYmQnnY-k52Z6u1DsCkepdeftke78K45WWvluFzOif6NcHRnfe9_LTOTDEwhD4mtsWJOYI5BenKhudyufV9u1SXblfulp5JXYm4MwqYMGLD4iLzXkjiVH5C-0Ry66mfrxkOhME00b-vfj9luQIVtE");'></div> -->
+                        <button id="theme-toggle" class="flex items-center justify-center size-10 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
+                            <span id="theme-toggle-dark-icon" class="material-symbols-outlined hidden">dark_mode</span>
+                            <span id="theme-toggle-light-icon" class="material-symbols-outlined hidden">light_mode</span>
+                        </button>
                     </div>
                 </header>
                 <main class="flex-1">
@@ -137,47 +133,13 @@
 
                     <div class="px-6 md:px-40 flex justify-center">
                         <div class="flex gap-2 p-1 flex-wrap justify-center bg-slate-100 dark:bg-slate-800 rounded-xl">
-                            <!-- <div id="filter-chips" class="flex gap-2 flex-wrap"></div> -->
-                            <!-- <div id="status-chips" class="flex gap-2 flex-wrap mt-2"></div> -->
-                            <!-- <div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg bg-white dark:bg-slate-700 shadow-sm cursor-pointer transition-all">
-                                <p class="text-slate-900 dark:text-white text-sm font-semibold">All Items</p>
-                            </div>
-                            <div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
-                                <p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Available</p>
-                            </div>
-                            <div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
-                                <p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Computing</p>
-                            </div>
-                            <div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
-                                <p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Furniture</p>
-                            </div>
-                            <div class="flex h-9 px-5 shrink-0 items-center justify-center rounded-lg hover:bg-white/50 dark:hover:bg-slate-700/50 cursor-pointer transition-all">
-                                <p class="text-slate-500 dark:text-slate-300 text-sm font-medium">Sold</p>
-                            </div> -->
+                            <!-- filter-chips -->
                         </div>
                     </div>
                     <!-- Product Grid -->
                     <div class="px-6 md:px-40 py-10">
                         <div id="product-grid" class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
                             <!-- Product Item -->
-                            <!-- <div class="group flex flex-col gap-4">
-                                <div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
-                                    <div
-                                        class="w-full h-full bg-center bg-no-repeat bg-cover transform group-hover:scale-105 transition-transform duration-500"
-                                        data-alt="Modern smartphone against minimalist background"
-                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCJW9hNp1uNfX6KZ1fyWZtxOEYdMb7hzRHsDrey6r63fcoisTxQTWWgL99dRcVZQJO1zZyI-HEU6cTgN-YEiXbqpbRZe0LqqC7bKp38y4i901ZuEnOdNXWyNVGNlfOGKG4z571bvFgX7qeVhH8VqsfP_ueAsCyLd9whzNZ-5KdsnR_nYvxO847cVKDMMFJpu347XFXo_QIaZK-Y4RLJAxa7Vv5E6OSrimV6zedPzkwp8yl7FvHbP-QLZ_lbQWZX-Lw6gTBAHiaoAkY");'></div>
-                                    <div class="absolute top-3 left-3">
-                                        <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded bg-primary/10 text-primary backdrop-blur-md border border-primary/20">Available</span>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col gap-1">
-                                    <div class="flex justify-between items-start">
-                                        <h3 class="text-slate-900 dark:text-white text-base font-semibold leading-tight group-hover:text-primary transition-colors">iPhone 13 Pro</h3>
-                                        <p class="text-slate-900 dark:text-white text-base font-bold">$750</p>
-                                    </div>
-                                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">Sierra Blue, 256GB, Pristine</p>
-                                </div>
-                            </div> -->
                         </div>
                     </div>
                     <!-- Pagination -->
@@ -188,73 +150,78 @@
                 <!-- Modal -->
                 <!-- Backdrop Overlay -->
                 <div id="product-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4 md:p-10 hidden" onclick="if(event.target === this) closeModal()">
-                    <!-- Modal Container -->
-                    <div class="relative w-full max-w-6xl max-h-[90vh] min-h-[60vh] bg-white dark:bg-background-dark rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row border border-gray-200 dark:border-gray-800">
+                    <!-- Modal Container: 모바일에서 화면 안에 맞춤 (dvh), 이미지 영역 높이 제한 -->
+                    <div class="relative w-full max-w-6xl max-h-[calc(100dvh-2rem)] md:max-h-[90vh] min-h-0 md:min-h-[60vh] bg-white dark:bg-background-dark rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row border border-gray-200 dark:border-gray-800">
                         <!-- Close Button -->
                         <button onclick="closeModal()" class="absolute top-4 right-4 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-white/80 dark:bg-gray-800/80 backdrop-blur hover:bg-white dark:hover:bg-gray-700 transition-colors shadow-sm">
                             <span class="material-symbols-outlined text-gray-900 dark:text-white">close</span>
                         </button>
-                        <!-- Left: Gallery Section -->
-                        <div class="w-full md:w-3/5 bg-gray-50 dark:bg-gray-900 flex flex-col relative overflow-hidden">
-                            <!-- Main Carousel -->
-                            <div id="modal-main-carousel-container" class="flex-1 overflow-x-auto no-scrollbar flex items-center ml-0 lg:ml-24">
-                                <div id="modal-main-carousel" class="flex h-full w-full">
-                                    <!-- Image -->
-                                    <div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-4">
-                                        <div
-                                            class="w-full h-full bg-center bg-no-repeat bg-contain rounded-lg"
-                                            data-alt="Front view of Sony WH-1000XM5 headphones in black"
-                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc");'></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Carousel Navigation -->
-                            <div id="modal-dots" class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2">
-                                <div class="w-2 h-2 rounded-full bg-primary"></div>
-                                <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                            <!-- Side Thumbnails (Visible on Large Screens) -->
-                            <div id="modal-thumbnails" class="hidden lg:flex absolute left-4 top-1/2 -translate-y-1/2 flex-col gap-3 max-h-[70vh] overflow-y-auto no-scrollbar pr-1"></div>
-                        </div>
-                        <!-- Right: Details Section -->
-                        <div class="w-full md:w-2/5 flex flex-col h-full bg-white dark:bg-background-dark p-6 md:p-10 overflow-y-auto">
-                            <!-- Category/Badge -->
-                            <div class="flex items-center gap-2 mb-4">
-                                <span id="modal-category" class="px-2.5 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-bold uppercase tracking-wider"></span>
-                                <span id="modal-status" class="px-2.5 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-bold uppercase tracking-wider"></span>
-                                <span id="modal-custom-tag" class="hidden px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider"></span>
-                            </div>
-                            <!-- Title -->
-                            <h1 id="modal-title" class="text-[#111418] dark:text-white text-3xl font-black leading-tight tracking-tight mb-2">Sony WH-1000XM5 Noise Canceling Headphones</h1>
-                            <!-- Price -->
-                            <p id="modal-price" class="text-[#111418] dark:text-white text-4xl font-bold mb-8">₩320,000</p>
-                            <!-- Spec List -->
-                            <div class="space-y-0 mb-8">
-                                <div id="modal-date-row" class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
-                                    <span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">구매일자</span>
-                                    <span id="modal-date" class="text-[#111418] dark:text-white text-sm font-semibold">October 2023</span>
-                                </div>
-                                <div class="flex items-center justify-between py-4 border-t border-gray-100 dark:border-gray-800">
-                                    <span class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase tracking-tight">제품 상태</span>
-                                    <div id="modal-condition-row" class="flex items-center justify-between border-t border-gray-100 dark:border-gray-800">
-                                        <div class="flex items-center gap-1.5">
-                                            <svg id="modal-verified-icon" class="w-5 h-5 text-primary hidden" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
-                                                <path d="M9 11l3 3L22 4"></path>
-                                                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
-                                            </svg>
-                                            <span id="modal-condition" class="text-[#111418] dark:text-white text-sm font-semibold"></span>
+                        <!-- Left: Gallery Section (모바일: 상하좌우 패딩으로 이미지 영역 확실히) -->
+                        <div class="w-full md:w-3/5 flex flex-col relative overflow-hidden min-h-0 max-h-[40dvh] md:max-h-none p-3 md:p-0">
+                            <!-- 캐러셀 래퍼: dots는 여기 기준으로 고정, 스크롤은 안쪽만 -->
+                            <div class="relative flex-1 min-h-0 flex ml-0 md:ml-24 rounded-md">
+                                <div id="modal-main-carousel-container" class="flex-1 min-h-0 overflow-x-auto no-scrollbar flex items-center justify-center">
+                                    <div id="modal-main-carousel" class="flex h-full w-full">
+                                        <!-- Image -->
+                                        <div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-4">
+                                            <div
+                                                class="w-full h-full bg-center bg-no-repeat bg-contain rounded-lg"
+                                                data-alt="Front view of Sony WH-1000XM5 headphones in black"
+                                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCOlUeqiUla7LkapcfcrnlTRF-bvdnD2tGTS8zjFgnxr6MNEwmTehjldThx6SCikcIP4-uUK4fbm1EFxj7XKKckJnQr8AunGsdWdgOlH5Fex0ML3uFw5fCnp997fuXQa2ceXdqXfiGDM17AdqB7tx9kxLoxEUXDxROSiH7I2-KFOweIR1-dBljEbeih1fQ1y_HACne_STdXKwGfrkPsHOXz-Ls7-MBW8uD1i5Mz64d3I8z4sO036qIlTNd2Iz4pqPxp7ucNkhrtQoc");'></div>
                                         </div>
                                     </div>
                                 </div>
+                                <!-- Dots: 스크롤 영역 밖에 둬서 슬라이드해도 고정 -->
+                                <div id="modal-dots" class="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 flex md:hidden items-center gap-2 pointer-events-none">
+                                    <div class="w-2 h-2 rounded-full bg-primary"></div>
+                                    <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
                             </div>
-                            <!-- Description -->
-                            <div class="mb-10 min-h-80">
-                                <h3 class="text-[#111418] dark:text-white text-sm font-bold uppercase tracking-widest mb-3">제품 설명</h3>
-                                <p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed"></p>
+                            <!-- Side Thumbnails (Visible on Large Screens) -->
+                            <div id="modal-thumbnails" class="hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 flex-col gap-3 max-h-[70vh] overflow-y-auto no-scrollbar pr-1"></div>
+                        </div>
+                        <!-- Right: Details Section (스크롤 영역 + 하단 버튼 고정) -->
+                        <div class="w-full md:w-2/5 flex flex-col min-h-0 flex-1 bg-white dark:bg-background-dark overflow-hidden">
+                            <!-- 스크롤 영역: 뱃지~설명 (스크롤바 숨김, 설명 잘림 방지) -->
+                            <div class="flex-1 min-h-0 overflow-y-auto no-scrollbar p-4 sm:p-6 md:p-8 lg:p-10">
+                                <!-- Category/Badge: 배지 단위로만 줄바꿈, 중간 사이즈 대응 -->
+                                <div class="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-3 sm:mb-4">
+                                    <span
+                                        id="modal-category"
+                                        class="inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
+                                    <span id="modal-status" class="inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg bg-green-100 text-green-700 text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
+                                    <span id="modal-custom-tag" class="hidden inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap"></span>
+                                </div>
+                                <!-- Title: 중간 사이즈까지 단계별 크기 + 자연스러운 줄바꿈 -->
+                                <h1 id="modal-title" class="text-[#111418] dark:text-white text-lg sm:text-xl md:text-2xl lg:text-3xl font-black leading-tight tracking-tight mb-2 break-words hyphens-auto">Sony WH-1000XM5 Noise Canceling Headphones</h1>
+                                <!-- Price: 중간 사이즈 대응 -->
+                                <p id="modal-price" class="text-[#111418] dark:text-white text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-6 sm:mb-8">₩320,000</p>
+                                <!-- Spec List: 라벨/값 줄바꿈 정리 -->
+                                <div class="space-y-0 mb-6 sm:mb-8">
+                                    <div id="modal-date-row" class="flex items-center justify-between gap-3 py-3 sm:py-4 border-t border-gray-100 dark:border-gray-800">
+                                        <span class="shrink-0 text-gray-500 dark:text-gray-400 text-xs sm:text-sm font-medium uppercase tracking-tight">구매일자</span>
+                                        <span id="modal-date" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right break-words min-w-0">October 2023</span>
+                                    </div>
+                                    <div class="flex items-start sm:items-center justify-between gap-3 py-3 sm:py-4 border-t border-gray-100 dark:border-gray-800">
+                                        <span class="shrink-0 text-gray-500 dark:text-gray-400 text-xs sm:text-sm font-medium uppercase tracking-tight">제품 상태</span>
+                                        <div id="modal-condition-row" class="flex items-center justify-end gap-1.5 min-w-0">
+                                            <svg id="modal-verified-icon" class="w-4 h-4 sm:w-5 sm:h-5 text-primary shrink-0 hidden" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+                                                <path d="M9 11l3 3L22 4"></path>
+                                                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+                                            </svg>
+                                            <span id="modal-condition" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right break-words"></span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- Description -->
+                                <div class="mb-6">
+                                    <h3 class="text-[#111418] dark:text-white text-xs sm:text-sm font-bold uppercase tracking-widest mb-2 sm:mb-3">제품 설명</h3>
+                                    <p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed break-words"></p>
+                                </div>
                             </div>
-                            <!-- Footer / CTA -->
-                            <div class="mt-auto pt-6 border-t border-gray-100 dark:border-gray-800">
+                            <!-- Footer / CTA: 항상 하단 고정, 버튼이 설명 위로 겹치지 않음 -->
+                            <div class="flex-shrink-0 pt-4 pb-6 px-4 sm:px-6 md:px-8 lg:px-10 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-background-dark">
                                 <button id="copy-link-btn" class="w-full flex items-center justify-center gap-2 bg-slate-900 dark:bg-white dark:text-slate-900 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg">
                                     <span class="material-symbols-outlined">link</span>
                                     <span id="copy-btn-text">상품 링크 복사하기</span>
@@ -277,6 +244,6 @@
                 </footer>
             </div>
         </div>
-        <script type="module" src="/scripts/app.js"></script>
+        <script type="module" src="/scripts/main.js"></script>
     </body>
 </html>
diff --git a/scripts/app.js b/scripts/app.js
deleted file mode 100644
index db42404..0000000
--- a/scripts/app.js
+++ /dev/null
@@ -1,660 +0,0 @@
-// scripts/app.js 상단
-import products from '../data/index.js';
-
-// 이제 products는 모든 카테고리가 합쳐지고 날짜순으로 정렬된 상태입니다.
-console.log('Total products loaded:', products.length);
-
-const ITEMS_PER_PAGE = 20;
-let currentPage = 1;
-let activeCategories = new Set(['All']);
-let visibleProducts = products;
-let searchKeyword = '';
-
-const VISIBILITY_CONFIG = {
-    showUnlisted: false, // 🔥 미판매 노출 여부
-    showSold: true, // 🔥 판매완료 노출 여부
-};
-
-const STATUS_META = {
-    미판매: {
-        selectable: false,
-        defaultVisible: false,
-        soldOut: false,
-    },
-    판매예정: {
-        selectable: true,
-        defaultVisible: true,
-        soldOut: false,
-    },
-    판매중: {
-        selectable: true,
-        defaultVisible: true,
-        soldOut: false,
-    },
-    판매완료: {
-        selectable: true,
-        defaultVisible: false,
-        soldOut: true,
-    },
-};
-
-const STATUS_FILTERS = [
-    {
-        key: '판매중',
-        label: '판매중',
-        defaultActive: true,
-        visible: true,
-    },
-    {
-        key: '판매예정',
-        label: '판매 예정',
-        defaultActive: true,
-        visible: true,
-    },
-    {
-        key: '미판매',
-        label: '미판매',
-        defaultActive: false,
-        visible: VISIBILITY_CONFIG.showUnlisted,
-    },
-    {
-        key: '판매완료',
-        label: '판매완료',
-        defaultActive: false,
-        visible: VISIBILITY_CONFIG.showSold,
-    },
-];
-
-const STATUS_ORDER = {
-    판매중: 0,
-    판매예정: 1,
-    미판매: 2,
-    판매완료: 3, // 🔥 항상 맨 뒤
-};
-
-const STATUS_COLOR = {
-    판매중: 'bg-primary/10 text-primary border-primary/30',
-    판매예정: 'bg-amber-400/10 text-amber-600 border-amber-400/30',
-    판매완료: 'bg-slate-400/10 text-slate-500 border-slate-400/30',
-    미판매: 'bg-slate-200/10 text-slate-400 border-slate-300/30',
-};
-
-let activeStatuses = new Set(
-    Object.entries(STATUS_META)
-        .filter(([_, meta]) => meta.defaultVisible)
-        .map(([status]) => status),
-);
-
-// openModal 함수 내부에 추가하거나 전역으로 설정
-const copyBtn = document.getElementById('copy-link-btn');
-const copyBtnText = document.getElementById('copy-btn-text');
-
-copyBtn.onclick = () => {
-    // 현재 도메인 + 제품 ID 쿼리 조합
-    const shareUrl = `${window.location.origin}${window.location.pathname}?id=${product.id}`;
-
-    navigator.clipboard.writeText(shareUrl).then(() => {
-        copyBtnText.textContent = '링크가 복사되었습니다!';
-        copyBtn.classList.replace('bg-slate-900', 'bg-green-600');
-
-        setTimeout(() => {
-            copyBtnText.textContent = '상품 링크 복사하기';
-            copyBtn.classList.replace('bg-green-600', 'bg-slate-900');
-        }, 2000);
-    });
-};
-
-function getStatusChipClass(status, isActive) {
-    const base = STATUS_COLOR[status] ?? '';
-
-    if (isActive) {
-        return `
-          ${base}
-          opacity-100
-          shadow-sm
-        `;
-    }
-
-    // 🔥 비활성
-    return `
-      bg-slate-50
-      text-slate-400
-      border-slate-200
-      opacity-30
-      grayscale
-      hover:opacity-50
-    `;
-}
-
-function renderStatusChips() {
-    const container = document.getElementById('status-chips');
-    if (!container) return;
-
-    container.innerHTML = '';
-
-    STATUS_FILTERS.filter((f) => f.visible).forEach(({ key, label }) => {
-        const isActive = activeStatuses.has(key);
-
-        const chip = document.createElement('button');
-        chip.className = `
-          status-chip
-          px-4 py-2
-          rounded-full
-          text-sm font-medium
-          transition-all duration-200
-          border
-          ${getStatusChipClass(key, isActive)}
-        `;
-
-        chip.textContent = label;
-        chip.onclick = () => toggleStatusFilter(key);
-
-        container.appendChild(chip);
-    });
-}
-
-function toggleStatusFilter(status) {
-    if (activeStatuses.has(status)) {
-        activeStatuses.delete(status);
-    } else {
-        activeStatuses.add(status);
-    }
-
-    // 최소 1개는 유지
-    if (activeStatuses.size === 0) {
-        STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => activeStatuses.add(f.key));
-    }
-
-    applyFilters();
-    renderStatusChips();
-}
-
-const searchInput = document.getElementById('search-input');
-
-if (searchInput) {
-    searchInput.addEventListener('input', (e) => {
-        searchKeyword = e.target.value.trim().toLowerCase();
-        applyFilters();
-    });
-}
-
-function applyFilters() {
-    currentPage = 1;
-
-    visibleProducts = products
-        .filter((product) => {
-            // 🔒 미판매 강제 차단
-            if (product.status === '미판매' && !VISIBILITY_CONFIG.showUnlisted) {
-                return false;
-            }
-
-            // 🔒 판매완료 기본 숨김
-            if (product.status === '판매완료' && !VISIBILITY_CONFIG.showSold) {
-                return false;
-            }
-
-            const statusMatch = activeStatuses.has(product.status);
-            const categoryMatch = activeCategories.has('All') || activeCategories.has(product.category);
-            const searchMatch = searchKeyword === '' || product.title.toLowerCase().includes(searchKeyword);
-
-            return statusMatch && categoryMatch && searchMatch;
-        })
-        // 🔥 여기서 정렬
-        .sort((a, b) => {
-            const aOrder = STATUS_ORDER[a.status] ?? 999;
-            const bOrder = STATUS_ORDER[b.status] ?? 999;
-            return aOrder - bOrder;
-        });
-
-    renderProducts(currentPage);
-}
-
-/**
- * 1. 상품 목록 렌더링
- */
-export function renderProducts(page) {
-    const grid = document.getElementById('product-grid');
-    if (!grid) return;
-    grid.innerHTML = '';
-
-    const startIndex = (page - 1) * ITEMS_PER_PAGE;
-    const pagedProducts = visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);
-
-    pagedProducts.forEach((product) => {
-        const isSold = STATUS_META[product.status]?.soldOut === true;
-        const cardHtml = `
-            <div class="group flex flex-col gap-4 cursor-pointer" onclick="openModal('${product.id}')">
-                <div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
-                    <div class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-80' : 'group-hover:scale-105'} transition-transform duration-500"
-                         style="background-image: url('${product.images[0]}')"></div>
-                    <div class="absolute top-3 left-3">
-                        <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${isSold ? 'bg-slate-900/10 text-slate-500' : 'bg-primary/10 text-primary'} backdrop-blur-md border border-primary/20">
-                            ${product.status}
-                        </span>
-                    </div>
-                </div>
-                <div class="flex flex-col gap-1">
-                    <div class="flex justify-between items-start">
-                        <h3 class="text-slate-900 dark:text-white text-base font-semibold ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
-                        <p class="text-slate-900 dark:text-white text-base font-bold text-nowrap">${product.currency}${product.price.toLocaleString()}</p>
-                    </div>
-                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">${product.description}</p>
-                </div>
-            </div>
-        `;
-        grid.insertAdjacentHTML('beforeend', cardHtml);
-    });
-
-    renderPagination();
-}
-
-/**
- * 2. 모달 열기 및 데이터 채우기
- */
-window.openModal = (id) => {
-    const product = products.find((p) => p.id === id);
-    if (!product) return;
-
-    const modal = document.getElementById('product-modal');
-    const images = product.images;
-
-    // --- 1. 이미지 및 UI 초기화 로직 ---
-    const loopImages = [images[images.length - 1], ...images, images[0]];
-    const mainImagesHtml = loopImages
-        .map(
-            (img) => `
-            <div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-4 select-none">
-                <img src="${img}" draggable="false" class="max-w-full max-h-full object-contain pointer-events-none shadow-sm rounded-lg">
-            </div>
-        `,
-        )
-        .join('');
-
-    const thumbnailsHtml = product.images
-        .map(
-            (img, idx) => `
-            <div onclick="scrollToImage(${idx})" 
-                 class="modal-thumb-item size-16 rounded-lg border-2 ${idx === 0 ? 'border-primary' : 'border-transparent'} 
-                        bg-cover bg-center overflow-hidden cursor-pointer ${idx === 0 ? 'opacity-100' : 'opacity-70'} 
-                        hover:opacity-100 transition-all flex-shrink-0" 
-                 style="background-image: url('${img}');"></div>
-        `,
-        )
-        .join('');
-
-    const dotsHtml = product.images
-        .map(
-            (_, idx) => `
-            <div class="modal-dot-item ${idx === 0 ? 'w-4 bg-primary' : 'w-2 bg-gray-300 dark:bg-gray-700'} h-2 rounded-full transition-all"></div>
-        `,
-        )
-        .join('');
-
-    // --- 2. 데이터 주입 ---
-    document.getElementById('modal-main-carousel').innerHTML = mainImagesHtml;
-    document.getElementById('modal-thumbnails').innerHTML = thumbnailsHtml;
-    document.getElementById('modal-dots').innerHTML = dotsHtml;
-    document.getElementById('modal-title').textContent = product.title;
-    document.getElementById('modal-price').textContent = `${product.currency}${product.price.toLocaleString()}`;
-
-    // 카테고리 및 상태
-    const modalCategory = document.getElementById('modal-category');
-    if (modalCategory) modalCategory.textContent = product.category;
-
-    const modalStatus = document.getElementById('modal-status');
-    if (modalStatus) {
-        modalStatus.textContent = product.status;
-        const statusStyles = {
-            판매중: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
-            판매예정: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-            판매완료: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
-            미판매: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
-        };
-        modalStatus.className = 'px-2.5 py-1 rounded-lg text-xs font-bold uppercase tracking-wider ' + (statusStyles[product.status] || statusStyles['미판매']);
-    }
-
-    // 커스텀 태그
-    const customTagElement = document.getElementById('modal-custom-tag');
-    if (product.customTag?.trim()) {
-        customTagElement.textContent = product.customTag;
-        customTagElement.classList.remove('hidden');
-    } else {
-        customTagElement.classList.add('hidden');
-    }
-
-    // 상세 설명
-    const modalDesc = document.getElementById('modal-desc');
-    if (modalDesc) {
-        modalDesc.innerHTML = Array.isArray(product.fullDescription) ? product.fullDescription.join('<br>') : product.fullDescription || '';
-    }
-
-    // --- 3. [핵심] 링크 복사 버튼 이벤트 바인딩 ---
-    const copyBtn = document.getElementById('copy-link-btn');
-    const copyBtnText = document.getElementById('copy-btn-text');
-    if (copyBtn) {
-        copyBtn.onclick = () => {
-            const shareUrl = `${window.location.origin}${window.location.pathname}?id=${product.id}`;
-            navigator.clipboard.writeText(shareUrl).then(() => {
-                if (copyBtnText) copyBtnText.textContent = '링크가 복사되었습니다!';
-                copyBtn.classList.add('!bg-green-600');
-                setTimeout(() => {
-                    if (copyBtnText) copyBtnText.textContent = '상품 링크 복사하기';
-                    copyBtn.classList.remove('!bg-green-600');
-                }, 2000);
-            });
-        };
-    }
-
-    // --- 4. 모달 활성화 및 초기 위치 설정 ---
-    modal.classList.remove('hidden');
-    document.body.style.overflow = 'hidden';
-
-    const container = document.getElementById('modal-main-carousel-container');
-    container.style.scrollBehavior = 'auto';
-    container.scrollLeft = container.clientWidth;
-
-    // 캐러셀 초기화
-    initBetterCarousel(container, images.length);
-};
-
-/**
- * 모달 닫기 (URL 정리 기능 포함)
- */
-window.closeModal = () => {
-    document.getElementById('product-modal').classList.add('hidden');
-    document.body.style.overflow = 'auto';
-
-    const cleanUrl = window.location.origin + window.location.pathname;
-    window.history.replaceState(null, '', cleanUrl);
-};
-
-function initBetterCarousel(container, originalLength) {
-    let isDragging = false;
-    let startX = 0;
-    let startScroll = 0;
-    let startTime = 0;
-
-    const width = () => container.clientWidth;
-
-    container.addEventListener('mousedown', start);
-    container.addEventListener('touchstart', start, { passive: true });
-
-    function start(e) {
-        isDragging = true;
-        startX = e.touches ? e.touches[0].pageX : e.pageX;
-        startScroll = container.scrollLeft;
-        startTime = Date.now();
-    }
-
-    container.addEventListener('mousemove', move);
-    container.addEventListener('touchmove', move, { passive: false });
-
-    function move(e) {
-        if (!isDragging) return;
-        const x = e.touches ? e.touches[0].pageX : e.pageX;
-        container.scrollLeft = startScroll - (x - startX);
-    }
-
-    container.addEventListener('mouseup', end);
-    container.addEventListener('mouseleave', end);
-    container.addEventListener('touchend', end);
-
-    function end(e) {
-        if (!isDragging) return;
-        isDragging = false;
-
-        const delta = container.scrollLeft - startScroll;
-        const elapsed = Date.now() - startTime;
-
-        const direction = Math.abs(delta) > width() * 0.1 || elapsed < 200 ? (delta > 0 ? 1 : -1) : 0;
-
-        let index = Math.round(startScroll / width()) + direction;
-
-        container.style.scrollBehavior = 'smooth';
-        container.scrollTo({ left: index * width() });
-
-        // 무한 루프 보정
-        setTimeout(() => {
-            container.style.scrollBehavior = 'auto';
-            if (index === 0) {
-                container.scrollLeft = width() * originalLength;
-            }
-            if (index === originalLength + 1) {
-                container.scrollLeft = width();
-            }
-            syncModalUI(originalLength);
-        }, 300);
-    }
-}
-
-/**
- * 이미지 슬라이드와 UI(Dots, Thumbs) 동기화
- */
-function syncModalUI(originalLength) {
-    const container = document.getElementById('modal-main-carousel-container');
-    const index = getRealIndex(container, originalLength);
-
-    document.querySelectorAll('.modal-thumb-item').forEach((t, i) => {
-        t.classList.toggle('border-primary', i === index);
-        t.classList.toggle('opacity-100', i === index);
-        t.classList.toggle('opacity-70', i !== index);
-    });
-
-    document.querySelectorAll('.modal-dot-item').forEach((d, i) => {
-        d.classList.toggle('bg-primary', i === index);
-        d.classList.toggle('w-4', i === index);
-        d.classList.toggle('bg-gray-300', i !== index);
-        d.classList.toggle('w-2', i !== index);
-    });
-
-    ensureThumbnailVisible(index);
-}
-
-/**
- * 3. 모달 내 이미지 스크롤 및 UI 동기화
- */
-window.scrollToImage = (index) => {
-    const container = document.getElementById('modal-main-carousel-container');
-    if (!container) return;
-
-    container.scrollTo({
-        left: container.clientWidth * (index + 1), // 🔥 중요
-        behavior: 'smooth',
-    });
-};
-
-/**
- * 5. 기타 (페이지네이션, 모달 닫기)
- */
-function renderPagination() {
-    const container = document.getElementById('pagination');
-    if (!container) return;
-    const totalPages = Math.ceil(visibleProducts.length / ITEMS_PER_PAGE);
-
-    let html = `<button onclick="changePage(${currentPage - 1})" class="size-10 flex items-center justify-center ${currentPage === 1 ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
-     stroke="#64748B" stroke-width="3"
-     stroke-linecap="round" stroke-linejoin="round"
-     class="w-5 h-5">
-  <path d="M15 18l-6-6 6-6" />
-</svg>
-</button>`;
-    for (let i = 1; i <= totalPages; i++) {
-        html += `<button onclick="changePage(${i})" class="size-10 font-bold rounded-lg ${i === currentPage ? 'bg-primary text-white' : 'text-slate-500'}">${i}</button>`;
-    }
-    html += `<button onclick="changePage(${currentPage + 1})" class="size-10 flex items-center justify-center ${currentPage === totalPages ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
-     stroke="#64748B" stroke-width="3"
-     stroke-linecap="round" stroke-linejoin="round"
-     class="w-5 h-5">
-  <path d="M9 18l6-6-6-6" />
-</svg>
-</button>`;
-    container.innerHTML = html;
-}
-
-window.changePage = (page) => {
-    currentPage = page;
-    renderProducts(currentPage);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-};
-
-// 초기 실행
-document.addEventListener('DOMContentLoaded', () => renderProducts(currentPage));
-
-document.addEventListener('keydown', (e) => {
-    if (e.key !== 'Escape') return;
-
-    const modal = document.getElementById('product-modal');
-    if (!modal || modal.classList.contains('hidden')) return;
-
-    closeModal();
-});
-
-const thumbnailContainer = document.getElementById('modal-thumbnails');
-
-function ensureThumbnailVisible(index) {
-    const container = document.getElementById('modal-thumbnails');
-    if (!container) return;
-
-    const thumbs = container.querySelectorAll('.modal-thumb-item');
-    const active = thumbs[index];
-    if (!active) return;
-
-    const cRect = container.getBoundingClientRect();
-    const tRect = active.getBoundingClientRect();
-
-    const isVisible = tRect.top >= cRect.top && tRect.bottom <= cRect.bottom;
-
-    if (!isVisible) {
-        active.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-        });
-    }
-}
-
-function getRealIndex(container, originalLength) {
-    let rawIndex = Math.round(container.scrollLeft / container.clientWidth);
-    let index = rawIndex - 1; // 클론 보정
-
-    if (index < 0) index = originalLength - 1;
-    if (index >= originalLength) index = 0;
-
-    return index;
-}
-
-// 카테고리 필터
-function getCategories(products) {
-    return ['All', ...new Set(products.map((p) => p.category))];
-}
-
-function renderCategoryChips(products) {
-    const container = document.getElementById('filter-chips');
-    if (!container) return;
-
-    const categories = ['All', ...new Set(products.map((p) => p.category))];
-
-    container.innerHTML = '';
-
-    categories.forEach((cat) => {
-        const isActive = activeCategories.has(cat);
-
-        const chip = document.createElement('button');
-        chip.className = `
-      filter-chip px-4 py-2 rounded-full text-sm font-medium transition
-      border
-      ${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 text-slate-600 border-slate-200'}
-    `;
-        chip.textContent = cat;
-        chip.dataset.category = cat;
-
-        chip.onclick = () => {
-            toggleCategory(cat);
-        };
-
-        container.appendChild(chip);
-    });
-}
-
-function toggleCategory(category) {
-    if (category === 'All') {
-        activeCategories.clear();
-        activeCategories.add('All');
-    } else {
-        activeCategories.delete('All');
-        activeCategories.has(category) ? activeCategories.delete(category) : activeCategories.add(category);
-
-        if (activeCategories.size === 0) {
-            activeCategories.add('All');
-        }
-    }
-
-    renderCategoryChips(products);
-    applyFilters();
-}
-
-function bindCategoryFilter(products) {
-    const chips = document.querySelectorAll('.filter-chip');
-
-    chips.forEach((chip) => {
-        chip.addEventListener('click', () => {
-            const category = chip.dataset.category;
-
-            if (category === 'All') {
-                activeCategories.clear();
-                activeCategories.add('All');
-            } else {
-                activeCategories.delete('All');
-
-                if (activeCategories.has(category)) {
-                    activeCategories.delete(category);
-                } else {
-                    activeCategories.add(category);
-                }
-
-                // 아무 것도 없으면 All로 복귀
-                if (activeCategories.size === 0) {
-                    activeCategories.add('All');
-                }
-            }
-
-            applyFilters();
-        });
-    });
-}
-
-// 카테고리 필터
-renderCategoryChips(products);
-bindCategoryFilter(products);
-// updateChipUI();
-
-// 상태 필터 (정책 기반)
-renderStatusChips();
-
-// 🔥 최초 필터 적용 (이게 첫 렌더)
-applyFilters();
-
-// 초기 실행 시 호출
-document.addEventListener('DOMContentLoaded', () => {
-    renderProducts(currentPage);
-    checkUrlAndOpenModal();
-});
-
-function checkUrlAndOpenModal() {
-    const params = new URLSearchParams(window.location.search);
-    const productId = params.get('id'); // URL에서 가져온 ID (문자열)
-
-    if (productId) {
-        // 데이터의 id와 URL의 id를 모두 문자열로 변환하여 비교
-        const product = products.find((p) => String(p.id) === productId);
-
-        if (product) {
-            // DOM 렌더링 시간을 고려해 약간의 지연 후 모달 오픈
-            setTimeout(() => openModal(product.id), 100);
-        }
-    }
-}
-
-// [최종 ID 생성기] 매번 완전히 새로운 8자리 난수 출력
-const newId = Math.random().toString(36).substring(2, 10);
-
-console.log(`%c[NEW ID for data.js]: ${newId}`, 'color: #137fec; font-weight: bold; border: 1px solid #137fec; padding: 2px 5px; border-radius: 4px;');
diff --git a/scripts/carousel.js b/scripts/carousel.js
new file mode 100644
index 0000000..6d39c3c
--- /dev/null
+++ b/scripts/carousel.js
@@ -0,0 +1,116 @@
+/** 모달 내 이미지 캐러셀 (드래그·스와이프·인덱스 동기화) */
+export function getRealIndex(container, originalLength) {
+    let rawIndex = Math.round(container.scrollLeft / container.clientWidth);
+    let index = rawIndex - 1;
+    if (index < 0) index = originalLength - 1;
+    if (index >= originalLength) index = 0;
+    return index;
+}
+
+export function ensureThumbnailVisible(index) {
+    const container = document.getElementById('modal-thumbnails');
+    if (!container) return;
+    const thumbs = container.querySelectorAll('.modal-thumb-item');
+    const active = thumbs[index];
+    if (!active) return;
+    const cRect = container.getBoundingClientRect();
+    const tRect = active.getBoundingClientRect();
+    const isVisible = tRect.top >= cRect.top && tRect.bottom <= cRect.bottom;
+    if (!isVisible) {
+        active.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+}
+
+export function syncModalUI(originalLength) {
+    const container = document.getElementById('modal-main-carousel-container');
+    if (!container) return;
+    const index = getRealIndex(container, originalLength);
+
+    document.querySelectorAll('.modal-thumb-item').forEach((t, i) => {
+        t.classList.toggle('border-primary', i === index);
+        t.classList.toggle('opacity-100', i === index);
+        t.classList.toggle('opacity-70', i !== index);
+    });
+
+    document.querySelectorAll('.modal-dot-item').forEach((d, i) => {
+        d.classList.toggle('bg-primary', i === index);
+        d.classList.toggle('w-4', i === index);
+        d.classList.toggle('bg-gray-300', i !== index);
+        d.classList.toggle('w-2', i !== index);
+    });
+
+    ensureThumbnailVisible(index);
+}
+
+export function initBetterCarousel(container, originalLength) {
+    let isDragging = false;
+    let startX = 0;
+    let startScroll = 0;
+    let startTime = 0;
+    const width = () => container.clientWidth;
+
+    container.addEventListener('mousedown', start);
+    container.addEventListener('touchstart', start, { passive: true });
+
+    function start(e) {
+        isDragging = true;
+        startX = e.touches ? e.touches[0].pageX : e.pageX;
+        startScroll = container.scrollLeft;
+        startTime = Date.now();
+    }
+
+    container.addEventListener('mousemove', move);
+    container.addEventListener('touchmove', move, { passive: false });
+
+    function move(e) {
+        if (!isDragging) return;
+        const x = e.touches ? e.touches[0].pageX : e.pageX;
+        container.scrollLeft = startScroll - (x - startX);
+    }
+
+    container.addEventListener('mouseup', end);
+    container.addEventListener('mouseleave', end);
+    container.addEventListener('touchend', end);
+
+    function end(e) {
+        if (!isDragging) return;
+        isDragging = false;
+        const w = width();
+        if (w <= 0) return;
+        const endScroll = container.scrollLeft;
+        const delta = endScroll - startScroll;
+        const elapsed = Date.now() - startTime;
+        // 클릭만 했을 때(이동 거리 거의 없음)는 슬라이드 이동 안 함. 일정 이상 드래그했을 때만 방향 적용
+        const minMove = Math.min(w * 0.05, 20);
+        const hasMoved = Math.abs(delta) >= minMove;
+        const direction = hasMoved && (Math.abs(delta) > w * 0.1 || elapsed < 200) ? (delta > 0 ? 1 : -1) : 0;
+        let index = Math.round(endScroll / w) + direction;
+        index = Math.max(0, Math.min(originalLength + 1, index));
+        const targetLeft = index * w;
+
+        // 손 뗀 직후 같은 프레임에서 스크롤 충돌 방지 + 미세 이동은 즉시 적용해서 튐 방지
+        requestAnimationFrame(() => {
+            const snapThreshold = w * 0.03;
+            const useSmooth = Math.abs(container.scrollLeft - targetLeft) > snapThreshold;
+            container.style.scrollBehavior = useSmooth ? 'smooth' : 'auto';
+            container.scrollTo({ left: targetLeft });
+
+            const loopDelay = useSmooth ? 320 : 0;
+            setTimeout(() => {
+                container.style.scrollBehavior = 'auto';
+                if (index === 0) container.scrollLeft = w * originalLength;
+                if (index === originalLength + 1) container.scrollLeft = w;
+                syncModalUI(originalLength);
+            }, loopDelay);
+        });
+    }
+}
+
+export function scrollToImage(index) {
+    const container = document.getElementById('modal-main-carousel-container');
+    if (!container) return;
+    container.scrollTo({
+        left: container.clientWidth * (index + 1),
+        behavior: 'smooth',
+    });
+}
diff --git a/scripts/config.js b/scripts/config.js
new file mode 100644
index 0000000..a2042ee
--- /dev/null
+++ b/scripts/config.js
@@ -0,0 +1,66 @@
+/** 상품 목록·필터·모달 관련 상수 */
+
+export const ITEMS_PER_PAGE = 20;
+
+export const VISIBILITY_CONFIG = {
+    showUnlisted: false,
+    showSold: true,
+};
+
+export const STATUS_META = {
+    미판매: {
+        selectable: false,
+        defaultVisible: false,
+        soldOut: false,
+    },
+    판매예정: {
+        selectable: true,
+        defaultVisible: true,
+        soldOut: false,
+    },
+    판매중: {
+        selectable: true,
+        defaultVisible: true,
+        soldOut: false,
+    },
+    판매완료: {
+        selectable: true,
+        defaultVisible: false,
+        soldOut: true,
+    },
+};
+
+export const STATUS_FILTERS = [
+    { key: '판매중', label: '판매중', defaultActive: true, visible: true },
+    { key: '판매예정', label: '판매 예정', defaultActive: true, visible: true },
+    { key: '미판매', label: '미판매', defaultActive: false, visible: VISIBILITY_CONFIG.showUnlisted },
+    { key: '판매완료', label: '판매완료', defaultActive: false, visible: VISIBILITY_CONFIG.showSold },
+];
+
+export const STATUS_ORDER = {
+    판매중: 0,
+    판매예정: 1,
+    미판매: 2,
+    판매완료: 3,
+};
+
+export const STATUS_COLOR = {
+    판매중: 'bg-primary/10 text-primary border-primary/30',
+    판매예정: 'bg-amber-400/10 text-amber-600 border-amber-400/30',
+    판매완료: 'bg-slate-400/10 text-slate-500 border-slate-400/30',
+    미판매: 'bg-slate-200/10 text-slate-400 border-slate-300/30',
+};
+
+/** 모달 커스텀 태그(customTag) 키워드별 뱃지 스타일 */
+export const TAG_STYLES = {
+    완전생산한정판: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
+    특전포함: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400',
+    미개봉: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+    무료배송: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+    풀윤활완료: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
+    급매: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
+    정품: 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-400',
+    풀옵션: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400',
+};
+
+export const TAG_DEFAULT_STYLE = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400';
diff --git a/scripts/filters.js b/scripts/filters.js
new file mode 100644
index 0000000..cf279a6
--- /dev/null
+++ b/scripts/filters.js
@@ -0,0 +1,117 @@
+/** 상태·카테고리·검색 필터 로직 및 UI */
+import { state, productsData } from './state.js';
+import {
+    VISIBILITY_CONFIG,
+    STATUS_FILTERS,
+    STATUS_ORDER,
+    STATUS_COLOR,
+} from './config.js';
+import { renderProducts } from './productList.js';
+
+function getStatusChipClass(status, isActive) {
+    const base = STATUS_COLOR[status] ?? '';
+    if (isActive) {
+        return `${base} opacity-100 shadow-sm`;
+    }
+    return `bg-slate-50 text-slate-400 border-slate-200 opacity-30 grayscale hover:opacity-50`;
+}
+
+export function renderStatusChips() {
+    const container = document.getElementById('status-chips');
+    if (!container) return;
+    container.innerHTML = '';
+
+    STATUS_FILTERS.filter((f) => f.visible).forEach(({ key, label }) => {
+        const isActive = state.activeStatuses.has(key);
+        const chip = document.createElement('button');
+        chip.className = `status-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition-all duration-200 border ${getStatusChipClass(key, isActive)}`;
+        chip.textContent = label;
+        chip.onclick = () => toggleStatusFilter(key);
+        container.appendChild(chip);
+    });
+}
+
+function toggleStatusFilter(status) {
+    if (state.activeStatuses.has(status)) {
+        state.activeStatuses.delete(status);
+    } else {
+        state.activeStatuses.add(status);
+    }
+    if (state.activeStatuses.size === 0) {
+        STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => state.activeStatuses.add(f.key));
+    }
+    applyFilters();
+    renderStatusChips();
+}
+
+export function applyFilters() {
+    state.currentPage = 1;
+    state.visibleProducts = productsData
+        .filter((product) => {
+            if (product.status === '미판매' && !VISIBILITY_CONFIG.showUnlisted) return false;
+            if (product.status === '판매완료' && !VISIBILITY_CONFIG.showSold) return false;
+            const statusMatch = state.activeStatuses.has(product.status);
+            const categoryMatch = state.activeCategories.has('All') || state.activeCategories.has(product.category);
+            const searchMatch = state.searchKeyword === '' || product.title.toLowerCase().includes(state.searchKeyword);
+            return statusMatch && categoryMatch && searchMatch;
+        })
+        .sort((a, b) => {
+            const aOrder = STATUS_ORDER[a.status] ?? 999;
+            const bOrder = STATUS_ORDER[b.status] ?? 999;
+            return aOrder - bOrder;
+        });
+    renderProducts(state.currentPage);
+}
+
+export function getCategories(products) {
+    return ['All', ...new Set(products.map((p) => p.category))];
+}
+
+export function renderCategoryChips(products) {
+    const container = document.getElementById('filter-chips');
+    if (!container) return;
+    const categories = ['All', ...new Set(products.map((p) => p.category))];
+    container.innerHTML = '';
+
+    categories.forEach((cat) => {
+        const isActive = state.activeCategories.has(cat);
+        const chip = document.createElement('button');
+        chip.className = `filter-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition border ${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 text-slate-600 border-slate-200'}`;
+        chip.textContent = cat;
+        chip.dataset.category = cat;
+        chip.onclick = () => toggleCategory(cat);
+        container.appendChild(chip);
+    });
+}
+
+export function toggleCategory(category) {
+    if (category === 'All') {
+        state.activeCategories.clear();
+        state.activeCategories.add('All');
+    } else {
+        state.activeCategories.delete('All');
+        state.activeCategories.has(category) ? state.activeCategories.delete(category) : state.activeCategories.add(category);
+        if (state.activeCategories.size === 0) state.activeCategories.add('All');
+    }
+    renderCategoryChips(productsData);
+    applyFilters();
+}
+
+export function bindCategoryFilter(products) {
+    const chips = document.querySelectorAll('.filter-chip');
+    chips.forEach((chip) => {
+        chip.addEventListener('click', () => {
+            const category = chip.dataset.category;
+            if (category === 'All') {
+                state.activeCategories.clear();
+                state.activeCategories.add('All');
+            } else {
+                state.activeCategories.delete('All');
+                if (state.activeCategories.has(category)) state.activeCategories.delete(category);
+                else state.activeCategories.add(category);
+                if (state.activeCategories.size === 0) state.activeCategories.add('All');
+            }
+            applyFilters();
+        });
+    });
+}
diff --git a/scripts/main.js b/scripts/main.js
new file mode 100644
index 0000000..d49a7ed
--- /dev/null
+++ b/scripts/main.js
@@ -0,0 +1,99 @@
+/** 진입점: 이벤트 바인딩·초기 렌더·URL 모달 처리 */
+import { state, productsData } from './state.js';
+import {
+    applyFilters,
+    renderStatusChips,
+    renderCategoryChips,
+    bindCategoryFilter,
+} from './filters.js';
+import { renderProducts, changePage } from './productList.js';
+import { openModal, closeModal } from './modal.js';
+import { scrollToImage } from './carousel.js';
+
+console.log('Total products loaded:', productsData.length);
+
+// HTML onclick에서 사용
+window.openModal = openModal;
+window.closeModal = closeModal;
+window.changePage = changePage;
+window.scrollToImage = scrollToImage;
+
+// 검색 입력
+const searchInput = document.getElementById('search-input');
+if (searchInput) {
+    searchInput.addEventListener('input', (e) => {
+        state.searchKeyword = e.target.value.trim().toLowerCase();
+        applyFilters();
+    });
+}
+
+// Escape로 모달 닫기
+document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    const modal = document.getElementById('product-modal');
+    if (!modal || modal.classList.contains('hidden')) return;
+    closeModal();
+});
+
+function checkUrlAndOpenModal() {
+    const params = new URLSearchParams(window.location.search);
+    const productId = params.get('id');
+    if (productId) {
+        const product = productsData.find((p) => String(p.id) === productId);
+        if (product) {
+            setTimeout(() => openModal(product.id), 100);
+        }
+    }
+}
+
+// 초기 테마 설정 확인
+const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+const themeToggleBtn = document.getElementById('theme-toggle');
+
+// 1. 현재 테마 상태에 따라 아이콘 표시/숨김 처리
+function updateIcons() {
+    if (document.documentElement.classList.contains('dark')) {
+        themeToggleLightIcon.classList.remove('hidden');
+        themeToggleDarkIcon.classList.add('hidden');
+    } else {
+        themeToggleDarkIcon.classList.remove('hidden');
+        themeToggleLightIcon.classList.add('hidden');
+    }
+}
+
+// 2. 초기 로드 시 설정 (localStorage 또는 시스템 설정 확인)
+if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark');
+} else {
+    document.documentElement.classList.remove('dark');
+}
+updateIcons();
+
+// 3. 버튼 클릭 이벤트
+themeToggleBtn.addEventListener('click', function() {
+    // 테마 토글
+    if (document.documentElement.classList.contains('dark')) {
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('color-theme', 'light');
+    } else {
+        document.documentElement.classList.add('dark');
+        localStorage.setItem('color-theme', 'dark');
+    }
+    updateIcons();
+});
+
+// 초기 렌더
+renderCategoryChips(productsData);
+bindCategoryFilter(productsData);
+renderStatusChips();
+applyFilters();
+
+document.addEventListener('DOMContentLoaded', () => {
+    renderProducts(state.currentPage);
+    checkUrlAndOpenModal();
+});
+
+// 데이터용 새 ID 생성기
+const newId = Math.random().toString(36).substring(2, 10);
+console.log(`%c[NUMBER]: ${newId}`, 'color: #137fec; font-weight: bold; border: 1px solid #137fec; padding: 2px 5px; border-radius: 4px;');
diff --git a/scripts/modal.js b/scripts/modal.js
new file mode 100644
index 0000000..1f8a70f
--- /dev/null
+++ b/scripts/modal.js
@@ -0,0 +1,154 @@
+/** 상품 상세 모달 (열기/닫기·콘텐츠 채우기·링크 복사) */
+import { productsData } from './state.js';
+import { initBetterCarousel } from './carousel.js';
+import { TAG_STYLES, TAG_DEFAULT_STYLE } from './config.js';
+
+export function openModal(id) {
+    const product = productsData.find((p) => p.id === id);
+    if (!product) return;
+
+    const modal = document.getElementById('product-modal');
+    const images = product.images;
+
+    const loopImages = [images[images.length - 1], ...images, images[0]];
+    const mainImagesHtml = loopImages
+        .map(
+            (img) => `
+            <div class="flex-shrink-0 w-full h-full snap-center flex items-center justify-center p-0 md:p-4 select-none">
+                <div class="w-full h-full max-w-full max-h-full rounded-xl md:rounded-2xl overflow-hidden flex items-center justify-center">
+                    <img src="${img}" draggable="false" class="max-w-full max-h-full w-auto h-auto object-contain sm:object-cover pointer-events-none rounded-md">
+                </div>
+            </div>
+        `,
+        )
+        .join('');
+
+    const thumbnailsHtml = product.images
+        .map(
+            (img, idx) => `
+            <div onclick="scrollToImage(${idx})" 
+                 class="modal-thumb-item size-16 rounded-lg border-2 ${idx === 0 ? 'border-primary' : 'border-transparent'} 
+                        bg-cover bg-center overflow-hidden cursor-pointer ${idx === 0 ? 'opacity-100' : 'opacity-70'} 
+                        hover:opacity-100 transition-all flex-shrink-0" 
+                 style="background-image: url('${img}');"></div>
+        `,
+        )
+        .join('');
+
+    const dotsHtml = product.images
+        .map(
+            (_, idx) => `
+            <div class="modal-dot-item ${idx === 0 ? 'w-4 bg-primary' : 'w-2 bg-gray-300 dark:bg-gray-700'} h-2 rounded-full transition-all"></div>
+        `,
+        )
+        .join('');
+
+    document.getElementById('modal-main-carousel').innerHTML = mainImagesHtml;
+    document.getElementById('modal-thumbnails').innerHTML = thumbnailsHtml;
+    document.getElementById('modal-dots').innerHTML = dotsHtml;
+    document.getElementById('modal-title').textContent = product.title;
+    document.getElementById('modal-price').textContent = `${product.currency}${product.price.toLocaleString()}`;
+
+    const modalCategory = document.getElementById('modal-category');
+    if (modalCategory) modalCategory.textContent = product.category;
+
+    const modalStatus = document.getElementById('modal-status');
+    if (modalStatus) {
+        modalStatus.textContent = product.status;
+        const statusStyles = {
+            판매중: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+            판매예정: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+            판매완료: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+            미판매: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
+        };
+        modalStatus.className = 'inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap ' + (statusStyles[product.status] || statusStyles['미판매']);
+    }
+
+    const customTagElement = document.getElementById('modal-custom-tag');
+    const tagText = product.customTag?.trim();
+    if (tagText) {
+        customTagElement.textContent = tagText;
+        customTagElement.classList.remove('hidden');
+        customTagElement.className = `inline-flex shrink-0 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md sm:rounded-lg text-[10px] sm:text-[11px] md:text-xs font-bold uppercase tracking-wider whitespace-nowrap ${TAG_STYLES[tagText] || TAG_DEFAULT_STYLE}`;
+    } else {
+        customTagElement.classList.add('hidden');
+    }
+
+    // 구매일자: 값이 있을 때만 행 노출
+    const modalDate = document.getElementById('modal-date');
+    const modalDateRow = document.getElementById('modal-date-row');
+    const pDate = product.specs?.purchaseDate;
+    if (pDate && String(pDate).trim() !== '' && String(pDate) !== 'null') {
+        if (modalDate) modalDate.textContent = pDate;
+        if (modalDateRow) {
+            modalDateRow.classList.remove('hidden');
+            modalDateRow.classList.add('flex');
+        }
+    } else {
+        if (modalDateRow) {
+            modalDateRow.classList.add('hidden');
+            modalDateRow.classList.remove('flex');
+        }
+    }
+
+    // 제품 상태(specs.condition): 값이 있을 때만 행 노출
+    const conditionText = product.specs?.condition;
+    const isVerified = product.specs?.isVerified;
+    const conditionValueEl = document.getElementById('modal-condition');
+    const conditionRowEl = document.getElementById('modal-condition-row');
+    const conditionRowWrap = conditionRowEl?.parentElement; // 라벨+값 전체 행
+    const verifiedIcon = document.getElementById('modal-verified-icon');
+    if (conditionText && String(conditionText).trim() !== '') {
+        if (conditionValueEl) conditionValueEl.textContent = conditionText;
+        if (conditionRowWrap) {
+            conditionRowWrap.classList.remove('hidden');
+            conditionRowWrap.classList.add('flex');
+        }
+        if (verifiedIcon) {
+            if (isVerified) verifiedIcon.classList.remove('hidden');
+            else verifiedIcon.classList.add('hidden');
+        }
+    } else {
+        if (conditionRowWrap) {
+            conditionRowWrap.classList.add('hidden');
+            conditionRowWrap.classList.remove('flex');
+        }
+    }
+
+    const modalDesc = document.getElementById('modal-desc');
+    if (modalDesc) {
+        modalDesc.innerHTML = Array.isArray(product.fullDescription) ? product.fullDescription.join('<br>') : product.fullDescription || '';
+    }
+
+    const copyBtn = document.getElementById('copy-link-btn');
+    const copyBtnText = document.getElementById('copy-btn-text');
+    if (copyBtn) {
+        copyBtn.onclick = () => {
+            const shareUrl = `${window.location.origin}${window.location.pathname}?id=${product.id}`;
+            navigator.clipboard.writeText(shareUrl).then(() => {
+                if (copyBtnText) copyBtnText.textContent = '링크가 복사되었습니다!';
+                copyBtn.classList.add('!bg-green-600');
+                setTimeout(() => {
+                    if (copyBtnText) copyBtnText.textContent = '상품 링크 복사하기';
+                    copyBtn.classList.remove('!bg-green-600');
+                }, 2000);
+            });
+        };
+    }
+
+    modal.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+
+    const container = document.getElementById('modal-main-carousel-container');
+    container.style.scrollBehavior = 'auto';
+    container.scrollLeft = container.clientWidth;
+
+    initBetterCarousel(container, images.length);
+}
+
+export function closeModal() {
+    document.getElementById('product-modal').classList.add('hidden');
+    document.body.style.overflow = 'auto';
+    const cleanUrl = window.location.origin + window.location.pathname;
+    window.history.replaceState(null, '', cleanUrl);
+}
diff --git a/scripts/productList.js b/scripts/productList.js
new file mode 100644
index 0000000..e0d471b
--- /dev/null
+++ b/scripts/productList.js
@@ -0,0 +1,71 @@
+/** 상품 그리드·페이지네이션 렌더링 */
+import { state } from './state.js';
+import { ITEMS_PER_PAGE, STATUS_META } from './config.js';
+
+export function renderProducts(page) {
+    const grid = document.getElementById('product-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+
+    const startIndex = (page - 1) * ITEMS_PER_PAGE;
+    const pagedProducts = state.visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+
+    pagedProducts.forEach((product) => {
+        const isSold = STATUS_META[product.status]?.soldOut === true;
+        const cardHtml = `
+            <div class="group flex flex-col gap-4 cursor-pointer" onclick="openModal('${product.id}')">
+                <div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
+                    <div class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-80' : 'group-hover:scale-105'} transition-transform duration-500"
+                         style="background-image: url('${product.images[0]}')"></div>
+                    <div class="absolute top-3 left-3">
+                        <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${isSold ? 'bg-slate-900/10 text-slate-500' : 'bg-primary/10 text-primary'} backdrop-blur-md border border-primary/20">
+                            ${product.status}
+                        </span>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <div class="flex flex-col sm:flex-row justify-between items-start">
+                        <h3 class="text-slate-900 dark:text-white text-base font-semibold ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
+                        <p class="text-slate-900 dark:text-white text-base font-bold text-nowrap">${product.currency}${product.price.toLocaleString()}</p>
+                    </div>
+                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">${product.description}</p>
+                </div>
+            </div>
+        `;
+        grid.insertAdjacentHTML('beforeend', cardHtml);
+    });
+
+    renderPagination();
+}
+
+export function renderPagination() {
+    const container = document.getElementById('pagination');
+    if (!container) return;
+    const totalPages = Math.ceil(state.visibleProducts.length / ITEMS_PER_PAGE);
+    const { currentPage } = state;
+
+    let html = `<button onclick="changePage(${currentPage - 1})" class="size-10 flex items-center justify-center ${currentPage === 1 ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
+     stroke="#64748B" stroke-width="3"
+     stroke-linecap="round" stroke-linejoin="round"
+     class="w-5 h-5">
+  <path d="M15 18l-6-6 6-6" />
+</svg>
+</button>`;
+    for (let i = 1; i <= totalPages; i++) {
+        html += `<button onclick="changePage(${i})" class="size-10 font-bold rounded-lg ${i === currentPage ? 'bg-primary text-white' : 'text-slate-500'}">${i}</button>`;
+    }
+    html += `<button onclick="changePage(${currentPage + 1})" class="size-10 flex items-center justify-center ${currentPage === totalPages ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
+     stroke="#64748B" stroke-width="3"
+     stroke-linecap="round" stroke-linejoin="round"
+     class="w-5 h-5">
+  <path d="M9 18l6-6-6-6" />
+</svg>
+</button>`;
+    container.innerHTML = html;
+}
+
+export function changePage(page) {
+    state.currentPage = page;
+    renderProducts(page);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+}
diff --git a/scripts/state.js b/scripts/state.js
new file mode 100644
index 0000000..8a36004
--- /dev/null
+++ b/scripts/state.js
@@ -0,0 +1,17 @@
+/** 앱 전역 상태 */
+import products from '../data/index.js';
+import { STATUS_META } from './config.js';
+
+export const productsData = products;
+
+export const state = {
+    currentPage: 1,
+    activeCategories: new Set(['All']),
+    visibleProducts: [...products],
+    searchKeyword: '',
+    activeStatuses: new Set(
+        Object.entries(STATUS_META)
+            .filter(([_, meta]) => meta.defaultVisible)
+            .map(([status]) => status),
+    ),
+};
diff --git a/style/tailwind.css b/style/tailwind.css
index d67cb24..06eaf45 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -8,7 +8,6 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-100: oklch(93.6% 0.032 17.717);
-    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-900: oklch(39.6% 0.141 25.723);
@@ -16,15 +15,30 @@
     --color-orange-400: oklch(75% 0.183 55.934);
     --color-orange-700: oklch(55.3% 0.195 38.402);
     --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-amber-700: oklch(55.5% 0.163 48.998);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-emerald-100: oklch(95% 0.052 163.051);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-700: oklch(50.8% 0.118 165.612);
+    --color-emerald-900: oklch(37.8% 0.077 168.94);
+    --color-teal-100: oklch(95.3% 0.051 180.801);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-teal-700: oklch(51.1% 0.096 186.391);
+    --color-teal-900: oklch(38.6% 0.063 188.416);
+    --color-sky-100: oklch(95.1% 0.026 236.824);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-700: oklch(50% 0.134 242.749);
+    --color-sky-900: oklch(39.1% 0.09 240.876);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-400: oklch(70.7% 0.165 254.624);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-indigo-100: oklch(93% 0.034 272.788);
@@ -93,11 +107,10 @@
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
     --leading-relaxed: 1.625;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
     --blur-sm: 8px;
     --blur-md: 12px;
     --default-transition-duration: 150ms;
@@ -282,9 +295,6 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -297,27 +307,21 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
-  .bottom-2 {
-    bottom: calc(var(--spacing) * 2);
-  }
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
-  .left-3\/5 {
-    left: calc(3/5 * 100%);
-  }
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
+  .z-10 {
+    z-index: 10;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -339,15 +343,9 @@
       max-width: 96rem;
     }
   }
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
-  .mt-auto {
-    margin-top: auto;
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -357,12 +355,12 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
-  .mb-10 {
-    margin-bottom: calc(var(--spacing) * 10);
-  }
   .ml-0 {
     margin-left: calc(var(--spacing) * 0);
   }
@@ -378,23 +376,16 @@
   .hidden {
     display: none;
   }
-  .table {
-    display: table;
+  .inline-flex {
+    display: inline-flex;
   }
   .aspect-\[4\/5\] {
     aspect-ratio: 4/5;
   }
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
-  .size-9 {
-    width: calc(var(--spacing) * 9);
-    height: calc(var(--spacing) * 9);
-  }
   .size-10 {
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
@@ -409,18 +400,15 @@
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-9 {
-    height: calc(var(--spacing) * 9);
-  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
-  .h-\[80vh\] {
-    height: 80vh;
-  }
   .h-auto {
     height: auto;
   }
@@ -430,20 +418,23 @@
   .h-px {
     height: 1px;
   }
+  .max-h-\[40dvh\] {
+    max-height: 40dvh;
+  }
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
-  .max-h-\[90vh\] {
-    max-height: 90vh;
+  .max-h-\[calc\(100dvh-2rem\)\] {
+    max-height: calc(100dvh - 2rem);
   }
   .max-h-full {
     max-height: 100%;
   }
-  .min-h-80 {
-    min-height: calc(var(--spacing) * 80);
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
   }
-  .min-h-\[60vh\] {
-    min-height: 60vh;
+  .min-h-\[260px\] {
+    min-height: 260px;
   }
   .min-h-screen {
     min-height: 100vh;
@@ -460,6 +451,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
@@ -487,36 +481,19 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
   .grow {
     flex-grow: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -527,9 +504,6 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .snap-center {
     scroll-snap-align: center;
   }
@@ -612,6 +586,9 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -639,9 +616,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .border-amber-400 {
-    border-color: var(--color-amber-400);
-  }
   .border-amber-400\/30 {
     border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -654,21 +628,21 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-gray-200\/80 {
+    border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
+    }
+  }
   .border-slate-200 {
     border-color: var(--color-slate-200);
   }
-  .border-slate-300 {
-    border-color: var(--color-slate-300);
-  }
   .border-slate-300\/30 {
     border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-slate-300) 30%, transparent);
     }
   }
-  .border-slate-400 {
-    border-color: var(--color-slate-400);
-  }
   .border-slate-400\/30 {
     border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -678,8 +652,11 @@
   .border-transparent {
     border-color: transparent;
   }
-  .bg-amber-400 {
-    background-color: var(--color-amber-400);
+  .\!bg-green-600 {
+    background-color: var(--color-green-600) !important;
+  }
+  .bg-amber-100 {
+    background-color: var(--color-amber-100);
   }
   .bg-amber-400\/10 {
     background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 10%, transparent);
@@ -687,9 +664,6 @@
       background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
     }
   }
-  .bg-black {
-    background-color: var(--color-black);
-  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -699,12 +673,21 @@
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
+  .bg-emerald-100 {
+    background-color: var(--color-emerald-100);
+  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-100\/50 {
+    background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
+    }
+  }
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
@@ -726,24 +709,21 @@
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-sky-100 {
+    background-color: var(--color-sky-100);
+  }
   .bg-slate-50 {
     background-color: var(--color-slate-50);
   }
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
-  .bg-slate-200 {
-    background-color: var(--color-slate-200);
-  }
   .bg-slate-200\/10 {
     background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent);
     }
   }
-  .bg-slate-400 {
-    background-color: var(--color-slate-400);
-  }
   .bg-slate-400\/10 {
     background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -759,6 +739,9 @@
       background-color: color-mix(in oklab, var(--color-slate-900) 10%, transparent);
     }
   }
+  .bg-teal-100 {
+    background-color: var(--color-teal-100);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -786,9 +769,15 @@
   .object-contain {
     object-fit: contain;
   }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -807,15 +796,18 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -831,29 +823,32 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .py-40 {
-    padding-block: calc(var(--spacing) * 40);
-  }
-  .pt-6 {
-    padding-top: calc(var(--spacing) * 6);
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
   }
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
   .text-center {
     text-align: center;
   }
+  .text-right {
+    text-align: right;
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-  .text-4xl {
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
-  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -877,9 +872,6 @@
   .text-\[10px\] {
     font-size: 10px;
   }
-  .text-\[11px\] {
-    font-size: 11px;
-  }
   .text-\[20px\] {
     font-size: 20px;
   }
@@ -926,27 +918,34 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
-  .text-wrap {
-    text-wrap: wrap;
+  .break-words {
+    overflow-wrap: break-word;
   }
   .break-keep {
     word-break: keep-all;
   }
+  .hyphens-auto {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
   .text-\[\#111418\] {
     color: #111418;
   }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
+  .text-amber-700 {
+    color: var(--color-amber-700);
+  }
   .text-blue-700 {
     color: var(--color-blue-700);
   }
+  .text-emerald-700 {
+    color: var(--color-emerald-700);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -980,6 +979,9 @@
   .text-red-700 {
     color: var(--color-red-700);
   }
+  .text-sky-700 {
+    color: var(--color-sky-700);
+  }
   .text-slate-400 {
     color: var(--color-slate-400);
   }
@@ -995,6 +997,9 @@
   .text-slate-900 {
     color: var(--color-slate-900);
   }
+  .text-teal-700 {
+    color: var(--color-teal-700);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -1004,9 +1009,6 @@
   .line-through {
     text-decoration-line: line-through;
   }
-  .underline {
-    text-decoration-line: underline;
-  }
   .opacity-30 {
     opacity: 30%;
   }
@@ -1031,17 +1033,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .grayscale {
     --tw-grayscale: grayscale(100%);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1057,10 +1052,6 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1121,13 +1112,6 @@
       color: var(--color-slate-400);
     }
   }
-  .hover\:bg-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-600);
-      }
-    }
-  }
   .hover\:bg-white {
     &:hover {
       @media (hover: hover) {
@@ -1135,16 +1119,6 @@
       }
     }
   }
-  .hover\:bg-white\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
-        }
-      }
-    }
-  }
   .hover\:opacity-50 {
     &:hover {
       @media (hover: hover) {
@@ -1171,24 +1145,158 @@
       outline-width: 0px;
     }
   }
+  .sm\:mb-3 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 3);
+    }
+  }
+  .sm\:mb-4 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:mb-8 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+  }
   .sm\:flex {
     @media (width >= 40rem) {
       display: flex;
     }
   }
+  .sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+  .sm\:h-5 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 5);
+    }
+  }
+  .sm\:w-5 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 5);
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .sm\:gap-2 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 2);
+    }
+  }
+  .sm\:rounded-lg {
+    @media (width >= 40rem) {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .sm\:object-cover {
+    @media (width >= 40rem) {
+      object-fit: cover;
+    }
+  }
+  .sm\:p-6 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:px-2\.5 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:py-1 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 1);
+    }
+  }
+  .sm\:py-4 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .sm\:text-base {
+    @media (width >= 40rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .sm\:text-sm {
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .sm\:text-xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+  .sm\:text-\[11px\] {
+    @media (width >= 40rem) {
+      font-size: 11px;
+    }
+  }
+  .md\:mb-4 {
+    @media (width >= 48rem) {
+      margin-bottom: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:ml-24 {
+    @media (width >= 48rem) {
+      margin-left: calc(var(--spacing) * 24);
+    }
+  }
   .md\:flex {
     @media (width >= 48rem) {
       display: flex;
     }
   }
-  .md\:h-full {
+  .md\:hidden {
     @media (width >= 48rem) {
-      height: 100%;
+      display: none;
+    }
+  }
+  .md\:max-h-\[90vh\] {
+    @media (width >= 48rem) {
+      max-height: 90vh;
+    }
+  }
+  .md\:max-h-none {
+    @media (width >= 48rem) {
+      max-height: none;
+    }
+  }
+  .md\:min-h-\[60vh\] {
+    @media (width >= 48rem) {
+      min-height: 60vh;
     }
   }
   .md\:w-2\/5 {
@@ -1206,25 +1314,115 @@
       flex-direction: row;
     }
   }
+  .md\:gap-2 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 2);
+    }
+  }
+  .md\:rounded-2xl {
+    @media (width >= 48rem) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .md\:rounded-lg {
+    @media (width >= 48rem) {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .md\:object-cover {
+    @media (width >= 48rem) {
+      object-fit: cover;
+    }
+  }
+  .md\:p-0 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:p-4 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:p-8 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .md\:p-10 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 10);
     }
   }
+  .md\:px-2\.5 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+  }
+  .md\:px-4 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:px-8 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+  .md\:px-10 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 10);
+    }
+  }
   .md\:px-40 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 40);
     }
   }
+  .md\:py-1 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 1);
+    }
+  }
+  .md\:py-2 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 2);
+    }
+  }
+  .md\:text-2xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .md\:text-3xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .md\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
   .md\:text-5xl {
     @media (width >= 48rem) {
       font-size: var(--text-5xl);
       line-height: var(--tw-leading, var(--text-5xl--line-height));
     }
   }
-  .lg\:left-\[calc\(50\%\+3rem\)\] {
-    @media (width >= 64rem) {
-      left: calc(50% + 3rem);
+  .md\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\:text-xs {
+    @media (width >= 48rem) {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
   .lg\:ml-24 {
@@ -1237,11 +1435,38 @@
       display: flex;
     }
   }
+  .lg\:hidden {
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
+  .lg\:p-10 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .lg\:px-10 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 10);
+    }
+  }
+  .lg\:text-3xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .lg\:text-4xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
   .xl\:grid-cols-4 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -1252,9 +1477,12 @@
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
   }
-  .\32 xl\:grid-cols-6 {
-    @media (width >= 96rem) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
+  .dark\:border-gray-600\/80 {
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 80%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-gray-600) 80%, transparent);
+      }
     }
   }
   .dark\:border-gray-800 {
@@ -1272,9 +1500,12 @@
       border-color: var(--color-slate-800);
     }
   }
-  .dark\:bg-\[\#111418\] {
+  .dark\:bg-amber-900\/30 {
     @media (prefers-color-scheme: dark) {
-      background-color: #111418;
+      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-amber-900) 30%, transparent);
+      }
     }
   }
   .dark\:bg-blue-900\/30 {
@@ -1285,6 +1516,14 @@
       }
     }
   }
+  .dark\:bg-emerald-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-700);
@@ -1295,6 +1534,14 @@
       background-color: var(--color-gray-800);
     }
   }
+  .dark\:bg-gray-800\/50 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
+      }
+    }
+  }
   .dark\:bg-gray-800\/80 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
@@ -1356,6 +1603,14 @@
       }
     }
   }
+  .dark\:bg-sky-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(39.1% 0.09 240.876) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-sky-900) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-slate-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-slate-700);
@@ -1371,11 +1626,34 @@
       background-color: var(--color-slate-900);
     }
   }
+  .dark\:bg-teal-900\/30 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-teal-900) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-white {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-white);
+    }
+  }
+  .dark\:text-amber-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-amber-400);
+    }
+  }
   .dark\:text-blue-400 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-blue-400);
     }
   }
+  .dark\:text-emerald-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-emerald-400);
+    }
+  }
   .dark\:text-gray-300 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-gray-300);
@@ -1421,16 +1699,16 @@
       color: var(--color-red-400);
     }
   }
+  .dark\:text-sky-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-sky-400);
+    }
+  }
   .dark\:text-slate-100 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-slate-100);
     }
   }
-  .dark\:text-slate-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-slate-300);
-    }
-  }
   .dark\:text-slate-400 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-slate-400);
@@ -1441,6 +1719,16 @@
       color: var(--color-slate-500);
     }
   }
+  .dark\:text-slate-900 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-slate-900);
+    }
+  }
+  .dark\:text-teal-400 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-teal-400);
+    }
+  }
   .dark\:text-white {
     @media (prefers-color-scheme: dark) {
       color: var(--color-white);
@@ -1455,18 +1743,6 @@
       }
     }
   }
-  .dark\:hover\:bg-slate-700\/50 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);
-          }
-        }
-      }
-    }
-  }
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -1590,11 +1866,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1703,6 +1974,11 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -1733,7 +2009,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -1760,6 +2035,7 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-outline-style: solid;
     }
   }
 }