{{-- 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日平均比.
                     rowspan=2 vì nhóm này KHÔNG có hàng sub-group (新規/更新/解約). --}}
                <th colspan="4" rowspan="2" class="th-group th-group--default">
                    <span class="dot dot--orange"></span> スタンダード全体
                </th>
                {{-- 月払い — 7 cols: 新規3 + 更新3 + 解約1 (KHÔNG có nhóm 合計) --}}
                <th colspan="7" class="th-group th-group--default">月払い</th>
                {{-- 年間一括払い — 7 cols: 新規3 + 更新3 + 解約1 (KHÔNG có nhóm 合計) --}}
                <th colspan="7" class="th-group th-group--default">年間一括払い</th>
                {{-- Tổng cột dữ liệu = 4 + 7 + 7 = 18. Dòng 平均 chỉ có 18 <td> (ô nhãn 平均
                     bù cho ô MRR累積 đã bị rowspan phủ) và mỗi dòng tbody có 19 <td> (thêm 日付).
                     Lệch các con số này = bảng tràn/lệch cột (Redmine #39508). --}}
            </tr>
            {{-- Row 2: Sub-group headers --}}
            <tr>
                {{-- 月払い sub-groups --}}
                <th colspan="3" class="th-subgroup th-subgroup--new">新規</th>
                <th colspan="3" class="th-subgroup th-subgroup--renew">更新</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="1" class="th-subgroup th-subgroup--cancel">解約</th>
            </tr>
            {{-- Row 3: Leaf column headers --}}
            <tr>
                {{-- スタンダード全体 subs --}}
                <th rowspan="2" class="sub-col">MRR累積</th>
                <th class="sub-col">決済件数</th>
                <th class="sub-col">日次売上</th>
                <th class="sub-col">30日平均比</th>
                {{-- 新規: cột xanh dương --}}
                <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">決済額</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>
            </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>
                {{-- スタンダード全体 — KHÔNG có ô MRR累積: header MRR累積 đã rowspan="2" phủ
                     xuống đúng dòng này (giống tab 全体数値/プロ và Figma). Thêm ô ở đây sẽ dư
                     1 cell làm toàn bộ số liệu lệch sang phải 1 cột (Redmine #39508). --}}
                <td class="num-cell">@{{ avgStandard.std_count }}</td>
                <td class="num-cell">@{{ avgStandard.std_daily_sales }}</td>
                <td class="num-cell"
                    :class="ratioClass(avgStandard.std_avg_ratio)">
                    @{{ avgStandard.std_avg_ratio }}
                </td>
                {{-- 月払い: 新規 --}}
                <td class="num-cell">@{{ avgStandard.m_new_count }}</td>
                <td class="num-cell">@{{ avgStandard.m_new_amount }}</td>
                <td class="num-cell">@{{ avgStandard.m_new_avg_ratio }}</td>
                {{-- 月払い: 更新 --}}
                <td class="num-cell">@{{ avgStandard.m_renew_count }}</td>
                <td class="num-cell">@{{ avgStandard.m_renew_amount }}</td>
                <td class="num-cell">@{{ avgStandard.m_renew_avg_ratio }}</td>
                {{-- 月払い: 解約 --}}
                <td class="num-cell">@{{ avgStandard.m_cancel_num }}</td>
                {{-- 年間一括払い: 新規 --}}
                <td class="num-cell">@{{ avgStandard.y_new_count }}</td>
                <td class="num-cell">@{{ avgStandard.y_new_amount }}</td>
                <td class="num-cell">@{{ avgStandard.y_new_avg_ratio }}</td>
                {{-- 年間一括払い: 更新 --}}
                <td class="num-cell">@{{ avgStandard.y_renew_count }}</td>
                <td class="num-cell">@{{ avgStandard.y_renew_amount }}</td>
                <td class="num-cell">@{{ avgStandard.y_renew_avg_ratio }}</td>
                {{-- 年間一括払い: 解約 --}}
                <td class="num-cell">@{{ avgStandard.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.std_mrr }}</td>
                <td class="num-cell">@{{ row.std_count }}</td>
                <td class="num-cell">@{{ row.std_daily_sales }}</td>
                <td class="num-cell"
                    :class="ratioClass(row.std_avg_ratio)">
                    @{{ row.std_avg_ratio }}
                </td>
                {{-- 月払い: 新規 --}}
                <td class="num-cell">@{{ row.m_new_count }}</td>
                <td class="num-cell">@{{ row.m_new_amount }}</td>
                <td class="num-cell">@{{ row.m_new_avg_ratio }}</td>
                {{-- 月払い: 更新 --}}
                <td class="num-cell">@{{ row.m_renew_count }}</td>
                <td class="num-cell">@{{ row.m_renew_amount }}</td>
                <td class="num-cell">@{{ row.m_renew_avg_ratio }}</td>
                {{-- 月払い: 解約 --}}
                <td class="num-cell">@{{ row.m_cancel_num }}</td>
                {{-- 年間一括払い: 新規 --}}
                <td class="num-cell">@{{ row.y_new_count }}</td>
                <td class="num-cell">@{{ row.y_new_amount }}</td>
                <td class="num-cell">@{{ row.y_new_avg_ratio }}</td>
                {{-- 年間一括払い: 更新 --}}
                <td class="num-cell">@{{ row.y_renew_count }}</td>
                <td class="num-cell">@{{ row.y_renew_amount }}</td>
                <td class="num-cell">@{{ row.y_renew_avg_ratio }}</td>
                {{-- 年間一括払い: 解約 --}}
                <td class="num-cell">@{{ row.y_cancel_num }}</td>
            </tr>
        </tbody>
    </table>
</div>