ANTOOZA-FRONTEND/app/styles/profile.scss

.profile-dropdown {
	// ── 아바타 트리거 버튼 ─────────────────────────────
	&__trigger {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		flex-shrink: 0;

		// ── 비로그인 수정자 ──────────────────────────
		&--guest {
			background: none;
			font-size: 1rem;
			font-weight: 500;
			color: var(--text-head);
			cursor: pointer;
			white-space: nowrap;

			&:hover {
				background:  none;
				text-decoration: underline;
				font-weight: 700;
			}

			> span {
				width: clamp(1.25rem, 3vw, 1.75rem);
			}
		}
	}

	&__fallback {
		font-size: 0.8125rem;
		font-weight: 700;
		color: var(--text-muted);
		background: var(--bg-elevated);

		&:hover {
			border: 1px solid var(--border-strong);
		}
	}

	// ── 드롭다운 컨텐츠 ──────────────────────────────
	&__content {
		width: auto;
	}

	// ── 프로필 헤더 영역 ─────────────────────────────
	&__header {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px;
	}

	&__user-info {
		flex: 1;
		min-width: 0;
	}

	&__name {
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--fg-default);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__balance {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 0.75rem;
		color: var(--text-muted);
		margin-top: 2px;

		&-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: var(--color-purple);
			color: #fff;
			font-size: 0.5625rem;
			font-weight: 700;
			flex-shrink: 0;
		}

		> span:last-child {
			color: var(--text-primary);
		}
	}

	// ── 메뉴 아이콘 ──────────────────────────────────
	&__menu-icon {
		width: 20px;
		text-align: center;
		font-size: 1rem;
		flex-shrink: 0;
	}

	// ── 위험 액션 (로그아웃) ──────────────────────────
	&__danger {
		color: var(--color-danger);

		&:focus {
			color: var(--color-danger);
			background: var(--color-danger-bg);
		}
	}

	// ── 비로그인 링크 ────────────────────────────────
	&__guest {
		display: flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	&__guest-link {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--text-head);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	&__guest-divider {
		font-size: 0.75rem;
		color: var(--text-head);
		opacity: 0.5;
	}
}