bitforum-frontend/app/component/crypto/mobile-coin-list.scss

.mobile-coin-list {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-elevated);

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

		.tab {
			flex: 1;
			padding: 10px 0;
			font-size: 0.813rem;
			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);
			}
		}
	}

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

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

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

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

		button {
			padding: 6px 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: flex-start;
			gap: 3px;
			transition: color 0.15s;

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

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

			svg {
				font-size: 0.625rem;
			}
		}

		.sort-name {
			flex: 2;
		}

		.sort-price {
			flex: 1.5;
			justify-content: flex-end;
		}

		.sort-change {
			flex: 1;
			justify-content: flex-end;
		}

		.sort-volume {
			flex: 1.5;
			justify-content: flex-end;
		}
	}

	.mcl-list {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mcl-item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 10px 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: #e8e8e8;
		}

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

		.col-name {
			flex: 2;
			display: flex;
			flex-direction: column;
			gap: 1px;
			min-width: 0;

			.name {
				font-weight: 600;
				font-size: 0.813rem;
				color: var(--text-primary);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

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

		.col-price {
			flex: 1.5;
			text-align: right;
			font-size: 0.813rem;
			font-weight: 600;
			font-variant-numeric: tabular-nums;
		}

		.col-change {
			flex: 1;
			text-align: right;
			font-size: 0.75rem;
			font-weight: 500;
			font-variant-numeric: tabular-nums;
		}

		.col-volume {
			flex: 1.5;
			text-align: right;
			font-size: 0.688rem;
			color: var(--text-secondary);
			font-variant-numeric: tabular-nums;
		}

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

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

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

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

// 시세 변동 보더 플래시 애니메이션
.mcl-item.flash-up {
	animation: mcl-flash-up 0.6s ease-out;
}

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

@keyframes mcl-flash-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 mcl-flash-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;
	}
}

// 모바일 뒤로가기 바
.mobile-back-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-default);

	button {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 4px 8px;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--text-primary);
		background: transparent;
		border: none;
		cursor: pointer;

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

		svg {
			font-size: 0.75rem;
		}
	}
}