/* ==========================================================
   lp-preserve-v2.css — トップページ Preserve ゾーン V2 (LOCKED)

   対象: .zone-divider / #guide / #examples / #manner / #guides

   ルール:
   - 本ファイルは index.html(トップページ)のみが読み込む。
     下層16ページは css/style.css のみを読み込むため影響を受けない。
   - 全セレクタを `main.lp-v2-main` 配下の対象4セクション(および
     `.zone-divider`)にスコープする。Header / Hero / Builder / Preview /
     Steps / Benefits / FAQ / Footer へは波及させない。
   - 共有ルール(`.container` の基底定義、`.example-card` /
     `.related-links a` / `.checklist` を含む複合ルール)は書き換えず、
     本ファイル側の詳細度で打ち消す。
   - 本フェーズは visual integration のみ。文言・見出しレベル・順序・
     ID・アンカー・リンク先・構造化データには一切触れない。

   仕様の正: docs/design/PRESERVE_ZONE_V2_AUTHORITY_DEFINITION_LOCKED_2026-08-16.md
   ビジュアル authority:
     reference/preserve-zone/preserve-zone-v2-desktop-1440-LOCKED.png
     reference/preserve-zone/preserve-zone-v2-mobile-375-LOCKED.png
   ========================================================== */

/* ==========================================================
   1. 背景リズム
   Benefits(#fffdfc→#fff7f4) から FAQ(#fffdfc) までを
   V2 のウォームニュートラル2色で連続させる。
   ハードな地色リセットを作らない。
   ========================================================== */
main.lp-v2-main #guide,
main.lp-v2-main #manner {
  background: var(--v2l-bg);
}
main.lp-v2-main #examples,
main.lp-v2-main #guides {
  background: var(--v2l-bg-warm);
}

/* ==========================================================
   2. セクション見出し
   文言・セマンティックレベルは不変。提示のみ V2 の
   「中央揃え + 両脇の肉球(コーラル)」へ揃える。
   本文・小見出し(h3)は長文可読性のため左揃えのまま。
   ========================================================== */
main.lp-v2-main #guide > .container > h2,
main.lp-v2-main #examples > .container > h2,
main.lp-v2-main #manner > .container > h2,
main.lp-v2-main #guides > .container > h2 {
  text-align: center;
}
/* 肉球モチーフ — カラー絵文字は使わない。
   OS/ブラウザ依存の絵文字フォントでは色も字形も一定しないため
   (当環境では青系の絵文字として描画され、LOCKED master の
   単色コーラルと一致しない)、Header で既に使用している V2 の
   肉球 SVG と**同一の path データ**を CSS mask として適用し、
   塗りを `--lp-coral` に固定する。DOM は変更しない。

   出典: index.html の `.lp-paw-logo` / `.lp-paw-cta`
         (viewBox 0 0 24 24 / 楕円4 + 肉球パッド1 / fill: var(--lp-coral))

   サイズ: LOCKED Desktop master の paw ink 実測 20×20px @ h2 24px。
   本 SVG のインクは viewBox 上 x3.2–22.0 / y3.2–20.7 なので、
   ink 幅 20px には viewport 25.5px = 1.0625em が対応する。 */
main.lp-v2-main #guide > .container > h2::before,
main.lp-v2-main #examples > .container > h2::before,
main.lp-v2-main #manner > .container > h2::before,
main.lp-v2-main #guides > .container > h2::before,
main.lp-v2-main #guide > .container > h2::after,
main.lp-v2-main #examples > .container > h2::after,
main.lp-v2-main #manner > .container > h2::after,
main.lp-v2-main #guides > .container > h2::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.125em;             /* master の paw 中心はテキストのインク中心より約1px上 */
  font-size: 1em;            /* style.css の 0.9em を打ち消し em を確定させる */
  width: 1.0625em;
  height: 1.0625em;
  margin: 0 12px;            /* master 実測の左右間隔 約15px に合わせる */
  background-color: var(--lp-coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.2' rx='2.4' ry='3'/%3E%3Cellipse cx='10.2' cy='6.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='15.3' cy='6.6' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.6' cy='9.6' rx='2.4' ry='3'/%3E%3Cpath d='M12.4 11.6c3.4 0 6.2 2.7 6.2 5.5 0 2.2-1.8 3.6-4 3.6-1 0-1.6-.2-2.2-.2s-1.2.2-2.2.2c-2.2 0-4-1.4-4-3.6 0-2.8 2.8-5.5 6.2-5.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* mask 未対応環境ではコーラルの四角が出てしまうため、その場合は描画しない
   (絵文字へフォールバックさせない)。 */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  main.lp-v2-main #guide > .container > h2::before,
  main.lp-v2-main #examples > .container > h2::before,
  main.lp-v2-main #manner > .container > h2::before,
  main.lp-v2-main #guides > .container > h2::before,
  main.lp-v2-main #guide > .container > h2::after,
  main.lp-v2-main #examples > .container > h2::after,
  main.lp-v2-main #manner > .container > h2::after,
  main.lp-v2-main #guides > .container > h2::after {
    display: none;
  }
}

/* ==========================================================
   3. カード面 — V2 のカード言語へ統一
   Steps / Benefits / FAQ と同じ 枠・角丸・面・影 を使う。
   DOM・並び順・件数・文言は現行のまま。
   ========================================================== */
main.lp-v2-main #examples .example-card,
main.lp-v2-main #guides .related-links a,
main.lp-v2-main #manner .checklist {
  border: 1px solid var(--v2l-border);
  border-radius: var(--v2l-radius);
  background: var(--v2l-surface);
  box-shadow: var(--v2l-shadow);
}

/* ==========================================================
   4. ゾーン区切り (.zone-divider)
   文言・リンク・CTA は追加しない。線のみ V2 のヘアラインへ。
   max-width は V2 の 1180px シェル + 左右 16px の内側余白。
   ========================================================== */
main.lp-v2-main > .zone-divider {
  width: 100%;
  max-width: 1212px;   /* 1180px シェル + padding 0 16px */
  justify-self: center;
}
main.lp-v2-main > .zone-divider::before,
main.lp-v2-main > .zone-divider::after {
  background: var(--v2l-border);
}

/* ==========================================================
   5. デスクトップ (>=1320px) — 1180px の V2 シェル
   本文の可読幅(996px)は現行のままシェル内に中央配置される。
   シェルの左右端はごく淡いヘアラインで示し、Preserve ゾーンが
   下部 V2 セクションと同じレイアウト系に属することを示す。
   既存ブレークポイント (lp-builder-v2.css と同じ 1320px) を再利用し、
   本フェーズのために新しい breakpoint 体系は作らない。
   ========================================================== */
@media screen and (min-width: 1320px) {
  main.lp-v2-main > .zone-divider {
    gap: 38px;
  }
  main.lp-v2-main #guide,
  main.lp-v2-main #examples,
  main.lp-v2-main #manner,
  main.lp-v2-main #guides {
    position: relative;
  }
  main.lp-v2-main #guide::before,
  main.lp-v2-main #examples::before,
  main.lp-v2-main #manner::before,
  main.lp-v2-main #guides::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 590px);
    width: 1180px;
    box-sizing: border-box;
    /* master 実測値: 側辺は極薄 (#f3e3de α0.15)、
       セクション境界の横罫は濃いめ (#f3e3de α0.7)。 */
    border-left: 1px solid rgba(243, 227, 222, 0.15);
    border-right: 1px solid rgba(243, 227, 222, 0.15);
    border-top: 1px solid rgba(243, 227, 222, 0.7);
    pointer-events: none;
  }
  /* 本文は擬似要素より前面に置く */
  main.lp-v2-main #guide > .container,
  main.lp-v2-main #examples > .container,
  main.lp-v2-main #manner > .container,
  main.lp-v2-main #guides > .container {
    position: relative;
  }
}

/* ==========================================================
   6. モバイル
   1カラム / 横スクロールなし / 長文は開閉しない、は現行のまま。

   肉球は Mobile 375 master の実測 ink 11×11px @ h2 20px に合わせる
   (本 SVG のインクは viewport の 78.3% なので 0.7em = 14px → ink 11.0px)。
   マージンは Steps・Benefits と同じ 4px。
   さらに 640px 以下では末尾側の肉球を出さない:
   Mobile 375 master ではセクション高さが現行から変化しておらず、
   両脇に肉球を置くと #guide の見出しが 2 行になって高さが
   +28px 変わってしまうため。先頭側の肉球のみは現行と同じ幅で、
   master のモバイル見出し(先頭に肉球1つ)とも一致する。
   ========================================================== */
@media (max-width: 640px) {
  main.lp-v2-main #guide > .container > h2::before,
  main.lp-v2-main #examples > .container > h2::before,
  main.lp-v2-main #manner > .container > h2::before,
  main.lp-v2-main #guides > .container > h2::before {
    width: 0.7em;
    height: 0.7em;
    margin: 0 4px;
    top: -0.08em;
  }
  main.lp-v2-main #guide > .container > h2::after,
  main.lp-v2-main #examples > .container > h2::after,
  main.lp-v2-main #manner > .container > h2::after,
  main.lp-v2-main #guides > .container > h2::after {
    content: none;
  }
}