/* ==========================================================================
   記事の共有（inc/share.php・template-parts/common/share.php・assets/js/share/share.js）
   共有を置くページ（コラム・お知らせ・施工事例の詳細）だけで、事業の CSS のあとに読み込む。
   - c-share: 共有の欄（LINE・X・Facebook・リンクをコピー・その他・ストーリー用の画像）
   - c-share-story: Instagram のストーリー用の画像の画面（dialog。share.js が作る）
   - c-share-toast: 「リンクをコピーしました」などのお知らせ（share.js が作る）
   見た目は事業ごと（--paint・--kanasa・--corporate）。下の「事業ごとの値」で、色・角丸・文字だけを入れ替える。
   SNS の色（LINE の緑など）は使わず、その事業の色の丸にする（サイトの色面のルール。2026-10-03）。
   Figma にはまだない（TODO.md「Figma に反映すること」）
   ========================================================================== */

/* ---- 事業ごとの値 ---- */
.c-share--corporate,
.c-share-story--corporate,
.c-share-toast--corporate {
	--share-bg: var(--color-bg-subtle);
	--share-surface: var(--color-bg-canvas);
	--share-text: var(--color-text-primary);
	--share-sub: var(--color-text-secondary);
	--share-line: var(--color-border-default);
	--share-accent: var(--color-action-primary);
	--share-accent-hover: var(--color-action-primary-hover);
	--share-accent-text: var(--color-text-brand);
	--share-on-accent: var(--color-text-on-brand);
	--share-tint: var(--color-bg-muted);
	--share-toast: var(--color-bg-inverse);
	--share-radius: var(--radius-lg);
	--share-radius-inner: var(--radius-md);
	--share-title-color: var(--color-text-primary);
	--share-text-title: var(--text-h5);
	--share-ls-title: var(--ls-h5);
	--share-text-dialog-title: var(--text-h4);
	--share-ls-dialog-title: var(--ls-h4);
	--share-text-label: var(--text-label-s);
	--share-ls-label: var(--ls-label-s);
	--share-text-button: var(--text-label-l);
	--share-ls-button: var(--ls-label-l);
	--share-text-body: var(--text-body-s);
	--share-ls-body: var(--ls-body-s);
	--share-text-sub: var(--text-en-caption);
	--share-ls-sub: var(--ls-en-caption);
	--share-font: var(--font-ja);
}

.c-share--paint,
.c-share-story--paint,
.c-share-toast--paint {
	--share-bg: var(--color-bg-muted);
	--share-surface: var(--color-bg-canvas);
	--share-text: var(--color-text-primary);
	--share-sub: var(--color-text-secondary);
	--share-line: var(--color-border-default);
	--share-accent: var(--color-action-primary);
	--share-accent-hover: var(--color-action-primary-hover);
	--share-accent-text: var(--color-text-brand);
	--share-on-accent: var(--color-text-on-brand);
	--share-tint: var(--color-bg-muted);
	--share-toast: var(--color-bg-brand-strong);
	--share-radius: var(--radius-paint-card);
	--share-radius-inner: var(--radius-paint-box);
	--share-title-color: var(--color-text-primary);
	--share-text-title: var(--text-paint-h4);
	--share-ls-title: var(--ls-paint);
	--share-text-dialog-title: var(--text-paint-h4);
	--share-ls-dialog-title: var(--ls-paint);
	--share-text-label: var(--text-paint-label-s);
	--share-ls-label: var(--ls-paint);
	--share-text-button: var(--text-paint-label-l);
	--share-ls-button: var(--ls-paint);
	--share-text-body: var(--text-paint-body-s);
	--share-ls-body: var(--ls-paint);
	--share-text-sub: var(--text-paint-caption);
	--share-ls-sub: var(--ls-paint);
	--share-font: var(--font-paint);
}

.c-share--kanasa,
.c-share-story--kanasa,
.c-share-toast--kanasa {
	--share-bg: var(--kanasa-bg-surface);
	--share-surface: var(--kanasa-bg-surface);
	--share-text: var(--kanasa-text-primary);
	--share-sub: var(--kanasa-text-secondary);
	--share-line: var(--kanasa-border-default);
	--share-accent: var(--kanasa-action-primary);
	--share-accent-hover: var(--kanasa-bg-green-strong);
	--share-accent-text: var(--kanasa-text-green);
	--share-on-accent: var(--kanasa-text-on-green);
	--share-tint: var(--kanasa-bg-green-soft);
	--share-toast: var(--kanasa-bg-green-strong);
	--share-radius: var(--kanasa-radius-card, var(--radius-paint-card));
	--share-radius-inner: var(--radius-lg);
	--share-title-color: var(--kanasa-text-green); /* 「ほかのコラム」「この記事でわかること」と同じ緑 */
	--share-text-title: var(--text-kanasa-label);
	--share-ls-title: var(--ls-kanasa);
	--share-text-dialog-title: var(--text-kanasa-h4);
	--share-ls-dialog-title: var(--ls-kanasa);
	--share-text-label: 700 var(--fs-label-s)/1.5 var(--font-kanasa);
	--share-ls-label: var(--ls-kanasa);
	--share-text-button: var(--text-kanasa-label);
	--share-ls-button: var(--ls-kanasa);
	--share-text-body: var(--text-kanasa-body-s);
	--share-ls-body: var(--ls-kanasa);
	--share-text-sub: 700 var(--fs-label-s)/1.5 var(--font-kanasa);
	--share-ls-sub: var(--ls-kanasa);
	--share-font: var(--font-kanasa);
}

/* ==========================================================================
   c-share
   ========================================================================== */
.c-share {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
	padding: var(--space-xl);
	border-radius: var(--share-radius);
	background: var(--share-bg);
	color: var(--share-text);
	font-family: var(--share-font);
}

.c-share__title {
	margin: 0;
	font: var(--share-text-title);
	letter-spacing: var(--share-ls-title);
	color: var(--share-title-color);
}

.c-share__body {
	display: flex;
	flex-wrap: wrap; /* 狭い所（施工事例の本文の列など）では、ストーリー用の画像のボタンを下の段へ */
	gap: var(--space-lg) var(--space-xl);
	align-items: center;
}

.c-share__list {
	display: flex;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-share__item[hidden] {
	display: none;
}

.c-share__button {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	min-width: 64px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.c-share__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--share-accent);
	color: var(--share-on-accent);
	transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.c-share__icon svg {
	width: 24px;
	height: 24px;
}

.c-share__button:hover .c-share__icon {
	background: var(--share-accent-hover);
}

.c-share__button:focus-visible {
	outline: none;
}

.c-share__button:focus-visible .c-share__icon {
	outline: 3px solid var(--share-accent);
	outline-offset: 3px;
}

.c-share__label {
	font: var(--share-text-label);
	letter-spacing: var(--share-ls-label);
	white-space: nowrap;
}

/* リンクをコピー・その他: 白い丸に事業の色の線 */
.c-share__button--copy .c-share__icon,
.c-share__button--native .c-share__icon {
	background: var(--share-surface);
	color: var(--share-accent-text);
	box-shadow: inset 0 0 0 1.5px var(--share-accent);
}

.c-share__button--copy:hover .c-share__icon,
.c-share__button--native:hover .c-share__icon {
	background: var(--share-tint);
}

/* コピーしたあと（2.5秒）: 事業の色の丸にチェック・「コピーしました」 */
.c-share__button--copy.is-done .c-share__icon {
	background: var(--share-accent);
	color: var(--share-on-accent);
	box-shadow: none;
}

.c-share__button--copy.is-done .c-share__label {
	color: var(--share-accent-text);
}

/* ストーリー用の画像を作る（白地に事業の色の線の、丸いボタン） */
.c-share__story {
	display: flex;
	flex: 1 1 260px;
	gap: var(--space-sm);
	align-items: center;
	min-width: 0;
	min-height: 64px;
	padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-xs);
	border: 2px solid var(--share-accent);
	border-radius: var(--radius-full);
	background: var(--share-surface);
	color: var(--share-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.c-share__story[hidden] {
	display: none;
}

.c-share__story:hover {
	background: var(--share-tint);
}

.c-share__story:focus-visible {
	outline: 3px solid var(--share-accent);
	outline-offset: 3px;
}

.c-share__story-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--share-accent);
	color: var(--share-on-accent);
}

.c-share__story-icon svg {
	width: 24px;
	height: 24px;
}

.c-share__story-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.c-share__story-sub {
	font: var(--share-text-sub);
	letter-spacing: var(--share-ls-sub);
	color: var(--share-sub);
}

.c-share__story-label {
	font: var(--share-text-button);
	letter-spacing: var(--share-ls-button);
	color: var(--share-accent-text);
	word-break: keep-all; /* 折り返すのは <wbr> の所だけ（「ストーリー用の／画像を作る」。「作る」だけが落ちないように） */
}

/* 768px 以上: ボタンの文字は1行で入れる。丸の列の横に入らないときは、ボタンを下の段に全幅で置く（768〜1023px で「作る」だけが2行目に落ちたため） */
@media (min-width: 768px) {
	.c-share__story {
		min-width: max-content;
	}
}

@media (max-width: 767px) {
	.c-share {
		gap: var(--space-md);
		padding: var(--space-lg) var(--space-md);
	}

	.c-share__body {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
	}

	/* SP: 丸を等分に並べる（列のあいだは無く、左右に 8px ずつ広げて、札の字の置き場を広くする） */
	.c-share__list {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 0;
		margin-inline: calc(var(--space-xs) * -1);
	}

	/* 列の幅いっぱいにして、丸と札を列の中央に（button は中身の幅になり、「その他」の丸が左に寄ったため） */
	.c-share__button {
		width: 100%;
		min-width: 0;
	}

	.c-share__icon {
		width: 48px;
		height: 48px;
	}

	/* 「リンクを／コピー」は <wbr> の位置で折り返す。「Facebook」は折り返さない（並びを LINE・Facebook・X にして、となりを短い字にしている） */
	.c-share__label {
		text-align: center;
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: normal;
	}

	.c-share__story {
		flex: none;
	}

	/* 塗装・防水の札は SP では 13px・標準の太さ（LINE Seed JP 400。かなさ・コーポレートと同じ 13px）。Paint/SP/Label-S（14px・700）では
	   「Facebook」（73px）が列（375px で 64px）からはみ出して、「LINE Facebook X」が1つの文に見えたため（2026-10-05 監視役の指摘。
	   13px・700 でも 68px で入らない。400 は 64px で、375px 以上で列に入る） */
	.c-share--paint {
		--share-text-label: 400 var(--fs-label-s)/1.4 var(--font-paint);
	}
}

/* 360px 未満で丸が5つ（端末の共有メニュー「その他」がある）ときは、3列×2段にする（札の字が重ならないように） */
@media (max-width: 359px) {
	.c-share__list:has(> [data-share-native]:not([hidden])) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-flow: row;
		row-gap: var(--space-sm);
	}
}

/* ==========================================================================
   c-share-toast（リンクをコピーしました など。画面の下に2.5秒）
   ========================================================================== */
.c-share-toast {
	position: fixed;
	bottom: var(--space-xl);
	left: 50%;
	z-index: 1100; /* 全画面メニュー・固定バー・案内バナーより上 */
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	width: max-content;
	max-width: calc(100% - var(--space-xl));
	padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
	border-radius: var(--radius-full);
	background: var(--share-toast);
	color: var(--share-on-accent);
	font: var(--share-text-label);
	letter-spacing: var(--share-ls-label);
	box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
	opacity: 0;
	transform: translate(-50%, 12px);
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.c-share-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.c-share-toast__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--share-surface);
	color: var(--share-accent-text);
}

.c-share-toast__icon svg {
	width: 16px;
	height: 16px;
}

.c-share-toast--error .c-share-toast__icon {
	color: var(--color-text-cta);
}

@media (max-width: 767px) {
	/* 画面の下に固定の問い合わせバー（76px）と法人向けの案内の帯（44px）があるページでも、その上に出す */
	.c-share-toast {
		bottom: calc(136px + env(safe-area-inset-bottom, 0px));
	}

	/* ストーリーの画面（下から出る板）の中では、画面の上（板の上のあき）に出す。下はボタンの並びなので重ねない */
	dialog .c-share-toast {
		top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
		bottom: auto;
		transform: translate(-50%, -12px);
	}

	dialog .c-share-toast.is-visible {
		transform: translate(-50%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-share-toast {
		transition: none;
	}
}

/* ==========================================================================
   c-share-story（Instagram のストーリー用の画像。dialog）
   ========================================================================== */
.c-share-story {
	width: min(100% - var(--space-xl), 760px);
	max-width: none;
	max-height: calc(100dvh - var(--space-xl));
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--share-radius);
	background: var(--share-surface);
	color: var(--share-text);
	font-family: var(--share-font);
	box-shadow: 0 24px 64px rgb(0 0 0 / 25%);
	overscroll-behavior: contain;
}

.c-share-story::backdrop {
	background: rgb(21 37 48 / 80%); /* 濃紺 navy-950 の 80%（dialog の背景はトークンを継がないので値で書く） */
}

.c-share-story__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-xl);
}

.c-share-story__head {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
}

.c-share-story__title {
	margin: 0;
	font: var(--share-text-dialog-title);
	letter-spacing: var(--share-ls-dialog-title);
	word-break: keep-all; /* 折り返すのは <wbr> の所だけ（「Instagramの／ストーリー用の画像」。「画像」だけが落ちないように） */
}

.c-share-story__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--share-tint);
	color: var(--share-accent-text);
	cursor: pointer;
}

.c-share-story__close svg {
	width: 22px;
	height: 22px;
}

.c-share-story :focus-visible {
	outline: 3px solid var(--share-accent);
	outline-offset: 3px;
}

.c-share-story__body {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: start;
}

.c-share-story__preview {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--share-tint);
	box-shadow: 0 0 0 1px var(--share-line);
}

.c-share-story__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-share-story__image[hidden],
.c-share-story__loading[hidden],
.c-share-story__actions[hidden],
.c-share-story__error[hidden] {
	display: none;
}

.c-share-story__loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	font: var(--share-text-body);
	letter-spacing: var(--share-ls-body);
	color: var(--share-sub);
	text-align: center;
}

.c-share-story__spinner {
	width: 36px;
	height: 36px;
	border: 4px solid var(--share-line);
	border-top-color: var(--share-accent);
	border-radius: 50%;
	animation: c-share-story-spin 0.9s linear infinite;
}

.c-share-story__guide {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.c-share-story__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-share-story__step {
	display: flex;
	gap: var(--space-sm);
	font: var(--share-text-body);
	letter-spacing: var(--share-ls-body);
}

.c-share-story__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 0.1em;
	border-radius: 50%;
	background: var(--share-tint);
	color: var(--share-accent-text);
	font: var(--share-text-label);
	letter-spacing: 0;
}

.c-share-story__url {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.c-share-story__url-label {
	font: var(--share-text-label);
	letter-spacing: var(--share-ls-label);
	color: var(--share-sub);
}

.c-share-story__url-row {
	display: flex;
	gap: var(--space-xs);
}

.c-share-story__url-field {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: var(--space-xs) var(--space-sm);
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--share-radius-inner);
	background: var(--share-tint);
	color: inherit;
	font: var(--share-text-body);
	letter-spacing: 0;
}

.c-share-story__url-copy {
	flex: none;
	min-height: 44px;
	padding: 0 var(--space-md);
	border: 1.5px solid var(--share-accent);
	border-radius: var(--share-radius-inner);
	background: var(--share-surface);
	color: var(--share-accent-text);
	font: var(--share-text-label);
	letter-spacing: var(--share-ls-label);
	cursor: pointer;
}

.c-share-story__url-copy:hover {
	background: var(--share-tint);
}

.c-share-story__url-copy.is-done {
	background: var(--share-accent);
	color: var(--share-on-accent);
}

.c-share-story__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.c-share-story__button {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 var(--space-lg);
	border: 2px solid var(--share-accent);
	border-radius: var(--radius-full);
	background: var(--share-surface);
	color: var(--share-accent-text);
	font: var(--share-text-button);
	letter-spacing: var(--share-ls-button);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, opacity 0.2s;
}

.c-share-story__button svg {
	width: 20px;
	height: 20px;
}

.c-share-story__button:hover {
	background: var(--share-tint);
}

.c-share-story__button--primary {
	background: var(--share-accent);
	color: var(--share-on-accent);
}

.c-share-story__button--primary:hover {
	border-color: var(--share-accent-hover);
	background: var(--share-accent-hover);
}

.c-share-story__button[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

.c-share-story__error {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: flex-start;
	padding: var(--space-md);
	border: 1.5px solid var(--color-action-cta);
	border-radius: var(--share-radius-inner);
	color: var(--color-text-cta);
	font: var(--share-text-body);
	letter-spacing: var(--share-ls-body);
}

.c-share-story__error p {
	margin: 0;
}

body.is-share-story-open {
	overflow: hidden;
}

@keyframes c-share-story-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-share-story__spinner {
		animation-duration: 2.4s;
	}
}

@media (max-width: 767px) {
	/* SP: 画面の下から出る板。上は 72px あけて、お知らせ（c-share-toast。高さ 48px）をそこに出す */
	.c-share-story {
		width: 100%;
		max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
		margin: auto 0 0;
		border-radius: var(--share-radius) var(--share-radius) 0 0;
	}

	.c-share-story__inner {
		gap: var(--space-md);
		padding: var(--space-md) var(--space-lg) 0; /* 下の余白はボタンの並び（下に固定）が持つ */
	}

	.c-share-story__body {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
		gap: var(--space-md);
	}

	.c-share-story__preview {
		width: 140px;
		margin-inline: auto;
		border-radius: var(--radius-md);
	}

	.c-share-story__guide {
		gap: var(--space-md);
	}

	.c-share-story__button {
		min-height: 52px;
	}

	/* ボタンの並びは板の下に固定する（高さの低い画面で「画像をシェアする」「画像を保存する」が画面の外に出たため。
	   見本・手順・URL は板の中でスクロールする）。左右は板の端まで地の色で覆う */
	.c-share-story__actions {
		position: sticky;
		bottom: 0;
		z-index: 1;
		margin-inline: calc(var(--space-lg) * -1);
		padding: var(--space-sm) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
		background: var(--share-surface);
		box-shadow: 0 -1px 0 var(--share-line);
	}

	.c-share-story__error {
		margin-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
	}
}

/* 高さの低い画面（iPhone SE など）では見本を小さくして、手順を見えやすくする */
@media (max-width: 767px) and (max-height: 700px) {
	.c-share-story__preview {
		width: 112px;
	}
}

/* ==========================================================================
   置き場所（各ページのクラス。段と段のあいだは、そのページの間隔のまま）
   ========================================================================== */
.p-works-single__share {
	align-self: stretch; /* 本文の列は左寄せ（align-items: flex-start）なので、幅いっぱいに */
}