/**
 * ゲージ計算ツール - 専用スタイル
 */

/* ========================================
   入力セクション
   ======================================== */
.input-section {
	border-bottom: 1px solid var(--color-border);
}

/* ========================================
   寸法行
   ======================================== */
.dimension-row {
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
}

.dimension-row:last-child {
	border-bottom: none;
}

.dimension-row-fields {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dimension-field--label {
	flex: 1.5;
	min-width: 0;
}

.dimension-field--num {
	flex: 1;
	min-width: 0;
}

.dimension-field--action {
	flex-shrink: 0;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ========================================
   行追加・削除ボタン
   ======================================== */
.btn-add-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #7B1FA2;
	background: #f3e5f5;
	border: 1px dashed #ce93d8;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.btn-add-row:hover {
	background: #e1bee7;
	border-color: #7B1FA2;
}

.btn-add-row:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-remove-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 18px;
	font-weight: 700;
	color: #e53935;
	background: #ffebee;
	border: 1px solid #ef9a9a;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1;
	padding: 0;
}

.btn-remove-row:hover {
	background: #ffcdd2;
	border-color: #e53935;
}

/* ========================================
   詳細セクション
   ======================================== */
.detail-section {
	border-bottom: 1px solid var(--color-border);
}

.gauge-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ========================================
   差分ハイライト
   ======================================== */
.diff-positive {
	color: #e53935;
	font-weight: 600;
	font-size: 13px;
}

.diff-negative {
	color: #1565c0;
	font-weight: 600;
	font-size: 13px;
}

.diff-ok {
	color: #2e7d32;
	font-weight: 600;
	font-size: 13px;
}

/* ========================================
   アクションボタン
   ======================================== */
.action-section {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 12px 20px;
}

.btn-secondary {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	color: #4A0072;
	background: var(--color-white);
	border: 1px solid #7B1FA2;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.btn-secondary:hover {
	background: #f3e5f5;
}

/* ========================================
   レスポンシブ
   ======================================== */
@media (max-width: 600px) {
	.dimension-row-fields {
		flex-wrap: wrap;
		gap: 8px;
	}

	.dimension-field--label {
		flex: 1 1 100%;
	}

	.dimension-field--num {
		flex: 1 1 calc(50% - 24px);
	}

	.dimension-field--action {
		width: 28px;
	}

	.data-table {
		font-size: 12px;
	}

	.data-table th,
	.data-table td {
		padding: 6px 4px;
	}

	.diff-positive,
	.diff-negative,
	.diff-ok {
		font-size: 11px;
	}
}