/* ============================================================
   【発音のコツ】详情页样式（v1.2 · TASK-DEV-028 由原型迁入 · TASK-DEV-030c 定稿）
   来源：vibe/prototype/v1.2/assets/pronounce_detail.css（视觉基线）
        + vibe/prototype/v1.2/preview/preview_ext.css（DEV-029 五轮逐页确认定稿的新控件）
   规格依据：vibe/design/v1.2/04_detail-style-spec.md（唯一实现依据·§11 是本次并入的部分）
   依赖生产 theme.css 的 token 与组件。作用域统一在 .pdetail 下。

   ★版式基准 = 基础知识详情页（css/concept_detail.css）：
     宽度 / 段落与标题间距 / 红圈标题 / 例文容器 / 表格 / 译文 一律照抄其规格，
     下方凡标注「同 concept」的数值均逐条对齐，不要自行微调。
   ★注意：不要在注释里写「星号 + 斜杠」的字符序列（会提前闭合注释并吞掉下一条规则，
     concept_detail.css 就因此让 .cdetail 的 max-width 静默失效至今，见 TASK-FIX-001）。
   ★改本文件必须同步 bump 全部引用壳的 ?v= 缓存号（正则归一 + 双向计数校验）。

   ★卡片宽度：基准 --wtag-w（桌面 146 / 手机 128），实宽由 render.php 按卡宽算法算好，
     以行内自定义属性 --w / --wm 传进来（不是行内 width，见下方 .wtag 注释）。

   缓存号沿革：
     20260804b  DEV-030 逐页确认第 2 轮：纯文字例 .extxt 内的 .txr 改 white-space:inherit
                （原 normal 会压掉 pre-wrap ⇒ 连续半角空格被折叠成一个，毁掉原稿的列对齐）
     20260804a  DEV-030 逐页确认第 1 轮：删掉 App 引流块（本页不放·同基础知识详情页）／
                対比组虚线框手机内边距 12→6px + 组间距 16→10px（一行两组）
     20260803c  DEV-030e：App 引流块 .app-promo（仅 web·断点 560）
     20260803b  DEV-030c 第 3 轮（用户改稿）：`<v ラベル>` 箱＝不换行 + 横向滚动（.hs / .hswrap）／
                単語カード里的括号补充字号小一档
     20260727a  DEV-028 迁入·首版（彼时尚无任何壳引用本文件）
     20260803a  DEV-030c 第 2 轮（用户第 1 轮验收）：例词卡宽改自定义属性 + 手机最小宽 128px／
                r4 横线位置对齐 r3（1.15 / 4px）／表格下外边距 13→16px + 滚动条改轻
     20260802a  DEV-030c 定稿：并入 DEV-029 预览期的全部新控件
                （四级标题 / 例句条 / 表格横向滚动 / 例词网格改 flex / イントネーション图 /
                 符号主色 / 标题上方留白 / 注意段行距 / 说明文字字体 / 上下章间距）
   ============================================================ */

/* ── 内容容器：宽度＝ .layout>main 内宽（同 concept 实际表现·不设 max-width） ── */
.pdetail{color:var(--ink);}
.pdetail .pd-title{font-family:var(--font-ja-display);font-weight:var(--fw-black);font-size:var(--fs-display-xl);
  line-height:1.24;color:var(--ink);text-align:center;margin:24px 0 32px;}   /* 同 concept .cd-title */

/* ============================================================
   标题三级
   ★块间留白＝「标题上方 1 个 <br>（由 render.php 输出）」+ 这里的 margin-top，
     逐级递减 ## 24px ／ ### 8px ／ #### 26px（#### 无 br）。
     只靠 margin 会与上方 .content_sample 的 margin-bottom 折叠致间距缩水，故 br 不能省。
   ============================================================ */
/* 章节标题（## ）= 红圈 + 「数字.标题」纯文本
   圆圈规格逐字节同 concept .text_title_l::before（--pin-size 18px·内嵌高光·投影） */
.pdetail .text_title_l{display:flex;align-items:center;gap:11px;margin:24px 0 12px;
  font-family:var(--font-ja-display);font-weight:var(--fw-black);font-size:1.2rem;color:var(--ink);line-height:1.3;}
.pdetail .text_title_l::before{content:"";box-sizing:border-box;flex:none;
  width:var(--pin-size);height:var(--pin-size);border-radius:50%;background:var(--brand);
  border:2.5px solid var(--ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.22),1px 2px 2px rgba(0,0,0,.3);}
.pdetail .pd-sec:first-child > .text_title_l{margin-top:6px;}   /* 首个章节紧跟内容导航告示牌 */
.pdetail .pd-sec{scroll-margin-top:118px;}      /* sticky 标题栏+导航栏让位（锚点跳转不被遮） */

/* 子标题（### ）= 黑底白字药丸（同 concept .ttm-sub） */
.pdetail .ttm-sub{display:inline-block;font-family:var(--font-ja);font-weight:800;font-size:.96rem;
  line-height:1.2;color:#fff;background:var(--ink);border-radius:8px;padding:4px 13px;margin:8px 0 8px;}

/* 四级标题（#### ）：比 ### 再低一级 —— 纯文字，无药丸、无左侧红竖线。
   ★字号与正文 .ptx 相同（1rem）：比正文小会被读成注释而不是标题（用户 2026-08-02）；
     与正文的区分靠字重 800 + 上下留白，不靠字号。标题里的 ❶ ① + 由 render.php 上主色。 */
.pdetail .ttm-sub4{display:block;font-family:var(--font-ja);font-weight:800;font-size:1rem;
  line-height:1.35;color:var(--ink);margin:22px 0 8px;}

/* ── 正文 / 译文（同 concept .text_info / .text_info_translate） ── */
.pdetail .ptx{font-family:var(--font-ja);font-size:1rem;font-weight:600;line-height:1.7;
  color:var(--ink);margin:0 0 .5em;}
.pdetail .content_translate{margin:.1em 0 .55em;}
.pdetail .tr{font-family:var(--font-body);font-size:.82rem;font-weight:400;line-height:1.58;
  color:var(--text-soft);margin:0;}

/* ── 行内标记（同 concept .text_info_mark / _warnning / _comment） ── */
.pdetail .hl-r{color:var(--brand);font-weight:700;}
.pdetail .hl-y{background:linear-gradient(transparent 8%,#ffe98a 8% 92%,transparent 92%);
  padding:0 2px;border-radius:2px;font-weight:inherit;}
.pdetail .cmt{color:var(--text-mute);font-weight:600;font-style:normal;}
.pdetail .winl{color:var(--brand);font-weight:700;}
.pdetail .pimg{display:block;max-width:100%;margin:10px 0;}
/* 符号统一主色：+ ＋ = ＝ → ⇒ / ／ ・ ❶❷❸ ①②③ 等（render.php 的 sym 节点） */
.pdetail .sym{font-family:var(--font-system);font-style:normal;font-weight:800;color:var(--brand);}

/* 注意事项（!!）：不套容器·与正文同款，只在最前面加一个圆形注意符号。
   ★上边距（1.9em ≈ 30px）要大于正文自身的换行间距（1 行 ≈ 27px），否则紧跟正文时会糊在一起。 */
.pdetail .ptx .nt{width:19px;height:19px;margin-right:8px;vertical-align:-.24em;}
.pdetail .ptx.nt-p{line-height:1.9;margin:1.9em 0 1em;}

/* ============================================================
   内容导航（このページの内容）= 语法详情页「接続」告示牌（.sb-wrap/.signboard）
   整体居中·红底标题栏居中带铆钉·每行两项
   ============================================================ */
.pdetail .sb-wrap{text-align:center;margin:32px 0 14px;}   /* 同语法详情页 .gd .sb-wrap */
.pdetail .signboard{position:relative;display:inline-block;min-width:33%;max-width:100%;
  box-sizing:border-box;background:#fff;border:var(--bd-strong) solid var(--ink);
  border-radius:14px 14px 10px 10px;box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;}
.pdetail .signboard .sb-head{position:relative;background:var(--brand);color:#fff;text-align:center;
  font-family:var(--font-body);font-weight:900;font-size:1.3rem;letter-spacing:.04em;
  padding:7px 47px;border-bottom:var(--bd-strong) solid var(--ink);}
.pdetail .signboard .sb-head .rivet{position:absolute;top:50%;transform:translateY(-50%);
  width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:#fff;
  border:1.5px solid var(--ink);box-shadow:inset -1.5px -1.5px 0 rgba(0,0,0,.25);}
.pdetail .signboard .sb-head .rivet.l{left:12px;}
.pdetail .signboard .sb-head .rivet.r{right:12px;}
.pdetail .signboard .sb-body{padding:22px 34px;}
/* 目次项：两列·红小圈同 .pat::before
   ★ **列优先**（用户 2026-08-09）：1,4 / 2,5 / 3 —— 不是行优先的 1,2 / 3,4 / 5。
     靠 grid-auto-flow:column + 显式行数实现；行数只有渲染器知道（ceil(项数/2)），
     由它写成行内自定义属性 --toc-rows。项数为奇数时第 1 列自然多一个，正是要的效果。 */
.pdetail .pv-toc .sb-body{display:grid;grid-template-columns:1fr 1fr;gap:13px 40px;
  grid-auto-flow:column;grid-template-rows:repeat(var(--toc-rows,1),auto);}
/* `{…}`＝淡色显示的活用词尾（用户 2026-08-09）：括号不输出，只把括号内的拍调淡，
   让「词干 / 词尾」在活用表里一眼分得开。r0~r4 五套表記法都走同一个 .dm。
   ★ 色值＝ --text-mute（同 `(…)` 补充说明的 .cmt）。**不要用 --text-soft** —— 用户 2026-08-09 实测
     反馈「与非 {} 部分区分很不明显」，--text-soft(#5b5560) 距正文 #1a1820 太近。
   ⚠️ 用 color 而不是 opacity —— r3/r4 的横线/竖线是 .mo 的 border，opacity 会把线一起调淡。 */
.pdetail .acc .dm{color:var(--text-mute);}
.pdetail .pv-toc .pat{position:relative;display:block;padding-left:22px;color:var(--ink);
  transition:transform .12s;}
.pdetail .pv-toc .pat::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;
  box-sizing:border-box;border-radius:50%;background:var(--brand);border:1.5px solid var(--ink);}
.pdetail .pv-toc .pat b{display:block;font-family:var(--font-ja);font-size:1.06rem;font-weight:800;
  line-height:1.35;}
.pdetail .pv-toc .pat em{display:block;font-family:var(--font-body);font-style:normal;font-weight:400;
  font-size:.7rem;color:var(--text-soft);line-height:1.3;margin-top:1px;}
.pdetail .pv-toc .pat:active b{color:var(--brand);}
@media(hover:hover) and (pointer:fine){
  .pdetail .pv-toc .pat:hover{transform:translateX(3px);}
  .pdetail .pv-toc .pat:hover b{color:var(--brand);}
}

/* ============================================================
   例 / 練習 箱 = concept .content_sample（白底黑框 + 左 12px 红条）
   練習 与 例 同色（验收意见 10）
   ============================================================ */
.pdetail{--wtag-w:146px;}   /* 単語カード基准宽（＝汉字详情页 .t 线上实测 146.5px） */
/* 右内边距由 concept 的 22px 收到 10.5px：加上 2.5px 描边正好 13px，
   与左侧「红条(12+2.5)之后到内容」的 13px 相等（以左边距为准）。 */
.pdetail .content_sample{position:relative;background:#fff;border:var(--bd) solid var(--ink);
  border-radius:var(--r-md);box-shadow:var(--shadow);margin:13px 0;overflow:hidden;
  padding:13px 10.5px 14px 28px;}
.pdetail .content_sample::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;
  background:var(--brand);border-right:2.5px solid var(--ink);}
.pdetail .text_title_s{display:inline-block;font-family:var(--font-ja);font-weight:800;font-size:.7rem;
  line-height:1;color:var(--ink);background:var(--paper);border:2px solid var(--ink);
  border-radius:6px;padding:3px 6px;margin:8px 0 2px;}
.pdetail .content_sample .text_title_s:first-child{margin-top:0;}
/* 相邻箱并进同一容器时（JSON 的 cont），第 2 个药丸要与上一段拉开一个空行的距离，
   否则紧贴上一段内容（用户 2026-08-07 反馈 p304 的 <鼻濁音> 太靠上）。 */
.pdetail .content_sample .text_title_s:not(:first-child){margin-top:26px;}

/* 例词网格：**flex 换行**（不是 grid），间距一律相同，5 张最小宽卡（146px）刚好一行 ——
   146×5 + 26×4 = 834 ≤ 内容宽 1000.5；再加一张 = 1006 > 1000.5 故自动换行。
   卡片变宽时按实际宽度排（可能一行 4 张），间距保持不变、优先左对齐。
   ★行距一律走 row-gap，**绝不用逐行的 margin-bottom** —— flex 换行布局里一行的高度 =
     该行内各 item「外边距盒」的最大值，于是「最后一行里除末个之外」的 margin-bottom 会顶出
     容器底部的额外留白（1 行 1 张卡 17px vs 1 行 5 张 37px，看起来就是各容器下边距不一致）。
     验收口径：全 13 页每个 .content_sample 的上/下内边距 = 54 / 17px。 */
.pdetail .exrows{display:flex;flex-wrap:wrap;gap:20px 26px;align-items:flex-start;
  justify-content:flex-start;margin-top:10px;}
.pdetail .exrow{display:flex;flex-direction:column;align-items:center;gap:6px;}
/* 容器内「単語カード上方的说明文字」：字体必须与正文 .ptx 完全一致，
   不写会继承 body 的 --font-body，罗马字与 IPA 看起来跟正文不是一套字。 */
.pdetail .exrow .acch{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px 10px;
  font-family:var(--font-ja);font-size:1rem;font-weight:600;line-height:1.7;}
/* 连排行内文字合并成的一块（render.php 的 pron_nodes）：整块参与 flex 布局，内部空格照常保留。
   `normal` 是为了让它在 .acch（flex-wrap）里能正常折行。 */
.pdetail .txr{white-space:normal;}
/* ⚠️ 但纯文字例 .extxt 是 white-space:pre-wrap，原稿靠**连续半角空格**做列对齐 —— 上面这条
   会把继承来的 pre-wrap 压掉，于是**连续半角空格被折叠成一个**（U+3000 全角空格不属于 CSS
   可折叠空白，反而侥幸留下来，两种空格表现不一致，排查时极具迷惑性）。这里改回 inherit。
   用户 2026-08-04·p100【英語】的 record 两行。 */
.pdetail .extxt .txr{white-space:inherit;}
/* 说明文字比 2 张単語カード还宽（318px）→ 独占一行并左对齐（p304【発音】的 IPA 行） */
.pdetail .exrow.wideh{flex:0 0 100%;width:100%;align-items:flex-start;}
/* 说明文字比単語カード还宽（但没宽到独占整行）→ 卡片与文字**左对齐**，不要居中：
   「居中」只在「重音标注 ↔ 単語カード」之间才有意义（04 §5.4）；上方是一整句说明时，
   把窄卡片吊在长句正中间看着是飘的（用户 2026-08-07 反馈 p304【発音の仕方】）。 */
.pdetail .exrow.lft{align-items:flex-start;}
.pdetail .exrow.lft .acch{justify-content:flex-start;text-align:left;}
.pdetail .exrow.wideh .acch{justify-content:flex-start;text-align:left;}
/* 算式行（複合語 A+B=C）：按内容宽度排、放不下才换行、优先左对齐。
   単語カード只与「=」「→」之后的最后一个读音模块成对居中。 */
.pdetail .exrow.wide{flex:0 1 auto;max-width:100%;align-items:flex-start;}
.pdetail .exrow.wide .fx{display:flex;align-items:flex-start;flex-wrap:wrap;gap:3px 10px;}
.pdetail .exrow.wide .pair{display:flex;flex-direction:column;align-items:center;gap:6px;}
/* 例句行（<s-N>）：占满整行，行内附带的文字与例句框左对齐 */
.pdetail .exrow.full{flex:0 0 100%;width:100%;align-items:stretch;}
.pdetail .exrow.full .acch{justify-content:flex-start;padding-left:2px;}
/* 纯文字例：源文件里的每一行各占一行（改 flex 之后 grid-column 失效，必须显式占满整行） */
.pdetail .extxt{flex:0 0 100%;width:100%;text-align:left;font-family:var(--font-ja);font-size:1rem;
  font-weight:600;line-height:1.7;white-space:pre-wrap;}
/* 连排的纯文字行要紧凑：用负的 margin-top 把行距收回来（不能改 row-gap，那会一起影响卡片行）。
   负 margin-top 只作用于「后一行」，不会波及容器上下边距。 */
.pdetail .exrows:not(.txt) > .extxt + .extxt{margin-top:-17px;}
/* 纯文字例（中国語 / 英語 对照那种）：无卡片，用紧凑行距。
   margin-top 必须与 .exrows 一致（写 6px 会让纯文字例箱的上内边距少 4px）。 */
.pdetail .exrows.txt{gap:3px 20px;margin-top:10px;}

/* ============================================================
   `<v ラベル>` 的箱（JSON scroll=true）：**原稿里没换行的地方一律不换行**，
   放不下就整箱横向滚动（同表格·用户 2026-08-03）。手机上算式行与イントネーション图
   被迫折行太难看，故给这类箱开横向滚动。
   ★ 滚动做在内层 .hswrap 上，不做在 .content_sample 上 —— 左侧红条是相对箱定位的绝对元素，
     箱一旦变成滚动容器，红条会跟着内容一起滚走。
   ★ 内容用 width:max-content + min-width:100%：内容窄时正常左对齐、宽时才撑出滚动条。
   ============================================================ */
.pdetail .hswrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.42) rgba(0,0,0,.06);overscroll-behavior-x:contain;
  /* ★ 内边距 + 等量负外边距：把「箱内控件 hover 浮起」的位移与硬投影放出来，箱的视觉位置不变。
       滚动容器会裁掉超出内容盒的部分 —— 实测 .stag 在这里 hover 时**下、右各被裁 3px**
       （--shadow 是 3px 3px；overflow-y:hidden 裁上下，overflow-x:auto 裁左右），
       表现为投影缺一角（用户 2026-08-08 反馈 p302【2.単語のアクセントと「山」】的 4 个例句）。
       同「表格滚动条那次」的修法：给滚动容器补 padding 把被裁掉的硬投影放出来。 */
  padding:2px 3px 3px 2px;margin:-2px -3px -3px -2px;}
.pdetail .hswrap::-webkit-scrollbar{height:8px;}
.pdetail .hswrap::-webkit-scrollbar-track{background:rgba(0,0,0,.06);}
.pdetail .hswrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.42);border-radius:4px;
  border:2px solid transparent;background-clip:padding-box;}
.pdetail .hswrap > .exrows,.pdetail .hswrap > .intofig{width:-webkit-max-content;width:max-content;
  min-width:100%;}
/* 一行原稿 = 一行显示：主轴改纵向、绝不换行 */
.pdetail .hswrap > .exrows{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:20px 0;}
/* ★ 纵向 flex 里 flex-basis 作用于**高度**，故必须把行的 flex:0 0 100% 之类清掉，改用 width */
.pdetail .hswrap > .exrows > *{flex:0 0 auto;width:auto;max-width:none;}
.pdetail .hswrap .exrow.full,.pdetail .hswrap .exrow.wideh{width:100%;}
.pdetail .hswrap .acch,.pdetail .hswrap .exrow.wide .fx{flex-wrap:nowrap;}
.pdetail .hswrap .extxt{white-space:pre;}
.pdetail .hswrap > .exrows:not(.txt) > .extxt + .extxt{margin-top:0;}

/* 練習：空行分出的每组＝一个虚线框（组内是互相对比的词） */
.pdetail .pgrid{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:flex-start;margin-top:10px;}
.pdetail .pgrp{display:grid;gap:16px;justify-items:start;padding:12px;
  border:2px dashed var(--ink);border-radius:12px;
  /* 收缩到内容宽 → 左右内边距等宽（否则框被拉满列宽，右侧会多出一截空白） */
  width:-webkit-fit-content;width:fit-content;max-width:100%;}

/* ============================================================
   単語カード = 汉字详情页 .wordchars .t 的等宽复刻（实测线上 146.5px）
   ★宽度由 render.php 按卡宽算法算好、写成行内自定义属性 --w（桌面·基准 146）与
     --wm（手机·基准 128）。**不要写成行内 width**——行内 width 会压过手机的媒体查询，
     手机上就没法把最小宽调小到能并排两张（用户 2026-08-03）。
   ============================================================ */
.pdetail .wtag{width:var(--w,var(--wtag-w));display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:1px;
  padding:6px 9px 7px;background:#fff;border:2.5px solid var(--ink);border-left:4px solid var(--brand);
  border-radius:9px;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:transform .12s,box-shadow .12s;}
.pdetail .wtag .k{grid-column:1;grid-row:1;font-family:var(--font-ja);font-weight:800;font-size:.7rem;
  color:var(--brand);line-height:1.2;align-self:center;}
.pdetail .wtag .s{grid-column:2;grid-row:1;width:22px;height:22px;color:var(--ink);
  justify-self:end;align-self:center;display:inline-block;line-height:0;}
.pdetail .wtag .s svg{display:block;}
.pdetail .wtag .w{grid-column:1;grid-row:2;font-family:var(--font-ja);font-weight:700;font-size:1.04rem;
  line-height:1.2;color:var(--ink);white-space:nowrap;align-self:end;}
/* 表記里的括号补充（`愛する(活用)`）字号小一档（用户 2026-08-03·翻译时也可忽略括号内容） */
.pdetail .wtag .w .cmt{font-size:.85em;font-weight:inherit;}
.pdetail .wtag .m{grid-column:2;grid-row:2;font-family:var(--font-body);font-size:.6rem;
  color:var(--text-soft);text-align:right;line-height:1.25;align-self:end;}
.pdetail .wtag.playing{transform:translate(-2px,-2px);box-shadow:var(--shadow);}
@media(hover:hover) and (pointer:fine){.pdetail .wtag:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow);}}
.pdetail .wtag .s .wv{opacity:.9;}
.pdetail .wtag.playing .s .wv1{animation:spkWave .9s ease-in-out infinite;}
.pdetail .wtag.playing .s .wv2{animation:spkWave .9s ease-in-out infinite .22s;}
@media(prefers-reduced-motion:reduce){.pdetail .wtag.playing .s .wv1,.pdetail .wtag.playing .s .wv2{animation:none;}}

/* ============================================================
   例句条 <s-N> = 単語カード的容器（描边 + 左红条）+ 文法详情页例句的内容
   ★内容部分（注音 / 译文 / 播放按钮）逐条照抄 css/grammar_detail.css 的 .gdetail .ex；
     容器**默认不出投影**，hover / 播放中才浮起，且用 --shadow（3px）不是 --shadow-lg（6px）。
   ============================================================ */
.pdetail .stag{position:relative;display:flex;width:100%;
  padding:13px 46px 13px 22px;background:#fff;border:2.5px solid var(--ink);
  border-left:4px solid var(--brand);border-radius:9px;cursor:pointer;overflow:hidden;
  -webkit-user-select:none;user-select:none;transition:transform .14s,box-shadow .14s;}
.pdetail .stag .ex-main{flex:1;min-width:0;font-family:var(--font-ja);font-size:1rem;font-weight:600;
  line-height:1.9;color:var(--ink);}    /* line-height 1.9：为 ruby 预留上方空间，防与上一行重叠 */
.pdetail .stag .ex-main ruby{ruby-align:center;line-height:1.25;}   /* 注音与正文的间距靠这条控制 */
.pdetail .stag .ex-main rt{font-family:var(--font-ja);font-size:.6em;font-weight:500;line-height:1;
  letter-spacing:.02em;color:var(--text-mute);-webkit-text-fill-color:currentColor;}
.pdetail .stag .ex-main .hl{color:var(--brand);}
.pdetail .stag .ex-main .hl rt{color:var(--brand);}
.pdetail .stag .ex-main .tr{display:block;font-family:var(--font-body);font-size:.82rem;
  font-weight:400;color:var(--text-soft);margin-top:4px;line-height:1.55;}
/* 对话例（p302【4.発話の意図】）：日文与译文**逐句配对**——每句日文下面紧跟这句的译文，
   而不是整段日文 + 整段译文（用户 2026-08-08：整段的话对不上话轮，看着费劲）。
   渲染器 pron_stag() 在「日文多行 且 译文行数相同」时输出 .ln/.tr 交替。 */
.pdetail .stag .ex-main .ln{display:block;}
.pdetail .stag .ex-main .tr + .ln{margin-top:9px;}
@supports (font:-apple-system-body){        /* Safari 的 ruby 偏远，微量下移把注音拉近（同文法页） */
  .pdetail .stag .ex-main rt{transform:translateY(0.25em);}
}
/* 播放按钮：位置与尺寸完全同文法详情页（theme.css 的 .btn-audio → svg 30×30） */
.pdetail .stag .btn-audio{position:absolute;top:7px;right:9px;color:var(--ink);}
.pdetail .stag.playing{transform:translate(-2px,-2px);box-shadow:var(--shadow);}
@media(hover:hover) and (pointer:fine){.pdetail .stag:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow);}}
.pdetail .stag.playing .btn-audio .wv1{animation:spkWave .9s ease-in-out infinite;}
.pdetail .stag.playing .btn-audio .wv2{animation:spkWave .9s ease-in-out infinite .22s;}
@media(prefers-reduced-motion:reduce){.pdetail .stag.playing .btn-audio .wv1,.pdetail .stag.playing .btn-audio .wv2{animation:none;}}

/* 例句行里的（型）注记与算式运算符 */
.pdetail .exrow .ty{font-family:var(--font-body);font-style:normal;font-size:.68rem;
  color:var(--text-mute);font-weight:700;}
.pdetail .exrow .op{font-family:var(--font-system);font-style:normal;font-weight:800;
  font-size:1rem;color:var(--brand);}

/* ============================================================
   重音标注（本模块核心控件·5 套表記法）
   .accset > .accv.rN > .acc > .mo   三层：切换层 / 表記法层 / 内容层

   ★生产与原型的唯一差异：原型靠页顶切换条在 body 上切换；
     生产没有用户开关，改由 common/pronounce/config.php 的 $PRONOUNCE_ACCENT_STYLE
     渲染成 .pdetail 上的 data-rs（内容片段自己输出的容器，web/app 两形态通用）。
     render.php 只渲染当前生效的那一套并标 data-fixed，下面的 data-rs 规则是备用开关。
   ★複合語（`スキャ8ナー・スキャナー`）必须单行，不要在「・」处折行 → accset 用 nowrap。
   ============================================================ */
.pdetail .accset{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;}
.pdetail .accset:not([data-fixed]) > .accv{display:none;}
.pdetail[data-rs="0"] .accset:not([data-fixed]) > .accv.r0,
.pdetail[data-rs="1"] .accset:not([data-fixed]) > .accv.r1,
.pdetail[data-rs="2"] .accset:not([data-fixed]) > .accv.r2,
.pdetail[data-rs="3"] .accset:not([data-fixed]) > .accv.r3,
.pdetail[data-rs="4"] .accset:not([data-fixed]) > .accv.r4{display:inline;}

.pdetail .acc{font-family:var(--font-ja);font-weight:700;font-size:1.1rem;color:var(--ink);
  letter-spacing:.01em;white-space:nowrap;}
.pdetail .acc .mk{font-style:normal;font-weight:800;color:var(--brand);}
.pdetail .asep{font-style:normal;font-weight:800;color:var(--brand);margin:0 1px;}   /* 複合語分隔的「・」 */

/* r0 / r1 / r2：纯文本行内 */
.pdetail .accv.r0 .acc,.pdetail .accv.r1 .acc,.pdetail .accv.r2 .acc{display:inline;}

/* r1 NHK：下降标记用「画」的（反斜杠字形太细）。笔画高度与假名齐、略细
   ★rotate 用负角：CSS 正角是顺时针，竖线转正角会变成斜杠方向 */
.pdetail .accv.r1 .nhk{display:inline-block;position:relative;width:11px;height:1em;
  vertical-align:-.12em;margin:0 2px;}
.pdetail .accv.r1 .nhk::before{content:"";box-sizing:border-box;position:absolute;left:50%;top:0;bottom:0;
  width:2.5px;margin-left:-1.25px;background:var(--brand);border-radius:2px;transform:rotate(-17deg);}

/* r2 数字：圆圈数字略放大·不加粗（加粗后反而糊） */
.pdetail .accv.r2 .acc .mk{font-family:var(--font-system);font-size:1.08em;font-weight:400;
  vertical-align:-.06em;letter-spacing:0;}

/* r3 鉤表記（表記法B）：高音拍上方横线 + 核右侧向下短竖钩。横线离假名 4px */
.pdetail .accv.r3 .acc{display:inline-flex;align-items:flex-end;padding-top:8px;line-height:1.15;}
.pdetail .accv.r3 .mo{position:relative;display:inline-block;}
.pdetail .accv.r3 .mo.hi::before{content:"";box-sizing:border-box;position:absolute;
  left:-.5px;right:-.5px;top:-4px;height:2.5px;background:var(--brand);border-radius:1px;}
.pdetail .accv.r3 .mo.kn::after{content:"";box-sizing:border-box;position:absolute;
  right:-1.25px;top:-4px;height:8px;width:2.5px;background:var(--brand);border-radius:1px;}

/* r4 凹凸（表記法A·默认）：高音拍横线在假名【上方】、低音拍横线在假名【下方】，
   异高处用竖线连接上下两条。
   ★横线与假名的距离与 r3 **完全一致**（用户 2026-08-03）：r3 是 line-height 1.15 + top:-4px，
     r4 原为 1.2 + 5px（半行距 1.76 + 5 = 6.76px，比 r3 的 1.32 + 4 = 5.32px 远）→ 一并对齐成 1.15 / 4px。 */
.pdetail .accv.r4 .acc{display:inline-flex;align-items:center;padding:8px 0 7px;line-height:1.15;}
.pdetail .accv.r4 .mo{position:relative;display:inline-block;}
.pdetail .accv.r4 .mo.hi::before,.pdetail .accv.r4 .mo.lo::before{content:"";box-sizing:border-box;
  position:absolute;left:-.5px;right:-.5px;height:2.5px;background:var(--brand);border-radius:1px;}
.pdetail .accv.r4 .mo.hi::before{top:-4px;}
.pdetail .accv.r4 .mo.lo::before{bottom:-4px;}
.pdetail .accv.r4 .mo.vr::after{content:"";box-sizing:border-box;position:absolute;
  left:-1.25px;top:-4px;bottom:-4px;width:2.5px;background:var(--brand);border-radius:1px;}
/* 尾高型收尾：宽 0 的空拍 → 只在末拍右边界画一道竖线，下方不接横线。
   ★该 span 内必须含零宽空格 → 行高与其它拍一致，竖线才能接上横线且高度与拍间竖线相同 */
.pdetail .accv.r4 .mo.tl{width:0;overflow:visible;}

/* ============================================================
   表格 = concept .kg-block / .kgtab（红底白字表头 + 黑框圆角硬投影）·居左
   列数由 render.php 写成行内 grid-template-columns:repeat(N,max-content)

   ★横向滚动做在 .kgtab（带黑框圆角硬投影的盒子）自己身上 ⇒ ① 外框永远不超出正文宽、
     连投影一起完整可见；② 滚动条落在框内底部、表格自动长高一点容纳它。
     不要再套一层滚动容器（会把投影裁掉）。
   ★列宽必须是 max-content（不能用 auto）：auto 会被压扁去凑容器宽，
     永远不会溢出、也就永远不出滚动条（p103【3拍以上の語 + する】的 7 列表）。
   ★滚动条要显式画出来（macOS 默认自动隐藏，不画用户看不出能滚）。
   ============================================================ */
/* ★下外边距 13 → 16px（用户 2026-08-03）：硬投影 var(--shadow) 向下探出 3px，
   13px 的下边距**看上去**只有 10px，与上方的 16px 不等；出现滚动条时下缘视觉更重、更显挤。
   实测：无论是否出现滚动条，与下方容器的实际间距都是同一个值（13px），并非计算错误。 */
.pdetail .kg-block{display:block;width:-webkit-fit-content;width:fit-content;max-width:100%;
  margin:16px 0 16px;}
.pdetail .kgtab{display:grid;grid-template-columns:repeat(2,1fr);
  width:-webkit-fit-content;width:fit-content;max-width:100%;font-family:var(--font-ja);
  border:var(--bd) solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.42) rgba(0,0,0,.06);overscroll-behavior-x:contain;}
/* 滚动条：看得出能滚就够，别太重 —— 原来是 9px 纯墨色实心条，紧贴在下边框上方，
   与黑框 + 硬投影连成一片，视觉上把表格下方的留白吃掉了（用户 2026-08-03）。 */
.pdetail .kgtab::-webkit-scrollbar{height:8px;}
.pdetail .kgtab::-webkit-scrollbar-track{background:rgba(0,0,0,.06);}
.pdetail .kgtab::-webkit-scrollbar-thumb{background:rgba(0,0,0,.42);border-radius:4px;
  border:2px solid transparent;background-clip:padding-box;}
/* 含重音标注的活用表：拍上下的横线需要额外行高，否则挤在一起。
   单元格里连排的文字由 render.php 包成 .txr 一块（.kgtab > div 是 flex 容器，
   直接放多段会把段间空格吃掉 —— `せんせい → せんせー` 的箭头前空格就是这么没的）。 */
.pdetail .kgtab > div{padding:7px 22px;text-align:center;font-weight:700;font-size:1rem;
  white-space:normal;display:flex;align-items:center;justify-content:center;}
.pdetail .kgtab .kgh{background:var(--brand);color:#fff;font-weight:800;padding:6px 22px;
  border-bottom:var(--bd) solid var(--ink);}
.pdetail .kgtab .kgh + .kgh{border-left:1px solid rgba(255,255,255,.35);}
.pdetail .kgtab .kc1,.pdetail .kgtab .kc2{background:#fff;color:var(--ink);
  border-left:1px solid var(--hair);border-top:1px solid var(--hair);}
.pdetail .kgtab .kc1.alt,.pdetail .kgtab .kc2.alt{background:var(--paper-note);}

/* ============================================================
   イントネーション图（3-2）：假名行 + 小さい山 + 大きい山
   不贴位图，按 <r> 的重音数据算曲线（render.php）。CSS Grid 让每个「意味のまとまり」
   占一列（宽度 = 该组假名的实际宽度），曲线 SVG 在列内横向拉伸
   ⇒ 曲线长度自动与上方假名对齐，换字体/换语言也不会错位。
   ★まとまり之间的间隔做在假名格的内边距上，**曲线格之间必须零间隙**，
     否则「大きい山」在列边界处会断开（它是靠各段首尾 y 相同拼成一条线的）。
   ============================================================ */
.pdetail .intofig{display:grid;grid-template-columns:max-content repeat(var(--ifn),max-content);
  justify-content:start;align-items:center;row-gap:7px;column-gap:0;margin:10px 0 0;}
.pdetail .intofig .if-lab{font-family:var(--font-ja);font-weight:700;font-size:.9rem;
  color:var(--ink);white-space:nowrap;padding-right:14px;}
.pdetail .intofig .if-acc{display:block;text-align:center;padding:2px 13px 4px;}
.pdetail .intofig .if-cell{display:block;width:100%;}
/* 山的高度＝SVG 高度（viewBox 固定 100x40·preserveAspectRatio=none 纵向也拉伸）。
   用户 2026-08-06：上下间距太小、大きい山尤其看不出高低 ⇒ 小 40→56、大 40→80。 */
.pdetail .intofig .ifsvg{display:block;width:100%;height:56px;}
.pdetail .intofig .if-cell.big .ifsvg{height:80px;}

/* App 引流块：本页**不放**（用户 2026-08-04·与【基础知识详情】页一致，该页也没有）。
   DEV-030e 加的 .app-promo 整块样式已删除，勿再加回。 */

/* ── 上/下一章：与正文的距离照基础知识详情页再拉开（concept 是 38px，本页内容更密） ── */
.pdetail .pd-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:56px 0 6px;}
.pdetail .pd-nav .sp{flex:0 0 1px;}
.pdetail .pd-nav .btn{justify-content:center;text-align:center;}

/* ── 手机 ── */
@media(max-width:560px){
  /* 手机是单列 ⇒ 必须把 flow 改回 row，否则 column flow 会把项目横着排出去 */
  .pdetail .pv-toc .sb-body{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:auto;}

  /* 右内边距 16 → 9.5px：与左侧「红条(14.5)之后到内容」的 9.5px 对称（同桌面的算法），
     顺带给例词卡多让出 6.5px（用户 2026-08-03 要求窄屏至少并排两张） */
  .pdetail .content_sample{padding:12px 9.5px 13px 24px;}
  /* 例词卡的最小宽 146 → 128px（--wm 由 render.php 算好），列间距 26 → 12px
     ⇒ 128×2 + 12 = 268px，360px 宽的手机（容器内容宽 285.5px）也能并排两张。
     长单词按算出来的实宽走（与桌面同值），仍是一行一张。 */
  .pdetail .wtag{width:var(--wm,var(--w,var(--wtag-w)));}
  .pdetail .exrows{gap:16px 12px;}
  /* 対比组（練習 的虚线框）：内边距 12 → 6px、组间距 16 → 10px，让手机一行放两组
     （用户 2026-08-04）。组宽 = 卡 128 + 内边距 6×2 + 虚线边框 2×2 = 144
     ⇒ 144×2 + 10 = 298px ≤ 容器内容宽 301.5px（main 375px 时）。
     ⚠️ 再窄的机型（main 360px·内容宽 285.5px）仍是一行一组——要覆盖它得把内边距压到 4px、
        组间距压到 6px，两个虚线框几乎贴在一起，观感不划算，故不做。 */
  .pdetail .pgrid{gap:12px 10px;}
  .pdetail .pgrp{padding:6px;gap:12px;}
  .pdetail .kg-block{margin-left:auto;margin-right:auto;}
  .pdetail .kgtab > div{padding:7px 14px;font-size:.92rem;}
  .pdetail .kgtab .kgh{padding:6px 14px;}
  .pdetail .stag{padding:12px 42px 12px 16px;}
  .pdetail .intofig .if-lab{font-size:.8rem;padding-right:8px;}
  .pdetail .intofig .if-acc{padding:2px 6px 3px;}
  .pdetail .intofig .ifsvg{height:42px;}
  .pdetail .intofig .if-cell.big .ifsvg{height:60px;}
}