/* ============================================================
   たたき段階の注記
   ------------------------------------------------------------
   本番公開時の手順：
     1. index.html / entry.html からこのファイルの <link> を外す
     2. HTML 中の .memo 要素と、.img[data-label] の data-label を削除する
   ------------------------------------------------------------
   このファイルを外しても本文のレイアウトは崩れない。
   ============================================================ */

/* 未確定・要確認の注記（赤い破線の囲み） */
.memo {
  display: inline-block;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #C8102E;
  background: rgba(255, 255, 255, .75);
  border: 1px dashed currentColor;
  border-radius: 3px;
}
p.memo { align-self: flex-start; }
.intro > .memo { margin-top: 14px; align-self: center; }
.voice-body > .memo { margin-top: 8px; }

/* 画像が未確定の枠に、何を入れるかを表示する */
.img.is-empty[data-label]::after {
  content: attr(data-label);
  padding: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--steel);
  text-align: center;
}