/* ==========================================================================
   84-v4-stitch.css — みるとべ v4 Google Stitch レイヤー (2026-10-14)
   生成元: _core/tools/design/stitch_bridge.py (.stitch/DESIGN.md 準拠)
   切替  : 定数 MTB_STITCH (既定 false) または ?mtb_stitch=1|a|b|c (0 で無効)
   規律  :
     - すべての選択子は `body.mt-v4.mt-stitch` で始める(OFF 時は読み込まれず 0 byte 影響)。
     - すべての CSS 変数に出どころコメントを付与(design_check.py #10 準拠)。
     - 追加 JS 0KB: CSS scroll-timeline / view() と position: sticky のみで軽量演出を構成し、
       @media (prefers-reduced-motion: reduce) で全アニメーションを即時無効化する。
   ========================================================================== */

body.mt-v4.mt-stitch {
  --stitch-bar-h: 3px;                 /* Stitch Story Review: 記事上端の読了プログレスバーの高さ(視覚邪魔にならない最小厚) */
  --stitch-sticky-top: 20px;           /* Stitch Story Review: PC 記事右カラム sticky 追従の上端余白(DADS 余白段) */
  --stitch-accent-bar: 4px;            /* Stitch DESIGN.md §5: 見出し・カードの非対称左アクセント幅 */
  --stitch-surface-soft: #EBF3F8;      /* Stitch DESIGN.md §2: --surface(#DDEBF3)と白(#FFFFFF)の中間潮色(コントラスト 13.5:1) */
  --stitch-border-strong: #9BBECF;     /* Stitch DESIGN.md §2: 潮色カードの外枠線(--line-chip #B5CEDD を引き締めた境界) */
  --stitch-shadow-elev: 0 10px 26px rgba(14, 36, 51, 0.11); /* Stitch DESIGN.md §4: 特集・注目カードの浮き上がり影 */
}

/* ---- 1. 0KB CSS 軽量スクローリーテリング共通層 (Story Review) ---- */
body.mt-v4.mt-stitch .rail--hero,
body.mt-v4.mt-stitch .rail--sale {
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
body.mt-v4.mt-stitch .rail--hero > .hs,
body.mt-v4.mt-stitch .rail--sale > .sc {
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  body.mt-v4.mt-stitch.pg-post .as-stick {
    position: sticky;
    top: var(--stitch-sticky-top);
  }
}

body.mt-v4.mt-stitch .hdr__h1 {
  display: contents;
}

@keyframes mtStitchProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes mtStitchReveal {
  from { transform: translateY(6px); }
  to { transform: translateY(0); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.mt-v4.mt-stitch.pg-post .hdr {
      position: relative;
    }
    body.mt-v4.mt-stitch.pg-post .hdr::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: var(--stitch-bar-h);
      background-color: var(--accent);
      transform-origin: 0 50%;
      animation: mtStitchProgress linear both;
      animation-timeline: scroll(root block);
      z-index: 40;
      pointer-events: none;
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.mt-v4.mt-stitch .hg__plan,
    body.mt-v4.mt-stitch .dest,
    body.mt-v4.mt-stitch .arel {
      animation: mtStitchReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }
}

/* ---- 2. Variant A (REFINE: Editorial Compact — 高密度インデックス型) ---- */
body.mt-v4.mt-stitch.mt-stitch--a .sh {
  border-top: 2px solid var(--ink);
  padding-top: 10px;
}
body.mt-v4.mt-stitch.mt-stitch--a .sc {
  border: 1px solid var(--rule-on-surface);
  box-shadow: var(--stitch-shadow-elev);
}
body.mt-v4.mt-stitch.mt-stitch--a .sc__price,
body.mt-v4.mt-stitch.mt-stitch--a .sr__price,
body.mt-v4.mt-stitch.mt-stitch--a .rk__n {
  font-variant-numeric: tabular-nums;
}
body.mt-v4.mt-stitch.mt-stitch--a .toc {
  border-left: var(--stitch-accent-bar) solid var(--accent);
  background-color: var(--stitch-surface-soft);
}
body.mt-v4.mt-stitch.mt-stitch--a .post .entry-content h2 {
  border-left: var(--stitch-accent-bar) solid var(--accent);
  padding-left: 12px;
}
body.mt-v4.mt-stitch.mt-stitch--a .as-sale {
  border: 2px solid var(--ink);
}

/* ---- 3. Variant B (EXPLORE [推奨]: Asymmetric Portal — 非対称ポータル＆比較強化型) ---- */
body.mt-v4.mt-stitch.mt-stitch--b .hs__card {
  border-left: var(--stitch-accent-bar) solid var(--coral);
  box-shadow: var(--stitch-shadow-elev);
}
body.mt-v4.mt-stitch.mt-stitch--b .sale {
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--rule-on-surface);
}
body.mt-v4.mt-stitch.mt-stitch--b .sc {
  border: 1px solid var(--stitch-border-strong);
  box-shadow: var(--stitch-shadow-elev);
}
body.mt-v4.mt-stitch.mt-stitch--b .sc__price,
body.mt-v4.mt-stitch.mt-stitch--b .sr__price {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
body.mt-v4.mt-stitch.mt-stitch--b .sh {
  border-bottom: 2px solid var(--rule);
  padding-bottom: 8px;
}
body.mt-v4.mt-stitch.mt-stitch--b .rklist {
  background-color: var(--stitch-surface-soft);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-on-surface);
}
body.mt-v4.mt-stitch.mt-stitch--b .toc {
  background-color: var(--stitch-surface-soft);
  border: 1px solid var(--stitch-border-strong);
  border-top: 3px solid var(--accent);
}
body.mt-v4.mt-stitch.mt-stitch--b .post .entry-content h2 {
  background-color: var(--stitch-surface-soft);
  border-left: var(--stitch-accent-bar) solid var(--accent);
  padding: 10px 14px;
}
body.mt-v4.mt-stitch.mt-stitch--b .as-sale {
  border: 2px solid var(--accent);
  box-shadow: var(--stitch-shadow-elev);
}
body.mt-v4.mt-stitch.mt-stitch--b .sg--now .sr--big {
  border: 2px solid var(--accent);
  box-shadow: var(--stitch-shadow-elev);
}

/* ---- 4. Variant C (REIMAGINE: Visual Magazine & Utility — 特集マガジン＆実用ボード型) ---- */
body.mt-v4.mt-stitch.mt-stitch--c .hs__card,
body.mt-v4.mt-stitch.mt-stitch--c .ch__card {
  border-top: 3px solid var(--accent);
  box-shadow: var(--stitch-shadow-elev);
}
@media (min-width: 900px) {
  body.mt-v4.mt-stitch.mt-stitch--c .newg > .nc:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 18px;
    align-items: center;
    background-color: var(--stitch-surface-soft);
    padding: 14px;
    border: 1px solid var(--rule-on-surface);
  }
}
body.mt-v4.mt-stitch.mt-stitch--c .sg__h {
  background-color: var(--surface);
  border-left: var(--stitch-accent-bar) solid var(--ink);
  padding: 8px 12px;
}
body.mt-v4.mt-stitch.mt-stitch--c .fx {
  background-color: var(--stitch-surface-soft);
  border-top: 3px solid var(--ink);
}
body.mt-v4.mt-stitch.mt-stitch--c .post .entry-content h2 {
  border-bottom: 2px solid var(--ink);
  border-left: var(--stitch-accent-bar) solid var(--coral);
  padding-left: 12px;
}

/* ---- 5.超広幅(>1440px)の中央1280px固定保証 & Reduced-Motion 完全無効化 ---- */
@media (min-width: 1441px) {
  body.mt-v4.mt-stitch {
    --gut: max(80px, calc(50vw - 640px)); /* S4-10: 1920px 等の超広幅でも中身は 1280px 中央寄せを維持 */
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mt-v4.mt-stitch,
  body.mt-v4.mt-stitch *,
  body.mt-v4.mt-stitch *::before,
  body.mt-v4.mt-stitch *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body.mt-v4.mt-stitch.pg-post .hdr::after,
  body.mt-v4.mt-stitch .hg__plan,
  body.mt-v4.mt-stitch .dest,
  body.mt-v4.mt-stitch .arel {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}