/*
 * Noside Base Theme - block-styles.css
 *
 * 装飾の見た目。インラインマーカー(.ns-marker-*)と、ブロックスタイル(.is-style-ns-*)。
 * 汎用ベーステンプレートのため「どの業種でも使う普遍的プリミティブ」だけを置く。
 * 案件固有の装飾はここに足すか、案件側CSSで上書きする(docs/03)。
 *
 * 方針(デザイン品質基準):
 *   - 色は theme.json トークン基準(案件で色を変えると追従)。
 *   - 見出し左の縦棒 / border-left 装飾 / 装飾目的の ::before罫線・文字content /
 *     見出し下の装飾下線 / 丸角バッジの多用 / 絵文字 は使わない。
 *   - !important は使わず、クラスの詳細度で勝つ。
 *
 * セレクタはブロック固有クラスに限定(.wp-block-group.is-style-ns-* / .ns-marker-* 等)。
 * 一意な装飾クラスにだけ効くので、本文へ広く漏れない(エディタ・フロント両方で同じ見た目)。
 */

/* =====================================================================
   インラインマーカー(3色) — assets/js/editor-formats.js でツールバーに追加
   下60%にソフトな蛍光帯。色は各プロジェクトで rgba を差し替え可。
   ===================================================================== */
mark.ns-marker-yellow,
mark.ns-marker-blue,
mark.ns-marker-red {
	background-color: transparent; /* mark 既定の黄ベタ塗りを打ち消す */
	color: inherit;
	background-repeat: no-repeat;
	padding-bottom: 0.04em;
	border-radius: 0;
}
mark.ns-marker-yellow { background-image: linear-gradient(transparent 58%, rgba(255, 221, 102, 0.72) 58%); }
mark.ns-marker-blue   { background-image: linear-gradient(transparent 58%, rgba(120, 178, 230, 0.45) 58%); }
mark.ns-marker-red    { background-image: linear-gradient(transparent 58%, rgba(240, 150, 150, 0.50) 58%); }

/* =====================================================================
   チェックリスト(core/list の「チェックリスト」スタイル)
   ✓ 印は単色マスクで描くので、色は theme.json の accent に自動追従する。
   ===================================================================== */
.wp-block-list.is-style-ns-check {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-ns-check > li {
	position: relative;
	padding-left: 1.6em;
}
.wp-block-list.is-style-ns-check > li + li {
	margin-top: 0.4em;
}
.wp-block-list.is-style-ns-check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1em;
	height: 1em;
	background-color: var(--wp--preset--color--accent, #1f5fae);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013l4%204L19%207'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013l4%204L19%207'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =====================================================================
   汎用ボックス(core/group のブロックスタイル) — 中身は自由
   ポイント=淡い地のパネル / 注意=暖色ウォッシュ / メモ=上下ヘアライン
   ===================================================================== */
.wp-block-group.is-style-ns-point,
.wp-block-group.is-style-ns-note,
.wp-block-group.is-style-ns-memo {
	margin-block: 1.5rem;
}

/* ポイント: 淡いアクセント地のパネル(結論・要点の囲み) */
.wp-block-group.is-style-ns-point {
	padding: 1.1em 1.25em;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent, #1f5fae) 22%, var(--wp--preset--color--line, #e7e2da));
	background-color: color-mix(in srgb, var(--wp--preset--color--accent, #1f5fae) 6%, #ffffff);
}

/* 注意: 暖色のうっすらウォッシュ。色は案件で下の2変数を差し替え可 */
.wp-block-group.is-style-ns-note {
	--ns-note-bg: #fdf4e7;
	--ns-note-border: #ecd3b0;
	padding: 1.1em 1.25em;
	border-radius: 6px;
	border: 1px solid var(--ns-note-border);
	background-color: var(--ns-note-bg);
}

/* メモ: 枠なし・上下ヘアラインのアサイド(左右paddingゼロで本文最大幅) */
.wp-block-group.is-style-ns-memo {
	padding: 0.9em 0;
	border-top: 1px solid var(--wp--preset--color--line, #e7e2da);
	border-bottom: 1px solid var(--wp--preset--color--line, #e7e2da);
}

/* ボックスの内側、最初/最後の余白を詰める(WP版差の inner-container 有無に両対応) */
.wp-block-group.is-style-ns-point > :first-child,
.wp-block-group.is-style-ns-note > :first-child,
.wp-block-group.is-style-ns-memo > :first-child,
.wp-block-group.is-style-ns-point > .wp-block-group__inner-container > :first-child,
.wp-block-group.is-style-ns-note > .wp-block-group__inner-container > :first-child,
.wp-block-group.is-style-ns-memo > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}
.wp-block-group.is-style-ns-point > :last-child,
.wp-block-group.is-style-ns-note > :last-child,
.wp-block-group.is-style-ns-memo > :last-child,
.wp-block-group.is-style-ns-point > .wp-block-group__inner-container > :last-child,
.wp-block-group.is-style-ns-note > .wp-block-group__inner-container > :last-child,
.wp-block-group.is-style-ns-memo > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}