/* c-message-001: メッセージカード */

.c-message-001 {
  background: var(--wp--custom--overlay--light--95);
  backdrop-filter: blur(8px);
  border-radius: var(--wp--custom--border--radius--xl);
  padding: var(--wp--preset--spacing--lg);
  box-shadow: var(--wp--custom--shadow--md);

  .c-message-001__title {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--gray-darkest);
    margin-bottom: var(--wp--preset--spacing--md);
    line-height: var(--wp--custom--line-height--normal);
  }

  .c-message-001__body {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--gray-darker);
    line-height: var(--wp--custom--line-height--loose);
    margin-bottom: var(--wp--preset--spacing--md);
  }

  .c-message-001__body:last-child {
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════
   アクセントカラー
   ══════════════════════════════════════════════════ */

/** @element root  @group アクセントカラー  @label プライマリ  @order 1 */
.c-message-001--accent-primary {
  border-left: 4px solid var(--wp--preset--color--primary);
}

/** @element root  @group アクセントカラー  @label セカンダリ  @order 2 */
.c-message-001--accent-secondary {
  border-left: 4px solid var(--wp--preset--color--secondary);
}

/* ══════════════════════════════════════════════════
   形状
   ══════════════════════════════════════════════════ */

/** @element root  @group 形状  @label 角丸小  @order 1 */
.c-message-001--round-sm {
  border-radius: var(--wp--custom--border--radius--md);
}

/** @element root  @group 形状  @label フラット  @order 2 */
.c-message-001--flat {
  border-radius: 0;
}

/* ══════════════════════════════════════════════════
   背景
   ══════════════════════════════════════════════════ */

/** @element root  @group 背景  @label 白  @order 1 */
.c-message-001--bg-white {
  background: var(--wp--preset--color--white);
  backdrop-filter: none;
}

/** @element root  @group 背景  @label グレー  @order 2 */
.c-message-001--bg-gray {
  background: var(--wp--preset--color--gray-lightest);
  backdrop-filter: none;
}

/* ══════════════════════════════════════════════════
   影
   ══════════════════════════════════════════════════ */

/** @element root  @group 影  @label 影なし  @order 1 */
.c-message-001--shadow-none {
  box-shadow: none;
}

/** @element root  @group 影  @label 影大  @order 2 */
.c-message-001--shadow-lg {
  box-shadow: var(--wp--custom--shadow--lg);
}