/* ===========================
   グレイスクリーム（化粧品）商品詳細ページ 個別スタイル
   - 共通グルー（deco-heading・セクション余白・cosmetic変数）は
     product-detail-moist.css を共用し、本ファイルは後読みで
     本商品固有の帯・成分カード・ラベンダーテーマ上書きだけを持つ
   - Figma: node 875:71674（Water Life Series 22 グレイスクリーム50g）
     cqw の構図基準幅は Figma 実測の 1046px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   - 成分カードは energy（ekisu-card）と同型のカードレイアウト（gc- で複製）
   =========================== */

.page-product-detail--gracecream {
  --gc-lavender: #e9e2f4;
  --gold-from: #dccbaa;
  --gold-to: #916c22;
}

/* 見出し英字とピルをラベンダー系に上書き */
.page-product-detail--gracecream .deco-heading__en { color: var(--gc-lavender); }
.page-product-detail--gracecream .deco-heading__ja--pill { background: rgba(233, 226, 244, 0.5); }

/* 「ご使用方法」「お手入れステップ」見出しを Figma 準拠 36px に（共有 .deco-heading__ja は
   30px で小さい。Zen Kaku Gothic New Medium・字間はそのまま）。
   ※「美容成分」だけは 42px の Zen Kaku Gothic Antique で別途上書き（.gc-ing-section 参照） */
.page-product-detail--gracecream .howto-section .deco-heading__ja,
.page-product-detail--gracecream .routine-section .deco-heading__ja { font-size: 36px; }
.page-product-detail--gracecream .howto-section .deco-heading__ja { color: #717171; }  /* Figma: ご使用方法は #717171 */

/* ===========================
   1. 帯「朝夜のエイジングケアに」（商品オリジナル実装）
   ラベンダー写真背景 + コピー(534) + モデル写真(504) 構図
   =========================== */
.gc-band {
  position: relative;
  overflow: hidden;
}

.gc-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/images/products/gracecream/band-bg.png') center / cover no-repeat;
}

/* 帯下端の白フェード＝Figma Rectangle 70（node 875:71677）。
   白 #fdfdfd を帯下端に、上へ透明。下の成分セクション上端(#fdfdfd)と同色で境目を無くす */
.gc-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(253, 253, 253, 0) 60%, #fdfdfd 100%);
}

.gc-band__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  container-type: inline-size;
}

/* 構図本体（コピー534 ｜ ビジュアル512。基準幅 1046） */
.gc-band__stage {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 3.6cqw 0 0;
}

.gc-band__copy {
  flex: 0 0 51.05cqw;     /* 534 / 1046 */
  min-width: 0;
  position: relative;
  z-index: 2;
  color: #4c4c4c;
}

/* 見出し: 朝/夜（サークル付き 48px）+ のエイジングケアに（36/48px） */
.gc-band__title {
  display: flex;
  align-items: center;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  color: #4c4c4c;
  margin: 0 0 2.3cqw;
  white-space: nowrap;
}

.gc-band__title-circle {
  position: relative;
  width: 7.362cqw;        /* 77 / 1046 */
  aspect-ratio: 77 / 73;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url('../assets/images/products/gracecream/band-title-circle.svg') center / contain no-repeat;
  font-size: 4.589cqw;    /* 48 / 1046 */
  flex: none;
}

.gc-band__title-circle--night {
  margin-left: -1.434cqw; /* Figma: 円同士が15px重なる */
}

.gc-band__title-rest {
  font-size: 4.589cqw;    /* 48 / 1046 */
  letter-spacing: -0.05em;
  margin-left: 0.5cqw;
}

.gc-band__title-rest i {
  font-style: normal;
  font-size: 3.442cqw;    /* 36 / 1046 */
}

.gc-band__desc {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 1.912cqw;    /* 20 / 1046 */
  line-height: 1.5;
  letter-spacing: -0.05em;
  margin: 0 0 2.87cqw;    /* 30 / 1046 */
}

/* 天然由来成分ほぼ100% + 成分ピル（枠線SVGで囲む） */
.gc-natural {
  position: relative;
  width: 45.12cqw;        /* 472 / 1046 */
}

.gc-natural__label {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 1.912cqw;    /* 20 / 1046 */
  letter-spacing: -0.05em;
  line-height: 1.5;
  text-align: center;     /* Figma: 枠の上辺中央にラベルが乗る */
  margin: 0 0 0.4cqw;
}

.gc-natural__sm { font-size: 1.339cqw; }   /* 14 / 1046 */
.gc-natural__lg { font-size: 2.868cqw; }   /* 30 / 1046 */
.gc-natural__pct { font-size: 1.912cqw; }  /* 20 / 1046 */

/* 枠は SVG（preserveAspectRatio:none）を top(=ラベル中央)〜bottom:0 でストレッチし、
   中身（ラベル＋2チップ）の高さにぴったりフィットさせる。
   （旧: width:100%;height:auto は置換要素の既定150pxに解決され、中身より縦に大きく
   はみ出して下の画像に被っていた） */
.gc-natural__frame {
  position: absolute;
  left: 0;
  top: 2.39cqw;                    /* 25 / 1046（ラベルの縦中央に上辺が来る位置） */
  width: 100%;
  height: calc(100% - 2.39cqw);    /* 上辺オフセット分を引いて natural 下端に一致＝中身にフィット */
  pointer-events: none;
}

.gc-natural__pills {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.956cqw;          /* 10 / 1046 */
  padding: 2.2cqw 0 1.4cqw;
}

.gc-natural__pill {
  background: var(--gc-lavender);
  border-radius: 80px;
  padding: 0.956cqw 2.868cqw;   /* 10 30 / 1046 */
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 1.53cqw;     /* 16 / 1046 */
  letter-spacing: -0.05em;
  color: #4c4c4c;
  white-space: nowrap;
}

.gc-natural__plus {
  width: 2.299cqw;        /* 24 / 1046 */
  height: auto;
  flex: none;
}

/* ビジュアル＝女性画像／白フェード／商品ボトルの3層で1グループ（Figma visual グループ 512×503）。
   aspect-ratio で箱を確定し、子は % 配置でグループごと拡縮＝SPの左右余白等でも崩れない */
.gc-band__visual {
  flex: 0 0 48.95cqw;     /* 512 / 1046（Figma の visual グループ幅） */
  position: relative;
  z-index: 1;
  align-self: flex-end;
  aspect-ratio: 512 / 503;
}

/* ①女性画像（最下層・フェード無し） */
.gc-band__model {
  position: absolute;
  left: 0;
  top: 0;
  width: 98.44%;          /* 504 / 512 */
  height: auto;
  z-index: 1;
}

/* ②白フェードは女性画像（band-model.png）に焼き込み済み＝なめらかに白へ溶ける・左端に白線が出ない。
   商品ボトルはその上（最前面）に置くのでフェードに覆われず見える。 */

/* ③商品ボトル（最前面＝白フェードに覆われず見える） */
.gc-band__bottle {
  position: absolute;
  right: 0;               /* Figma: ボトル右端＝グループ右端 */
  bottom: 3.4%;           /* (503-486)/503 */
  width: 16%;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(8, 0, 23, 0.25));
}

/* ===========================
   2. 美容成分（3カード・energy 型）
   =========================== */
/* 成分セクション背景＝Figma Rectangle 71（node 875:71675）そのまま。
   上端 #fdfdfd（帯下端の白フェードと同色）→ 30% でラベンダー → 下端 #e3def3 */
.gc-ing-section {
  background: linear-gradient(to bottom, #fdfdfd 0%, rgba(227, 222, 243, 0.7) 30%, #e3def3 100%);
  padding: 96px 0 100px;
}

/* 美容成分（INGREDIENTS）見出しの区切り線は全商品共通で長く・濃く（DESIGN.md §4）。
   .gc-ing-section 独自クラスのため共有 .ingredient-section の上書きが効かず、ここで再宣言 */
.gc-ing-section .deco-heading__line { flex: 1 1 0; width: auto; max-width: none; min-width: 0; background: #000000; }

/* 「美容成分」見出しを Figma 準拠タイポに（Zen Kaku Gothic Antique Regular 42px / #717171）。
   共有 .deco-heading__ja は Zen Kaku Gothic New Medium 30px で小さいため gc-ing-section で上書き
   （全ページ共通の是正。cleansing 等と同値） */
.gc-ing-section .deco-heading__ja {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 42px;
  color: #717171;
  letter-spacing: 0.02em;
}

.gc-ing-grid {
  display: flex;
  gap: 21px;
  align-items: stretch;
}

.gc-ing-card {
  position: relative;
  flex: 1 1 0;
  background: rgba(253, 253, 253, 0.8);
  border-radius: 15px;
  padding: 68px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 成分番号 01/02/03 は金グラデ+斜線を焼き込んだ SVG 画像で表示（DESIGN.md §5・モイストと同一実装） */
.gc-ing-card__num-img {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 69px;
  height: auto;
  user-select: none;
}

.gc-ing-card__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.5;
  background: linear-gradient(to bottom, var(--gold-from), var(--gold-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}

.gc-ing-card__circle {
  width: 202px;
  height: 202px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 17px;
}

.gc-ing-card__copy {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #4c4c4c;
  margin: 30px 0 0;
}

.gc-ing-card__list {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 24px 0 0;
  word-break: break-word;
}

/* 成分一覧（Figma: 半透明白カード＋角丸。タイトル中央・本文左寄せ） */
.gc-list {
  margin-top: 35px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 31px 42px 44px;
}

.gc-list__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  line-height: 1.5;
  background: linear-gradient(to bottom, var(--gold-from), var(--gold-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #a8863f;
  margin: 0 0 8px;
}

.gc-list__text {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 0;
  word-break: break-word;
}

/* ===========================
   3. ご使用方法（番号は公式イラストに焼き込み済み＝DESIGN.md §4。
      ステップ間の右向き矢印だけ拡張する）
   =========================== */
/* 矢印を画像の高さ中央に出すため、矢印付きステップの画像枠を基準にする */
.page-product-detail--gracecream .gc-howto-step--arrow .howto-step__img {
  position: relative;
  overflow: visible;   /* 矢印を列間ギャップへはみ出させる（画像は contain なので溢れない） */
}

/* 列間ギャップを Figma の列幅(≒248px)に合わせて詰める（共有は gap:90px で列が狭く
   キャプションが不自然に折返すため）。ピル(見出し帯)と幅を揃えるため max-width は 868px のまま */
@media (min-width: 1101px) {
  .page-product-detail--gracecream .howto-steps { gap: 60px; }
}

/* ステップ間の右向き矢印（Figma: Polygon・画像の高さ中央） */
.page-product-detail--gracecream .gc-howto-step--arrow .howto-step__img::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -46px;          /* 列間ギャップ60px の中央に配置 */
  width: 33px;
  height: 29px;
  background: url('../assets/images/products/gracecream/howto-arrow.svg') center / contain no-repeat;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

/* この商品はコピーの字詰めが詰まっているため、キャプションも詰めて折返しをFigmaに合わせる */
.page-product-detail--gracecream .howto-step__caption {
  letter-spacing: -0.05em;
}

/* ===========================
   4. お手入れステップ: アイコンを img で供給
   =========================== */
.page-product-detail--gracecream .routine-row__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 1100px) {
  .gc-band__inner {
    container-type: normal;
  }

  /* 縦積みは白フェードを上へ長く薄く伸ばし、天然由来成分のチップ背景まで白を届かせる
     （チップの薄紫が紫の帯背景に同化して見えなくなるのを防ぐ）。デスクトップは対象外 */
  .gc-band__bg::after {
    background: linear-gradient(to bottom, rgba(253, 253, 253, 0) 12%, #fdfdfd 60%);
  }

  .gc-band {
    padding: 56px 0 0;
  }

  .gc-band__stage {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  .gc-band__copy {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .gc-band__title-circle {
    width: 56px;
    font-size: 34px;
  }

  .gc-band__title-circle--night { margin-left: -10px; }

  .gc-band__title-rest { font-size: 34px; }
  .gc-band__title-rest i { font-size: 26px; }

  .gc-band__desc {
    font-size: 17px;
    line-height: 1.75;
    max-width: 620px;
    margin-bottom: 20px;
  }

  .gc-natural { width: min(472px, 100%); }
  .gc-natural__label { font-size: 16px; }
  .gc-natural__sm { font-size: 12px; }
  .gc-natural__lg { font-size: 24px; }
  .gc-natural__pct { font-size: 16px; }
  .gc-natural__frame { top: 20px; height: calc(100% - 20px); }
  .gc-natural__pills { gap: 8px; padding: 18px 0 10px; }
  .gc-natural__pill { font-size: 14px; padding: 8px 22px; }
  .gc-natural__plus { width: 20px; }

  .gc-band__visual {
    flex: 0 0 auto;
    width: min(600px, 90%);   /* DESIGN.md: 縦積み帯ビジュアルは左右20px残しの90%基本 */
    margin-top: 12px;
    align-self: center;       /* 縦積みでは中央寄せ（base の flex-end=右寄せを解除） */
  }

  /* 成分カード: 縦積み */
  .gc-ing-grid {
    flex-direction: column;
    align-items: center;
  }

  .gc-ing-card {
    width: 100%;
    max-width: 480px;
    flex: 0 0 auto;
  }

  /* 列間が詰まる 1100px 以下では横向き矢印を非表示 */
  .page-product-detail--gracecream .gc-howto-step--arrow .howto-step__img::after { display: none; }
}

@media (max-width: 767px) {
  .gc-band { padding-top: 40px; }

  /* SP は content-wrap と同じ左右20px */
  .gc-band__inner { padding: 0 20px; }

  .gc-band__title-circle { width: 44px; font-size: 26px; }
  .gc-band__title-rest { font-size: 26px; }
  .gc-band__title-rest i { font-size: 20px; }
  .gc-band__desc { font-size: 15px; }

  .gc-ing-section { padding: 64px 0 72px; }
  .gc-ing-section .deco-heading__line { max-width: none; }
  .gc-ing-section .deco-heading__ja { font-size: 30px; }
  /* SP は 3見出しとも一段縮小（美容成分=30px / ご使用方法・お手入れステップ=26px） */
  .page-product-detail--gracecream .howto-section .deco-heading__ja,
  .page-product-detail--gracecream .routine-section .deco-heading__ja { font-size: 26px; }

  .gc-ing-card__title { font-size: 30px; }
  .gc-ing-card__circle { width: 170px; height: 170px; }
  .gc-ing-card__copy { font-size: 18px; }

  .gc-list { padding: 20px 20px 24px; }
  .gc-list__title { font-size: 24px; }
}