.make-a-number {
	max-width: 720px;
	margin: 0 auto;

	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	padding: 16px;

	.panel {
		border: 1px solid #ddd;
		border-radius: 12px;
		padding: 16px;
	}

	.row {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
	}

	.label {
		font-weight: 600;
		margin-top: 14px;
		margin-bottom: 8px;
	}

	.target {
		font-size: 28px;
		font-weight: 800;
	}

	.cards {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin: 10px 0 16px;
	}

	.card {
		width: 64px;
		height: 64px;
		border: 1px solid #ccc;
		border-radius: 12px;
		display: grid;
		place-items: center;
		font-size: 24px;
		font-weight: 800;
		user-select: none;
	}

	.controls {
		display: grid;
		gap: 8px;
		margin-top: 6px;
	}

	.expr {
		font-size: 18px;
		padding: 10px 12px;
		border-radius: 10px;
		border: 1px solid #ccc;
	}

	button,
	.btn {
		color: #111 !important;
		padding: 10px 12px;
		border-radius: 10px;
		border: 1px solid #ccc;
		background: #fff;
		font-size: 16px;
		cursor: pointer;
	}

	.btn.secondary {
		opacity: 0.8;
	}

	.result {
		margin-top: 12px;
		font-weight: 700;
	}

	.settings {
		border: 1px solid #e5e5e5;
		border-radius: 14px;
		padding: 0;
		margin-bottom: 14px;
		background: #fff;
	}

	.settings-summary {
		cursor: pointer;
		padding: 12px 14px;
		user-select: none;
	}

	.settings-title {
		font-weight: 900;
	}

	.settings-hint {
		opacity: 0.65;
		font-size: 14px;
	}

	.settings-body {
		padding: 0 14px 12px;
		border-top: 1px solid #eee;
	}

	.settings-grid {
		display: grid;
		gap: 10px;
		padding-top: 10px;
	}

	.setting {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.setting input[type="number"] {
		width: 120px;
		font-size: 16px;
		padding: 6px 8px;
		border-radius: 10px;
		border: 1px solid #ccc;
	}

	.setting input[type="checkbox"] {
		transform: scale(1.2);
	}

	.settings-note {
		margin: 10px 0 0;
		font-size: 13px;
		opacity: 0.75;
	}

	.pad {
		display: grid;
		gap: 10px;
		margin-top: 10px;
	}

	.pad-row {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.pad-btn {
		min-width: 64px;
		padding: 10px 12px;
		border-radius: 12px;
		border: 1px solid #ccc;
		background: #fff;
		font-size: 18px;
		font-weight: 800;
		cursor: pointer;
	}

	.pad-btn:active {
		transform: translateY(1px);
	}

	.pad-btn.util {
		font-size: 16px;
		font-weight: 700;
	}

	.pad-btn.op {}

	.card.used {
		opacity: 0.35;
		filter: grayscale(1);
	}

	.card.used,
	.pad-btn:disabled {
		cursor: not-allowed;
	}

	.tokens {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 12px;
		background: #fafafa;
		min-height: 48px;
	}

	.tok {
		padding: 8px 10px;
		border-radius: 12px;
		border: 1px solid #ccc;
		background: #fff;
		font-size: 18px;
		font-weight: 800;
		cursor: pointer;
		user-select: none;
	}

	.tok.op {
		font-weight: 900;
	}

	.tok.num {}

	.btnrow {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin-top: 8px;
	}

	.card {
		cursor: pointer;
	}

	.card.used {
		opacity: 0.35;
		filter: grayscale(1);
		cursor: not-allowed;
	}

	/* セクション間の縦余白を少し増やす */
	.panel .label {
		margin-top: 16px;
		margin-bottom: 8px;
	}

	/* 「つかえるかず」のカード列の下を空ける */
	#numbers.cards {
		margin-bottom: 14px;
	}

	/* 「きごう」ボタン列の上下余白とボタン間の隙間 */
	#ops {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		/* ボタン同士の間隔 */
		margin: 10px 0 18px;
		/* 上下の間隔（←ここが効く） */
	}

	/* きごうボタンの見た目を少し押しやすく（任意） */
	#ops .btn {
		padding: 10px 12px;
		min-width: 44px;
	}
}