*/
/* ├── img.ing-icon-img （ICON_MAP 有登记时） */
/* └── span.ing-icon-emoji-fallback */
/* img 加载失败时 onerror 把自己 display:none，露出 emoji span */
/* ============================================================ */
.ing-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.ing-icon-img {
object-fit: contain;
display: block;
margin: 0 auto;
}
.ing-icon-emoji-fallback {
line-height: 1;
display: inline-block;
}
/* —— variant: sticker（冰箱门 Dashboard 上的贴纸）—— */
.ing-icon-sticker {
display: block;
margin-bottom: 4px;
}
.ing-icon-sticker .ing-icon-img {
width: 40px;
height: 40px;
}
.ing-icon-sticker .ing-icon-emoji-fallback {
font-size: 34px;
}
/* —— variant: list（管理冰箱完整列表）—— */
.ing-icon-list {
display: block;
/* v8.0-α post: 贴图变大跟字名小重叠 —— 旧 margin-bottom: 2px 让 icon 字间留白
* 改成 -6px 让 icon 底部压住 ing-name 顶部一点点，视觉更紧凑、贴图占比更高 */
margin-bottom: -6px;
transition: filter 0.25s; /* 配合 .ing-card:not(.have) 的灰度切换 */
}
.ing-icon-list .ing-icon-img {
/* v8.0-α post: 贴图变大 32→52（+62%），让食材占卡片比从 ~40% 到 ~65% */
width: 52px;
height: 52px;
}
/* v8.0-α post 修：长按食材 PNG 会触发 iOS 长按图片预览（"贴图浮起来"的感觉）
* 因为 -webkit-touch-callout: none 在 .ing-card 上不继承到子 img
* 给 img 自己禁三件事：callout 菜单 / drag 拖拽 / pointer-events
* 关键是 pointer-events: none 让事件穿透到 .ing-card 处理，浏览器以为没按图片
* 影响范围：所有食材 PNG（管理页 ing-card + 首页冰箱 sticker）统一禁 */
.ing-icon-img {
-webkit-touch-callout: none;
-webkit-user-drag: none;
pointer-events: none;
}
.ing-icon-list .ing-icon-emoji-fallback {
/* 同步 emoji fallback 30→46，跟 PNG 视觉等大 */
font-size: 46px;
}
/* —— variant: default（其它任何地方默认）—— */
.ing-icon-default .ing-icon-img {
width: 28px;
height: 28px;
}
.ing-icon-default .ing-icon-emoji-fallback {
font-size: 24px;
}
/* ============================================================ */
/* v7.1：冰箱 board —— 背景层 + 食材层完全独立 */
/* ============================================================ */
/* 冰箱机身 —— 背景层容器（米白渐变 + 内阴影 + 圆角 + 留 handle 位） */
.fridge-board {
position: relative;
/* v7.3 Phase A.5：消除"第二层壳" —— 删 gradient + box-shadow，纯 cream
* v7.3 Phase A.8：彻底消除"白色框"
* 根因：body 用 var(--cream) + 粉/绿 radial gradient 渐晕；
* .fridge-board 用纯 var(--cream)（没有 gradient）
* → 颜色相近但 body 周围有色变，board 显得"更白" → 像一张 cream 卡片
* → PNG 水彩 fade 边缘外侧露出这张卡片，看起来像"shell 外面还有一层白框"
* 修复：background → transparent，让 body 的渐变透过 board 显示。
* PNG 中心透明区现在透出的是 body bg（带渐变），跟周围连成一片，
* 视觉上"shell 外面 = body"，"shell 里面 = body"，无任何卡片感。
* Tradeoff：PNG 加载失败时 board 变成"完全透明矩形" + 内容浮在 body 上，
* 无 fridge 形状。但 Vercel 静态资产稳定，可接受。
* 历史: Phase A.4 已删 border / 两条 inset shadow；A.5 已删 gradient / box-shadow。
*/
background: transparent;
border-radius: 28px;
/* v7.3 A.14：padding 30/30 对称（消除偏右）
* v7.3 A.16：缩到 22/22 给 sticker 更多空间放大
* handle 右沿 x=26，content 起点 x=22 → 视觉上有 4px 重叠区
* 但 handle 是 12px 窄 pill，icon 是水彩 sticker（边缘大量透明像素），
* 实际看上去几乎不冲突。如果你看着别扭再回 26/26 或 28/28。 */
padding: 22px 22px 26px 22px;
/* v7.2 Phase A.2：fridge 是固定物理对象 ——
* 宽 = 屏幕宽度的 94%（上限 560 居中）
* 高 = 100dvh 扣 header/nav/safe margin（不扣冰箱下的营养卡，
* 允许整页 scroll 后看到营养卡）
* clamp(560, 100dvh-170, 780): 保证小屏不缩到看不清，大屏不无限放大
* box-sizing: border-box 让 padding 不超出 height
* display: flex column 让 top/bottom zone 按比例分配 fridge 内部空间
*/
box-sizing: border-box;
width: min(94vw, 560px);
margin: 4px auto 18px;
height: clamp(560px, calc(100vh - 170px), 780px); /* 老浏览器兜底 */
height: clamp(560px, calc(100dvh - 170px), 780px); /* 现代浏览器优先 */
display: flex;
flex-direction: column;
z-index: 0; /* 建立 stacking context，让内部 overlay/内容 z-index 生效 */
}
/* ============================================================ */
/* v7.3 Phase A.3：fridge shell overlay（水彩外壳覆盖层） */
/* ------------------------------------------------------------ */
/* - 位于 fridge-board 背景 gradient 之上（z=1） */
/* - 所有交互/内容元素之下（z=2） */
/* - pointer-events: none → 点击穿透 overlay 到 sticker/按钮 */
/* - PNG 中心透明，让 sticker / 推荐 / 装饰透出来 */
/* - 资产缺失（404）→ 浏览器不渲染 bg-image → CSS gradient 兜底 */
/* ============================================================ */
.fridge-shell-overlay {
position: absolute;
/* v7.3 Phase A.6：让 PNG shell 成为冰箱"最外层"
* inset: 0 → -8px：overlay 向 4 边各外溢 8px
* 原因：PNG 水彩 outline 边缘天然有 fade，painted 部分缩在 PNG 中心一些；
* 不外溢 → 视觉 outline 内嵌在 board 边里 → 看起来像 board 包着 overlay
* 外溢 8px → painted outline 边缘落到 board 边界之外，覆盖了那一圈 cream
* pointer-events: none 仍然在 → 不挡点击；
* absolute 仍然在 → 不影响 layout；
* border-radius 28 → 32：overlay 比 board 大 16px，圆角等比略大保持视觉一致。
*/
inset: -8px;
z-index: 1;
pointer-events: none;
border-radius: 32px;
background-image: url('../assets/fridge/shell/fridge-shell-overlay.png');
background-size: 100% 100%; /* 非等比拉伸填满（水彩可吸收 ±18% 拉伸）*/
background-repeat: no-repeat;
background-position: center;
}
/* 让所有交互/内容元素浮在 overlay 之上（z=2 vs overlay z=1）
* 使用 :not(.fridge-shell-overlay) 让未来新增任何 fridge-board 子元素自动获 z=2 */
.fridge-board > *:not(.fridge-shell-overlay) {
z-index: 2;
}
/* 把手 —— 左侧竖向 pill
* v7.1.4：从纯装饰升级为"管理冰箱"入口按钮（element 从 改