/* =============================================================
 * cv_improvements_v12.css (2026-05-13)
 * KPI ギャップ解消 第12弾 - 日次レポート 2026-05-13 に基づく.
 *
 * 背景 (tasks/daily_report_2026-05-13_opcon_lp.md):
 *   - 直近30日 KPI 達成率: 売上10.6% / IMP 38% / CTR 44% / CVR 0.66%
 *   - 最大リーク: modal_open (80) -> form_start (1) = 1.25%
 *     tldv 2026-05-12定例 で「2段階認証撤廃 + モバイルMV軽量化」合意.
 *   - モバイル滞在 33.4s (デスクトップ 62.4s の約半分).
 *   - Clarity 平均スクロール深度 16.4% (3スクロール内に重要情報必須).
 *
 * 設計方針:
 *   - 既存 v1-v11 のロジック・スタイルは触らない (副作用最小化).
 *   - body に `lp-v12-on` を付与し v12 スタイルを発火.
 *   - モバイル (max-width: 768px) のみで MV 内の優先度低要素を
 *     非表示化・コンパクト化し, 3スクロール以内に「価格 + CTA + 信頼指標」
 *     を完結させる.
 *   - JS 側 (cv_improvements_v12.js) で `form_start` GA 発火条件を拡張.
 * ============================================================= */

/* ---------- 1. ボディフラグ ---------- */
body.lp-v12-on { /* マーカ. JS が付与. */ }

/* ---------- 2. モバイル MV 3スクロール完結 ---------- */
@media (max-width: 768px) {
  /* ペルソナフック: 3スクロール目以降では別セクションで再露出. */
  body.lp-v12-on .mv .mv-persona-hook {
    display: none !important;
  }

  /* バッジは横並びで縦サイズ縮減. */
  body.lp-v12-on .mv .mv-badges {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 4px 0 8px;
  }
  body.lp-v12-on .mv .mv-badges .mv-badge {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
  }

  /* MV タイトル 1.05倍の文字サイズ感を確保しつつ高さ縮減. */
  body.lp-v12-on .mv .mv-title {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }
  body.lp-v12-on .mv .mv-text {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }

  /* 信頼ストリップを MV 直下に移動見た目 (sticky 様). */
  body.lp-v12-on .mv .mv-trust-strip {
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* 三次CTA「主な機能を見る」は MV では非表示 (再露出は機能セクション内). */
  body.lp-v12-on .mv-btn__area--three .btn-ghost {
    display: none !important;
  }

  /* MV ミニ比較バーはコンパクト化. */
  body.lp-v12-on .mv .mv-mini-compare {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  body.lp-v12-on .mv .mv-mini-compare__item {
    font-size: 11px !important;
  }
  body.lp-v12-on .mv .mv-mini-compare__price {
    font-size: 12px !important;
  }
  body.lp-v12-on .mv .mv-mini-compare__note {
    font-size: 10px !important;
    line-height: 1.3;
  }

  /* レーティング行は MV では数値のみ短縮. */
  body.lp-v12-on .mv .mv-rating .mv-rating__count {
    font-size: 11px !important;
  }
}

/* ---------- 3. 主CTA 視認性強化 (全デバイス) ---------- */
body.lp-v12-on .btn-trial--lg a,
body.lp-v12-on .btn.btn-trial a {
  box-shadow: 0 4px 12px rgba(76,175,80,0.25);
}

/* ---------- 4. 購入ページ「STEP 2 メール認証」直下のクイック説明 ---------- */
/* lp_purchase.xhtml の form-section#sec-account の冒頭に JS で挿入. */
.lp-v12-modal-step2-hint {
  background: #eef9f3;
  border-left: 3px solid #22c55e;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: #14532d;
  line-height: 1.5;
}
.lp-v12-modal-step2-hint strong {
  color: #166534;
}
.lp-v12-modal-step2-hint__sub {
  display: block;
  font-size: 11px;
  color: #4d7c5e;
  margin-top: 2px;
}

/* ---------- 5. 購入ページ Email フィールド フォーカス強調 ---------- */
.lp-v12-on input#email:focus,
.lp-v12-on input#modal-email:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18) !important;
}

/* ---------- 6. 認証コード送信ボタンの視認性 ---------- */
body.lp-v12-on #btn-send-code,
body.lp-v12-on #modal-btn-send-code {
  background: #2563eb !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
body.lp-v12-on #btn-send-code:hover,
body.lp-v12-on #modal-btn-send-code:hover {
  background: #1d4ed8 !important;
}

/* ---------- 7. STEP 1 プラン未選択時のプロンプト ---------- */
.lp-v12-plan-prompt {
  font-size: 12px;
  color: #b91c1c;
  margin: 4px 0 8px;
  display: none;
}
body.lp-v12-on.lp-v12-plan-missing .lp-v12-plan-prompt {
  display: block;
}

/* End of cv_improvements_v12.css */