/* =========================================
   Theme / Tokens
========================================= */
:root {
	--ember-bg: #fff7fb;
	--ember-panel: rgba(255, 255, 255, .92);
	--ember-surface: #fffafb;
	--ember-border: #f0d9e6;

	--ember-text: #2a1d27;
	--ember-text-sub: #4a3d47;
	/* 真っ黒じゃない“チャコール紫” */
	--ember-muted: #7f6a79;
	/* サブ文字 */
	--ember-soft: #9a8394;
	/* 注釈など */

	--ember-accent: #fb7185;
	--ember-accent2: #f472b6;
	/* ほんのり差し色 */
	--ember-accent-weak: rgba(251, 113, 133, 0.18);
	--ember-on-accent: #fff;

	--ember-shadow: 0 12px 30px rgba(70, 20, 40, .08);
}

.ember-maximizer,
.ember-maximizer *,
.ember-maximizer *::before,
.ember-maximizer *::after {
  box-sizing: border-box;
}

.ember-maximizer {
	/* =========================================
	Layout
	========================================= */
	font-size: 14px;
	line-height: 1.6;
	max-width: 1020px;
	margin: 0 auto;
	padding: 18px 14px 40px;

	/* ★フォント：後述のGoogle Fonts読み込みとセットで使う想定 */
	font-family:
		"BIZ UDPGothic",
		"BIZ UDGothic",
		"UD Digi Kyokasho N-R",
		"UD デジタル 教科書体 N-R",
		"Yu Gothic UI",
		"Meiryo UI",
		"Meiryo",
		system-ui, -apple-system, "Noto Sans JP", sans-serif;

	background:
		radial-gradient(18px 18px at 12% 18%, rgba(251, 113, 133, .10), transparent 60%),
		radial-gradient(22px 22px at 86% 22%, rgba(244, 114, 182, .10), transparent 60%),
		radial-gradient(18px 18px at 24% 78%, rgba(251, 113, 133, .08), transparent 60%),
		radial-gradient(28px 28px at 78% 82%, rgba(244, 114, 182, .08), transparent 60%),
		var(--ember-bg);

	color: var(--ember-text);

	.panel {
		background: var(--ember-panel);
		border: 1px solid var(--ember-border);
		border-radius: 18px;
		padding: 14px;
		box-shadow: var(--ember-shadow);
		backdrop-filter: blur(6px);
	}

	h1 {
		font-size: 22px;
		letter-spacing: .02em;
		margin: 0 0 12px;
		color: var(--ember-text);
	}

	small {
		color: var(--ember-soft);
	}

	/* 入力系はフォント/色を継承 */
	input,
	button,
	select,
	textarea {
		font-family: inherit;
		color: var(--ember-text);
	}

	/* =========================================
	Usage (details/summary)
	========================================= */
	.usage {
		margin: 10px 0 16px;
		padding: 12px 14px;
		border: 1px solid var(--ember-border);
		border-radius: 12px;
		background: var(--ember-surface);
	}

	/* 標準マーカー(▶)を使う：消す指定は置かない */
	.usage summary {
		cursor: pointer;
		display: list-item;
		list-style: revert;
		font-size: 12px;
		font-weight: 700;
		color: var(--ember-muted);
	}

	/* マーカー色をほんのりアクセントに */
	.usage summary::marker {
		color: var(--ember-accent);
	}

	.usage[open] summary {
		color: var(--ember-accent);
	}

	.usage ul {
		margin: 10px 0 0;
		padding-left: 18px;
	}

	.usage li {
		margin: 4px 0;
		line-height: 1.55;
	}

	/* =========================================
	Controls
	========================================= */
	.controls {
		display: flex;
		gap: 12px;
		align-items: flex-end;
		flex-wrap: wrap;
		margin-top: 8px;
		margin-bottom: 12px;
	}

	.field {
		display: grid;
		gap: 6px;
	}

	.label {
		font-size: 12px;
		color: var(--ember-muted);
	}

	input[type="number"] {
		width: 170px;
		padding: 8px 10px;
		border-radius: 10px;
		border: 1px solid var(--ember-border);
		background: #fff;
		transition: border-color .12s ease, box-shadow .12s ease;
	}

	input[type="number"]:focus,
	.grid td input:focus {
		outline: none;
		border-color: var(--ember-accent);
		box-shadow: 0 0 0 4px var(--ember-accent-weak);
	}

	.colCheck input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;
		width: 16px;
		height: 16px;
		border-radius: 4px;
		border: 2px solid var(--ember-accent);
		background: #fff;
		cursor: pointer;
		position: relative;
		display: inline-grid;
		place-content: center;
	}

	.colCheck input[type="checkbox"]:checked {
		background: var(--ember-accent);
		border-color: var(--ember-accent);
	}

	.colCheck input[type="checkbox"]:checked::after {
		content: "✓";
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
	}

	/* 計算ボタン：アクセント背景＋白文字 */
	button {
		padding: 9px 14px;
		border-radius: 999px;
		border: 1px solid rgba(251, 113, 133, .25);
		background: linear-gradient(180deg, #ff8da1 0%, #fb7185 55%, #f43f5e 100%);
		color: var(--ember-on-accent);
		font-weight: 800;
		letter-spacing: .02em;
		cursor: pointer;
		box-shadow:
			0 10px 22px rgba(251, 113, 133, .28),
			inset 0 1px 0 rgba(255, 255, 255, .45);
	}

	button:hover {
		filter: brightness(1.04);
	}

	button:active {
		transform: translateY(1px);
	}

	button:disabled {
		opacity: .6;
		cursor: not-allowed;
	}

	/* =========================================
	Input Table
	========================================= */
	.tableWrap {
		overflow-x: auto;
		border-radius: 12px;
		border: 1px solid var(--ember-border);
		box-shadow: 0 8px 18px rgba(0, 0, 0, .04);
	}

	.grid {
		width: 100%;
		border-collapse: collapse;
		min-width: 780px;
	}

	.grid th,
	.grid td {
		border: 1px solid var(--ember-border);
		padding: 10px;
		text-align: center;
		color: var(--ember-text);
	}

	.grid thead th {
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 2;
	}

	.grid th:first-child {
		text-align: left;
		min-width: 60px;
		background: var(--ember-surface);
		position: sticky;
		left: 0;
		z-index: 3;
	}

	.grid tbody tr:nth-child(odd) td {
		background: #fff6fb;
	}

	.grid td input {
		width: 100%;
		min-width: 0;
		padding: 7px 8px;
		border-radius: 10px;
	}

	/* 列ヘッダ */
	.colHead {
		display: grid;
		gap: 6px;
		justify-items: center;
	}

	.colName {
		font-weight: 800;
	}

	.colCheck {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		color: var(--ember-text-sub);
		user-select: none;
	}

	.colSelect {
		align-items: center;
		gap: 6px;
		font-size: 10px;
		color: var(--ember-text-sub);
		user-select: none;
	}

	/* 価格行の注釈 */
	.priceNote {
		color: var(--ember-muted);
	}

	/* afterPrice：デフォは“枠も消す”、必要なときだけ表示 */
	.afterPrice {
		font-size: 11px;
		display: inline-block;
		margin-top: 4px;
		padding: 2px 8px;
		border: 1px solid transparent;
		border-radius: 999px;
		background: transparent;
		color: var(--ember-muted);
		font-variant-numeric: tabular-nums;

		visibility: hidden;
		/* 高さは残す */
		min-height: 1.5em;
	}

	.afterPrice.is-show {
		visibility: visible;
		border-color: var(--ember-border);
		background: #fff;
	}

	/* 入力漏れ警告 */
	.input-warn {
		border-color: #e53935 !important;
		background: #fff5f5;
	}

	.input-warn:focus {
		outline: none;
		box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.25);
	}

	/* =========================================
	Result
	========================================= */
	.out {
		margin-top: 12px;
	}

	.status {
		color: var(--ember-muted);
		min-height: 20px;
		margin-bottom: 6px;
	}

	.resultBox {
		background: var(--ember-surface);
		border-radius: 14px;
		padding: 14px;
	}

	.resultTitle {
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 800;
		margin-bottom: 8px;
		color: var(--ember-text);
	}

	.resultTitle .check {
		color: var(--ember-accent);
	}

	.resultWrap {
		overflow-x: auto;
	}

	.resultTable {
		width: 100%;
		border-collapse: collapse;
		font-size: 14px;
	}

	.resultTable th,
	.resultTable td {
		padding: 6px 10px;
		border-bottom: 1px solid #e5e7eb;
		color: var(--ember-text);
	}

	.resultTable th {
		text-align: left;
		color: var(--ember-muted);
		font-weight: 800;
	}

	.resultTable .num {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}

	.resultTable .count {
		font-weight: 700;
		color: var(--ember-text);
	}

	.resultTable tfoot th,
	.resultTable tfoot td {
		font-weight: 900;
	}

	.resultNote {
		margin-top: 6px;
		font-size: 13px;
		color: var(--ember-muted);
	}

	.resultTime {
		margin-top: 4px;
		font-size: 12px;
		color: var(--ember-soft);
	}

	.status.is-error {
		color: #d94a5a;
		font-weight: 600;
	}
}