/**
 * 編み針サイズ変換ツール 固有スタイル
 * Needle Size Converter
 */

/* ========================================
   テーブルラッパー（横スクロール対応）
   ======================================== */
.table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
	padding: 0 4px;
}

/* ========================================
   ハイライト行アニメーション
   ======================================== */
.data-table tbody tr {
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.15s ease;
}

.data-table tbody tr:active {
	transform: scale(0.995);
}

.data-table tbody tr.highlighted td {
	background: #f3e5f5;
	font-weight: 600;
	position: relative;
}

.data-table tbody tr.highlighted td:first-child {
	border-left: 3px solid #7B1FA2;
}

@keyframes highlightPulse {
	0% { background-color: #e1bee7; }
	50% { background-color: #f3e5f5; }
	100% { background-color: #f3e5f5; }
}

.data-table tbody tr.highlighted td {
	animation: highlightPulse 0.6s ease-out;
}

/* ========================================
   タブコンテンツ遷移
   ======================================== */
.tab-content {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
	height: 0;
	overflow: hidden;
}

.tab-content.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	height: auto;
	overflow: visible;
}

/* ========================================
   結果セクション コピーボタン
   ======================================== */
.copy-result-btn:hover {
	background: rgba(255, 255, 255, 0.35) !important;
}

.copy-result-btn:active {
	transform: scale(0.96);
}

/* ========================================
   セレクトボックス補助
   ======================================== */
.needle-select {
	font-size: 16px;
}

/* ========================================
   棒針テーブル mm列の強調
   ======================================== */
#knitting-table td:nth-child(2),
#crochet-table td:nth-child(2),
#lace-table td:nth-child(2) {
	font-weight: 600;
	color: #4A0072;
}

/* ========================================
   レスポンシブ
   ======================================== */
@media (max-width: 600px) {
	.table-wrapper {
		margin: 0 -12px;
		padding: 0 12px;
	}

	.data-table {
		min-width: 400px;
	}

	#crochet-table,
	#lace-table {
		min-width: auto;
	}

	.needle-select {
		font-size: 16px;
	}

	.result-sub {
		gap: 10px;
	}
}

@media (max-width: 400px) {
	.data-table {
		font-size: 12px;
	}

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