/*
 * コールアウト。 記事本文中で「章のまとめ」や強調ポイントを
 * 白背景 + 細いダーク枠のカードにまとめる。 右上に小さな三角ラベルが
 * カードの上辺を突き抜けて突き出し、その base で card の border-top を
 * 白く塗り分けるので、SVG は border より上に重ねる必要がある。
 *
 * 縦方向の外余白 (前段落に密着させる負 margin と下側の 2x 余白) は theme
 * style.css の .entry-body block-family ルールで持たせるため、ここでは
 * 装飾用の padding-top のみ扱う。
 *
 * Figma 参照: 786:7340 (comment)
 */
.lazyblock-callout {
  position: relative;
  padding-top: var(--space-6);

  & .decoration {
    position: absolute;
    top: 0;
    right: var(--space-6);
    display: block;
    width: 29px;
    height: 26px;
  }

  & .card {
    background: var(--color-background-ultra-light);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  & .title {
    margin: 0;
    font-size: var(--font-size-text-20);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
  }

  & .body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  & .body p {
    margin: 0;
  }
}