<template>
    <div class="pro-single-fund">
        <CardProdDebug :data="pageData" :company="companyInfo"/>
        <!-- <ElementsBack /> -->
        <ElementsHome />
        <section class="pro-single-fund__hero">
            <div class="container">
                <div class="pro-single-fund__hero-title">
                    <div class="-pr">
                        {{ pageData?.RISK_LEVEL }}
                    </div>
                    <div class="-toptag">
                        <template v-for="(tag, index) in filteredTopTags" :key="index">
                            <span>{{ tag }}</span>
                            <span v-if="index !== filteredTopTags.length - 1"> | </span>
                        </template>
                    </div>
                    <h1>{{ pageTitle }}</h1>
                    <div class="-btmtag">
                        <template v-for="(tag, index) in filteredBottomTags" :key="index">
                            <span>{{ tag }}</span>
                            <span v-if="index !== filteredBottomTags.length - 1"> | </span>
                        </template>
                    </div>
                    <div 
                        class="-parentselect"
                        :class="{ 'no-icon': !pageData?.parents_data}"
                    >
                        <select 
                            @change="navigateTo(`/fund/product/${$event.target.value}`)"
                            :disabled="!pageData?.parents_data"
                        >
                            <option 
                                v-for="item in [pageData, ...(pageData?.parents_data || [])].sort((a, b) => {
                                    // 當前選中的項目始終置頂
                                    if (a.FUND_ID === pageData?.FUND_ID) return -1;
                                    if (b.FUND_ID === pageData?.FUND_ID) return 1;
                                    
                                    // 先按 SHARE_TYPE 分組：A 優先
                                    if (a.SHARE_TYPE === 'A' && b.SHARE_TYPE !== 'A') return -1;
                                    if (a.SHARE_TYPE !== 'A' && b.SHARE_TYPE === 'A') return 1;
                                    
                                    // 在相同 SHARE_TYPE 內，按 CLASS_AUM_USD 由大到小排序
                                    const aAum = Number(a.manual_info?.CLASS_AUM_USD?.replace(/[^0-9]/g, '') || 0);
                                    const bAum = Number(b.manual_info?.CLASS_AUM_USD?.replace(/[^0-9]/g, '') || 0);
                                    return bAum - aAum;
                                })"
                                :key="item.FUND_ID"
                                :value="item.FUND_ID"
                            >
                                {{ item.manual_info?.FUND_CLASS }}
                            </option>
                        </select>
                        <NuxtIcon name="keyboard_arrow_right" />
                    </div>
                    <div class="-parentfilter">
                        <div 
                            class="-parentfilter__list"
                            v-if="pageData?.parents_data"
                        >
                            <button 
                                v-for="mark in [...new Set([pageData.SHARE_TYPE, ...(pageData.parents_data?.map(item => item.SHARE_TYPE) || [])])].filter(item => item !== '').sort()" :key="mark"
                                :class="{ '-active': mark === pageData.SHARE_TYPE }"
                                @click="clickFilterPushRouter(mark, 'SHARE_TYPE')"
                            >
                                {{ mark === 'A' ? '前收' : mark === 'B' ? '後收' : '' }}
                            </button>
                        </div>
                        <div v-else class="-parentfilter__list">
                            <button
                                v-if="pageData?.SHARE_TYPE"
                                :class="{ '-active': true }"
                            >
                                {{ pageData?.SHARE_TYPE === 'A' ? '前收' : pageData?.SHARE_TYPE === 'B' ? '後收' : '' }}
                            </button>
                        </div>
                        <div 
                            class="-parentfilter__list"
                            v-if="pageData?.parents_data"
                        >
                            <button 
                                v-for="mark in [...new Set([pageData?.manual_info?.CURRENCY, ...(pageData?.parents_data?.map(item => item.manual_info?.CURRENCY) || [])])].filter(item => item).sort((a, b) => {
                                    const order = ['新台幣', '新台幣避險', '美元', '美元避險', '歐元', '歐元避險', '日圓', '日圓避險', '人民幣', '人民幣避險', '加幣避險', '南非幣', '南非幣避險', '英鎊', '紐西蘭幣', '紐西蘭幣避險', '港幣', '新加坡幣', '瑞士法朗', '澳幣', '澳幣避險'];
                                    return order.indexOf(a) - order.indexOf(b);
                                })" :key="mark"
                                :class="{ '-active': mark === pageData?.manual_info?.CURRENCY }"
                                @click="clickFilterPushRouter(mark, 'CURRENCY')"
                            >
                                {{ mark }}
                            </button>
                        </div>
                        <div v-else class="-parentfilter__list">
                            <button 
                                v-if="pageData?.manual_info?.CURRENCY"
                                :class="{ '-active': true }"
                            >
                                {{ pageData?.manual_info?.CURRENCY }}
                            </button>
                        </div>
                        <div 
                            class="-parentfilter__list"
                            v-if="pageData?.parents_data"
                        >
                            <button 
                                v-for="mark in [...new Set([pageData?.manual_info?.DIVIDEND_POLICY, ...(pageData?.parents_data?.map(item => item.manual_info?.DIVIDEND_POLICY) || [])])].filter(item => item).sort((a, b) => {
                                    const order = ['累積', '累計', '入息', '不配息', '分派', '分配', '月中配息', '月收息', '月派息', '月配', '月配息', '半年配', '半年配息', '年配', '年配息', '收息', '固定月配', '固定月配息', '季派息', '季配', '季配息', '股利率入息', '配息', '穩定月配', '穩定月配息', '穩定配息', '(配權)', '月配(配權)', '月配息(配權)', '年配息(配權)', '季配息(配權)', '配息(配權)', '累計(配權)', '累積(配權)', '穩定月配息(配權)'];
                                    return order.indexOf(a) - order.indexOf(b);
                                })" :key="mark"
                                :class="{ '-active': mark === pageData?.manual_info?.DIVIDEND_POLICY }"
                                @click="clickFilterPushRouter(mark, 'DIVIDEND_POLICY')"
                            >
                                {{ mark }}
                            </button>
                        </div>
                        <div v-else class="-parentfilter__list">
                            <button 
                                v-if="pageData?.manual_info?.DIVIDEND_POLICY"
                                :class="{ '-active': true }"
                            >
                                {{ pageData?.manual_info?.DIVIDEND_POLICY }}
                            </button>
                        </div>
                    </div>
                    <ClientOnly>
                        <div class="-btntags">
                            <NuxtLink 
                            v-for="(tag, index) in btnTags" 
                            :key="index"
                            class="tagbutton"
                            :class="{ '-nosearch': !tag.searchable }"
                            :to="tag.searchable ? `/search/result?type=fund&keyword=${tag.value}` : null"
                            v-show="tag?.display_tag === true"
                        >
                                {{ tag.value }}
                            </NuxtLink>
                        </div>
                    </ClientOnly>
                </div>
            </div>
        </section>


        <div class="pro-single-fund__content-wrapper">
            <div 
                class="pro-single-fund__sticktab"
                :class="[
                    {'-height': menuData?.blocks?.[1]?.fields?.event_list?.length > 0}, 
                    {'-top': userAgentInfo && userAgentInfo !== 'web'}
                ]"
            >
                <div class="container">
                    <span 
                        v-if="pageData?.manual_info?.DES1 && pageData?.manual_info?.DES1 !== '0'" 
                        @click="handleTabClick('text')"
                        :class="{ 'active': activeTab === 'text' }"
                    >
                        簡介
                    </span>
                    <span 
                        @click="handleTabClick('info')"
                        :class="{ 'active': activeTab === 'info' }"
                    >
                        基本資料
                    </span>
                </div>
            </div>
            <section class="pro-single-fund__content">
                <div class="container">
                    <div v-if="pageData?.manual_info?.DES1 && pageData?.manual_info?.DES1 !== '0'" class="pro-single-fund__content-text" id="pro-single-fund-text">
                        <h2>簡介</h2>
                        <div class="-description">
                            <ClientOnly>
                                <p v-if="pageData?.manual_info?.DES1 !== '0'" :class="{ '-expanded': desIsExpanded }" v-html="pageData?.manual_info?.DES1" />
                            </ClientOnly>
                            <button 
                                v-if="pageData?.manual_info?.DES1?.length > 100" 
                                class="read-more" 
                                @click="desIsExpanded = !desIsExpanded"
                            >
                                {{ desIsExpanded ? '收合' : '...閱讀更多' }}
                            </button>
                        </div>
                    </div>
                    <div class="pro-single-fund__content-info" id="pro-single-fund-info">
                        <h2>基本資料</h2>
                        <div class="-data">
                            <ul>
                                <li v-for="(item, index) in dataTable" :key="index">
                                    <p>
                                        {{ item.title }}
                                        <span v-if="item.des">{{ item.des }}</span>
                                    </p>
                                    <p>
                                        {{ item.value }}
                                    </p>
                                </li>
                            </ul>
                        </div>
                        <div class="pro-single-fund__content-more">
                            <p v-if="pageData?.manual_info?.AUM_DATE">截至 {{ dayjs(pageData?.manual_info?.AUM_DATE).format('YYYY/MM/DD') }}</p>
                            <a target="_blank" :href="`https://mmafund.sinopac.com/w/CustFundIDMap.djhtm?a=${pageData?.manual_info?.FUND_ID}&b=10`">
                                更多資料
                                <NuxtIcon name="keyboard_arrow_right" />
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div 
            class="pro-single-fund__buy"
            v-if="pageData?.TERMINATION_MARK === 'N' || pageData?.TERMINATION_MARK === 'V' || pageData?.TERMINATION_MARK === 'S' || pageData?.TERMINATION_MARK === 'R'"
        >
            <div class="container">
                <ElementsButton
                    v-if="pageData?.TERMINATION_MARK !== 'R' && pageData?.TERMINATION_MARK !== 'V'"
                    :data="{
                        text: '單筆申購',
                        size: 'border',
                    }"
                    @click="(event) => clickBuyRedirect(pageData?.FUND_ID, 'fund', 'single', event)"
                />
                <ElementsButton
                    v-if="Number(pageData?.NTD_AUTOINVEST_MARK) === 1 || Number(pageData?.FORECUR_AUTOINVEST_MARK) === 1"
                    :data="{
                        text: '定期定額',
                    }"
                    @click="(event) => clickBuyRedirect(pageData?.FUND_ID, 'fund', 'regular', event)"
                />
            </div>
        </div>
        <FooterNotify 
            :data="notifyData?.blocks[3]?.fields?.investment_description" 
        />
        <Footer />
    </div>
</template>
<script setup>
    const { $LCscroll } = useNuxtApp()
    const pageloaded = usePageLoaded()
    const route = useRoute()
    const { data: companyData } = useAsyncData('companyData_single', () => $fetch('/api/get_company', {method: 'GET' }))
    const siteInfoData = useSiteInfoData()
    const menuData = computed(() => siteInfoData?.value?.header)
    const companyInfo = computed(() => {
        return companyData?.value?.find(company => company.ID === pageData.value?.manual_info.FUND_COMPANY_ID)
    })
    const firstPath = computed(() => {
        return route.path.split('/')[1]
    })
    const { id } = useRoute().params
    const { data: config } = await useFetch('/api/get_config')
    const desIsExpanded = ref(false)
    const userAgentInfo = useUserAgentInfo()

    // console.log('menuData', menuData.value)
    // console.log('menuDatafefewfeefefefe', menuData.value.blocks[1].fields?.event_list?.length)

    const { data: pageData, pending, error: pageDataError } = await useAsyncData(
        'get_product_manual_single' + firstPath.value + id,
        () => $fetch(`/api/get_product_manual_single`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
            params: {
                id: id,
                type: firstPath.value
            }
        })
    )

    if (pageDataError.value || !pageData.value?.manual_info?.FUND_ID) {
        throw createError({
            statusCode: 404
        })
    }

    const { data: notifyData } = await useAsyncData(
        'notifyData' + 'fund_index',
        () => $fetch(`/api/get_single_type?id=fund_index`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
    )

    watchEffect(() => {
        if (!pending.value) {
            pageloaded.value = true
        }
    })

    const pageTitle = ref(pageData?.value?.manual_info?.FUND_NAME_CHI)
    const topTags = ref([
        pageData?.value?.OFFSHORE_FUND_MARK === '1' ? '境外基金' : '境內基金',
        companyInfo.value?.NAME_CUSTOM_CHI || ''
    ])
    const filteredTopTags = computed(() => {
        return topTags.value.filter(tag => tag !== '')
    })
    const bottomTags = ref([
        pageData?.value?.manual_info?.CLASS1,
        pageData?.value?.manual_info?.CLASS2,
        pageData?.value?.manual_info?.CLASS3,
        pageData?.value?.manual_info?.CLASS4,
        pageData?.value?.manual_info?.CLASS5,
    ])
    const filteredBottomTags = computed(() => {
        return bottomTags.value.filter(tag => tag !== '').slice(0, 5)
    })
    const dayjs = useDayjs()
    const dataTable = ref([
        {
            title: `基金規模${pageData?.value?.manual_info?.AUM !== '' ? '（' + pageData?.value?.manual_info?.AUM_CUR + '）' : ''}`,
            // des: `(百萬，${dayjs(pageData?.value?.manual_info?.AUM_DATE).format('YYYY/MM/DD')})`,
            value: pageData?.value?.manual_info?.AUM !== '' ? (Number(String(pageData?.value?.manual_info?.AUM).replace(/[^\d.-]/g, '')) >= 1000 ? formatInteger(pageData?.value?.manual_info?.AUM) : formatCurrency(pageData?.value?.manual_info?.AUM)) : ''
        }, {
            title: 'ISIN', 
            value: pageData?.value?.ISIN_CODE || ''
        }, {
            title: '基金成立日',
            value: dayjs(pageData?.value?.manual_info?.INCEPTION_LONGEST).format('YYYY/MM/DD') || ''
        }, {
            title: '級別成立日',
            value: dayjs(pageData?.value?.manual_info?.INCEPTION_CLASS).format('YYYY/MM/DD') || ''
        }, {
            title: '商品代號',
            value: pageData?.value?.FUND_ID || ''
        }
    ].filter(item => item.value))

    const clickFilterPushRouter = (value, key) => {
        console.log('value', value, 'key', key)
        
        // 建立篩選條件物件，包含所有三個欄位
        const filters = {
            SHARE_TYPE: pageData.value?.SHARE_TYPE,
            CURRENCY: pageData.value?.manual_info?.CURRENCY,
            DIVIDEND_POLICY: pageData.value?.manual_info?.DIVIDEND_POLICY,
            [key]: value // 更新點擊的篩選條件
        }

        console.log('目前篩選條件', filters)

        let filteredParents

        // 如果是 DIVIDEND_POLICY，優先找符合配息政策的資料
        if (key === 'DIVIDEND_POLICY') {
            filteredParents = pageData.value?.parents_data?.filter(parent => {
                return parent.manual_info?.DIVIDEND_POLICY === value
            })
        } else {
            // 其他情況，嘗試找出符合所有篩選條件的資料
            filteredParents = pageData.value?.parents_data?.filter(parent => {
                return Object.entries(filters).every(([filterKey, filterValue]) => {
                    if (filterKey === 'DIVIDEND_POLICY' && filterValue === '') {
                        return true
                    }
                    
                    if (filterKey === 'SHARE_TYPE') {
                        return parent[filterKey] === filterValue
                    }
                    
                    return parent.manual_info?.[filterKey] === filterValue
                })
            })

            // 如果沒有找到符合所有條件的資料，嘗試只符合 CURRENCY
            if (!filteredParents?.length && key === 'CURRENCY') {
                // 找出所有可能的 SHARE_TYPE 值
                const allShareTypes = [...new Set(pageData.value?.parents_data?.map(parent => parent.SHARE_TYPE))]
                
                // 使用另一個 SHARE_TYPE 值
                const otherShareType = allShareTypes.find(type => type !== filters.SHARE_TYPE)
                
                if (otherShareType) {
                    filteredParents = pageData.value?.parents_data?.filter(parent => {
                        return parent.SHARE_TYPE === otherShareType &&
                               parent.manual_info?.CURRENCY === value
                    })
                }
            }

            // 如果還是沒找到，只找符合 SHARE_TYPE 的資料
            if (!filteredParents?.length) {
                filteredParents = pageData.value?.parents_data?.filter(parent => {
                    return parent.SHARE_TYPE === filters.SHARE_TYPE
                })
                // console.log('如果還是沒找到，只找符合 SHARE_TYPE 的資料', filteredParents)
            }
        }

        // console.log('篩選出來的資料，只顯示第一個', filteredParents?.[0], filteredParents)
        
        if (filteredParents?.length) {
            filteredParents.forEach(parent => {
                console.log(`
                    FUND_ID: ${parent.FUND_ID}
                    SHARE_TYPE: ${parent.SHARE_TYPE}
                    CURRENCY: ${parent.manual_info?.CURRENCY}
                    DIVIDEND_POLICY: ${parent.manual_info?.DIVIDEND_POLICY}
                    ----------------------
                `)
            })
            navigateTo(`/fund/product/${filteredParents[0].FUND_ID}`)
        }
    }

    const activeTab = ref(pageData.value?.manual_info?.DES1 && pageData.value?.manual_info?.DES1 !== '0' ? 'text' : 'info')

    const handleTabClick = (tab) => {
        if (tab === 'text') {
            $LCscroll.scrollTo('#pro-single-fund-text', { duration: 2, offset: -120 })
        } else {
            $LCscroll.scrollTo('#pro-single-fund-info', { duration: 2, offset: -120 })
        }
    }

    const observer = ref(null)

    const btnTags = computed(() => {
        const rawTags = pageData.value.manual_info.TAG ? pageData.value.manual_info.TAG.split(',') : []
        return useProductTagsFields(rawTags)
    })
    
    onMounted(() => {

        observer.value = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (entry.target.id === 'pro-single-fund-text') {
                        activeTab.value = 'text'
                    } else if (entry.target.id === 'pro-single-fund-info') {
                        activeTab.value = 'info'
                    }
                }
            })
        }, {
            threshold: 0.9,
            rootMargin: '-120px 0px 0px 0px'
        })

        const textSection = document.querySelector('#pro-single-fund-text')
        const infoSection = document.querySelector('#pro-single-fund-info')

        if (textSection) observer.value.observe(textSection)
        if (infoSection) observer.value.observe(infoSection)

        console.log('pageData', pageData.value)
    })

    onUnmounted(() => {
        if (observer.value) {
            observer.value.disconnect()
        }
    })

    const ogImage = ref( siteInfoData?.value?.seo?.site_img)

    // SEO 區域
    useHead({
        title: pageTitle.value || '基金標的',
        meta: useMetaReturn({
            title: pageTitle.value || '',
            image: `/images/${ogImage.value?._id}.${ogImage.value?.fileType}`,
            url: config.value?.SITE_URL + route?.fullPath
        })
    })
</script>
<style lang="scss">
    $class-name: pro-single-fund;
    .#{$class-name} {

        &__buy {
            position: absolute;
            top: 22rem;
            right: 0;
            width: 100%;
            text-align: center;

            @include media-breakpoint-down(medium) {
                position: sticky;
                top: initial;
                bottom: 0;
                background: #fff;
                z-index: 10;
                padding: 2.4rem 0;
                border-top: 1px solid map-get($colors, gray-3);

                .button {
                    flex: 1;
                    button {
                        width: 100%;
                    }
                }
            }

            .container {
                display: inline-flex;
                justify-content: flex-end;
                gap: 1.6rem;
            }
        }

        &__hero {
            padding-top: 22rem;
            padding-bottom: 8rem;
            background-color: map-get($colors, brand-5);

            @include media-breakpoint-down(medium) {
                padding-top: 16rem;
                padding-bottom: 4.8rem;
            }

            &-title {
                display: flex;
                flex-direction: column;
                gap: 1.6rem;

                @include media-breakpoint-down(medium) {
                    gap: 1.2rem;
                }

                h1 {
                    @include typo('head', 36);

                    @include media-breakpoint-down(medium) {
                        @include typo('head', 24);
                    }
                }
                .-toptag {
                    color: map-get($colors, brand-1);
                    display: flex;
                    align-items: center;
                    gap: .8rem;

                    @include media-breakpoint-down(medium) {
                        @include typo('body', 14);
                    }
                }
                .-pr {
                    @include typo('body', 14);

                    color: map-get($colors, gray-1);
                }
                .-btntags {
                    margin-top: 1rem;
                    font-size: 1.4rem;
                    display: flex;
                    align-items: center;
                    gap: 1.2rem;

                    > .tagbutton {
                        @include media-breakpoint-down(medium) {
                            @include typo('body', 14);
                        }
                    }
                }
                .-parentselect {
                    @include typo('head', 14);
                    color: #fff;
                    display: inline-flex;
                    position: relative;
                    width: fit-content;

                    &.no-icon {
                        .nuxt-icon {
                            display: none;
                        }

                        select {
                            padding: 1rem 1.6rem;
                            pointer-events: none;
                        }
                    }
                    
                    .nuxt-icon {
                        pointer-events: none;
                        position: absolute;
                        right: .8rem;
                        top: 50%;
                        transform: translateY(-50%) rotate(90deg);
                        svg {
                            @include size(2.4rem);
                        }
                    }

                    select {
                        cursor: pointer;
                        padding: 1rem 4rem 1rem 1.6rem;
                        width: auto;
                        max-width: 100%;
                        background-color: map-get($colors, black-2);
                        border-radius: 4px;
                        transition: opacity .3s;

                        @include media-breakpoint-up(medium) {
                            &:hover {
                                opacity: .8;
                            }
                        }
                    }
                }
                .-parentfilter {
                    display: flex;
                    gap: .8rem;
                    flex-direction: column;
                    &__list {
                        display: flex;
                        gap: .8rem;

                        @include media-breakpoint-down(medium) {
                            flex-wrap: wrap;
                        }
                    }
                    button {
                        @include typo('body', 12);
                        background-color: #fff;
                        padding: .4rem 1.2rem;
                        border-radius: 4px;
                        transition: border-color .3s;
                        border: 1px solid transparent;
                        
                        @include media-breakpoint-up(medium) {
                            &:hover {
                                border-color: map-get($colors, brand-1);
                            }
                        }

                        &.-active {
                            background-color: map-get($colors, brand-10);
                        }
                    }
                }
            }
        }

        &__content-wrapper {
            position: relative;
            background: #fff;
        }

        &__sticktab {
            position: sticky;
            top: 5.95rem; // header 高度
            background: #fff;
            z-index: 10;
            border-bottom: 1px solid map-get($colors, gray-3);
            backdrop-filter: blur(8px);
            transform: translateZ(0);
            will-change: transform;

            &.-top {
                @include media-breakpoint-down(medium) {
                    top: 0;
                }
            }

            &.-height {
                top: 11.1rem;

                @include media-breakpoint-down(medium) {
                    top: 11.3rem;
                }
            }
            
            > .container {
                display: flex;
                align-items: center;
                gap: 3.6rem;
            }

            span {
                @include typo('head', 18);
                cursor: pointer;
                padding: 1.6rem 0;
                position: relative;
                color: map-get($colors, gray-1);
                transition: color .2s;

                @include media-breakpoint-down(medium) {
                    @include typo('head', 14);
                }

                &:before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: map-get($colors, brand-1);
                    transform: scaleX(0);
                    transform-origin: right;
                    transition: transform .3s;
                }
                &:hover {
                    color: map-get($colors, black-1);
                    &:before {
                        transform-origin: left;
                        transform: scaleX(1);
                    }
                }
                &.active {
                    color: map-get($colors, black-1);
                    &:before {
                        transform-origin: left;
                        transform: scaleX(1);
                    }
                }
            }
        }

        &__content {
            position: relative;
            z-index: 1;
            background: #fff;

            h2 {
                @include typo('head', 24);
                margin-bottom: 2.4rem;

                @include media-breakpoint-down(medium) {
                    @include typo('head', 18);
                }
            }

            &-text {
                padding: 4rem 0;
                .-description {
                    position: relative;
                    p {
                        @include editor;
                    }

                    > p {
                        @include media-breakpoint-down(medium) {
                            margin: 0;
                            overflow: hidden;
                            max-height: 100px;

                            &.-expanded {
                                max-height: none;
                            }
                        }
                    }
                    .read-more {
                        @include typo('body', 14);
                        display: none;
                        color: map-get($colors, gray-1);
                        @include media-breakpoint-down(medium) {
                            display: block;
                            background: none;
                            border: none;
                            cursor: pointer;
                            padding: 0;
                            margin-top: 8px;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }

            &-info {
                padding: 4rem 0 12rem;

                @include media-breakpoint-down(medium) {
                    padding: 4rem 0;
                }

                .-data {
                    overflow: hidden;
                    border-radius: 1rem;
                    background-color: map-get($colors, gray-3);

                    ul {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 1rem;

                        @include media-breakpoint-down(medium) {
                            gap: 0;
                        }

                        li {
                            padding: 2.4rem 4rem;
                            width: 49%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            @include media-breakpoint-down(medium) {
                                width: 100%;
                                padding: 1.2rem 1.6rem;
                            }

                            &:first-child {
                                @include media-breakpoint-down(medium) {
                                    padding: 1.6rem 1.6rem 1.2rem 1.6rem;
                                }
                            }

                            &:last-child {
                                @include media-breakpoint-down(medium) {
                                    padding: 1.2rem 1.6rem 1.6rem 1.6rem;
                                }
                            }

                            p {
                                span {
                                    font-size: 1.2rem;
                                    display: block;
                                }
                                &:first-child {
                                    @include typo('body', 16);
                                    color: map-get($colors, gray-1);
                                }
                                &:last-child {
                                    @include typo('head', 18);

                                    @include media-breakpoint-down(medium) {
                                        @include typo('head', 16);
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &-more {
                margin-top: 1.6rem;
                text-align: center;
                color: map-get($colors, black-2);
                display: flex;
                justify-content: space-between;
                align-items: center;

                @include media-breakpoint-down(medium) {
                    @include typo('head', 14);

                    color: map-get($colors, gray-1);
                    flex-wrap: wrap;
                    gap: .5rem 0;
                }

                a {
                    display: inline-flex;
                    align-items: center;
                    gap: .8rem;
                    
                    .nuxt-icon {
                        transition: transform .3s;
                        svg {
                            @include size(2.4rem);
                        }
                    }
                    &:hover {
                        .nuxt-icon {
                            transform: translateX(1rem);
                        }
                    }
                }

                > p {
                    @include typo('body', 14);

                    color: map-get($colors, gray-1);
                }
            }
        }

        
    }
</style>