/* 管理画面で追加できる部品のうち、デザイン（site.css）にないものの見た目。
   値は tokens.css の変数だけを使う。 */

/* 2カラム（画像＋文章） */
.media-text {
  display: grid;
  gap: var(--space-5, 24px);
  align-items: start;
  margin-block: var(--space-6, 32px);
}
.media-text__media {
  margin: 0;
}
.media-text__media img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-width, 1px) solid var(--color-border);
}
.media-text__media--empty {
  min-height: 160px;
  background: var(--color-surface);
  border: var(--border-width, 1px) dashed var(--color-border);
}
.media-text__title {
  margin-top: 0;
}
.media-text__body > :first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  .media-text--1-1 { grid-template-columns: 1fr 1fr; }
  .media-text--1-2 { grid-template-columns: 1fr 2fr; }
  .media-text--2-1 { grid-template-columns: 2fr 1fr; }
  .media-text--right .media-text__media { order: 2; }
  .media-text--right.media-text--1-2 { grid-template-columns: 2fr 1fr; }
  .media-text--right.media-text--2-1 { grid-template-columns: 1fr 2fr; }
}

/* 管理画面で書き換えた図（ブラウザーで描画する） */
.diagram-scroll--live:empty::before {
  content: "図を描画しています…";
  color: var(--color-muted);
}