ANTOOZA-FRONTEND/app/(main)/_components/home.scss

// 메인 페이지 — 배너 + 라이브 채널 리스팅
// 2K(2560px) 해상도까지 max-width 지원

.home {
	width: 100%;
	padding: 16px;

	@media (min-width: 768px) {
		padding: 20px 24px;
	}

	@media (min-width: 1536px) {
		padding: 24px 32px;
	}

	@media (min-width: 2560px) {
		padding: 32px 48px;
	}

	&__inner {
		width: 100%;
		max-width: 1600px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 24px;

		@media (min-width: 1024px) {
			gap: 32px;
		}
	}

	// ── 배너 섹션 ────────────────────────────
	&__banner {
		position: relative;
		width: 100%;
		overflow: hidden;
		border-radius: 12px;
		background: var(--bg-subtle);
		aspect-ratio: 1200 / 210;

		@media (max-width: 768px) {
			aspect-ratio: 3 / 2.34;
			border-radius: 8px;
		}
	}

	&__banner-slide {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}

	&__banner-picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	&__banner-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	// ── 섹션 공통 ────────────────────────────
	&__section-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;

		@media (min-width: 1024px) {
			margin-bottom: 20px;
		}
	}

	&__section-title {
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--text-primary);
		display: flex;
		align-items: center;
		gap: 8px;

		@media (min-width: 1024px) {
			font-size: 1.25rem;
		}
	}

	&__section-count {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--text-muted);
	}

	// ── Empty 상태 ──────────────────────────
	&__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 64px 16px;
		text-align: center;
		border: 1px dashed var(--border-default);
		border-radius: 12px;
		background: var(--bg-subtle);
	}

	&__empty-icon {
		width: 48px;
		height: 48px;
		color: var(--text-muted);
		opacity: 0.6;
	}

	&__empty-title {
		font-size: 1rem;
		font-weight: 600;
		color: var(--text-primary);
		margin: 0;
	}

	&__empty-desc {
		font-size: 0.875rem;
		color: var(--text-muted);
		margin: 0;
	}

	// ── 더 보기 ─────────────────────────────
	&__load-more {
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}

	&__load-more-btn {
		min-width: 160px;
		padding: 12px 24px;
		border: 1px solid var(--border-default);
		background: var(--bg-elevated);
		color: var(--text-primary);
		font-size: 0.875rem;
		font-weight: 500;
		border-radius: 8px;
		cursor: pointer;
		transition: background 0.15s, border-color 0.15s;

		&:hover:not(:disabled) {
			background: var(--bg-subtle);
			border-color: var(--border-strong);
		}

		&:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}
	}

	&__error {
		margin-top: 12px;
		padding: 12px 16px;
		text-align: center;
		font-size: 0.875rem;
		color: var(--color-danger);
		background: var(--color-danger-bg);
		border-radius: 8px;
	}
}

// ═══════════════════════════════════════════
// 라이브 그리드
// 모바일 1 · 소형 2 · 중형 3 · 대형 4 · XL 5 · 2K 6열
// ═══════════════════════════════════════════
.live-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 16px;

	@media (min-width: 640px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (min-width: 896px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	@media (min-width: 1280px) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}

	@media (min-width: 1536px) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	@media (min-width: 1920px) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 24px;
	}

	&__item {
		min-width: 0;
	}
}

// ═══════════════════════════════════════════
// 라이브 카드
// ═══════════════════════════════════════════
.live-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;

	&:hover .live-card__title {
		color: var(--text-link);
	}

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

	&__thumb-wrap {
		position: relative;
		aspect-ratio: 16 / 9;
		width: 100%;
		background: var(--bg-subtle);
		border-radius: 8px;
		overflow: hidden;
		transition: transform 0.2s ease;
	}

	&:hover &__thumb-wrap {
		transform: translateY(-2px);
	}

	&__thumb {
		object-fit: cover;
	}

	&__badge {
		position: absolute;
		top: 8px;
		left: 8px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 3px 6px;
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		color: #fff;
		background: var(--color-danger);
		border-radius: 4px;
		text-transform: uppercase;
	}

	&__viewers {
		position: absolute;
		bottom: 8px;
		right: 8px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 3px 6px;
		font-size: 0.75rem;
		font-weight: 500;
		color: #fff;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 4px;
	}

	&__meta {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		min-width: 0;
	}

	&__avatar {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		overflow: hidden;
		background: var(--bg-subtle);
		display: flex;
		align-items: center;
		justify-content: center;
	}

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

	&__avatar-fallback {
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--text-muted);
	}

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

	&__title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.35;
		color: var(--text-primary);
		overflow: hidden;
		word-break: break-word;
		margin: 0 0 4px 0;
		transition: color 0.15s;
	}

	&__channel-name {
		font-size: 0.8125rem;
		color: var(--text-secondary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

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