From 51ad5f8d2c0bd25531e3a2907a3726180ab758fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EB=A7=8C=EC=96=B5=20=28Jo=29?=
 <maneokc@smilegate.com>
Date: Wed, 26 Nov 2025 06:00:33 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8QA=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EB=B2=84=EA=B7=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/blocks/DatePicker.vue |   2 +-
 layers/templates/FxCoupon01/index.vue   |   6 +-
 layers/templates/FxDownload01/index.vue | 128 +++++++++++++++---------
 3 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/layers/components/blocks/DatePicker.vue b/layers/components/blocks/DatePicker.vue
index 2cf9dc2..68c82a6 100644
--- a/layers/components/blocks/DatePicker.vue
+++ b/layers/components/blocks/DatePicker.vue
@@ -626,7 +626,7 @@ body .date-picker-menu-wrap .dp__calendar_item {
   padding: 2px 4px !important;
 }
 body .date-picker-menu-wrap .dp__cell_inner {
-  padding: 8px !important;
+  padding: 0px !important;
   border-radius: 100% !important;
   outline: none !important;
   border: none !important;
diff --git a/layers/templates/FxCoupon01/index.vue b/layers/templates/FxCoupon01/index.vue
index fc882c0..b10b139 100644
--- a/layers/templates/FxCoupon01/index.vue
+++ b/layers/templates/FxCoupon01/index.vue
@@ -521,10 +521,6 @@ onMounted(async () => {
               @click="handleCouponUse"
             >
               <span>{{ tm('Coupon_Registration') }}</span>
-              <AtomsIconsCouponFill
-                :size="breakpoints.isMobile ? 16 : 20"
-                color="#FFFFFF"
-              />
             </AtomsButton>
           </div>
 
@@ -804,7 +800,7 @@ onMounted(async () => {
 <style scoped>
 /* Button Style */
 .btn-period {
-  @apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] before:content-none after:content-none
+  @apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] font-[700] before:content-none after:content-none
   transition-all duration-300 ease-in-out
   hover:z-[4] hover:!bg-[#FFFFFF] hover:border-[#404040] hover:!text-[#1F1F1F];
 }
diff --git a/layers/templates/FxDownload01/index.vue b/layers/templates/FxDownload01/index.vue
index 8b90349..7e8f355 100644
--- a/layers/templates/FxDownload01/index.vue
+++ b/layers/templates/FxDownload01/index.vue
@@ -164,7 +164,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
             </span>
 
             <h4
-              class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
+              class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
             >
               <span>{{ tm('Download_Box_PC_Title') }}</span>
 
@@ -299,27 +299,44 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
     <section ref="specPCRef" class="section-static">
       <WidgetsFixSubTitle :title="tm('Download_Section_PC_Title')" />
 
-      <table>
-        <thead>
-          <tr>
-            <th class="w-[80px] md:w-[172px]">
-              {{ tm('Download_Table_Item') }}
-            </th>
-            <th>{{ tm('Download_Table_Min_Spec') }}</th>
-            <th>{{ tm('Download_Table_Rec_Spec') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="tr in pcSpecList" :key="tr.id">
+      <div
+        class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
+      >
+        <table>
+          <thead>
             <tr>
-              <th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
-              <template v-for="td in tr.itemData" :key="td.display.text">
-                <td>{{ td.display.text }}</td>
-              </template>
+              <th class="w-[80px] md:w-[172px] !border-l-[0]">
+                {{ tm('Download_Table_Item') }}
+              </th>
+              <th>{{ tm('Download_Table_Min_Spec') }}</th>
+              <th>{{ tm('Download_Table_Rec_Spec') }}</th>
             </tr>
-          </template>
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            <template v-for="(tr, trIdx) in pcSpecList" :key="tr.id">
+              <tr>
+                <th
+                  :class="[
+                    'w-[80px] md:w-[172px] !border-l-[0]',
+                    trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : '',
+                  ]"
+                >
+                  {{ tr.itemText }}
+                </th>
+                <template v-for="td in tr.itemData" :key="td.display.text">
+                  <td
+                    :class="
+                      trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : ''
+                    "
+                  >
+                    {{ td.display.text }}
+                  </td>
+                </template>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
 
       <div
         v-if="!breakpoints.isMobile"
@@ -420,33 +437,50 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
 
     <section ref="specMobileRef" class="section-static">
       <WidgetsFixSubTitle :title="tm('Download_Section_MOBILE_Title')" />
-      <table>
-        <thead>
-          <tr>
-            <th rowspan="2" class="w-[80px] md:w-[172px]">
-              {{ tm('Download_Table_Item') }}
-            </th>
-            <th colspan="2">{{ tm('Download_Table_Min_Spec') }}</th>
-            <th colspan="2">{{ tm('Download_Table_Rec_Spec') }}</th>
-          </tr>
-          <tr>
-            <th>{{ tm('Download_Table_Device') }}</th>
-            <th>{{ tm('Download_Table_Os') }}</th>
-            <th>{{ tm('Download_Table_Device') }}</th>
-            <th>{{ tm('Download_Table_Os') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="tr in mobileSpecList" :key="tr.id">
+      <div
+        class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
+      >
+        <table>
+          <thead>
             <tr>
-              <th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
-              <template v-for="td in tr.itemData" :key="td.display.text">
-                <td>{{ td.display.text }}</td>
-              </template>
+              <th rowspan="2" class="w-[80px] md:w-[172px] !border-l-[0]">
+                {{ tm('Download_Table_Item') }}
+              </th>
+              <th colspan="2">{{ tm('Download_Table_Min_Spec') }}</th>
+              <th colspan="2">{{ tm('Download_Table_Rec_Spec') }}</th>
             </tr>
-          </template>
-        </tbody>
-      </table>
+            <tr>
+              <th>{{ tm('Download_Table_Device') }}</th>
+              <th>{{ tm('Download_Table_Os') }}</th>
+              <th>{{ tm('Download_Table_Device') }}</th>
+              <th>{{ tm('Download_Table_Os') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="(tr, trIdx) in mobileSpecList" :key="tr.id">
+              <tr>
+                <th
+                  :class="[
+                    'w-[80px] md:w-[172px] !border-l-[0]',
+                    trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : '',
+                  ]"
+                >
+                  {{ tr.itemText }}
+                </th>
+                <template v-for="td in tr.itemData" :key="td.display.text">
+                  <td
+                    :class="
+                      trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : ''
+                    "
+                  >
+                    {{ td.display.text }}
+                  </td>
+                </template>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
     </section>
   </div>
 </template>
@@ -457,11 +491,11 @@ table {
   @apply w-full h-auto border-collapse border-spacing-0 table-fixed;
 }
 table th {
-  @apply py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FAFAFA] text-[#1F1F1F] text-[14px] font-bold leading-[24px] tracking-[-0.42px]
+  @apply py-[8px] px-[12px] border-l border-b border-solid border-[#D9D9D9] bg-[#FAFAFA] text-center text-[#1F1F1F] text-[14px] font-bold leading-[24px] tracking-[-0.42px]
   md:py-[11px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
 }
 table td {
-  @apply h-[64px] py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FFFFFF] text-[#666666] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]
+  @apply h-[64px] py-[8px] px-[12px] border-l border-b border-[#D9D9D9] bg-[#FFFFFF] text-center text-[#666666] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]
   md:h-[80px] md:py-[14px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
 }