/**
 * Recette - blocks.css
 * カスタムブロックのフロント側スタイル
 */

/* ==========================================================================
   1. 見出しブロック（5スタイル）
   ========================================================================== */

/* スタイル1: シンプル下線 */
.is-style-recette-underline {
	padding-bottom: 0.4em !important;
	border-bottom: 0.5px solid var(--recette-color-accent) !important;
	position: relative;
	margin-bottom: 1em !important;
}

.is-style-recette-underline::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 60px;
	height: 2px;
	background: var(--recette-color-accent);
}

/* スタイル2: 左バー */
.is-style-recette-left-bar {
	padding-left: 1em !important;
	border-left: 4px solid var(--recette-color-accent) !important;
	line-height: 1.6 !important;
}

/* スタイル3: 背景塗り */
.is-style-recette-bg-fill {
	background: var(--recette-color-bg-soft) !important;
	padding: 0.6em 1em !important;
	border-radius: 2px;
	color: var(--recette-color-text) !important;
}

.is-style-recette-bg-fill::before {
	content: "—";
	color: var(--recette-color-accent);
	margin-right: 0.5em;
}

/* スタイル4: 上下二重線 */
.is-style-recette-double-line {
	border-top: 0.5px solid var(--recette-color-border) !important;
	border-bottom: 0.5px solid var(--recette-color-border) !important;
	padding: 0.6em 0 !important;
	text-align: center;
	letter-spacing: 0.1em !important;
}

.is-style-recette-double-line::before,
.is-style-recette-double-line::after {
	content: "✦";
	color: var(--recette-color-accent-light);
	margin: 0 0.75em;
	font-size: 0.7em;
	vertical-align: middle;
}

/* スタイル5: 番号付き */
.is-style-recette-numbered {
	counter-increment: recette-numbered-h;
	padding-left: 2.5em !important;
	position: relative;
	line-height: 1.6 !important;
}

.recette-entry__content { counter-reset: recette-numbered-h; }
.recipe-detail__story  { counter-reset: recette-numbered-h; }

.is-style-recette-numbered::before {
	content: counter( recette-numbered-h, decimal-leading-zero );
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--recette-font-sans);
	font-size: 0.9em;
	color: var(--recette-color-accent);
	border-bottom: 1px solid var(--recette-color-accent);
	padding-bottom: 2px;
}

/* ==========================================================================
   2. ボタンブロック（4スタイル）
   ========================================================================== */

/* スタイル1: 塗りつぶし（デフォルト） */
.wp-block-button.is-style-recette-fill .wp-block-button__link {
	background: var(--recette-color-accent);
	color: #fff;
	border: none;
	padding: 12px 32px;
	font-size: 12px;
	letter-spacing: 0.2em;
	border-radius: 2px;
	transition: opacity 0.3s ease;
}

.wp-block-button.is-style-recette-fill .wp-block-button__link:hover {
	opacity: 0.85;
}

/* スタイル2: 枠線のみ */
.wp-block-button.is-style-recette-outline .wp-block-button__link {
	background: transparent;
	color: var(--recette-color-accent);
	border: 0.5px solid var(--recette-color-accent);
	padding: 11px 32px;
	font-size: 12px;
	letter-spacing: 0.2em;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.wp-block-button.is-style-recette-outline .wp-block-button__link:hover {
	background: var(--recette-color-accent);
	color: #fff;
}

/* スタイル3: 影付き */
.wp-block-button.is-style-recette-shadow .wp-block-button__link {
	background: var(--recette-color-surface);
	color: var(--recette-color-text);
	border: none;
	padding: 13px 32px;
	font-size: 13px;
	letter-spacing: 0.15em;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-button.is-style-recette-shadow .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* スタイル4: グラデーション */
.wp-block-button.is-style-recette-gradient .wp-block-button__link {
	background: linear-gradient(135deg, var(--recette-color-accent) 0%, var(--recette-color-accent-light) 100%);
	color: #fff;
	border: none;
	padding: 12px 32px;
	font-size: 12px;
	letter-spacing: 0.2em;
	border-radius: 2px;
	transition: opacity 0.3s ease;
}

.wp-block-button.is-style-recette-gradient .wp-block-button__link:hover {
	opacity: 0.9;
}

/* ==========================================================================
   3. 吹き出しブロック
   ========================================================================== */

.recette-speech {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 2em 0;
}

.recette-speech--right {
	flex-direction: row-reverse;
}

.recette-speech__icon-wrap {
	flex-shrink: 0;
	text-align: center;
	width: 70px;
}

.recette-speech .recette-speech__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%; /* デフォルト：円形（線なし） */
	object-fit: cover;
	display: block;
	margin: 0 auto;
	box-sizing: border-box;
}

/* アイコンの形状バリエーション */
.recette-speech .recette-speech__icon--circle-border {
	border: 2px solid var(--recette-color-accent-light, var(--recette-color-accent));
	padding: 2px;
	background: #fff;
}

.recette-speech .recette-speech__icon--square {
	border-radius: 10px;
}

.recette-speech .recette-speech__icon--placeholder {
	background: var(--recette-color-bg-soft);
	border: 0.5px solid var(--recette-color-border);
}

.recette-speech__label {
	font-size: 10px;
	margin-top: 4px;
	color: var(--recette-color-text-muted);
	letter-spacing: 0.1em;
}

.recette-speech__bubble {
	flex: 1;
	background: var(--recette-color-bg-soft);
	padding: 1em 1.25em;
	border-radius: 12px;
	position: relative;
	font-size: 14px;
	line-height: 1.85;
	margin: 0;
}

.recette-speech__bubble::before {
	content: "";
	position: absolute;
	top: 22px; /* アイコン(64px)の中心付近に合わせる */
	width: 0;
	height: 0;
	border: 8px solid transparent;
}

.recette-speech--left .recette-speech__bubble::before {
	left: -16px;
	border-right-color: var(--recette-color-bg-soft);
}

.recette-speech--right .recette-speech__bubble::before {
	right: -16px;
	border-left-color: var(--recette-color-bg-soft);
}

/* スタイルバリエーション：シンプル（デフォルト） */
.recette-speech.is-style-simple .recette-speech__bubble {
	background: var(--recette-color-bg-soft);
}

/* スタイルバリエーション：やわらか */
.recette-speech.is-style-cute .recette-speech__bubble {
	background: #FDF2EE;
	border-radius: 20px;
}

.recette-speech.is-style-cute.recette-speech--left .recette-speech__bubble::before {
	border-right-color: #FDF2EE;
}

.recette-speech.is-style-cute.recette-speech--right .recette-speech__bubble::before {
	border-left-color: #FDF2EE;
}

/* スタイルバリエーション：モダン */
.recette-speech.is-style-modern .recette-speech__bubble {
	background: transparent;
	border: 0.5px solid var(--recette-color-border);
	border-radius: 2px;
	color: var(--recette-color-text);
}

.recette-speech.is-style-modern .recette-speech__bubble::before {
	display: none;
}

/* ==========================================================================
   4. マーカー（インラインフォーマット）
   ========================================================================== */

.recette-marker--pink-solid {
	background: linear-gradient(transparent 60%, #F8C8C0 60%, #F8C8C0 90%, transparent 90%);
	padding: 0 2px;
	color: inherit;
}

.recette-marker--pink-soft {
	background: linear-gradient(transparent 60%, rgba(248, 200, 192, 0.5) 60%, rgba(248, 200, 192, 0.5) 90%, transparent 90%);
	padding: 0 2px;
	color: inherit;
}

.recette-marker--yellow-solid {
	background: linear-gradient(transparent 60%, #FFE9A0 60%, #FFE9A0 90%, transparent 90%);
	padding: 0 2px;
	color: inherit;
}

.recette-marker--yellow-soft {
	background: linear-gradient(transparent 60%, rgba(255, 233, 160, 0.5) 60%, rgba(255, 233, 160, 0.5) 90%, transparent 90%);
	padding: 0 2px;
	color: inherit;
}

.recette-marker--green-solid {
	background: linear-gradient(transparent 60%, #C8E5C0 60%, #C8E5C0 90%, transparent 90%);
	padding: 0 2px;
	color: inherit;
}

.recette-marker--green-soft {
	background: linear-gradient(transparent 60%, rgba(200, 229, 192, 0.5) 60%, rgba(200, 229, 192, 0.5) 90%, transparent 90%);
	padding: 0 2px;
	color: inherit;
}

/* ==========================================================================
   5. レスポンシブ
   ========================================================================== */
@media (max-width: 600px) {
	.recette-speech__icon-wrap { width: 56px; }
	.recette-speech .recette-speech__icon { width: 50px; height: 50px; }

	.is-style-recette-numbered {
		padding-left: 2em !important;
	}
}

/* ==========================================================================
   6. テーブルブロック（5スタイル）
   ========================================================================== */

/* 共通：スマホで横スクロール対応 */
.wp-block-table {
	margin: 2em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.7;
}

.wp-block-table table th,
.wp-block-table table td {
	padding: 12px 16px;
	vertical-align: middle;
	text-align: left;
}

/* WordPressコアの thead / tfoot のデフォルト太線を無効化
   注：thead 要素自体の border-bottom（コアCSSの3pxの太線）だけを消す。
   個々のセル（th/td）のborderは各スタイル側で制御するので、ここでは触らない。 */
.wp-block-table table thead,
.wp-block-table table tfoot {
	border: none;
}

/* ==========================================================================
   スタイル1: 細罫線（デフォルト）
   ========================================================================== */
.wp-block-table.is-style-recette-thin table {
	border: none;
}
.wp-block-table.is-style-recette-thin table th,
.wp-block-table.is-style-recette-thin table td {
	border: 0.5px solid var(--recette-color-border);
}
.wp-block-table.is-style-recette-thin table th {
	background: var(--recette-color-bg-soft);
	color: var(--recette-color-text);
	font-weight: 500;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   スタイル2: ストライプ
   ========================================================================== */
.wp-block-table.is-style-recette-stripe table {
	border: none;
}
.wp-block-table.is-style-recette-stripe table th,
.wp-block-table.is-style-recette-stripe table td {
	border: none;
	border-bottom: 0.5px solid var(--recette-color-border);
}
.wp-block-table.is-style-recette-stripe table thead th {
	background: var(--recette-color-accent);
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.08em;
	border-bottom: none;
}
.wp-block-table.is-style-recette-stripe table tbody tr:nth-child(even) {
	background: var(--recette-color-bg-soft);
}
.wp-block-table.is-style-recette-stripe table tbody tr:nth-child(even) td {
	border-bottom-color: transparent;
}

/* ==========================================================================
   スタイル3: ボーダーレス
   ========================================================================== */
.wp-block-table.is-style-recette-borderless table {
	border: none;
}
.wp-block-table.is-style-recette-borderless table th,
.wp-block-table.is-style-recette-borderless table td {
	border: none;
	padding: 16px 18px;
}
.wp-block-table.is-style-recette-borderless table thead th {
	color: var(--recette-color-accent);
	font-weight: 500;
	letter-spacing: 0.1em;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--recette-color-accent);
}
.wp-block-table.is-style-recette-borderless table tbody td {
	border-bottom: 0.5px solid var(--recette-color-border);
}
.wp-block-table.is-style-recette-borderless table tbody tr:last-child td {
	border-bottom: none;
}

/* ==========================================================================
   スタイル4: ベージュヘッダー
   ========================================================================== */
.wp-block-table.is-style-recette-beige-header table {
	border: none;
}
.wp-block-table.is-style-recette-beige-header table th,
.wp-block-table.is-style-recette-beige-header table td {
	border: none;
	border-bottom: 0.5px solid var(--recette-color-border);
}
.wp-block-table.is-style-recette-beige-header table thead th {
	background: var(--recette-color-bg-soft);
	color: var(--recette-color-accent);
	font-family: var(--recette-font-serif);
	font-weight: 400;
	letter-spacing: 0.1em;
	border-bottom: 2px solid var(--recette-color-accent);
	padding: 14px 16px;
}
.wp-block-table.is-style-recette-beige-header table tbody th {
	background: rgba(244, 235, 222, 0.5);
	font-weight: 500;
	color: var(--recette-color-text);
	width: 30%;
}

/* ==========================================================================
   スタイル5: カード風
   ========================================================================== */
.wp-block-table.is-style-recette-card {
	overflow: visible;
}
.wp-block-table.is-style-recette-card table {
	border-collapse: separate;
	border-spacing: 0 8px;
	border: none;
}
.wp-block-table.is-style-recette-card table th,
.wp-block-table.is-style-recette-card table td {
	border: none;
	background: var(--recette-color-surface);
	padding: 14px 18px;
}
.wp-block-table.is-style-recette-card table thead th {
	background: transparent;
	color: var(--recette-color-accent);
	font-weight: 500;
	letter-spacing: 0.1em;
	padding: 8px 18px;
}
.wp-block-table.is-style-recette-card table tbody tr {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}
.wp-block-table.is-style-recette-card table tbody tr td:first-child {
	border-radius: 2px 0 0 2px;
}
.wp-block-table.is-style-recette-card table tbody tr td:last-child {
	border-radius: 0 2px 2px 0;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 600px) {
	.wp-block-table table th,
	.wp-block-table table td {
		padding: 10px 12px;
		font-size: 13px;
	}
	.wp-block-table.is-style-recette-card table th,
	.wp-block-table.is-style-recette-card table td {
		padding: 12px 14px;
	}
}

/* ==========================================================================
   テーブル：thead/tfoot 要素本体の太線無効化（WordPressコアの上書き）
   ※ 個別セル（th/td）のborderは各スタイル側で個別制御
   ========================================================================== */
.wp-block-table.is-style-recette-thin table thead,
.wp-block-table.is-style-recette-stripe table thead,
.wp-block-table.is-style-recette-borderless table thead,
.wp-block-table.is-style-recette-beige-header table thead,
.wp-block-table.is-style-recette-card table thead,
.wp-block-table.is-style-recette-thin table tfoot,
.wp-block-table.is-style-recette-stripe table tfoot,
.wp-block-table.is-style-recette-borderless table tfoot,
.wp-block-table.is-style-recette-beige-header table tfoot,
.wp-block-table.is-style-recette-card table tfoot {
	border: none !important;
}

/* ==========================================================================
   7. キャプションボックス（6スタイル＋アイコン位置選択）
   ========================================================================== */

/* 共通レイアウト */
.recette-caption-box {
	margin: 2em 0;
	position: relative;
}

.recette-caption-box__title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.recette-caption-box__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--recette-color-accent);
}

.recette-caption-box__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.recette-caption-box__title {
	font-family: var(--recette-font-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--recette-color-accent);
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

.recette-caption-box__body {
	line-height: 1.9;
	font-size: 14px;
	color: var(--recette-color-text);
}

.recette-caption-box .recette-caption-box__body > *:first-child { margin-top: 0; }
.recette-caption-box .recette-caption-box__body > *:last-child { margin-bottom: 0; }

/* InnerBlocks化に伴い、本文内の主要ブロックの余白を最適化 */
.recette-caption-box .recette-caption-box__body p,
.recette-caption-box .recette-caption-box__body ul,
.recette-caption-box .recette-caption-box__body ol {
	margin: 0.6em 0;
}

.recette-caption-box .recette-caption-box__body ul,
.recette-caption-box .recette-caption-box__body ol {
	padding-left: 1.4em;
}

/* アイコン位置「なし」：アイコン非表示 */
.recette-caption-box--icon-none .recette-caption-box__icon {
	display: none;
}

/* アイコン位置「右」：タイトルを左寄せにしてアイコンを右端へ */
.recette-caption-box--icon-right .recette-caption-box__title-wrap {
	justify-content: space-between;
}

/* ==========================================================================
   スタイル1: シンプル枠
   ========================================================================== */
.recette-caption-box.is-style-simple-frame {
	border: 0.5px solid var(--recette-color-border);
	border-radius: 4px;
	background: var(--recette-color-surface);
	overflow: hidden;
}

.recette-caption-box.is-style-simple-frame .recette-caption-box__title-wrap {
	background: var(--recette-color-bg-soft);
	padding: 10px 18px;
	border-bottom: 0.5px solid var(--recette-color-border);
}

.recette-caption-box.is-style-simple-frame .recette-caption-box__body {
	padding: 16px 18px;
}

/* ==========================================================================
   スタイル2: タブ風タイトル
   ========================================================================== */
.recette-caption-box.is-style-tab-title {
	border: none;
	background: transparent;
	padding: 0;
}

/* タブは通常フローで本文ボックスの上に配置。
   絶対配置（top: -22px）はタブ下部が本文に食い込み、
   エディタではツールバーと重なるため廃止（v1.5.1） */
.recette-caption-box.is-style-tab-title .recette-caption-box__title-wrap {
	display: inline-flex;
	width: auto;
	background: var(--recette-color-accent);
	color: #fff;
	padding: 6px 18px;
	border-radius: 4px 4px 0 0;
	position: relative;
	z-index: 1;
	margin-bottom: -1px; /* 本文ボックスの上枠線とだけ重ねて一体化させる */
}

.recette-caption-box.is-style-tab-title .recette-caption-box__body {
	border: 0.5px solid var(--recette-color-accent);
	border-radius: 0 4px 4px 4px;
	background: var(--recette-color-surface);
	padding: 16px 18px;
}

.recette-caption-box.is-style-tab-title .recette-caption-box__title {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.recette-caption-box.is-style-tab-title .recette-caption-box__icon {
	color: #fff;
	width: 18px;
	height: 18px;
}

/* タブ風で「右」を選んだ場合、タブが伸びすぎるので強制的に左寄せ */
.recette-caption-box.is-style-tab-title.recette-caption-box--icon-right .recette-caption-box__title-wrap {
	justify-content: flex-start;
	flex-direction: row;
}

/* ==========================================================================
   スタイル3: 引用風
   ========================================================================== */
.recette-caption-box.is-style-quote {
	border-left: 3px solid var(--recette-color-accent);
	padding: 6px 0 6px 20px;
	background: transparent;
}

.recette-caption-box.is-style-quote .recette-caption-box__title-wrap {
	margin-bottom: 6px;
}

.recette-caption-box.is-style-quote .recette-caption-box__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--recette-color-accent-light);
	font-family: var(--recette-font-sans);
}

.recette-caption-box.is-style-quote .recette-caption-box__icon {
	color: var(--recette-color-accent-light);
	width: 18px;
	height: 18px;
}

.recette-caption-box.is-style-quote .recette-caption-box__body {
	color: var(--recette-color-text-soft);
}

/* ==========================================================================
   スタイル4: 破線枠（A案）
   ========================================================================== */
.recette-caption-box.is-style-dashed {
	border: 1px dashed var(--recette-color-accent);
	border-radius: 4px;
	background: var(--recette-color-surface);
	overflow: hidden;
}

.recette-caption-box.is-style-dashed .recette-caption-box__title-wrap {
	padding: 10px 18px;
	border-bottom: 1px dashed var(--recette-color-accent);
}

.recette-caption-box.is-style-dashed .recette-caption-box__body {
	padding: 16px 18px;
}

/* ==========================================================================
   スタイル5: コーナー装飾（B案）
   ========================================================================== */
.recette-caption-box.is-style-corner {
	background: var(--recette-color-surface);
	padding: 20px 24px;
	position: relative;
}

/* 四隅のL字（疑似要素2つ+疑似要素2つの計4つ）*/
.recette-caption-box.is-style-corner::before,
.recette-caption-box.is-style-corner::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* 左上 */
.recette-caption-box.is-style-corner::before {
	top: 0;
	left: 0;
	border-top: 1.5px solid var(--recette-color-accent);
	border-left: 1.5px solid var(--recette-color-accent);
}

/* 右下 */
.recette-caption-box.is-style-corner::after {
	bottom: 0;
	right: 0;
	border-bottom: 1.5px solid var(--recette-color-accent);
	border-right: 1.5px solid var(--recette-color-accent);
}

/* 右上＋左下は内部要素に追加で */
.recette-caption-box.is-style-corner .recette-caption-box__title-wrap::before,
.recette-caption-box.is-style-corner .recette-caption-box__body::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.recette-caption-box.is-style-corner .recette-caption-box__title-wrap::before {
	top: -20px;
	right: -24px;
	border-top: 1.5px solid var(--recette-color-accent);
	border-right: 1.5px solid var(--recette-color-accent);
}

.recette-caption-box.is-style-corner .recette-caption-box__body::after {
	bottom: -20px;
	left: -24px;
	border-bottom: 1.5px solid var(--recette-color-accent);
	border-left: 1.5px solid var(--recette-color-accent);
}

.recette-caption-box.is-style-corner .recette-caption-box__title-wrap,
.recette-caption-box.is-style-corner .recette-caption-box__body {
	position: relative;
}

.recette-caption-box.is-style-corner .recette-caption-box__title-wrap {
	margin-bottom: 10px;
}

/* ==========================================================================
   スタイル6: 角丸ソフト（C案）
   ========================================================================== */
.recette-caption-box.is-style-soft-round {
	background: var(--recette-color-bg-soft);
	border-radius: 16px;
	padding: 18px 22px;
}

.recette-caption-box.is-style-soft-round .recette-caption-box__title-wrap {
	margin-bottom: 10px;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 600px) {
	.recette-caption-box.is-style-corner {
		padding: 18px 20px;
	}
	.recette-caption-box.is-style-soft-round {
		padding: 16px 18px;
	}
}

/* ==========================================================================
   8. リストブロック（5スタイル）
   ========================================================================== */

/* 空のリスト項目（<li></li>）はマーカーだけが表示されてしまうため非表示にする。
   エディタでの消し忘れ対策の保険 */
.wp-block-list li:empty {
	display: none;
}

/* ==========================================================================
   スタイル1: チェックリスト（背景ベージュ＋チェックマーク単体）
   ========================================================================== */
.wp-block-list.is-style-recette-check {
	list-style: none;
	padding: 16px 20px;
	background: var(--recette-color-bg-soft);
	border-radius: 4px;
}

.wp-block-list.is-style-recette-check li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	line-height: 1.9;
}

.wp-block-list.is-style-recette-check li:last-child {
	margin-bottom: 0;
}

.wp-block-list.is-style-recette-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--recette-color-accent);
	border-bottom: 2px solid var(--recette-color-accent);
	transform: rotate(-45deg);
}

/* ネストリストはマーカーをそのまま継承 */
.wp-block-list.is-style-recette-check ul,
.wp-block-list.is-style-recette-check ol {
	list-style: none;
	padding-left: 0;
	margin-top: 0.5em;
}

/* ==========================================================================
   スタイル2: ベージュ枠
   ========================================================================== */
.wp-block-list.is-style-recette-framed {
	list-style: none;
	padding: 18px 22px 18px 36px;
	background: var(--recette-color-surface);
	border: 0.5px solid var(--recette-color-border);
	border-radius: 4px;
	position: relative;
}

.wp-block-list.is-style-recette-framed::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 18px;
	bottom: 18px;
	width: 2px;
	background: var(--recette-color-accent-light);
}

.wp-block-list.is-style-recette-framed li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 0.5em;
	line-height: 1.9;
}

.wp-block-list.is-style-recette-framed li:last-child {
	margin-bottom: 0;
}

.wp-block-list.is-style-recette-framed li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--recette-color-accent);
}

/* 順序リスト（ol）の場合は数字を表示、マーカードットを非表示 */
ol.wp-block-list.is-style-recette-framed {
	list-style: decimal;
	padding-left: 56px;
}

ol.wp-block-list.is-style-recette-framed li {
	padding-left: 8px;
}

ol.wp-block-list.is-style-recette-framed li::before {
	display: none;
}

ol.wp-block-list.is-style-recette-framed li::marker {
	color: var(--recette-color-accent);
	font-family: var(--recette-font-sans);
	font-weight: 600;
}

/* ==========================================================================
   スタイル3: 区切り線
   ========================================================================== */
.wp-block-list.is-style-recette-divided {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-recette-divided li {
	padding: 12px 4px 12px 24px;
	border-bottom: 0.5px solid var(--recette-color-border);
	line-height: 1.8;
	position: relative;
	margin: 0;
}

.wp-block-list.is-style-recette-divided li:last-child {
	border-bottom: none;
}

.wp-block-list.is-style-recette-divided li::before {
	content: "—";
	position: absolute;
	left: 0;
	top: 12px;
	color: var(--recette-color-accent-light);
	font-weight: 600;
}

/* 順序リスト（ol）の場合は番号バッジ風 */
ol.wp-block-list.is-style-recette-divided {
	counter-reset: recette-divided-list;
	list-style: none;
	padding-left: 0;
}

ol.wp-block-list.is-style-recette-divided li {
	counter-increment: recette-divided-list;
	padding-left: 36px;
}

ol.wp-block-list.is-style-recette-divided li::before {
	content: counter( recette-divided-list, decimal-leading-zero );
	font-family: var(--recette-font-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--recette-color-accent);
	top: 12px;
}

/* ==========================================================================
   スタイル4: 番号バッジ（丸い茶色バッジに白文字番号）
   ========================================================================== */
.wp-block-list.is-style-recette-numbered-badge {
	list-style: none;
	counter-reset: recette-numbered-badge;
	background: var(--recette-color-surface);
	border-radius: 4px;
	padding: 16px 20px;
}

.wp-block-list.is-style-recette-numbered-badge li {
	position: relative;
	padding-left: 38px;
	margin-bottom: 12px;
	line-height: 1.9;
	counter-increment: recette-numbered-badge;
}

.wp-block-list.is-style-recette-numbered-badge li:last-child {
	margin-bottom: 0;
}

.wp-block-list.is-style-recette-numbered-badge li::before {
	content: counter( recette-numbered-badge );
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--recette-color-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--recette-font-sans);
}

/* ul の場合も番号バッジを連番で適用 */
ul.wp-block-list.is-style-recette-numbered-badge {
	counter-reset: recette-numbered-badge;
}

/* ==========================================================================
   スタイル5: カード型（各項目が独立した1枚のカード）
   ========================================================================== */
.wp-block-list.is-style-recette-card {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-recette-card li {
	background: var(--recette-color-surface);
	border: 0.5px solid var(--recette-color-border);
	border-radius: 4px;
	padding: 14px 18px;
	margin-bottom: 10px;
	line-height: 1.7;
}

.wp-block-list.is-style-recette-card li:last-child {
	margin-bottom: 0;
}

/* 順序リスト（ol）の場合は左に大きめの番号 */
ol.wp-block-list.is-style-recette-card {
	counter-reset: recette-card-list;
}

ol.wp-block-list.is-style-recette-card li {
	counter-increment: recette-card-list;
	padding-left: 50px;
	position: relative;
}

ol.wp-block-list.is-style-recette-card li::before {
	content: counter( recette-card-list, decimal-leading-zero );
	position: absolute;
	left: 18px;
	top: 14px;
	font-family: var(--recette-font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--recette-color-accent);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 600px) {
	.wp-block-list.is-style-recette-check,
	.wp-block-list.is-style-recette-numbered-badge {
		padding: 14px 16px;
	}
	.wp-block-list.is-style-recette-framed {
		padding: 14px 18px 14px 30px;
	}
}

/* ==========================================================================
   9. ボタン追加スタイル（3種）＋ アイコン位置
   ========================================================================== */

/* ==========================================================================
   スタイル5: 浮き出る（3D）
   ========================================================================== */
.wp-block-button.is-style-recette-3d .wp-block-button__link {
	background: var(--recette-color-accent);
	color: #fff;
	border: none;
	padding: 12px 32px;
	font-size: 12px;
	letter-spacing: 0.2em;
	border-radius: 2px;
	position: relative;
	box-shadow: 0 4px 0 0 rgba(92, 66, 50, 0.4);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button.is-style-recette-3d .wp-block-button__link:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 0 rgba(92, 66, 50, 0.4);
}

.wp-block-button.is-style-recette-3d .wp-block-button__link:active {
	transform: translateY(4px);
	box-shadow: 0 0 0 0 rgba(92, 66, 50, 0.4);
}

/* ==========================================================================
   スタイル6: アンダーラインのみ
   ========================================================================== */
.wp-block-button.is-style-recette-underline .wp-block-button__link {
	background: transparent;
	color: var(--recette-color-accent);
	border: none;
	border-bottom: 1px solid var(--recette-color-accent);
	padding: 6px 4px;
	font-size: 13px;
	letter-spacing: 0.15em;
	border-radius: 0;
	transition: color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

.wp-block-button.is-style-recette-underline .wp-block-button__link:hover {
	color: var(--recette-color-text);
	border-color: var(--recette-color-text);
	padding-right: 12px;
}

/* ==========================================================================
   スタイル7: ピル型（楕円）
   ========================================================================== */
.wp-block-button.is-style-recette-pill .wp-block-button__link {
	background: var(--recette-color-accent);
	color: #fff;
	border: none;
	padding: 11px 32px;
	font-size: 12px;
	letter-spacing: 0.2em;
	border-radius: 999px;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.wp-block-button.is-style-recette-pill .wp-block-button__link:hover {
	opacity: 0.85;
	transform: scale(1.02);
}

/* ==========================================================================
   ボタンアイコン共通（全スタイル）
   ========================================================================== */
.wp-block-button .wp-block-button__link.recette-btn-has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.wp-block-button .wp-block-button__link.recette-btn-has-icon .recette-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.wp-block-button .wp-block-button__link.recette-btn-has-icon .recette-btn-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* 矢印・三角系アイコンが「後」位置のとき、ホバーで右に動く */
.wp-block-button .wp-block-button__link.recette-btn-icon-after .recette-btn-icon {
	transition: transform 0.3s ease;
}

.wp-block-button .wp-block-button__link.recette-btn-icon-after:hover .recette-btn-icon {
	transform: translateX(3px);
}

/* 矢印・三角系アイコンが「前」位置のとき、ホバーで左に動く */
.wp-block-button .wp-block-button__link.recette-btn-icon-before .recette-btn-icon {
	transition: transform 0.3s ease;
}

.wp-block-button .wp-block-button__link.recette-btn-icon-before:hover .recette-btn-icon {
	transform: translateX(-3px);
}

/* アンダーラインスタイル時はアイコン下線にも色を合わせる */
.wp-block-button.is-style-recette-underline .wp-block-button__link.recette-btn-has-icon {
	border-bottom: 1px solid var(--recette-color-accent);
}

/* ==========================================================================
   10. 関連記事カード（4スタイル）
   ========================================================================== */

/* 共通レイアウト */
.recette-related-card {
	display: block;
	margin: 2em 0;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recette-related-card:hover {
	opacity: 1;
	text-decoration: none;
}

.recette-related-card__inner {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1.25rem;
	align-items: center;
	padding: 1rem;
	background: var(--recette-color-surface);
}

.recette-related-card__image {
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 2px;
	background: var(--recette-color-border);
}

.recette-related-card__image--empty {
	background: var(--recette-color-bg-soft);
}

.recette-related-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.recette-related-card:hover .recette-related-card__image img {
	transform: scale(1.05);
}

.recette-related-card__body {
	min-width: 0;
}

.recette-related-card__category {
	font-size: 10px;
	color: var(--recette-color-accent-light);
	letter-spacing: 0.25em;
	font-family: var(--recette-font-sans);
	margin-bottom: 6px;
	text-transform: uppercase;
}

.recette-related-card__title {
	font-family: var(--recette-font-serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--recette-color-text);
	line-height: 1.5;
	margin: 0 0 8px;
}

.recette-related-card__excerpt {
	font-size: 12px;
	color: var(--recette-color-text-soft);
	line-height: 1.7;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.recette-related-card__more {
	font-size: 10px;
	color: var(--recette-color-accent);
	letter-spacing: 0.2em;
	font-weight: 500;
	transition: transform 0.3s ease;
	display: inline-block;
}

.recette-related-card:hover .recette-related-card__more {
	transform: translateX(4px);
}

/* ==========================================================================
   スタイル1: シンプル（デフォルト）
   ========================================================================== */
.recette-related-card.is-style-simple {
	background: transparent;
}

.recette-related-card.is-style-simple .recette-related-card__inner {
	border: none;
}

/* ==========================================================================
   スタイル2: シャドウ
   ========================================================================== */
.recette-related-card.is-style-shadow .recette-related-card__inner {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.recette-related-card.is-style-shadow:hover .recette-related-card__inner {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   スタイル3: ボーダー
   ========================================================================== */
.recette-related-card.is-style-border .recette-related-card__inner {
	border: 0.5px solid var(--recette-color-border);
	border-radius: 4px;
}

.recette-related-card.is-style-border:hover .recette-related-card__inner {
	border-color: var(--recette-color-accent);
}

/* ==========================================================================
   スタイル4: 雑誌風（縦長レイアウト）
   ========================================================================== */
.recette-related-card.is-style-magazine .recette-related-card__inner {
	grid-template-columns: 1fr;
	gap: 1.25rem;
	padding: 1.5rem;
	background: var(--recette-color-bg-soft);
	border-radius: 4px;
}

.recette-related-card.is-style-magazine .recette-related-card__image {
	aspect-ratio: 16/9;
}

.recette-related-card.is-style-magazine .recette-related-card__body {
	text-align: center;
	padding: 0 1rem;
}

.recette-related-card.is-style-magazine .recette-related-card__title {
	font-size: 18px;
	margin-bottom: 12px;
}

.recette-related-card.is-style-magazine .recette-related-card__more {
	display: inline-block;
	padding: 8px 24px;
	border: 0.5px solid var(--recette-color-accent);
	margin-top: 8px;
	transition: all 0.3s ease;
}

.recette-related-card.is-style-magazine:hover .recette-related-card__more {
	background: var(--recette-color-accent);
	color: #fff;
	transform: none;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 600px) {
	.recette-related-card__inner {
		grid-template-columns: 100px 1fr;
		gap: 0.75rem;
		padding: 0.75rem;
	}
	.recette-related-card__title {
		font-size: 14px;
	}
	.recette-related-card__excerpt {
		display: none;
	}
	.recette-related-card.is-style-magazine .recette-related-card__inner {
		grid-template-columns: 1fr;
		padding: 1rem;
	}
}

/* ==========================================================================
   9. エディタカラーパレット用クラス
   クラシックテーマでは editor-color-palette で登録した色のCSSクラスを
   テーマ側で定義する必要がある（フロント・エディタ共通＝このファイル）。
   var() を使える色は変数参照にして、カスタマイザーでの変更にも追従させる。
   ========================================================================== */
.has-recette-surface-background-color { background-color: var(--recette-color-surface, #FEFBF6); }
.has-recette-soft-beige-background-color { background-color: var(--recette-color-bg-soft, #F4EBDE); }
.has-recette-cream-background-color { background-color: var(--recette-color-bg, #FBF7F1); }
.has-recette-accent-background-color { background-color: var(--recette-color-accent, #B8826A); }
.has-recette-accent-light-background-color { background-color: var(--recette-color-accent-light, #C99B8A); }
.has-recette-border-background-color { background-color: var(--recette-color-border, #E5D5C0); }
.has-recette-text-background-color { background-color: var(--recette-color-text, #3D2A1E); }
.has-recette-white-background-color { background-color: #FFFFFF; }

.has-recette-surface-color { color: var(--recette-color-surface, #FEFBF6); }
.has-recette-soft-beige-color { color: var(--recette-color-bg-soft, #F4EBDE); }
.has-recette-cream-color { color: var(--recette-color-bg, #FBF7F1); }
.has-recette-accent-color { color: var(--recette-color-accent, #B8826A); }
.has-recette-accent-light-color { color: var(--recette-color-accent-light, #C99B8A); }
.has-recette-border-color { color: var(--recette-color-border, #E5D5C0); }
.has-recette-text-color { color: var(--recette-color-text, #3D2A1E); }
.has-recette-white-color { color: #FFFFFF; }

/* ==========================================================================
   キャプションボックス × 背景色設定の連携
   タブ風タイトルだけは背景がルートではなく本文ボックス側にあるため、
   ユーザーが選んだ背景色を本文にも引き継ぐ。
   ========================================================================== */
.recette-caption-box.is-style-tab-title.has-background {
	border-radius: 4px;
}

.recette-caption-box.is-style-tab-title.has-background .recette-caption-box__body {
	background-color: inherit;
}

/* ==========================================================================
   画像ブロック（core/image）のスタイルプリセット
   「スタイル」パネルから選択。フロント・エディタ両方に適用される。
   ========================================================================== */

/* うっすら枠線：写真の輪郭をやわらかく締める */
.wp-block-image.is-style-recette-bordered img {
	border: 1px solid var(--recette-color-border);
	border-radius: 4px;
}

/* ふんわり浮かせる：ほんの少しだけ持ち上がって見える影 */
.wp-block-image.is-style-recette-elevated img {
	border-radius: 6px;
	box-shadow: 0 6px 22px rgba(61, 42, 30, 0.14);
}