ANTOOZA-FRONTEND/app/styles/reward.scss

// ─────────────────────────────────────────────────────────────
// D3 보상/응원/지위아이템 — 장착 배지 · 닉네임 이펙트 · 레벨 진행바 · 상점 미리보기
// D6 토큰 변수만 사용. 등락엔 --az-accent 미사용(D6 원칙).
// ─────────────────────────────────────────────────────────────

// ── 장착 배지 (닉네임 옆) ──
.equipped-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: var(--sp-2);
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--bg-subtle);
	border: 1px solid var(--border-default);
	font-size: var(--fs-2xs);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;

	&__icon {
		width: 12px;
		height: 12px;
		object-fit: contain;
	}

	&__emoji {
		font-size: var(--fs-xs);
		line-height: 1;
	}

	&__label {
		max-width: 8em;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

// ── 닉네임 이펙트 ──
.nickname-effect {
	font-weight: 700;

	// EffectPayload.animation 키에 대응하는 프리셋 (없으면 색상만)
	&--glow {
		text-shadow: 0 0 6px currentColor;
	}

	&--pulse {
		animation: nickname-pulse 1.6s ease-in-out infinite;
	}

	&--gradient {
		background: linear-gradient(90deg, var(--az-accent), var(--price-up));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

@keyframes nickname-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

// 접근성 — 모션 최소화 선호 시 애니메이션 정지
@media (prefers-reduced-motion: reduce) {
	.nickname-effect--pulse {
		animation: none;
	}
}

// ── 레벨/보상 위젯 ──
.level-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: var(--sp-6);
	border: 1px solid var(--border-default);
	border-radius: var(--radius);
	background: var(--bg-elevated);

	&__grade {
		display: flex;
		align-items: center;
		gap: var(--sp-4);
	}

	&__grade-img {
		width: 40px;
		height: 40px;
		object-fit: contain;
	}

	&__grade-name {
		font-size: var(--fs-xl);
		font-weight: 800;
	}

	&__exp {
		font-size: var(--fs-sm);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	&__bar {
		position: relative;
		height: 12px;
		border-radius: 999px;
		background: var(--bg-subtle);
		overflow: hidden;
	}

	&__bar-fill {
		position: absolute;
		inset: 0 auto 0 0;
		background: var(--az-accent);
		border-radius: 999px;
		transition: width .3s ease;
	}

	&__next {
		font-size: var(--fs-sm);
		color: var(--text-secondary);
		font-variant-numeric: tabular-nums;
	}
}

// ── 오늘 보상 캡 표 ──
.reward-today {
	border: 1px solid var(--border-default);
	border-radius: var(--radius);
	overflow: hidden;

	&__header {
		display: flex;
		justify-content: space-between;
		gap: var(--sp-4);
		padding: var(--sp-5) var(--sp-6);
		background: var(--bg-elevated);
		border-bottom: 1px solid var(--border-default);
		font-weight: 700;
	}

	&__total {
		font-variant-numeric: tabular-nums;
		color: var(--az-accent);
	}

	&__row {
		display: grid;
		grid-template-columns: 1fr auto auto;
		gap: var(--sp-4);
		align-items: center;
		padding: var(--sp-4) var(--sp-6);
		border-bottom: 1px solid var(--border-light);
		font-size: var(--fs-sm);

		&:last-child {
			border-bottom: 0;
		}
	}

	&__name {
		font-weight: 600;
	}

	&__earned {
		font-variant-numeric: tabular-nums;
		color: var(--text-secondary);
	}

	&__cap {
		font-variant-numeric: tabular-nums;
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	&__cap--full {
		color: var(--price-down);
	}
}