/* 基本：横スクロール・角丸・等幅フォント */
.out{
  --out-gutter: 1.6ch;     /* 行頭の余白（左ギャター）*/
  --out-pad-x: .85rem;
  --out-pad-y: .6rem;
  --out-radius: .5rem;

  margin: 1em 0;
  border-radius: var(--out-radius);
  overflow-x: auto;               /* 横スクロール */
  font-family: "M PLUS 1 Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
}

/* Dark / Light theme */
.out--dark {
  background: #111827;
  color: #e5e7eb;
}
.out--light {
  background: #f9fafb;
  color: #1f2937;
}

.out-head {
  padding: .4em .8em;
  font-size: .9em;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

/* 本文：左ギャター込みで開始。折り返し無し */
.out-body{
  margin: 0;
  padding:
    var(--out-pad-y)
    var(--out-pad-x)
    var(--out-pad-y)
    calc(var(--out-pad-x) + var(--out-gutter));  /* ← 左余白 */
}
.out-body code{
  display:block;
  white-space: pre;           /* 折り返さない */
}

/* タイトルなしのときは上の余白だけ少し増やす（見出しの線が無いぶん調整） */
.out.no-title .out-body{
  padding-top: calc(var(--out-pad-y) + .1rem);
}

/* 角丸のつながり（見栄え） */
.out.has-title { overflow:hidden; }