{{-- Tab: プロ --}}
<div class="wrap-scroll-table">
    <table class="monthly-bill-table">
        <thead>
            {{-- Row 1: Group headers --}}
            <tr>
                <th rowspan="3" class="col-date col-date-divider" style="vertical-align:middle; background:#F8F8F8 !important; font-weight: 500 !important;">日付</th>
                {{-- プロ全体 (4 cols: MRR + 決済件数 + 日次売上 + 30日平均比) --}}
                <th colspan="4" rowspan="2" class="th-group th-group--default">
                    <span class="dot" style="background:#F44336;"></span> プロ全体
                </th>
                {{-- 月払い (新規3 + 更新3 + S→P2 + 従量2 + 解約1 = 11 cols) --}}
                <th colspan="11" class="th-group th-group--monthly-pay">月払い</th>
                {{-- 年間一括払い (新規3 + 更新3 + S→P2 + 従量2 + 解約1 = 11 cols) --}}
                <th colspan="11" class="th-group th-group--yearly-pay">年間一括払い</th>
            </tr>
            {{-- Row 2: Sub-group headers --}}
            <tr>
                {{-- プロ全体 subs are merged into row 1 via rowspan="2" above --}}
                {{-- 月払い sub-groups --}}
                <th colspan="3" class="th-subgroup th-subgroup--new">新規</th>
                <th colspan="3" class="th-subgroup th-subgroup--renew">更新</th>
                <th colspan="2" class="th-subgroup th-subgroup--upgrade">S→Pアップグレード 日割り</th>
                <th colspan="2" class="th-subgroup th-subgroup--usage">従量課金</th>
                <th colspan="1" class="th-subgroup th-subgroup--cancel">解約</th>
                {{-- 年間一括払い sub-groups --}}
                <th colspan="3" class="th-subgroup th-subgroup--new">新規</th>
                <th colspan="3" class="th-subgroup th-subgroup--renew">更新</th>
                <th colspan="2" class="th-subgroup th-subgroup--upgrade">S→Pアップグレード 日割り</th>
                <th colspan="2" class="th-subgroup th-subgroup--usage">従量課金</th>
                <th colspan="1" class="th-subgroup th-subgroup--cancel">解約</th>
            </tr>
            {{-- Row 3: Leaf column headers --}}
            <tr>
                {{-- プロ全体 leaf cols --}}
                <th rowspan="2" class="sub-col">MRR累積</th>
                <th class="sub-col">決済件数</th>
                <th class="sub-col">日次売上</th>
                <th class="sub-col">30日平均比</th>
                {{-- 月払い: 新規 --}}
                <th class="sub-col">決済件数</th>
                <th class="sub-col">決済額</th>
                <th class="sub-col">30日平均比</th>
                {{-- 月払い: 更新 --}}
                <th class="sub-col">決済件数</th>
                <th class="sub-col">決済額</th>
                <th class="sub-col">30日平均比</th>
                {{-- 月払い: S→Pアップグレード 日割り --}}
                <th class="sub-col sub-col--upgrade">決済件数</th>
                <th class="sub-col sub-col--upgrade">決済額</th>
                {{-- 月払い: 従量課金 --}}
                <th class="sub-col sub-col--usage">決済件数</th>
                <th class="sub-col sub-col--usage">決済額</th>
                {{-- 月払い: 解約 --}}
                <th class="sub-col">件数</th>
                {{-- 年間一括払い: 新規 --}}
                <th class="sub-col">決済件数</th>
                <th class="sub-col">決済額</th>
                <th class="sub-col">30日平均比</th>
                {{-- 年間一括払い: 更新 --}}
                <th class="sub-col">決済件数</th>
                <th class="sub-col">決済額</th>
                <th class="sub-col">30日平均比</th>
                {{-- 年間一括払い: S→Pアップグレード 日割り --}}
                <th class="sub-col sub-col--upgrade">決済件数</th>
                <th class="sub-col sub-col--upgrade">決済額</th>
                {{-- 年間一括払い: 従量課金 --}}
                <th class="sub-col sub-col--usage">決済件数</th>
                <th class="sub-col sub-col--usage">決済額</th>
                {{-- 年間一括払い: 解約 --}}
                <th class="sub-col">件数</th>
            </tr>

            {{-- Dòng 平均 PHẢI nằm TRONG <thead>, ngay dưới hàng sub-header — KHÔNG chuyển
                 xuống cuối <tbody> (đã xét và bác đề xuất của Redmine #40225):
                 1. Figma (screens/images/SCR-08-s3-monthly-a/b/c.png) vẽ 平均 ngay dưới header,
                    TRÊN 12 dòng tháng, ở CẢ 3 tab; 合計 mới là dòng cuối (chỉ tab 全体).
                 2. Ràng buộc kỹ thuật: <th rowspan="2">MRR累積</th> ở hàng trên phủ xuống chính
                    dòng này, nên dòng 平均 cố tình THIẾU 1 <td>. rowspan KHÔNG vượt qua ranh giới
                    thead/tbody ⇒ chuyển xuống tbody sẽ mất ô phủ, mọi số liệu lệch trái 1 cột —
                    đúng bug #39508 đã fix.
                 Muốn đổi vị trí thì phải ĐỒNG THỜI: bỏ rowspan="2" của MRR累積 + thêm lại ô
                 MRR累積 cho dòng này (cho đủ số ô như dòng tháng). Chờ BA chốt trước. --}}
            <tr class="header-avg-row">
                <td class="avg-label col-date col-date-divider" style="font-weight: 500 !important;">平均</td>
                {{-- プロ全体 --}}
                <td class="num-cell">@{{ avgPro.pro_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_daily_sales }}</td>
                <td class="num-cell" style="text-align:center !important;"
                    :class="ratioClass(avgPro.pro_avg_ratio)">
                    @{{ avgPro.pro_avg_ratio }}
                </td>
                {{-- 月払い: 新規 --}}
                <td class="num-cell">@{{ avgPro.pro_m_new_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_m_new_amount }}</td>
                <td class="num-cell">@{{ avgPro.pro_m_new_avg_ratio }}</td>
                {{-- 月払い: 更新 --}}
                <td class="num-cell">@{{ avgPro.pro_m_renew_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_m_renew_amount }}</td>
                <td class="num-cell">@{{ avgPro.pro_m_renew_avg_ratio }}</td>
                {{-- 月払い: S→P --}}
                <td class="num-cell">@{{ avgPro.pro_m_upgrade_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_m_upgrade_amount }}</td>
                {{-- 月払い: 従量 --}}
                <td class="num-cell">@{{ avgPro.pro_m_usage_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_m_usage_amount }}</td>
                {{-- 月払い: 解約 --}}
                <td class="num-cell">@{{ avgPro.pro_m_cancel_num }}</td>
                {{-- 年間一括払い: 新規 --}}
                <td class="num-cell">@{{ avgPro.pro_y_new_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_y_new_amount }}</td>
                <td class="num-cell">@{{ avgPro.pro_y_new_avg_ratio }}</td>
                {{-- 年間一括払い: 更新 --}}
                <td class="num-cell">@{{ avgPro.pro_y_renew_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_y_renew_amount }}</td>
                <td class="num-cell">@{{ avgPro.pro_y_renew_avg_ratio }}</td>
                {{-- 年間一括払い: S→P --}}
                <td class="num-cell">@{{ avgPro.pro_y_upgrade_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_y_upgrade_amount }}</td>
                {{-- 年間一括払い: 従量 --}}
                <td class="num-cell">@{{ avgPro.pro_y_usage_count }}</td>
                <td class="num-cell">@{{ avgPro.pro_y_usage_amount }}</td>
                {{-- 年間一括払い: 解約 --}}
                <td class="num-cell">@{{ avgPro.pro_y_cancel_num }}</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in tableRows" :key="row.month">
                <td class="col-date col-date-divider">@{{ row.month }}</td>
                <td class="num-cell">@{{ row.pro_mrr }}</td>
                <td class="num-cell">@{{ row.pro_count }}</td>
                <td class="num-cell">@{{ row.pro_daily_sales }}</td>
                <td class="num-cell"
                    :class="ratioClass(row.pro_avg_ratio)">
                    @{{ row.pro_avg_ratio }}
                </td>
                {{-- 月払い: 新規 --}}
                <td class="num-cell">@{{ row.pro_m_new_count }}</td>
                <td class="num-cell">@{{ row.pro_m_new_amount }}</td>
                <td class="num-cell">@{{ row.pro_m_new_avg_ratio }}</td>
                {{-- 月払い: 更新 --}}
                <td class="num-cell">@{{ row.pro_m_renew_count }}</td>
                <td class="num-cell">@{{ row.pro_m_renew_amount }}</td>
                <td class="num-cell">@{{ row.pro_m_renew_avg_ratio }}</td>
                {{-- 月払い: S→Pアップグレード 日割り --}}
                <td class="num-cell">@{{ row.pro_m_upgrade_count }}</td>
                <td class="num-cell">@{{ row.pro_m_upgrade_amount }}</td>
                {{-- 月払い: 従量課金 --}}
                <td class="num-cell">@{{ row.pro_m_usage_count }}</td>
                <td class="num-cell">@{{ row.pro_m_usage_amount }}</td>
                {{-- 月払い: 解約 --}}
                <td class="num-cell">@{{ row.pro_m_cancel_num }}</td>
                {{-- 年間一括払い: 新規 --}}
                <td class="num-cell">@{{ row.pro_y_new_count }}</td>
                <td class="num-cell">@{{ row.pro_y_new_amount }}</td>
                <td class="num-cell">@{{ row.pro_y_new_avg_ratio }}</td>
                {{-- 年間一括払い: 更新 --}}
                <td class="num-cell">@{{ row.pro_y_renew_count }}</td>
                <td class="num-cell">@{{ row.pro_y_renew_amount }}</td>
                <td class="num-cell">@{{ row.pro_y_renew_avg_ratio }}</td>
                {{-- 年間一括払い: S→Pアップグレード 日割り --}}
                <td class="num-cell">@{{ row.pro_y_upgrade_count }}</td>
                <td class="num-cell">@{{ row.pro_y_upgrade_amount }}</td>
                {{-- 年間一括払い: 従量課金 --}}
                <td class="num-cell">@{{ row.pro_y_usage_count }}</td>
                <td class="num-cell">@{{ row.pro_y_usage_amount }}</td>
                {{-- 年間一括払い: 解約 --}}
                <td class="num-cell">@{{ row.pro_y_cancel_num }}</td>
            </tr>
        </tbody>
    </table>
</div>