/* 插畫素材的共用版型（素材交接包 98 項）：圓角、比例、留白一致；寬高由 img 屬性固定，避免版面跳動 */

.c-illus {
  margin: 0;
}
.c-illus > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* 頁首主視覺：3:2 圓角卡片，手機滿寬、平板以上限制高度不搶內容 */
.s-help__hero,
.s-present__hero,
.s-pro__hero,
.s-review__hero,
.s-import__hero,
.s-reminders__hero,
.s-help__care-art,
.s-eat__hero,
.s-learn-detail__hero {
  margin: 0 0 var(--sp-4, 16px);
  border-radius: var(--r-card, 20px);
  overflow: hidden;
  background: var(--surface-2);
}
.s-help__hero > img,
.s-present__hero > img,
.s-pro__hero > img,
.s-review__hero > img,
.s-import__hero > img,
.s-reminders__hero > img,
.s-help__care-art > img,
.s-eat__hero > img,
.s-learn-detail__hero > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 學習封面類（1080×600，接近 9:5）：橫幅 */
.s-learn__hero,
.s-questions__hero,
.s-nutrition__hero {
  margin: 0 0 var(--sp-4, 16px);
  border-radius: var(--r-card, 20px);
  overflow: hidden;
  background: var(--surface-2);
}
.s-learn__hero > img,
.s-questions__hero > img,
.s-nutrition__hero > img {
  aspect-ratio: 9 / 5;
  object-fit: cover;
}
.s-questions__hero-slot:empty {
  display: none;
}

/* 平板以上：主視覺不超過 280px 高，避免把內容推到折線下 */
@media (min-width: 600px) {
  .s-help__hero > img,
  .s-present__hero > img,
  .s-pro__hero > img,
  .s-review__hero > img,
  .s-import__hero > img,
  .s-reminders__hero > img,
  .s-eat__hero > img,
  .s-learn-detail__hero > img,
  .s-learn__hero > img,
  .s-questions__hero > img,
  .s-nutrition__hero > img {
    max-height: 280px;
  }
  .s-help__care-art {
    max-width: 360px;
  }
}

/* 學習列表縮圖 */
.s-learn__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 48px;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}
.s-learn__thumb > img {
  width: 72px;
  height: 48px;
  object-fit: cover;
}

/* 外食情境卡頂圖 */
.s-eat__art {
  margin: calc(-1 * var(--sp-4, 16px)) calc(-1 * var(--sp-4, 16px)) var(--sp-3, 12px);
  border-radius: var(--r-card, 20px) var(--r-card, 20px) 0 0;
  overflow: hidden;
}
.s-eat__art > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 徽章圖：透明 PNG→WebP，原圖已含外框，不再加底色 */
.c-badge__art {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}
.c-badge__art > img {
  width: 56px;
  height: 56px;
}
.c-badge--off .c-badge__art {
  opacity: 0.85;
}

/* 回診卡品牌標誌 */
.s-report-card__logo {
  display: inline-block;
  width: 120px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
.s-report-card__logo > img {
  width: 120px;
  height: 36px;
  object-fit: contain;
}

/* 空狀態插圖：統一尺寸 */
.c-empty__illus .c-illus {
  width: min(280px, 72%);
  margin: 0 auto;
}
.c-empty__illus .c-illus > img {
  border-radius: 16px;
}

/* 首次引導主視覺 */
.s-onboarding__art .c-illus > img {
  border-radius: var(--r-card, 20px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media print {
  .s-report-card__logo > img {
    print-color-adjust: exact;
  }
}

/* 外食情境晶片：晶片內的圖只當小縮圖（原本吃到 .s-eat__art 的大圖樣式，造成詳情頁重複大圖） */
html body .s-eat__nav > .c-scene-chip > .s-eat__art {
  flex: 0 0 auto;
  width: 36px;
  height: 24px;
  margin: 0 8px 0 0;
  border-radius: 6px;
  overflow: hidden;
}
html body .s-eat__nav > .c-scene-chip > .s-eat__art > img {
  width: 36px;
  height: 24px;
  aspect-ratio: auto;
  object-fit: cover;
}
.c-scene-chip {
  display: inline-flex;
  align-items: center;
}

/* 學習頁外食卡：左縮圖＋右文字的橫向卡；有縮圖時隱藏原本的小圖示 */
body .s-learn__grid > .c-learn-card:has(> .s-learn__thumb) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
body .s-learn__grid > .c-learn-card > .s-learn__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 64px;
  border-radius: 12px;
}
body .s-learn__grid > .c-learn-card > .s-learn__thumb > img {
  width: 96px;
  height: 64px;
}
body .c-learn-card:has(> .s-learn__thumb) .s-learn__icon {
  display: none;
}
body .c-learn-card > .s-learn__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

/* 飲食空狀態：插圖、說明、按鈕直向排列（原本橫排把按鈕文字擠成直排） */
body .s-nutrition__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
body .s-nutrition__empty .c-illus {
  width: min(280px, 80%);
}
body .s-nutrition__empty .c-btn {
  white-space: nowrap;
}
body .s-nutrition__empty::before {
  display: none;
}

/* 首次引導：插圖框原本固定高度 clamp(96px,16dvh,150px)，3:2 插圖會溢出蓋到標題 → 改由框裁切 */
html body .s-onboarding__art {
  height: clamp(150px, 26dvh, 240px);
  margin: var(--sp-1, 4px) 0 var(--sp-3, 12px);
  overflow: hidden;
  border-radius: var(--r-card, 20px);
}
html body .s-onboarding__art .c-illus,
html body .s-onboarding__art .c-illus > img {
  width: 100%;
  height: 100%;
}
html body .s-onboarding__art .c-illus > img {
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 40%;
}

/* 平板／桌面徽章：每格 120px 的自動換行格線（原本兩欄、間距過大） */
@media (min-width: 600px) {
  html body .s-today-card--badges .s-today-badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 16px 8px;
    justify-items: center;
  }
  html body .s-today-card--badges .s-today-badges > .c-badge {
    width: 112px;
  }
}