bitforum-frontend/app/component/crypto/sidebar.scss

.crypto-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-elevated);

	.sidebar-tabs {
		display: flex;
		border-bottom: 1px solid var(--border-default);

		.tab {
			flex: 1;
			padding: 8px 0;
			font-size: 0.75rem;
			font-weight: 600;
			color: var(--text-muted);
			background: transparent;
			border: none;
			border-bottom: 2px solid transparent;
			cursor: pointer;
			transition: color 0.15s, border-color 0.15s;

			&:hover {
				color: var(--text-primary);
			}

			&.active {
				color: var(--brand-orange);
				border-bottom-color: var(--brand-orange);
			}
		}
	}

	.sidebar-search {
		padding: 8px;
		border-bottom: 1px solid var(--border-default);

		input {
			width: 100%;
			padding: 6px 10px;
			font-size: 0.813rem;
			border: 1px solid var(--border-default);
			border-radius: 4px;
			outline: none;

			&:focus {
				border-color: var(--brand-orange);
			}
		}
	}

	.sidebar-sort {
		display: flex;
		border-bottom: 1px solid var(--border-default);
		background: var(--bg-subtle);

		button {
			flex: 1;
			padding: 5px 0;
			font-size: 0.688rem;
			font-weight: 500;
			color: var(--text-muted);
			background: transparent;
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 3px;
			transition: color 0.15s;

			&:hover {
				color: var(--text-primary);
			}

			&.active {
				color: var(--brand-orange);
				font-weight: 700;
			}

			svg {
				font-size: 0.625rem;
			}

		}
	}

	.sidebar-list {
		flex: 1;
		overflow-y: auto;
	}

	.sidebar-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 8px 12px;
		border: 1px solid transparent;
		border-bottom: 1px solid var(--bg-subtle);
		background: transparent;
		cursor: pointer;
		text-align: left;
		transition: background 0.15s;

		&:hover {
			background: var(--bg-subtle);
		}

		&.active {
			background: var(--sidebar-active-bg, #fff3e0);
			border-left: 3px solid var(--brand-orange);
		}

		.item-info {
			display: flex;
			flex-direction: column;
			gap: 1px;

			.item-name {
				font-weight: 600;
				font-size: 0.813rem;
				color: var(--text-primary);
			}

			.item-symbol {
				font-size: 0.688rem;
				color: var(--text-muted);
			}
		}

		.item-price {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 1px;

			.price {
				font-size: 0.813rem;
				font-weight: 600;
				font-variant-numeric: tabular-nums;
			}

			.change {
				font-size: 0.688rem;
				font-variant-numeric: tabular-nums;
			}

			.up {
				color: hsl(var(--crypto-up));
			}

			.down {
				color: hsl(var(--crypto-down));
			}

			.neutral {
				color: hsl(var(--crypto-neutral));
			}
		}
	}

	.sidebar-empty {
		padding: 24px;
		text-align: center;
		color: var(--text-muted);
		font-size: 0.813rem;
	}
}

// 시세 변동 보더 플래시 애니메이션
@keyframes flash-border-up {
	0% {
		border-color: hsl(var(--crypto-up));
		box-shadow: inset 0 0 0 1px hsl(var(--crypto-up) / 0.3);
	}
	100% {
		border-color: transparent;
		box-shadow: none;
	}
}

@keyframes flash-border-down {
	0% {
		border-color: hsl(var(--crypto-down));
		box-shadow: inset 0 0 0 1px hsl(var(--crypto-down) / 0.3);
	}
	100% {
		border-color: transparent;
		box-shadow: none;
	}
}

.sidebar-item.flash-up {
	animation: flash-border-up 0.6s ease-out;
}

.sidebar-item.flash-down {
	animation: flash-border-down 0.6s ease-out;
}