余白（ガター）Spacing

「余白（ガター）（Spacing）」を実装してください。

## これは何か
要素の内と外に取る空き。外側の空きがマージン、内側の空きがパディング、列と列の間がガター。

## 使いどころ
- 要素のまとまりを、線を引かずに示したいとき
- サイト全体で間隔を統一したいとき

## 実装の要件
- 4px か 8px を単位にした段階（4/8/12/16/24/32/48）を決めて、そこから選ぶ
- 並びの間隔は gap で作る
- 余白の値をその場で決めない。4か8の倍数など、決めた段階から選ぶ
- 関係の近いものほど近づける。見出しと本文の間より、段落どうしの間を広く取ると意味が逆転する
- margin の相殺（上下のマージンが重なって片方だけになる）に注意する。gap を使えば起きない

## アクセシビリティの要件
- 余白で伝えたまとまりは、マークアップの構造とも一致させる
- 文字の行間（line-height）も余白の一部として設計する。1.7〜1.9 が読みやすい

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-gutter">
  <div class="x-gutter__out">
    <div class="x-gutter__in">内側の余白（padding）</div>
  </div>
  <p class="x-gutter__n">外側の余白（margin）で離す</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-gutter,
.x-gutter *:not([class*="fa-"]),
.x-gutter *:not([class*="fa-"])::before,
.x-gutter *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-gutter {
  width: 228px;
}
.x-gutter__out {
  padding: 14px;
  border: 1px dashed #cfd4dc;
  border-radius: 8px;
  background: #fff;
}
.x-gutter__in {
  padding: 10px;
  border-radius: 6px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 11.5px;
  text-align: center;
}
.x-gutter__n {
  margin: 12px 0 0;
  font-size: 11px;
  color: #606a7b;
  text-align: center;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。