/* ══════════════════════════════════════════════════════════
   字幕「拼读式」关键词高亮样式 — 与 sub-kw.js 配套
   vlog.css 之后加载；admin/vlog.html 实时预览同样引用本文件。

   对齐铁律：.kw-unit 在行内只占英文单词自身的盒子，
   音标(.kw-ipa) / 分隔线(.kw-sep) / 中文(.kw-def) 一律绝对定位溢出，
   不参与行内排版 —— 左右单词始终与高亮单词同基线、同一行。
   ══════════════════════════════════════════════════════════ */

.kw-unit {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  white-space: nowrap;
  /* 与 .lyric-word 相同的水平占位，保证高亮词两侧间距和普通词一致 */
  padding: 0 3px;
  margin: 0 1px;
}

/* 高亮单词本体：去掉 .lyric-word 的 padding/border，占位交给 .kw-unit */
.kw-unit .kw-word {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 3px;
  font-weight: 600;
}
/* 悬停 / 选中时整块（音标+单词+中文）一起反应，单词本体不位移 */
.kw-unit .kw-word:hover,
.kw-unit .kw-word.wp-active { transform: none; }
.kw-unit:hover { z-index: 3; }
.kw-unit:hover .kw-ipa { opacity: 1; }

.kw-ipa {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  display: block;
  margin-bottom: 0.32em;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-size: max(0.5em, 8px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  opacity: 0.85;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.kw-sep {
  position: absolute;
  left: 14%;
  top: 100%;
  width: 72%;
  height: 1px;
  margin-top: 0.2em;
  opacity: 0.3;
  pointer-events: none;
}

.kw-def {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  display: block;
  margin-top: 0.42em;
  font-family: 'Noto Serif SC', 'Source Serif 4', serif;
  font-size: max(0.5em, 8px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

/* ── 行高补偿：只为堆叠出来的音标/中文让出上下空间，不改变水平排版 ── */
.lyric-line__en.kw-flow-ipa { line-height: 2.05; }
.lyric-line__en.kw-flow-def { line-height: 2.15; padding-bottom: 0.95em; }

/* 双语面板里英文与中文之间的间距，避免中文释义压到译文 */
.lyric-line__en.kw-flow-def + .lyric-line__zh { margin-top: 0; }

/* ── 平板 / 手机：字号变小，堆叠随之收紧 ── */
@media (max-width: 768px) {
  .lyric-line__en.kw-flow-ipa { line-height: 1.95; }
  .lyric-line__en.kw-flow-def { line-height: 2.05; padding-bottom: 0.9em; }
}
@media (max-width: 640px) {
  .kw-unit { padding: 0; margin: 0 -1px; }
  .kw-ipa { font-size: max(0.52em, 7px); margin-bottom: 0.26em; }
  .kw-def { font-size: max(0.52em, 7px); margin-top: 0.36em; }
  .kw-sep { margin-top: 0.16em; }
  .lyric-line__en.kw-flow-ipa { line-height: 1.9; }
  .lyric-line__en.kw-flow-def { line-height: 2; padding-bottom: 0.85em; }
}