From d135e1ee71dbef9b345f399c1c30cd214517379f 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: Fri, 28 Nov 2025 05:35:10 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20[QA|=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/atoms/Tooltip.vue          |   4 +-
 layers/components/blocks/Button/Launcher.vue |  13 +-
 layers/templates/FxDownload01/index.vue      | 138 ++++++++++---------
 3 files changed, 86 insertions(+), 69 deletions(-)

diff --git a/layers/components/atoms/Tooltip.vue b/layers/components/atoms/Tooltip.vue
index ef24ce9..d22a26f 100644
--- a/layers/components/atoms/Tooltip.vue
+++ b/layers/components/atoms/Tooltip.vue
@@ -266,7 +266,7 @@ onUnmounted(() => {
     <div
       v-if="!teleport && isOpen"
       :class="[
-        'absolute z-[10] flex items-center justify-center w-[280px] py-[8px] px-[12px] rounded-[4px]',
+        'absolute z-[10] flex items-center justify-center w-max max-w-[280px] py-[8px] px-[12px] rounded-[4px]',
       ]"
       :style="[
         isPositions.isTop
@@ -295,7 +295,7 @@ onUnmounted(() => {
         v-if="!$slots.panel"
         v-dompurify-html="props.content"
         :class="[
-          `relative flex items-center justify-center w-full text-${props.textAlign} text-[${props.fontSize}] font-[${props.fontWeight}] leading-[${props.lineHeight}] tracking-[${props.letterSpacing}]`,
+          `relative flex items-center justify-center text-${props.textAlign} text-[${props.fontSize}] font-[${props.fontWeight}] leading-[${props.lineHeight}] tracking-[${props.letterSpacing}]`,
         ]"
         :style="[`color: ${props.textColor};`]"
       ></p>
diff --git a/layers/components/blocks/Button/Launcher.vue b/layers/components/blocks/Button/Launcher.vue
index 3d3a0aa..4617fe8 100644
--- a/layers/components/blocks/Button/Launcher.vue
+++ b/layers/components/blocks/Button/Launcher.vue
@@ -106,7 +106,10 @@ const handleClick = () => {
       <span class="text">
         <slot />
       </span>
-      <span v-if="type === 'default'" class="icon-download">
+      <span
+        v-if="type === 'default' && platform === 'pc'"
+        class="icon-download"
+      >
         <AtomsIconsDownloadLine />
       </span>
     </span>
@@ -153,7 +156,13 @@ const handleClick = () => {
   md:text-[16px];
 }
 .btn-base.default .icon-download {
-  @apply border-l border-white/10 ml-auto pl-4;
+  @apply ml-auto pl-4;
+}
+.btn-base.default .btn-content {
+  @apply justify-center;
+}
+.btn-base.default[data-platform='pc'] .btn-content {
+  @apply justify-start;
 }
 .btn-base.default[data-platform='stove'] {
   @apply bg-[#FC4420];
diff --git a/layers/templates/FxDownload01/index.vue b/layers/templates/FxDownload01/index.vue
index 481ca82..7fed015 100644
--- a/layers/templates/FxDownload01/index.vue
+++ b/layers/templates/FxDownload01/index.vue
@@ -137,17 +137,17 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
       <WidgetsFixSubTitle :title="tm('Download_Section_Platform_Title')" />
 
       <div
-        class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[20px] w-full md:grid md:grid-cols-12 md:grid-rows-1"
+        class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[12px] w-full md:gap-[24px] md:grid md:grid-cols-12 md:grid-rows-1 lg:gap-[20px]"
       >
         <div
           v-if="gameData?.platform_type !== '2'"
-          class="relative flex flex-1 flex-col items-start justify-start h-[270px] py-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:pt-[24px] md:pb-0 lg:pt-[32px]"
+          class="relative flex flex-col items-start justify-start w-full h-[270px] py-[20px] rounded-[12px] bg-white sm:w-[calc(50%-6px)] sm:h-auto md:flex-none md:w-auto md:pt-[24px] md:pb-0 lg:pt-[32px]"
           :class="
             gameData?.platform_type === '1' ? 'md:col-span-12' : 'md:col-span-8'
           "
         >
           <div
-            class="relative flex flex-col items-start justify-start w-full max-w-[880px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
+            class="relative flex flex-col items-start justify-start gap-[20px] w-full max-w-[880px] h-full px-[20px] mx-auto md:gap-[24px] md:h-auto md:px-[28px] md:pr-[262px] lg:px-[40px]"
           >
             <span
               v-if="!breakpoints.isMobile"
@@ -166,52 +166,56 @@ 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]"
+            <div
+              class="relative flex flex-col items-start justify-start w-full h-auto min-h-[108px] gap-[8px] md:gap-[12px] lg:min-h-[134px]"
             >
-              <span>{{ tm('Download_Box_PC_Title') }}</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]"
+              >
+                <span>{{ tm('Download_Box_PC_Title') }}</span>
 
-              <AtomsTooltip
-                position="top"
-                :offset="8"
-                background-color="#666666"
-                text-color="#FFFFFF"
-                :arrow="true"
-                :content="tm('Download_Box_PC_Tooltip')"
-              />
-            </h4>
+                <AtomsTooltip
+                  position="top"
+                  :offset="8"
+                  background-color="#666666"
+                  text-color="#FFFFFF"
+                  :arrow="true"
+                  :content="tm('Download_Box_PC_Tooltip')"
+                />
+              </h4>
 
-            <template
-              v-for="(description, dIndex) in tm(
-                'Download_Box_PC_Description_List'
-              )"
-              :key="dIndex"
-            >
-              <p
-                class="relative flex items-center justify-start w-full mt-[12px] text-left text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px] md:text-[15px] md:tracking-[-0.45px]"
-                v-dompurify-html="tm(description as string)"
-              ></p>
-            </template>
+              <template
+                v-for="(description, dIndex) in tm(
+                  'Download_Box_PC_Description_List'
+                )"
+                :key="dIndex"
+              >
+                <p
+                  class="relative flex items-center justify-start w-full text-left text-[#999999] text-[14px] font-[400] leading-[24px] tracking-[-0.42px] md:text-[15px] md:tracking-[-0.45px]"
+                  v-dompurify-html="tm(description as string)"
+                ></p>
+              </template>
 
-            <AtomsButton
-              type="action"
-              button-size="size-small"
-              background-color="transparent"
-              text-color="#1F1F1F"
-              class="relative w-auto h-auto px-0 mt-[12px] text-[16px] font-[500] leading-[24px] tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
-              @click="handleMoveFocus('pc')"
-            >
-              <span>{{ tm('Download_Box_PC_SpecCheck') }}</span>
-              <AtomsIconsLongArrowRightLine
-                :size="20"
-                color="#1F1F1F"
-                class="relative rotate-90"
-              />
-            </AtomsButton>
+              <AtomsButton
+                type="action"
+                button-size="size-small"
+                background-color="transparent"
+                text-color="#1F1F1F"
+                class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+                @click="handleMoveFocus('pc')"
+              >
+                <span>{{ tm('Download_Box_PC_SpecCheck') }}</span>
+                <AtomsIconsLongArrowRightLine
+                  :size="20"
+                  color="#1F1F1F"
+                  class="relative rotate-90"
+                />
+              </AtomsButton>
+            </div>
 
             <div
               v-if="breakpoints.isMobile"
-              class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-[48px] sm:mt-auto border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
+              class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-auto border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
             >
               <span>{{ tm('Download_Button_PC_Mobile') }}</span>
             </div>
@@ -219,7 +223,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
             <BlocksButtonLauncher
               v-else-if="breakpoints.isMd || breakpoints.isDesktop"
               platform="pc"
-              class="!w-full !max-w-[300px] mt-[32px] lg:mt-[48px]"
+              class="!w-full !max-w-[300px]"
             >
               <span>{{ tm('Download_Button_PC') }}</span>
             </BlocksButtonLauncher>
@@ -248,35 +252,39 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
 
         <div
           v-if="gameData?.platform_type !== '1'"
-          class="relative flex flex-1 flex-col items-start justify-start h-[270px] p-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
+          class="relative flex flex-col items-start justify-start w-full h-[270px] p-[20px] rounded-[12px] bg-white sm:w-[calc(50%-6px)] sm:h-auto md:flex-none md:w-auto md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
           :class="
             gameData?.platform_type === '2' ? 'md:col-span-12' : 'md:col-span-4'
           "
         >
           <div
-            class="relative flex flex-col items-start justify-start w-full h-full max-w-[880px] mx-auto"
+            class="relative flex flex-col items-start justify-start gap-[20px] w-full h-full max-w-[880px] mx-auto md:gap-[24px]"
           >
-            <h4
-              class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
+            <div
+              class="relative flex flex-col items-start justify-start w-full gap-[8px] md:gap-[12px]"
             >
-              <span>{{ tm('Download_Box_MOBILE_Title') }}</span>
-            </h4>
+              <h4
+                class="relative flex justify-left items-center w-full 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_MOBILE_Title') }}</span>
+              </h4>
 
-            <AtomsButton
-              type="action"
-              button-size="size-small"
-              background-color="transparent"
-              text-color="#1F1F1F"
-              class="relative w-auto h-auto px-0 mt-[8px] mb-[48px] text-[16px] font-[500] leading-[24px] tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20 md:mt-[12px]"
-              @click="handleMoveFocus('mobile')"
-            >
-              <span>{{ tm('Download_Box_MOBILE_SpecCheck') }}</span>
-              <AtomsIconsLongArrowRightLine
-                :size="20"
-                color="#1F1F1F"
-                class="relative rotate-90"
-              />
-            </AtomsButton>
+              <AtomsButton
+                type="action"
+                button-size="size-small"
+                background-color="transparent"
+                text-color="#1F1F1F"
+                class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+                @click="handleMoveFocus('mobile')"
+              >
+                <span>{{ tm('Download_Box_MOBILE_SpecCheck') }}</span>
+                <AtomsIconsLongArrowRightLine
+                  :size="20"
+                  color="#1F1F1F"
+                  class="relative rotate-90"
+                />
+              </AtomsButton>
+            </div>
 
             <div
               class="relative flex flex-col items-start justify-start w-full gap-[8px] mt-auto md:gap-[12px]"
@@ -423,7 +431,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                 </p>
 
                 <AtomsButton
-                  type="download"
+                  type="link"
                   button-size="size-small"
                   background-color="#383838"
                   text-color="#FFFFFF"