/* ===== Inline spoiler (front) — per-line band via background ===== */
.isr-spoiler{
  position: relative;
  border-radius: .25em;
  padding: 0 .2em;
  cursor: pointer;
  user-select: none;
  outline: none;

  /* 黒帯：要素自体の背景を使う（行ごとに複製される） */
  background-color: var(--isr-hidden-bg, #000);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  /* 文字は一旦隠す（色はアニメしない） */
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* フェードは背景だけ */
  transition: background-color .25s ease;
}

/* クリック後：背景だけ透明へフェード、文字色は即時で出す（字間ブレなし） */
.isr-spoiler[data-revealed="1"]{
  background-color: transparent !important;
  color: var(--isr-reveal-color, inherit) !important;
  -webkit-text-fill-color: var(--isr-reveal-color, inherit) !important;
  cursor: text;
  user-select: text !important;
}

/* ===== Block spoiler (front) — text-only band via background ===== */
/* 使い方: ブロックの「追加CSSクラス」に isr-block を付与 */
.isr-block{ position: relative; }
.isr-block:not([data-revealed="1"]){ cursor: pointer; }
.isr-block:not([data-revealed="1"]) a{ pointer-events: none; }

/* JSが各テキストノードを <span class="isr-mask"> で包む */
.isr-mask{
  position: relative;
  border-radius: .20em;
  padding: 0 .08em;

  background-color: var(--isr-hidden-bg, #000);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  color: transparent;
  -webkit-text-fill-color: transparent;

  transition: background-color .25s ease;
}

/* フェードして表示（文字色は即時で出す） */
.isr-block.isr-fade .isr-mask,
.isr-block[data-revealed="1"] .isr-mask{
  background-color: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* フォーカス可視化（任意） */
.isr-spoiler:focus-visible{
  box-shadow: 0 0 0 2px #2271b1;
  border-radius: .25em;
}

/* 印刷は常に可視 */
@media print{
  .isr-spoiler,
  .isr-block .isr-mask{
    background: none !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
}