<template>
    <div class="pro-single-bond">
        <CardProdDebug :data="pageData" :issuer-company="issuerCompany" :guarantee-company="guaranteeCompany"/>
        <!-- <ElementsBack /> -->
        <ElementsHome />
        <!-- 標題區域 -->
        <section class="pro-single-bond__hero">
            
            <div class="container">
                <div class="pro-single-bond__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>
                    <p v-text="pageData?.manual_info?.CALLABLE === 'Y' ? '(發行機構可提前贖回)' : ''" />
                    <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="pro-single-bond__hero-price">

                        <div class="-price">
                        <b v-if="pageData?.OFFER_PRICE === '-' || pageData?.OFFER_PRICE === null || pageData?.OFFER_PRICE === ''">
                            -
                        </b>
                        <b v-else>{{ formatCurrency(pageData?.OFFER_PRICE) }}</b> 
                            <span>
                                {{ pageData?.EXCHANGE_CURRENCY }}
                            </span>
                            <div class="-price-explain">
                                <time v-text="$dayjs(pageData?.TRANSACTION_DATE).format('YYYY/MM/DD')" />
                                <ElementsExplainBox :content="`
                                    <h3>說明</h3>
                                    價格為參考申購價格(%)，YTM依據參考申購價格(%)計算
                                `" />
                            </div>
                        </div>

                        <div class="-price">
                            <b v-if="pageData?.YIELD_TO_MATURITY === null || pageData?.YIELD_TO_MATURITY === '-'">-</b>
                            <b v-else>{{ formatCurrency(pageData?.YIELD_TO_MATURITY) }}</b> 
                            <span>%YTM</span>
                        </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=bond&keyword=${tag.value}` : null"
                            v-show="tag?.display_tag === true"
                        >
                                {{ tag.value }}
                            </NuxtLink>
                        </div>
                    </ClientOnly>
                </div>
            </div>
        </section>
        
        <!-- 資料內容區域 -->
        <div class="pro-single-bond__content-wrapper">
            <div 
                class="pro-single-bond__sticktab"
                :class="[
                    {'-height': menuData?.blocks?.[1]?.fields?.event_list?.length > 0}, 
                    {'-top': userAgentInfo && userAgentInfo !== 'web'}
                ]"
            >
                <div class="container">
                    <span 
                        v-if="companyInfo?.DES1" 
                        :class="{ 'active': activeTab === 'text' }"
                        @click="handleTabClick('text')"
                    >發行人簡介</span>
                    <span 
                        :class="{ 'active': activeTab === 'info' }"
                        @click="handleTabClick('info')"
                    >基本資料</span>
                    <span 
                        v-if="issuerData" 
                        :class="{ 'active': activeTab === 'org' }"
                        @click="handleTabClick('org')"
                    >發行機構財務資料</span>
                    <span 
                        v-if="guaranteeData && !issuerData"
                        :class="{ 'active': activeTab === 'guarantee' }"
                        @click="handleTabClick('guarantee')"
                    >保證機構財務資料</span>
                </div>
            </div>

            <section class="pro-single-bond__content">
                <div class="container">
                    <ClientOnly>
                        <div v-if="issuerCompany?.DES1" class="pro-single-bond__content-text" id="pro-single-bond-text">
                            <h2>發行人簡介</h2>
                            <div class="-description" ref="descriptionRef">
                                <p :class="{ '-expanded': desIsExpanded }" ref="contentRef" v-html="issuerCompany?.DES1" />
                                <button 
                                    v-if="showReadMore"
                                    class="read-more" 
                                    @click="desIsExpanded = !desIsExpanded"
                                >
                                    {{ desIsExpanded ? '收合' : '...閱讀更多' }}
                                </button>
                            </div>
                        </div>
                    </ClientOnly>
                    <div class="pro-single-bond__content-info" id="pro-single-bond-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 v-if="item.title === '平均信評'">
                                        {{ iboxxCaculate(item.value) }}
                                        <ElementsExplainBox 
                                            :content="`
                                                <h3>說明</h3>
                                                <!-- ${pageData.manual_info.FITCH_RATING ? `<p>Fitch：${pageData.manual_info.FITCH_RATING}</p>` : ''}
                                                ${pageData.manual_info.MOODYS_RATING ? `<p>Moody's：${pageData.manual_info.MOODYS_RATING}</p>` : ''}
                                                ${pageData.manual_info['S&P_RATING'] ? `<p>S&P：${pageData.manual_info['S&P_RATING']}</p>` : ''}
                                                <br> -->
                                                平均信用評級計算方式：為根據信用評等機構給予本債券之信用評等，平均計算而得
                                        `" />
                                    </p>

                                    <p v-else>
                                        {{ item.value }}
                                    </p>
                                </li>
                            </ul>
                        </div>
                        <div class="pro-single-bond__content-more">
                            <a target="_blank" :href="`https://mma.sinopac.com/Bond/BondQueries/bond_Quote.aspx`">
                                更多資料
                                <NuxtIcon name="keyboard_arrow_right" />
                            </a>
                        </div>
                    </div>
                    <!-- {{ ultraParentCompany?.ID }}
                    {{ issuerCompany?.ID }}
                    {{ ultraParentCompany?.ID !== issuerCompany?.ID }} -->
                    <div 
                        v-if="issuerData" 
                        class="pro-single-bond__content-info" 
                        id="pro-single-bond-org"
                    >
                        <ElementsExplainBox title="發行機構財務資料" :content="`
                            <h3>說明</h3>
                            <p>如果發行機構有財務資料，優先顯示發行機構財務資料，如無發行機構財務資料，則顯示保證機構財務資料，如都無，僅顯示發行機構名稱</p>
                        `" />
                        <div class="-data">
                            <ul>
                                <li v-for="(item, index) in issuerData" :key="index">
                                    <p>
                                        {{ item.title }}
                                        <span v-if="item.des">{{ item.des }}</span>
                                    </p>
                                    <p>
                                        {{ item.value }}
                                    </p>
                                </li>
                            </ul>
                        </div>
                        <p 
                            class="pro-single-bond__content-date" 
                            v-if="issuerCompany?.FD_DATE !== ''"
                        >
                            營運數據為截至 {{ issuerCompany?.FD_DATE }}之近一年資料，幣別： {{ issuerCompany?.CURRENCY }}，除 EPS 及成長率外單位為百萬。
                        </p>
                    </div>

                    <div 
                        v-if="guaranteeData && !issuerData" 
                        class="pro-single-bond__content-info" 
                        id="pro-single-bond-guarantee"
                    >
                        <ElementsExplainBox
                            title="保證機構財務資料" 
                            :content="`
                            <h3>說明</h3>
                            <p>營運數據為近一年資料，除 EPS 及成長率外單位為百萬。</p>
                        `" />
                        <div class="-data">
                            <ul>
                                <li v-for="(item, index) in guaranteeData" :key="index">
                                    <p>
                                        {{ item.title }}
                                        <span v-if="item.des">{{ item.des }}</span>
                                    </p>
                                    <p>
                                        {{ item.value }}
                                    </p>
                                </li>
                            </ul>
                        </div>
                        <p 
                            class="pro-single-bond__content-date" 
                            v-if="guaranteeCompany?.FD_DATE !== ''"
                        >
                            營運數據為截至 {{ guaranteeCompany?.FD_DATE }}之近一年資料，幣別： {{ guaranteeCompany?.CURRENCY }}，除 EPS 及成長率外單位為百萬。
                        </p>
                    </div>
                </div>
                <!-- <p>{{ issuerData }}</p>
                <p>發行機構{{ issuerCompany }}</p>
                <p>保證機構{{ guaranteeCompany }}</p>
                <p>超級母公司{{ ultraParentCompany }}</p>
                <p>公司資料{{ companyInfo }}</p>
                <p>發行機構財務資料{{ issuerData }}</p>
                <p>保證機構財務資料{{ guaranteeData }}</p>
                <p>pageData?.value?.manual_info?.ISSUER_ID {{ pageData?.manual_info?.ISSUER_ID }}</p>
                <p>pageData?.value?.manual_info?.GUARANTOR_ID {{ pageData?.manual_info?.GUARANTOR_ID }}</p> -->
            </section>
        </div>

        <!-- 申購按鈕區域 -->
        <div class="pro-single-bond__buy" v-if="userAgentInfo !== 'dawho-iphone' && userAgentInfo !== 'dawho-android'">
            <div class="container">
                <!-- <p>{{ pageData?.MATURITY_DATE }} {{ ($dayjs('2019/9/26 0:00').isAfter($dayjs(pageData?.TRANSACTION_DATE))) }}</p>
                <p>{{ pageData?.TRANSACTION_DATE }} </p>
                <p>{{ pageData?.TERMINATION_MARK }} {{ pageData?.TERMINATION_MARK === 'N' }}</p> -->
                <ElementsButton
                    :data="{
                        text: '單筆申購',
                        disabled: 
                            !($dayjs(pageData?.MATURITY_DATE).isAfter($dayjs(pageData?.TRANSACTION_DATE)) && 
                            pageData?.TERMINATION_MARK === 'N'),
                    }"
                    @click="(event) => clickBuyRedirect(pageData?.BOND_ID, 'bond', 'single', event)"
                />
            </div>
        </div>

        <!-- 底部區域 -->
        <FooterNotify 
            :data="notifyData?.blocks[3]?.fields?.investment_description" 
        />
        <Footer />
    </div>
</template>
<script setup>
    const { $LCscroll } = useNuxtApp()
    const dayjs = useDayjs()
    const pageloaded = usePageLoaded()
    const route = useRoute()
    const viewport = useViewport()
    const userAgentInfo = useUserAgentInfo()
    const firstPath = computed(() => {
        return route.path.split('/')[1]
    })
    const siteInfoData = useSiteInfoData()
    const menuData = computed(() => siteInfoData?.value?.header)
    const { id } = useRoute().params
    const desIsExpanded = ref(false)
    // const explainIsShow = ref(false)
    const { data: config } = await useFetch('/api/get_config')
    const { data: companyData } = await useAsyncData('companyData_single', () => $fetch('/api/get_company', {method: 'GET' }))
    
    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
            }
        })
    )

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

    if (pageDataError.value || !pageData.value?.manual_info?.BOND_ID) {
        throw createError({
            statusCode: 404
        })
    }
    watchEffect(() => {
        if (!pending.value) {
            pageloaded.value = true
        }
    })

    
    const pageTitle = ref(pageData?.value?.manual_info?.TICKER + ' ' + pageData?.value?.COUPON_RATE + ' ' + dayjs(pageData?.value?.MATURITY_DATE).format('YYYY-MM-DD'))
    const topTags = ref([
        pageData?.value?.manual_info?.CLASS1,
        companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.ISSUER_ID)?.NAME_CUSTOM_CHI || companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.ISSUER_ID)?.NAME_CUSTOM_ENG || companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.ISSUER_ID)?.NAME_CHI || companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.ISSUER_ID)?.NAME_ENG || ''
    ])
    const filteredTopTags = computed(() => {
        return topTags.value.filter(tag => tag !== '')
    })
    const bottomTags = ref([
        pageData?.value?.EXCHANGE_CURRENCY,
        iboxxCaculate(pageData?.value?.IBOXX_RATING),
        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 !== '')
    })

    const issuerCompany = computed(() => {
        const returnData = companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.ISSUER_ID ? pageData.value.manual_info.ISSUER_ID : '')
        return returnData
    })
    const guaranteeCompany = computed(() => {
        return companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.GUARANTOR_ID ? pageData.value.manual_info.GUARANTOR_ID : '')
    })
    
    // const ultraParentCompany = computed(() => {
    //     return companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.ULTRA_PARENT_COMPANY_ID)
    // })
    
    const dataTable = ref([
        {
            ...(issuerCompany.value && {
                title: '發行機構',
                value: `${issuerCompany.value?.NAME_CUSTOM_CHI || issuerCompany.value?.NAME_CHI}\n${issuerCompany.value?.NAME_CUSTOM_ENG || issuerCompany.value?.NAME_ENG}`
            }), 
        }, {
            ...(guaranteeCompany.value && {
                title: '保證機構',
                value: `${guaranteeCompany.value?.NAME_CUSTOM_CHI || guaranteeCompany.value?.NAME_CHI}\n${guaranteeCompany.value?.NAME_CUSTOM_ENG || guaranteeCompany.value?.NAME_ENG}`
            })
        }, {
            title: '保證機構類型',
            value: pageData?.value?.manual_info?.GUARANTOR_TYPE
        }, {
            title: '計價幣別',
            value: pageData?.value?.manual_info?.CURRENCY
        }, {
            title: '發行日',
            value: dayjs(pageData?.value?.START_DATE).format('YYYY/MM/DD')
        }, {
            title: '平均信評',
            value: pageData?.value?.IBOXX_RATING
        }, {
            title: '到期日',
            value: dayjs(pageData?.value?.MATURITY_DATE).format('YYYY/MM/DD')
        }, {
            title: '配息頻率',
            value: (() => {
                switch (pageData?.value?.DIST_FREQ) {
                    case '1': return '年配息'
                    case '2': return '半年配息'
                    case '3': return '季配息'
                    case '4': return '月配息'
                    case '5': return '不配息'
                    case '6': return '其他'
                    default: return ''
                }
            })()
        }, {
            title: '票面利率',
            value: pageData?.value?.COUPON_RATE ? pageData?.value?.COUPON_RATE : ''
        }, {
            title: '剩餘年限',
            value: Number(pageData?.value?.REMAINING_YEAR).toFixed(2) + '年'
        }, {
            title: '附加條款',
            value: (() => {
                const hasTLAC = pageData?.value?.manual_info?.TLAC
                const hasCOCO = pageData?.value?.manual_info?.COCO
                if (hasTLAC && hasCOCO) return '損失吸收(TLAC) / 條件可轉換(CoCo)'
                if (hasTLAC) return '損失吸收(TLAC)'
                if (hasCOCO) return '條件可轉換(CoCo)'
                return ''
            })()
        }, {
            title: '債券代號',
            value: pageData?.value?.BOND_ID
        }, {
            title: '債券名稱',
            value: pageData?.value?.CH_NAME
        }
    ].filter(item => item.value))

    console.log('pageData?.value?.IBOXX_RATING', pageData?.value?.IBOXX_RATING)

    const companyInfo = computed(() => {
        return companyData?.value?.find(company => company.ID === pageData?.value?.manual_info?.ISSUER_ID ? pageData.value.manual_info.ISSUER_ID : pageData.value.manual_info.GUARANTOR_ID)
    })

    const getCompanyFinancialData = (company, type) => {
        if (!company) return false

        // 先取得所有財務資料
        const financialData = [{
            title: '市值',
            value: (Number(String(company?.HISTORY_MKT_CAP).replace(/[^\d.-]/g, '')) >= 1000 ? 
                formatInteger(company?.HISTORY_MKT_CAP) : formatCurrency(company?.HISTORY_MKT_CAP))
        }, {
            title: '營收',
            value: formatInteger(company?.TTM_REVENUE)
        }, {
            title: '營收成長',
            value: company?.TTM_REVENUE_GROWTH ? formatDecimal(company?.TTM_REVENUE_GROWTH) + '%' : ''
        }, {
            title: '獲利',
            value: formatInteger(company?.TTM_NET_INCOME)
        }, {
            title: '淨利率',
            value: company?.TTM_NET_INCOME_MARGIN ? formatDecimal(company?.TTM_NET_INCOME_MARGIN) + '%' : ''
        }, {
            title: 'EPS',
            value: company?.TTM_EPS ? formatCurrency(company?.TTM_EPS) + '元' : ''
        }, {
            title: 'EPS成長',
            value: formatDecimal(company?.TTM_EPS_GROWTH) + '%'
        }, {
            title: '營運現金流',
            value: formatInteger(company?.FCF_OPERATION)
        }, {
            title: 'DEBT/EBITDA',
            value: formatCurrency(company?.DEBT_TO_T12_EBITDA)
        }].filter(item => item.value && item.value !== '%' && item.value !== '0' && item.value !== '0%')

        // 如果沒有任何有效的財務資料，返回空陣列
        if (financialData.length === 0) {
            return false
        }

        // 如果有機構資料,加上發行機構名稱一起回傳
        return [{
            title: type === 'issuer' ? '發行機構' : '保證機構',
            value: `${company?.NAME_CUSTOM_CHI || company?.NAME_CHI}\n${company?.NAME_CUSTOM_ENG || company?.NAME_ENG}`
        }, ...financialData]
    }

    const issuerData = computed(() => getCompanyFinancialData(issuerCompany.value, 'issuer'))
    const guaranteeData = computed(() => getCompanyFinancialData(guaranteeCompany.value, 'guarantee'))
    console.log('issuerData', getCompanyFinancialData(issuerCompany.value, 'issuer'))

    const activeTab = ref('')

    // console.log('companyInfo?.DES1', companyInfo.value?.DES1)

    const observer = ref(null)

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

    const handleTabClick = (tab) => {
        switch(tab) {
            case 'text':
                $LCscroll.scrollTo('#pro-single-bond-text', { duration: 2, offset: -120 })
                break
            case 'info':
                $LCscroll.scrollTo('#pro-single-bond-info', { duration: 2, offset: -120 })
                break
            case 'org':
                $LCscroll.scrollTo('#pro-single-bond-org', { duration: 2, offset: -120 })
                break
            case 'guarantee':
                $LCscroll.scrollTo('#pro-single-bond-guarantee', { duration: 2, offset: -120 })
                break
        }
    }

    console.log('viewport', viewport.value)

    const descriptionRef = ref()
    const contentRef = ref()
    const showReadMore = ref(false)

    // 依實際渲染高度判斷是否顯示「閱讀更多」
    // 注意：內容包在 <ClientOnly> 內，需在 nextTick 後才量得到 DOM
    const checkReadMore = () => {
        if (!contentRef.value) return
        showReadMore.value = contentRef.value.scrollHeight > 100
    }

    onMounted(async () => {
        observer.value = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (entry.target.id === 'pro-single-bond-text') {
                        activeTab.value = 'text'
                    } else if (entry.target.id === 'pro-single-bond-info') {
                        activeTab.value = 'info'
                    } else if (entry.target.id === 'pro-single-bond-org') {
                        activeTab.value = 'org'
                    } else if (entry.target.id === 'pro-single-bond-guarantee') {
                        activeTab.value = 'guarantee'
                    }
                }
            })
        }, {
            threshold: viewport.value.isMobile ? 0.6 : 0.9,
            rootMargin: '-120px 0px 0px 0px'
        })

        const textSection = document.querySelector('#pro-single-bond-text')
        const infoSection = document.querySelector('#pro-single-bond-info')
        const orgSection = document.querySelector('#pro-single-bond-org')
        const guaranteeSection = document.querySelector('#pro-single-bond-guarantee')

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

        console.log('pageData',pageData?.value)
        console.log('發行公司資料', issuerCompany.value)
        console.log('保證公司資料', guaranteeCompany.value)
        // console.log('companyData', companyData?.value)
        // console.log('issuerData', issuerData.value)
        // console.log('guaranteeData', guaranteeData.value)
        // console.log('issuerData', issuerData.value.length)
        // console.log('guaranteeData', guaranteeData.value.length)

        nextTick(() => {
            if (companyInfo.value) {
                activeTab.value = companyInfo.value?.DES1 ? 'text' : 'info'
                // console.log('companyInfo?.DES1', companyInfo.value?.DES1)
            }
        })

        // 比較內容高度與容器高度
        // <ClientOnly> 的內容會晚一個 tick 才進 DOM，需等 nextTick 後再量測
        nextTick(() => {
            checkReadMore()
        })

        window.addEventListener('resize', checkReadMore)
    })

    onUnmounted(() => {
        if (observer.value) {
            observer.value.disconnect()
        }
        window.removeEventListener('resize', checkReadMore)
    })

    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 || 'https://wm.sinopac.com' + route?.fullPath
        })
    })
</script>
<style lang="scss">
    $class-name: pro-single-bond;
    .#{$class-name} {
        padding: relative;

        &__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-8);

            @include media-breakpoint-down(medium){
                padding: 16rem 0 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);
                    }
                }
                > p {
                    @include typo('head', 18);
                }
                .-toptag {
                    color: map-get($colors, brand-4);
                    display: flex;
                    align-items: center;
                    gap: .8rem;

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

                        align-items: center;
                    }

                    > span {
                        &:first-child {
                            white-space: nowrap;
                        }
                    }
                }

                .-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);
                        }
                    }
                }
                .-price {
                    b {
                        @include typo('head', 28);
                        display: inline-block;
                        margin-right: .6rem;
                        margin-bottom: .8rem;
                    }

                    > span {
                        @include typo('body', 16);
                        color: map-get($colors, gray-1);
                        display: inline-block;
                    }

                    time {
                        display: block;
                        color: map-get($colors, gray-1);

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

            &-price {
                display: flex;
                flex-wrap: wrap;
                gap: 1.6rem;

                .-price-explain {
                    display: flex;
                    align-items: center;
                    gap: .8rem;

                    .explain-box {
                        margin-bottom: 0;
                        color: #000;

                        &__content {
                            left: 0;
                            top: 4rem;
                        }
                    }
                }
            }
        }

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

        &__sticktab {
            position: sticky;
            top: 5.95rem; // header 高度
            background: #fff;
            z-index: 1;
            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-4);
                    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 {

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

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

                .-explain {

                    @include media-breakpoint-down(medium) {
                        left: 0;
                        top: 5rem;
                        width: 100%;
                    }

                    &.-show {
                        opacity: 1;
                        visibility: visible;
                    }

                    /* 漸層底 */

                }
            }

            &-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 6rem;

                @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;
                        }

                        .explain-box {
                            &__content {
                                @include media-breakpoint-down(medium) {
                                    left: auto;
                                    right: 0;
                                }
                            }
                        }

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

                            @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);
                                    white-space: nowrap;
                                }
                                &:last-child {
                                    @include typo('head', 18);
                                    text-align: right;
                                    display: flex;
                                    align-items: center;
                                    gap: 1rem;
                                    white-space: pre-line;

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

                                    .explain-box {
                                        margin-bottom: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }

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

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

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

                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);
                        }
                    }
                }
            }

            &-date {
                @include typo('body', 14);
                
                margin-top: 1.6rem;
                color: map-get($colors, gray-1);
            }
        }

        #pro-single-bond-info {
            .-data {
                ul {
                    .explain-box {
                        &__content {
                            @include media-breakpoint-up(medium) {
                                left: auto;
                                right: 0;
                            }
                        }
                    }
                }
            }
        }
    }
</style>