/* ══ 内容页共用样式(2026-10-20:博客、用户协议、隐私政策换成新首页的风格;Kerry:"先把blog, 和用户协议 , 这些换了视觉风格")══
   来源 = 首页 index.html 的同名规则(颜色变量、品牌字 + Logo、顶栏、语言菜单、日夜按钮、页脚日间配色),值照搬,不另起一套。
   用法:<body class="pg2">;<head> 里先载 theme.js(定日夜,防闪),再载本文件。每页自己的正文排版留在页面里,只把颜色换成这里的变量。 */
html{--t:200ms}
body.pg2{--bg:#0C0C0D;--stage0:#232529;--stage1:#0C0C0D;--surf:#18181A;--surf2:#222225;--ink:#F2F2F2;--ink2:#C6C6C8;--ink3:#8E8E93;--line:#2A2A2D;--nav:#A8A8AA}
html[data-theme="light"] body.pg2{--bg:#F3F3F1;--stage0:#FFFFFF;--stage1:#E9E9E6;--surf:#FFFFFF;--surf2:#E9E9E6;--ink:#111111;--ink2:#1A1A1A;--ink3:#4B4B4B;--line:#DEDEDA;--nav:#4B4B4B}
/* 日间字加深一档(Kerry 10-20:"本来页面和字就很淡了 / 而且字我要再黑一点"):正文 #4B4B4B → #1A1A1A,说明 / 标签 #6F6F6F → #4B4B4B,标题仍是最黑的 #111;
   顶栏按钮(--nav)保持首页的颜色。只作用于博客和条款页,首页不变。
   夜间对应提亮一档(Vera 10-20:"#A8A8AA 偏灰,长文费眼"):正文 #A8A8AA → #C6C6C8,说明 / 标签 #7C7C80 → #8E8E93 */
/* 深色卡片(博客案例卡):日间也用夜间那套颜色,保住原来的照片色彩和白字 */
html[data-theme="light"] .pg2 .case.has-bg{--bg:#0C0C0D;--stage0:#232529;--stage1:#0C0C0D;--surf:#18181A;--surf2:#222225;--ink:#F2F2F2;--ink2:#C6C6C8;--ink3:#8E8E93;--line:#2A2A2D;--line2:#3A3A3A;color:var(--ink)}
html[lang="ja"]{--cjk:'Hiragino Sans','Yu Gothic','Noto Sans CJK JP'}
html[lang="ko"]{--cjk:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR'}
body.pg2{--sans:'Inter',var(--cjk,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC'),system-ui,sans-serif;
  background:var(--bg);color:var(--ink2);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  transition:background-color var(--t) ease,color var(--t) ease}
html[lang="ko"] body.pg2{word-break:keep-all;overflow-wrap:anywhere}
.pg2 :is(h1,h2,h3){text-wrap:balance}
.pg2 .tw-seg{display:inline-block;text-wrap:balance}   /* 带 <br> 的标题每段单独平衡(theme.js 分段) */   /* 标题平衡断行(2026-10-20 Hawk:ai-names 主标题末行只剩 "register";五页五语的标题都有末行落单),段落不动 */

/* ── 品牌字 + Logo(同首页:Newsreader 600 18px;Logo 夜里原色,日里同一形状的深色版)── */
.pg2 .brand{display:inline-flex;align-items:center;gap:9px;font-family:'Newsreader',serif;font-weight:600;font-size:18px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.pg2 .brand b{font-weight:600}
.pg2 .brand svg{display:block}
.lg-s0{stop-color:#FFFFFF}.lg-s1{stop-color:#F2F4F3}.lg-s2{stop-color:#D8DEDB}.lg-f0{stop-color:#AAB5B0}.lg-f1{stop-color:#E4E9E7}
html[data-theme="light"] .lg-s0{stop-color:#1A1A1A}html[data-theme="light"] .lg-s1{stop-color:#2A2C2B}html[data-theme="light"] .lg-s2{stop-color:#3E4441}
html[data-theme="light"] .lg-f0{stop-color:#7F8A85}html[data-theme="light"] .lg-f1{stop-color:#4E5653}

/* ── 顶栏(同首页:Logo 左,语言 + 日夜右;不固定,跟页面一起滚)── */
.pg2 .pnav{position:relative;z-index:50;max-width:1248px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr auto;align-items:center;height:88px}
.pg2 .pnav-r{justify-self:end;display:flex;align-items:center;gap:12px}
.pg2 a.back{display:inline-flex;align-items:center;height:44px;padding:0 6px;font-size:14px;color:var(--nav);text-decoration:none;border-radius:10px}
.pg2 a.back:hover{color:var(--ink)}
.pg2 a.back,.pg2 .langbtn{white-space:nowrap}

/* 日夜按钮:20px 图标、44px 点击区、悬停标签(同首页) */
.pg2 .th{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--nav);cursor:pointer;border-radius:10px;font:inherit}
.pg2 .th:hover{color:var(--ink)}
.pg2 .th svg{width:20px;height:20px}
.pg2 .th .sun{display:none}html[data-theme="dark"] .pg2 .th .sun{display:block}html[data-theme="dark"] .pg2 .th .moon{display:none}

/* 语言(同首页外观:地球 + 当前语言,点开五语菜单);沿用各页原有的 .langdd(条款页)/ .langsw(博客)+ .langbtn / .langmenu / .langopt 结构和脚本 */
.pg2 :is(.langdd,.langsw){position:relative}
.pg2 .langbtn{min-width:44px;justify-content:center;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 6px;border:0;background:none;font:inherit;font-size:14px;font-weight:400;color:var(--nav);cursor:pointer;border-radius:10px}   /* 2026-10-21 点击区至少 44:最窄手机只剩地球时原来只有 28 宽 */
.pg2 .langbtn:hover,.pg2 :is(.langdd,.langsw).open .langbtn{color:var(--ink)}
.pg2 .langbtn svg{width:20px;height:20px;color:currentColor;transition:none}   /* 2026-10-21 和日夜图标一样大(原 16px;Kerry:"语言icon又那么小,没一点规范") */
.pg2 :is(.langdd,.langsw).open .langbtn svg{transform:none}
.pg2 .langmenu{display:block;position:absolute;top:calc(100% + 6px);right:0;min-width:160px;padding:6px;border:0;border-radius:12px;background:var(--surf);box-shadow:0 0 0 1px var(--line),0 18px 40px -16px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.pg2 :is(.langdd,.langsw).open .langmenu{opacity:1;visibility:visible;transform:none}
.pg2 .langopt{display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 12px;border-radius:8px;font-size:14px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.pg2 .langopt:hover,.pg2 .langopt:focus-visible{background:var(--surf2);color:var(--ink);outline:none}
.pg2 .langopt.sel{color:var(--ink);font-weight:400}
.pg2 .langopt :is(.tick,.tk){width:14px;height:14px;opacity:0;color:var(--ink)}
.pg2 .langopt.sel :is(.tick,.tk){opacity:1}

/* ── 组件对齐首页(2026-10-20 Kerry:"最下面这个按钮做的要和首页一样";总指挥:凡首页有对应样式的一律用首页那套,没有的按首页的变量和比例)── */
/* 主按钮 = 首页 Start checking:React Bits Magnet + Specular Button(uni-specular.js / .css,theme.js 挂载),夜 = 原组件,日 = 黑底 + 白高光 + 外圈 2px;每页只有这一个实心按钮 */
.pg2 .hb-mag{position:relative;display:inline-block}
.pg2 .hb-mag-in{will-change:transform}
.pg2 .hb-spec{--sb-radius:18px;--sb-tint:#ffffff;--sb-tint-opacity:.04;--sb-text-color:#f5f5f5;--sb-line:#ffffff;--sb-base:#525252;font-family:'Inter',var(--cjk,'PingFang SC'),sans-serif;text-decoration:none}
html[data-theme="light"] .pg2 .hb-spec{--sb-tint:#111111;--sb-tint-opacity:1;--sb-text-color:#f5f5f5;--sb-line:#ffffff;--sb-base:#525252;box-shadow:0 0 0 2px #111111,0 10px 24px -14px rgba(0,0,0,.45)}
.pg2 .hb-spec svg{width:18px;height:18px}
.pg2 .fr-cta{margin:8px 0 28px}
/* 卡片 = 首页示意框:圆角 24、上亮下暗的底、不用描边 */
.pg2 :is(.beta,.stat,.namewall,.limits,.honest,.vs-cell){border:0;border-radius:24px;background:radial-gradient(120% 140% at 50% 0%,var(--stage0) 0%,var(--stage1) 72%)}
.pg2 .case{border:0;border-radius:24px}
.pg2 .inline-img{border:0;border-radius:24px}
.pg2 .honest .h-head .ic{border:0;border-radius:10px;background:var(--surf2)}
/* 统计大数字用墨色(Vera 10-20:红黄只给判定,TASTE「一种颜色一种含义」);判定用的标签 / 撞名划线仍用红黄绿 */
.pg2 :is(.statrow,.stats) .stat .num{color:var(--ink)}
/* 标签 / 徽章 = 首页名字行里的标签(.nr-tag / .nr-cls):圆角 6、12px、浅底、不加描边、不全大写 */
.pg2 .case .tag{gap:5px;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.pg2 .case .case-cat i{padding:2px 9px;border:0;border-radius:6px;background:var(--surf2);font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink)}
.pg2 .src-reg code{padding:2px 9px;border:0;border-radius:6px;background:var(--surf2);font-size:12px;color:var(--ink2)}
.pg2 .repeats .chip{padding:3px 10px;border:0;border-radius:6px;background:var(--surf2);font-size:12px;color:var(--ink)}
.pg2 .repeats .chip i{font-size:12px;color:var(--ink3)}
.pg2 .repeats .chip.gone{color:var(--ink3)}
/* 图标按钮(复制编号)= 首页 ⓘ:32px、圆角 8、无描边,图标 16px,悬停变深 */
.pg2 .copy-btn,.pg2 .case .copy-btn{width:32px;height:32px;margin:-6px 0;border:0;border-radius:8px;background:none;color:var(--ink3)}
.pg2 .copy-btn:hover,.pg2 .case .copy-btn:hover,.pg2 .case .copy-btn.ok{color:var(--ink)}
.pg2 .copy-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink3)}
.pg2 .copy-btn svg{width:16px;height:16px}
.pg2 .copy-btn svg{stroke-width:1.75}.pg2 .copy-btn svg *{vector-effect:non-scaling-stroke}   /* 2026-10-21 图标加粗(同 app):16px 上原来只有 1.33px,按屏上像素定 1.75px */
.pg2 .copy-btn{position:relative}
/* 眉标 = 首页 .eb:13px、字距 .06em、全大写、弱化色 */
.pg2 :is(.bhero .eyebrow:not(.shiny),.p8-eyebrow,.beta .tag){font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
/* 延伸阅读链接 = 首页博客卡的「阅读」链接:14px、弱化色 + 箭头,悬停变深、箭头右移 */
.pg2 .fr-list a{display:inline-flex;align-items:center;gap:7px;border:0;padding:0;font-size:14px;color:var(--ink2);transition:color .2s ease}
.pg2 .fr-list a::after{content:"";width:16px;height:16px;flex:none;background:currentColor;transition:transform .2s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.pg2 .fr-list a:hover{color:var(--ink)}
.pg2 .fr-list a:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.pg2 .fr-list a::after{transition:none}}

/* 正文配图(2026-10-20 Kerry 提供的照片):同首页照片 —— 圆角 24、无描边、保留原色;放在讲对应案例的小节标题下面,alt 空(Lex:带他人标志的图只用在讲该案例的地方) */
.pg2 .art-photo{margin:6px 0 30px;border-radius:24px;overflow:hidden;background:var(--surf2)}
.pg2 .art-photo img{display:block;width:100%;height:clamp(220px,38vw,400px);object-fit:cover}

/* ── 页脚:原样接 footer.js(不改);footer.js 只有深色配色,日间在这里只覆盖颜色(与首页同一组值)── */
.pg2 .uni-ft{line-height:normal}   /* 页脚不继承正文的大行高(条款页 1.9、博客 1.8),链接行距和首页一样(Vera 10-20) */
html[data-theme="light"] .uni-ft{background:color-mix(in srgb,var(--bg) 60%,transparent);border-top-color:#0000001a;color:#4B4B4B}
html[data-theme="light"] .uni-ft-logo,html[data-theme="light"] .uni-ft-logo b{color:#111111}
html[data-theme="light"] .uni-ft-logo svg{filter:invert(1)}
html[data-theme="light"] .uni-ft-tag,html[data-theme="light"] .uni-ft-disc,html[data-theme="light"] .uni-ft-copy{color:#4B4B4B}
html[data-theme="light"] .uni-ft-h{color:#111111}
html[data-theme="light"] .uni-ft-col a{color:#222222}
html[data-theme="light"] .uni-ft-col a:hover{color:#000000}
html[data-theme="light"] .uni-ft-bottom{border-top-color:#0000000f}
html[data-theme="light"] .uni-ft-pw{filter:invert(1)}
html[data-theme="light"] .uni-ft-pw.pw-live{opacity:.12}

@media(max-width:760px){
  .pg2 .pnav{grid-template-columns:auto 1fr;height:64px;padding:0 16px}
  .pg2 .pnav-r{justify-self:end;gap:4px}
}
@media(max-width:400px){.pg2 .pnav:has(.back) .langbtn span{display:none}}   /* 最窄的手机:返回链接 + 语言名 + 日夜放不下(中文「← 返回首页」「简体中文」最宽),有返回链接的页面(条款页)语言按钮只留地球图标,菜单里照样列五语 */