/* 見出し・ボタンデザイン見本 */

.dm-design-gallery {
	--dm-demo-color: #04719e;
	--dm-demo-on-color: var(--wp--preset--color--white);
	--dm-demo-color-strong: color-mix(in srgb, var(--dm-demo-color) 76%, var(--wp--preset--color--text));
	--dm-demo-color-soft: color-mix(in srgb, var(--dm-demo-color) 12%, var(--wp--preset--color--white));
	--dm-demo-color-medium: color-mix(in srgb, var(--dm-demo-color) 30%, var(--wp--preset--color--white));
}

.dm-design-gallery :focus-visible {
	outline-color: var(--dm-demo-color);
}

.dm-design-gallery__intro {
	display: flex;
	align-items: center;
	min-height: 108px;
	margin-bottom: 28px;
	padding: 24px clamp(24px, 4vw, 38px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.dm-design-gallery__intro p {
	max-width: 760px;
	margin: 0 0 -0.45em;
	color: var(--wp--preset--color--text-light);
	line-height: 1.9;
}

.dm-design-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.dm-design-card {
	display: flex;
	min-width: 0;
	min-height: 480px;
	padding: clamp(22px, 3vw, 30px);
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
}

.dm-design-card__header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 11px;
	margin-bottom: 22px;
}

.dm-design-card__header span {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	background: var(--wp--preset--color--surface);
	border-radius: 50%;
	color: var(--dm-demo-color);
	font-family: var(--wp--preset--font-family--en);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.dm-design-card__header h2 {
	margin: 0;
	font-size: 1.08rem;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.dm-heading-preview,
.dm-button-preview {
	display: flex;
	min-height: 178px;
	margin-bottom: 22px;
	padding: 22px;
	justify-content: center;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 11px;
	overflow: hidden;
}

.dm-heading-preview {
	gap: 17px;
}

.dm-button-preview {
	align-items: center;
}

.dm-design-card__description {
	margin: 0 0 22px;
	color: var(--wp--preset--color--text-light);
	font-size: 0.88rem;
	line-height: 1.8;
}

.dm-design-card__button {
	width: 100%;
	min-height: 46px;
	margin-top: auto;
	padding: 0.72em 1.15em;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--dm-demo-color);
	border-radius: 999px;
	color: var(--dm-demo-color);
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.4;
	transition: background 0.2s ease-out, color 0.2s ease-out;
}

.dm-design-card__button:hover {
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

/* 見出しの共通サイズ */
.dm-heading-pattern--line .dm-demo-heading,
.dm-heading-pattern--bar .dm-demo-heading,
.dm-heading-pattern--band .dm-demo-heading,
.dm-heading-pattern--rule .dm-demo-heading,
.dm-heading-pattern--marker .dm-demo-heading,
.dm-heading-pattern--label .dm-demo-heading,
.dm-heading-pattern--rails .dm-demo-heading,
.dm-heading-pattern--corner .dm-demo-heading,
.dm-heading-pattern--center .dm-demo-heading,
.dm-heading-pattern--dots .dm-demo-heading,
.dm-heading-pattern--frame .dm-demo-heading,
.dm-heading-pattern--bracket .dm-demo-heading,
.dm-heading-pattern--bicolor .dm-demo-heading,
.dm-heading-pattern--balloon .dm-demo-heading,
.dm-heading-pattern--stripe .dm-demo-heading,
.dm-heading-pattern--gradient .dm-demo-heading,
.dm-heading-pattern--stitch .dm-demo-heading,
.dm-heading-pattern--check .dm-demo-heading {
	color: var(--wp--preset--color--text);
	font-weight: 700;
	letter-spacing: 0.035em;
}

.dm-heading-preview .dm-demo-heading--h2 {
	font-size: 1.02rem;
	line-height: 1.45;
}

.dm-heading-preview .dm-demo-heading--h3 {
	font-size: 0.86rem;
	line-height: 1.5;
}

.dm-heading-preview .dm-demo-heading--h4 {
	font-size: 0.74rem;
	line-height: 1.55;
}

.dm-sample-article .dm-demo-heading--h2 {
	margin: 3rem 0 1.25rem;
	font-size: clamp(1.55rem, 4vw, 2.05rem);
	line-height: 1.45;
}

.dm-sample-article .dm-demo-heading--h3 {
	margin: 2.6rem 0 1.1rem;
	font-size: clamp(1.25rem, 3vw, 1.55rem);
	line-height: 1.5;
}

.dm-sample-article .dm-demo-heading--h4 {
	margin: 2.2rem 0 0.9rem;
	font-size: clamp(1.08rem, 2.5vw, 1.22rem);
	line-height: 1.55;
}

/* 01 シンプル下線 */
.dm-heading-pattern--line .dm-demo-heading {
	padding-bottom: 0.48em;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dm-heading-pattern--line .dm-demo-heading--h2 {
	border-bottom-width: 3px;
	border-bottom-color: var(--dm-demo-color);
}

/* 02 左アクセント */
.dm-heading-pattern--bar .dm-demo-heading {
	padding: 0.2em 0 0.2em 0.8em;
	border-left: 3px solid var(--dm-demo-color);
}

.dm-heading-pattern--bar .dm-demo-heading--h2 {
	border-left-width: 6px;
	border-left-color: var(--dm-demo-color);
}

.dm-heading-pattern--bar .dm-demo-heading--h4 {
	border-left-width: 2px;
}

/* 03 背景帯 */
.dm-heading-pattern--band .dm-demo-heading {
	padding: 0.62em 0.8em;
	background: var(--dm-demo-color-soft);
	border-radius: 5px;
}

.dm-heading-pattern--band .dm-demo-heading--h2 {
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

.dm-heading-pattern--band .dm-demo-heading--h4 {
	width: fit-content;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
}

/* 04 両端ライン */
.dm-heading-pattern--rule .dm-demo-heading {
	display: flex;
	align-items: center;
	gap: 0.7em;
	text-align: center;
}

.dm-heading-pattern--rule .dm-demo-heading::before,
.dm-heading-pattern--rule .dm-demo-heading::after {
	content: "";
	height: 1px;
	flex: 1 1 20px;
	background: var(--wp--preset--color--border);
}

.dm-heading-pattern--rule .dm-demo-heading--h2::before,
.dm-heading-pattern--rule .dm-demo-heading--h2::after {
	height: 2px;
	background: var(--dm-demo-color);
}

/* 05 マーカー */
.dm-heading-pattern--marker .dm-demo-heading {
	width: fit-content;
	background: linear-gradient(transparent 58%, var(--dm-demo-color-soft) 58%);
}

.dm-heading-pattern--marker .dm-demo-heading--h2 {
	background: linear-gradient(transparent 58%, var(--dm-demo-color-medium) 58%);
}

.dm-heading-pattern--marker .dm-demo-heading--h4 {
	background: linear-gradient(transparent 58%, var(--wp--preset--color--border) 58%);
}

/* 06 ナンバーラベル */
.dm-heading-pattern--label .dm-demo-heading {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.65em;
}

.dm-heading-pattern--label .dm-demo-heading::before {
	content: attr(data-index);
	display: grid;
	min-width: 2.6em;
	min-height: 2.6em;
	padding: 0.35em;
	place-items: center;
	background: var(--wp--preset--color--text);
	border-radius: 4px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--en);
	font-size: 0.62em;
	line-height: 1;
}

.dm-heading-pattern--label .dm-demo-heading--h2::before {
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

.dm-heading-pattern--label .dm-demo-heading--h4::before {
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

/* 07 上下ライン */
.dm-heading-pattern--rails .dm-demo-heading {
	padding-block: 0.5em;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dm-heading-pattern--rails .dm-demo-heading--h2 {
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-color: var(--dm-demo-color);
}

.dm-heading-pattern--rails .dm-demo-heading--h4 {
	border-bottom: 0;
}

/* 08 コーナーライン */
.dm-heading-pattern--corner .dm-demo-heading {
	position: relative;
	padding: 0.55em 0.75em;
	border-top: 2px solid var(--dm-demo-color);
	border-left: 2px solid var(--dm-demo-color);
}

.dm-heading-pattern--corner .dm-demo-heading::after {
	content: "";
	position: absolute;
	width: 1.15em;
	height: 1.15em;
	right: 0;
	bottom: 0;
	border-right: 1px solid var(--dm-demo-color);
	border-bottom: 1px solid var(--dm-demo-color);
}

.dm-heading-pattern--corner .dm-demo-heading--h3 {
	border-top-width: 1px;
	border-left-color: var(--dm-demo-color);
}

.dm-heading-pattern--corner .dm-demo-heading--h4 {
	width: fit-content;
	border-color: var(--wp--preset--color--border);
}

/* 09 センターアクセント */
.dm-heading-pattern--center .dm-demo-heading {
	position: relative;
	padding-bottom: 0.72em;
	text-align: center;
}

.dm-heading-pattern--center .dm-demo-heading::after {
	content: "";
	position: absolute;
	width: 3em;
	height: 2px;
	left: 50%;
	bottom: 0;
	background: var(--wp--preset--color--border);
	transform: translateX(-50%);
}

.dm-heading-pattern--center .dm-demo-heading--h2::after {
	width: 4em;
	height: 3px;
	background: var(--dm-demo-color);
}

.dm-heading-pattern--center .dm-demo-heading--h4::after {
	background: var(--dm-demo-color);
}

/* 10 点線 */
.dm-heading-pattern--dots .dm-demo-heading {
	padding-bottom: 0.5em;
	border-bottom: 2px dotted var(--wp--preset--color--border);
}

.dm-heading-pattern--dots .dm-demo-heading--h2 {
	border-bottom-width: 3px;
	border-bottom-color: var(--dm-demo-color);
}

.dm-heading-pattern--dots .dm-demo-heading--h4 {
	width: fit-content;
	border-bottom-color: var(--dm-demo-color);
}

/* 11 枠囲み */
.dm-heading-pattern--frame .dm-demo-heading {
	padding: 0.58em 0.8em;
	border: 1px solid var(--wp--preset--color--border);
}

.dm-heading-pattern--frame .dm-demo-heading--h2 {
	border: 2px solid var(--wp--preset--color--text);
}

.dm-heading-pattern--frame .dm-demo-heading--h3 {
	border-color: var(--dm-demo-color);
}

.dm-heading-pattern--frame .dm-demo-heading--h4 {
	width: fit-content;
	border-color: var(--dm-demo-color);
}

/* 12 ブラケット */
.dm-heading-pattern--bracket .dm-demo-heading {
	display: flex;
	align-items: center;
	gap: 0.48em;
}

.dm-heading-pattern--bracket .dm-demo-heading::before,
.dm-heading-pattern--bracket .dm-demo-heading::after {
	color: var(--dm-demo-color);
	font-family: var(--wp--preset--font-family--en);
	font-size: 1.55em;
	font-weight: 400;
	line-height: 0.7;
}

.dm-heading-pattern--bracket .dm-demo-heading::before {
	content: "[";
}

.dm-heading-pattern--bracket .dm-demo-heading::after {
	content: "]";
}

.dm-heading-pattern--bracket .dm-demo-heading--h4::before,
.dm-heading-pattern--bracket .dm-demo-heading--h4::after {
	color: var(--dm-demo-color);
}

/* 13 二色下線 */
.dm-heading-pattern--bicolor .dm-demo-heading {
	position: relative;
	padding-bottom: 0.48em;
	border-bottom: 2px solid var(--wp--preset--color--border);
}

.dm-heading-pattern--bicolor .dm-demo-heading::after {
	content: "";
	position: absolute;
	width: 22%;
	height: 2px;
	left: 0;
	bottom: -2px;
	background: var(--dm-demo-color);
}

.dm-heading-pattern--bicolor .dm-demo-heading--h2 {
	border-bottom-width: 3px;
}

.dm-heading-pattern--bicolor .dm-demo-heading--h2::after {
	width: 26%;
	height: 3px;
	bottom: -3px;
}

.dm-heading-pattern--bicolor .dm-demo-heading--h4::after {
	background: var(--dm-demo-color);
}

/* 14 吹き出し */
.dm-heading-pattern--balloon .dm-demo-heading {
	position: relative;
	padding: 0.6em 0.9em;
	background: var(--dm-demo-color-soft);
	border-radius: 8px;
}

.dm-heading-pattern--balloon .dm-demo-heading::after {
	content: "";
	position: absolute;
	left: 1.4em;
	bottom: -9px;
	border: 9px solid transparent;
	border-top-color: var(--dm-demo-color-soft);
	border-bottom: 0;
}

.dm-heading-pattern--balloon .dm-demo-heading--h2 {
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

.dm-heading-pattern--balloon .dm-demo-heading--h2::after {
	border-top-color: var(--dm-demo-color);
}

.dm-heading-pattern--balloon .dm-demo-heading--h4 {
	width: fit-content;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
}

.dm-heading-pattern--balloon .dm-demo-heading--h4::after {
	bottom: -8px;
	border-top-color: var(--wp--preset--color--border);
}

/* 15 ストライプ */
.dm-heading-pattern--stripe .dm-demo-heading {
	padding: 0.6em 0.85em;
	background: repeating-linear-gradient(-45deg, var(--dm-demo-color-soft) 0 6px, var(--wp--preset--color--white) 6px 12px);
}

.dm-heading-pattern--stripe .dm-demo-heading--h2 {
	border-left: 6px solid var(--dm-demo-color);
}

.dm-heading-pattern--stripe .dm-demo-heading--h3 {
	border-left: 4px solid var(--dm-demo-color);
}

.dm-heading-pattern--stripe .dm-demo-heading--h4 {
	width: fit-content;
	border-left: 3px solid var(--dm-demo-color);
}

/* 16 グラデーション帯 */
.dm-heading-pattern--gradient .dm-demo-heading {
	padding: 0.62em 0.85em;
	background: linear-gradient(90deg, var(--dm-demo-color-soft), transparent);
	border-radius: 5px;
}

.dm-heading-pattern--gradient .dm-demo-heading--h2 {
	background: linear-gradient(90deg, var(--dm-demo-color-strong), var(--dm-demo-color));
	color: var(--dm-demo-on-color);
}

.dm-heading-pattern--gradient .dm-demo-heading--h4 {
	width: fit-content;
	background: linear-gradient(90deg, var(--dm-demo-color-soft), var(--wp--preset--color--base));
}

/* 17 ステッチ */
.dm-heading-pattern--stitch .dm-demo-heading {
	padding: 0.55em 0.85em;
	background: var(--dm-demo-color-soft);
	border: 2px dashed var(--wp--preset--color--white);
	border-radius: 6px;
	box-shadow: 0 0 0 4px var(--dm-demo-color-soft);
}

.dm-heading-pattern--stitch .dm-demo-heading--h2 {
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
	box-shadow: 0 0 0 4px var(--dm-demo-color);
}

.dm-heading-pattern--stitch .dm-demo-heading--h4 {
	width: fit-content;
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 4px var(--wp--preset--color--white);
}

/* 18 チェックアイコン */
.dm-heading-pattern--check .dm-demo-heading {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding-bottom: 0.45em;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dm-heading-pattern--check .dm-demo-heading::before {
	content: "\2713";
	display: grid;
	width: 1.7em;
	height: 1.7em;
	flex: 0 0 auto;
	place-items: center;
	background: var(--dm-demo-color);
	border-radius: 50%;
	color: var(--dm-demo-on-color);
	font-size: 0.74em;
	font-weight: 700;
	line-height: 1;
}

.dm-heading-pattern--check .dm-demo-heading--h2 {
	border-bottom-width: 2px;
	border-bottom-color: var(--dm-demo-color);
}

.dm-heading-pattern--check .dm-demo-heading--h4 {
	border-bottom: 0;
}

.dm-heading-pattern--check .dm-demo-heading--h4::before {
	background: var(--dm-demo-color);
}

/* ボタン見本 */
.dm-demo-button {
	display: inline-flex;
	min-height: 48px;
	padding: 0.78em 1.45em;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	color: var(--wp--preset--color--text);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.035em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease-out, background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

a.dm-demo-button:hover {
	color: inherit;
	text-decoration: none;
}

.dm-demo-button--solid {
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	border-radius: 8px;
	color: var(--dm-demo-on-color);
}

a.dm-demo-button--solid:hover {
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
}

.dm-demo-button--outline {
	background: transparent;
	border-color: var(--dm-demo-color);
	border-radius: 8px;
	color: var(--dm-demo-color);
}

a.dm-demo-button--outline:hover {
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

.dm-demo-button--arrow {
	gap: 0.8em;
	padding-inline: 0;
	border-bottom: 1px solid var(--wp--preset--color--text);
}

.dm-demo-button--arrow::after {
	content: "\2192";
	display: grid;
	width: 2rem;
	height: 2rem;
	place-items: center;
	background: var(--wp--preset--color--text);
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	line-height: 1;
}

a.dm-demo-button--arrow:hover {
	border-color: var(--dm-demo-color);
	color: var(--dm-demo-color);
}

.dm-demo-button--soft {
	background: var(--dm-demo-color-soft);
	border-color: var(--dm-demo-color-soft);
	border-radius: 999px;
	color: var(--dm-demo-color);
}

a.dm-demo-button--soft:hover {
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

.dm-demo-button--offset {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--text);
	border-radius: 0;
	box-shadow: 6px 6px 0 var(--dm-demo-color-medium);
}

a.dm-demo-button--offset:hover {
	box-shadow: 3px 3px 0 var(--dm-demo-color-medium);
	transform: translate(3px, 3px);
}

.dm-demo-button--split {
	gap: 1em;
	padding: 0 0 0 1.35em;
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
	border-radius: 8px;
	color: var(--wp--preset--color--white);
	overflow: hidden;
}

.dm-demo-button--split::after {
	content: "\2192";
	display: grid;
	min-width: 48px;
	min-height: 48px;
	place-items: center;
	align-self: stretch;
	background: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
	line-height: 1;
}

a.dm-demo-button--split:hover {
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	color: var(--dm-demo-on-color);
}

.dm-demo-button--accent {
	padding-left: 1.25em;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--text);
	border-left: 8px solid var(--dm-demo-color);
	border-radius: 4px;
	color: var(--wp--preset--color--text);
}

.dm-demo-button--wide {
	width: 100%;
	justify-content: space-between;
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	border-radius: 4px;
	color: var(--dm-demo-on-color);
}

.dm-demo-button--wide::after {
	content: "\2192";
	font-size: 1.15em;
	line-height: 1;
}

.dm-demo-button--download {
	gap: 0.75em;
	background: var(--dm-demo-color-soft);
	border-color: var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
}

.dm-demo-button--download::before {
	content: "\2193";
	display: grid;
	width: 2em;
	height: 2em;
	place-items: center;
	background: var(--dm-demo-color);
	border-radius: 50%;
	color: var(--dm-demo-on-color);
	line-height: 1;
}

.dm-demo-button--chevron {
	gap: 1em;
	background: var(--wp--preset--color--white);
	border-color: var(--dm-demo-color);
	border-radius: 999px;
	color: var(--dm-demo-color);
}

.dm-demo-button--chevron::after {
	content: "\203a";
	font-size: 1.55em;
	font-weight: 400;
	line-height: 0.7;
}

.dm-demo-button--cut {
	padding-inline: 1.8em;
	background: var(--wp--preset--color--text);
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	color: var(--wp--preset--color--white);
}

.dm-demo-button--stacked {
	display: grid;
	gap: 0.22em;
	min-height: 62px;
	padding-block: 0.6em;
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	border-radius: 8px;
	color: var(--dm-demo-on-color);
}

.dm-demo-button--stacked::after {
	content: attr(data-note);
	font-size: 0.7em;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	opacity: 0.82;
}

.dm-demo-button--gradient {
	background: linear-gradient(180deg, var(--dm-demo-color), var(--dm-demo-color-strong));
	border-radius: 999px;
	color: var(--dm-demo-on-color);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--dm-demo-color) 38%, transparent);
}

a.dm-demo-button--gradient:hover {
	color: var(--dm-demo-on-color);
	box-shadow: 0 7px 16px color-mix(in srgb, var(--dm-demo-color) 45%, transparent);
	transform: translateY(-2px);
}

.dm-demo-button--push {
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	border-radius: 8px;
	color: var(--dm-demo-on-color);
	box-shadow: 0 4px 0 color-mix(in srgb, var(--dm-demo-color) 62%, var(--wp--preset--color--text));
}

a.dm-demo-button--push:hover {
	color: var(--dm-demo-on-color);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--dm-demo-color) 62%, var(--wp--preset--color--text));
	transform: translateY(3px);
}

.dm-demo-button--gloss {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent) 0 50%, transparent 50%),
		var(--dm-demo-color);
	border-color: var(--dm-demo-color-strong);
	border-radius: 10px;
	color: var(--dm-demo-on-color);
}

a.dm-demo-button--gloss:hover {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent) 0 50%, transparent 50%),
		var(--dm-demo-color-strong);
	color: var(--dm-demo-on-color);
}

.dm-demo-button--float {
	gap: 0.8em;
	background: var(--wp--preset--color--white);
	border-radius: 999px;
	color: var(--wp--preset--color--text);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--text) 18%, transparent);
}

.dm-demo-button--float::after {
	content: "\2192";
	color: var(--dm-demo-color);
	line-height: 1;
}

a.dm-demo-button--float:hover {
	box-shadow: 0 9px 20px color-mix(in srgb, var(--wp--preset--color--text) 24%, transparent);
	transform: translateY(-2px);
}

.dm-demo-button--double {
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	border-radius: 6px;
	color: var(--dm-demo-on-color);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--white);
}

a.dm-demo-button--double:hover {
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
}

.dm-demo-button--badge {
	position: relative;
	background: var(--dm-demo-color);
	border-color: var(--dm-demo-color);
	border-radius: 8px;
	color: var(--dm-demo-on-color);
}

.dm-demo-button--badge::after {
	content: attr(data-note);
	position: absolute;
	top: -0.95em;
	right: -0.75em;
	padding: 0.45em 0.6em;
	background: var(--dm-demo-color-strong);
	border-radius: 999px;
	color: var(--dm-demo-on-color);
	font-size: 0.68em;
	letter-spacing: 0.06em;
	line-height: 1;
}

a.dm-demo-button--badge:hover {
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
}

/* サンプル記事ダイアログ */
.dm-design-dialog-backdrop {
	position: fixed;
	z-index: 9998;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--text) 72%, transparent);
	backdrop-filter: blur(3px);
}

.dm-design-dialog-backdrop[hidden] {
	display: none;
}

body.dm-design-dialog-open {
	overflow: hidden;
}

.dm-design-dialog {
	width: min(880px, calc(100% - 32px));
	max-width: none;
	max-height: min(88vh, 900px);
	padding: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	color: var(--wp--preset--color--text);
	box-shadow: 0 24px 70px color-mix(in srgb, var(--wp--preset--color--text) 24%, transparent);
	overflow: hidden;
}

.dm-design-dialog[open] {
	position: fixed;
	z-index: 9999;
	inset: 0;
	display: block;
}

.dm-design-dialog::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--text) 72%, transparent);
	backdrop-filter: blur(3px);
}

.dm-design-dialog__frame {
	display: grid;
	max-height: inherit;
	grid-template-rows: auto auto minmax(0, 1fr);
}

.dm-design-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px clamp(20px, 4vw, 34px);
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dm-design-dialog__header p,
.dm-design-dialog__header h2 {
	margin: 0;
}

.dm-design-dialog__header p {
	margin-bottom: 4px;
	color: var(--wp--preset--color--text-light);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
}

.dm-design-dialog__header h2 {
	font-size: clamp(1.15rem, 3vw, 1.45rem);
	line-height: 1.4;
}

.dm-design-dialog__header button {
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	flex: 0 0 auto;
	place-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

.dm-design-dialog__header button:hover {
	border-color: var(--dm-demo-color);
	color: var(--dm-demo-color);
}

.dm-design-color-controls {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) auto minmax(116px, 140px) auto;
	align-items: end;
	gap: 12px 18px;
	padding: 16px clamp(20px, 4vw, 34px);
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dm-design-color-controls p {
	margin: 0;
}

.dm-design-color-controls :focus-visible {
	outline-color: var(--wp--preset--color--text);
}

.dm-design-color-controls__title,
.dm-design-color-picker > span,
.dm-design-color-value > span {
	display: block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--text);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.25;
}

.dm-design-color-controls__title {
	margin-bottom: 3px !important;
	font-size: 0.83rem;
}

.dm-design-color-controls__help {
	color: var(--wp--preset--color--text-light);
	font-size: 0.72rem;
	line-height: 1.45;
}

.dm-design-color-picker input {
	display: block;
	width: 58px;
	height: 42px;
	padding: 3px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	cursor: pointer;
}

.dm-design-color-value input {
	display: block;
	width: 100%;
	min-height: 42px;
	padding: 0.55em 0.75em;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 7px;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--en);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dm-design-color-value input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--text);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--text) 18%, transparent);
}

.dm-design-color-reset {
	min-height: 42px;
	padding: 0.55em 0.9em;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 7px;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	font-size: 0.72rem;
	font-weight: 700;
}

.dm-design-color-reset:hover {
	border-color: var(--dm-demo-color);
	color: var(--dm-demo-color);
}

.dm-design-dialog__body {
	padding: clamp(28px, 6vw, 64px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dm-sample-article {
	max-width: 680px;
	margin: 0 auto;
}

.dm-sample-article > :first-child {
	margin-top: 0;
}

.dm-sample-article p {
	margin: 0 0 1.4em;
	font-size: 0.98rem;
	line-height: 1.9;
}

.dm-sample-article__lead {
	color: var(--wp--preset--color--text-light);
	font-size: 1.04rem !important;
}

.dm-sample-article__visual {
	display: grid;
	min-height: 230px;
	margin-bottom: 24px;
	place-items: center;
	background:
		linear-gradient(135deg, transparent 47%, var(--wp--preset--color--border) 48% 52%, transparent 53%),
		var(--wp--preset--color--surface);
	border-radius: 10px;
	color: var(--wp--preset--color--text-light);
	font-size: 0.82rem;
	font-weight: 700;
}

.dm-sample-article__meta {
	margin-bottom: 0.7em !important;
	color: var(--wp--preset--color--text-light);
	font-size: 0.78rem !important;
	font-weight: 700;
	line-height: 1.4 !important;
}

.dm-sample-article > h3:not(.dm-demo-heading) {
	margin: 0 0 1.1rem;
	font-size: clamp(1.4rem, 4vw, 2rem);
	line-height: 1.5;
}

.dm-sample-article__cta {
	display: flex;
	margin: 2rem 0;
	justify-content: center;
}

@media (max-width: 900px) {
	.dm-design-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dm-design-color-controls {
		grid-template-columns: minmax(160px, 1fr) auto minmax(116px, 140px) auto;
	}

	.dm-design-color-controls__intro {
		grid-column: auto;
	}

	.dm-design-color-picker {
		grid-column: auto;
	}

	.dm-design-color-value {
		grid-column: auto;
	}

	.dm-design-color-reset {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 620px) {
	.dm-design-grid {
		grid-template-columns: 1fr;
	}

	.dm-design-card {
		min-height: 0;
	}

	.dm-design-dialog {
		width: calc(100% - 20px);
		max-height: 92vh;
		border-radius: 13px;
	}

	.dm-design-dialog__header {
		padding: 16px;
	}

	.dm-design-color-controls {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 12px;
		padding: 14px 16px;
	}

	.dm-design-color-controls__intro {
		grid-column: 1 / -1;
	}

	.dm-design-color-picker {
		grid-column: 1;
		grid-row: auto;
	}

	.dm-design-color-value {
		grid-column: 2;
		grid-row: auto;
	}

	.dm-design-color-reset {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.dm-design-dialog__body {
		padding: 28px 20px 40px;
	}

	.dm-sample-article__visual {
		min-height: 170px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-design-card__button,
	.dm-demo-button {
		transition: none;
	}
}