ANTOOZA-FRONTEND/app/styles/market-sidebar.scss

// 좌측 사이드바 자리표시 (MarketSidebar) — 관심종목/즐겨찾기 본구현 전 골격 (D6 그리드 셸)
.market-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 12px;
		border-bottom: 1px solid var(--border-light);
	}

	&__title {
		font-size: var(--fs-sm);
		font-weight: 700;
		color: var(--text-secondary);
	}

	&__collapse-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: none;
		border-radius: 4px;
		background: transparent;
		color: var(--text-muted);
		cursor: pointer;

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

	&__body {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding: var(--sp-4);
	}

	&__empty {
		padding: var(--sp-5) 0;
		font-size: var(--fs-xs);
		color: var(--text-muted);
		text-align: center;
		line-height: 1.6;
	}

	&__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	&__item {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 8px 4px;
		border-bottom: 1px solid var(--border-light);
		color: var(--text-primary);

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

	&__item-name {
		font-size: var(--fs-sm);
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__item-figures {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--sp-2);
		font-variant-numeric: tabular-nums;
	}

	&__item-close {
		font-size: var(--fs-sm);
		color: var(--text-secondary);
	}

	&__item-change {
		font-size: var(--fs-xs);
	}

	&__icon-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 36px;
		color: var(--text-muted);
	}

	&__footer {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--sp-3);
		padding: var(--sp-3);
		border-top: 1px solid var(--border-light);
	}

	&__icon-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: none;
		border-radius: 4px;
		background: transparent;
		color: var(--text-muted);
		cursor: pointer;

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

	&--collapsed {
		.market-sidebar__header {
			justify-content: center;
			padding: 10px 6px;
		}
	}
}