/* ===========================
   UVクリーム（化粧品）商品詳細ページ 個別スタイル
   - 共通グルー（deco-heading・セクション余白・cosmetic変数）は
     product-detail-moist.css を共用し、本ファイルは後読みで
     本商品固有の帯・不使用成分バッジ・成分グリッドだけを持つ
   - Figma: node 875:72383（Water Life Series 25 UVクリーム30g）
     cqw の構図基準幅は Figma 実測の 1046px（実描画は content-wrap 実効1200px
     基準に比率スケールする）
   - お手入れステップは本商品のみ「朝」1行（UVは朝のみ・Figma準拠）
   =========================== */

.page-product-detail--uvcream {
  --uv-navy: #0e2f72;
  --uv-label: #2d4ea3;
  --uv-pill: #3b60a9;
}

/* ===========================
   1. 帯「ノンケミカルUVクリーム」（商品オリジナル実装）
   空・水面写真背景 + 商品左(444) + コピー右(557) 構図
   =========================== */
.uv-band {
  position: relative;
  overflow: hidden;
}

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

.uv-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 ｜ コピー557、gap45。基準幅 1046） */
.uv-band__stage {
  display: flex;
  align-items: flex-start;   /* テキスト先頭を画像側の上辺基準に揃える（浮き防止） */
  gap: 4.302cqw;          /* 45 / 1046 */
  width: 100%;
  padding: 4cqw 0 0;
}

/* ビジュアル（商品チューブ + クリームの質感を焼き込んだ1枚合成画像） */
.uv-band__visual {
  flex: 0 0 42.45cqw;     /* 444 / 1046 */
  aspect-ratio: 888 / 1158;   /* band-visual.png の実寸比（= 444/579 と同値） */
  min-width: 0;
  position: relative;    /* 縦積み時の太陽（.uv-band__sun--on-visual）の配置基準 */
}

.uv-band__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* コピー（濃紺 #0e2f72） */
.uv-band__copy {
  flex: 0 0 53.25cqw;     /* 557 / 1046 */
  min-width: 0;
  position: relative;
  z-index: 1;
  color: var(--uv-navy);
  /* band-visual.png は上部に透明余白が約7.94%(92/1158px)あり、object-fit:contain だと
     「箱の上辺」と「商品の見た目上辺」がずれる。その分だけコピーを下げてテキスト先頭を
     商品の見た目上辺に揃える（= visual高さ55.36cqw × 7.94%）。 */
  padding-top: 4.4cqw;
}

/* 天然由来100％の強力UV（32/48px ミックス） */
.uv-band__sub {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 3.059cqw;    /* 32 / 1046 */
  letter-spacing: -0.05em;
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
}

.uv-band__sub em {
  font-style: normal;
  font-size: 4.589cqw;    /* 48 / 1046 */
}

/* ノンケミカルUVクリーム（48px） */
.uv-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;
  margin: 0 0 2.3cqw;
  white-space: nowrap;
}

.uv-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.3cqw;
}

/* SPF50+ / PA++++ ピル */
.uv-band__pills {
  display: flex;
  gap: 0.956cqw;
}

.uv-band__pill {
  background: var(--uv-pill);
  border-radius: 10px;
  padding: 0.956cqw;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-weight: 500;
  font-size: 1.912cqw;    /* 20 / 1046 */
  line-height: 1;
  letter-spacing: -0.05em;
  color: #ffffff;
  white-space: nowrap;
}

/* 太陽のイラスト（デスクトップ=コピー右下） */
.uv-band__sun {
  display: block;
  width: 26.77cqw;        /* 280 / 1046 */
  height: auto;
  margin: 0 0 0 auto;
}

/* ビジュアル用の太陽はデスクトップでは非表示（縦積み時のみ表示） */
.uv-band__sun--on-visual {
  display: none;
}

/* 5つの不使用成分 */
.uv-free {
  /* 商品画像が縦長で stage 高さが大きく、その下の本セクションが間延びするため上へ寄せる */
  margin-top: -4cqw;
  padding: 2cqw 0 4cqw;
  text-align: center;
}

.uv-free__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 3.059cqw;    /* 32 / 1046 */
  letter-spacing: -0.05em;
  line-height: 1.5;
  color: var(--uv-navy);
  margin: 0 0 0.8cqw;
}

.uv-free__grid {
  list-style: none;
  display: flex;
  gap: 1.53cqw;           /* 16 / 1046 */
  justify-content: center;
  padding: 0;
  margin: 0;
}

.uv-free__badge {
  position: relative;
  width: 12.49cqw;        /* 130.6 / 1046 */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uv-free__badge-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.uv-free__badge-label {
  position: relative;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 2.006cqw;    /* 21 / 1046 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--uv-label);
  text-align: center;
  white-space: nowrap;
}

.uv-free__badge-label--sm { font-size: 1.536cqw; }   /* 16 / 1046 */
.uv-free__badge-label--md { font-size: 1.645cqw; }   /* 17.2 / 1046 */

/* ===========================
   2. 美容成分（8項目グリッド・白背景）
   =========================== */
.uv-ing-section {
  background: #ffffff;
  padding: 96px 0 100px;
}

/* 「美容成分」見出しは Figma 準拠に上書き（独自セクションクラスは共有 .ingredient-section
   スコープが効かないため。DESIGN.md §4）: Zen Kaku Gothic Antique 42px #717171、
   区切り線は左右 340px / #000000 に揃える */
.uv-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;
}

.uv-ing-section .deco-heading__line {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  background: #000000;
}

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

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

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

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

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

.uv-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: 淡い水色塗り #edf9fd・枠線なし・角丸15px） */
.uv-list {
  margin-top: 40px;
  background: #edf9fd;
  border-radius: 15px;
  padding: 31px 42px 44px;
}

.uv-list__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 32px;
  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;
}

.uv-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. ご使用方法（Figma: 水面テクスチャ背景をフルワイドで敷き、白半透明カードを重ねる）
   =========================== */
.uv-howto-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0 96px;
  background: #ffffff;
}

/* 水面テクスチャ（全幅・Figma準拠でフェードなし） */
.uv-howto-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/images/products/uvcream/water-bg.png') center / cover no-repeat;
}

.page-product-detail--uvcream .uv-howto-section > .content-wrap {
  position: relative;
  z-index: 1;
}

.uv-howto-card {
  position: relative;
  /* Figma準拠: 半透明の白（rgba 255,255,255,0.9）。ステップ画像は背景透過なので
     箱状の白は出ず、透明部分はこのカードの白がうっすら見える */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #eef2f6;
  border-radius: 15px;
  padding: 40px 71px 40px 72px;
  box-shadow: 0 2px 14px rgba(14, 47, 114, 0.05);
}

.page-product-detail--uvcream .uv-howto-card .deco-heading {
  margin-bottom: 30px;
}

/* ステップ間の右向き矢印。
   ★配置基準を「画像ボックス（.howto-step__img）」にする＝キャプションの行数に
   依らず常に画像の縦中心（top:50%）に来る。横は画像右端(100%)＋列間ギャップの
   半分でギャップ中央、translate(-50%,-50%) で矢印自身の中心をその点へ合わせる。
   （番号は公式イラスト画像に焼き込み済み・DESIGN.md §4） */
.page-product-detail--uvcream .uv-howto-step--arrow .howto-step__img {
  position: relative;
  overflow: visible;   /* 共有の overflow:hidden を解除して矢印を隣へはみ出させる */
}

.uv-howto-step--arrow .howto-step__img::after {
  content: '';
  position: absolute;
  top: 50%;                  /* 画像の縦中心 */
  left: calc(100% + 45px);   /* 画像右端 + 列間ギャップ(90px)の半分 = ギャップ中央 */
  width: 33px;
  height: 29px;
  background: url('../assets/images/products/uvcream/howto-arrow.svg') center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ===========================
   4. お手入れステップ（Figma: 背景は白。タイムラインの薄い水色カードは
      care-routine コンポーネントの .routine-row #f7fafc が描画）
   =========================== */
.page-product-detail--uvcream .routine-row__icon img {
  display: block;
  width: 100%;
  height: auto;
}

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

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

  .uv-band__stage {
    flex-direction: column-reverse;   /* 縦積みではコピー→商品の順 */
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  .uv-band__copy {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0;   /* 縦積みでは desktop の上辺揃えオフセットは不要 */
  }

  .uv-band__sub { font-size: 24px; }
  .uv-band__sub em { font-size: 34px; }
  .uv-band__main { font-size: 34px; margin-bottom: 14px; }

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

  .uv-band__pills { gap: 8px; }
  .uv-band__pill { font-size: 17px; padding: 9px; }

  /* 縦積み: コピー内の太陽は隠し、ビジュアル（商品画像）の右下へ小さく重ねる */
  .uv-band__sun--in-copy { display: none; }
  .uv-band__sun--on-visual {
    display: block;
    position: absolute;
    right: -3%;
    bottom: 4%;
    width: 33%;          /* ビジュアル幅基準で小さく */
    height: auto;
    margin: 0;
    z-index: 3;
  }

  /* 縦積み時の帯ビジュアル（お試し: 80%）。商品チューブ＋泡の合成ボックスなので
     上限 460px で desktop の描画幅と連続させる */
  .uv-band__visual {
    flex: 0 0 auto;
    width: min(460px, 80%);
    margin-top: 8px;
  }

  .uv-free { margin-top: 0; padding: 24px 0 40px; }   /* 縦積みでは desktop の上寄せは不要 */
  .uv-free__title { font-size: 24px; margin-bottom: 12px; }
  .uv-free__grid { flex-wrap: wrap; gap: 12px; }
  .uv-free__badge { width: 118px; }
  .uv-free__badge-label { font-size: 17px; }
  .uv-free__badge-label--sm { font-size: 13px; }
  .uv-free__badge-label--md { font-size: 14px; }

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

  .uv-howto-card { padding: 32px 32px 40px; }

  /* タブレット（3列は維持）: gap 56px の中央へ矢印を寄せ直す */
  .uv-howto-step--arrow .howto-step__img::after { left: calc(100% + 28px); }
}

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

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

  .uv-band__sub { font-size: 19px; }
  .uv-band__sub em { font-size: 27px; }
  .uv-band__main { font-size: 25px; }
  .uv-band__desc { font-size: 15px; }
  .uv-band__pill { font-size: 15px; }

  .uv-free__badge { width: 100px; }
  .uv-free__badge-label { font-size: 15px; }
  .uv-free__badge-label--sm { font-size: 11px; }
  .uv-free__badge-label--md { font-size: 12px; }

  .uv-ing-section { padding: 64px 0 72px; }
  .uv-ing-section .deco-heading__ja { font-size: 30px; }
  .uv-ing-section .deco-heading__line { max-width: none; }

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

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

  .uv-list { padding: 22px 20px 26px; }
  .uv-list__title { font-size: 24px; }

  .uv-howto-section { padding-bottom: 64px; }
  .uv-howto-card { padding: 24px 16px 32px; }

  /* 1カラム縦積みでは列間矢印は不要 */
  .uv-howto-step--arrow .howto-step__img::after { display: none; }
}