From 2a69fdee42f225586ba84b889f1747c24677be1b Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Wed, 4 Feb 2026 17:31:14 +0900
Subject: [PATCH] =?UTF-8?q?-=20=ED=85=8C=EC=9D=BC=EC=9C=88=EB=93=9C=20?=
 =?UTF-8?q?=EA=B2=BD=EA=B3=A0=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?-=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=83=91:=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=20=EA=B0=80=EC=9A=B4=EB=8D=B0=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html         | 20 ++++++++++----------
 scripts/modal.js   |  8 ++++++--
 style/tailwind.css | 29 ++++++++++-------------------
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index 6a5c5f1..f5051f6 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,7 @@
                         </div>
                     </div>
                     <div class="flex flex-1 justify-end gap-4 items-center">
-                        <label class="flex flex-col min-w-40 !h-10 max-w-64">
+                        <label class="flex flex-col min-w-40 h-10 max-w-64">
                             <div class="flex w-full flex-1 items-stretch rounded-lg h-full border border-slate-200 dark:border-slate-700">
                                 <div class="text-slate-400 flex items-center justify-center pl-3">
                                     <span class="material-symbols-outlined text-[20px]">search</span>
@@ -146,9 +146,9 @@
                 </main>
                 <!-- 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()">
+                <div id="product-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 backdrop-blur-sm p-4 md:p-10" onclick="if(event.target === this) closeModal()">
                     <!-- 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">
+                    <div class="relative w-full max-w-6xl max-h-[calc(100dvh-2rem)] md:max-h-[90vh] 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 mx-auto">
                         <!-- 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>
@@ -160,7 +160,7 @@
                                 <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="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"
@@ -188,17 +188,17 @@
                                         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>
+                                    <span id="modal-custom-tag" class="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>
+                                <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 wrap-break-word 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>
+                                        <span id="modal-date" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right wrap-break-word 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>
@@ -207,18 +207,18 @@
                                                 <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>
+                                            <span id="modal-condition" class="text-[#111418] dark:text-white text-xs sm:text-sm font-semibold text-right wrap-break-word"></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>
+                                    <p id="modal-desc" class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed wrap-break-word"></p>
                                 </div>
                             </div>
                             <!-- 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">
+                            <div class="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>
diff --git a/scripts/modal.js b/scripts/modal.js
index 03f8212..a4abe00 100644
--- a/scripts/modal.js
+++ b/scripts/modal.js
@@ -8,13 +8,17 @@ export function openModal(id) {
     if (!product) return;
 
     const modal = document.getElementById('product-modal');
+
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    
     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="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>
@@ -29,7 +33,7 @@ export function openModal(id) {
             <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" 
+                        hover:opacity-100 transition-all shrink-0" 
                  style="background-image: url('${img}');"></div>
         `,
         )
diff --git a/style/tailwind.css b/style/tailwind.css
index 0307292..45dd428 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -63,7 +63,6 @@
     --color-slate-700: oklch(37.2% 0.044 257.287);
     --color-slate-800: oklch(27.9% 0.041 260.031);
     --color-slate-900: oklch(20.8% 0.042 265.755);
-    --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
@@ -76,7 +75,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-xl: 36rem;
     --container-3xl: 48rem;
     --container-6xl: 72rem;
     --text-xs: 0.75rem;
@@ -95,8 +93,6 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 1;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -325,6 +321,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[60\] {
+    z-index: 60;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -343,6 +342,9 @@
       max-width: 96rem;
     }
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -395,9 +397,6 @@
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
   }
-  .\!h-10 {
-    height: calc(var(--spacing) * 10) !important;
-  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -476,9 +475,6 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -653,10 +649,10 @@
       background-color: color-mix(in oklab, var(--color-amber-400) 10%, transparent);
     }
   }
-  .bg-black\/40 {
-    background-color: color-mix(in srgb, #000 40%, transparent);
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
     }
   }
   .bg-blue-100 {
@@ -899,7 +895,7 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
-  .break-words {
+  .wrap-break-word {
     overflow-wrap: break-word;
   }
   .break-keep {
@@ -1269,11 +1265,6 @@
       max-height: none;
     }
   }
-  .md\:min-h-\[60vh\] {
-    @media (width >= 48rem) {
-      min-height: 60vh;
-    }
-  }
   .md\:w-2\/5 {
     @media (width >= 48rem) {
       width: calc(2/5 * 100%);