/* ============================================================
   lp_client_v1.css — LP工場 クライアントLP専用スタイル
   lp_v2_sky.css の後に読み込む。スカイ基盤はそのまま流用し、
   ここでは主色（--primary）1色の差し替えと、基盤にない
   実績セクション用のクラスだけを追加する。
   ============================================================ */

:root {
  /* クライアントのロゴ色。生成CLIがここだけ書き換える */
  --primary: #0EA5A4;

  /* スカイ基盤の accent 系はこの1変数から派生させる（それ以外の色は基盤のまま） */
  --accent: var(--primary);
  --accent-dark: var(--primary);
  --accent-light: var(--primary);

  /* v3モック（監査室作）由来のパレット。ダーク帯・比較表など新セクションの構造色をモック通りに再現する。
     ※アクセント（--clp-sky系）はモックのシャナイア・スカイ固定値。クライアントの--primary theming
       とは別系統で、非スカイのロゴ色クライアントでは配色が二系統になる点は監査室に差し戻し中（I-1報告参照）。 */
  --clp-navy: #0b1f33;
  --clp-navy2: #0f2a44;
  --clp-sky: #0284c7;
  --clp-sky-d: #075985;
  --clp-sky-bg: #e8f4fd;
  --clp-line: #d8e6f2;
  --clp-serif: "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* v3モック由来の成功色・本文濃色（監査室2026-07-23指示#1/#4 で移植したヒーロー追跡劇場・料金セクション用） */
  --clp-ok: #0e9f6e;
  --clp-ink: #16283a;
}

/* ロゴはグラデーションではなく主色の単色表示にする（1色ルールの徹底） */
.nav-logo {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--primary);
}

/* ===== 実績ファクトストリップ（stats がある場合のみ生成CLIが出力・v3モック .facts 準拠） =====
   モックのCSS数値をそのまま移植（ダーク帯＋4列グリッド）。value は分解せず丸ごと <b> に入れる。 */
.facts { background: var(--clp-navy); color: #fff; }
.facts-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 34px 0;
}
.fact b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
}
.fact span {
  font-size: 12px;
  color: #9fc8e8;
}

/* ===== ベネフィット3枚目のワイド帯＋タイムライン（v3モック .pillar.wide + .tl 準拠） =====
   3枚構成のとき、pillar-grid を2列にして3枚目を全幅のダーク帯にする。右半分に flow をタイムライン表示。 */
.clp-pillar-grid { grid-template-columns: 1fr 1fr; }
.clp-wide {
  grid-column: 1 / -1;
  background: var(--clp-navy);
  color: #fff;
  border: none;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px;
}
.clp-wide-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #cfe7f8;
  background: rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.clp-wide-title {
  font-family: var(--clp-serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.6;
}
.clp-wide-body {
  color: #b9d4ea;
  font-size: 14px;
  line-height: 1.72;
}
.clp-tl {
  background: var(--clp-navy2);
  border-radius: 12px;
  padding: 20px 22px;
  font-size: 13px;
}
.clp-tl-row {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #cfe4f5;
}
.clp-tl-row:last-child { border: none; }
.clp-tl-row b {
  color: #fff;
  min-width: 52px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== 他社比較テーブル（market_comparison がある場合のみ生成CLIが出力・v3モック .cmp 準拠） =====
   ※アクセント（--clp-sky系）はモックのスカイ固定値をそのまま移植。監査室に差し戻し中（I-1報告参照）。 */
.cmp { border: 1px solid var(--clp-line); border-radius: 14px; overflow: hidden; }
.cmp-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  padding: 17px 24px;
  font-size: 14.5px;
  border-top: 1px solid var(--clp-line);
  align-items: center;
}
.cmp-row:first-child {
  border: none;
  background: #f6fafd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-sub);
}
.cmp-row b { font-size: 16px; font-variant-numeric: tabular-nums; }
.cmp-row span { color: var(--text-sub); font-size: 13px; }
.cmp-row.me { background: var(--clp-sky-bg); border-top: 2px solid var(--clp-sky); }
.cmp-row.me b { color: var(--clp-sky-d); font-size: 19px; }
.cmp-note { font-size: 11.5px; color: var(--text-sub); margin-top: 12px; }

/* ===== ヒーローmockの登場アニメ（v3モック .slack の pop 挙動・数値を移植） =====
   既存の抽象mock（.clp-mock 内の3行）に順次フェードインを付ける。固有の数字・文言は持たない（捏造なし）。 */
@keyframes clp-pop {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.clp-mock .fm-line-row { opacity: 0; animation: clp-pop .5s ease forwards; }
.clp-mock .fm-line-row:nth-child(2) { animation-delay: .3s; }
.clp-mock .fm-line-row:nth-child(3) { animation-delay: 1.1s; }
.clp-mock .fm-line-row:nth-child(4) { animation-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) {
  .clp-mock .fm-line-row { animation: none; opacity: 1; }
}

/* v3モック @860 のレスポンシブ数値を移植 */
@media (max-width: 860px) {
  .facts-in { grid-template-columns: 1fr 1fr; gap: 20px; }
  .clp-wide { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 1.3fr 1fr; }
  .cmp-row span { display: none; }
  .clp-stage { min-height: 400px; }
  .clp-price-card { grid-template-columns: 1fr; }
  .clp-price-l { border-right: none; border-bottom: 1px dashed var(--clp-line); }
}

/* ===== flow: analyze_for_lpのflowは1行文字列のみのためtitle+body 2段組みを使わない。
   （2026-07-21 監査室承認: v2でヒアリングシートから工程説明文を取得できるようになれば2段組み復帰を検討） */
.flow-step-card { padding: 20px 22px; }
.flow-step-title { margin-bottom: 0; }

/* ===== ヒーロー右カラムの抽象モック（実データ非依存の視覚要素・LP_CRAFT §1/§2）
   旗艦の .browser-window / .fm-bar を土台に、行間だけをこのファイルで調整する。
   固有の数字・文言は一切持たない（捏造禁止）。 */
.clp-mock { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.clp-mock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.clp-mock-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), rgba(2, 132, 199, .35));
  flex-shrink: 0;
}
.clp-mock .fm-line-row { gap: 10px; }
.clp-mock .fm-bar { height: 8px; }
.clp-mock-panel {
  margin-top: 4px;
  padding: 14px;
  border-radius: var(--r-md, 12px);
  background: rgba(2, 132, 199, .04);
  border: 1px solid rgba(2, 132, 199, .07);
  display: flex; flex-direction: column; gap: 10px;
}
.clp-mock-panel .fm-bar { height: 7px; }

/* ===== ヒーロー追跡劇場（v3モック .stage/.doc/.slack 準拠・監査室2026-07-23指示#1） =====
   hero_theater=true のクライアント（自社=cl18）のみ、生成CLIがヒーロー右カラムの抽象mockを
   この「資料閲覧ログ＋Slack通知」劇場に差し替える。モックのCSS数値をそのまま移植し、色変数だけ
   --clp-* / --text-sub に読み替える。フラグの無いクライアントは従来の抽象mock（.clp-mock）がフォールバック。
   ※劇場内の企業名は伏字（◯◯◯◯）・秒数はデモ表現で、特定顧客の実績主張ではない（製品機能の図示）。 */
.clp-theater { position: relative; }
.clp-stage { position: relative; min-height: 420px; }
.clp-doc {
  position: absolute; left: 0; top: 24px; width: 62%;
  background: #fff; border: 1px solid var(--clp-line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 31, 51, .10); padding: 18px 18px 14px;
}
.clp-doc-tt { font-size: 11px; font-weight: 700; color: var(--text-sub); letter-spacing: .08em; margin-bottom: 10px; }
.clp-pg { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-sub); padding: 7px 0; border-top: 1px dashed var(--clp-line); }
.clp-pg b { width: 34px; color: var(--clp-ink); font-size: 11.5px; }
.clp-bar { height: 8px; border-radius: 4px; background: var(--clp-sky-bg); flex: 1; overflow: hidden; position: relative; }
.clp-bar i { position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, #7cc7f0, var(--clp-sky)); border-radius: 4px; }
.clp-pg.hot b, .clp-pg.hot .clp-sec { color: var(--clp-sky); font-weight: 800; }
.clp-sec { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.clp-slack {
  position: absolute; right: 0; width: 58%;
  background: #fff; border: 1px solid var(--clp-line); border-left: 4px solid var(--clp-sky);
  border-radius: 12px; box-shadow: 0 14px 36px rgba(11, 31, 51, .14);
  padding: 13px 16px; font-size: 13px; opacity: 0; animation: clp-pop .5s ease forwards;
}
.clp-slack .t { font-weight: 800; font-size: 12.5px; margin-bottom: 2px; }
.clp-slack .d { color: var(--text-sub); font-size: 12px; }
.clp-slack.s1 { top: 0; animation-delay: .3s; }
.clp-slack.s2 { top: 96px; animation-delay: 1.1s; }
.clp-slack.s3 { top: 206px; animation-delay: 1.9s; border-left-color: var(--clp-ok); }
.clp-slack.s3 .chat { margin-top: 8px; background: var(--clp-sky-bg); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--clp-sky-d); }
@media (prefers-reduced-motion: reduce) {
  .clp-slack { animation: none; opacity: 1; }
}

/* ===== 料金セクション（pricing がある場合のみ生成CLIが出力・v3モック .price 準拠・監査室2026-07-23指示#4） =====
   モックのCSS数値をそのまま移植。--sub→--text-sub, --line/--sky-d/--sky-bg→--clp-*, --ok→--clp-ok に読み替え。 */
.clp-price { background: linear-gradient(160deg, #f4fafe, #e8f4fd); }
.clp-price-lead { color: var(--text-sub); max-width: 44em; margin: 0 auto 44px; }
.clp-price-card {
  background: #fff; border: 1px solid #bfdcf2; border-radius: 18px;
  box-shadow: 0 18px 48px rgba(2, 132, 199, .12);
  display: grid; grid-template-columns: 1fr 1.2fr; overflow: hidden;
}
.clp-price-l { padding: 40px; border-right: 1px dashed var(--clp-line); }
.clp-price-pn { font-size: 13px; font-weight: 800; color: var(--clp-sky-d); letter-spacing: .08em; margin-bottom: 16px; }
.clp-amount { font-size: 52px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.clp-amount small { font-size: 16px; font-weight: 700; color: var(--text-sub); }
.clp-tax { font-size: 13px; color: var(--text-sub); margin: 8px 0 18px; }
.clp-seika { background: var(--clp-sky-bg); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; color: var(--clp-sky-d); font-weight: 700; }
.clp-seika-sub { font-weight: 400; font-size: 12px; }
.clp-price-r { padding: 40px; }
.clp-inc { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--text-sub); margin-bottom: 14px; }
.clp-inc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; font-size: 14px; }
.clp-inc-g div::before { content: "✓ "; color: var(--clp-ok); font-weight: 800; }
.clp-premium { font-size: 12.5px; color: var(--text-sub); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--clp-line); }

/* ===== Gemini画像レイヤー（2026-07-23解禁・監査室 I-2） =====
   画像がある場合のみ generate_client_lp.py が対象セクションに .clp-has-*-img クラスと
   CSS変数（相対URL）を付与する。画像が無ければこのルールは一切効かず、既存のCSS/SVG表現
   （ヒーローの抽象mock・グリッド背景・オーブ等）がそのままフォールバックとして残る。
   ・人物なし／抽象イメージのみ（生成側 lp_images.py のプロンプトで no people を強制）
   ・主色は生成時にプロンプトへ含めてトーンを合わせる（--primary theming とは別に画像側で対応）
   ・旗艦の .hero::before（グリッド）は温存するため、画像レイヤーは ::after を使う。
   ・低opacityの背景透かしに留め、上に載る文字のコントラストを崩さない（見出し・カードは z-index:1 で前面）。 */
.hero.clp-has-hero-img::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--clp-hero-img);
  background-size: cover; background-position: center;
  opacity: .12; pointer-events: none;
}
.hero.clp-has-hero-img .hero-inner { position: relative; z-index: 1; }

.section-wrap.clp-has-sec-img { position: relative; }
.section-wrap.clp-has-sec-img::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--clp-sec-img);
  background-size: cover; background-position: center;
  opacity: .06; pointer-events: none;
}
.section-wrap.clp-has-sec-img > .container { position: relative; z-index: 1; }