/* ===========================
   クレンジングジェル（化粧品）商品詳細ページ 個別スタイル
   - 共通グルー（deco-heading・セクション余白・cosmetic変数）は
     product-detail-moist.css を共用し、本ファイルは後読みで
     クレンジング固有の帯・成分グリッド・使用方法拡張だけを持つ
   - Figma: node 875:57896（Water Life Series 4 クレンジング（メイク落とし）150g）
     cqw の構図基準幅は Figma 実測の 1046px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   - コピーの文字色は本商品のみ濃紺 #0c0060（Figma準拠）
   =========================== */

.page-product-detail--cleansing {
  --cl-navy: #0c0060;
}

/* ===========================
   1. 帯「水溶性ジェルクレンジング」（商品オリジナル実装）
   水テクスチャ背景 + 濃紺コピー(444) + モデル写真(527) 構図
   =========================== */
.cl-band {
  position: relative;
  overflow: hidden;
}

/* 背景: Figma背景(Frame 893)の淡い水テクスチャ（帯は上部の水／中央〜下クリア）＋
   左上の水ゲル塊（Figma: Frame 305）を絶対配置で重ねる */
.cl-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Figma背景(Frame 893)の「上部の水」だけを切り出したストリップ（透明な継ぎ目で分割）を帯上端に固定。
     反対側(下)は常にクリア。ストリップ高は幅なり(=width×0.377)なので、セクション高さに依存せず崩れない
     （旧: 1枚画像を 100% auto で使い、≤1100 でセクションが高くなると水がずれ「途切れ」て見えた → 是正） */
  background: url('../assets/images/products/cleansing/band-water-top.png') center top / 100% auto no-repeat;
}

/* 左上の水ゲル塊（Figma: Frame 305 / node 875:57903）。帯左端(x=0)・上部に配置 */
.cl-band__bg-splash {
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: auto;
}

/* テクスチャの上に白フェード（帯下端→次セクションへ溶かす） */
.cl-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, #ffffff 100%);
  pointer-events: none;
}

.cl-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;
}

/* 構図本体（コピー 444 ｜ ビジュアル 527、Figma 実測。基準幅 1046） */
.cl-band__stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 3.3cqw 0 0;
}

.cl-band__copy {
  flex: 0 0 42.45cqw;     /* 444 / 1046 */
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* GEL CLEANSING = 金グラデ（A1明朝の代替に Noto Serif JP） */
.cl-band__en {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 3.059cqw;    /* 32 / 1046 */
  line-height: 1.5;
  background: linear-gradient(to bottom, #dccbaa, #916c22);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 0.5cqw;
  white-space: nowrap;
}

/* 洗った後も、潤い残す。（32/24px ミックス・濃紺） */
.cl-band__sub {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 2.294cqw;    /* 24 / 1046 */
  letter-spacing: -0.05em;
  line-height: 1.5;
  color: var(--cl-navy);
  margin: 0;
  white-space: nowrap;
}

.cl-band__sub em {
  font-style: normal;
  font-size: 3.059cqw;    /* 32 / 1046 */
}

/* 水溶性ジェルクレンジング（48px・濃紺） */
.cl-band__main {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 4.589cqw;    /* 48 / 1046 */
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--cl-navy);
  margin: 0 0 2.3cqw;
  white-space: nowrap;    /* Figma: コピー枠を超えて1行で表示 */
}

.cl-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;
  color: var(--cl-navy);
}

/* ビジュアル（モデル写真 + 水しぶき + ボトル） */
.cl-band__visual {
  flex: 0 0 50.4cqw;      /* 527 / 1046 */
  position: relative;
  z-index: 1;
  align-self: flex-end;
}

/* 女性＋商品＋右側の水を1枚に統合した図版（Figma: Group 644）。列いっぱいに配置 */
.cl-band__figure {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================
   2. 美容成分（9成分グリッド・このページ独自）
   =========================== */
.cl-ing-section {
  position: relative;
  padding: 48px 0 100px;   /* 帯→美容成分の上余白を詰める（Figmaの帯直下の距離に寄せる。旧96px） */
  overflow: hidden;
}

/* 背景: 「下部の水」ストリップを成分セクション下端に固定。上へ向かうマスクフェードで
   「下部だけ水・上はクリア」をセクション幅/高さに依存せず保証（広い画面でも水が上まで回らない） */
.cl-ing-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Frame 893 背景の「下部の水」ストリップを下端基準で敷く。auto 130% でストリップの淡い上端(継ぎ目)を
     上へ逃がし、水の濃い部分でセクションを満たす（cover だと淡い上端まで入り白が優勢になっていた）。
     mask で下部を広く出し、クリアは上端＝帯との境目だけに。 */
  background: url('../assets/images/products/cleansing/band-water-bottom.png') center bottom / auto 130% no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 92%);
  mask-image: linear-gradient(to top, #000 70%, transparent 92%);
}

.cl-ing-section > .content-wrap {
  position: relative;
  z-index: 1;
}

/* 「美容成分」見出しを全ページ共通の Figma 準拠タイポに（Zen Kaku Gothic Antique
   Regular 42px / letter-spacing 0.02em）。このページは独自 .cl-ing-section なので
   共有 ingredient-grid.css（.ingredient-section スコープ）が効かず明示指定が必要。
   色は base で既に #717171 のため据え置き（Figma 一致） */
.cl-ing-section .deco-heading__ja {
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: 0.02em;
}

/* 「美容成分」見出しの区切り線を全ページ共通の長さ・色に（DESIGN.md §4）。
   このページは独自 .cl-ing-section なので共有 ingredient-grid.css が効かず、明示指定が必要 */
.cl-ing-section .deco-heading__line {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  background: #000000;
}

.cl-ing-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 43px 45px;
  padding: 0;
  margin: 0;
}

.cl-ing-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.cl-ing-item__icon {
  flex: none;
  width: 89px;
  height: 89px;
  object-fit: cover;
}

.cl-ing-item__body {
  min-width: 0;
  padding-top: 6px;
}

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

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

/* その他成分カード（Figma: 背景 rgba(253,253,253,0.8) + 枠線 3px #e3e8f0 + 角丸15px） */
.cl-other {
  margin-top: 40px;
  background: rgba(253, 253, 253, 0.8);
  border: 3px solid #e3e8f0;
  border-radius: 15px;
  padding: 23px 31px 32px;
}

.cl-other__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  line-height: 1.5;
  background: linear-gradient(to bottom, #dccbaa, #916c22);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #a8863f;
  margin: 0 0 6px;
}

.cl-other__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. ご使用方法（番号入り1枚画像・DESIGN.md §4 新方式／skinwash と同型）
   各ステップは「番号＋イラスト」を焼き込んだ1枚画像。旧方式の番号テキスト・
   共有イラストのクロップは廃止し、画像を列幅いっぱいに自然比・上揃えで表示する
   =========================== */
.page-product-detail--cleansing .howto-step__img {
  aspect-ratio: auto;   /* 共有 howto-steps.css の 681/864 を解除（画像の自然比で高さを決める） */
}

.page-product-detail--cleansing .howto-step__img img {
  height: auto;         /* 共有の height:100% を解除。width:100% は継承し列幅いっぱい */
}

.page-product-detail--cleansing .howto-step__title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.05em;
  line-height: 1.5;
  color: #4c4c4c;
  margin: 32px 0 0;
}

.page-product-detail--cleansing .howto-step__caption {
  font-size: 14px;
  letter-spacing: -0.05em;
  margin-top: 9px;
}

/* ご使用方法を上の美容成分グリッドと同じ content-wrap 全幅に合わせる。
   768px以上のみ全幅化し、SP(≤767)は component の1カラム中央寄せを維持。
   ⚠️見出し帯(pill)もセットで全幅化しないと、pill が共有既定 max-width:868px のまま
   取り残されてグリッド／美容成分見出しと左右端がズレる（DESIGN.md §4） */
@media (min-width: 768px) {
  .page-product-detail--cleansing .howto-steps { max-width: none; }
  .page-product-detail--cleansing .howto-section .deco-heading__ja--pill { max-width: none; }
}

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

/* ===========================
   レスポンシブ
   =========================== */
@media (max-width: 1100px) {
  /* 帯: 縦積みに切替 */
  .cl-band__inner {
    container-type: normal;
  }

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

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

  .cl-band__copy {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }

  .cl-band__en { font-size: 24px; margin-bottom: 6px; }
  .cl-band__sub { font-size: 20px; }
  .cl-band__sub em { font-size: 26px; }
  .cl-band__main { font-size: 36px; margin-bottom: 16px; }

  .cl-band__desc {
    font-size: 17px;
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto;
  }

  .cl-band__visual {
    flex: 0 0 auto;
    align-self: center;
    width: min(520px, 95%);   /* SP/狭幅の図版幅（左右20px残しの幅に対し95%。520px上限でタブレットは不変） */
    margin-top: 8px;
  }

  /* 縦積みの帯: 上部の水を大きめ(auto 170%)に出して水量を増やす（白はセクション境目付近だけに）。
     center top のまま高さ170%＝水がコピー〜図版付近まで高く広がる */
  .cl-band__bg { background-size: auto 170%; }

  /* 縦積み範囲は成分背景の水をほぼ全面に。
     ポイント: cover だとストリップ画像の「淡い上端(継ぎ目)」まで入り上部が白くなるので、
     background-size を auto 160% に上げてストリップの水の濃い部分でセクションを満たす（淡い上端は上に逃がす）。
     さらに mask で上端のわずかだけ（＝帯との境目）をクリアに。デスクトップ(>1100)は据え置き */
  .cl-ing-section__bg {
    background-size: auto 160%;
    -webkit-mask-image: linear-gradient(to top, #000 92%, transparent 100%);
    mask-image: linear-gradient(to top, #000 92%, transparent 100%);
  }

  /* 縦積み時は図版→美容成分タイトルの余白を詰める（帯下パディング0＝見える余白は
     このセクション上パディングのみ。48pxは縦積みだと広く感じるため半減） */
  .cl-ing-section { padding-top: 24px; }

  /* 成分: 2カラム */
  .cl-ing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

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

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

  /* 左上の水ゲル(Frame 305)は SP で左揃えのまま約1.8倍に拡大（42%→75%） */
  .cl-band__bg-splash { width: 75%; }

  .cl-band__en { font-size: 20px; }
  .cl-band__sub { font-size: 16px; }
  .cl-band__sub em { font-size: 21px; }
  .cl-band__main { font-size: 27px; }
  .cl-band__desc { font-size: 15px; }

  .cl-ing-section { padding: 32px 0 72px; }   /* SPは図版→タイトルの余白をさらに詰める（旧64px） */

  /* 見出しは SP で 30px（共通 .ingredient-section と同値）・区切り線はグリッド全幅（max-width:none・DESIGN.md §107） */
  .cl-ing-section .deco-heading__ja { font-size: 30px; }
  .cl-ing-section .deco-heading__line { max-width: none; }

  /* 帯・成分の水増量は ≤1100 ブロックに集約（SPも継承） */

  /* 成分: 1カラム */
  .cl-ing-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 420px;
    margin: 0 auto;
  }

  .cl-ing-item__icon { width: 72px; height: 72px; }
  .cl-ing-item__name { font-size: 18px; }

  .cl-other { padding: 20px 20px 24px; }
  .cl-other__title { font-size: 20px; }
}