ANTOOZA-FRONTEND/app/(main)/ranking/style.scss

$bp-mobile-max: 767px;
$bp-tablet-min: 768px;
$bp-tablet-max: 1023px;
$bp-pc: 1024px;

#rankingPage {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 1rem 4rem;

	@media (max-width: $bp-mobile-max) {
		padding: 1rem 0.75rem 6rem;
	}
}

.ranking {
	&__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.75rem;
		flex-wrap: wrap;
		padding: 0.25rem 0 1rem;

		h1 {
			font-size: 1.75rem;
			font-weight: 700;
			margin: 0;

			@media (max-width: $bp-mobile-max) {
				font-size: 1.4rem;
			}
		}
	}

	&__tabs-wrap {
		display: flex;
		align-items: stretch;
		gap: 0.25rem;
		margin-bottom: 1rem;
		border-bottom: 1px solid hsl(var(--border));
	}

	&__tabs-arrow {
		// 기본 숨김 (데스크톱: 탭 5개가 모두 보여 불필요)
		display: none;
		align-items: center;
		justify-content: center;
		width: 32px;
		flex-shrink: 0;
		background: transparent;
		border: none;
		color: hsl(var(--muted-foreground));
		cursor: pointer;
		transition: color 0.15s ease;

		&:hover {
			color: hsl(var(--foreground));
		}

		&:focus-visible {
			outline: 2px solid hsl(var(--primary));
			outline-offset: -2px;
			border-radius: 4px;
		}

		@media (max-width: $bp-mobile-max) {
			// 모바일: overflow 스크롤 유도용 화살표 표시
			display: inline-flex;
		}
	}

	&__tabs {
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0.25rem 0.25rem 0;
		flex: 1 1 auto;
		min-width: 0;
		cursor: grab;
		user-select: none;
		-webkit-user-select: none;
		touch-action: pan-y;

		&:active {
			cursor: grabbing;
		}

		&::-webkit-scrollbar {
			height: 4px;
		}

		@media (max-width: $bp-mobile-max) {
			// 모바일: 스크롤바 숨김 + 좌우 fade mask (더 있다는 시각 힌트)
			scrollbar-width: none;
			-ms-overflow-style: none;
			mask-image: linear-gradient(
				to right,
				transparent 0,
				#000 16px,
				#000 calc(100% - 16px),
				transparent 100%
			);
			-webkit-mask-image: linear-gradient(
				to right,
				transparent 0,
				#000 16px,
				#000 calc(100% - 16px),
				transparent 100%
			);

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}

	&__tabs-item {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.5rem 1rem;
		margin-bottom: -1px;
		font-size: 0.95rem;
		font-weight: 600;
		color: hsl(var(--muted-foreground));
		border-bottom: 2px solid transparent;
		white-space: nowrap;
		flex-shrink: 0;
		-webkit-user-drag: none;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.15s ease, border-color 0.15s ease;

		&:hover {
			color: hsl(var(--foreground));
		}

		&:focus-visible {
			outline: 2px solid hsl(var(--primary));
			outline-offset: 2px;
			border-radius: 4px;
		}

		&--active {
			color: hsl(var(--primary));
			border-bottom-color: hsl(var(--primary));
		}
	}

	&__filters {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-bottom: 1.5rem;

		@media (max-width: $bp-mobile-max) {
			gap: 0.4rem;
		}
	}

	&__filter-select {
		padding: 0.4rem 0.7rem;
		font-size: 0.88rem;
		color: hsl(var(--foreground));
		background: hsl(var(--background));
		border: 1px solid hsl(var(--border));
		border-radius: 6px;
		cursor: pointer;

		&:focus {
			outline: none;
			border-color: hsl(var(--primary));
		}
	}

	&__list-note {
		margin: 1rem 0 0.5rem;
		font-size: 0.8rem;
		color: hsl(var(--muted-foreground));
	}

	&__list {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		margin-top: 1.5rem;
		border-top: 1px solid hsl(var(--border));

		&-header {
			display: grid;
			grid-template-columns: 60px 60px 1fr 180px 120px 120px;
			gap: 0.75rem;
			padding: 0.75rem 1rem;
			font-size: 0.8rem;
			font-weight: 600;
			color: hsl(var(--muted-foreground));
			background: hsl(var(--muted) / 0.3);

			@media (max-width: $bp-tablet-max) {
				grid-template-columns: 48px 48px 1fr 100px;
			}

			@media (max-width: $bp-mobile-max) {
				display: none;
			}

			// 행 콘텐츠 정렬에 맞춰 헤더 텍스트 정렬 (rank/change=center, amount/broadcast=right)
			&--aligned {
				span:nth-child(1),
				span:nth-child(2) {
					text-align: center;
				}

				span:nth-child(5),
				span:nth-child(6) {
					text-align: right;
				}
			}
		}
	}

	&__row {
		display: grid;
		grid-template-columns: 60px 60px 1fr 180px 120px 120px;
		gap: 0.75rem;
		align-items: center;
		padding: 0.9rem 1rem;
		border-bottom: 1px solid hsl(var(--border));
		transition: background 0.15s ease;

		&:hover {
			background: hsl(var(--muted) / 0.25);
		}

		@media (max-width: $bp-tablet-max) {
			grid-template-columns: 48px 48px 1fr 100px;

			.ranking__row-progress,
			.ranking__row-broadcast {
				display: none;
			}
		}

		@media (max-width: $bp-mobile-max) {
			grid-template-columns: 40px 1fr auto;
			gap: 0.5rem;
			padding: 0.75rem 0.5rem;

			.ranking__row-change {
				display: none;
			}
		}

		&--mine {
			background: hsl(var(--primary) / 0.08);
			border-left: 3px solid hsl(var(--primary));
		}

		&--rank-1 {
			background: linear-gradient(90deg, rgba(255, 215, 0, 0.18), rgba(255, 215, 0, 0.04) 60%, transparent);
			border-bottom-color: rgba(255, 215, 0, 0.4);
		}

		&--rank-2 {
			background: linear-gradient(90deg, rgba(192, 192, 192, 0.18), rgba(192, 192, 192, 0.04) 60%, transparent);
			border-bottom-color: rgba(192, 192, 192, 0.4);
		}

		&--rank-3 {
			background: linear-gradient(90deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.05) 60%, transparent);
			border-bottom-color: rgba(205, 127, 50, 0.4);
		}

		&-rank {
			font-weight: 700;
			font-size: 1rem;
			text-align: center;
		}

		&-change {
			display: flex;
			justify-content: center;
		}

		&-member {
			min-width: 0;
		}

		&-member-link {
			display: inline-flex;
			align-items: center;
			gap: 0.6rem;
			min-width: 0;
			color: inherit;

			&:hover .ranking__row-name {
				color: hsl(var(--primary));
			}
		}

		&-name {
			display: flex;
			flex-direction: column;
			font-weight: 600;
			font-size: 0.95rem;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&-channel {
			font-size: 0.75rem;
			font-weight: 400;
			color: hsl(var(--muted-foreground));
		}

		&-name-main {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
		}

		&-progress {
			width: 100%;
		}

		&-progress-bar {
			position: relative;
			height: 6px;
			background: hsl(var(--muted));
			border-radius: 9999px;
			overflow: hidden;

			span {
				display: block;
				height: 100%;
				width: var(--progress, 0%);
				background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.6));
				transition: width 0.3s ease;
			}

			&--tier-1 span {
				background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
			}

			&--tier-2 span {
				background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.55));
			}

			&--tier-3 span {
				background: linear-gradient(90deg, hsl(var(--muted-foreground) / 0.85), hsl(var(--muted-foreground) / 0.4));
			}
		}

		&-amount {
			font-weight: 700;
			font-size: 0.95rem;
			text-align: right;

			&--accent {
				color: #e11d48;
				font-weight: 800;
			}
		}

		&-broadcast {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			font-size: 0.88rem;

			small {
				font-size: 0.72rem;
				color: hsl(var(--muted-foreground));
			}

			&--accent {
				color: #7c3aed;
				font-weight: 700;
			}
		}
	}

	&__change {
		display: inline-flex;
		align-items: center;
		gap: 0.15rem;
		padding: 0.1rem 0.4rem;
		font-size: 0.72rem;
		font-weight: 600;
		border-radius: 9999px;

		&--up {
			color: #16a34a;
			background: rgba(22, 163, 74, 0.1);
		}

		&--down {
			color: #dc2626;
			background: rgba(220, 38, 38, 0.1);
		}

		&--same {
			color: hsl(var(--muted-foreground));
			background: hsl(var(--muted));
		}

		&--new {
			color: #7c3aed;
			background: rgba(124, 58, 237, 0.12);
		}
	}

	&__grade-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.2rem;
		padding: 0.1rem 0.45rem;
		font-size: 0.72rem;
		font-weight: 600;
		border-radius: 9999px;
		background: hsl(var(--muted) / 0.7);
		color: var(--grade-color, inherit);
	}

	&__grade-icon {
		width: 14px;
		height: 14px;
		object-fit: contain;
	}

	&__grade-name {
		font-weight: 600;
	}

	&__empty {
		padding: 3rem 1rem;
		text-align: center;
		color: hsl(var(--muted-foreground));
	}

	&__hall-controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1.5rem;

		@media (max-width: $bp-mobile-max) {
			gap: 0.75rem;
		}
	}

	&__header-sub {
		margin-top: 0.4rem;
		font-size: 0.88rem;
		color: hsl(var(--muted-foreground));
	}

	&__hall-period {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.3rem;
		margin-left: auto; // flex 부모 안에서 우측으로 밀어냄 (탭은 좌측, 기간은 우측)

		@media (max-width: $bp-mobile-max) {
			margin-left: 0; // 모바일: wrap 된 상태에서 좌측 정렬
		}
	}

	&__hall-period-btn {
		padding: 0.4rem 0.85rem;
		font-size: 0.85rem;
		font-weight: 500;
		color: hsl(var(--muted-foreground));
		background: hsl(var(--background));
		border: 1px solid hsl(var(--border));
		border-radius: 6px;
		cursor: pointer;
		transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;

		&:hover {
			color: hsl(var(--foreground));
			border-color: hsl(var(--foreground) / 0.3);
		}

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

		&--active {
			color: hsl(var(--primary-foreground));
			background: hsl(var(--primary));
			border-color: hsl(var(--primary));
		}
	}

	&__hall-top100 {
		margin-top: 2rem;

		h2 {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			font-size: 1.15rem;
			font-weight: 700;
			margin-bottom: 0.75rem;

			svg {
				color: hsl(var(--primary));
			}
		}
	}

	&__medal-badge {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.1rem;
		line-height: 1;

		strong {
			font-size: 0.82rem;
			font-weight: 800;
		}

		&--1 {
			color: #b8860b;

			svg {
				color: #FFD700;
				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
			}
		}

		&--2 {
			color: #4b5563;

			svg {
				color: #C0C0C0;
			}
		}

		&--3 {
			color: #92400e;

			svg {
				color: #CD7F32;
			}
		}
	}

	&__my-bar {
		position: fixed;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 1.25rem;
		background: hsl(var(--background));
		border: 1px solid hsl(var(--primary));
		border-radius: 9999px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		z-index: 40;

		@media (max-width: $bp-mobile-max) {
			left: 0;
			right: 0;
			bottom: 0;
			transform: none;
			border-radius: 0;
			border-left: 0;
			border-right: 0;
			border-bottom: 0;
			justify-content: space-between;
			width: 100%;
		}

		&-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			background: hsl(var(--primary));
			color: hsl(var(--primary-foreground));
			border-radius: 9999px;
		}

		&-text {
			display: flex;
			align-items: center;
			gap: 0.4rem;
			font-size: 0.95rem;
			font-weight: 600;

			strong {
				font-size: 0.85rem;
				color: hsl(var(--muted-foreground));
			}
		}

		&-up {
			color: #16a34a;
			font-style: normal;
		}

		&-down {
			color: #dc2626;
			font-style: normal;
		}

		&-amount {
			font-weight: 700;
			color: hsl(var(--primary));
		}
	}
}

/* ─────────────── 시상대 (Podium) ─────────────── */

.ranking-podium {
	position: relative;
	margin: 1.5rem 0 2rem;
	padding: 1.5rem 1rem;
	border-radius: 16px;
	background: radial-gradient(ellipse at center, hsl(var(--muted) / 0.4), transparent 70%);
	overflow: hidden;

	&__stage {
		display: grid;
		grid-template-columns: 1fr 1.3fr 1fr;
		align-items: end;
		gap: 1.5rem;
		max-width: 820px;
		margin: 0 auto;

		@media (max-width: $bp-tablet-max) {
			gap: 1rem;
			max-width: 620px;
		}

		@media (max-width: $bp-mobile-max) {
			grid-template-columns: 1fr;
			gap: 0.75rem;
		}
	}

	&__winner {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		padding: 2.5rem 1rem 1.25rem;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		transition: transform 0.25s ease;

		&:hover {
			transform: translateY(-4px);
		}

		&--first {
			order: 2;
			min-height: 280px;
			background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
			color: #3a2600;

			.ranking-podium__avatar {
				width: 120px;
				height: 120px;
				border: 4px solid rgba(255, 255, 255, 0.8);
				box-shadow: 0 0 24px rgba(255, 215, 0, 0.6);
			}

			@media (max-width: $bp-tablet-max) {
				min-height: 240px;

				.ranking-podium__avatar {
					width: 96px;
					height: 96px;
				}
			}

			@media (max-width: $bp-mobile-max) {
				order: 1;
				flex-direction: row;
				align-items: center;
				min-height: 140px;
				padding: 1rem 1.25rem;
				text-align: left;

				.ranking-podium__avatar {
					width: 80px;
					height: 80px;
				}
			}
		}

		&--second {
			order: 1;
			min-height: 230px;
			background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
			color: #1f2937;

			.ranking-podium__avatar {
				width: 96px;
				height: 96px;
				border: 3px solid rgba(255, 255, 255, 0.8);
			}

			@media (max-width: $bp-tablet-max) {
				min-height: 200px;

				.ranking-podium__avatar {
					width: 80px;
					height: 80px;
				}
			}

			@media (max-width: $bp-mobile-max) {
				order: 2;
			}
		}

		&--third {
			order: 3;
			min-height: 210px;
			background: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%);
			color: #fff8f0;

			.ranking-podium__avatar {
				width: 96px;
				height: 96px;
				border: 3px solid rgba(255, 255, 255, 0.7);
			}

			@media (max-width: $bp-tablet-max) {
				min-height: 190px;

				.ranking-podium__avatar {
					width: 80px;
					height: 80px;
				}
			}
		}

		&--empty {
			opacity: 0.5;
			box-shadow: none;
		}

		@media (max-width: $bp-mobile-max) {
			min-height: unset !important;
			padding: 1rem;
		}
	}

	&__link {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.4rem;
		color: inherit;

		@media (max-width: $bp-mobile-max) {
			flex-direction: row;
			gap: 1rem;
			align-items: center;
		}
	}

	&__crown {
		position: absolute;
		top: 0.25rem;
		left: 50%;
		transform: translate(-50%, -60%);
		color: #FFF59D;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
	}

	&__medal {
		position: absolute;
		top: 0.5rem;
		right: 0.75rem;
		color: rgba(255, 255, 255, 0.9);
	}

	&__rank-number {
		position: absolute;
		bottom: -0.5rem;
		left: 0.75rem;
		font-size: 5rem;
		font-weight: 900;
		line-height: 0.8;
		color: rgba(255, 255, 255, 0.25);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		pointer-events: none;

		@media (max-width: $bp-mobile-max) {
			font-size: 3.5rem;
			bottom: 0;
		}
	}

	&__avatar {
		border-radius: 9999px;
		background: #fff;
	}

	&__name {
		font-size: 1.1rem;
		font-weight: 700;
		line-height: 1.2;
	}

	&__channel {
		font-size: 0.82rem;
		opacity: 0.85;
	}

	&__amount {
		margin-top: 0.25rem;
		font-size: 1rem;
		font-weight: 700;
	}

	&__meta {
		font-size: 0.78rem;
		opacity: 0.85;
	}

	&__shimmer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
		background-size: 200% 100%;
		animation: ranking-podium-shimmer 3s ease-in-out infinite;
		border-radius: inherit;
	}
}

@keyframes ranking-podium-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ranking-podium__shimmer {
		animation: none;
		opacity: 0.2;
	}

	.ranking-podium__winner {
		transition: none;

		&:hover {
			transform: none;
		}
	}
}