/* product.css — 產品頁共用樣式（ER001 起；版型相似的產品頁共用此檔）
   Hero / 日韓熱議 / 形象橫幅 / PDRN 旋轉圓圈 / 成分卡片 / 植萃 / HOW TO / Q&A
   所有字級與間距沿用 typography.css 的 root 變數；斷點 1280 / 768 */

:root {
  --pd-radius: clamp(0.5rem, 1vw, 1rem);
  --pd-card-bg: var(--color-white);
  --pd-soft: color-mix(in srgb, var(--color-line) 55%, var(--color-white));
  /* 示意圖的副標／標籤手機約 13px、桌機約 22px；說明條手機約 15px、桌機約 25px
     （390 → 1920 線性縮放，同 typography.css 的 clamp 算法） */
  --pd-fs-lead: clamp(0.8125rem, 0.669rem + 0.588vw, 1.375rem);
  --pd-fs-bar: clamp(0.9375rem, 0.778rem + 0.654vw, 1.5625rem);
}

main {
  overflow-x: hidden;
}

/* ---- 共用：註記上標、手機換行 ---- */
.note-mark {
  font-size: 0.65em;
  line-height: 0;
  vertical-align: baseline; /* 示意圖的 ※ 註記是很小的、貼在文字基線旁 */
  letter-spacing: 0;
  color: var(--color-note);
  margin-right: 0.3em;
}
.pdd-heading .note-mark {
  font-size: 0.35em;
  margin-right: 0;
}
.br-sp {
  display: none;
}

/* ---- 區塊標題（HOW TO / Q&A：橘色英文 + 兩側橘線的中文） ---- */
.sec-title {
  text-align: center;
}
.sec-title__en {
  font-family: var(--font-serifTC);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-orange);
}
.sec-title__ja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}
.sec-title__ja::before,
.sec-title__ja::after {
  content: "";
  width: var(--space-xl);
  border-top: 2pt solid var(--color-orange);
}

/* ---- 內文大標（橘字；數字放大） ---- */
.pdd-heading {
  font-size: var(--fs-h2);
  color: var(--color-orange);
  font-weight: var(--fw-semibold);
}
.pdd-heading__num {
  font-family: var(--font-serifTC);
  font-size: 1.25em;
}
.pdd-heading__x {
  display: inline-block;
}

/* ---- Hero ---- */
.hero__img {
  display: block;
}
.hero__img img {
  width: 100%;
}

/* ---- 日韓熱議的護膚靈感 ---- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  align-items: center;
}
.about__photo {
  display: block;
}
.about__photo img {
  width: 100%;
}
.about__text {
  text-align: center;
}
.about__head h2,
.about__head p {
  font-family: var(--font-serifTC);
  font-weight: var(--fw-semibold);
}
.about__title {
  color: var(--color-orange);
}
.about__buy {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}
.btn-outline--fill {
  background: var(--color-orange);
  color: var(--color-white);
}
.btn-outline {
  padding: 0.4em 2.5em;
  color: var(--color-orange);
}

/* ---- 形象橫幅 ---- */
.banner {
  --banner-face: 10%; /* 文字左側留白：文字中心 ≈ 50% + 留白/2；桌機約落在橫幅 55%（對照示意圖），可依圖調整 */
  position: relative;
  overflow: hidden;
}
.banner picture {
  display: block;
}
.banner img {
  width: 100%;
}
.banner__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.12em;
  font-family: var(--font-serifTC);
  font-weight: var(--fw-semibold);
  padding-left: var(--banner-face); /* 讓出左側人像，文字置中在右側空間 */
}

/* ---- 1.1% 雙重 PDRN + 旋轉圓圈 ---- */
.pdrn__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.pdrn__text {
  text-align: center;
  container-type: inline-size;
}
/* 標題最大不超過原本字級，並隨左欄寬度縮小（約 13.6 字寬），任何寬度都維持一行 */
.pdrn__text .pdd-heading {
  font-size: min(calc(var(--fs-h2) * 0.86), 7cqw);
}
.orbit {
  --orbit-spin: 40s; /* 圓圈轉一圈的秒數，越大越慢 */
  position: relative;
  width: 100%;
  aspect-ratio: 310 / 215;
}
.orbit img {
  position: absolute;
  height: auto;
}
.orbit__ring {
  left: 21.6%;
  top: 8.4%;
  width: 56.5%;
  animation: orbit-spin var(--orbit-spin) linear infinite;
}
.orbit__photo--salmon {
  left: 0;
  top: 0;
  width: 45%;
}
.orbit__photo--ginseng {
  left: 51.6%;
  top: 34%;
  width: 44%;
}
@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- 8 種成分卡片 ---- */
.ing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.ing {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--pd-card-bg);
  border-radius: var(--pd-radius);
}
.ing__icon {
  flex: none;
  width: 26%;
  height: auto;
}
.ing__name {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  font-family: var(--font-serif);
}
.ing__desc {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* ---- 7 種植萃 ---- */
.plant-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-md) 0;
  max-width: 1040px;
  margin-inline: auto;
}
.plant {
  grid-column: span 2; /* 每個佔 2 欄：第二排 4 個剛好排滿 */
  text-align: center;
}
.plant:nth-child(1) {
  grid-column: 2 / span 2; /* 第一排 3 個：從第 2 欄開始，與第二排同間距並置中 */
}
.plant img {
  width: min(100%, 11.25rem);
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--space-xs);
}

/* ---- HOW TO ----
   圖片本身已含外框與底部灰色色塊：.step__card 只負責定位，文字蓋在灰色色塊上
   --band：灰色色塊高度（佔圖片高度）；--no-top：步驟編號與頂端的距離，依實際圖片微調 */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  align-items: end;
}
.step {
  --band: 23.4%; /* 灰色色塊佔外框高度（依示意圖量測：步驟 1、2、4 約 23.4%） */
  --band-bottom: 0.7%; /* 灰色色塊與外框底邊的距離（外框線寬） */
  position: relative;
}
.step--active {
  --band: 20%; /* 步驟三（how_to_3.png）的灰色色塊約 20% */
  --band-bottom: 0.8%;
}
.steps {
  --active-scale: 1.2; /* 第 3 步最終放大倍率（對照示意圖約 1.2 倍） */
  --active-start-scale: 0.83; /* 第 3 步一開始先縮小，進場後再放大 */
  /* 基準卡片高度（終態欄寬：1 : 1 : 1.2 : 1 共 4.2 份 × 外框比例 565/310）：箭頭以此固定定位，不隨動畫移動 */
  --card-h: calc((100cqw - 3 * var(--space-md)) / 4.2 * 1.8226);
  padding-top: var(--space-xl); /* 預留步驟三瓶身突出外框上緣的空間 */
  container-type: inline-size;
}
.step__card {
  position: relative;
  transform-origin: 50% 100%;
  aspect-ratio: 310 / 565; /* 外框比例（依 how_to_3.png 量測）：卡片即外框，四張統一 */
}
/* 放大只在 JS 進場後才套用（見下方 .js-steps .is-visible），避免載入時先放大再縮回 */
/* 圖片精準貼合外框（卡片即外框），編號與外框的相對位置才會固定，並隨卡片一起縮放 */
.step__card > img {
  position: absolute;
  left: 0;
  bottom: 0; /* 以外框底部對齊 */
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* 步驟三：圖片高度 116.8%（瓶身突出外框 16.8%），底部仍與外框對齊，外框位置不變 */
.step--active .step__card > img {
  height: 116.8%;
}
.step__no {
  position: absolute;
  top: var(--no-top, var(--space-2xs));
  left: var(--space-xs);
  font-family: var(--font-serifTC);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.step--active .step__no {
  color: var(--color-orange);
}
.step__label {
  position: absolute;
  inset: auto 0 var(--band-bottom) 0; /* 標題範圍與灰色色塊重合，才能水平垂直置中 */
  height: var(--band);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-xs);
  text-align: center;
  line-height: 1.5;
}
.step__arrow {
  z-index: 1;
  position: absolute;
  top: auto;
  bottom: calc(var(--card-h) / 2); /* 以卡片底部往上半個基準高度，所有箭頭同一水平線、不會移動 */
  left: calc(100% + var(--space-lg) / 2);
  width: var(--space-xs);
  transform: translate(-50%, 50%);
}
.step__arrow img {
  width: 100%;
  height: auto;
}
.howto__note {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  text-align: center;
  background: var(--color-white);
}

/* 滑到此區時由左至右依序滑入；第 4 步跑完後，第 3 步才慢慢放大並變回彩色（需 JS） */
.js-steps .step {
  opacity: 0;
  transform: translateX(calc(var(--space-lg) * -1.5));
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  transition-delay: calc(var(--i, 0) * 0.18s);
}
.js-steps .step:nth-child(2) {
  --i: 1;
}
.js-steps .step:nth-child(3) {
  --i: 2;
}
.js-steps .step:nth-child(4) {
  --i: 3;
}
.js-steps .step--active .step__card {
  transform: scale(var(--active-start-scale)); /* 一開始先縮小 */
  filter: grayscale(1);
  transition:
    transform 0.9s ease,
    filter 0.9s ease;
}
.js-steps .howto__note {
  opacity: 0;
  transition: opacity 0.7s ease 0.8s;
}
.js-steps .is-visible .step {
  opacity: 1;
  transform: none;
}
.js-steps .is-visible .step--active .step__card {
  transform: scale(var(--active-scale));
  filter: none;
  transition-delay: 1.5s; /* 等 01→04 滑入完成 */
}
.js-steps .is-visible .howto__note {
  opacity: 1;
}

/* ---- Q&A ---- */
.faq__title {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-line);
}
.faq__item {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--pd-card-bg);
  border-radius: var(--pd-radius);
}
.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  /* 問題文字樣式與答案一致（button 會繼承 h3，這裡改回內文） */
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  letter-spacing: 0.06em;
  line-height: var(--lh-body);
}
.faq__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  font-family: var(--font-serifTC);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-text-sm);
  letter-spacing: 0;
  line-height: 1;
}
.faq__badge--q {
  background: var(--pd-soft);
}
.faq__badge--a {
  background: var(--color-orange);
  color: var(--color-white);
}
.faq__text {
  flex: 1;
}
/* arrow_2.png 預設當作「朝下」；展開時轉 180° 朝上。若圖片方向相反，把下面 rotate 改到未展開的狀態即可 */
.faq__chevron {
  flex: none;
  width: var(--space-sm);
  transform: rotate(180deg);
  transition: transform 0.3s;
}
.faq__chevron img {
  width: 100%;
  height: auto;
}
.faq__q[aria-expanded="true"] .faq__chevron {
  transform: rotate(0deg);
}
.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
}
.faq__panel-inner {
  overflow: hidden;
}
.faq__a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
}
/* JS 啟用後才收合（無 JS 時答案維持展開） */
.js-faq .faq__panel {
  transition:
    grid-template-rows 0.3s ease,
    visibility 0.3s;
}
.js-faq .faq__heading:has(.faq__q[aria-expanded="false"]) + .faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
}

/* ==========================================================================
   捲動進場動畫（JS 加上 .js-reveal 後才生效；無 JS 或系統設定「減少動態」時直接顯示）
   ========================================================================== */

/* 日韓熱議：圖片淡入，文字從右側滑入（手機改由下方滑入） */
.js-reveal .about__photo {
  opacity: 0;
  transition: opacity 1s ease;
}
.js-reveal .about__head,
.js-reveal .about__body,
.js-reveal .pdrn__text,
.js-reveal .pdd-heading,
.js-reveal .pd-lead {
  opacity: 0;
  transform: translateX(var(--space-xl));
  transition:
    opacity 0.9s ease 0.35s,
    transform 0.9s ease 0.35s;
}
.js-reveal .pdrn__text,
.js-reveal .pdd-heading {
  transform: translateX(calc(var(--space-xl)* -1));
}
.js-reveal #pdrn .pdd-heading {
  transform: translateX(0);
}
.js-reveal .about__grid.is-visible .about__photo {
  opacity: 1;
}
.js-reveal .about__grid.is-visible .about__head,
.js-reveal .about__grid.is-visible .about__body,
.js-reveal .pdrn__text.is-visible,
.js-reveal .pdd-heading.is-visible,
.js-reveal .pd-lead.is-visible {
  opacity: 1;
  transform: none;
}

/* 形象橫幅：圖片從左滑入，文字淡入 */
.js-reveal .banner picture {
  opacity: 0;
  transform: translateX(-100%);
  transition:
    transform 1.1s cubic-bezier(0.22, 0.7, 0.2, 1),
    opacity 1.1s ease;
}
.js-reveal .banner__text {
  opacity: 0;
  transition: opacity 1s ease 0.9s;
}
.js-reveal .banner.is-visible picture {
  opacity: 1;
  transform: none;
}
.js-reveal .banner.is-visible .banner__text {
  opacity: 1;
}

/* 1.1% PDRN：鮭魚 → 人蔘依序浮現，接著圓圈淡入並開始緩慢旋轉 */
.js-reveal .orbit__photo {
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.js-reveal .orbit__photo--ginseng {
  transition-delay: 0.4s;
}
.js-reveal .orbit__ring {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity 1s ease 0.9s;
}
.js-reveal .orbit.is-visible .orbit__photo {
  opacity: 1;
  transform: none;
}
.js-reveal .orbit.is-visible .orbit__ring {
  opacity: 1;
  animation-play-state: running;
}

/* 成分卡片：依序由下往上浮現（延遲由 JS 依順序寫入） */
.js-reveal .ing {
  opacity: 0;
  transform: translateY(var(--space-lg));
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.js-reveal .ing.is-visible {
  opacity: 1;
  transform: none;
}

/* 植萃圓圖：依序由左至右漸進出現 */
.js-reveal .plant {
  opacity: 0;
  transform: translateX(calc(var(--space-lg) * -1.5));
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.js-reveal .plant.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   對照示意圖微調（桌機 1920 與手機 377px 示意圖逐項量測後調整）
   ========================================================================== */

/* ---- 共用 ---- */
.br-pc {
  display: inline;
} /* 只在桌機換行（手機讓文字自然折行） */
/*
.pdd-heading {
  line-height: 1.25;
}  示意圖的大標行距較緊，手機分三行時更明顯 */
.pd-lead {
  /* 區塊副標 */
  font-size: var(--pd-fs-lead);
  line-height: 1.4;
}
.about__body .text-note,
.pdrn__text .text-note {
  line-height: 1.5; /* 註記行距比內文緊 */
}
.sec-title__en {
  font-size: min(var(--fs-h1), 3.6rem);
}
.sec-title__ja {
  font-size: calc(var(--fs-h4) * 1.47);
}
.sec-title__ja::before,
.sec-title__ja::after {
  width: var(--space-lg);
}
.plant p,
.step__label {
  font-size: var(--pd-fs-lead);
}
.howto__note {
  font-size: var(--pd-fs-bar);
  margin-top: var(--space-lg);
}
.faq__badge {
  width: var(--space-lg);
  height: var(--space-lg);
  font-size: var(--fs-h4);
}
.faq__q,
.faq__a {
  gap: var(--space-md);
}
.faq__a p,
.faq__text {
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* ==========================================================================
   ER002 專用（原 product-er002.html 內嵌 <style> 已移入此處；ER001 不受影響）
   新增：三重植萃圖解 / 微脂囊・六胜肽 2 欄 / 5 張成分卡片 / HOW TO 第 4 步放大
   ========================================================================== */

/* ---- 共用：較小的內文大標、picture 包 img 的相容規則 ---- */
.pdd-heading--sm {
  font-size: calc(var(--fs-h2) * 0.86);
}
.ing__icon img {
  width: 100%;
}
/* 旋轉圓圈：img 外層包 picture 時，由 picture 負責定位與動畫 */
.orbit picture {
  position: absolute;
}
.orbit picture img {
  position: static;
  width: 100%;
}

/* ---- 源自三重植萃 PDRN：三角圖解（連接線為 deco-line_1～3.png） ---- */
.triple__diagram {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  aspect-ratio: 680 / 560;
}
/* 連接線：3 張圖（deco-line_1「／」、_2「＼」、_3「—」），位置與寬度皆為圖解區的百分比；
   放在圓圖下方（z-index 0），圓圖在上（z-index 1） */
.triple__line {
  position: absolute;
  z-index: 0;
}
.triple__line img {
  width: 100%;
  height: auto;
}
.triple__line--1,
.triple__line--2 {
  width: 11%;
  top: 34%;
}
.triple__line--1 {
  left: 23%;
}
.triple__line--2 {
  right: 23%;
}
.triple__line--3 {
  left: 38%;
  bottom: 22%;
  width: 25%;
}
.triple__item {
  position: absolute;
  z-index: 1;
  width: 33%;
  text-align: center;
}
.triple__item img {
  width: 100%;
  height: auto;
}
.triple__item figcaption {
  margin-top: var(--space-2xs);
  line-height: 1.4;
  white-space: nowrap;
  font-weight: var(--fw-medium);
}
.triple__item--top {
  left: 33.5%;
  top: 0;
}
.triple__item--left {
  left: 0;
  top: 52%;
}
.triple__item--right {
  right: 0;
  top: 52%;
}

/* ---- 微脂囊 / 六胜肽：文字與圖片 2 欄 ---- */
.ft__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.ft__text {
  text-align: center;
}
.ft__text--left {
  justify-self: center; /* 文字區塊在左半置中，區塊內文字靠左 */
  text-align: left;
}
.ft__img img {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
.ft__grid--rev {
  grid-template-columns: 7fr 5fr; /* 圖片（含灰底）約佔 59%，文字在剩餘空間置中 */
}
.ft__grid--rev .ft__img {
  order: -1;
}
.ft__grid--rev .ft__img img {
  max-width: none;
}

/* ---- 成分卡片：每排 3 張，最後一排置中 ---- */
.ing-grid--wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- 捲動進場動畫（需 JS 的 .js-reveal） ---- */
.js-reveal .triple__head {
  opacity: 0;
  transform: translateY(var(--space-md));
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.js-reveal .triple__item {
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
/* 依序：CICA → 線①（從 CICA 背後往白米） → 白米 → 線③（從白米背後往高麗人蔘） → 高麗人蔘 → 線②（從高麗人蔘背後往 CICA）
   線用 clip-path 由起點端「長」出來；每一步約 0.7s，下一步緊接著開始 */
.js-reveal .triple__item--top {
  transition-delay: 0.3s;
}
.js-reveal .triple__item--left {
  transition-delay: 1.7s;
}
.js-reveal .triple__item--right {
  transition-delay: 3.1s;
}
.js-reveal .triple__line {
  transition: clip-path 0.7s ease-out;
}
.js-reveal .triple__line--1 {
  clip-path: inset(0 0 0 100%); /* 由右（CICA 端）往左 */
  transition-delay: 1s;
}
.js-reveal .triple__line--3 {
  clip-path: inset(0 100% 0 0); /* 由左（白米端）往右 */
  transition-delay: 2.4s;
}
.js-reveal .triple__line--2 {
  clip-path: inset(0 0 0 100%); /* 由右（高麗人蔘端）往左 */
  transition-delay: 3.8s;
}
.js-reveal .triple.is-visible .triple__head,
.js-reveal .triple.is-visible .triple__item {
  opacity: 1;
  transform: none;
}
.js-reveal .triple.is-visible .triple__line {
  clip-path: inset(0);
}
.js-reveal .ft__img {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.js-reveal .ft__grid.is-visible .ft__img {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Media Queries (媒體查詢樣式集中整合)
   ========================================================================== */

@media (min-width: 1560px) {
  .about__text .text-sm {
    font-size: var(--fs-xs);
  }
}   

@media (min-width: 768px) and (max-width: 1280px) {
  .banner {
    --banner-face: 24%; /* 平板：橫幅變窄，文字往右讓開人像 */
  }
}

/* ---- 桌機（768px 以上） ---- */
@media (min-width: 768px) {
  /* 區塊上下留白（示意圖各區間距不一，取最接近的 token） */
  #about {
    padding-block: var(--space-3xl);
  }
  #pdrn {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-lg);
  }
  #ingredients,
  #howto {
    padding-bottom: var(--space-xl);
  }
  #howto {
    padding-top: var(--space-xl);
  }

  /* 日韓熱議：圖片與文字各佔一半，文字置中在右半 */
  .about__title {
    font-size: var(--fs-product-title);
  }

  /* PDRN：左右各佔一半，旋轉圖最大 480px 置中在右半 */
  .pdrn__grid {
    gap: 0;
  }
  .orbit {
    max-width: 480px;
    margin-inline: auto;
  }

  /* 成分卡片 */
  .ing {
    gap: var(--space-lg);
    padding-block: var(--space-md);
  }
  .ing__name {
    font-size: var(--pd-fs-lead);
  }

  /* 植萃圓圖：圓 185px，上下排距對照示意圖 */
  .plant-grid {
    row-gap: var(--space-sm);
  }
  .plant img {
    width: min(100%, 11.5625rem);
    margin-bottom: var(--space-2xs);
  }

  /* HOW TO：示意圖的第 3 欄比其他寬 1.2 倍。一開始四欄等寬，第 4 步跑完後欄寬才慢慢變化
     （放大改由欄寬完成，不再用 scale） */
  .steps {
    --active-scale: 1;
    grid-template-columns: 1fr 1fr 1.2fr 1fr;
    gap: var(--space-md);
  }
  .step__arrow {
    left: calc(100% + var(--space-md) / 2);
  }
  .js-steps .steps {
    grid-template-columns: repeat(4, 1fr);
  }
  .js-steps .is-visible .steps {
    grid-template-columns: 1fr 1fr 1.2fr 1fr;
    transition: grid-template-columns 0.9s ease 1.5s; /* 等 01→04 滑入完成 */
  }

  /* ---- ER002 ---- */
  #triple {
    padding-block: var(--space-xl);
  }
  #liposome,
  #peptide {
    padding-block: var(--space-xl);
  }

  /* 成分卡片：3 欄 */
  .ing-grid--wrap .ing {
    width: calc((100% - 2 * var(--space-md)) / 3);
    gap: var(--space-sm);
    padding-inline: var(--space-sm);
  }
  .ing-grid--wrap .ing__icon {
    width: 28%;
  }

  /* HOW TO：第 4 步放大（欄寬 1 : 1 : 1 : 1.2，第 4 步跑完後才慢慢變寬） */
  .steps--end {
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
  }
  .js-steps .steps--end {
    grid-template-columns: repeat(4, 1fr);
  }
  .js-steps .is-visible .steps--end {
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    transition: grid-template-columns 0.9s ease 1.5s;
  }
}

/* ---- 手機（768px 以下） ---- */
@media (max-width: 768px) {
  /* 共用換行與標題折行 */
  .br-sp {
    display: inline;
  }
  .pdd-heading__part,
  .pdd-heading__x {
    display: block;
    margin-inline: 0;
  }

  /* 日韓熱議的護膚靈感 */
  .about__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .about__text {
    display: contents; /* 讓標題、圖片、內文能依手機版順序排列 */
  }
  .about__head {
    order: 1;
    text-align: center;
  }
  .about__photo {
    order: 2;
  }
  .about__body {
    order: 3;
    text-align: center;
  }
  .about__body > p:first-child {
    margin-top: 0;
  }
  .about__buy .btn-outline {
    flex: 1;
    min-width: 0;
  }

  /* 形象橫幅 */
  .banner {
    --banner-face: 32%; /* 手機：文字中心約 66%，對照手機示意圖 */
  }
  .banner__text {
    padding-right: var(--space-xs);
  }

  /* 1.1% 雙重 PDRN + 旋轉圓圈 */
  .pdrn__grid {
    grid-template-columns: 1fr;
  }
  .orbit__ring {
    width: 56.5%;
  }

  /* 8 種成分卡片 */
  .ing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }
  .ing {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs);
  }
  .ing__icon {
    width: 100%;
  }
  .ing__body {
    width: 100%;
    height: 100%;
  }
  .ing__name {
    font-size: var(--fs-text-sm);
    text-align: center;
    align-self: stretch;
    min-height: 40px;
  }
  .ing__desc {
    font-size: var(--fs-2xs);
  }

  /* 7 種植萃 */
  .plant-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-sm) var(--space-xs);
  }
  .plant,
  .plant:nth-child(-n + 3) {
    grid-column: span 2; /* 中間排 3 個 */
  }
  .plant:nth-child(1),
  .plant:nth-child(2),
  .plant:nth-child(6),
  .plant:nth-child(7) {
    grid-column: span 3; /* 第一、三排各 2 個 */
  }
  .plant:nth-child(1),
  .plant:nth-child(6) {
    margin-left: 35%;
  }
  .plant:nth-child(2),
  .plant:nth-child(7) {
    margin-right: 35%;
  }
  .plant img {
    width: min(100%, 7rem);
  }
  .plant p {
    font-size: var(--fs-text-sm);
  }

  /* HOW TO */
  .steps {
    --active-scale: 1.2; /* 對照手機示意圖約 1.2 倍 */
    /* 對照手機示意圖：卡片約 36vw，中間留出 18vw 放箭頭，整體置中 */
    --active-start-scale: 1;
    grid-template-columns: repeat(2, 36vw);
    justify-content: center;
    gap: var(--space-lg) 18vw;
    padding-top: var(--space-md);
    --card-h: calc(36vw * 1.822);
    align-items: center; /* 步驟三放大後，與步驟四水平、垂直中心對齊 */
    padding-bottom: calc(var(--card-h) * 0.1); /* 放大後往下多出的部分 */
  }
  /* 以卡片中心放大；瓶身突出外框 16.8%（放大後約 20%）。第三、四步下移，使放大後瓶身頂端與上排保持約 6px 間距 */
  .step__card {
    transform-origin: 50% 50%;
  }
  .step:nth-child(n + 3) {
    margin-top: max(0px, calc(var(--card-h) * 0.3 + 6px - var(--space-lg)));
  }
  /* 步驟三以左側中心放大：左邊與步驟一對齊、向右長，不超出區塊寬度；高度仍以中心對稱，與步驟四水平對齊 */
  .step--active .step__card {
    transform-origin: 0 50%;
  }
  /* 步驟三箭頭：永遠位於步驟三右邊界與步驟四左邊界的正中間。
     右邊界 = 36vw × s（s 為目前縮放），中點位置隨 s 移動，故箭頭位置 = 9vw + 18vw × (s − 1) */
  .step--active {
    --s: var(--active-start-scale);
  }
  .step--active .step__arrow {
    left: calc(100% + 9vw + 18vw * (var(--s) - 1));
  }
  .js-steps .is-visible .step--active {
    --s: var(--active-scale);
  }
  .js-steps .is-visible .step--active .step__arrow {
    transition: left 0.9s ease 1.5s; /* 與放大同步 */
  }
  .step__arrow {
    left: calc(100% + 9vw);
    width: clamp(0.5rem, 2vw, 0.75rem);
  }
  .step:nth-child(2n) .step__arrow {
    display: none; /* 箭頭只出現在同一排的 01→02、03→04 */
  }
  .step__label {
    font-size: var(--fs-text-sm);
  }

  /* Q&A */
  .faq__item {
    padding: var(--space-xs) var(--space-sm);
  }
  .faq__a p br {
    display: none;
  }

  /* 捲動進場動畫：日韓熱議 */
  .js-reveal .about__head,
  .js-reveal .about__body,
  .js-reveal .pdrn__text
  {
    transform: translateY(var(--space-lg));
  }

  /* 對照示意圖微調：共用與區塊留白縮小 */
  .br-pc {
    display: none;
  }
  #about,
  #pdrn,
  #ingredients,
  #botanicals,
  #howto {
    padding-block: var(--space-lg);
    overflow: hidden;
  }
  .faq {
    padding-block-start: var(--space-lg);
  }
  .ing-grid.mt-lg,
  .plant-grid.mt-xl {
    margin-top: var(--space-md);
  }
  .faq__q,
  .faq__a {
    gap: var(--space-sm);
  }

  /* ---- ER002 ---- */
  #triple,
  #liposome,
  #peptide {
    padding-block: var(--space-lg);
  }

  /* 微脂囊 / 六胜肽：單欄，文字在上、圖片在下，置中 */
  .ft__grid,
  .ft__grid--rev {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .ft__text--left {
    justify-self: stretch;
    text-align: center;
  }
  .ft__grid--rev .ft__img {
    order: 0;
  }
  .ft__img img {
    max-width: 100%;
  }

  /* 成分卡片：每排 3 張，標題靠左 */
  .ing-grid--wrap {
    gap: var(--space-xs);
  }
  .ing-grid--wrap .ing {
    width: calc((100% - 2 * var(--space-xs)) / 3);
  }

  /* HOW TO：第 4 步（右下）以右側中心放大，不超出畫面；
     第 3 步的箭頭永遠位於第 3 步右邊界與第 4 步左邊界的正中間 */
  .steps--end {
    --s: var(--active-start-scale);
  }
  .js-steps .is-visible .steps--end {
    --s: var(--active-scale);
  }
  .steps--end .step--active .step__card {
    transform-origin: 100% 50%;
  }
  .steps--end .step:nth-child(3) .step__arrow {
    left: calc(100% + 9vw - 18vw * (var(--s) - 1));
  }
  .js-steps .is-visible .steps--end .step:nth-child(3) .step__arrow {
    transition: left 0.9s ease 1.5s; /* 與放大同步 */
  }
}

@media(max-width: 480px) {
  .about__buy .btn-outline {
    flex: none;
    padding: 0.7em 0;
    width: clamp(8.125rem, 2.7083rem + 22.2222vw, 9.375rem);
  }
  .orbit__ring {
    left: 15%;
    width: 65%;
  }
  .plant-grid {
    gap: var(--space-xs);
  }
  .plant img {
    width: min(80%, 5rem);
  }
}