dpot-frontend/app/component/channel/style.scss

.channel-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;

	&__header {
		padding: 12px 16px;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--text-secondary);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		border-bottom: 1px solid var(--border-default);
		flex-shrink: 0;
	}

	&__list {
		overflow-y: auto;
		flex: 1;

		&::-webkit-scrollbar {
			width: 4px;
		}
		&::-webkit-scrollbar-thumb {
			background: var(--border-default);
			border-radius: 2px;
		}
	}

	&__loading, &__empty {
		padding: 24px 16px;
		text-align: center;
		font-size: 0.75rem;
		color: var(--text-muted);
	}

	&__item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 12px;
		cursor: pointer;
		transition: background 0.15s;

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

		&--live {
			background: rgba(0, 255, 0, 0.03);

			&:hover {
				background: rgba(0, 255, 0, 0.06);
			}
		}
	}

	&__thumb {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		overflow: hidden;
		background: var(--bg-subtle);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__info {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	&__name {
		font-size: 0.8125rem;
		font-weight: 500;
		color: var(--text-primary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__sub {
		font-size: 0.6875rem;
		color: var(--text-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__status {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}

	&__viewers {
		font-size: 0.6875rem;
		color: var(--text-secondary);
		white-space: nowrap;
	}

	&__led {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #dc2626;
		flex-shrink: 0;

		&--on {
			background: #22c55e;
			box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
		}
	}

	// ── 하단: 다크모드 / 다국어 / 즐겨찾기 ──────────
	&__footer {
		margin-top: auto;
		border-top: 1px solid var(--border-default);
		position: relative;
	}

	&__footer-actions {
		display: flex;
		align-items: stretch;
	}

	&__icon-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 25px;
		border: none;
		background: none;
		color: var(--text-muted);
		cursor: pointer;
		transition: background 0.15s, color 0.15s;
		position: relative;

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

		// 구분선
		& + & {
			border-left: 1px solid var(--border-default);
		}

		svg {
			width: 13px;
			height: 13px;
		}
	}

	&__lang-dropdown {
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		background: var(--bg-default);
		border: 1px solid var(--border-default);
		border-bottom: none;
		border-radius: 8px 8px 0 0;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		z-index: 10;
	}

	&__lang-option {
		display: block;
		width: 100%;
		padding: 10px 14px;
		border: none;
		background: none;
		color: var(--text-secondary);
		font-size: 0.8125rem;
		text-align: left;
		cursor: pointer;
		transition: background 0.15s;

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

		&--active {
			color: var(--fg-default);
			font-weight: 600;
		}
	}
}