/* ===========================
   お手入れステップ（タイムライン）コンポーネント
   朝 / 夜 の2行。各ステップの実商品写真をタイムライン上に下端揃えで並べ、
   この商品を使うステップ（保湿）を色付きカードでハイライトする。

   レイアウトは Figma 座標を % 換算した「絶対配置」方式:
   - 各行は aspect-ratio 1046/412（Figma の1行）を保ったまま幅にフィットしてスケール
   - 商品/ドット/ラベルは行に対する %（--x 中心, --w 幅）で配置
   - 商品は下端（--baseline）揃え。画像の縦横比で高さが決まる
   商品ごとに書き換えるポイント:
   1) 各 <img class="routine-product"> の --x（中心%）/ --w（幅%）と画像パス
   2) この商品を使うステップに routine-product--current を付け、
      同位置に routine-current-card（色付きカード）と routine-dot--current（大ドット）を置く
   3) ドット/ラベルは商品とは独立に --x を持つ（Figma 準拠でズレて配置される）
   =========================== */
.care-routine {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1行 = Figma の 1046×412 をアスペクト比で保持したカード。
   container-type: inline-size でラベル文字を行幅にスケールさせる */
.routine-row {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1046 / 412;
  background: #f7fafc;
  border-radius: 15px;
  overflow: hidden;
}

/* 朝 / 夜 アイコン（左上） */
.routine-row__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.routine-row__icon svg {
  width: 100%;
  height: 100%;
}

/* Figma の実アイコン（色は SVG に焼き込み済み）。位置・サイズも Figma 準拠 */
.routine-row--morning .routine-row__icon { left: 1.05%; top: 3.16%; width: 5.83%; aspect-ratio: 62 / 61; }
.routine-row--night .routine-row__icon { left: 1.63%; top: 3.4%; width: 4.75%; aspect-ratio: 50 / 52; }

/* 各商品（下端揃えで浮かべる） */
.routine-product {
  position: absolute;
  bottom: var(--baseline);
  left: var(--x);
  width: var(--w);
  height: auto;
  transform: translateX(-50%);
  object-fit: contain;
  z-index: 2;
}

/* この商品（ハイライト）は最前面 */
.routine-product--current { z-index: 3; }

/* この商品を使うステップの色付きカード（商品の背面） */
.routine-current-card {
  position: absolute;
  left: var(--x);
  top: 9.7%;
  width: var(--w);
  height: 62.9%;
  transform: translateX(-50%);
  border-radius: 10px;
  z-index: 1;
}

.routine-row--morning .routine-current-card { background: #f7edab; }
.routine-row--night .routine-current-card { background: #b9d4f3; }

/* タイムラインの横線（行いっぱい） */
.routine-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 81.2%;
  height: 2px;
  background: #717171;
  transform: translateY(-50%);
  z-index: 1;
}

/* ドット（線上） */
.routine-dot {
  position: absolute;
  left: var(--x);
  top: 81.2%;
  width: 1.24%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #717171;
  z-index: 3;
}

/* この商品を使うステップの大ドット */
.routine-dot--current {
  width: 3.35%;
}

.routine-row--morning .routine-dot--current { background: #f8dd33; }
.routine-row--night .routine-dot--current { background: #7fb1e6; }

/* ステップ名ラベル（線の下） */
.routine-label {
  position: absolute;
  left: var(--x);
  top: var(--label-top);
  transform: translateX(-50%);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;                 /* Figma: Zen Kaku Gothic New Regular */
  /* 行幅に追従（Figma 20px / 行幅1046px = 1.912cqw）。狭いときは 12px を下限に */
  font-size: max(12px, 1.912cqw);
  letter-spacing: 0.05em;           /* Figma: tracking 1px（20px 基準で 0.05em） */
  line-height: 1.5;
  color: #717171;
  white-space: nowrap;
  z-index: 3;
}

/* ===========================
   レスポンシブ
   狭い画面でも横スクロールにせず、行を親幅にフィットさせて全体を画面内に収める。
   aspect-ratio＋%配置なので、縮小しても各要素の相対配置（商品/ドット/ラベル）は崩れない。
   ラベルは基本 max(12px, 1.912cqw) だが、12px 下限のままだと行が縮んでもラベルが
   縮みきらず、端ラベルが行の overflow:hidden で見切れる／隣と詰まる。狭幅では下限を
   外して行と完全比例スケールにし、Figma 比率のまま見切れ・重なりを防ぐ。 */
@media (max-width: 900px) {
  .routine-label {
    font-size: 1.912cqw;
  }
}

/* ===========================
   STEP 見出し（お手入れステップ）
   Figma では「ご使用方法」と違い背景バーが無く、淡い英字 STEP に
   和文が下半分で重なる。共通 deco-heading を局所上書きする
   （--pill を付けないことでバー背景は出ない。他セクションには影響させない）
   =========================== */
.deco-heading--step .deco-heading__ja {
  font-size: 36px;            /* Figma: 36px */
}

.deco-heading--step .deco-heading__ja-wrap {
  margin-top: -28px;          /* 淡い英字 STEP の下端付近に和文を重ねる（Figma準拠） */
}

@media (max-width: 1100px) {
  .deco-heading--step .deco-heading__ja { font-size: 30px; }
  .deco-heading--step .deco-heading__ja-wrap { margin-top: -22px; }
}

@media (max-width: 767px) {
  .deco-heading--step .deco-heading__ja { font-size: 24px; }
  .deco-heading--step .deco-heading__ja-wrap { margin-top: -16px; }
}