fmode-voc-projects/scripts/tools/ks-lanlingqiuzhi/ks-render-v8.js

#!/usr/bin/env node
const fs = require('fs');
const path = require('path');

const ROOT = path.resolve(__dirname, '..', '..', '..');
const OUT_FILE = path.join(ROOT, 'reports', 'ks-lanlingqiuzhi', 'ks-voc-insight-report-v8.html');

function esc(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])); }
function fmtK(n) { n = Number(n) || 0; if (n >= 100000000) return (n / 100000000).toFixed(1).replace(/\.0$/, '') + '亿'; if (n >= 10000) return (n / 10000).toFixed(1).replace(/\.0$/, '') + 'w'; if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k'; return String(n); }
function fmtLikes(n) { return fmtK(n); }

function formatHeat(n) { return Number(n).toLocaleString(); }

// ─── Data (combined best from both v6 and v7) ─────────────────────────────────

const KUAIKUAI_STATS = [
    { label: '月度服务求职者', value: '超2.5亿人次' },
    { label: '平台蓝领用户规模', value: '约2.5亿人' },
    { label: '全年直播带岗场次', value: '超500万场' },
    { label: '带动就业机会', value: '4,320万个' },
    { label: '日收简历峰值', value: '突破5万份' },
];

const VOC_STATS = [
    { label: '关键词文件', value: '19', sub: '覆盖快聘、直播带岗、工资、被骗等主题', color: 'var(--amber)' },
    { label: '视频总量', value: '380', sub: '每个主题包含 top_videos 样本', color: 'var(--blue)' },
    { label: '评论总量', value: '8,173', sub: '本次用户需求判断的核心依据', color: 'var(--rose)' },
    { label: '播放总量', value: '9,455万', sub: '用于判断主题在快手端的触达热度', color: 'var(--green)' },
];

const RISK_CHART_DATA = [
    { label: '骗', count: 252, heat: 514788, color: '#FF4D8D' },
    { label: '黑中介', count: 109, heat: 393762, color: '#FF4D8D' },
    { label: '坑', count: 92, heat: 375264, color: '#FF4D8D' },
    { label: '套路', count: 45, heat: 144842, color: '#F97316' },
    { label: '黑厂', count: 43, heat: 123531, color: '#FF4D8D' },
    { label: '押金', count: 105, heat: 95543, color: '#F5A623' },
    { label: '不退', count: 70, heat: 84106, color: '#F5A623' },
    { label: '陷阱', count: 21, heat: 74090, color: '#F97316' },
    { label: '克扣', count: 16, heat: 15152, color: '#EF4444' },
    { label: '维权', count: 12, heat: 11753, color: '#EF4444' },
];

const CARE_CHART_DATA = [
    { label: '工资', count: 186, heat: 117968, color: '#00DC82' },
    { label: '包吃包住', count: 31, heat: 94771, color: '#00DC82' },
    { label: '加班费', count: 20, heat: 43995, color: '#3B82F6' },
    { label: '吃住', count: 21, heat: 34060, color: '#00DC82' },
    { label: '住宿', count: 15, heat: 25224, color: '#3B82F6' },
    { label: '当天入职', count: 7, heat: 19264, color: '#8B5CF6' },
    { label: '发工资', count: 29, heat: 13015, color: '#F5A623' },
    { label: '日结', count: 30, heat: 12656, color: '#8B5CF6' },
];

const CHANNEL_DATA = [
    { label: '包吃包住', count: 785, heat: 12600961, color: '#3B82F6' },
    { label: '克扣工资', count: 776, heat: 4476104, color: '#FF4D8D' },
    { label: '黑中介', count: 669, heat: 8638016, color: '#FF4D8D' },
    { label: '入职被坑', count: 600, heat: 8305079, color: '#FF4D8D' },
    { label: '打工陷阱', count: 593, heat: 5161962, color: '#FF4D8D' },
    { label: '押金不退', count: 523, heat: 11617088, color: '#F5A623' },
    { label: '被坑', count: 518, heat: 7620948, color: '#F97316' },
    { label: '工资日结', count: 439, heat: 865431, color: '#00DC82' },
];

const HIGH_RISK_QUOTES = [
    { tag: '黑中介', type: '视频文案', likes: '15.1w', heat: '20.3w', text: '#万恶之源 #搞笑我是认真的 #搞笑 黑中介的噩梦，只要我不努力，你就过不上你想要的生活', color: 'var(--rose)' },
    { tag: '黑厂', type: '视频文案', likes: '9.2w', heat: '12.3w', text: '揭秘！广东5大黑厂有哪些？想不被坑，千万不要进#电子厂 #普工 #打工人', color: 'var(--rose)' },
    { tag: '入职被坑', type: '视频文案', likes: '6.6w', heat: '8.5w', text: '再过段时间，应届毕业生们就该实习找工作了，千万要擦亮眼睛，别被这种新型招聘骗局给坑了！#诈骗 #招聘 #应届毕业生', color: 'var(--rose)' },
    { tag: '黑中介', type: '视频文案', likes: '3.7w', heat: '6.2w', text: '#维护法律尊严和正义 #严厉打击黑中介 #黑中介骗了多少中国同胞，把黑中介一网打尽，广大网友们，你们支持吗？', color: 'var(--rose)' },
    { tag: '打工陷阱', type: '视频文案', likes: '5.7w', heat: '6.1w', text: '学校不教，你必须要懂的劳动合同陷阱。 #大学生就业 #工作避坑 #就业指导课', color: 'var(--rose)' },
    { tag: '押金不退', type: '视频文案', likes: '5.1w', heat: '5.5w', text: '不退租客押金你是心高气傲，被租客报复你是生死难料 #押金', color: 'var(--rose)' },
    { tag: '招聘骗局', type: '视频文案', likes: '2.8w', heat: '4.3w', text: '#找工作 #谨防上当受骗', color: 'var(--rose)' },
    { tag: '入职被坑', type: '视频文案', likes: '1.8w', heat: '4.2w', text: '#黑中介招工套路，刚开始签18块钱一个小时，干了1个月只拿6块钱，只拿了1200...报警后当场还有5、6个工人也被欺骗', color: 'var(--rose)' },
];

const HIGH_CARE_QUOTES = [
    { tag: '工资日结', type: '视频文案', likes: '1.2k', heat: '4.9w', text: '...', color: 'var(--green)' },
    { tag: '加班费', type: '视频文案', likes: '3.1w', heat: '3.8w', text: '不给加班费就不加班合理吗？#记录餐饮人生活每一天 #餐饮创业 #现场实拍', color: 'var(--green)' },
    { tag: '加班费', type: '视频文案', likes: '2w', heat: '2.3w', text: '他这是怎么了，晚上10点钟了还去公司加班 #暗恋 #小女友 #内容启发分享计划 #遗憾', color: 'var(--green)' },
    { tag: '发工资', type: '视频文案', likes: '1.2w', heat: '2.2w', text: '#打工妹 #工资条 #打工妹的日常生活 #电子厂', color: 'var(--green)' },
    { tag: '当天入职', type: '视频文案', likes: '1.1w', heat: '1.7w', text: '#不体检不收费当天安排 #当天来当天入职安排住宿 #岗位轻松干活不累想工作就来 #包吃包住当天安排住宿 @快手评论', color: 'var(--green)' },
    { tag: '包吃包住', type: '视频文案', likes: '9.4k', heat: '1.6w', text: '距你0.9km #找工作 #包吃包住 #勤杂工 #大龄工', color: 'var(--green)' },
    { tag: '包吃包住', type: '视频文案', likes: '7.2k', heat: '1.4w', text: '直接到工厂面试，每个月拿7000包吃包住，穿普通工衣坐着上班，上班可以带手机，不需要文化。有一起来的吗？厂门口等你#普工招聘', color: 'var(--green)' },
    { tag: '真实薪资', type: '视频文案', likes: '1.2w', heat: '1.4w', text: '#中国薪资对比 #职场冷知识 #打工人现状', color: 'var(--green)' },
];

const HIGH_COMMENT_LIKES = [
    { rank: 1, likes: 6276, expr: '22年差点被骗去当咯咯哒 说什么模特走台下面的人送花就有提成', kw: '入职被坑', hot: true },
    { rank: 2, likes: 2209, expr: '去买几个鸡蛋，打碎，放在沙发下面...', kw: '押金不退', hot: true },
    { rank: 3, likes: 808, expr: '我在广西就遇到过房东死活不退押金...', kw: '押金不退', hot: false },
    { rank: 4, likes: 533, expr: '做的不错，就该那样！有些房东太不像话了！押金不退，还有理由了！', kw: '押金不退', hot: false },
    { rank: 5, likes: 491, expr: '无论怎么样，反正黑中介是赚了', kw: '黑中介', hot: false },
    { rank: 6, likes: 422, expr: '那暑假工能做什么啊', kw: '入职被坑', hot: false },
    { rank: 7, likes: 403, expr: '干的漂亮，支持小伙子不应该判刑...', kw: '黑中介', hot: false },
    { rank: 8, likes: 312, expr: '都绑起来了,都投降了,那人还要去喷那个喷雾', kw: '黑中介', hot: false },
    { rank: 9, likes: 311, expr: '为什么南方的房东都不退押金', kw: '押金不退', hot: false },
    { rank: 10, likes: 228, expr: '只要收身份证的都是，正常的面试只需要填表就行', kw: '黑中介', hot: false },
];

const COMPETITORS = [
    { name: '快手快聘', type: '直播带岗', users: '2.5亿', trend: '快速增长', color: 'var(--green)', strength: '用户渗透率极高', weak: '信息审核薄弱' },
    { name: 'BOSS直聘', type: '算法匹配', users: '约3000万', trend: '稳步增长', color: 'var(--blue)', strength: '匹配准确率高', weak: '情绪获得感弱' },
    { name: '58同城', type: '分类信息', users: '规模下滑', trend: '持续萎缩', color: 'var(--text-3)', strength: '传统市场份额', weak: '虚假信息泛滥' },
];

const RADAR_DATA = [
    { label: '信息真实度', ks: 3, boss: 4, wu: 2 },
    { label: '薪资透明度', ks: 4, boss: 4, wu: 2 },
    { label: '权益保障', ks: 2, boss: 3, wu: 2 },
    { label: '匹配准确率', ks: 3, boss: 5, wu: 3 },
    { label: '求职低门槛', ks: 5, boss: 4, wu: 3 },
    { label: '沟通即时性', ks: 5, boss: 4, wu: 1 },
    { label: '信任建立', ks: 4, boss: 3, wu: 1 },
    { label: '职业发展', ks: 2, boss: 3, wu: 1 },
    { label: '平台审核', ks: 2, boss: 4, wu: 3 },
    { label: '情绪获得感', ks: 5, boss: 2, wu: 0 },
];

const EMOTION_KEYWORDS = [
    { word: '"眼见为实"', desc: '消解信息不对称带来的不安全感', emoji: '👁️', color: 'var(--amber)' },
    { word: '"老铁推荐"', desc: '以熟人身份降低求职者心理防备', emoji: '🤝', color: 'var(--green)' },
    { word: '"来了就是兄弟"', desc: '强调归属感和人情味', emoji: '🏠', color: 'var(--purple)' },
    { word: '"有尊严地赚钱"', desc: '回应蓝领的身份焦虑与社会认同诉求', emoji: '💪', color: 'var(--blue)' },
    { word: '"不骗人、不套路"', desc: '针对虚假宣传痛点', emoji: '🛡️', color: 'var(--rose)' },
    { word: '"独门绝技"', desc: '放大蓝领专业技能价值', emoji: '⚡', color: 'var(--orange)' },
];

const STRATEGY_RECS = [
    { num: '1', title: '建立分级审核体系', desc: '对招聘主播实行分级管理，对粉丝量级大的头部主播实行更审慎的审核标准', color: 'var(--amber)' },
    { num: '2', title: '强化"信任基建"投入', desc: '将信息审核能力作为快聘业务的核心基建来建设，建立招聘方信用评级和黑名单机制', color: 'var(--green)' },
    { num: '3', title: '深化企业直招占比', desc: '减少对中介端的依赖，提高B端企业直招占比，从根本上降低信息失真风险', color: 'var(--blue)' },
    { num: '4', title: '放大"眼见为实"差异化', desc: '继续强化直播展示真实工作环境的核心卖点，将车间、宿舍、食堂直播打造为标准化招聘流程', color: 'var(--purple)' },
    { num: '5', title: '差异化提升情绪价值', desc: '利用"老铁信任"和"眼见为实"的天然优势，将情绪价值从"内容传播手段"升级为"用户留存壁垒"', color: 'var(--orange)' },
];

const RISKS = [
    { type: '信任透支', desc: '虚假招聘信息泛滥，透支"老铁信任"', prob: '高', impact: '高', strategy: '审核体系升级+信用评级', color: 'var(--rose)' },
    { type: '监管压力', desc: '五部门行政指导要求强化审核', prob: '高', impact: '高', strategy: '主动对标"五个到位"', color: 'var(--rose)' },
    { type: '竞争跟进', desc: 'BOSS直聘加码蓝领，58同城转型', prob: '中', impact: '中', strategy: '差异化壁垒+效率提升', color: 'var(--amber)' },
    { type: '匹配效率低', desc: '流量大但精准度不如算法平台', prob: '中', impact: '中', strategy: '引入精准匹配算法', color: 'var(--amber)' },
];

const HYPOTHESES = [
    { h: 'H1', title: '快聘是蓝领求职主阵地', count: 596, color: '#F5A623' },
    { h: 'H2', title: '直播带岗降低信息不对称', count: 1930, color: '#00DC82' },
    { h: 'H3', title: '薪资透明度是核心关切', count: 1842, color: '#8B5CF6' },
    { h: 'H4', title: '食宿条件影响求职决策', count: 2194, color: '#FF4D8D' },
    { h: 'H5', title: '入职流程便捷性', count: 595, color: '#3B82F6' },
    { h: 'H6', title: '求职被骗是普遍焦虑', count: 4435, color: '#EF4444' },
    { h: 'H7', title: '黑中介是核心痛点', count: 3705, color: '#F97316' },
    { h: 'H8', title: '工资结算方式差异', count: 2417, color: '#6B6B6B' },
];

// ─── SVG Chart Functions ────────────────────────────────────────────────────

function dualBarChart(rows, W = 920) {
    const maxHeat = Math.max(...rows.map(r => r.heat));
    const barH = 36, gap = 14, padL = 100, padR = 160, padV = 16;
    const barW = W - padL - padR;
    const totalH = rows.length * (barH + gap) + padV * 2;
    return `<div style="background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;">
        <svg viewBox="0 0 ${W} ${totalH}" style="width:100%;height:auto;" preserveAspectRatio="xMidYMid meet">
            ${rows.map((r, i) => {
                const y = padV + i * (barH + gap);
                const w = Math.max((r.heat / maxHeat) * barW, 8);
                return `<text x="${padL - 10}" y="${y + barH / 2 + 5}" text-anchor="end" font-size="13" fill="var(--text-2)">${esc(r.label)}</text>
                <rect x="${padL}" y="${y}" width="${w}" height="${barH}" rx="4" fill="${r.color}" opacity="0.88"/>
                <text x="${padL + w + 10}" y="${y + barH / 2 + 5}" font-size="13" font-weight="700" fill="${r.color}" font-family="monospace">${r.count}条 / ${formatHeat(r.heat)}</text>`;
            }).join('')}
        </svg>
    </div>`;
}

function channelBarChart(rows, W = 920) {
    const maxHeat = Math.max(...rows.map(r => r.heat));
    const barH = 36, gap = 14, padL = 110, padR = 160, padV = 16;
    const barW = W - padL - padR;
    const totalH = rows.length * (barH + gap) + padV * 2;
    return `<div style="background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;">
        <svg viewBox="0 0 ${W} ${totalH}" style="width:100%;height:auto;" preserveAspectRatio="xMidYMid meet">
            ${rows.map((r, i) => {
                const y = padV + i * (barH + gap);
                const w = Math.max((r.heat / maxHeat) * barW, 8);
                return `<text x="${padL - 10}" y="${y + barH / 2 + 5}" text-anchor="end" font-size="13" fill="var(--text-2)">${esc(r.label)}</text>
                <rect x="${padL}" y="${y}" width="${w}" height="${barH}" rx="4" fill="${r.color}" opacity="0.88"/>
                <text x="${padL + w + 10}" y="${y + barH / 2 + 5}" font-size="13" font-weight="700" fill="${r.color}" font-family="monospace">${r.count}评 / ${formatHeat(r.heat)}</text>`;
            }).join('')}
        </svg>
    </div>`;
}

function radarChart() {
    const cx = 200, cy = 190, r = 130;
    const labels = RADAR_DATA.map(d => d.label);
    const n = labels.length;
    const step = 2 * Math.PI / n;
    const toXY = (v, i, R = r) => ({ x: cx + R * v * Math.cos(i * step - Math.PI / 2), y: cy + R * v * Math.sin(i * step - Math.PI / 2) });
    const ksPath = RADAR_DATA.map((d, i) => toXY(d.ks / 5, i)).map((p, i) => (i === 0 ? 'M' : 'L') + p.x + ',' + p.y).join('') + 'Z';
    const bossPath = RADAR_DATA.map((d, i) => toXY(d.boss / 5, i)).map((p, i) => (i === 0 ? 'M' : 'L') + p.x + ',' + p.y).join('') + 'Z';
    const wuPath = RADAR_DATA.map((d, i) => toXY(d.wu / 5, i)).map((p, i) => (i === 0 ? 'M' : 'L') + p.x + ',' + p.y).join('') + 'Z';
    const gridPath = [1, 0.5, 0.25].map(s => [0, 1, 2, 3, 4].map(i => toXY(s, i)).map((p, i) => (i === 0 ? 'M' : 'L') + p.x + ',' + p.y).join('') + 'Z').join('');
    let labelHTML = labels.map((l, i) => {
        const p = toXY(1.15, i);
        return `<text x="${p.x}" y="${p.y}" text-anchor="middle" dominant-baseline="middle" font-size="10" fill="var(--text-2)">${esc(l)}</text>`;
    }).join('');
    return `<div style="background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;">
        <svg viewBox="0 0 400 380" style="width:100%;height:auto;">
            <circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="var(--border)" stroke-width="1"/>
            <path d="${gridPath}" fill="none" stroke="var(--border)" stroke-width="0.5" opacity="0.5"/>
            <path d="${wuPath}" fill="rgba(107,107,107,0.15)" stroke="#6B6B6B" stroke-width="2"/>
            <path d="${bossPath}" fill="rgba(59,130,246,0.15)" stroke="#3B82F6" stroke-width="2"/>
            <path d="${ksPath}" fill="rgba(0,220,130,0.2)" stroke="#00DC82" stroke-width="2.5"/>
            ${labelHTML}
            <g transform="translate(${cx + r + 20}, 20)">
                <rect x="0" y="0" width="12" height="12" fill="#00DC82"/><text x="18" y="10" font-size="11" fill="var(--text-2)">快手</text>
                <rect x="0" y="25" width="12" height="12" fill="#3B82F6"/><text x="18" y="35" font-size="11" fill="var(--text-2)">BOSS直聘</text>
                <rect x="0" y="50" width="12" height="12" fill="#6B6B6B"/><text x="18" y="60" font-size="11" fill="var(--text-2)">58同城</text>
            </g>
        </svg>
    </div>`;
}

function hypothesisBarChart() {
    const max = Math.max(...HYPOTHESES.map(h => h.count));
    const barH = 28, gap = 12, padL = 100, padR = 100, padV = 16, W = 800;
    const barW = W - padL - padR;
    const totalH = HYPOTHESES.length * (barH + gap) + padV * 2;
    return `<div style="background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;">
        <div style="min-width:520px;">
        <svg viewBox="0 0 ${W} ${totalH}" style="width:100%;height:auto;" preserveAspectRatio="xMidYMid meet">
            ${HYPOTHESES.map((h, i) => {
                const y = padV + i * (barH + gap);
                const w = Math.max((h.count / max) * barW, 8);
                return `<text x="${padL - 10}" y="${y + barH / 2 + 5}" text-anchor="end" font-size="11" fill="var(--text-2)">${esc(h.h)}</text>
                <rect x="${padL}" y="${y}" width="${w}" height="${barH}" rx="4" fill="${h.color}" opacity="0.85"/>
                <text x="${padL + w + 8}" y="${y + barH / 2 + 5}" font-size="11" font-weight="700" fill="${h.color}">${h.count.toLocaleString()}</text>`;
            }).join('')}
        </svg>
        </div>
    </div>`;
}

// ─── Quote Card (for video excerpts from v6) ────────────────────────────────
function quoteCard(item) {
    return `<div class="card quote-card">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px;">
            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <span class="tag" style="background:${item.color}18;color:${item.color};border-color:${item.color}44;">${esc(item.tag)}</span>
                <span class="text-xs">${item.type}</span>
            </div>
            <div class="text-xs">赞 ${item.likes} · 热度 ${item.heat}</div>
        </div>
        <div class="quote-text">"${esc(item.text)}"</div>
    </div>`;
}

// ─── Voice Card (comments from v7, with overflow:visible fix) ───────────────
function voiceCard(comment, isHot = false) {
    const borderColor = isHot ? 'var(--amber)' : 'var(--rose)';
    const tagBg = isHot ? 'rgba(245,166,35,0.1)' : 'rgba(255,77,141,0.1)';
    const tagColor = isHot ? 'var(--amber)' : 'var(--rose)';
    return `<div class="voice-card ${isHot ? 'hot' : ''}" style="border-left:3px solid ${borderColor};">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
            <span style="width:22px;height:22px;border-radius:50%;background:var(--bg-2);color:var(--text-1);font-size:0.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;">快</span>
            <span style="font-size:0.8rem;color:var(--text-3);">快手用户</span>
            <span style="margin-left:auto;font-size:0.78rem;font-weight:600;color:${isHot ? 'var(--amber)' : 'var(--rose)'};">♥ ${fmtLikes(comment.likes)}</span>
        </div>
        <div class="voice-content">"${esc(comment.expr)}"</div>
        <div class="voice-meta">
            <span class="voice-tag" style="background:${tagBg};color:${tagColor};">${esc(comment.kw)}</span>
        </div>
    </div>
`;
}

// ─── Insight Banner (from v7) ───────────────────────────────────────────────
function insightBanner(num, title, body, dataPoints) {
    const dps = dataPoints.map(dp => `<div class="dp"><div class="num">${esc(dp.num)}</div><div class="lbl">${esc(dp.lbl)}</div></div>`).join('');
    return `<div class="insight-banner" data-num="${num}">
        <h3>${title}</h3>
        <p class="insight-body">${body}</p>
        <div class="insight-data">${dps}</div>
    </div>`;
}

// ─── Insight Strip (from v6) ────────────────────────────────────────────────
function insightStrip(items) {
    return `<div class="insight-strip">${items.map(it => `
        <div class="insight-pill">
            <div style="font-size:1.9rem;font-weight:800;color:${it.color};font-family:var(--font-head);">${esc(it.value)}</div>
            <div class="text-xs" style="margin-top:6px;">${esc(it.label)}</div>
        </div>`).join('')}</div>`;
}

// ─── 4P Grid (from v7) ──────────────────────────────────────────────────────
const FOUR_P = {
    product: { title: '产品策略：直播带岗 × 信任基建', points: ['核心产品：快手快聘直播带岗服务', '差异化卖点：眼见为实 / 老铁信任 / 零门槛求职', '产品升级：标准化直播带岗流程（车间+宿舍+食堂三景展示）'], tags: ['直播带岗', '老铁信任', '零门槛求职'], color: 'var(--blue)' },
    price: { title: '价格策略：求职者免费 × 企业端付费', points: ['求职者端：完全免费（零门槛核心优势）', '企业端：按效果付费（CPM/CPC/简历投递量）', '主播端：带岗主播抽佣机制'], tags: ['零门槛', '效果付费', 'C端免费'], color: 'var(--green)' },
    place: { title: '渠道策略：B端入驻 + C端自然渗透', points: ['B端：24万家入驻用人单位，提高企业直招占比', '知名企业合作（创维/顺丰/伯恩光学）', 'C端：2.5亿蓝领月活用户自然覆盖', '40万+专职带岗主播'], tags: ['24万企业', '2.5亿用户', '40万主播'], color: 'var(--amber)' },
    promotion: { title: '促销策略：情绪价值 × 信任传播', points: ['品牌传播："10个蓝领9个用快手" / "直播带岗，眼见为实"', '内容营销：《来活了老铁！》综艺IP+短剧营销', '政策背书：直播招聘师认证+人社部认可', '老铁文化："来了就是兄弟"+"有尊严地赚钱"'], tags: ['综艺IP', '老铁文化', '政策背书'], color: 'var(--purple)' },
};

function fourPGrid() {
    return `<div class="grid grid-2">${Object.values(FOUR_P).map(p => `
        <div class="card" style="border-top:3px solid ${p.color};">
            <div class="text-h3" style="color:${p.color};margin-bottom:14px;">${esc(p.title)}</div>
            <div style="font-size:0.85rem;color:var(--text-2);line-height:1.8;margin-bottom:14px;">
                ${p.points.map(pt => `<div style="margin-bottom:6px;">• ${esc(pt)}</div>`).join('')}
            </div>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
                ${p.tags.map(t => `<span class="tag" style="background:${p.color}22;color:${p.color};border-color:${p.color}44;">${esc(t)}</span>`).join('')}
            </div>
        </div>`).join('')}</div>`;
}

// ─── Stack List (from v6) ──────────────────────────────────────────────────
function stackList(items) {
    return `<div class="stack-list">${items.map(it => `
        <div class="stack-item">
            <span class="stack-dot" style="background:${it.color || 'var(--amber)'};"></span>
            <div>${esc(it.text)}</div>
        </div>`).join('')}</div>`;
}

// ─── Business Questions ─────────────────────────────────────────────────────
const BUSINESS_QUESTIONS = [
    { text: '蓝领劳工在求职过程中，最担心的、最看重的是什么', color: 'var(--amber)' },
    { text: '快手为什么能成为蓝领求职的重要渠道', color: 'var(--amber)' },
    { text: '用户真正需要的情绪价值是什么', color: 'var(--amber)' },
    { text: '最值得关注的关键词有哪些', color: 'var(--amber)' },
    { text: '快聘为什么有接近招聘核心转化层的战略位势', color: 'var(--amber)' },
];

// ─── HTML ────────────────────────────────────────────────────────────────────
const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>快手快聘 · VOC 深度洞察报告 v8</title>
<style>
:root{--bg-0:#0A0A0A;--bg-1:#111111;--bg-2:#1A1A1A;--bg-3:#252525;--border:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.16);--text-1:#F5F5F5;--text-2:#A8A8A8;--text-3:#6B6B6B;--amber:#F5A623;--amber-glow:rgba(245,166,35,0.15);--green:#00DC82;--purple:#8B5CF6;--rose:#FF4D8D;--blue:#3B82F6;--red:#EF4444;--orange:#F97316;--cyan:#06B6D4;--font-head:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;--font-body:'Noto Sans SC','Inter','PingFang SC','Microsoft YaHei',sans-serif;--font-mono:'JetBrains Mono','SF Mono','Fira Code',monospace;--max-w:1280px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;scroll-snap-type:y proximity;}
body{font-family:var(--font-body);background:var(--bg-0);color:var(--text-1);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 900px 700px at var(--amb-x,20%) var(--amb-y,25%),rgba(245,166,35,0.10),transparent 60%),radial-gradient(ellipse 800px 600px at calc(100% - var(--amb-x,20%)) calc(100% - var(--amb-y,25%)),rgba(139,92,246,0.07),transparent 60%);transition:background 1.4s cubic-bezier(.2,.7,.2,1);}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 90% 95% at 50% 50%,black 0%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 90% 95% at 50% 50%,black 0%,transparent 85%);}
main.deck{position:relative;z-index:1}
::selection{background:var(--amber);color:#000}
.text-hero{font-family:var(--font-head);font-weight:900;letter-spacing:-0.04em;line-height:0.95;font-size:clamp(4rem,12vw,10rem)}
.text-poster{font-family:var(--font-head);font-weight:800;letter-spacing:-0.03em;line-height:1.05;font-size:clamp(2.5rem,6vw,5rem)}
.text-h1{font-family:var(--font-head);font-weight:700;letter-spacing:-0.02em;line-height:1.1;font-size:clamp(2rem,4vw,3.5rem)}
.text-h2{font-family:var(--font-head);font-weight:700;letter-spacing:-0.015em;line-height:1.2;font-size:clamp(1.4rem,2.5vw,2rem)}
.text-h3{font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-0.01em}
.text-body{font-size:clamp(0.92rem,1.1vw,1rem);line-height:1.75;color:var(--text-2)}
.text-sm{font-size:0.85rem;color:var(--text-2)}
.text-xs{font-size:0.72rem;color:var(--text-3)}
.text-mono{font-family:var(--font-mono)}
.text-amber{color:var(--amber)}.text-green{color:var(--green)}.text-purple{color:var(--purple)}.text-rose{color:var(--rose)}.text-blue{color:var(--blue)}.text-red{color:var(--red)}.text-orange{color:var(--orange)}
section.report-section{min-height:100vh;padding:clamp(60px,10vh,120px) clamp(24px,6vw,80px);position:relative;border-bottom:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;isolation:isolate}
section.report-section::before{content:attr(data-slide-num);position:absolute;top:clamp(20px,3vh,36px);right:clamp(24px,4vw,60px);font-family:var(--font-mono);font-weight:600;font-size:clamp(0.68rem,0.75vw,0.78rem);letter-spacing:0.25em;color:var(--text-3);z-index:4;pointer-events:none}
section.report-section::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 70% 60% at 85% 15%,var(--slide-glow-1,rgba(245,166,35,0.06)),transparent 55%),radial-gradient(ellipse 60% 50% at 15% 85%,var(--slide-glow-2,rgba(139,92,246,0.04)),transparent 55%);opacity:0;transition:opacity 1s cubic-bezier(.2,.7,.2,1)}
section.report-section.in-view::after{opacity:1}
section[data-tone="amber"]{--slide-glow-1:rgba(245,166,35,0.10);--slide-glow-2:rgba(245,166,35,0.04)}
section[data-tone="rose"]{--slide-glow-1:rgba(255,77,141,0.09);--slide-glow-2:rgba(255,77,141,0.04)}
section[data-tone="green"]{--slide-glow-1:rgba(0,220,130,0.08);--slide-glow-2:rgba(0,220,130,0.03)}
section[data-tone="purple"]{--slide-glow-1:rgba(139,92,246,0.10);--slide-glow-2:rgba(139,92,246,0.04)}
section[data-tone="blue"]{--slide-glow-1:rgba(59,130,246,0.08);--slide-glow-2:rgba(59,130,246,0.03)}
section[data-tone="orange"]{--slide-glow-1:rgba(249,115,22,0.10);--slide-glow-2:rgba(249,115,22,0.04)}
.cover-hero{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,8vh,100px) clamp(24px,6vw,80px);background:radial-gradient(ellipse 60% 80% at 30% 30%,rgba(245,166,35,0.08) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 80% 70%,rgba(139,92,246,0.05) 0%,transparent 70%),var(--bg-0)}
.cover-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 70%)}
.cover-content{position:relative;z-index:2;max-width:var(--max-w)}
.cover-meta{display:flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:0.78rem;color:var(--text-3);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:32px}
.cover-meta::before{content:'';width:32px;height:2px;background:var(--amber)}
.cover-title{font-family:var(--font-head);font-weight:900;letter-spacing:-0.04em;line-height:0.92;font-size:clamp(3.5rem,11vw,9rem);color:#fff;background:linear-gradient(135deg,#fff 30%,rgba(245,166,35,0.9) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cover-sub{font-size:clamp(1rem,1.6vw,1.4rem);color:var(--text-2);max-width:780px;margin-top:32px;line-height:1.7}
.cover-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);margin-top:clamp(48px,8vh,96px);padding-top:clamp(24px,4vh,48px);border-top:1px solid var(--border);max-width:900px}
.cover-stat .num{font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,2.8vw,2.4rem);letter-spacing:-0.02em;color:var(--amber)}
.cover-stat .lbl{font-size:0.78rem;color:var(--text-3);margin-top:4px;font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase}
@media(max-width:720px){.cover-stats{grid-template-columns:repeat(2,1fr)}}
.nav-rail{position:fixed;left:clamp(16px,2vw,32px);top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:12px}
.nav-dot{width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,0.14);cursor:pointer;transition:all 0.5s cubic-bezier(.2,.7,.2,1);position:relative;display:flex;align-items:center}
.nav-dot.active{background:var(--amber);width:48px;box-shadow:0 0 12px rgba(245,166,35,0.4)}
.nav-dot:hover{background:rgba(255,255,255,0.3)}
.nav-dot::after{content:attr(data-tip);position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%) translateX(-6px);background:rgba(20,20,20,0.92);backdrop-filter:blur(8px);border:1px solid var(--border);padding:6px 12px;border-radius:6px;font-size:0.72rem;color:var(--text-1);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.25s ease,transform 0.25s ease;font-family:var(--font-mono);letter-spacing:0.04em}
.nav-dot:hover::after,.nav-dot.active::after{opacity:1;transform:translateY(-50%) translateX(0)}
.progress-line{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--amber),var(--rose));z-index:1000;width:0%;transition:width 0.3s ease}
.top-bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(24px,4vw,48px);z-index:99;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,0.85) 0%,transparent 100%)}
.brand-logo{font-family:var(--font-head);font-weight:900;font-size:0.88rem;letter-spacing:0.2em}
.brand-logo .dot{color:var(--amber)}
.slide-counter{position:fixed;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vh,28px);z-index:100;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(20,20,20,0.85);backdrop-filter:blur(16px);border:1px solid var(--border-strong);font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.1em;color:var(--text-2)}
.slide-counter .now{color:var(--amber);font-weight:700}
.slide-counter .bar{width:60px;height:2px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
.slide-counter .bar::after{content:'';display:block;height:100%;width:var(--pct,0%);background:linear-gradient(90deg,var(--amber),var(--rose));transition:width 0.6s cubic-bezier(.2,.7,.2,1)}
.kbd-hint{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vh,28px);z-index:100;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(20,20,20,0.85);backdrop-filter:blur(16px);border:1px solid var(--border-strong);font-family:var(--font-mono);font-size:0.72rem;color:var(--text-2);letter-spacing:0.04em;transition:opacity 0.6s ease,transform 0.6s ease}
.kbd-hint.fade{opacity:0;transform:translateY(12px);pointer-events:none}
.kbd-hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--bg-3);border:1px solid var(--border-strong);border-radius:4px;font-size:0.7rem;font-family:var(--font-mono);color:var(--text-1);box-shadow:0 1px 0 rgba(0,0,0,0.4)}
.section-inner{width:100%;max-width:var(--max-w);margin:0 auto;position:relative}
.section-head{margin-bottom:clamp(32px,5vh,64px)}
.section-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:18px}
.section-eyebrow::before{content:'';display:inline-block;width:24px;height:1px;background:var(--amber)}
.section-sub{color:var(--text-2);font-size:1.05rem;max-width:720px;margin-top:14px;line-height:1.8}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.025) 0%,rgba(255,255,255,0.008) 100%),var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(20px,2.2vw,32px);position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform 0.4s cubic-bezier(.2,.7,.2,1),border-color 0.3s ease,box-shadow 0.4s ease}
.card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.35),0 0 0 1px rgba(245,166,35,0.08)}
.card.card-glow{box-shadow:0 0 60px rgba(245,166,35,0.12),0 0 120px rgba(245,166,35,0.06)}
.card.card-glow-green{box-shadow:0 0 60px rgba(0,220,130,0.12),0 0 120px rgba(0,220,130,0.06)}
.card.card-glow-rose{box-shadow:0 0 60px rgba(255,77,141,0.12),0 0 120px rgba(255,77,141,0.06)}
.card-accent{border-left:3px solid var(--amber);border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.metric{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(24px,2.5vw,36px);position:relative;overflow:hidden}
.metric::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--amber),transparent);opacity:0.6}
.metric .metric-label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.metric .metric-value{font-family:var(--font-head);font-weight:800;font-size:clamp(2.2rem,4vw,3.5rem);letter-spacing:-0.03em;line-height:1;color:var(--text-1);margin-bottom:8px}
.metric .metric-unit{font-family:var(--font-mono);font-size:0.85rem;color:var(--amber);font-weight:500}
.metric .metric-sub{margin-top:14px;font-size:0.82rem;color:var(--text-2);line-height:1.5}
.voice-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;margin-bottom:14px;transition:all 0.3s ease;position:relative;overflow:visible}
.voice-card::before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;height:auto;background:var(--rose);opacity:0.6;transition:opacity 0.3s;border-radius:var(--radius-md) 0 0 var(--radius-md);}
.voice-card.hot{border-color:rgba(245,166,35,0.3)}
.voice-card.hot::before{opacity:1;background:var(--amber)}
.voice-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);border-color:var(--border-strong);}
.voice-card .voice-content{font-size:0.96rem;line-height:1.7;color:var(--text-1);margin:12px 0;font-weight:400}
.voice-card .voice-meta{display:flex;gap:8px;flex-wrap:wrap}
.voice-tag{display:inline-flex;padding:3px 10px;background:rgba(255,77,141,0.1);color:var(--rose);border-radius:4px;font-size:0.72rem;font-weight:500}
.voice-card.hot .voice-tag{background:rgba(245,166,35,0.1);color:var(--amber)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;font-size:0.72rem;font-weight:500;letter-spacing:0.02em;font-family:var(--font-head);background:rgba(245,166,35,0.1);color:var(--amber);border:1px solid rgba(245,166,35,0.22)}
.tag.green{background:rgba(0,220,130,0.08);color:var(--green);border-color:rgba(0,220,130,0.2)}
.tag.purple{background:rgba(139,92,246,0.08);color:var(--purple);border-color:rgba(139,92,246,0.2)}
.tag.rose{background:rgba(255,77,141,0.08);color:var(--rose);border-color:rgba(255,77,141,0.2)}
.tag.blue{background:rgba(59,130,246,0.08);color:var(--blue);border-color:rgba(59,130,246,0.2)}
.tag.orange{background:rgba(249,115,22,0.08);color:var(--orange);border-color:rgba(249,115,22,0.2)}
.tag.red{background:rgba(239,68,68,0.08);color:var(--red);border-color:rgba(239,68,68,0.2)}
.insight-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.insight-pill{padding:16px 18px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid var(--border)}
.stack-list{display:grid;gap:12px}
.stack-item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid var(--border)}
.stack-dot{width:10px;height:10px;border-radius:50%;margin-top:8px;flex:0 0 auto}
.table-card{overflow:auto}
table.clean{width:100%;border-collapse:collapse;font-size:0.9rem}
table.clean th,table.clean td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
table.clean th{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);background:var(--bg-1)}
table.clean td{color:var(--text-1)}
table.data-tbl{width:100%;border-collapse:collapse;font-size:0.88rem}
.data-tbl thead th{text-align:left;padding:14px 16px;background:var(--bg-1);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3)}
.data-tbl tbody td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-1);vertical-align:middle}
.data-tbl tbody tr:last-child td{border-bottom:none}
.data-tbl tbody tr:hover{background:rgba(255,255,255,0.02)}
.data-tbl .tb-num{font-family:var(--font-mono);font-weight:600;color:var(--amber)}
.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border)}
.quote-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;transition:all 0.3s ease}
.quote-card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.quote-text{font-size:0.95rem;line-height:1.7;color:var(--text-1);font-weight:400}
.cover-hero .aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.cover-hero .aurora span{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.5}
.cover-hero .aurora span:nth-child(1){width:500px;height:500px;background:rgba(245,166,35,0.35);top:-10%;left:10%;animation:aurora-drift-1 18s ease-in-out infinite alternate}
.cover-hero .aurora span:nth-child(2){width:420px;height:420px;background:rgba(139,92,246,0.30);bottom:-8%;right:10%;animation:aurora-drift-2 22s ease-in-out infinite alternate}
.cover-hero .aurora span:nth-child(3){width:300px;height:300px;background:rgba(0,220,130,0.22);top:40%;left:55%;animation:aurora-drift-3 26s ease-in-out infinite alternate}
@keyframes aurora-drift-1{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,80px) scale(1.2)}}
@keyframes aurora-drift-2{from{transform:translate(0,0) scale(1)}to{transform:translate(-80px,-60px) scale(1.15)}}
@keyframes aurora-drift-3{from{transform:translate(0,0) scale(1)}to{transform:translate(-100px,40px) scale(1.3)}}
@media(prefers-reduced-motion:reduce){.cover-hero .aurora span{animation:none}}
.insight-banner{min-height:260px;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative;overflow:hidden;margin-bottom:28px}
.insight-banner::before{content:attr(data-num);position:absolute;top:16px;right:24px;font-family:var(--font-head);font-weight:900;font-size:clamp(4rem,9vw,7rem);line-height:1;color:var(--bg-3);letter-spacing:-0.05em;pointer-events:none}
.insight-banner h3{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:-0.02em;line-height:1.25;color:var(--text-1);max-width:85%}
.insight-banner h3 strong,.insight-banner h3 span{color:var(--amber);font-weight:900}
.insight-banner .insight-body{color:var(--text-2);font-size:1rem;line-height:1.75;max-width:85%}
.insight-banner .insight-data{display:flex;gap:24px;margin-top:16px;padding-top:20px;border-top:1px solid var(--border)}
.insight-banner .insight-data .dp{display:flex;flex-direction:column;gap:2px}
.insight-banner .insight-data .num{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:var(--amber)}
.insight-banner .insight-data .lbl{font-size:0.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em}
.fade-up{opacity:1;transform:none;transition:opacity 0.9s cubic-bezier(.16,.84,.33,1),transform 0.9s cubic-bezier(.16,.84,.33,1)}
html.js .fade-up{opacity:0;transform:translateY(32px);will-change:opacity,transform}
html.js .fade-up.is-visible{opacity:1;transform:translateY(0)}
footer{text-align:center;padding:48px clamp(24px,6vw,80px);border-top:1px solid var(--border);color:var(--text-3);font-size:0.8rem;background:var(--bg-0)}
footer .meta{font-family:var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;margin-top:8px;font-size:0.7rem}
@media(max-width:900px){.nav-rail{display:none}}
</style>
</head>
<body>
<div class="progress-line" id="progressLine"></div>
<header class="top-bar"><div class="brand-logo">快手快聘<span class="dot">·</span>VOC</div></header>
<nav class="nav-rail" id="navRail"></nav>
<div class="slide-counter"><span class="now" id="slideNow">01</span><div class="bar"><div id="slideBar"></div></div><span id="slideTotal">13</span></div>
<div class="kbd-hint"><kbd>↓</kbd><kbd>↑</kbd> 滚动切换</div>
<main class="deck">

<!-- ═══ COVER ══════════════════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="COVER" data-tone="amber" style="position:relative;">
    <div class="cover-grid-bg"></div>
    <div class="aurora"><span></span><span></span><span></span></div>
    <div class="cover-hero">
        <div class="section-eyebrow" style="margin-bottom:24px;">VOC 深度洞察报告 · v8</div>
        <h1 class="cover-title">快手蓝领求职</h1>
        <p class="cover-sub">基于 <span style="color:var(--amber);font-weight:700;">380</span> 条视频、<span style="color:var(--rose);font-weight:700;">8,173</span> 条评论、<span style="color:var(--green);font-weight:700;">9,455万</span> 次播放的主题化分析，回答蓝领在快手求职时"最怕什么、最要什么、为什么会把快手和快聘当成高效率入口"。</p>
        ${insightStrip([
            { label: '主题关键词文件', value: '19', color: 'var(--amber)' },
            { label: '风险相关样本', value: '4,695', color: 'var(--rose)' },
            { label: '需求相关样本', value: '3,498', color: 'var(--green)' },
            { label: '最高点赞单条', value: '15.1w', color: 'var(--blue)' },
        ])}
        <div class="text-xs" style="color:var(--text-3);margin-top:28px;">数据截至：2026/4/24 · 数据目录：docs/KS-Chanel_analysis/raw/KS</div>
    </div>
</section>

<!-- ═══ CH01 执行摘要 ═══════════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="01" data-tone="amber">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow">Chapter 01</div>
            <h2 class="text-h1">执行摘要</h2>
            <p class="section-sub">先把这份报告真正想回答的业务问题说清楚，再给出可以直接汇报的结论版。</p>
        </div>
        <div class="grid grid-2" style="margin-bottom:24px;">
            <div class="card" style="border-left:3px solid var(--rose);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--rose);">最担心的不是低薪，而是被骗</div>
                <p class="text-body">从风险样本与高赞表达看，蓝领用户最敏感的是虚假招聘、黑中介、押金不退、工资克扣与入职后货不对板。风险焦虑是比价格比较更靠前的决策变量。</p>
            </div>
            <div class="card" style="border-left:3px solid var(--green);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--green);">最看重的是"确定性条件"</div>
                <p class="text-body">工资真实、发薪稳定、包吃包住，当天入职、流程简单，这些词反复出现。它们本质上都是在降低求职成本、迁移成本和试错成本。</p>
            </div>
            <div class="card" style="border-left:3px solid var(--blue);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--blue);">快手承接的是短链路求职决策</div>
                <p class="text-body">用户通过直播和短视频看环境、看宿舍、看工资口径，再通过评论和私信做真假判断。快手承担了入口、解释、信任建立和转化承接的复合角色。</p>
            </div>
            <div class="card" style="border-left:3px solid var(--orange);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--orange);">快聘的战略位势来自离转化更近</div>
                <p class="text-body">如果内部判断"快聘找工作日活几十万简历，战略位势仅次于电商"，那这批 VOC 可以解释原因：需求高频、风险敏感、决策短、转化意图强。</p>
            </div>
        </div>
        <div class="card">
            <div class="section-eyebrow" style="margin-bottom:14px;">Business Questions</div>
            ${stackList(BUSINESS_QUESTIONS)}
        </div>
    </div>
</section>

<!-- ═══ CH02 数据范围与分析方法 ════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="02" data-tone="blue">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--blue);">Chapter 02</div>
            <h2 class="text-h1">数据范围与分析方法</h2>
            <p class="section-sub">这一页补足方法论说明，让整份 HTML 不只是结论页，也是一份可解释的数据汇报页。</p>
        </div>
        <div class="grid grid-4" style="margin-bottom:24px;">
            ${VOC_STATS.map(s => `<div class="card metric"><div class="metric-label">${esc(s.label)}</div><div class="metric-value" style="color:${s.color};">${esc(s.value)}</div><div class="metric-sub">${esc(s.sub)}</div></div>`).join('')}
        </div>
        <div class="grid grid-2">
            <div class="card">
                <div class="section-eyebrow" style="color:var(--blue);margin-bottom:14px;">Analysis Logic</div>
                ${stackList([
                    { text: '以原始 raw/KS/*.json 为准，重新汇总视频文案、评论文本和主题热度。', color: 'var(--blue)' },
                    { text: '按"风险 / 需求 / 渠道 / 情绪 / 战略位势"做语义聚类，而不是只看单个关键词文件。', color: 'var(--green)' },
                    { text: '通过"词项命中 × 文本热度"识别真正有汇报价值的主题词。', color: 'var(--rose)' },
                    { text: '保留高赞视频文案和评论样本，方便直接放进管理层汇报或研究结论里。', color: 'var(--amber)' },
                ])}
            </div>
            <div class="card table-card">
                <div class="section-eyebrow" style="color:var(--cyan);margin-bottom:14px;">Data Snapshot</div>
                <table class="clean">
                    <thead><tr><th>指标</th><th>数值</th><th>说明</th></tr></thead>
                    <tbody>
                        <tr><td>总点赞量</td><td>1,088,514</td><td>用于估算主题互动强度</td></tr>
                        <tr><td>最高单条热度</td><td>20.3w</td><td>高热视频与高赞评论共同构成综合热度</td></tr>
                        <tr><td>风险样本</td><td>4,695</td><td>"骗 / 坑 / 中介 / 押金 / 克扣"相关</td></tr>
                        <tr><td>需求样本</td><td>3,498</td><td>"工资 / 吃住 / 发薪 / 入职"相关</td></tr>
                        <tr><td>渠道样本</td><td>2,454</td><td>"快聘 / 直播带岗 / 蓝领找工作"相关</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- ═══ CH03 最担心什么 ═══════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="03" data-tone="rose">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--rose);">Chapter 03</div>
            <h2 class="text-h1">蓝领求职最担心什么</h2>
            <p class="section-sub">风险不是单点事件，而是从"看到岗位"到"真正入职"全链路的不确定性。这也是快手求职场里最强烈的底层情绪。</p>
        </div>
        <div class="grid grid-3" style="margin-bottom:24px;">
            <div class="card metric"><div class="metric-label">风险样本</div><div class="metric-value" style="color:var(--rose);">4,695</div><div class="metric-sub">覆盖招聘骗局、打工陷阱、被坑、黑中介、押金不退等</div></div>
            <div class="card metric"><div class="metric-label">首位风险词</div><div class="metric-value" style="color:#EF4444;">骗</div><div class="metric-sub">按命中条数和热度综合排序</div></div>
            <div class="card metric"><div class="metric-label">高热风险表达</div><div class="metric-value" style="color:var(--orange);">20.3w</div><div class="metric-sub">高热内容通常直接揭露套路或踩坑经历</div></div>
        </div>
        <div class="fade-up">${dualBarChart(RISK_CHART_DATA)}</div>
        <div class="grid grid-2" style="margin-top:22px;">
            ${HIGH_RISK_QUOTES.slice(0, 4).map(q => quoteCard(q)).join('')}
        </div>
        <div class="card" style="margin-top:22px;border-left:3px solid var(--rose);">
            <div class="text-h2" style="margin-bottom:12px;color:var(--rose);">汇报可直接引用</div>
            <p class="text-body">蓝领求职最强焦虑不是"工资不够高"，而是"会不会被骗、会不会被中介抽走、会不会交押金、会不会干完拿不到钱"。风险感知先于薪资吸引，是快手求职内容里最值得重视的底层变量。</p>
        </div>
    </div>
</section>

<!-- ═══ CH04 最看重什么 ════════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="04" data-tone="green">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--green);">Chapter 04</div>
            <h2 class="text-h1">蓝领求职最看重什么</h2>
            <p class="section-sub">对蓝领来说，最重要的不是抽象品牌，而是"值不值得去、去了会不会亏、多久能上岗"这种极度现实的问题。</p>
        </div>
        <div class="grid grid-4" style="margin-bottom:24px;">
            <div class="card"><div class="text-h2" style="margin-bottom:10px;color:var(--green);">工资真实</div><p class="text-body">用户会反复对照薪资口径、到手收入和发薪规则。</p></div>
            <div class="card"><div class="text-h2" style="margin-bottom:10px;color:var(--green);">发薪稳定</div><p class="text-body">"发工资""日结""加班费"都在传递更强的安全感。</p></div>
            <div class="card"><div class="text-h2" style="margin-bottom:10px;color:var(--green);">包吃包住</div><p class="text-body">它直接降低异地求职的初始成本和决策门槛。</p></div>
            <div class="card"><div class="text-h2" style="margin-bottom:10px;color:var(--green);">当天入职</div><p class="text-body">蓝领决策短，能不能快速落地决定转化效率。</p></div>
        </div>
        <div class="fade-up">${dualBarChart(CARE_CHART_DATA)}</div>
        <div class="grid grid-2" style="margin-top:22px;">
            ${HIGH_CARE_QUOTES.slice(0, 4).map(q => quoteCard(q)).join('')}
        </div>
        <div class="card" style="margin-top:22px;border-left:3px solid var(--green);">
            <div class="text-h2" style="margin-bottom:12px;color:var(--green);">汇报可直接引用</div>
            <p class="text-body">蓝领最看重的不是单一"高薪"，而是工资真实、发薪稳定、包吃包住，当天入职和流程简单。这些条件共同构成了他们对"确定性工作机会"的判断标准。</p>
        </div>
    </div>
</section>

<!-- ═══ CH05 情绪价值强在哪里 ════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="05" data-tone="purple">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--purple);">Chapter 05</div>
            <h2 class="text-h1">情绪价值强在哪里</h2>
            <p class="section-sub">真正有价值的情绪，不是空泛安慰，而是"让我少踩坑、让我看得懂、让我敢报名"的决策安全感。</p>
        </div>
        <div class="grid grid-3" style="margin-bottom:22px;">
            <div class="card" style="border-left:3px solid var(--rose);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--rose);">负向情绪来源</div>
                <p class="text-body">被骗、被坑、黑中介、押金不退、工资克扣，会把委屈、愤怒和无力感放大。</p>
            </div>
            <div class="card" style="border-left:3px solid var(--green);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--green);">正向情绪来源</div>
                <p class="text-body">靠谱、真实、放心、包吃包住、当天入职，本质上都在回应"能不能放心去"。</p>
            </div>
            <div class="card" style="border-left:3px solid var(--amber);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--amber);">情绪价值本质</div>
                <p class="text-body">是帮用户建立确定性，而不是单纯制造高情绪张力或娱乐氛围。</p>
            </div>
        </div>
        <div class="grid grid-3" style="margin-bottom:24px;">
            ${EMOTION_KEYWORDS.map(e => `
            <div class="card" style="border-top:3px solid ${e.color};">
                <div style="font-size:2rem;margin-bottom:12px;">${e.emoji}</div>
                <div class="text-h3" style="color:${e.color};margin-bottom:8px;">${esc(e.word)}</div>
                <p class="text-sm">${esc(e.desc)}</p>
            </div>`).join('')}
        </div>
        ${insightBanner('05', '情绪价值是<strong>双刃剑</strong>——真实故事获得关注，但<strong>虚假摆拍</strong>正在侵蚀信任基础', '外卖骑手、快递小哥、网约车司机因"接地气""高共鸣"属性，成为短视频平台虚假摆拍重灾区。', [
            { num: '★★★★★', lbl: '情绪获得感优势' },
            { num: '⚠️高风险', lbl: '虚假摆拍泛滥' },
            { num: '五部门', lbl: '行政指导监管' },
        ])}
        <div class="card card-glow" style="border-left:3px solid var(--purple);padding:28px 32px;">
            <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--purple);margin-bottom:14px;font-weight:600;">标杆案例 · 快手《来活了老铁！》</div>
            <div class="text-h2" style="margin-bottom:12px;">快手联合山东卫视推出的首档蓝领求职综艺IP</div>
            <p class="text-body">25个热搜榜单（微博主榜6个），最高总榜TOP21，完成度625%。站外曝光量原定2.5亿，实际完成3.26亿，完成度130%。围绕"技能向+娱乐向+社会向"三个维度展开。</p>
            <div style="margin-top:14px;display:flex;gap:10px;">
                <span class="tag purple">技能向</span>
                <span class="tag purple">娱乐向</span>
                <span class="tag purple">社会向</span>
            </div>
        </div>
    </div>
</section>

<!-- ═══ CH06 快手成为重要渠道的原因 ══════════════════════════════════════ -->
<section class="report-section" data-slide-num="06" data-tone="blue">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--blue);">Chapter 06</div>
            <h2 class="text-h1">为什么快手能成为蓝领求职的重要渠道</h2>
            <p class="section-sub">这里不是泛泛说"快手流量大"，而是解释为什么快手适合承接蓝领这种短链路、高时效、强风险判断的决策场景。</p>
        </div>
        <div class="grid grid-3" style="margin-bottom:24px;">
            <div class="card" style="border-top:3px solid var(--blue);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--blue);">内容可视化</div>
                <p class="text-body">车间、宿舍、食堂、工资口径、现场环境都可以被直接展示，比纯文字招聘更有说服力。</p>
            </div>
            <div class="card" style="border-top:3px solid var(--cyan);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--cyan);">评论问答密度高</div>
                <p class="text-body">用户会直接追问"是不是中介、包不包住、工资怎么发、什么时候入职"，帮助做真假筛选。</p>
            </div>
            <div class="card" style="border-top:3px solid var(--amber);">
                <div class="text-h2" style="margin-bottom:10px;color:var(--amber);">转化链路短</div>
                <p class="text-body">从看内容到留电话、私信报名、到场面试，快手天然适配短决策和高转化意图。</p>
            </div>
        </div>
        <div class="grid grid-2">
            <div>
                <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--blue);margin-bottom:14px;font-weight:600;">渠道主题词热度</div>
                ${channelBarChart(CHANNEL_DATA)}
            </div>
            <div>
                <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--rose);margin-bottom:14px;font-weight:600;">🔥 高赞评论 VOC TOP10</div>
                ${HIGH_COMMENT_LIKES.map(v => voiceCard(v, v.hot)).join('')}
            </div>
        </div>
    </div>
</section>

<!-- ═══ CH07 快聘生态与竞争格局 ══════════════════════════════════════════ -->
<section class="report-section" data-slide-num="07" data-tone="orange">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--orange);">Chapter 07</div>
            <h2 class="text-h1">快聘生态与竞争格局</h2>
            <p class="section-sub">市场规模、竞争位势与快聘的战略护城河</p>
        </div>
        <div class="grid grid-4" style="margin-bottom:32px;">
            ${KUAIKUAI_STATS.map(d => `<div class="card metric"><div class="metric-label">${esc(d.label)}</div><div class="metric-value" style="color:var(--green);">${esc(d.value)}</div></div>`).join('')}
        </div>
        <div class="card card-glow" style="border-left:3px solid var(--green);margin-bottom:28px;padding:28px 32px;">
            <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--green);margin-bottom:14px;font-weight:600;">战略定位</div>
            <div class="text-h2" style="margin-bottom:12px;">"10个蓝领9个用快手——直播带岗，眼见为实"</div>
            <p class="text-body">快聘日活几十万简历，内部仅次于电商；2.5亿蓝领月活是最大壁垒；但信息审核弱是最大短板</p>
        </div>
        <div class="grid grid-3" style="margin-bottom:24px;">
            ${COMPETITORS.map(c => `
            <div class="card" style="border-top:3px solid ${c.color};">
                <div style="font-weight:700;color:${c.color};margin-bottom:10px;">${esc(c.name)}</div>
                <div style="font-size:0.82rem;color:var(--text-2);line-height:1.7;">
                    <div style="margin-bottom:6px;"><span style="color:var(--green);">✓</span> ${esc(c.strength)}</div>
                    <div style="margin-bottom:6px;"><span style="color:var(--green);">✓</span> 用户：${esc(c.users)} · ${esc(c.type)}</div>
                    <div><span style="color:var(--rose);">⚠</span> ${esc(c.weak)}</div>
                </div>
            </div>`).join('')}
        </div>
        <div class="fade-up">
            <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--orange);margin-bottom:14px;font-weight:600;">📊 平台竞争要素雷达图</div>
            ${radarChart()}
        </div>
    </div>
</section>

<!-- ═══ CH08 信任机制 ══════════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="08" data-tone="green">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--green);">Chapter 08</div>
            <h2 class="text-h1">信任机制与平台壁垒</h2>
            <p class="section-sub">老铁文化是快聘最难被竞品复制的竞争壁垒</p>
        </div>
        <div class="grid grid-2" style="margin-bottom:28px;">
            <div class="card" style="border-top:3px solid var(--green);">
                <div style="font-weight:700;color:var(--green);margin-bottom:14px;">老铁信任体系</div>
                <div style="font-size:0.85rem;color:var(--text-2);line-height:1.8;">
                    <div style="margin-bottom:8px;">• 熟人推荐式信任</div>
                    <div style="margin-bottom:8px;">• 主播与粉丝长期关系积累</div>
                    <div style="margin-bottom:8px;">• 评论区实时互动答疑</div>
                    <div>• "来了就是兄弟"文化</div>
                </div>
            </div>
            <div class="card" style="border-top:3px solid var(--blue);">
                <div style="font-weight:700;color:var(--blue);margin-bottom:14px;">直播带岗信任机制</div>
                <div style="font-size:0.85rem;color:var(--text-2);line-height:1.8;">
                    <div style="margin-bottom:8px;">• 车间直播展示</div>
                    <div style="margin-bottom:8px;">• 宿舍直播展示</div>
                    <div style="margin-bottom:8px;">• 食堂直播展示</div>
                    <div>• 眼见为实消除信息不对称</div>
                </div>
            </div>
        </div>
        ${insightBanner('08', '快手的核心壁垒是<strong>"信任基础设施"</strong>而非流量本身——2.5亿蓝领月活的背后是"老铁"信任关系，但这种信任是脆弱的', '一旦受虚假招聘事件冲击，修复成本极高。', [
            { num: '2.5亿', lbl: '蓝领月活用户' },
            { num: '40万+', lbl: '专职带岗主播' },
            { num: '4320万', lbl: '带动就业机会' },
        ])}
        <div class="grid grid-4" style="margin-top:24px;">
            ${COMPETITORS.map(c => `
            <div class="card metric">
                <div class="metric-label">${esc(c.name)}</div>
                <div class="metric-value" style="color:${c.color};font-size:clamp(1.6rem,2.5vw,2.2rem);">${esc(c.users)}</div>
                <div class="metric-sub">${esc(c.type)} · ${esc(c.trend)}</div>
            </div>`).join('')}
        </div>
    </div>
</section>

<!-- ═══ CH09 机会与建议 ════════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="09" data-tone="amber">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow">Chapter 09</div>
            <h2 class="text-h1">机会与建议</h2>
            <p class="section-sub">快聘优势强化、风险应对、战略方向</p>
        </div>
        <div class="grid grid-2" style="margin-bottom:28px;">
            ${STRATEGY_RECS.slice(0, 4).map(r => `
            <div class="card" style="border-top:3px solid ${r.color};">
                <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
                    <div style="width:32px;height:32px;border-radius:50%;background:${r.color};color:#000;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:0.9rem;">${esc(r.num)}</div>
                    <div class="text-h3">${esc(r.title)}</div>
                </div>
                <p class="text-sm">${esc(r.desc)}</p>
            </div>`).join('')}
        </div>
        <div class="card" style="border-top:3px solid var(--rose);margin-bottom:28px;">
            <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--rose);margin-bottom:14px;font-weight:600;">⚠️ 风险矩阵</div>
            <div class="table-wrap">
                <table class="data-tbl">
                    <thead><tr><th>风险类型</th><th>描述</th><th>概率</th><th>影响</th><th>应对策略</th></tr></thead>
                    <tbody>
                        ${RISKS.map(r => `<tr style="background:${r.color}11;">
                            <td><strong style="color:${r.color};">${esc(r.type)}</strong></td>
                            <td style="color:var(--text-2);font-size:0.85rem;">${esc(r.desc)}</td>
                            <td style="color:${r.color};font-weight:600;">${esc(r.prob)}</td>
                            <td style="color:${r.color};font-weight:600;">${esc(r.impact)}</td>
                            <td style="color:var(--text-2);font-size:0.82rem;">${esc(r.strategy)}</td>
                        </tr>`).join('')}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card" style="border-top:3px solid var(--blue);padding:28px 32px;">
            <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--blue);margin-bottom:14px;font-weight:600;">📋 五部门行政指导要求</div>
            <div class="grid grid-2">
                <div style="font-size:0.85rem;color:var(--text-2);line-height:1.8;">
                    <div style="margin-bottom:8px;">① <strong style="color:var(--text-1);">资质审核到位</strong> — 对招聘方资质进行核验</div>
                    <div style="margin-bottom:8px;">② <strong style="color:var(--text-1);">信息明示到位</strong> — 招聘信息完整透明</div>
                    <div>③ <strong style="color:var(--text-1);">内容审核到位</strong> — 虚假信息严格过滤</div>
                </div>
                <div style="font-size:0.85rem;color:var(--text-2);line-height:1.8;">
                    <div style="margin-bottom:8px;">④ <strong style="color:var(--text-1);">风险防范到位</strong> — 建立风险预警机制</div>
                    <div>⑤ <strong style="color:var(--text-1);">处置管控到位</strong> — 违规内容快速处置</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══ CH10 4P营销策略 ════════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="10" data-tone="blue">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--blue);">Chapter 10</div>
            <h2 class="text-h1">快聘 4P 营销策略</h2>
            <p class="section-sub">产品 / 价格 / 渠道 / 促销</p>
        </div>
        ${fourPGrid()}
        ${insightBanner('10', '基于VOC的内容策略：围绕<strong>"确定性"</strong>构建传播矩阵', '最强购买点：工资真实、发薪稳定、包吃包住，当天入职。最强焦虑：被骗、被坑、黑中介、押金不退。', [
            { num: '20+', lbl: '情绪关键词体系' },
            { num: '3', lbl: '核心传播维度' },
            { num: '1个', lbl: '综艺IP标杆' },
        ])}
        <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--blue);margin-bottom:14px;margin-top:24px;font-weight:600;">📊 H1-H8 假设验证</div>
        ${hypothesisBarChart()}
    </div>
</section>

<!-- ═══ CH11 快聘优劣势与监管 ════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="11" data-tone="orange">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--orange);">Chapter 11</div>
            <h2 class="text-h1">快聘优劣势与监管环境</h2>
            <p class="section-sub">知己知彼：快聘的结构性优势与必须补足的短板</p>
        </div>
        <div class="grid grid-2" style="margin-bottom:28px;">
            <div>
                <div style="font-weight:700;color:var(--green);margin-bottom:14px;font-size:1.1rem;">✅ 快聘四大核心优势</div>
                ${stackList([
                    { text: '不可替代的用户渗透率——"10个蓝领，9个都用快手"，2.5亿蓝领月活是任何竞品短期内难以复制的规模化优势', color: 'var(--green)' },
                    { text: '信任场景的天然构建能力——"老铁"文化基因天然适配蓝领群体的社交习惯，熟人推荐式信任关系', color: 'var(--green)' },
                    { text: '求职门槛极低——蓝领求职者无需撰写简历、无需注册新App，只需在直播间留下联系方式即可完成职位投递', color: 'var(--green)' },
                    { text: '政策先发优势——"直播带岗"首创平台，"直播招聘师"入编国家职业分类大典，人社部报告认定20%纯新增用户', color: 'var(--green)' },
                ])}
            </div>
            <div>
                <div style="font-weight:700;color:var(--rose);margin-bottom:14px;font-size:1.1rem;">⚠️ 快聘四大劣势与风险</div>
                ${stackList([
                    { text: '信息审核能力不足——对中介主播宣传的招聘信息零审核，职位真实性存疑，这是当前快聘业务最突出的短板', color: 'var(--rose)' },
                    { text: 'B端直招占比低，中介依赖度高——直播间以劳务中介为主，企业自招较少，对求职者的直接吸引力有限', color: 'var(--rose)' },
                    { text: '匹配准确率不如算法平台——流量模式虽然来量快，但在人岗精准匹配层面仍不及BOSS直聘等算法驱动型平台', color: 'var(--rose)' },
                    { text: '虚假信息监管风险加剧——2026年4月五部门行政指导将快手纳入重点监管范围，若不能有效提升审核能力可能面临更大合规压力', color: 'var(--rose)' },
                ])}
            </div>
        </div>
        <div class="card" style="border-left:3px solid var(--orange);padding:28px 32px;">
            <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--orange);margin-bottom:14px;font-weight:600;">🎯 里斯品类战略视角</div>
            <p class="text-body">快手快聘通过"直播带岗+短视频展示+私域信任"的组合，开创"流量型直播带岗"新品类。以"10个蓝领9个用快手"为核心诉求，与传统招聘网站和分类信息平台形成本质差异。快聘不需要在"匹配精准度"上与BOSS直聘正面竞争，而是在"流量触达+信任建立+求职门槛+情绪获得感"四个维度上建立综合壁垒。</p>
        </div>
    </div>
</section>

<!-- ═══ CH12 关键发现 ══════════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="12" data-tone="purple">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow" style="color:var(--purple);">Chapter 12</div>
            <h2 class="text-h1">关键发现与风险提示</h2>
            <p class="section-sub">提炼可向管理层直接汇报的核心结论</p>
        </div>
        <div class="grid grid-2" style="margin-bottom:28px;">
            <div class="card" style="border-left:3px solid var(--green);">
                <div style="font-weight:700;color:var(--green);margin-bottom:14px;">✅ 关键发现</div>
                <div style="display:grid;gap:16px;">
                    <div style="padding-bottom:16px;border-bottom:1px solid var(--border);">
                        <div style="font-weight:600;color:var(--text-1);margin-bottom:6px;">1. 快手的核心壁垒是"信任基础设施"而非流量本身</div>
                        <p class="text-sm">2.5亿蓝领月活的背后是"老铁"信任关系，但这种信任是脆弱的，一旦受虚假招聘事件冲击，修复成本极高。</p>
                    </div>
                    <div style="padding-bottom:16px;border-bottom:1px solid var(--border);">
                        <div style="font-weight:600;color:var(--text-1);margin-bottom:6px;">2. "10个蓝领9个用快手"既是优势也是责任</div>
                        <p class="text-sm">如此高的渗透率意味着，任何发生在快聘平台上的招聘诈骗，其社会影响都将远超传统招聘平台。</p>
                    </div>
                    <div style="padding-bottom:16px;border-bottom:1px solid var(--border);">
                        <div style="font-weight:600;color:var(--text-1);margin-bottom:6px;">3. 情绪价值的"双刃剑"效应</div>
                        <p class="text-sm">快手借助蓝领群体"高共鸣"属性进行情绪化传播，已形成独特的差异化竞争优势；但虚假摆拍内容的泛滥正在侵蚀这种情绪传播的正当性。</p>
                    </div>
                    <div>
                        <div style="font-weight:600;color:var(--text-1);margin-bottom:6px;">4. 政策监管已从"鼓励创新"转向"规范治理"</div>
                        <p class="text-sm">2026年五部门行政指导标志着直播带岗进入强监管时期，快手需要从"零审核"向制度化审核体系转型。</p>
                    </div>
                </div>
            </div>
            <div>
                <div class="card" style="border-left:3px solid var(--rose);margin-bottom:20px;">
                    <div style="font-weight:700;color:var(--rose);margin-bottom:14px;">⚠️ 风险提示</div>
                    ${stackList([
                        { text: '平台监管风险：五部门行政指导要求快聘业务全面提升审核能力，若整改不到位可能面临更严厉的监管措施', color: 'var(--rose)' },
                        { text: '信任透支风险：信息审核不足可能导致恶性诈骗事件，严重损害平台公信力。有前科主播借"官方合作"名义招聘已暴露审核漏洞', color: 'var(--rose)' },
                        { text: '竞争加剧风险：BOSS直聘持续加码蓝领招聘治理，58同城积累深厚，蓝领赛道竞争持续白热化', color: 'var(--rose)' },
                    ])}
                </div>
                <div class="card" style="border-left:3px solid var(--blue);">
                    <div style="font-weight:700;color:var(--blue);margin-bottom:14px;">📋 五部门"五个到位"</div>
                    <div style="font-size:0.85rem;color:var(--text-2);line-height:2;">
                        <div>① 资质审核到位</div>
                        <div>② 信息明示到位</div>
                        <div>③ 内容审核到位</div>
                        <div>④ 风险防范到位</div>
                        <div>⑤ 处置管控到位</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══ CH13 VOC证据锚点 ═════════════════════════════════════════════════ -->
<section class="report-section" data-slide-num="13" data-tone="amber">
    <div class="section-inner">
        <div class="section-head">
            <div class="section-eyebrow">Chapter 13</div>
            <h2 class="text-h1">VOC 证据锚点</h2>
            <p class="section-sub">可直接引用的用户原声与高赞内容</p>
        </div>
        <div class="grid grid-2" style="margin-bottom:28px;">
            <div>
                <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--rose);margin-bottom:14px;font-weight:600;">🔥 最担心什么——高赞视频文案</div>
                ${HIGH_RISK_QUOTES.slice(0, 4).map(q => quoteCard(q)).join('')}
            </div>
            <div>
                <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--rose);margin-bottom:14px;font-weight:600;">🔥 高赞评论 VOC TOP10</div>
                ${HIGH_COMMENT_LIKES.map(v => voiceCard(v, v.hot)).join('')}
            </div>
        </div>
        <div class="card card-glow" style="border-left:3px solid var(--green);padding:28px 32px;">
            <div style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--green);margin-bottom:14px;font-weight:600;">💡 核心洞察</div>
            <div class="text-h2" style="margin-bottom:12px;">情绪价值的核心不是娱乐，而是"确定性"</div>
            <p class="text-body">快手在蓝领求职场景中的优势，来自内容触达、直播解释、即时互动和高频决策场景的天然匹配。需求高频、风险敏感、决策链短、转化诉求强。最强购买点不是抽象品牌心智，而是"工资真实、发薪稳定、包吃包住、当天入职、流程简单"。</p>
        </div>
    </div>
</section>

</main>
<footer>
    <div>快手快聘 · VOC 深度洞察报告</div>
    <div class="meta">数据来源：TikHub API 快手评论采集 | VOC 8,173条 | 视频380条 | 19个关键词 | 播放量9,455万</div>
    <div class="meta">数据截至：2026年4月 | 报告版本：v8 | 结合 v6内容丰富度 + v7组件优化</div>
</footer>
<script>
(function(){
    const slides=document.querySelectorAll('.report-section');
    const nav=document.getElementById('navRail');
    const now=document.getElementById('slideNow');
    const bar=document.getElementById('slideBar');
    const total=document.getElementById('slideTotal');
    const progress=document.getElementById('progressLine');
    const tips=['封面','执行摘要','数据方法','最担心什么','最看重什么','情绪价值','渠道原因','竞争格局','信任机制','机会建议','4P策略','优劣势','关键发现','VOC锚点'];
    let current=0;
    tips.forEach((t,i)=>{const d=document.createElement('div');d.className='nav-dot';d.setAttribute('data-tip',t);d.addEventListener('click',()=>slides[i]&&slides[i].scrollIntoView({behavior:'smooth'}));nav.appendChild(d);});
    const update=()=>{const idx=Math.round(window.scrollY/window.innerHeight);current=Math.max(0,Math.min(idx,slides.length-1));now.textContent=String(current+1).padStart(2,'0');bar.style.setProperty('--pct',((current+1)/slides.length*100)+'%');progress.style.width=((current+1)/slides.length*100)+'%';document.querySelectorAll('.nav-dot').forEach((d,i)=>{d.classList.toggle('active',i===current);});};
    window.addEventListener('scroll',update,{passive:true});
    document.addEventListener('keydown',e=>{if(e.key==='ArrowDown'||e.key==='PageDown'){e.preventDefault();slides[current+1]&&slides[current+1].scrollIntoView({behavior:'smooth'});}else if(e.key==='ArrowUp'||e.key==='PageUp'){e.preventDefault();slides[current-1]&&slides[current-1].scrollIntoView({behavior:'smooth'});}});
    document.querySelectorAll('.kbd-hint')[0]&&document.querySelectorAll('.kbd-hint')[0].classList.add('fade');
    total.textContent=String(slides.length).padStart(2,'0');
    update();
    document.documentElement.classList.add('js');
    const observer=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in-view');const fadeups=e.target.querySelectorAll('.fade-up');fadeups.forEach((el,i)=>setTimeout(()=>el.classList.add('is-visible'),i*100));}}});slides.forEach(s=>observer.observe(s));
})();
</script>
</body>
</html>`;

fs.writeFileSync(OUT_FILE, html, 'utf-8');
console.log('V8 HTML report generated:', OUT_FILE);
console.log('File size:', (fs.statSync(OUT_FILE).size / 1024).toFixed(1), 'KB');