ANTOOZA-FRONTEND/app/component/channel/style.scss

.channel-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: width 0.2s ease;

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 8px 12px;
		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;
		min-height: 44px;
		overflow: hidden;
	}

	&__header-title {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__collapse-btn {
		position: relative;
		right: -10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: none;
		background: transparent;
		color: var(--text-secondary);
		cursor: pointer;
		border-radius: 6px;
		flex-shrink: 0;
		transition: background 0.15s, color 0.15s;

		svg {
			font-size: 0.875rem;
		}

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

		// 모바일(≤1123px)에서는 햄버거 메뉴 오버레이가 사이드바 제어 담당 → 접기 버튼 숨김
		@media (max-width: 1123px) {
			display: none;
		}
	}

	&__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);
		}

		&:focus-visible {
			outline: 2px solid var(--text-link);
			outline-offset: -2px;
		}

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

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

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

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

	&__thumb-dot {
		position: absolute;
		bottom: -1px;
		right: -1px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #22c55e;
		border: 2px solid var(--bg-page);
		box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
	}

	&__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);
		}
	}

	// ── 더 보기 ──
	&__more {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 10px 12px;
		border: none;
		background: transparent;
		color: var(--text-secondary);
		font-size: 0.8125rem;
		font-weight: 500;
		cursor: pointer;
		transition: background 0.15s, color 0.15s;

		svg {
			font-size: 0.9rem;
		}

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

	// ── 하단: 다크모드 / 다국어 / 즐겨찾기 ──
	&__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;

		// PC 확장 사이드바: 우측 메인 footer 높이(32px)와 정렬
		@media (min-width: 1124px) {
			height: 32px;
		}

		&: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-page);
		border: 1px solid var(--border-default);
		border-bottom: none;
		border-radius: 8px 8px 0 0;
		box-shadow: 0 -4px 12px var(--shadow-color);
		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;
		}
	}

	// ═══════════════════════════════════════════════════
	// 축소 (collapsed) 모디파이어
	// 모바일(≤1124px)은 오버레이 방식이므로 축소 무시
	// ═══════════════════════════════════════════════════
	&--collapsed {
		@media (min-width: 1124px) {
			.channel-sidebar__header {
				justify-content: center;
				padding: 8px 6px;
			}

			// 축소 시에는 expanded용 -10px 오프셋을 제거해 썸네일과 수직축 맞춤
			.channel-sidebar__collapse-btn {
				right: 0;
			}

			.channel-sidebar__item {
				justify-content: center;
				padding: 8px 6px;

				// thumb 외 모든 요소는 축소 시 렌더 안 됨 (JSX에서 조건부)
			}

			.channel-sidebar__more {
				padding: 12px 6px;

				svg {
					font-size: 1rem;
				}
			}

			.channel-sidebar__footer-actions {
				flex-direction: column;
			}

			.channel-sidebar__icon-btn {
				height: 36px;
				flex: none;

				& + & {
					border-left: none;
					border-top: 1px solid var(--border-default);
				}
			}
		}
	}
}