:root {
	--border: #e5e7eb;
}

.ogp-image-generator,
.ogp-image-generator *,
.ogp-image-generator *::before,
.ogp-image-generator *::after {
  box-sizing: border-box;
}

.ogp-image-generator {
	font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
	font-size: 14px;
	color: #111827;

	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;
	display: grid;
	gap: 24px;
	align-items: start;

	* {
		box-sizing: border-box;
	}

	/* 2グループ横並び（デスクトップ） */
	.controls {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	/* スマホは縦並び */
	@media (max-width: 900px) {
		.controls {
			grid-template-columns: 1fr;
		}
	}

	.controls h1 {
		margin: 0 0 10px;
		font-size: 20px;
	}

	/* ボタンはSVGの上で横幅いっぱい */
	.actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.actions .downloadBtn {
		width: 100%;
		padding: 12px 14px;
		border-radius: 12px;
	}

	.group {
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 12px;
		padding: 12px;
		background: #fff;
		min-width: 0;
		/* はみ出し対策 */
	}

	.group h2 {
		margin: 0 0 8px;
		font-size: 14px;
		opacity: 0.75;
	}

	label {
		display: block;
		font-size: 12px;
		margin-top: 12px;
		opacity: .85;
	}

	input,
	select {
		width: 100%;
		padding: 10px;
		border-radius: 10px;
		border: 1px solid var(--border);
		background: #fff;
	}

	/* ===== color inputを見やすく（Windows/Chrome対策） ===== */
	input[type="color"] {
		height: 44px;
		padding: 6px;
		border-radius: 10px;
	}

	/* ブラウザごとのスウォッチ領域を整える */
	input[type="color"]::-webkit-color-swatch-wrapper {
		padding: 0;
	}

	input[type="color"]::-webkit-color-swatch {
		border: none;
		border-radius: 8px;
	}

	input[type="color"]::-moz-color-swatch {
		border: none;
		border-radius: 8px;
	}

	.btns {
		display: flex;
		gap: 10px;
		margin-top: 12px;
		flex-wrap: wrap;
	}

	button {
		padding: 10px 14px;
		border-radius: 12px;
		border: 1px solid var(--border);
		background: #fff;
		cursor: pointer;
	}

	button:hover {
		background: #fafafa;
	}

	.preview {
		padding: 12px;
		background: #fff;
		overflow: auto;
	}

	.preview svg {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 16px;
		border: 1px solid #f1f5f9;
	}

	.advanced {
		margin-top: 14px;
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 10px 12px;
		background: #fff;
	}

	.advanced summary {
		font-size: 12px;
		cursor: pointer;
		font-weight: 800;
		user-select: none;
	}

	.hr {
		border: 0;
		border-top: 1px solid #eef2f7;
		margin: 14px 0;
	}

	.grid2 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

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

	.subhead {
		margin: 0 0 6px;
		font-size: 13px;
		opacity: .85;
	}

	.hint {
		margin-top: 10px;
		font-size: 12px;
		opacity: .7;
		line-height: 1.5;
	}

	.footnote {
		font-size: 12px;
		opacity: .7;
		margin-top: 12px;
		line-height: 1.5;
	}

	.seedRow {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.seedBtn {
		white-space: nowrap;
		padding: 10px 12px;
		border-radius: 10px;
	}

	.svg-preview svg {
		width: 100%;
		height: auto;
		aspect-ratio: 1200 / 630;
		display: block;
	}

	/* --- パネル（Text / Icon のブロックを“まとまり”にする） --- */

	.field-inline {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 12px;
	}

	.field-label {
		margin: 0;
		white-space: nowrap;
	}

	/* --- ラジオをセグメント（ボタン）に --- */
	.segmented {
		display: inline-grid;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		gap: 6px;
		padding: 0;
		border-radius: 14px;
		background: rgba(0, 0, 0, 0.04);
		border: 1px solid rgba(0, 0, 0, 0.06);
	}

	.segmented input[type="radio"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.segmented label {
		padding: 0 10px;
		margin: 0;
		height: 20px;
		display: grid;
		place-items: center;
		border-radius: 12px;
		font-weight: 700;
		font-size: 12px;
		color: rgba(0, 0, 0, 0.7);
		cursor: pointer;
		user-select: none;
	}

	.segmented input[type="radio"]:checked+label {
		background: #fff;
		color: rgba(0, 0, 0, 0.9);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
		border: 1px solid rgba(0, 0, 0, 0.06);
	}

	/* --- Dropzone --- */
	.dropzone {
		margin-top: 12px;
		padding: 14px;
		border-radius: 14px;
		border: 1px dashed rgba(0, 0, 0, 0.25);
		background: rgba(0, 0, 0, 0.02);
		text-align: center;
		cursor: pointer;
	}

	.dropzone__title {
		font-weight: 800;
		font-size: 13px;
		pointer-events: none;
	}

	.dropzone__sub {
		margin-top: 4px;
		font-size: 12px;
		color: rgba(0, 0, 0, 0.6);
		pointer-events: none;
	}

	.dropzone.is-drag {
		border-color: rgba(255, 77, 166, 0.7);
		background: rgba(255, 77, 166, 0.08);
	}

	.panel {
		margin-top: 12px;
		/* labelの余白ルールと揃える */
		padding: 12px;
		border: 1px solid rgba(0, 0, 0, 0.08);
		/* .group と同じ */
		border-radius: 12px;
		/* .group と同じ */
		background: #fff;
		/* .group と同じ */
	}

	/* タイトルは “h2っぽい薄さ” に寄せる */
	.panel-title {
		margin: 0 0 8px;
		font-size: 13px;
		font-weight: 700;
		opacity: 0.75;
		/* .group h2 と同系 */
	}
}