/* 食タイプUI v21（2026-08-02、ユーザーフィードバック対応）
   食タイプUI_v20.cssを土台に、以下のみ追加・変更した:
   - .fv-avatar img: v19で追加したtransform:scale(1.32)が強すぎて動物の顔が
     フレーム外に切れることがあったため、scale(1.08)+object-position:center 22%
     に弱めた（ユーザー指摘「動物の顔が収まってない」）。
   - .lp-world-tile: object-fit:coverが無く画像が歪んでいたのを修正。
   - .compat-teaser-*: 結果画面用の目立つ相性診断CTAカードを新設。
   v20以前の内容は変更していない。
*/
/* 食タイプUI v20（2026-08-02、v19の不具合修正）
   ユーザー報告「9:16のやつレイアウト死んでる」への対応。
   .share-card-story .story-avatar imgにwidth/height/object-fitの指定がなく、
   イラストが実サイズのまま描画されてカードを突き破っていた（v19作成時の単純な
   書き漏れ）。story-avatarに固定サイズ(92px)・overflow:hiddenを追加し、imgを
   100%/100%+object-fit:coverで収めた。他の変更はない。
*/
/* 食タイプUI v19（2026-08-02、ユーザーフィードバック対応）
   食タイプUI_v18.cssを土台に、以下のみ追加・変更した:
   - .fv-avatar: 円形マスクをやめ角丸正方形+拡大トリミングに（ユーザー指摘「円で
     囲うんじゃなくて、もっと大きく見せれないか」）。
   - .compat-percent/.pct-sign: 相性%表示を追加。
   - .compat-point .cp-tip: 関係性別のワンポイントアドバイス表示を追加。
   - .type-list-*: 新設した「タイプ一覧」画面用のカードグリッド。
   v18以前の内容は変更していない（該当箇所のみ上書き、他は追記）。
*/
/* 食タイプUI v13
   食タイプUI_v12.cssを土台に、新しい診断書フォーマット（v2レポート、①〜⑰・
   無料/有料の区切りUI）向けの .ft-rp-* / .ft-report-v2 スタイルのみを追加した。
   v12の内容は変更していない（末尾に追記する形）。
   index_v18.htmlのCSS変数（--aqua, --lavender, --coral-deep, --ink, --ink-soft,
   --ink-faint, --surface, --space-* 等）をそのまま再利用する。
*/
/* 食タイプUI v11
   index_v12.html が読み込む唯一の外部スタイルシート。
   食タイプUI_v9.css（index_v9.html/v10.htmlが参照）の内容を土台に、
   診断書情報開示設計_v2.md で定義した結果画面の再設計（Proof/30秒/4軸/
   テーマ別アコーディオン/場面例/共有の7画面構成）に必要なスタイルを追加した。
   食タイプUI_v9.css・食タイプUI_v10.css（後者は index_v11.html が参照している名前だが
   実体は作成されていなかった）はどちらも変更・削除していない。
   既存のCSS変数（--aqua, --lavender 等はindex_v12.html内のインラインstyleで定義）を
   そのまま再利用し、色数を増やしすぎないようにしている。 */

/* ---------------------------------------------------------------
   結果ファーストビュー（画面1: Reveal）
   このv11では大きな共有カードプレビューをここに置かず、テキストの結果発表のみに絞る。
--------------------------------------------------------------- */
.fv-wrap { position: relative; text-align: center; padding: var(--space-3) 0 var(--space-2); }
/* v17でobject-fit:containの浮遊表示に変更したが、実機で見た目の改善が確認できず
   ユーザーからの指摘によりv15時点の表示に巻き戻した（2026-07-25、v18作成時）。 */
/* v14: アバターを主役として大きく見せ、名前とのタイポグラフィコントラストを強める
   （軽い手術=1〜5の改善項目のうち#2）。色・フォント自体は変更しない。 */
/* v19: ユーザー指摘「円で囲うんじゃなくて、もっと大きく見せれないかな」への対応。
   円形マスク(border-radius:50%)をやめ、角丸正方形に変更。サイズも168-200pxから
   240-300pxへ拡大した。imgにtransform:scale()をかけてoverflow:hiddenでクロップし、
   イラスト内のキャラクター部分がフレームいっぱいに大きく見えるようにしている
   （＝「拡大トリミング」。背景の一部は見切れるが、キャラクターの表情・持ち物が
   はっきり見えることを優先）。 */
.fv-avatar {
  width: 240px; height: 240px; border-radius: 32px; margin: var(--space-3) auto var(--space-3);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--gc, var(--aqua)) 35%, #fff), var(--gc, var(--aqua)) 72%);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.8), 0 14px 30px rgba(23,37,42,0.14);
}
/* v21の不具合修正: v19で追加したtransform:scale(1.32)が強すぎて、イラストによっては
   顔が中央からずれてフレーム外に切れてしまっていた（ユーザー指摘「動物の顔が
   収まってなかったりする」）。ズーム倍率を1.32→1.08へ弱め、object-positionを
   上寄り(center 22%)にして、キャラクターの顔が集まりやすい上半分を優先して
   見せるようにした。「もっと大きく見せる」という目的自体はボックスサイズ拡大
   （168-200px→240-300px）で既に達成できているため、ズーム量は控えめで十分。 */
.fv-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform: scale(1.08); }
.fv-name { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 2px; }
.fv-shortname { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.fv-code-sub { font-family: var(--font-code); font-weight: 700; opacity: 0.6; margin-left: 3px; font-size: 12px; }
.fv-tagline { font-size: 15.5px; font-weight: 600; line-height: 1.65; max-width: 300px; margin: var(--space-3) auto 0; }
.fv-oneliner { font-size: 13px; font-weight: 600; color: var(--ink-faint); max-width: 300px; margin: var(--space-2) auto 0; line-height: 1.6; }

/* v41新設: 記憶キーワード（合言葉）。結果ヒーロー内で最も強い視覚フックとして扱う
   （本文サイズより明確に大きく、キャラクター固有色を使い、周囲に余白を確保する）。
   --gcをそのまま文字色に使うとタイプによってコントラストが不足し得るため、
   color-mixで--inkと混ぜてどのタイプでも読める濃さに寄せる。装飾用の引用符は
   「」1組のみで、タグの羅列にはしない。 */
.fv-keyword { margin: var(--space-4) auto 0; max-width: 320px; }
.fv-keyword-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-faint); }
.fv-keyword-word { font-size: 30px; font-weight: 900; line-height: 1.3; margin-top: 4px;
  color: color-mix(in srgb, var(--gc, var(--aqua-deep)) 62%, var(--ink) 38%); }

/* v12: 流し読みでも3語だけは残るよう、ラベルは薄く、記憶語は固有色と太字で強調。 */
.skim-memory { margin: 10px 0 22px; padding: 18px 2px; border-top: 1px solid rgba(23,37,42,.12); border-bottom: 1px solid rgba(23,37,42,.12); }
.skim-memory-label { color: var(--ink-faint); font-size: 10.5px; font-weight: 900; letter-spacing: .08em; }
.skim-memory-list { display: grid; gap: 10px; margin-top: 12px; }
.skim-memory-list p { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 10px; }
.skim-memory-list span { color: var(--ink-faint); font-size: 11px; font-weight: 800; }
.skim-memory-list strong { color: color-mix(in srgb, var(--gc, var(--aqua-deep)) 62%, var(--ink) 38%); font-size: 16px; font-weight: 950; line-height: 1.45; letter-spacing: -.01em; }

/* v14: 副CTAをボタン(枠線)からテキストリンクへ弱める（軽い手術#1）。主CTA(btn-lime)との
   強弱を明確にし、「どっちが本命かわからない」状態を解消する。 */
.fv-secondary-link {
  display: inline-flex; align-items: center; gap: 5px; margin: 12px auto 0; padding: 6px 4px;
  background: none; border: none; text-decoration: underline; text-underline-offset: 3px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft); min-height: 44px;
}
.fv-secondary-link:hover, .fv-secondary-link:focus-visible { color: var(--ink); }

.fv-list { text-align: left; margin-top: var(--space-4); display: flex; flex-direction: column; gap: 8px; }
.fv-list-item { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(255,255,255,0.65); }
.fv-list-item .fv-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--aqua) 40%, #fff); color: var(--ink); margin-top: 1px; }
.fv-list-item p { font-size: 13.5px; font-weight: 600; line-height: 1.55; }

.fv-gap-card { margin-top: var(--space-3); text-align: left; padding: 13px 14px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,143,122,0.16), rgba(255,143,122,0.05)); border: 1px solid rgba(245,106,79,0.18); }
.fv-gap-card .fv-gap-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--coral-deep); margin-bottom: 4px; }
.fv-gap-card p.fv-gap-body { font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--ink); }

/* 画面1の控えめな副CTA（結果カードを見る）。主CTA（lime色の大ボタン）より明確に弱く見せる */
.fv-secondary-cta { display: block; margin: 10px auto 0; text-align: center; min-height: 44px; }

/* ---------------------------------------------------------------
   共有カードプレビュー（DOM表示。実ファイルはCanvasで別途生成する）
   画面7（share-section）で主として使う。画面1では使わない。
--------------------------------------------------------------- */
.fv-card-preview-wrap { margin-top: var(--space-4); position: relative; }
.fv-card-preview-wrap::before {
  content: ''; position: absolute; inset: -18px -12px; z-index: -1; border-radius: 32px;
  background: radial-gradient(circle at 15% 10%, rgba(121,221,232,0.35), transparent 55%),
              radial-gradient(circle at 90% 15%, rgba(185,167,248,0.28), transparent 55%),
              radial-gradient(circle at 20% 95%, rgba(203,239,114,0.28), transparent 55%);
  filter: blur(18px);
}
.share-card-v2 {
  border-radius: 28px; padding: var(--space-5) var(--space-4); text-align: center; position: relative;
  background: rgba(255,255,255,0.86); border: 1px solid rgba(23,37,42,0.09);
  box-shadow: 0 18px 40px rgba(23,37,42,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.share-card-v2 .brand { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--ink-soft); }
.share-card-v2 .nick { font-size: 26px; font-weight: 900; margin-top: 8px; color: var(--ink); }
.share-card-v2 .code { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; }
.share-card-v2 .line { font-size: 13px; font-weight: 700; margin-top: var(--space-3); color: var(--ink); }
.share-card-v2 .mini-tags { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: var(--space-3); }
.share-card-v2 .mini-tags span { font-size: 10.5px; font-weight: 700; background: rgba(23,37,42,0.06); padding: 5px 11px; border-radius: 999px; color: var(--ink); }
.share-card-v2 .ask-line { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-top: var(--space-3); }

/* ---------------------------------------------------------------
   v18（項目④）: 9:16（ストーリーズ）専用シェアカード。share-card-v2の使い回しでは
   なく、フルブリード背景＋大きな「合言葉」＋「意外ポイント」チップ＋他者判定の
   独自レイアウト。安全マージン（上15%/下20%）はaspect-ratio: 9/16のボックス内で
   padding-top/bottomとして表現し、Instagramストーリーズ自体のUI（プロフィール
   バー・返信入力欄）と実際のコンテンツが重ならないようにする。
--------------------------------------------------------------- */
.share-card-story {
  aspect-ratio: 9 / 16; border-radius: 28px; position: relative; overflow: hidden;
  padding: 15% 9% 20%; display: flex; flex-direction: column; align-items: center;
  text-align: center; color: #fff;
  background: linear-gradient(165deg, color-mix(in srgb, var(--gc, var(--aqua)) 78%, #17252a) 0%, var(--gc, var(--aqua)) 55%, color-mix(in srgb, var(--gc, var(--aqua)) 82%, #17252a) 100%);
  box-shadow: 0 18px 40px rgba(23,37,42,0.18);
}
.share-card-story .story-brand { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: rgba(255,255,255,0.85); }
/* v20の不具合修正: story-avatar内のimgにサイズ指定がなく、イラストの実サイズ
   （数百〜1000px超）のまま描画されてカード全体を突き破っていた
   （ユーザー指摘「9:16のやつレイアウト死んでる」）。fv-avatarと同様に
   width/height/object-fitを明示し、円形に収める。 */
.share-card-story .story-avatar {
  width: 92px; height: 92px; margin-top: var(--space-3); border-radius: 50%;
  background: rgba(255,255,255,0.16); padding: 6px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.share-card-story .story-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.share-card-story .story-name { font-size: 15px; font-weight: 900; margin-top: var(--space-3); color: #fff; }
.share-card-story .story-keyword-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.72); margin-top: var(--space-4); }
.share-card-story .story-keyword { font-size: 26px; font-weight: 900; line-height: 1.35; margin-top: 6px; color: #fff; }
.share-card-story .story-surprise {
  margin-top: var(--space-4); background: rgba(255,255,255,0.95); border-radius: 16px;
  padding: 12px 14px; max-width: 100%;
}
.share-card-story .story-surprise p { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.share-card-story .story-yesno-label { font-size: 13px; font-weight: 800; margin-top: var(--space-4); color: #fff; }
.share-card-story .story-yesno { display: flex; gap: 8px; margin-top: 8px; }
.share-card-story .yn-pill { min-height: 34px; padding: 0 18px; border-radius: 999px; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; }
.share-card-story .yn-yes { background: rgba(255,255,255,0.95); color: var(--gc, var(--aqua-deep)); }
.share-card-story .yn-no { background: rgba(255,255,255,0.18); color: #fff; border: 1.5px solid rgba(255,255,255,0.7); }
.share-card-story .story-url { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,0.78); margin-top: auto; padding-top: var(--space-3); }

/* v29: 1:1/4:5/9:16のratio-tabs UIを廃止（ユーザー指摘「1:1、4:5、9:16とか
   いらんから デフォで4:5を表示して、インスタ用ってボタンを作って」）。
   代わりに、通常サイズ/インスタ用を1つのボタンで切り替えるshare-mode-switch
   に置き換えた。 */
.share-mode-switch { display: block; margin: var(--space-4) auto 0; min-height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: var(--ink-soft); background: var(--surface); border: 1.5px solid rgba(255,255,255,0.6); }
.share-mode-switch-insta { color: var(--ink); background: linear-gradient(135deg, #f9ce9a, #f2739a 45%, #b06dd9); border-color: transparent; }

.fv-cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-4); }
.fv-cta-row .btn { min-height: 52px; }
.fv-cta-secondary-row { display: flex; gap: 8px; }
.fv-cta-secondary-row .btn { flex: 1; }

.share-state { display: none; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 800;
  margin-top: 10px; padding: 9px 14px; border-radius: 999px; }
.share-state.show { display: inline-flex; }
.share-state[data-state="generating"] { background: rgba(121,221,232,0.18); color: var(--aqua-deep); }
.share-state[data-state="success"] { background: rgba(203,239,114,0.28); color: #5a7a1f; }
.share-state[data-state="saved"] { background: rgba(203,239,114,0.28); color: #5a7a1f; }
.share-state[data-state="cancelled"] { background: rgba(23,37,42,0.06); color: var(--ink-soft); }
.share-state[data-state="error"] { background: rgba(255,143,122,0.2); color: var(--coral-deep); }
.share-state .spin { animation: ft-spin 0.9s linear infinite; }
@keyframes ft-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .share-state .spin { animation: none; } }

/* v33で追加: ストーリーズ画像を保存した後の追加手順（インスタが直接開けない環境向け） */
.share-story-help { display: none; margin-top: 12px; text-align: left; padding: 14px 15px; border-radius: 16px;
  background: var(--surface); border: 1px solid rgba(255,255,255,0.65); }
.share-story-help.show { display: block; }
.share-story-help .ssh-title { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 0; }
.share-story-help .ssh-steps { margin: 8px 0 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.share-story-help .ssh-steps li { font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--ink-soft); }
.share-story-help .ssh-open-btn { margin-top: 12px; min-height: 44px; font-size: 13.5px; }

/* ---------------------------------------------------------------
   読了ナビゲーション（7段階のステップ）
--------------------------------------------------------------- */
.step-nav { display: flex; gap: 6px; overflow-x: auto; margin-top: var(--space-4); padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
.step-nav-item { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); background: var(--surface);
  border: 1.5px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 0 14px; min-height: 36px; }
.step-nav-item:hover, .step-nav-item:focus-visible { color: var(--ink); border-color: var(--aqua-deep); }
/* v14: 今どのセクションを読んでいるかIntersectionObserverで判定してactiveを付与
   （軽い手術#3）。全部同じ見た目で現在地が分からない問題への対応。 */
.step-nav-item.active { background: var(--aqua); color: var(--ink); border-color: var(--aqua-deep); }

/* ---------------------------------------------------------------
   v23: 「回答から出た特徴」「意外な弱点」「30秒でわかる」を1枚に統合した
   insight-card。UIがくどい割に情報量が少なく見える、というユーザー指摘を受け、
   個別カード3枚分のヘッダー・チップ・余白を削り、同じ情報をより少ないクロムで
   見せる（フルレポートに辿り着くまでの前段を軽くする狙い）。
--------------------------------------------------------------- */
.insight-card { margin-top: var(--space-5); border-left: 3px solid var(--aqua-deep); }

/* v21（項目「相性診断を目立たせる」）: 結果画面の早い位置に置く、相性診断への
   専用の大きなCTAカード。タイプカラーのグラデーションを使い、共有セクション内の
   小さなアウトラインボタンよりも視覚的に強い存在感を持たせる。 */
.compat-teaser {
  margin-top: var(--space-5); text-align: center; padding: var(--space-5) var(--space-4);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gc, var(--aqua)) 22%, #fff), color-mix(in srgb, var(--gc, var(--aqua)) 8%, #fff));
  border: 1px solid color-mix(in srgb, var(--gc, var(--aqua)) 30%, transparent);
}
.compat-teaser-icon {
  width: 52px; height: 52px; margin: 0 auto var(--space-2); border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gc, var(--aqua)) 35%, #fff); color: var(--ink);
}
.compat-teaser-title { font-size: 17px; font-weight: 800; }
.compat-teaser-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; margin-top: 6px; font-weight: 600; }
.proof-axis-row { margin-top: var(--space-3); padding: 12px 14px; border-radius: 16px; background: rgba(23,37,42,0.03); }
.proof-axis-row + .proof-axis-row { margin-top: var(--space-2); }
.proof-axis-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; margin-bottom: 5px; }
.proof-axis-tag.strongest { color: var(--coral-deep); }
.proof-axis-tag.balance { color: var(--lavender-deep); }
.proof-axis-body { font-size: 13.5px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.proof-feature-list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 8px; }
.proof-feature-item { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(255,255,255,0.65); }
.proof-feature-item .fv-ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--aqua) 40%, #fff); color: var(--ink); margin-top: 1px; }
.proof-feature-item p { font-size: 13px; font-weight: 600; line-height: 1.55; }

/* 弱点1行（旧weakness-cardの内容を、独立カードではなくinsight-card内の1行として表示） */
.insight-weakness-row { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-3);
  padding: 10px 13px; border-radius: 14px; background: rgba(255,143,122,0.1); color: var(--coral-deep); }
.insight-weakness-row p { font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.insight-weakness-row p b { color: var(--coral-deep); }

.insight-divider { height: 1px; background: rgba(23,37,42,0.08); margin: var(--space-4) 0 var(--space-3); }
.insight-subhead { font-size: 12px; font-weight: 800; color: var(--ink-faint); margin-bottom: 2px; }

.summary30-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
.summary30-item { display: flex; gap: 10px; align-items: flex-start; }
.summary30-item .s30-label { flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--ink-faint); width: 74px; padding-top: 2px; }
.summary30-item p.s30-body { font-size: 13px; font-weight: 600; line-height: 1.65; color: var(--ink); }

/* ---------------------------------------------------------------
   画面4: 4軸（<details>化）／画面5: テーマ別アコーディオン
   ネイティブ<details>/<summary>を使い、JSのキーボードトラップを追加しない。
   aria-expanded/aria-controlsはJS側（ftSyncDetailsAria）でopen状態と同期する。
--------------------------------------------------------------- */
.axes-details, .theme-card { margin-top: var(--space-4); overflow: hidden; }
.axes-details > summary, .theme-summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: var(--space-3) var(--space-1); min-height: 46px;
}
.axes-details > summary::-webkit-details-marker, .theme-summary::-webkit-details-marker { display: none; }
.axes-details > summary::marker, .theme-summary::marker { content: ''; }
.theme-summary-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(121,221,232,0.18); color: var(--ink); }
.theme-summary-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.theme-summary-title { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.theme-summary-what { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.theme-summary-preview { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.theme-summary-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.theme-summary-time { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.theme-summary-cta { font-size: 11px; font-weight: 800; color: var(--aqua-deep); white-space: nowrap; }
.theme-summary .chev, .axes-details > summary .chev { transition: transform 0.2s ease; color: var(--ink-faint); }
.theme-card[open] .theme-summary .chev, .axes-details[open] > summary .chev { transform: rotate(-90deg); }
.theme-body { padding-top: var(--space-2); }
.theme-toggle-all-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.theme-toggle-all-row .btn-ghost { min-height: 40px; padding: 6px 12px; }
.theme-card-list { display: flex; flex-direction: column; gap: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .theme-summary .chev, .axes-details > summary .chev { transition: none; }
}

/* フォーカス表示（summary要素はネイティブにTab/Enterで開閉できる） */
.axes-details > summary:focus-visible, .theme-summary:focus-visible, .step-nav-item:focus-visible { outline: 3px solid var(--aqua-deep); outline-offset: 2px; }

/* ---------------------------------------------------------------
   画面6: 任意の場面例（あるある）
   「あるあるを最初の信頼獲得に使わない」方針により、Proof/30秒/テーマの後に配置する。
   断定表現は使わず、初期2件＋「あと◯件見る」で追加表示する。
--------------------------------------------------------------- */
.aruaru-section { margin-top: var(--space-5); }
.aruaru-note { font-size: 12px; color: var(--ink-soft); line-height: 1.7; margin: 4px 0 var(--space-3); }
.aruaru-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.aruaru-grid[hidden] { display: none; }
.aruaru-card { padding: var(--space-3) var(--space-3); border-radius: 18px; }
.aruaru-card p.kicker { font-size: 10.5px; font-weight: 800; opacity: 0.7; margin-bottom: 6px; }
.aruaru-card p.body { font-size: 13.5px; font-weight: 700; line-height: 1.55; }
#ft-aruaru-more-btn { width: 100%; min-height: 46px; }

/* ---------------------------------------------------------------
   画面7: 共有・比較（納得後の主要CTA。ここで初めて共有カードを本格的に見せる）
--------------------------------------------------------------- */
.share-section { margin-top: var(--space-5); }

/* 注記: .chapter-card / .chapter-eyebrow / .chapter-title / .axis-bar-list / .split-card /
   .deep-dive-list / .next-cta / .disclaimer-note / .closing-row 等は
   index_v12.html のインライン<style>（index_v9.html以来変更していない基本スタイル）に
   既に定義されているため、ここでは重複定義しない。 */

/* モバイル操作要件: 主要タップ領域44px相当以上 */
.fv-cta-row .btn, .share-mode-switch, .step-nav-item { min-height: 46px; }
.fv-cta-secondary-row .btn + .btn { margin-left: 0; }

@media (min-width: 481px) {
  .fv-avatar { width: 300px; height: 300px; }
}

/* ---------------------------------------------------------------
   食タイプUI v12 追加分（今回のブリーフ: LP・診断回答画面・共有カード・相性画面の再設計）
   既存の食タイプUI_v9.css/v11.cssの内容・変数はそのまま引き継ぎ、重複定義は避ける。
--------------------------------------------------------------- */

/* 共有カード: キャラクター・URL/ハッシュタグ行を追加（3特徴に統一） */
.share-card-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; overflow: hidden;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--gc, var(--aqua)) 35%, #fff), var(--gc, var(--aqua)) 72%);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; }
.share-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.share-card-url { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin-top: var(--space-2); letter-spacing: 0.02em; }
/* v15: 直前にあった .lp-card-mini / .lp-card-big はHTML側の実クラス名
   (.lp-mini-card-wrap / .lp-big-card-wrap)と一致しておらず、一度も適用されていなかった
   死んだルールだったため削除した。実際のスタイルは下の.lp-mini-card-wrap側で定義している。 */

/* 画面3: 意外な弱点1つ（renderWeakness、Proofから独立させた1画面） */
.weakness-card { margin-top: var(--space-4); border-left: 3px solid var(--coral-deep); }

/* 診断回答画面: 現在回答中の設問へ視線を集中させる状態表示。
   同じ見た目のカードを5枚並べるのではなく、答えた/答えている/まだ先、を差別化する。
   過度なアニメーションは使わず、opacity/scaleの単発トランジションのみに留める。 */
.q-block { transition: opacity 0.2s ease, transform 0.2s ease; }
.q-block-done { opacity: 0.55; transform: scale(0.98); }
.q-block-active { opacity: 1; transform: scale(1); }
.q-block-active .q-block-legend { font-weight: 800; }
.q-block-upcoming { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .q-block { transition: none; }
}

/* ---------------------------------------------------------------
   LP（ランディング）: SMAKO型の6セクション構成
   v16: ユーザーがPDF出力で「配置がバラバラ」と指摘。lp-section系の見出しは
   元々text-align:centerだったが、hero内のCTA/メタ情報、友達紹介グリッド、
   やることは3つだけの中身だけ左寄せのままだった。ページ全体を中央寄せに統一する。
   また同じ結果サンプルカードが3箇所に重複していた（section1/2/6）ため、
   専用の見出しがあるsection2のみに残し、lp-mini-card-wrap自体は現在未使用
   （HTML側から参照を削除。ルール自体は将来の再利用に備えて残す）。
--------------------------------------------------------------- */
.lp-hero { padding-top: var(--space-4); text-align: center; }
.lp-mini-card-wrap { margin: var(--space-5) auto 0; max-width: 280px; }
.lp-mini-card-wrap .share-card-v2 { padding: var(--space-4); }
.lp-mini-card-wrap .nick { font-size: 20px; }
.lp-char-row { display: flex; justify-content: center; gap: 12px; margin-top: var(--space-4); }
.lp-char-tile { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--gc, var(--aqua)) 35%, #fff), var(--gc, var(--aqua)) 72%);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.85); }
.lp-char-tile img { width: 100%; height: 100%; object-fit: cover; }

.lp-section { padding: var(--space-6) var(--space-3); text-align: center; }
.lp-section-tint { background: linear-gradient(180deg, rgba(121,221,232,0.08), rgba(185,167,248,0.06)); border-radius: 28px; }
.lp-section-eyebrow { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: 0.08em; }
.lp-section-title { font-size: 20px; font-weight: 900; margin-top: 4px; letter-spacing: -0.01em; }
.lp-section-lead { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; margin-top: 6px; line-height: 1.6; }
.lp-big-card-wrap { margin-top: var(--space-5); max-width: 340px; margin-left: auto; margin-right: auto; }

/* v16: 左寄せ(text-align:left)をやめ、アイコン→タイトル→説明を縦に中央寄せへ統一。
   .icon-tile自体は元々このコンテキスト向けの定義が無く(.preview-row .icon-tileのみ
   存在)スタイル抜けだったため、ここで正しく定義しつつ中央寄せにする。 */
.lp-friend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-5); text-align: center; }
.lp-friend-item { padding: var(--space-3); display: flex; flex-direction: column; align-items: center; }
.lp-friend-item .icon-tile { width: 44px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--ink);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--tc, var(--aqua)) 28%, #fff) 0%, var(--tc, var(--aqua)) 78%);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.78), 0 6px 14px color-mix(in srgb, var(--tc, var(--aqua)) 30%, transparent); }
/* v26: v24の.icon-tileは単色フラット塗りで「AIっぽい」との指摘（ユーザー指摘: もっとふわふわ感）。
   .fv-avatar/.share-card-avatar/.lp-char-tileと同じ既存の「radial-gradient + 白リングのbox-shadow」パターンに
   合わせて統一した（食タイプUI_v25.cssと同内容をv24ベースに再適用）。色はHTML側のinline style
   （--tc カスタムプロパティ）で1個ずつ指定する方式に変更。 */
.lp-friend-item .title { font-size: 13px; font-weight: 800; margin-top: 8px; }
.lp-friend-item .desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }

.lp-world-row { display: flex; justify-content: center; gap: 16px; margin-top: var(--space-5); flex-wrap: wrap; }
.lp-world-tile { text-align: center; }
/* v21の不具合修正: object-fitの指定がなく、正方形でないイラストが引き伸ばされて
   歪んでいた（ユーザー指摘「動物の顔が収まってない」の一因）。object-fit:coverを追加。 */
.lp-world-tile > div, .lp-world-tile img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.lp-world-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lp-world-tile .nm { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }

/* v16: 番号+テキストの横並び左寄せ行から、番号を上・テキストを中央寄せで
   下に置く縦積みへ変更し、他の中央寄せセクションと統一する。 */
.lp-step-row { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-5); max-width: 320px; margin-left: auto; margin-right: auto; text-align: center; }
.lp-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--space-4) var(--space-3); background: var(--surface); border-radius: 18px; }
.lp-step-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--aqua); color: var(--ink); font-weight: 900;
  font-size: 15px; display: flex; align-items: center; justify-content: center; }
.lp-step .title { font-size: 13.5px; font-weight: 800; }
.lp-step .desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

.lp-final-cta { text-align: center; padding-bottom: var(--space-5); }
.lp-final-cta .lp-section-title { margin: var(--space-4) 0 var(--space-3); }

/* v29: 「診断せずに16タイプを見てみる／相性を見る」の2ボタンが枠線付きの
   不格好な箱に見えていた（ユーザー指摘「ここのUI頑張って」）。
   btn-ghostにborder:noneを足しただけでは弱かったので、見出しラベル＋
   区切り線つきの横並びグループとして再構成した。 */
.lp-secondary-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: var(--space-4); opacity: 0.7; }
.lp-secondary-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.lp-secondary-actions .btn-ghost { padding: 6px 8px; }
.lp-secondary-divider { width: 1px; height: 14px; background: rgba(23,37,42,0.15); flex-shrink: 0; }

/* ---------------------------------------------------------------
   ギャル語モード（任意表示の文体トグル。診断本文データ自体は無変更）
--------------------------------------------------------------- */
.gyaru-toggle-row { display: flex; gap: 8px; margin: var(--space-3) 0; }
.gyaru-toggle-btn { flex: 1; min-height: 44px; font-size: 12.5px; font-weight: 800; }
.gyaru-toggle-btn.active { background: var(--lavender); border-color: var(--lavender-deep); color: var(--ink); }
.gyaru-kw { display: inline-block; font-size: 11px; font-weight: 800; color: var(--coral-deep);
  background: rgba(255,143,122,0.14); border-radius: 999px; padding: 3px 9px; margin-right: 6px; }

/* ---------------------------------------------------------------
   動物IP統合分（index_v16.html）: 4文字コードの意味を補助的に示す凡例チップ。
   コード自体を主役にしない方針のため、fv-name（動物名）より小さく・控えめに表示する。
--------------------------------------------------------------- */
.code-legend-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: var(--space-2); }
.code-legend-chip { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); background: rgba(23,37,42,0.05);
  border: 1px solid rgba(23,37,42,0.08); border-radius: 999px; padding: 4px 10px; }
.code-legend-chip b { color: var(--ink); font-weight: 800; }

/* ---------------------------------------------------------------
   v2診断書レポート（食タイプ診断書v2ロジック_v1.js が出力するHTML用）
--------------------------------------------------------------- */
.ft-report-v2 { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

/* v14: ft-rp-heroは「発表の繰り返し」ではなく「本編の区切り」に変更（動物イラスト・
   Flagship Vocabularyラベル行は廃止し、名前自体を大きなタイポグラフィで見せる）。
   画面上部のfv-name/fv-avatarとは意図的に見た目を変え、二番煎じ感を避ける。 */
.ft-rp-hero {
  text-align: center; padding: var(--space-6) var(--space-4); border-radius: 28px;
  background: linear-gradient(160deg, rgba(121,221,232,0.16), rgba(185,167,248,0.08));
  border: 1px solid rgba(23,37,42,0.08);
}
.ft-rp-hero-kicker { font-size: 11.5px; font-weight: 800; color: var(--ink-faint); letter-spacing: 0.08em; }
.ft-rp-hero-name { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; margin-top: 10px; line-height: 1.15; }
.ft-rp-hero-catch { font-size: 14.5px; font-weight: 700; line-height: 1.75; margin-top: var(--space-3); color: var(--ink-soft); }

.ft-rp-card {
  padding: var(--space-4); border-radius: 22px; background: var(--surface);
  border: 1px solid rgba(255,255,255,0.65);
}
.ft-rp-card.ft-rp-opening { background: transparent; border: none; padding: var(--space-3) var(--space-2); }
.ft-rp-p { font-size: 13.5px; line-height: 1.75; font-weight: 500; color: var(--ink); margin-top: 10px; }
.ft-rp-p:first-child { margin-top: 0; }
.ft-rp-p strong { font-weight: 800; }

.ft-rp-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-2); flex-wrap: wrap; }
.ft-rp-num { font-family: var(--font-code); font-weight: 800; font-size: 13px; color: var(--aqua-deep); flex-shrink: 0; }
.ft-rp-title { font-size: 15.5px; font-weight: 800; color: var(--ink); flex: 1; min-width: 0; }
.ft-rp-badge { font-size: 10.5px; font-weight: 800; color: var(--ink-soft); background: rgba(203,239,114,0.28);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ft-rp-card.ft-rp-unlocked .ft-rp-badge { background: rgba(203,239,114,0.5); color: #4a6a15; }

.ft-rp-list { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ft-rp-list li { font-size: 13px; font-weight: 600; line-height: 1.55; padding: 9px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(23,37,42,0.05); }
.ft-rp-list.ft-rp-list-unlocked li { background: rgba(203,239,114,0.14); border-color: rgba(203,239,114,0.35); }
.ft-rp-kicker { font-size: 11px; font-weight: 800; color: var(--ink-faint); margin-top: 2px; }
.ft-rp-note { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-top: var(--space-2); }

.ft-rp-scene { margin-top: var(--space-2); padding: 10px 13px; border-radius: 14px; background: rgba(255,255,255,0.6); border: 1px solid rgba(23,37,42,0.05); }
.ft-rp-scene:first-child { margin-top: 0; }
.ft-rp-scene-label { font-size: 11px; font-weight: 800; color: var(--aqua-deep); margin-bottom: 3px; }
.ft-rp-scene-text { font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--ink); }

.ft-rp-compat-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.ft-rp-compat-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,0.6); border: 1px solid rgba(23,37,42,0.05); }
.ft-rp-compat-type { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: var(--ink); background: rgba(185,167,248,0.24); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ft-rp-compat-text { font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--ink-soft); }
.ft-rp-compat-list.ft-rp-compat-unlocked { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed rgba(23,37,42,0.1); }

/* ロック演出: 内容そのものは隠さず、ぼかしすぎない。ティーザー文をそのまま見せて
   「有料でどれくらいの質か」が伝わることを優先する（マスターケース設計方針より）。 */
.ft-rp-teaser {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,143,122,0.1), rgba(255,143,122,0.03));
  border: 1px dashed rgba(245,106,79,0.3);
}
.ft-rp-teaser-label { font-size: 11px; font-weight: 800; color: var(--coral-deep); margin-bottom: 5px; }
.ft-rp-teaser-text { font-size: 12.5px; font-weight: 600; line-height: 1.65; color: var(--ink-soft); }
.ft-rp-teaser-text strong { font-weight: 800; color: var(--ink); }

.ft-rp-unlock-btn { width: 100%; min-height: 48px; margin-top: var(--space-3); }
.ft-rp-demo-note { font-size: 10.5px; color: var(--ink-faint); text-align: center; margin-top: 6px; line-height: 1.5; }

/* v45新設: 有料本文そのものではなく、ダミー文をぼかして「分量が確かにある」
   ことだけを視覚的に伝えるモザイク演出。user-select:noneとpointer-events:none
   で誤操作・誤コピーを防ぎ、blur+opacityで可読性を落とす。 */
.ft-rp-mosaic { margin: 10px 0; user-select: none; pointer-events: none; }
.ft-rp-mosaic-line {
  font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 6px;
  filter: blur(4.5px); opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: clip;
}

/* v18（項目②）: 17個あった「¥500で解放する」フルボタンを2個（⑩発見・bridge）に
   絞り、残りは以下の軽量リンク1行のみにした。押せば同じくftUnlockReportV2()が
   発火するため機能は変わらない。フルボタンとの強弱を明確にするため下線リンク調。 */
.ft-rp-unlock-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-2);
  background: none; border: none; padding: 4px 0; min-height: 32px;
  font-size: 12px; font-weight: 800; color: var(--coral-deep);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ft-rp-unlock-link:hover, .ft-rp-unlock-link:focus-visible { color: var(--ink); }

.ft-rp-bridge {
  margin-top: var(--space-2); padding: var(--space-4); border-radius: 22px;
  background: linear-gradient(160deg, rgba(185,167,248,0.16), rgba(121,221,232,0.08));
  border: 1px solid rgba(23,37,42,0.08);
}
.ft-rp-bridge-label { font-size: 12px; font-weight: 800; color: var(--ink); margin-top: var(--space-3); }
.ft-rp-bridge-list { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.ft-rp-bridge-list li { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: rgba(255,255,255,0.55); border-radius: 10px; padding: 6px 9px; }

/* v18（項目⑤）: 9項目の生データ列挙をやめ、「5つの具体的な成果」を縦積みの
   番号付きリストで見せる。従来のft-rp-bridge-listの2カラムグリッドは使わず、
   1項目ずつ番号・見出し・説明の3段構成で読ませることで「文字が増えるだけ」
   という印象を避ける。 */
.ft-rp-outcome-list { display: flex; flex-direction: column; gap: 8px; grid-template-columns: none; }
.ft-rp-outcome-list li {
  display: flex; align-items: flex-start; gap: 10px; background: rgba(255,255,255,0.7);
  padding: 10px 12px; border-radius: 14px;
}
.ft-rp-outcome-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--lavender);
  color: var(--ink); font-size: 11.5px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.ft-rp-outcome-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ft-rp-outcome-label { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.ft-rp-outcome-text { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 380px) {
  .ft-rp-bridge-list { grid-template-columns: 1fr; }
}

.ft-rp-hero-visual { width: 76px; height: 76px; margin: 0 auto var(--space-2); border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.6), rgba(121,221,232,0.35));
  box-shadow: 0 0 0 4px rgba(255,255,255,0.75); font-size: 40px; }
.ft-rp-hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* v24で追加: ふわふわ版Instagram(post/story)保存ボタン・相性Instagram保存ボタンの
   グルーピング用。既存のFeed版スタイル・v22の内容には一切手を加えていない。 */
.ft-instagram-row { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ft-instagram-row .ft-instagram-label { font-size: 11.5px; font-weight: 800; color: var(--ink-faint); letter-spacing: 0.02em; }
.ft-instagram-row .ft-instagram-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-instagram-row .ft-instagram-btns .btn { flex: 1 1 auto; min-width: 150px; }

/* v24追加分その2（ユーザーフィードバック対応）:
   - .compat-percent-approx: 相手が推測/代表値ベースの時に「目安」と添えるための小ラベル。
   - .ft-fluffy-preview-*: Instagramふわふわ版の実物大プレビュー（post=1080:1350, story=1080:1920）。
     プレビューの<img>は実際に保存/共有されるのと同じ生成関数の出力をそのまま表示するため、
     このCSSは枠のサイズ・比率・見た目のみを定義する（画像内容には一切関与しない）。 */
.compat-percent-approx { display: block; font-size: 10px; font-weight: 800; color: var(--ink-faint); margin-top: 1px; text-align: center; }
.ft-fluffy-preview-row { display: flex; gap: 12px; justify-content: center; margin-top: 10px; }
.ft-fluffy-preview-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; max-width: 160px; }
.ft-fluffy-preview-col .btn { width: 100%; font-size: 12.5px; padding-left: 10px; padding-right: 10px; }
.ft-fluffy-preview-frame { width: 100%; border-radius: 14px; overflow: hidden; background: var(--surface-strong); border: 1px solid rgba(255,255,255,0.6); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; }
.ft-fluffy-preview-frame.is-post { aspect-ratio: 1080 / 1350; }
.ft-fluffy-preview-frame.is-story { aspect-ratio: 1080 / 1920; }
.ft-fluffy-preview-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s ease; }
.ft-fluffy-preview-frame img[src] { opacity: 1; }
.fluffy-share-teaser { text-align: left; }

/* v8: index_v36で成立していた無料診断書の情報密度を、現在の結果画面へ再構成。 */
.ft-free-report { margin-top: 18px; }
.ft-free-report-intro { padding: 4px 2px 16px; }
.ft-free-report-intro h2 { margin: 4px 0 8px; font-size: clamp(22px, 6vw, 30px); line-height: 1.25; letter-spacing: -.025em; }
.ft-free-report-intro > p:last-child { max-width: 42rem; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.ft-free-report-chapter { border-top: 1px solid rgba(23,37,42,.14); background: transparent; }
.ft-free-report-chapter:last-of-type { border-bottom: 1px solid rgba(23,37,42,.14); }
.ft-free-report-chapter summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 15px 2px; cursor: pointer; list-style: none; }
.ft-free-report-chapter summary::-webkit-details-marker { display: none; }
.ft-free-report-title { display: block; color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: -.015em; }
.ft-free-report-lead { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 11.5px; font-weight: 700; }
.ft-free-report-action { flex: 0 0 auto; color: var(--aqua-deep); font-size: 11px; font-weight: 900; }
.ft-free-report-action::after { content: '＋'; display: inline-block; margin-left: 6px; font-size: 15px; }
.ft-free-report-action .is-open { display: none; }
.ft-free-report-chapter[open] .ft-free-report-action .is-closed { display: none; }
.ft-free-report-chapter[open] .ft-free-report-action .is-open { display: inline; }
.ft-free-report-chapter[open] .ft-free-report-action::after { content: '−'; font-size: 15px; }
.ft-free-report-body { padding: 0 2px 22px; }
.ft-free-report-p { margin-top: 10px; color: var(--ink); font-size: 14px; line-height: 1.9; }
.ft-free-report-p:first-child { margin-top: 0; }
.ft-free-report-p strong,
.ft-rp-p strong { color: color-mix(in srgb, var(--aqua-deep) 72%, var(--ink) 28%); font-weight: 950; }
.insight-weakness-row b { color: color-mix(in srgb, var(--coral-deep) 68%, var(--ink) 32%); font-weight: 950; }
.ft-free-report-subhead { margin: 4px 0 8px; color: var(--ink-soft); font-size: 12px; font-weight: 900; }
.ft-free-report-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ft-free-report-list li { position: relative; padding-left: 18px; color: var(--ink); font-size: 13.5px; line-height: 1.65; }
.ft-free-report-list li::before { content: ''; position: absolute; top: .72em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); }
.ft-free-scene { margin-top: 14px; padding-left: 14px; border-left: 2px solid rgba(36,181,165,.42); }
.ft-free-scene-label { color: var(--aqua-deep); font-size: 11px; font-weight: 900; }
.ft-free-scene p:last-child { margin-top: 3px; color: var(--ink); font-size: 13.5px; line-height: 1.75; }
.ft-free-chapter-cta { margin-top: 22px; padding: 16px 0 2px; border-top: 1px solid rgba(23,37,42,.1); }
.ft-free-chapter-cta-label { color: var(--ink-faint); font-size: 10.5px; font-weight: 900; letter-spacing: .08em; }
.ft-free-chapter-cta-question { max-width: 36rem; margin-top: 6px; color: var(--ink); font-size: 13.5px; font-weight: 800; line-height: 1.65; }
.ft-free-chapter-cta-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; }
.ft-free-chapter-cta-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: rgba(23,37,42,.06); color: var(--ink-soft); font-size: 11.5px; font-weight: 800; line-height: 1.4;
}
.ft-free-chapter-cta-mosaic { margin: 8px 0 2px; user-select: none; pointer-events: none; }
.ft-free-chapter-cta-mosaic-line {
  font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 6px;
  filter: blur(4.5px); opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.ft-free-chapter-cta-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; color: var(--aqua-deep); font: inherit; font-size: 12.5px; font-weight: 900; line-height: 1.5; text-align: left; cursor: pointer; }
.ft-free-chapter-cta-link span { transition: transform .18s ease; }
.ft-free-chapter-cta-link:hover span,
.ft-free-chapter-cta-link:focus-visible span { transform: translateX(3px); }
.ft-free-chapter-cta-link:focus-visible { outline: 2px solid var(--aqua-deep); outline-offset: 5px; }
.paid-report-shell.is-free-cta-arrival { animation: ft-free-cta-arrival .9s ease-out; }
@keyframes ft-free-cta-arrival {
  0% { box-shadow: 0 0 0 0 rgba(36,181,165,.28); }
  55% { box-shadow: 0 0 0 9px rgba(36,181,165,.08); }
  100% { box-shadow: 0 0 0 0 rgba(36,181,165,0); }
}
.ft-free-to-personal { margin-top: 22px; padding: 18px 2px 4px; }
.ft-free-to-personal-kicker { margin-bottom: 6px; color: var(--ink-faint); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.ft-free-to-personal p:last-child { font-size: 15px; line-height: 1.7; }

/* v12: 共有層があるあるを読んだ直後に完結できる、軽い画像化導線。 */
.quick-share { margin: 24px 0 28px; padding: 24px 2px; border-top: 3px solid color-mix(in srgb, var(--gc, var(--coral-deep)) 70%, var(--ink) 30%); border-bottom: 1px solid rgba(23,37,42,.14); }
.quick-share h2 { margin-top: 5px; color: var(--ink); font-size: clamp(22px,6vw,30px); line-height: 1.3; letter-spacing: -.025em; }
.quick-share > p:not(.section-label) { max-width: 38rem; margin-top: 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.quick-share-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 17px; }
.quick-share-story,
.quick-share-compat { padding: 5px 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.quick-share-compat { display: inline-flex; align-items: center; gap: 6px; margin-top: 15px; color: var(--aqua-deep); }
.quick-share-story:focus-visible,
.quick-share-compat:focus-visible { outline: 2px solid var(--aqua-deep); outline-offset: 4px; }
@media (min-width: 700px) {
  .ft-free-report-chapter summary { padding-left: 8px; padding-right: 8px; }
  .ft-free-report-body { padding-left: 8px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-free-chapter-cta-link span { transition: none; }
  .paid-report-shell.is-free-cta-arrival { animation: none; }
}