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

.orderbook {
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
	height: 100%;

	.orderbook-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.813rem;
		font-weight: 600;
		padding: 8px 12px;
		border-bottom: 1px solid var(--border-default);
		color: var(--text-primary);

		.orderbook-total {
			display: flex;
			gap: 10px;
			font-size: 0.688rem;
			font-weight: 400;

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

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

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

	.orderbook-body {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		font-variant-numeric: tabular-nums;
	}

	// 매도 섹션: column-reverse로 낮은 가격이 아래(스프레드 근처)
	.ask-section {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		display: flex;
		flex-direction: column-reverse;

		&::-webkit-scrollbar {
			width: 0;
		}
	}

	// 매수 섹션
	.bid-section {
		flex: 1;
		min-height: 0;
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 0;
		}
	}

	.orderbook-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 3px 12px;
		font-size: 0.75rem;
		transition: background-color 0.1s;
		flex-shrink: 0;

		.bar {
			position: absolute;
			top: 0;
			bottom: 0;
			opacity: 0.12;
		}

		// 매도: bar 왼쪽에서 확장 (수량 쪽)
		&.ask .bar {
			left: 0;
			background: hsl(var(--crypto-down));
		}

		// 매수: bar 오른쪽에서 확장 (수량 쪽)
		&.bid .bar {
			right: 0;
			background: hsl(var(--crypto-up));
		}

		.price {
			position: relative;
			z-index: 1;
			font-weight: 500;
		}

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

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

		.size {
			position: relative;
			z-index: 1;
			color: var(--text-secondary);
		}

		// 체결 플래시 효과
		&.flash-sell {
			animation: flash-sell 0.5s ease-out;
		}

		&.flash-buy {
			animation: flash-buy 0.5s ease-out;
		}

		// LTP 5m ago 가이드선
		.ltp-guide {
			position: absolute;
			top: -1px;
			left: 0;
			right: 0;
			height: 2px;
			background: #E8B730;
			z-index: 2;

			&::after {
				content: 'LTP 5m ago';
				position: absolute;
				right: 4px;
				top: -15px;
				font-size: 0.6rem;
				font-weight: 600;
				color: #fff;
				background: #E8B730;
				padding: 1px 5px;
				border-radius: 3px;
				white-space: nowrap;
			}
		}
	}

	.spread-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 12px;
		font-size: 0.75rem;
		background: var(--bg-elevated);
		border-top: 1px solid var(--border-default);
		border-bottom: 1px solid var(--border-default);
		flex-shrink: 0;

		.spread-price {
			font-weight: 600;
			color: var(--text-primary);
		}

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

@keyframes flash-sell {
	0% {
		background-color: hsla(var(--crypto-down), 0.3);
	}
	100% {
		background-color: transparent;
	}
}

@keyframes flash-buy {
	0% {
		background-color: hsla(var(--crypto-up), 0.3);
	}
	100% {
		background-color: transparent;
	}
}