/* BeFluent training page overrides
 * Layered ON TOP of legacy CSS (common.css, layout.css, components.css, cri1_rapid_enhancements.css)
 * to apply BeFluent tokens without touching JS-bound classes/ids.
 */

@import url('/assets/css/befluent.css');

body.bf-training {
  background: var(--bf-bg-grad) !important;
  background-attachment: fixed;
  color: var(--bf-text);
  font-family: var(--bf-font-sans) !important;
  padding: 0 !important;
}

/* Wrap the legacy .shell inside bf-main */
body.bf-training .shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
}
/* Hide the legacy top header — bf-topbar replaces it */
body.bf-training .shell > header.top { display: none !important; }

/* Stage tabs — modern pill row */
body.bf-training .stage-nav {
  padding: 4px 0 18px !important;
  gap: 6px !important;
}
body.bf-training .stage-tab {
  background: var(--bf-surface-solid) !important;
  border: 1px solid var(--bf-line) !important;
  color: var(--bf-text-muted) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all .15s !important;
}
body.bf-training .stage-tab:hover {
  border-color: var(--bf-text-muted) !important;
  color: var(--bf-text) !important;
}
body.bf-training .stage-tab.active {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}

/* Top progress bar — Lime fill */
body.bf-training .progress-wrap { padding: 0 0 14px !important; }
body.bf-training .progress-bar {
  height: 6px !important;
  background: var(--bf-line-soft) !important;
  border-radius: 999px !important;
}
body.bf-training .progress-fill {
  background: linear-gradient(90deg, var(--bf-charcoal) 0%, var(--bf-lime) 100%) !important;
  border-radius: 999px !important;
}

/* Stage label heading */
body.bf-training .stage {
  color: var(--bf-text) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  padding: 4px 0 12px !important;
}

/* Status line */
body.bf-training .fast-status {
  color: var(--bf-text-muted) !important;
  padding: 0 0 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Main 2-column layout — Rapid 기준 (마스터) */
body.bf-training .main {
  padding: 0 !important;
  gap: 16px !important;
  grid-template-columns: 1.18fr .82fr !important;
  align-items: stretch !important;
}

/* Panels — clean white cards */
body.bf-training .panel {
  background: var(--bf-surface-solid) !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: var(--bf-r-xl) !important;
  padding: 22px 24px !important;
  height: 540px !important;
}
body.bf-training .panel.aside h3 {
  color: var(--bf-text) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
}

/* Sentence area */
body.bf-training .sentence,
body.bf-training .paragraph-text,
body.bf-training .page-text {
  color: var(--bf-text) !important;
}

/* Sentence index / paragraph index */
body.bf-training .sentence-index,
body.bf-training .section-index {
  color: var(--bf-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Guide text (instructions) */
body.bf-training .guide {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-muted) !important;
  border-radius: var(--bf-r-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
}

/* Active sentence fragment highlight — Lime tint */
body.bf-training .sentence-frag.active {
  background: rgba(232, 255, 71, .35) !important;
  border-radius: 6px !important;
  padding: 0 2px !important;
  margin: 0 -2px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Sentence list items */
body.bf-training .panel.aside .list-item {
  background: var(--bf-line-soft) !important;
  border: 1px solid transparent !important;
  color: var(--bf-text-muted) !important;
  border-radius: var(--bf-r-md) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  transition: all .12s !important;
}
body.bf-training .panel.aside .list-item:hover {
  background: var(--bf-surface-solid) !important;
  border-color: var(--bf-line) !important;
}
body.bf-training .panel.aside .list-item.active {
  background: var(--bf-charcoal) !important;
  border-color: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  font-weight: 700 !important;
}

/* Controls — Play CTA Lime */
body.bf-training .controls {
  gap: 10px !important;
  margin-top: 14px !important;
}
body.bf-training .controls button,
body.bf-training .controls .link-btn,
body.bf-training .footer-nav button,
body.bf-training .footer-nav .link-btn,
body.bf-training .done-panel .controls button,
body.bf-training .done-panel .controls .link-btn {
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  transition: all .15s !important;
  background: var(--bf-line-soft) !important;
  color: var(--bf-text) !important;
}
body.bf-training .controls .primary,
body.bf-training .controls button.primary,
body.bf-training .footer-nav .primary,
body.bf-training .done-panel .controls .primary {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
}
body.bf-training .controls .secondary,
body.bf-training .controls button.secondary,
body.bf-training .footer-nav .secondary,
body.bf-training .done-panel .controls .secondary {
  background: var(--bf-surface-solid) !important;
  color: var(--bf-text) !important;
  border-color: var(--bf-line) !important;
}
body.bf-training .controls .ghost,
body.bf-training .controls button.ghost,
body.bf-training .footer-nav .ghost,
body.bf-training .done-panel .controls .ghost {
  background: transparent !important;
  color: var(--bf-text-muted) !important;
  border-color: var(--bf-line) !important;
}

/* Timer */
body.bf-training .timer {
  color: var(--bf-text) !important;
  font-family: var(--bf-font-mono) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}
body.bf-training .small { color: var(--bf-text-muted) !important; }

/* Footer nav */
body.bf-training .footer-nav {
  padding: 18px 0 0 !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--bf-line) !important;
}

/* Done panel */
body.bf-training .done-panel {
  background: var(--bf-surface-solid) !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: var(--bf-r-xl) !important;
  margin: 0 !important;
}
body.bf-training .done-panel .done-title { color: var(--bf-text) !important; }
body.bf-training .done-panel .done-meta { color: var(--bf-text-muted) !important; }

/* Jump buttons (paragraph mode) */
body.bf-training .jump-btn,
body.bf-training .progress-chip {
  background: var(--bf-surface-solid) !important;
  border: 1px solid var(--bf-line) !important;
  color: var(--bf-text) !important;
  border-radius: var(--bf-r-sm) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body.bf-training .jump-btn.active,
body.bf-training .progress-chip.active {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}

/* TTS meta wrap */
body.bf-training .tts-meta-wrap {
  background: var(--bf-line-soft) !important;
  border-radius: var(--bf-r-md) !important;
  padding: 8px 14px !important;
  margin: 14px 0 4px !important;
  max-width: none !important;
}
body.bf-training .tts-meta {
  color: var(--bf-text-muted) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
body.bf-training .text-link.tts-launcher.inline {
  color: var(--bf-charcoal) !important;
  font-weight: 800 !important;
}

/* TTS modal — refined */
body.bf-training .tts-modal { background: rgba(13,13,13,.45) !important; backdrop-filter: blur(4px); }
body.bf-training .tts-modal-card {
  border-radius: var(--bf-r-xl) !important;
  border-color: var(--bf-line) !important;
  box-shadow: var(--bf-shadow-lg) !important;
}
body.bf-training .tts-modal-head h3 {
  color: var(--bf-text) !important;
  font-size: 18px !important;
}
body.bf-training .tts-field label { color: var(--bf-text) !important; font-weight: 700 !important; }
body.bf-training .tts-field select,
body.bf-training .tts-field input,
body.bf-training .tts-field textarea {
  background: var(--bf-line-soft) !important;
  border-color: var(--bf-line) !important;
  border-radius: var(--bf-r-sm) !important;
  color: var(--bf-text) !important;
  font-family: inherit !important;
}
body.bf-training .tts-field select:focus,
body.bf-training .tts-field input:focus {
  background: #fff !important;
  border-color: var(--bf-charcoal) !important;
  outline: none !important;
}
body.bf-training .tts-summary {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-muted) !important;
}

/* Footer copy hide on bf training */
body.bf-training .footer-copy { display: none !important; }

/* Topbar back links — pill buttons */
body.bf-training .bf-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: var(--bf-surface-solid) !important;
  border: 1px solid var(--bf-line) !important;
  color: var(--bf-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all .15s !important;
  white-space: nowrap !important;
}
body.bf-training .bf-back-link:hover {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}
body.bf-training .bf-back-link svg { width: 14px !important; height: 14px !important; }

/* OPIc strong/normal toggle (preserve functionality) */
body.bf-training .script-mode-toggle {
  border-color: var(--bf-line) !important;
  background: var(--bf-surface-solid) !important;
  box-shadow: var(--bf-shadow-sm) !important;
}
body.bf-training .mode-btn {
  color: var(--bf-text-muted) !important;
}
body.bf-training .mode-btn.active {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  box-shadow: none !important;
}

/* Aside list scrollbar */
body.bf-training .panel.aside .list { scrollbar-width: thin; }

/* Sticky controls bg matches panel */
body.bf-training .panel .controls {
  background: var(--bf-surface-solid) !important;
}
body.bf-training .timer-box {
  background: var(--bf-surface-solid) !important;
  margin-top: 10px !important;
}

/* Mobile adjustments */
@media (max-width: 980px) {
  body.bf-training .main { grid-template-columns: 1fr !important; }
  body.bf-training .panel { height: auto !important; min-height: auto !important; }
}

/* ──────────────────────────────────────────────────────────
 * v2 polish — refined typography + dimensional CTA
 * ────────────────────────────────────────────────────────── */

/* Layout breathing — wider main, more vertical rhythm */
body.bf-training .main {
  padding: 0 !important;
  gap: 18px !important;
  grid-template-columns: 1.22fr .78fr !important;
}

/* Panels: subtle shadow + cleaner surface */
body.bf-training .panel {
  background: #FFFEFB !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 24px !important;
  padding: 26px 28px !important;
  height: 560px !important;
  box-shadow: 0 1px 2px rgba(13,13,13,.04), 0 8px 24px rgba(13,13,13,.04) !important;
}

/* Stage label — quieter eyebrow style */
body.bf-training .stage {
  color: var(--bf-text-subtle) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 0 0 10px !important;
}

/* Status line — tighter (rapid + vocab 통일) */
body.bf-training .fast-status,
body.bf-training .status-inline {
  color: var(--bf-text-muted) !important;
  padding: 0 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  min-height: auto !important;
  background: transparent !important;
}

/* Guide — softer card */
body.bf-training .guide {
  background: var(--bf-card-lavender, #ECE8FF) !important;
  color: var(--bf-text) !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
  line-height: 1.55 !important;
}

/* Sentence index — bold pill with charcoal dot */
body.bf-training .sentence-index,
body.bf-training .section-index {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-muted) !important;
  padding: 5px 10px 5px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 14px 0 8px !important;
  width: fit-content !important;
}
body.bf-training .sentence-index::before,
body.bf-training .section-index::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bf-charcoal);
}

/* Sentence body — large, readable, center stage (drop weight for legibility) */
body.bf-training .sentence,
body.bf-training .paragraph-text,
body.bf-training .page-text {
  color: var(--bf-text) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
body.bf-training .page-text-lines {
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  gap: 10px !important;
}

/* Active sentence fragment — Lime underline-glow rather than a solid box */
body.bf-training .sentence-frag.active {
  background: linear-gradient(180deg, transparent 60%, rgba(232,255,71,.7) 60%) !important;
  border-radius: 2px !important;
  padding: 0 1px !important;
  margin: 0 !important;
}

/* Sentence list items — modern card list with leading badge */
body.bf-training .panel.aside h3 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--bf-text-muted) !important;
  margin: 0 0 14px !important;
}
body.bf-training .panel.aside .list-item {
  background: var(--bf-line-soft) !important;
  border: 1px solid transparent !important;
  color: var(--bf-text) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .14s ease !important;
}
body.bf-training .panel.aside .list-item:hover {
  background: #fff !important;
  border-color: var(--bf-line) !important;
  transform: translateX(2px) !important;
}
body.bf-training .panel.aside .list-item.active {
  background: var(--bf-charcoal) !important;
  border-color: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(13,13,13,.18) !important;
  transform: translateX(2px) !important;
}

/* Controls — primary big & bouncy, secondaries quieter */
body.bf-training .controls {
  display: flex !important;
  gap: 8px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}
body.bf-training .controls button,
body.bf-training .controls .link-btn {
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border: 1px solid var(--bf-line) !important;
  background: #fff !important;
  color: var(--bf-text) !important;
  transition: all .16s ease !important;
  cursor: pointer !important;
  min-height: auto !important;
  height: auto !important;
}
body.bf-training .controls button:hover,
body.bf-training .controls .link-btn:hover {
  border-color: var(--bf-text-muted) !important;
}
body.bf-training .controls .primary,
body.bf-training .controls button.primary {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  flex: 0 1 auto !important;
  box-shadow: 0 4px 14px rgba(13,13,13,.18) !important;
}
body.bf-training .controls .primary:hover,
body.bf-training .controls button.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(13,13,13,.25) !important;
}
body.bf-training .controls .ghost,
body.bf-training .controls button.ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--bf-text-muted) !important;
}
body.bf-training .controls .ghost:hover,
body.bf-training .controls button.ghost:hover {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text) !important;
}

/* Footer-nav buttons — same modern pill */
body.bf-training .footer-nav button,
body.bf-training .footer-nav .link-btn {
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: var(--bf-surface-solid) !important;
  border: 1px solid var(--bf-line) !important;
  color: var(--bf-text) !important;
  min-height: auto !important;
  height: auto !important;
}
body.bf-training .footer-nav .ghost { background: transparent !important; border-color: transparent !important; color: var(--bf-text-muted) !important; }

/* Timer — refined mono (Stage 4 only — JS toggles .hidden) */
body.bf-training .timer-box.hidden { display: none !important; }
body.bf-training .timer-box:not(.hidden) {
  border-radius: 14px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--bf-line) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 10px !important;
}
body.bf-training .timer {
  font-size: 32px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.02em !important;
}
body.bf-training .small {
  font-size: 11px !important;
  color: var(--bf-text-muted) !important;
  letter-spacing: .02em !important;
}

/* Jump buttons (paragraph mode) — pill with lime active */
body.bf-training .sentence-jumps {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
}
body.bf-training .jump-btn {
  background: var(--bf-line-soft) !important;
  border: 1px solid transparent !important;
  color: var(--bf-text-muted) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-height: auto !important;
  cursor: pointer !important;
  transition: all .14s !important;
}
body.bf-training .jump-btn:hover {
  background: #fff !important;
  border-color: var(--bf-line) !important;
  color: var(--bf-text) !important;
}
body.bf-training .jump-btn.active {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}

/* Done panel — cleaner success */
body.bf-training .done-panel {
  border-radius: 24px !important;
  padding: 36px !important;
}
body.bf-training .done-panel .done-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  margin: 12px 0 !important;
}
body.bf-training .done-panel .done-meta {
  color: var(--bf-text-muted) !important;
  font-size: 14px !important;
}
body.bf-training .done-panel .sub {
  display: inline-block !important;
  align-self: center !important;       /* flex parent 안에서 stretch 방지 */
  width: auto !important;
  max-width: max-content !important;
  background: var(--bf-card-lavender, #ECE8FF) !important;
  color: var(--bf-charcoal) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* Sticky controls bg matches panel — re-tune for new bg */
body.bf-training .panel .controls {
  background: linear-gradient(180deg, rgba(255,254,251,0) 0%, #FFFEFB 30%) !important;
  padding-top: 12px !important;
}
body.bf-training .timer-box {
  background: #FFFEFB !important;
}

/* ──────────────────────────────────────────────────────────
 * v3 — Breadcrumb, breathing layout, consistent topbar utility
 * ────────────────────────────────────────────────────────── */

/* bf-main breathing — taller padding, full width */
body.bf-training .bf-main {
  padding: 22px 28px 28px !important;
}

/* Breadcrumb above title */
body.bf .bf-crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--bf-text-subtle);
  margin-bottom: 4px;
}
body.bf .bf-crumbs a {
  color: var(--bf-text);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .12s;
  border-bottom: 1px dotted transparent;
}
body.bf .bf-crumbs a:hover {
  background: var(--bf-line-soft);
  color: var(--bf-text);
  border-bottom-color: var(--bf-text-muted);
}
body.bf .bf-crumbs a:active { background: var(--bf-line); }
body.bf .bf-crumbs a:focus-visible {
  outline: 2px solid var(--bf-accent, #E8FF47);
  outline-offset: 2px;
}
body.bf .bf-crumb-sep { color: var(--bf-text-subtle); opacity: .55; }
body.bf .bf-crumb-current { color: var(--bf-text); font-weight: 800; padding: 2px 6px; }

/* h1 트레이닝 페이지 — eyebrow 와 호흡 맞춤 */
body.bf-training .bf-topbar-left h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  margin: 6px 0 0 !important;
}

/* Panels — 보캡/래피드 패널 껍데기 동일 높이로 통일 (PO 의도: 중간 길이 520px).
   v1.12.0-A: Rapid 측정 ~500 / Vocab 측정 540 차이 해소. 두 트랙이 같은
   패널 시각을 쓰도록 .panel · .panel 모두 520px 로 정렬. */
body.bf-training .panel {
  height: 520px !important;
  min-height: 520px !important;
  max-height: 520px !important;
}
/* Rapid Stage 1·2 (.sentence) + Stage 4 (.page-text) 본문 — expanded 모드
   (사이드바 보임, 본문 좁음) 에서는 텍스트 자체는 좌정렬을 유지하되, 패널 안
   세로 위치는 정중앙으로 (PO 의도: "텍스트 길어지면 좌우중앙 가독성 떨어지니
   접었을 때(expanded)는 좌정렬, 패널 상하중앙만"). collapsed 모드에서는
   cri1_rapid_enhancements.css 의 line 89-102 규칙이 좌우중앙·상하중앙을
   별도로 강제하므로 그대로 둔다.
   selector specificity (1,6,1) — V124/V127 와 동일하게 맞춰 last-wins 로 우회.
   Stage 3 (.paragraph-text) 는 좌측 위 시작이 기존 디자인이므로 건드리지 않음. */
body.cri1-rapid-ai-enhanced .main:not(.cri1-aside-collapsed) > .panel:not(.aside) #sentenceText.sentence,
body.cri1-rapid-ai-enhanced .main:not(.cri1-aside-collapsed) > .panel:not(.aside) #sentenceText.page-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  text-align: left !important;
}
body.bf-training .main { align-items: stretch !important; }

/* 패널 양쪽 width 균형 — Rapid 기준 1.32/.68 (마스터, 손대지 않음) */
body.bf-training .main {
  grid-template-columns: 1.32fr .68fr !important;
}

/* 진행바 → 더 호흡 있게 */
body.bf-training .progress-wrap { padding: 0 0 18px !important; }

/* Stage nav — 좌우 살짝 더 정돈 */
body.bf-training .stage-nav {
  padding: 0 0 14px !important;
}

/* ──────────────────────────────────────────────────────────
 * Dictionary popup (cri1-dict-*) — BeFluent 스타일
 * ────────────────────────────────────────────────────────── */
body.bf-training .cri1-dict-panel,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-panel,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-panel {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
body.bf-training .cri1-dict-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 14px !important;
}
body.bf-training .cri1-dict-empty {
  background: var(--bf-line-soft) !important;
  border: 1px dashed var(--bf-line) !important;
  border-radius: 14px !important;
  color: var(--bf-text-muted) !important;
  padding: 22px 18px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}
body.bf-training .cri1-dict-head { gap: 14px !important; }
body.bf-training .cri1-dict-word {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--bf-text) !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}
body.bf-training .cri1-dict-meta {
  color: var(--bf-text-muted) !important;
  font-size: 12px !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
body.bf-training .cri1-dict-meta-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--bf-line-soft) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  color: var(--bf-text-muted) !important;
}
body.bf-training .cri1-dict-meta-chip strong {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bf-text-subtle) !important;
}
body.bf-training .cri1-dict-play {
  width: 32px !important; height: 32px !important;
  border-radius: 999px !important;
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.bf-training .cri1-dict-play:hover { box-shadow: 0 4px 12px rgba(13,13,13,.18) !important; }
body.bf-training .cri1-dict-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; height: 32px !important;
  border-radius: 999px !important;
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-muted) !important;
  font-size: 13px !important;
  border: 1px solid transparent !important;
  transition: all .15s !important;
}
body.bf-training .cri1-dict-link:hover { border-color: var(--bf-line) !important; background: #fff !important; color: var(--bf-text) !important; }
body.bf-training .cri1-dict-sec {
  border-top: 1px solid var(--bf-line-soft) !important;
  padding-top: 12px !important;
}
body.bf-training .cri1-dict-sec:first-child { border-top: 0 !important; padding-top: 0 !important; }
body.bf-training .cri1-dict-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--bf-text-subtle) !important;
  margin-bottom: 6px !important;
}
body.bf-training .cri1-dict-text {
  font-size: 14px !important;
  color: var(--bf-text) !important;
  line-height: 1.6 !important;
}
body.bf-training .cri1-dict-synonym {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  transition: all .15s !important;
}
body.bf-training .cri1-dict-synonym:hover {
  background: #fff !important;
  border-color: var(--bf-line) !important;
}
body.bf-training .cri1-dict-footer {
  background: #FFFEFB !important;
  border-top: 1px solid var(--bf-line-soft) !important;
  padding: 10px 0 0 !important;
}
body.bf-training .cri1-dict-save {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  min-height: 42px !important;
  transition: all .15s !important;
}
body.bf-training .cri1-dict-save:hover { box-shadow: 0 6px 18px rgba(13,13,13,.22) !important; }
body.bf-training .cri1-dict-save.cri1-dict-save-done {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-muted) !important;
}
body.bf-training .cri1-dict-save:disabled {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-subtle) !important;
  cursor: not-allowed !important;
}

/* ──────────────────────────────────────────────────────────
 * Translation toggle + bubble (.cri1-translate-*) — BeFluent
 * (button keeps original SIZE/POSITION — color only)
 * ────────────────────────────────────────────────────────── */
body.bf-training .cri1-translate-link {
  /* size/position 변경 금지 — 원본 padding:0, font 14px, 배경 투명 유지 */
  color: var(--bf-text-muted) !important;
  font-weight: 800 !important;
  transition: color .14s !important;
}
body.bf-training .cri1-translate-link:hover {
  color: var(--bf-text) !important;
}
body.bf-training .cri1-translate-link.active {
  color: var(--bf-charcoal) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--bf-lime) !important;
}
body.bf-training .cri1-translation-box {
  background: var(--bf-card-lavender, #ECE8FF) !important;
  border: 1px solid rgba(13,13,13,.05) !important;
  color: var(--bf-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-shadow: 0 8px 24px rgba(13,13,13,.10) !important;
  /* position 은 원본 그대로 (absolute, right:0, bottom:calc(100%+8px)) — 건드리지 않음 */
}

/* ──────────────────────────────────────────────────────────
 * Aside collapse handle — fix z-index above modals + position
 * ────────────────────────────────────────────────────────── */
body.bf-training .panel.aside { position: relative !important; }
body.bf-training .cri1-rapid-aside-handle {
  background: #FFFEFB !important;
  border: 1px solid var(--bf-line) !important;
  color: var(--bf-text) !important;
  box-shadow: 0 6px 16px rgba(13,13,13,.10) !important;
  z-index: 10 !important;       /* below modals */
  width: 30px !important;
  height: 56px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  transition: all .14s !important;
}
body.bf-training .cri1-rapid-aside-handle:hover {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}
/* Hide the handle while any modal is open — prevents floating button bug */
body.bf-training.modal-open .cri1-rapid-aside-handle,
body.bf-training:has(.tts-modal:not(.hidden)) .cri1-rapid-aside-handle,
body.bf-training:has(.fs-search-modal:not(.hidden)) .cri1-rapid-aside-handle,
body.bf-training:has(.identity-backdrop) .cri1-rapid-aside-handle,
body.bf-training:has(.bf-profile.open) .cri1-rapid-aside-handle {
  display: none !important;
}

/* Search modal (.fs-search-*) — moved to befluent.css for all bf pages */

/* ──────────────────────────────────────────────────────────
 * TTS Setting modal (.tts-modal-*) — BeFluent tone (full)
 * ────────────────────────────────────────────────────────── */
body.bf-training .tts-modal {
  background: rgba(13,13,13,.45) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  z-index: 2147483600 !important;
}
body.bf-training .tts-modal-card {
  background: #FFFEFB !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: var(--bf-r-2xl) !important;
  padding: 24px 24px 20px !important;
  box-shadow: 0 30px 80px rgba(13,13,13,.18) !important;
  font-family: var(--bf-font-sans) !important;
  animation: bfPopIn .22s ease-out !important;
}
body.bf-training .tts-modal-head {
  /* v1.10.6: sticky header inside the scrollable modal body.
     Before this, the header was transparent and the modal body could scroll
     under it, making the title overlap with field labels. Pin it to the
     top of the card and give it the same solid background as the card so
     scrolled content is hidden behind it cleanly. */
  position: sticky !important;
  top: -24px !important; /* pull up by the card's top padding so it hugs the top edge */
  z-index: 5 !important;
  background: #FFFEFB !important;
  border-bottom: 1px solid var(--bf-line) !important;
  padding: 4px 0 14px !important;
  margin: -4px 0 18px !important;
}
body.bf-training .tts-modal-head h3 {
  color: var(--bf-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.005em !important;
  margin: 0 !important;
}
body.bf-training .tts-field { margin-bottom: 14px !important; }
body.bf-training .tts-field label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bf-text-muted) !important;
  margin-bottom: 6px !important;
}
body.bf-training .tts-field select,
body.bf-training .tts-field input,
body.bf-training .tts-field textarea {
  background: var(--bf-line-soft) !important;
  border: 1.5px solid var(--bf-line) !important;
  border-radius: var(--bf-r-sm) !important;
  color: var(--bf-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  padding: 11px 13px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
body.bf-training .tts-field select:focus,
body.bf-training .tts-field input:focus,
body.bf-training .tts-field textarea:focus {
  background: #FFFEFB !important;
  border-color: var(--bf-charcoal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232,255,71,.35) !important;
}
body.bf-training .tts-summary {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-muted) !important;
  border-radius: var(--bf-r-md) !important;
  font-size: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.55 !important;
}
body.bf-training .tts-help,
body.bf-training .tts-speed-preview {
  color: var(--bf-text-subtle) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
body.bf-training .tts-actions {
  border-top: 1px solid var(--bf-line) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
  gap: 8px !important;
}
body.bf-training .tts-actions button,
body.bf-training .tts-modal button:not(.tts-help-tip) {
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  border: 1px solid var(--bf-line) !important;
  background: #FFFEFB !important;
  color: var(--bf-text) !important;
  cursor: pointer !important;
  transition: all .14s !important;
}
body.bf-training .tts-actions button.primary,
body.bf-training .tts-modal button.primary {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}
body.bf-training .tts-actions button.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(13,13,13,.22) !important;
}
body.bf-training .tts-advanced-toggle {
  color: var(--bf-text) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 !important;
}
body.bf-training .tts-help-tip {
  background: var(--bf-line-soft) !important;
  border: 1px solid var(--bf-line) !important;
  color: var(--bf-text-muted) !important;
}
body.bf-training .tts-click-tooltip {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-radius: var(--bf-r-md) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
}

/* TTS launcher inline link — BeFluent */
body.bf-training .text-link.tts-launcher.inline {
  background: var(--bf-line-soft) !important;
  color: var(--bf-text) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border: 0 !important;
}
body.bf-training .text-link.tts-launcher.inline:hover {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
}

/* ──────────────────────────────────────────────────────────
 * Sound Vocab page — Rapid 와 일관성 (높이/그리드 통일)
 * Rapid의 .panel과 동일한 룩+동일한 높이 규칙으로
 * ────────────────────────────────────────────────────────── */
body.bf-training .vocab-hero {
  display: none !important; /* topbar 가 타이틀 표시 — 본문에선 제거 */
}
body.bf-training .main {
  display: grid !important;
  /* Rapid 의 .main 과 동일한 grid 비율 — Rapid 마스터 측정값 */
  grid-template-columns: 1.32fr .68fr !important;
  gap: 16px !important;
  padding: 0 !important;
  margin-top: 6px !important;
  align-items: stretch !important;
  /* aside collapse handle 의 absolute positioning 기준 */
  position: relative !important;
}
/* Mobile/narrow viewport — Vocab 와 Rapid 모두 1-column stack + panel height auto.
   Breakpoint 1100px 로 상향 조정 (이전 980 은 노트북 narrow window 에서 안 풀려서) */
@media (max-width: 1100px){
  body.bf-training .main,
  body.bf-training .main {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.bf-training .panel,
  body.bf-training .panel,
  body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-panel,
  body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body.bf-training .panel.aside .list,
  body.bf-training .flow-list {
    max-height: 360px !important;
    height: auto !important;
  }
  /* v1.14.8: 모바일에서도 핸들 노출 — PO 의도 "가로로 넓게 보고 싶을 때
     방법 X" 해소. collapsed 모드로 우측 패널 사라지고 본문 wide 가능. */
}
@media (max-width: 768px){
  /* iOS Safari: bottom-nav 가 fixed 라 컨트롤이 가려지지 않게 풍부한 bottom padding */
  body.bf-training .bf-main { padding: 14px 14px calc(96px + env(safe-area-inset-bottom)) !important; }
  body.bf-training .panel,
  body.bf-training .panel,
  body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-panel,
  body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .panel {
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }
  body.bf-training .panel.flow-panel { padding: 14px 12px 12px !important; }
  body.bf-training .word-big { font-size: clamp(28px, 8vw, 44px) !important; }
  body.bf-training .example-big { font-size: clamp(18px, 5vw, 24px) !important; }
  body.bf-training .controls { gap: 6px !important; flex-wrap: wrap; }
  body.bf-training .controls button,
  body.bf-training .controls .link-btn,
  body.bf-training .footer-nav button,
  body.bf-training .footer-nav .link-btn { padding: 10px 14px !important; font-size: 12px !important; min-height: 44px !important; flex: 1 1 auto; }
  /* Stage tabs — horizontal scrollable instead of overflow */
  body.bf-training .stage-nav,
  body.bf-training .stage-tabs,
  body.bf-training .stage-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  body.bf-training .stage-nav::-webkit-scrollbar,
  body.bf-training .stage-tabs::-webkit-scrollbar,
  body.bf-training .stage-row::-webkit-scrollbar { display: none; }
  body.bf-training .stage-nav > *,
  body.bf-training .stage-tabs > *,
  body.bf-training .stage-row > * { flex: 0 0 auto; }
  /* Status line + breadcrumb — wrap-friendly */
  body.bf-training .fast-status,
  body.bf-training .status-inline { font-size: 10px !important; line-height: 1.4 !important; }
  /* Footer nav — full width */
  body.bf-training .footer-nav { flex-direction: column !important; gap: 6px !important; padding: 10px 0 !important; }
  body.bf-training .footer-nav > * { width: 100%; text-align: center; }
  /* TTS meta wrap */
  body.bf-training .tts-meta-wrap { flex-direction: column !important; gap: 6px !important; padding: 10px 12px !important; }
  body.bf-training .tts-meta { font-size: 10px !important; line-height: 1.5; }
  /* Vocab marker pill */
  body.bf-training .sentence-index { font-size: 10px !important; padding: 4px 8px 4px 6px !important; }
  /* Sentence/word panel guide */
  body.bf-training .guide { padding: 10px 12px !important; font-size: 12px !important; }
  /* Right panel height cap */
  body.bf-training .panel.aside .list,
  body.bf-training .flow-list { max-height: 340px !important; }
  /* v1.14.8: 모바일 핸들 노출 — PO 의도 (collapsed 모드 가로 wide). */
  /* Sticky controls — disable on mobile (panel scrolls naturally) */
  body.bf-training .panel .controls,
  body.bf-training .panel .controls {
    position: static !important;
    background: transparent !important;
    padding: 8px 0 0 !important;
  }
}
@media (max-width: 480px) {
  body.bf-training .bf-main { padding: 12px 10px 18px !important; }
  body.bf-training .panel,
  body.bf-training .panel { padding: 14px 14px !important; }
  body.bf-training .word-big { font-size: clamp(26px, 9vw, 38px) !important; }
  body.bf-training .controls button { padding: 9px 12px !important; font-size: 11px !important; }
}
/* Vocab 패널 — Rapid `.panel` (마스터) 와 완전 동일 토큰.
   v1.14.2: 모바일 (≤980px) 에서 height 520px !important 강제하던 회귀
   해소 위해 desktop 한정 (min-width:981) 으로 height·padding·flex 묶음 wrap. */
@media (min-width: 981px) {
body.bf-training .panel,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-panel,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .panel,
body.bf-training .main .panel {
  background: #FFFEFB !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 24px !important;
  padding: 26px 28px !important;
  height: 520px !important;
  min-height: 520px !important;
  max-height: 520px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 2px rgba(13,13,13,.04), 0 8px 24px rgba(13,13,13,.04) !important;
  overflow: visible !important;
  position: relative !important;
  box-sizing: border-box !important;
}
}
/* 모바일에서는 위 wrap 으로 height 자동 + flex 유지 별도 적용 — 시각 회귀 없도록
   border/padding/box-shadow 등 비-height 토큰은 적용. */
body.bf-training .panel,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .panel {
  background: #FFFEFB !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 2px rgba(13,13,13,.04), 0 8px 24px rgba(13,13,13,.04) !important;
  overflow: visible !important;
  position: relative !important;
  box-sizing: border-box !important;
}
/* 우측 flow-panel 만 padding 16/12/12 로 별도 — Rapid `.panel.aside` 와 동일 */
body.bf-training .panel.flow-panel,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-panel {
  padding: 16px 12px 12px !important;
}
/* 내부 스크롤은 flow-list 자체에 위임 (overflow:visible 패널 안에서) */
body.bf-training .panel.left,
body.bf-training .panel:not(.flow-panel) {
  align-items: stretch !important;
  justify-content: flex-start !important;
}
body.bf-training .panel .guide {
  background: var(--bf-card-lavender, #ECE8FF) !important;
  color: var(--bf-text) !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
  line-height: 1.55 !important;
  flex: 0 0 auto !important;
}
body.bf-training .sentence-index {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--bf-line-soft) !important;
  color: var(--bf-text-muted) !important;
  padding: 5px 10px 5px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  /* Rapid 의 .sentence-index 와 동일한 margin */
  margin: 14px 0 8px !important;
  width: fit-content !important;
  flex: 0 0 auto !important;
}
body.bf-training .sentence-index::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bf-charcoal);
}
body.bf-training .sentence {
  /* Rapid 의 .sentence{flex:1;min-height:0} 와 동일 — 패널 540px 안에서 남는 공간 다 차지,
     controls 가 자연스럽게 하단으로 밀려 위치하도록. (이전: flex:0 1 auto 로 중앙에 둥떠있던 버그) */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: visible !important;
  padding: 24px 0 !important;
}
body.bf-training .word-big {
  font-size: clamp(28px, 5vw, 48px) !important;
  font-weight: 800 !important;
  color: var(--bf-text) !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  word-break: break-word !important;
}
body.bf-training .example-big {
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 600 !important;
  color: var(--bf-text) !important;
  line-height: 1.45 !important;
  letter-spacing: -.005em !important;
}
body.bf-training .subword {
  font-size: 15px !important;
  color: var(--bf-text-muted) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* Right panel — Flow / Sentence list / Dictionary
   Training_Page_Layout 공통템플릿설계 v1.0 spec:
   - 패널 헤더 padding: top 16px, bottom 12px, 좌우 12px
   - 헤더 텍스트: Fraunces 600 18px Charcoal */
body.bf-training .panel.flow-panel,
body.bf-training .flow-panel,
body.bf-training .panel.aside {
  padding: 16px 12px 12px !important;
}
/* h3 (Sentence list / Flow) — 탭이 동일 라벨을 노출하므로 중복 제거.
   tabs 가 존재할 때만 숨김 (enhancement js 가 동작 중인 케이스).
   :has() 로 panel 안에 tabs 있는 경우만 매칭 */
body.bf-training .flow-panel:has(.cri1-vocab-tabs) h3,
body.bf-training .panel.aside:has(.cri1-rapid-tabs) h3,
body.bf-training.cri1-vocab-ai-enhanced .flow-panel h3,
body.bf-training.cri1-rapid-ai-enhanced .panel.aside h3 {
  display: none !important;
}

/* Tabs (cri1-vocab-tabs / cri1-rapid-tabs) — Doc spec:
   - gap 8px / 비활성 #999 / 활성 Charcoal + lime bottom-border 2px
   - '접기' 버튼은 우측 끝 정렬 */
body.bf-training .cri1-vocab-tabs,
body.bf-training .cri1-rapid-tabs,
body.bf-training.cri1-vocab-ai-enhanced .cri1-vocab-tabs,
body.bf-training.cri1-rapid-ai-enhanced .cri1-rapid-tabs {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--bf-line) !important;
  flex-wrap: nowrap !important;
}
body.bf-training .cri1-chip,
body.bf-training.cri1-vocab-ai-enhanced .cri1-chip,
body.bf-training.cri1-rapid-ai-enhanced .cri1-chip {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 6px 4px !important;
  margin-bottom: -1px !important;  /* overlap parent border-bottom */
  font-family: 'Pretendard', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #999 !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transition: color .12s, border-color .12s !important;
}
body.bf-training .cri1-chip:hover,
body.bf-training.cri1-vocab-ai-enhanced .cri1-chip:hover,
body.bf-training.cri1-rapid-ai-enhanced .cri1-chip:hover {
  color: var(--bf-charcoal) !important;
  background: transparent !important;
}
body.bf-training .cri1-chip.active,
body.bf-training.cri1-vocab-ai-enhanced .cri1-chip.active,
body.bf-training.cri1-rapid-ai-enhanced .cri1-chip.active {
  color: var(--bf-charcoal) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--bf-lime) !important;
}
body.bf-training .cri1-chip.ghost,
body.bf-training.cri1-vocab-ai-enhanced .cri1-chip.ghost,
body.bf-training.cri1-rapid-ai-enhanced .cri1-chip.ghost {
  margin-left: auto !important;
  color: #666 !important;
  background: transparent !important;
}
body.bf-training .cri1-chip.ghost:hover,
body.bf-training.cri1-vocab-ai-enhanced .cri1-chip.ghost:hover,
body.bf-training.cri1-rapid-ai-enhanced .cri1-chip.ghost:hover {
  color: var(--bf-charcoal) !important;
}
/* CRITICAL: vocab.css 의 height: 320px override — flex 컨테이너 안에서 전체 사용 */
body.bf-training .flow-list,
body.bf-training .panel.flow-panel .flow-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  padding-right: 4px !important;
}
/* Cards (.flow-item, .list-item) — Doc spec:
   - 패딩 12px (상하좌우)
   - bg Off-White (#F5F5F5 ≈ var(--bf-line-soft) #F4F4F5)
   - border 1px solid #E0E0E0 (≈ var(--bf-line) #E4E4E7)
   - 활성: Charcoal bg + Lime text
   ⚠️ `.flow-list > *` 는 .cri1-dict-card 까지 매칭해서 dict 패널에 회색 inner box 가 생기던 버그 — .flow-item 클래스만 명시 매칭 */
body.bf-training .flow-list .flow-item,
body.bf-training .panel.flow-panel .flow-list .flow-item {
  background: var(--bf-line-soft) !important;
  border: 1px solid var(--bf-line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: var(--bf-text) !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  transition: all .14s ease !important;
}
body.bf-training .flow-list .flow-item:hover,
body.bf-training .panel.flow-panel .flow-list .flow-item:hover {
  background: #fff !important;
  border-color: var(--bf-text-muted) !important;
}
/* Card label (kicker) — Doc spec: Pretendard 10px, 비활성 #666, 활성 Lime */
body.bf-training .flow-list .flow-kicker,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-item .flow-kicker {
  display: block !important;
  font-family: 'Pretendard', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #666 !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}
body.bf-training .flow-list .flow-text,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-item .flow-text {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--bf-text) !important;
  font-weight: 600 !important;
}

/* Dictionary panel — Doc spec (Vocab style master, applied to both Rapid+Vocab):
   - 헤더 라벨: Pretendard 10px Charcoal
   - 활성 전시 박스: 검정 bg + Lime text + padding 12px
   - 본문: Pretendard 13px Charcoal 줄간 1.6
   - 카드 사이 16px */
body.bf-training .cri1-vocab-dict,
body.bf-training .cri1-rapid-dict,
body.bf-training.cri1-vocab-ai-enhanced .cri1-vocab-dict,
body.bf-training.cri1-rapid-ai-enhanced .cri1-rapid-dict {
  background: transparent !important;
  padding: 0 !important;
}
/* Dict card — inner gray box 제거, flow-panel 위에 flush 하게 렌더 */
body.bf-training .cri1-dict-card,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-card,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 16px !important;
}
body.bf-training .cri1-dict-empty,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-empty,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-empty {
  border: 1px dashed var(--bf-line) !important;
  background: var(--bf-line-soft) !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  color: var(--bf-text-muted) !important;
  font-family: 'Pretendard', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
body.bf-training .cri1-dict-word,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-word,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-word {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--bf-charcoal) !important;
  line-height: 1.15 !important;
}
/* Dictionary meta — Rapid 처럼 IPA/STRESS/TYPE 를 세로 stack 으로 통일.
   legacy `.cri1-dict-card .cri1-dict-head > div:first-child .cri1-dict-meta` (spec 0,5,2)
   를 ID + 동일 패턴으로 override (spec 0,6,2) */
body.bf-training .cri1-dict-meta,
body.bf-training .cri1-dict-meta-row,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-meta,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-meta-row,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-card .cri1-dict-meta.cri1-dict-meta-row,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-card .cri1-dict-head > div:first-child .cri1-dict-meta,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-meta,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-meta-row,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-card .cri1-dict-head > div:first-child .cri1-dict-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin-top: 6px !important;
  font-family: 'Pretendard', system-ui, sans-serif !important;
  font-size: 12px !important;
  color: var(--bf-text-muted) !important;
}
body.bf-training .cri1-dict-meta-chip,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-meta-chip,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-meta-chip {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
body.bf-training .cri1-dict-meta-chip strong,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-meta-chip strong,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-meta-chip strong {
  min-width: 56px !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bf-text-muted) !important;
}
body.bf-training .cri1-dict-meta-chip > span,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-meta-chip > span,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-meta-chip > span {
  font-size: 13px !important;
  color: var(--bf-charcoal) !important;
  font-weight: 600 !important;
}
body.bf-training .cri1-dict-play,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-play,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-play {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
body.bf-training .cri1-dict-link,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-link,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-link {
  color: var(--bf-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body.bf-training .cri1-dict-sec,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-sec,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-sec {
  border-top: 1px solid var(--bf-line) !important;
  padding-top: 12px !important;
}
body.bf-training .cri1-dict-label,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-label,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-label {
  font-family: 'Pretendard', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bf-charcoal) !important;
  margin-bottom: 6px !important;
}
body.bf-training .cri1-dict-text,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-text,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-text {
  font-family: 'Pretendard', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--bf-charcoal) !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}
body.bf-training .cri1-dict-synonym,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-synonym,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-synonym {
  background: var(--bf-line-soft) !important;
  border: 1px solid var(--bf-line) !important;
  color: var(--bf-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}
body.bf-training .cri1-dict-synonym:hover,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-synonym:hover,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-synonym:hover {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}
body.bf-training .cri1-dict-save,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-save,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-save {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  min-height: 38px !important;
  padding: 10px 14px !important;
}
body.bf-training .cri1-dict-footer,
body.bf-training.cri1-vocab-ai-enhanced .cri1-dict-footer,
body.bf-training.cri1-rapid-ai-enhanced .cri1-dict-footer {
  background: transparent !important;
  border-top: 1px solid var(--bf-line) !important;
}
/* Active 카드 — Rapid 패턴(Charcoal+Lime) 강제 적용 */
body.bf-training .flow-list .flow-item.active,
body.bf-training .flow-list .flow-item.selected,
body.bf-training .panel.flow-panel .flow-list .flow-item.active,
body.bf-training.cri1-vocab-ai-enhanced .flow-list .flow-item.active,
body.bf-training.cri1-rapid-ai-enhanced .flow-list .flow-item.active,
body.bf-training .flow-list .active,
body.bf-training .flow-list .selected {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(13,13,13,.18) !important;
  transform: translateX(2px) !important;
}
body.bf-training .flow-list .flow-item.active .flow-kicker,
body.bf-training .flow-list .flow-item.selected .flow-kicker,
body.bf-training .flow-list .active .flow-kicker,
body.bf-training .flow-list .selected .flow-kicker,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-item.active .flow-kicker,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-item.selected .flow-kicker {
  color: var(--bf-lime) !important;
}
body.bf-training .flow-list .flow-item.active .flow-text,
body.bf-training .flow-list .flow-item.selected .flow-text,
body.bf-training .flow-list .active .flow-text,
body.bf-training .flow-list .selected .flow-text,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-item.active .flow-text,
body.bf-training.cri1-vocab-ai-enhanced .main:not(.cri1-aside-collapsed) .flow-item.selected .flow-text {
  color: var(--bf-lime) !important;
}

/* Done panel (vocab.css는 height: 430px 강제) — bf 일관성으로 release */
body.bf-training .done-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 220px) !important;
}

/* TTS meta + footer */
body.bf-training .tts-meta-wrap {
  margin: 10px 0 4px !important;
}
/* Vocab .controls — Rapid 의 .panel .controls inline 스타일 그대로:
   sticky bottom + padding-top:10 padding-bottom:18 + margin-top:10 */
body.bf-training .panel .controls {
  position: sticky !important;
  bottom: 0 !important;
  background: #fcfdff !important;
  padding-top: 10px !important;
  padding-bottom: 18px !important;
  margin-top: 10px !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
}
/* Vocab page overall — bf-main padding 줄여서 viewport 사용률 ↑ */
body.bf-training .bf-main { padding: 18px 22px 18px !important; }
body.bf-training .progress-wrap { padding: 0 0 12px !important; }
body.bf-training .footer-nav { padding-top: 12px !important; }

/* Vocab aside collapse handle — Rapid 와 완전 동일 (body 직접 자식, position:fixed).
   v1.14.0-step6: desktop 한정 (min-width 981) 으로 감싸서 모바일 hide 룰
   (max-width 980) 과 충돌 회피. */
@media (min-width: 981px) {
body.bf-training #cri1VocabAsideHandle,
body.bf-training .cri1-vocab-aside-handle,
body.cri1-vocab-ai-enhanced.bf-training #cri1VocabAsideHandle,
body.cri1-vocab-ai-enhanced.bf-training .cri1-vocab-aside-handle {
  background: #fff !important;
  border: 1px solid rgba(220,228,248,.95) !important;
  color: #6172ce !important;
  box-shadow: 0 12px 30px rgba(35,47,89,.16) !important;
  z-index: 2147483647 !important;
  width: 34px !important;
  height: 72px !important;
  border-radius: 18px !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  transition: background .14s, color .14s, box-shadow .14s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  overflow: visible !important;
  clip-path: none !important;
}
}
body.bf-training .cri1-vocab-aside-handle:hover {
  background: var(--bf-charcoal) !important;
  color: var(--bf-lime) !important;
  border-color: var(--bf-charcoal) !important;
}
/* 모달 열렸을 때만 숨김 (vocab handle도 동일 처리)
   v1.14.7: ID 매칭 추가 — cri1_vocab_enhancements.css 의 #cri1VocabAsideHandle
   룰 (specificity 1,1,1 → display:flex !important) 을 누르기 위해
   #cri1VocabAsideHandle ID 셀렉터 포함 (specificity 1,4,1 으로 win). */
body.bf-training:has(.tts-modal:not(.hidden)) .cri1-vocab-aside-handle,
body.bf-training:has(.tts-modal:not(.hidden)) #cri1VocabAsideHandle,
body.bf-training:has(.fs-search-modal:not(.hidden)) .cri1-vocab-aside-handle,
body.bf-training:has(.fs-search-modal:not(.hidden)) #cri1VocabAsideHandle,
body.bf-training:has(.identity-backdrop) .cri1-vocab-aside-handle,
body.bf-training:has(.identity-backdrop) #cri1VocabAsideHandle {
  display: none !important;
}

/* ─── v1.11.1: 학습 진행 라벨 + 상태 메시지 한 줄 정렬 ──────────────────
   stageLabel(Rapid) / vocabStageLabel(Vocab) 옆에 status 메시지가 인라인
   표시. status 텍스트가 비어도 row 자체가 stageLabel 높이를 유지하므로
   본문 흐름 layout shift 없음. 좌측 시작점을 본문 panel 내부 컨텐츠와
   동일한 시작선(panel padding 24px)에 정렬해 라벨이 본문 좌정렬 기준과
   맞도록 함. (route-layout-patch 의 main padding 0 24px 이 부모에 이미
   적용되어 있어 stage-row 자체는 24px 만 더해 본문과 정확히 맞물림.)        */
body.bf-training .bf-stage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  /* panel 밖(trainingView 직접 자식) 위치. trainingView 자체 좌측이 페이지
     타이틀(h1 'Unit 01 · ...') 시작점과 일치하므로 padding-left 0 으로
     라벨이 페이지 타이틀과 동일한 시작 라인에 정렬됨. 우측은 main grid
     padding 과 동일한 24px 로 본문 우측 끝과 align. */
  padding: 0 24px 2px 0;
  margin: 6px 0 8px;
}
body.bf-training .bf-stage-row > .bf-stage-info {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}
/* 키보드 단축키 안내 — stage-row 우측 끝에 작은 칩. 평소엔 옅게 보이고
   마우스 호버 시 즉시 풍선이 떠 단축키 안내 노출.                            */
body.bf-training .bf-stage-row .bf-stage-shortcuts {
  position: relative;
  font-size: 11px;
  color: #8896b4;
  opacity: 0.7;
  white-space: nowrap;
  letter-spacing: 0.3px;
  cursor: help;
  flex: 0 0 auto;
  font-style: normal;
}
/* v1.14.50: 자동 재생 토글 chip — 단축키 chip 과 동일 톤.
 * v1.14.53: stage-row 의 space-between 으로 chip 이 가운데에 외롭게 떠있던 문제
 * (PO 보고) → margin-left:auto 로 좌측 빈 공간 흡수 → chip + 단축키 chip 이
 * 우측 그룹으로 자연스럽게 묶임. */
body.bf-training .bf-stage-row .bf-rapid-autoplay-chip {
  font-size: 11px; color: #8896b4; opacity: 0.7;
  white-space: nowrap; letter-spacing: 0.3px;
  background: transparent; border: 0; padding: 2px 4px;
  cursor: pointer; flex: 0 0 auto;
  font-family: inherit; line-height: 1.4;
  transition: opacity .14s;
  margin-left: auto;           /* 좌측 빈 공간 흡수 → 우측 정렬 */
  /* v1.14.55: border-right 제거 (PO 보고 '눈썹 같은 라인'). chip 과 단축키 chip
   * 사이 간격은 row gap (14px) 으로 충분. */
}
body.bf-training .bf-stage-row .bf-rapid-autoplay-chip b {
  color: #5b6786; font-weight: 700;
  background: #eef2ff; padding: 1px 6px; border-radius: 5px;
  margin-left: 4px; font-size: 10.5px;
}
body.bf-training .bf-stage-row .bf-rapid-autoplay-chip[data-on="false"] b {
  background: #f3f4f6; color: #9ca3af;
}
body.bf-training .bf-stage-row .bf-rapid-autoplay-chip:hover { opacity: 1; }
body.bf-training .bf-stage-row .bf-stage-shortcuts b {
  color: #5b6786;
  font-weight: 700;
  background: #eef2ff;
  padding: 1px 6px;
  border-radius: 5px;
  margin: 0 1px;
  font-size: 10.5px;
}
body.bf-training .bf-stage-row .bf-stage-shortcuts:hover {
  opacity: 1;
}
/* hover 시 즉시 풍선으로 단축키 풀안내 노출. 칩 위쪽(Search 영역)이 다른
   상단 컴포넌트들과 겹칠 수 있으므로 풍선을 칩 아래쪽으로 띄움. z-index 는
   상단 GNB 와 search 풍선보다 위에 오도록 최대값 사용. */
body.bf-training .bf-stage-row .bf-stage-shortcuts:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  white-space: pre-line;
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 2147483647;
  pointer-events: none;
}
/* v1.11.1 — descendant selector 로 변경. wrapper(.bf-stage-info) 가 끼어도
   라벨/status 톤이 그대로 유지되도록 직접 자식 selector 대신 후손 selector.
   wrapper 추가/변경에 강건한 구조.                                          */
body.bf-training .bf-stage-row .stage,
body.bf-training .bf-stage-row #stageLabel,
body.bf-training .bf-stage-row .stage-label,
body.bf-training .bf-stage-row #vocabStageLabel {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #6f7cac !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 1.2em;
  white-space: nowrap;
  font-style: normal !important;
}
/* status 는 라벨과 시각적으로 구분되도록 italic + 옅은 톤. 빈 상태에도
   height 유지로 row 가 흔들리지 않음. !important 는 페이지 인라인의
   `#v9-restore-style` 룰을 덮기 위해 필요.                                */
body.bf-training .bf-stage-row .status-inline,
body.bf-training .bf-stage-row .fast-status,
body.bf-training .bf-stage-row .stage-status,
body.bf-training .bf-stage-row #status,
body.bf-training .bf-stage-row #fastStatus {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #a3afc9 !important;
  opacity: 0.9 !important;
  min-height: 1.2em;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: italic !important;
  display: inline !important;
}


/* ──────────────────────────────────────────────────────────
 * v1.14.7: .hidden override fix
 * bf-training.css 의 .panel { display: flex !important } 룰들이 (0,2,1)
 * specificity 로 .hidden { display: none !important } (0,1,0) 을 누르고
 * 있던 회귀. doneView 처럼 첫 진입 시 hidden 인 .panel 이 시각적으로
 * 노출되던 문제. .panel.hidden / .done-panel.hidden 명시 룰 (0,3,1) 로
 * 강제 hide.
 * ────────────────────────────────────────────────────────── */
body.bf-training .panel.hidden,
body.bf-training .done-panel.hidden,
body.bf-training section.hidden,
body.bf-training article.hidden {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 모바일 학습 화면 최적화 — PO 의 모바일 UI/UX 진입장벽 fix
 *
 * 진단된 문제 (375x812 viewport):
 *   - 헤더 + breadcrumb + 페이지 타이틀 + 단축키 안내 = viewport 의 35% 차지
 *   - STT 패널이 viewport 밖 (top=827 > viewport=812) → 학습 핵심 도구 안 보임
 *   - PC 키보드 단축키 안내 (Space ←/→ T) 가 모바일에 그대로 노출 → 무의미
 *
 * fix 방향:
 *   1) 단축키 안내 hide (모바일)
 *   2) STT 패널 fixed bottom — viewport 하단 영구 고정, 늘 보임
 *   3) 페이지 타이틀 + breadcrumb 컴팩트
 *   4) Stage row 컴팩트
 *   5) Controls 한 줄 + Play 강조
 * ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 1) PC 키보드 단축키 안내 — 모바일에선 무의미. */
  body.bf-training .bf-stage-shortcuts { display: none !important; }

  /* v1.14.33: 모바일에서 우측 aside floating 핸들 완전 hide.
   * PO 보고 '딕셔너리 버튼 위치 이상함, 플로팅이 안 어울림'. 모바일은 aside
   * 가 본문 아래 column reflow 라 floating overlay 가 sentence text 위에
   * 겹쳐 보여 매우 어색. 모바일에선 aside collapse 기능 자체 제거 — '접기'
   * 탭 chip 도 hide. 사용자는 항상 sentence list + dictionary tabs 노출. */
  body.bf-training #cri1RapidAsideHandle,
  body.bf-training #cri1VocabAsideHandle,
  body.bf-training .cri1-rapid-aside-handle,
  body.bf-training .cri1-vocab-aside-handle {
    display: none !important;
  }
  /* 접기 탭 chip 도 hide — collapse 기능 자체 모바일에서 미노출 */
  body.bf-training #cri1RapidCloseBtn,
  body.bf-training #cri1VocabCloseBtn {
    display: none !important;
  }
  /* 혹시 이전 세션에서 collapsed 상태였으면 강제 펼침 — display: none 으로
   * 숨긴 aside 내용 다시 노출. */
  body.bf-training .main.cri1-aside-collapsed > .aside,
  body.bf-training .main.cri1-aside-collapsed > .panel.aside {
    display: flex !important;
  }
  /* v1.14.33: floating handle 모바일에서 완전 제거됨 (위 룰에서 display: none) */

  /* 1.5) backdrop-filter 모바일 해제 — main 에 적용된 frosted glass 효과가
   *      자식의 position:fixed 의 containing block 을 main 으로 바꿔서 STT
   *      패널 fixed bottom 이 viewport 가 아닌 main 안쪽 기준으로 잘못 위치
   *      하던 회귀. 모바일에서는 시각 효과보다 STT 패널 viewport 부착이 우선. */
  body.bf-training main.bf-main,
  body.bf-training .bf-main {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 2) STT 패널 fixed bottom — viewport 하단 영구 고정.
   *    학습 핵심 도구가 늘 화면에 보이도록. padding/margin 일관 — 모든 자식
   *    (toolbar / status box / result) 의 안쪽 여백이 안정적이게. */
  body.bf-training #bfSpeakPanel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.12) !important;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* 패널 안 children — margin 0 강제. gap 으로만 간격 통일. */
  body.bf-training #bfSpeakPanel > * {
    margin: 0 !important;
  }
  /* STT 패널이 fixed 라 콘텐츠 가려지지 않게 bf-main bottom padding 늘림.
   * v1.14.30: padding-left/right 도 명시. 이전엔 line 1683 의 22px 가
   * 적용되어 topbar(12px) vs stagePanel(14px) 와 좌우 여백 불일치 → PO
   * 보고 '좌우 여백이 아래 콘텐츠 시작점과 다름'. 14px 로 통일. */
  body.bf-training .bf-main {
    padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* 컨텐츠 컨테이너들 — 좌우 padding 제거. main 의 14px 가 유일한 L/R 여백. */
  body.bf-training main.bf-main > .bf-topbar,
  body.bf-training main.bf-main > .panel.main,
  body.bf-training main.bf-main > .panel:not(.aside),
  body.bf-training main.bf-main > .bf-stage-row,
  body.bf-training main.bf-main > .progress-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3) 모바일 퍼스트 헤더 — bf-topbar 컴팩트.
   *    이전 117px → 목표 ~70px. breadcrumb 줄, h1 작게, Search/avatar 미니멀. */
  body.bf-training .bf-topbar {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  body.bf-training .bf-topbar-title-block {
    min-width: 0 !important; /* flex shrink 위함 */
    flex: 1 1 0 !important;
    overflow: hidden !important;
  }
  /* breadcrumb — befluent.css 의 모바일 룰이 가운데 segment (Unit 01) 만 ←
   * back link 로 노출. training 페이지 specific hide 제거 (befluent.css 룰
   * 우선 작동하도록). */
  /* h1 페이지 타이틀 — 더 작고 한 줄, 길면 ellipsis */
  body.bf-training .bf-topbar-title-block h1,
  body.bf-training h1.bf-page-title,
  body.bf-training h1 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  /* 햄버거 — 모든 페이지 동일 (befluent.css 의 mobile 공통 룰 사용 — 36x36).
   * v1.14.31: PO 보고 '헤더는 공통인데 페이지마다 햄버거 위치/크기 다름'.
   * 이전 32x32 override 삭제, 공통 36x36 그대로 사용. */
  body.bf-training .bf-hamburger {
    flex-shrink: 0 !important;
  }
  /* PO 룰 수정: 검색은 우측 노출 유지 (돋보기 아이콘만, 라운드 없이).
   * 프로필 / streak / 기타 우측 영역만 hide. */
  body.bf-training .bf-topbar-right > *:not(.bf-search-btn) { display: none !important; }
  body.bf-training .bf-topbar-right {
    gap: 0 !important;
    flex: 0 0 auto !important; /* shrink 안 함 — 한 줄 유지 */
    align-self: center !important;
  }
  /* 좌측 (햄버거 + breadcrumb + h1) — shrink 가능 + 한 줄 유지 */
  body.bf-training .bf-topbar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  body.bf-training .bf-topbar-left {
    flex: 1 1 0 !important;
    min-width: 0 !important; /* ellipsis 위해 0 */
    overflow: hidden !important;
  }
  /* 검색 버튼 — befluent.css 의 mobile 공통 룰 (36x36) 사용. v1.14.31:
   * training 페이지만 32x32 였던 override 삭제. 모든 페이지 동일 크기. */
  body.bf-training .bf-search-btn {
    cursor: pointer !important;
  }
  body.bf-training .bf-search-btn:hover,
  body.bf-training .bf-search-btn:focus,
  body.bf-training .bf-search-btn:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  body.bf-training .bf-search-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
  }
  body.bf-training .bf-search-btn .bf-key-cap,
  body.bf-training .bf-search-btn .bf-search-kbd,
  body.bf-training .bf-search-btn span { display: none !important; }

  /* topbar 위/아래 padding 더 줄임 + 위 margin 제거 → 빈 공간 제거 */
  body.bf-training .bf-topbar {
    padding: 4px 12px !important;
    margin-top: 0 !important;
  }
  /* shell 의 위 padding 도 줄임 */
  body.bf-training .bf-main { padding-top: 8px !important; }

  /* 4) Stage row (STAGE 1 · SENTENCE AUDIO · SENTENCE 1 OF 14) 컴팩트 */
  body.bf-training .bf-stage-row {
    padding: 6px 12px !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }
  body.bf-training .bf-stage-info,
  body.bf-training .stage-label,
  body.bf-training .segment-meta {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* 4.5) Stage 1~4 탭 chip — 더 작게 (PO 룰 #3) */
  body.bf-training .stage-tab,
  body.bf-training .stage-nav button,
  body.bf-training #stageNav button {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
  }
  /* progress bar 작게 */
  body.bf-training .progress,
  body.bf-training #progressFill { height: 3px !important; }

  /* 5) Controls (Play/Pause/Prev/Next) — 한 줄, PC 톤앤매너 유지.
   *    PO 룰: PC 와 같은 흰색 pill + .primary 만 dark+lime CTA. 사이즈는
   *    stage-tab chip 과 유사하게 컴팩트하게 (이전 48px 너무 큼). */
  body.cri1-rapid-ai-enhanced.bf-training #controls,
  body.cri1-rapid-ai-enhanced.bf-training .controls,
  body.cri1-vocab-ai-enhanced.bf-training #controls,
  body.cri1-vocab-ai-enhanced.bf-training .controls,
  body.bf-training #controls,
  body.bf-training .controls {
    display: grid !important;
    /* 버튼 수에 따라 auto-fit. 2~5개 어떤 케이스든 한 줄 + 균등 */
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)) !important;
    gap: 6px !important;
    padding: 6px 0 !important;
  }
  /* Play 만 약간 강조 (grid-column span 1.4 효과는 못 쓰지만 padding 으로
   * 시각 무게 다르게) — 단, auto-fit 균등 너비 유지가 우선이라 추가 강조 없음. */
  /* 4버튼 공통 — pill (999px radius), 컴팩트 height, 텍스트 hide + 아이콘 표시 */
  body.cri1-rapid-ai-enhanced.bf-training #controls button,
  body.cri1-vocab-ai-enhanced.bf-training #controls button,
  body.bf-training #controls button,
  body.bf-training .controls button,
  body.bf-training #controls button.primary,
  body.bf-training #controls button.secondary,
  body.bf-training #controls button.ghost,
  body.bf-training .controls button.primary,
  body.bf-training .controls button.secondary,
  body.bf-training .controls button.ghost {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important; /* 텍스트 hide, ::before 아이콘 표시 */
    border-radius: 999px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: all .15s !important;
  }
  /* Play (.primary) — dark+lime CTA (PC 와 동일) */
  body.bf-training #controls button.primary,
  body.bf-training .controls button.primary,
  body.cri1-rapid-ai-enhanced.bf-training #controls button.primary,
  body.cri1-vocab-ai-enhanced.bf-training #controls button.primary {
    background: var(--bf-charcoal, #0f172a) !important;
    color: var(--bf-lime, #d4ff00) !important;
    border: 1px solid var(--bf-charcoal, #0f172a) !important;
  }
  /* Pause/Prev/Next 등 비-primary — 흰색 outline pill (PC 와 동일) */
  body.bf-training #controls button:not(.primary),
  body.bf-training .controls button:not(.primary),
  body.cri1-rapid-ai-enhanced.bf-training #controls button:not(.primary),
  body.cri1-vocab-ai-enhanced.bf-training #controls button:not(.primary) {
    background: var(--bf-surface-solid, #fff) !important;
    color: var(--bf-text, #18181b) !important;
    border: 1px solid var(--bf-line, #e5e5e7) !important;
  }
  /* hover/active 미세 톤 */
  body.bf-training #controls button:hover,
  body.bf-training .controls button:hover { filter: brightness(.97) !important; }
  body.bf-training #controls button:active,
  body.bf-training .controls button:active { transform: scale(.97) !important; }
  /* 아이콘 ::before — data-action 별. v1.14.29: PO 보고 '버튼 글씨 안 보임'
   * → 화살표/아이콘 가시성 강화 (font-size + weight + 색 명시). */
  body.bf-training #controls button[data-action="play"]::before,
  body.bf-training .controls button[data-action="play"]::before {
    content: '▶';
    font-size: 16px;
    line-height: 1;
    color: inherit;
  }
  body.bf-training #controls button[data-action="pause"]::before,
  body.bf-training .controls button[data-action="pause"]::before {
    content: '❚❚';
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
    color: inherit;
  }
  body.bf-training #controls button[data-action="prev"]::before,
  body.bf-training .controls button[data-action="prev"]::before {
    content: '←';
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
  }
  body.bf-training #controls button[data-action="next"]::before,
  body.bf-training .controls button[data-action="next"]::before {
    content: '→';
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
  }
  /* Stage 3 추가 — replay 버튼 */
  body.bf-training #controls button[data-action="replay"]::before,
  body.bf-training .controls button[data-action="replay"]::before {
    content: '↻';
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
  }
  /* Stage 4 — timer / resetTimer */
  body.bf-training #controls button[data-action="timer"]::before,
  body.bf-training .controls button[data-action="timer"]::before {
    content: '⏱';
    font-size: 16px;
    line-height: 1;
    color: inherit;
  }
  body.bf-training #controls button[data-action="resetTimer"]::before,
  body.bf-training .controls button[data-action="resetTimer"]::before {
    content: '↺';
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
  }
  /* v1.14.36: Vocab 페이지는 button 에 data-action 없이 id 만 있음. PO 보고
   * '보캡 버튼 안 보임'. id 기반 ::before 도 추가해 Rapid 와 동일 시각. */
  body.bf-training .controls button#playBtn::before,
  body.bf-training #controls button#playBtn::before {
    content: '▶'; font-size: 16px; line-height: 1; color: inherit;
  }
  body.bf-training .controls button#pauseBtn::before,
  body.bf-training #controls button#pauseBtn::before {
    content: '❚❚'; font-size: 13px; letter-spacing: 1px; line-height: 1; color: inherit;
  }
  body.bf-training .controls button#prevBtn::before,
  body.bf-training #controls button#prevBtn::before {
    content: '←'; font-size: 20px; font-weight: 800; line-height: 1; color: inherit;
  }
  body.bf-training .controls button#nextBtn::before,
  body.bf-training #controls button#nextBtn::before {
    content: '→'; font-size: 20px; font-weight: 800; line-height: 1; color: inherit;
  }
  body.bf-training .controls button#replayBtn::before,
  body.bf-training #controls button#replayBtn::before {
    content: '↻'; font-size: 18px; font-weight: 800; line-height: 1; color: inherit;
  }
  /* 비활성 (disabled) 버튼 — 시각 흐릿하게 */
  body.bf-training #controls button.is-disabled::before,
  body.bf-training .controls button.is-disabled::before,
  body.bf-training #controls button[disabled]::before,
  body.bf-training .controls button[disabled]::before { opacity: .35; }

  /* 6) STT 패널 (fixed bottom) 내부 — Mode A status + Mode B result 컴팩트.
   *    status 박스 펼쳐졌을 때도 화면 가리는 영역 최소화. 안쪽 children 의
   *    padding 동일 horizontal (12px) 로 정렬 일관. */
  body.bf-training #bfSpeakPanel {
    /* v1.14.34: min-height 강제 제거. */
    max-height: 60vh !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }
  /* v1.14.50: SR 미지원 디바이스 (iOS Safari 등) 에서 패널 비중 축소 — 자동인식
   * 토글 + chip 이 hide 되고 안내문도 ⓘ 로 압축됐지만 패널 자체 padding 이 같음.
   * 미지원 시 padding 줄여서 카드 학습 영역 확보 (PO 보고 '패널 비중 큼'). */
  body.bf-training #bfSpeakPanel .bf-speak-toolbar[data-sr-unsupported] {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  body.bf-training #bfSpeakPanel:has(.bf-speak-toolbar[data-sr-unsupported]) {
    padding: 6px 10px !important;
  }
  body.bf-training #bfSpeakPanel .bf-speak-toolbar[data-sr-unsupported] .bf-balance-pill {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  body.bf-training #bfSpeakPanel .bf-speak-toolbar[data-sr-unsupported] .bf-speak-coaching {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  /* sentence card — 위쪽 본문 학습 영역은 라운드 유지 + 잘 보이도록 */
  body.bf-training section.main,
  body.bf-training .panel.main {
    border-radius: 18px !important;
  }
  /* sentence text — viewport 넘치지 않게 자동 조절 (위 본문 학습 패널 유지) */
  body.bf-training #sentenceText.sentence {
    font-size: clamp(18px, 5.2vw, 28px) !important;
    line-height: 1.35 !important;
  }
  /* status box — 인식 텍스트 풀로 노출 + 내부 콘텐츠 자체를 크게 (가독성).
   * 이전엔 status box 가 작아서 target text + 내 발음 영역이 cut off,
   * 그 와중에 패널만 min-height 38vh 로 강제 키워 빈 공간만 생김 → 본말전도.
   * 이번 fix: status 박스 안 padding/font/gap 키워서 콘텐츠 자체가 자연
   * 38~45vh 차지하게. 패널은 콘텐츠 따라 자동 확장 (min-height 강제 없음). */
  body.bf-training #bfSpeakStatus {
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    gap: 10px !important;
  }
  /* status box 안 각 라인 row */
  body.bf-training #bfSpeakStatus .bf-speak-line {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* target text (이거 읽으세요) — 키우고 잘 보이게. v1.14.35: 어두운 패널 위
   * 어두운 텍스트 색 (var(--bf-text)) 이라 모바일에서 안 보였음. 명시 라이트 */
  body.bf-training #bfSpeakStatus .bf-recog-target {
    font-size: 15px !important;
    line-height: 1.55 !important;
    padding: 8px 0 !important;
    color: rgba(216, 222, 240, 0.65) !important; /* 미인식 단어 회색 라이트 */
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  /* target text 안 단어 spans — 라이트 톤 + 인식되면 lime */
  body.bf-training #bfSpeakStatus .bf-recog-w {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 1px !important;
    color: rgba(216, 222, 240, 0.55) !important;
  }
  body.bf-training #bfSpeakStatus .bf-recog-w.on {
    color: #d4ff00 !important;
    font-weight: 700 !important;
  }
  /* '내 발음' 레이블 row — 라이트 톤 */
  body.bf-training #bfSpeakStatus .bf-recog-live-lbl-row {
    padding-top: 6px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin-top: 4px !important;
  }
  body.bf-training #bfSpeakStatus .bf-recog-live-lbl {
    font-size: 12px !important;
    color: rgba(216, 222, 240, 0.85) !important; /* 라이트 — 어두운 패널 위에서 잘 보임 */
    font-weight: 700 !important;
  }
  /* 라이브 인식 텍스트도 라이트 */
  body.bf-training #bfSpeakStatus .bf-recog-live-text {
    color: #e8eaf0 !important;
    background: rgba(255,255,255,0.04) !important;
  }
  /* '듣고 있어요' 라벨도 라이트 */
  body.bf-training #bfSpeakStatus .bf-speak-label {
    color: rgba(216, 222, 240, 0.85) !important;
  }
  /* 인식 라이브 텍스트 영역 — 의미 있는 placeholder + 잘 보이는 크기 */
  body.bf-training #bfSpeakStatus .bf-recog-live-text {
    min-height: 56px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 8px !important;
    color: var(--bf-text, #e8eaf0) !important;
  }
  /* live text placeholder 는 cri1_rapid_enhancements.css 의 ::after 가 이미 처리.
   * v1.14.34: 중복 제거 — 두 번 표시되던 버그. */
  /* 내부 children 간격 컴팩트 (panel 자체 max-height 키운 만큼 안 패딩 절약) */
  body.bf-training #bfSpeakPanel { gap: 6px !important; }
  body.bf-training #bfSpeakPanel .bf-speak-toolbar { gap: 6px !important; }
  /* status box 자체 max-height 제한 해제 — 패널이 충분히 크니까 내부 스크롤
   * 불필요. target text + recognized live text 둘 다 풀로 노출. */
  body.bf-training #bfSpeakStatus {
    max-height: none !important;
  }
  body.bf-training #bfSpeakPanel .bf-speak-toolbar {
    gap: 6px !important;
    flex-wrap: nowrap !important; /* v1.14.35: 한 줄 유지 — wrap 했더니 잔액 잘려서 ... */
    padding: 0 !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  /* v1.14.36: 빈 spacer 모바일 hide — 38px 차지하던 공간 회수 (잔액 자리 확보) */
  body.bf-training #bfSpeakPanel .bf-speak-toolbar-spacer {
    display: none !important;
  }
  /* v1.14.39: SR 미지원 환경 — toolbar 구조 동일, 토글+chip 만 hide.
   * UI 통일성 유지 + 클릭 바인딩/잔액 fetch 그대로 작동. 안내 메시지는
   * toolbar 아래 별도 row 로 노출. */
  body.bf-training #bfSpeakPanel .bf-speak-toolbar[data-sr-unsupported] .bf-speak-toggle,
  body.bf-training #bfSpeakPanel .bf-speak-toolbar[data-sr-unsupported] .bf-speak-repeat,
  body.bf-training #bfSpeakPanel .bf-speak-toolbar[data-sr-unsupported] .bf-vocab-repeat-chip {
    display: none !important;
  }
  body.bf-training #bfSpeakPanel .bf-speak-sr-notice {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: rgba(216, 222, 240, 0.9) !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    border-left: 3px solid rgba(155, 171, 255, 0.5) !important;
  }
  /* 토글 (마이크 + 자동 인식 + 1/2 chip) — 너무 넓어지지 않게. shrink 허용 */
  body.bf-training #bfSpeakPanel .bf-speak-toggle-row,
  body.bf-training #bfSpeakPanel .bf-speak-toolbar > label,
  body.bf-training #bfSpeakPanel .bf-speak-toolbar > .bf-speak-toggle {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  body.bf-training #bfSpeakPanel .bf-speak-toggle-label {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  body.bf-training #bfSpeakPanel .bf-speak-coaching {
    padding: 7px 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important; /* 발음 코칭 버튼은 줄어들지 않음 (가장 중요한 CTA) */
    white-space: nowrap !important;
  }
  /* 잔액 pill — text 잘림 방지. 라벨을 'cr' 만 노출하고 숫자 풀 */
  body.bf-training #bfSpeakPanel .bf-balance-pill {
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* '0/2' chip 등 토글 옆 작은 chip */
  body.bf-training #bfSpeakPanel .bf-speak-repeat,
  body.bf-training #bfSpeakPanel .bf-vocab-repeat-chip {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  /* 발음 코칭 버튼 글자도 살짝 줄여 잔액 자리 확보 */
  body.bf-training #bfSpeakPanel .bf-speak-coaching {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
  }
  /* v1.14.34: 옛 컴팩트 룰 제거 — PO 보고 'status 텍스트 안 보임'.
   * 위 라인 2215 의 v1.14.34 룰에서 status 안 콘텐츠 크게 + 패널 자연 확장. */
  body.bf-training #bfSpeakStatus {
    margin: 0 !important;
    border-radius: 10px !important;
  }
  /* '마이크 권한이 필요해요' 같은 multi-line 안내 — 한 줄 압축 */
  body.bf-training #bfSpeakStatus.info,
  body.bf-training #bfSpeakStatus.missed {
    padding: 6px 8px !important;
  }
  body.bf-training #bfSpeakStatus.info strong,
  body.bf-training #bfSpeakStatus.missed strong { font-size: 12px !important; display: block; margin-bottom: 2px; }
  body.bf-training #bfSpeakStatus.info span,
  body.bf-training #bfSpeakStatus.missed span { font-size: 10px !important; opacity: .85 !important; }
  body.bf-training #bfSpeakStatus.info br,
  body.bf-training #bfSpeakStatus.missed br { display: none !important; }
  /* Mode B (발음 코칭) result — 컴팩트 + 긴 텍스트 줄바꿈 보장 */
  body.bf-training #bfSpeakPanel .bf-stt-result {
    font-size: 12px !important;
    padding: 10px 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 결과 안 모든 텍스트 컨테이너 — 잘림 방지 */
  body.bf-training #bfSpeakPanel .bf-stt-result *,
  body.bf-training #bfSpeakPanel .bf-stt-transcript,
  body.bf-training #bfSpeakPanel .bf-stt-heard,
  body.bf-training #bfSpeakPanel .bf-stt-coaching-msg,
  body.bf-training #bfSpeakPanel .bf-stt-speed-msg {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* '들린 말' / 코칭 메시지 / 속도 메시지 박스 — flex 안에서 자식이 overflow
   * 안 하도록 flex item min-width 0 강제 */
  body.bf-training #bfSpeakPanel .bf-stt-result > * {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* STT 버튼 group — PC 톤앤매너 그대로 (radius 999px pill, 컴팩트 size).
   * PC: 녹음 padding 7px 14px, font 12.5px, radius 999px, 어두운 톤.
   * 모바일은 같은 톤 유지하되 터치 영역만 약간 키움 (height 38px).
   * 이전 height 44px + radius 10px 는 PO 보고 'PC 와 톤앤매너 다르다'. */
  body.bf-training #bfSpeakPanel .bf-stt-btn-group {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    align-items: center !important;
    align-self: flex-start !important;
  }
  body.bf-training #bfSpeakPanel .bf-stt-btn,
  body.bf-training #bfSpeakPanel .bf-stt-cancel-rec,
  body.bf-training #bfSpeakPanel .bf-stt-action,
  body.bf-training #bfSpeakPanel .bf-stt-rerecord,
  body.bf-training #bfSpeakPanel .bf-stt-close,
  body.bf-training #bfSpeakPanel .bf-stt-playback {
    flex: 0 1 auto !important; /* PC 처럼 자연 사이즈 */
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 999px !important; /* PC pill */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    pointer-events: auto !important; /* PO 보고: 취소 클릭 안 됨 → 강제 활성 */
    position: relative !important;
    z-index: 1 !important;
  }
  /* 녹음 (primary action) — PC 와 동일 어두운 톤 + 라이트 텍스트 */
  body.bf-training #bfSpeakPanel .bf-stt-btn {
    background: rgba(20, 22, 28, .65) !important;
    color: #d8def0 !important;
    border: 1px solid rgba(155, 171, 255, .35) !important;
  }
  /* 취소 / 닫기 / 다시 녹음 / 듣기 / 닫고 재개 — PC outline (라이트 톤) */
  body.bf-training #bfSpeakPanel .bf-stt-cancel-rec,
  body.bf-training #bfSpeakPanel .bf-stt-close,
  body.bf-training #bfSpeakPanel .bf-stt-rerecord,
  body.bf-training #bfSpeakPanel .bf-stt-playback {
    background: transparent !important;
    color: #c6cde2 !important;
    border: 1px solid rgba(216, 222, 240, .35) !important;
  }
  /* 긴 라벨 (닫고 자동 인식 재개 등) — font 만 살짝 작게, padding 유지 */
  body.bf-training #bfSpeakPanel .bf-stt-close,
  body.bf-training #bfSpeakPanel .bf-stt-rerecord,
  body.bf-training #bfSpeakPanel .bf-stt-playback {
    font-size: 11.5px !important;
    padding: 0 12px !important;
    font-weight: 600 !important;
  }
  /* bf-stt-cancelled-row 도 자연 사이즈 layout (PC 와 동일) */
  body.bf-training #bfSpeakPanel .bf-stt-cancelled-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
}
/* v1.14.41: hidden attribute 강제 적용 — media query 밖에 두어 PC/모바일 모두
 * 적용. 위의 mobile-only display:inline-flex !important 가 HTML hidden 의
 * 기본 display:none 을 override 했고, PC 에서도 cri1_rapid_enhancements.css 의
 * `.bf-stt-btn { display: inline-flex; }` 가 author specificity 로 UA hidden 을
 * override 했음. PO 보고: '결과 나온 상태에서 녹음 버튼이 보이고 옆의 취소는
 * 클릭해도 동작 안 됨'. CSS 로 idle 시점에 btn/cancel 둘 다 확실히 숨김. */
body.bf-training #bfSpeakPanel .bf-stt-btn[hidden],
body.bf-training #bfSpeakPanel .bf-stt-cancel-rec[hidden],
body.bf-training #bfSpeakPanel .bf-stt-action[hidden],
body.bf-training #bfSpeakPanel .bf-stt-rerecord[hidden],
body.bf-training #bfSpeakPanel .bf-stt-close[hidden],
body.bf-training #bfSpeakPanel .bf-stt-playback[hidden] {
  display: none !important;
}
/* v1.14.45: ⓘ 도움말 — 미니멀 글리프만 (원형/border 제거). PO 보고:
 * '동그란 감싸는 뭐가 필요하지 않아보여'. popover 는 panel 의 overflow:auto 에
 * 갇혀 잘리던 문제 → JS 로 body 에 portal + position:fixed 로 표시. */
body.bf-training #bfSpeakPanel .bf-speak-help {
  display: inline-block;
  margin-left: 6px;
}
body.bf-training #bfSpeakPanel .bf-speak-help > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: transparent; border: 0; padding: 0;
  color: rgba(198, 205, 226, 0.75);
  font-size: 16px; font-weight: 400; line-height: 1;
  user-select: none;
  transition: color 0.12s, transform 0.12s;
}
body.bf-training #bfSpeakPanel .bf-speak-help > summary:hover {
  color: #E8FF47;
  transform: scale(1.1);
}
body.bf-training #bfSpeakPanel .bf-speak-help > summary::-webkit-details-marker { display: none; }
/* Popover 는 details 안에 있어도 position:fixed → ancestor overflow 무시.
 * body 가 stacking context root 가 아니더라도 z-index 9999 로 최상위.
 * JS 가 details.open 토글 시 ⓘ 좌표 따라 left/bottom 동적 설정. */
body.bf-training #bfSpeakPanel .bf-speak-help[open] .bf-speak-help-pop {
  display: block;
}
.bf-speak-help-pop {
  display: none;
  position: fixed;
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  background: rgba(20, 22, 28, 0.97);
  border: 1px solid rgba(155, 171, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  font-size: 12.5px;
  line-height: 1.5;
  color: #d8def0;
  z-index: 9999;
}
.bf-speak-help-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: #E8FF47;
  font-size: 12px;
}
.bf-speak-help-body {
  color: #c6cde2;
  font-size: 12px;
}
.bf-speak-help-body strong {
  color: #E8FF47;
  font-weight: 700;
}
/* 기존 .bf-speak-sr-notice 더 이상 markup 에 없지만, 만약 남아있는 페이지가
 * 캐시 등으로 옛날 markup 받으면 hide — 큰 안내 박스 다시 안 보이게. */
body.bf-training #bfSpeakPanel .bf-speak-sr-notice {
  display: none !important;
}