feat: 移动端和平板端响应式适配

[joeytoday]

概述

为全站页面添加移动端（≤768px）和平板端（≤1024px）的响应式适配。修复了移动端无导航、内容溢出裁切、代码块复制按钮体验差等问题。

改动范围

文件	改动
_layouts/home.html	汉堡菜单 + 下拉面板、平板断点、hero 布局修复、safe area
_layouts/doc.html	侧边栏抽屉、minmax(0,1fr) 防 grid 溢出、复制按钮交互重做、内容适配
playbook/index.md	role-grid 新增 1024px 断点
bund-summit-2026/index.md	内联 grid 改为 class + media query、按钮触摸目标增大

关键修复

• 移动端导航：首页汉堡 → 下拉菜单；文档页汉堡 → 侧边栏抽屉（含遮罩、Escape 关闭、滚动锁定）
• Grid blowout：1fr → minmax(0, 1fr)，防止代码块/长 inline code 撑宽 grid 列导致内容裁切
• 水平溢出：overflow-x: hidden 兜底 + nav 内容精简（移动端 logo 缩短、CTA 移入菜单）
• 复制按钮：右上角定位，hover 淡入，触摸设备半透明常显
• 内容适配：inline code overflow-wrap: anywhere、表格 table-wrap 水平滚动、移动端图片/字号/padding 收紧

预览对比

before

modelstudio-mobile-before.mp4

after

modelstudio-mobile-after.mp4

测试

• Playwright 精确 viewport 截图验证：375 / 768 / 1024 / 1440 四个断点
• 覆盖首页、文档页、外滩大会专区、岗位能力样板共 10 个视图
• 桌面端无回归（导航、布局、复制按钮 hover 行为均正常）