fix. 공통 스타일 수정

layers/assets/css/components/_button.css

@@ -3,19 +3,19 @@
   .size-large {
     /* height: 64px */
     @apply px-10 h-16 text-lg rounded-lg
-    before:rounded after:rounded;
+    before:rounded-lg after:rounded-lg;
   }
 
   .size-medium {
     /* height: 56px */
     @apply px-10 h-14 text-base rounded-lg
-    before:rounded after:rounded;
+    before:rounded-lg after:rounded-lg;
   }
 
   .size-small {
     /* height: 48px */
     @apply px-10 h-12 text-sm rounded-lg
-    before:rounded after:rounded;
+    before:rounded-lg after:rounded-lg;
   }
 
   .size-extra-small {

layers/assets/css/components/_modal.css

@@ -1,7 +1,7 @@
 /* Button Size Classes */
 @layer components {
   .modal-wrap {
-    @apply fixed inset-0 flex p-5 z-[800];
+    @apply overflow-auto fixed inset-0 flex p-5 z-[800];
   }
 
   .modal-wrap.dimmed {

layers/assets/css/components/_splide.css

@@ -22,7 +22,8 @@
     @apply hidden md:block;
   }
   .splide-arrow {
-    @apply absolute top-1/2 w-[48px] h-[48px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5]
+    @apply absolute top-1/2 w-[40px] h-[40px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5]
+    md:w-[40px] md:h-[40px]
     after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
     hover:after:opacity-10;
   }

layers/components/atoms/Button/index.vue

@@ -68,6 +68,7 @@ const componentProps = computed(() => {
     :style="{
       backgroundColor: props.backgroundColor,
       color: props.textColor,
+      '--text-color': props.textColor,
     }"
   >
     <span class="btn-content">
@@ -100,6 +101,9 @@ const componentProps = computed(() => {
     after:bg-[var(--text-color)] after:opacity-20 after:z-[2];
 }
 
+.btn-base:disabled .btn-content {
+  @apply opacity-50;
+}
 .btn-base .btn-content {
   @apply relative flex items-center gap-1 z-[1];
 }

layers/components/atoms/icons/CloseLine.vue

@@ -16,11 +16,10 @@ withDefaults(defineProps<Props>(), {
     :width="size"
     :height="size"
     viewBox="0 0 32 32"
-    fill="none"
+    :fill="color"
   >
     <path
       d="M26.2768 8.10947C26.7975 7.58877 26.7975 6.74455 26.2768 6.22385C25.7561 5.70315 24.9119 5.70315 24.3912 6.22385L16.0007 14.6144L7.61013 6.22385C7.08943 5.70315 6.24521 5.70315 5.72451 6.22385C5.20381 6.74455 5.20381 7.58877 5.72451 8.10947L14.115 16.5L5.72451 24.8905C5.20381 25.4112 5.20381 26.2554 5.72451 26.7761C6.24521 27.2968 7.08943 27.2968 7.61013 26.7761L16.0007 18.3856L24.3912 26.7761C24.9119 27.2968 25.7561 27.2968 26.2768 26.7761C26.7975 26.2554 26.7975 25.4112 26.2768 24.8905L17.8863 16.5L26.2768 8.10947Z"
-      :fill="color"
     />
   </svg>
 </template>

layers/components/blocks/slide/Default.vue

@@ -49,7 +49,6 @@ const options = computed((): ResponsiveOptions => {
     updateOnMove: true,
     autoplay: props.autoplay,
     drag: props.drag,
-    trimSpace: false,
     arrows: props.arrows,
     pagination: props.pagination,
     destroy: props.destroy,

layers/components/blocks/slide/Thumbnail.vue

@@ -172,12 +172,12 @@ onBeforeUnmount(() => {
   @apply md:w-[calc(100%-16px)];
 }
 .thumbnail-slide {
-  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px] md:bg-transparent
+  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px]
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
 }
 .thumbnail-slide:hover,
 .thumbnail-slide.is-active {
-  @apply bg-[var(--pagination-active)] md:bg-transparent;
+  @apply bg-[var(--pagination-active)];
 }
 .thumbnail-slide::after {
   @apply border-[var(--pagination-disabled)];
@@ -208,10 +208,10 @@ onBeforeUnmount(() => {
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img,
 .thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active img {
-  @apply md:grayscale-0 md:opacity-100;
+  @apply md:grayscale-0;
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-slide img {
-  @apply hidden md:block md:grayscale md:opacity-60;
+  @apply hidden md:block md:grayscale;
 }
 
 /* 미디어 버전 스타일 */
@@ -219,13 +219,15 @@ onBeforeUnmount(() => {
   @apply flex flex-col items-center;
 }
 .thumbnail-carousel.thumbnail-media .thumbnail-splide {
-  @apply max-w-[calc(100%+40px)] mt-[20px] mx-[-20px] sm:max-w-[calc(100%+80px)] sm:mx-[-40px] md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[112px];
+  @apply max-w-[calc(100%+40px)] mt-[20px] mx-[-20px] 
+  sm:max-w-[calc(100%+80px)] sm:mx-[-40px] 
+  md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[64px];
 }
 .thumbnail-carousel.thumbnail-media:deep(.arrow-prev) {
-  @apply left-[48px];
+  @apply left-[0];
 }
 .thumbnail-carousel.thumbnail-media:deep(.arrow-next) {
-  @apply right-[48px];
+  @apply right-[0];
 }
 .thumbnail-carousel.thumbnail-media .thumbnail-slide {
   @apply aspect-[16/9] w-[92px] md:w-[128px];

layers/components/layouts/Header.vue

@@ -333,7 +333,7 @@ onBeforeUnmount(() => {
             >
               {{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
             </AtomsButtonLauncher>
-            <div v-if="gnb2depthButtonData" class="nav-2depth">
+            <div v-if="gnb2depthButtonData" class="nav-2depth hidden md:block">
               <ul>
                 <li v-for="(item, key) in gnb2depthButtonData" :key="key">
                   <AtomsButtonLauncher type="custom" :platform="key">

layers/templates/FxVideo01/index.vue

@@ -61,7 +61,7 @@ const { data: slideData } = await useAsyncData(
     })
 
     const mediaList = getComponentContainer(operateGroupList, 'mediaList', {
-      hasGroup: true,
+      isGroup: true,
     }) as OperateGroupItem[]
 
     return mediaList ?? []
@@ -238,11 +238,11 @@ const handleLoadMoreRecent = () => {
   @apply block;
 }
 .splide:deep(.splide-arrows) .splide-arrow {
-  @apply block top-[unset] bottom-[20px] translate-y-0 w-[40px] h-[40px] bg-cover bg-center bg-no-repeat
-  sm:bottom-[24px] md:bottom-[36px] md:w-[48px] md:h-[48px] lg:bottom-[60px];
+  @apply block top-[unset] bottom-[20px] translate-y-0 bg-cover bg-center bg-no-repeat
+  sm:bottom-[24px] md:bottom-[36px] lg:bottom-[60px];
 }
 .splide:deep(.splide-arrows) .arrow-prev {
-  @apply left-[20px] bg-[image:url('/images/common/btn_system_arrow_rev.png')]
+  @apply left-[20px] bg-[image:url('/images/common/btn_system_arrow_prev.png')]
   sm:left-[calc(60.3%+21px)] 
   md:left-[calc(56%+39px)] 
   lg:left-[790px];

layers/templates/GrGallery01/index.vue

@@ -166,6 +166,9 @@ const onArrowClick = (direction, targetIndex) => {
 .thumbnail-carousel:deep(.thumbnail-slide.is-active) {
   @apply opacity-100;
 }
+.thumbnail-carousel:deep(.thumbnail-splide .splide__track) {
+  @apply md:max-w-[720px];
+}
 
 .main-slide {
   @apply relative aspect-[16/9];

layers/templates/GrVisual02/index.vue

@@ -51,7 +51,7 @@ const { data: slideData } = await useAsyncData(
     })
 
     const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
-      hasGroup: true,
+      isGroup: true,
       minLength: 4,
     }) as OperateGroupItem[]
 

layers/types/api/gameData.ts

@@ -52,6 +52,8 @@ export interface GameDataValue {
   comm_img_json: GameDataCommImg
   market_json: Record<string, { url: string }>
   event_banner: GameDataEventBanner
+  os_type: string // 1:AOS, 2:IOS, 3:둘다
+  platform_type: string // 1:PC, 2:MOBILE, 3:둘다
 }
 
 // ===== 세부 데이터 타입들 =====

layers/types/api/pageData.ts

@@ -118,7 +118,7 @@ export type PageDataTemplateComponentSet = PageDataTemplateComponent & {
   set_order?: number
 }
 
-// 템플릿 컴포넌트 타입 - 세 가지 패턴
+// 템플릿 컴포넌트 타입 - 두가지 패턴
 export type PageDataTemplateComponents =
   | PageDataTemplateComponent // 단일 컴포넌트 패턴
   | {

layers/utils/dataUtil.ts

@@ -82,7 +82,7 @@ export const hasComponentGroup = (
  * @param components props.components
  * @param componentName 컴포넌트 이름
  * @param options 옵션
- *  - hasGroup: groups 속성에서 데이터 가져오기 (기본값: false)
+ *  - isGroup: groups 속성에서 데이터 가져오기 (기본값: false)
  *  - maxLength: 최대 길이 제한
  *  - minLength: 최소 길이 보장 (데이터 반복)
  * @returns 컴포넌트 컨테이너 배열
@@ -90,17 +90,17 @@ export const hasComponentGroup = (
 export const getComponentContainer = (
   components: PageDataTemplateComponents | OperateComponents,
   componentName: string,
-  options: { hasGroup?: boolean; maxLength?: number; minLength?: number } = {}
+  options: { isGroup?: boolean; maxLength?: number; minLength?: number } = {}
 ) => {
   if (!components) return []
 
-  const { hasGroup = false, maxLength, minLength } = options
+  const { isGroup = false, maxLength, minLength } = options
 
   // 1. 초기 컨테이너 가져오기
   const component = components[componentName]
   if (!component) return []
 
-  let result = hasGroup && 'groups' in component ? component.groups : component
+  let result = isGroup && 'groups' in component ? component.groups : component
 
   // 2. 최소 길이 보장 (데이터 복제)
   if (minLength && result.length > 1 && result.length < minLength) {