>>6
確証は取れなかったんですが……試しに１行だけ、>>1のCSSを書き換えてみてください。

『/* 段落、余白 */』と書いてあるところより少し下にある記述、
> .box::after {
> content: '';
> display: block;
> position: absolute;
> bottom: 0;
> left: 0;
> width: 100%;
> height: 20px;
>♦️ background: url('メイン画像URL') center / cover var(--lightColor);
> }

ここの最後の部分、
> background: url('メイン画像URL') center / cover var(--lightColor);
を、以下のように書き換えてみてください。
━━━━━━━━━━

background: var(--lightColor) url('メイン画像URL') center / cover;

━━━━━━━━━━

背景色を指定する「var(--lightColor)」を、一番初めのところに移動させただけです。
背景色が消える原因は、背景色の指定をスラッシュの後に書いてるせいかな……と思ったのですが。

試しにテストしてみたら、自分の端末（Android＆iPad）からなら、元の>>1-2CSSでも背景色は消えなかったんですよね……。もしかしたらiPhoneでしか観測できない不具合かも……。
（端末によって表示に差が出たりするのは滅茶苦茶よくあります）

解決するか分からないんですが、ちょっと試してみていただければ……。