/* ============================================================
   rich-tools.css — sharoushi ツール頁/一覧用リッチ層（コンポーネント分離）
   トップで確立した設計言語(白地＋グラデ/奥行き/モーション)をツール頁の
   既存クラス(.calc-btn/.cta-btn/.card/.tool-card/.nav)にフックして展開。
   ============================================================ */
:root{
  --rc-blue:#2563EB; --rc-indigo:#4F46E5; --rc-violet:#7C3AED; --rc-gold:#C9A86A;
  --rc-grad:linear-gradient(100deg,#2563EB 0%,#4F46E5 50%,#7C3AED 100%);
  --rc-grad-gold:linear-gradient(100deg,#2563EB,#7C3AED 55%,#C9A86A 100%);
  --rc-e1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --rc-e2:0 6px 16px rgba(16,24,40,.07),0 2px 5px rgba(16,24,40,.04);
  --rc-e3:0 16px 40px rgba(16,24,40,.12),0 4px 10px rgba(16,24,40,.05);
  --rc-ease:cubic-bezier(.22,1,.36,1);
}

/* ナビ：ガラス質 */
.nav{ backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.78)!important; }

/* ヒーロー上部のゴールド極細ライン（ポイント） */
.hero{ position:relative; }
.hero::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(201,168,106,.5),rgba(124,58,237,.5),transparent); }

/* 主ボタン：ブランドのグラデ＋グロー＋ホバーリフト＋シマー */
.calc-btn{ background:var(--rc-grad)!important; border:none!important;
  box-shadow:0 10px 28px rgba(79,70,229,.26); position:relative; overflow:hidden;
  transition:transform .25s var(--rc-ease), box-shadow .25s var(--rc-ease), filter .25s!important; }
.calc-btn::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.4) 50%,transparent 80%);
  transform:translateX(-130%); transition:transform .75s var(--rc-ease); }
.calc-btn:hover{ background:var(--rc-grad)!important; transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(79,70,229,.34); filter:brightness(1.05); }
.calc-btn:hover::after{ transform:translateX(130%); }

/* 結果側CTA・一覧の主ボタンもグラデ */
.cta-btn, .ai-cta .btn-white{ transition:transform .25s var(--rc-ease), box-shadow .25s, filter .25s; }
.cta-btn{ background:var(--rc-grad)!important; box-shadow:0 8px 22px rgba(79,70,229,.24); }
.cta-btn:hover{ background:var(--rc-grad)!important; transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 14px 34px rgba(79,70,229,.32); }

/* カード：奥行き＋角丸 */
.card, .result-card{ border:1px solid rgba(16,24,40,.07)!important; border-radius:16px!important; box-shadow:var(--rc-e1); }

/* ツール一覧カード：elevation＋ホバー浮上＋グラデバー＋アイコン演出（tools.html） */
.tool-card{ border:1px solid rgba(16,24,40,.07)!important; border-radius:18px!important; box-shadow:var(--rc-e1);
  position:relative; overflow:hidden; transition:transform .3s var(--rc-ease), box-shadow .3s var(--rc-ease), border-color .3s; }
.tool-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--rc-grad-gold);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--rc-ease); }
.tool-card:hover{ transform:translateY(-6px); box-shadow:var(--rc-e3); border-color:rgba(79,70,229,.26)!important; }
.tool-card:hover::before{ transform:scaleX(1); }
.tool-card .tool-icon{ transition:transform .35s var(--rc-ease); display:inline-block; }
.tool-card:hover .tool-icon{ transform:scale(1.12) rotate(-3deg); }
.tool-cta{ background:var(--rc-grad)!important; transition:filter .25s; }
.tool-card:hover .tool-cta{ filter:brightness(1.06); }

/* タグはブランド寄りの淡色に */
.tool-tag{ background:rgba(79,70,229,.07)!important; color:#4F46E5!important; }

/* 入力フォーカスのリング */
.input:focus-visible, .select:focus-visible, select:focus-visible{ outline:2px solid var(--rc-blue); outline-offset:2px; }

/* メール捕捉ブロック(tp-optin)のボタンをグラデに */
#tp-btn{ background:var(--rc-grad)!important; }

@media (prefers-reduced-motion:reduce){ .calc-btn::after{ display:none; } }

/* ============================================================
   P2.5 体験差別化：結果カードPNG / PDF印刷 / ツール間ハンドオフ
   share-card.js / tool-handoff.js と対で使う表示層。ブランド=sharoushi-agent。
   ============================================================ */

/* 引き継ぎ通知バナー（受信側・既定は hidden 属性で非表示） */
.handoff-banner{ max-width:640px; margin:20px auto -4px; padding:12px 16px;
  background:rgba(79,70,229,.06); border:1px solid rgba(79,70,229,.22);
  border-left:3px solid var(--rc-indigo); border-radius:10px;
  font-size:13px; color:#3730A3; line-height:1.7; }
.handoff-banner[hidden]{ display:none; }

/* 結果アクション（画像で保存 / PDF・印刷）ボタン列 */
.result-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.rt-btn{ flex:1 1 auto; min-width:140px; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; background:#fff; color:var(--rc-indigo); border:1.5px solid rgba(79,70,229,.28);
  border-radius:10px; padding:11px 16px; font-size:13px; font-weight:700; cursor:pointer;
  font-family:inherit; text-decoration:none; transition:background .2s, border-color .2s, transform .2s; }
.rt-btn:hover{ background:rgba(79,70,229,.06); border-color:rgba(79,70,229,.5); transform:translateY(-1px); }
.rt-btn svg{ width:15px; height:15px; flex-shrink:0; }

/* 次ツールへの引き継ぎ導線（送信側） */
.handoff-next{ margin-top:20px; background:#F8FAFC; border:1px solid #E2E8F0;
  border-radius:12px; padding:18px 20px; }
.handoff-next-title{ font-size:14px; font-weight:700; color:#0F172A; margin-bottom:4px; }
.handoff-next-sub{ font-size:12px; color:#475569; line-height:1.7; margin-bottom:12px; }
.handoff-next-links{ display:flex; flex-wrap:wrap; gap:10px; }
.handoff-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:#fff; border:1.5px solid rgba(79,70,229,.28); color:var(--rc-indigo);
  border-radius:10px; padding:10px 16px; font-size:13px; font-weight:700;
  transition:background .2s, border-color .2s, transform .2s; }
.handoff-link:hover{ background:rgba(79,70,229,.06); border-color:rgba(79,70,229,.5); transform:translateY(-1px); }

/* 印刷専用ヘッダ（画面では非表示・印刷時のみ表示） */
.print-only{ display:none; }
.print-head{ font-size:13px; font-weight:700; color:#1E293B; margin-bottom:12px;
  padding-bottom:8px; border-bottom:2px solid var(--rc-indigo); }

/* ── PDF/印刷: 結果カードだけを綺麗に出す print stylesheet ──
   jsPDF等のvendorはCSP(script-src 'self')下で自己配信すると重く、印刷CSSで
   同等の「PDF保存」を実現できるため不採用。window.print() のブラウザ標準
   「PDFとして保存」を使う。 */
@media print{
  /* ページchrome・記事・入力・メール捕捉を落とす */
  .nav, .hero, .article, .prose, .explainer, .footer, #tp-optin,
  .calc-btn, .result-actions, .handoff-banner, .no-print{ display:none !important; }
  /* 入力フォームカード（.main直下の.card）は印刷しない。結果は #results に集約。 */
  .main > .card{ display:none !important; }
  /* #results 内は結果カードだけ残す（CTA・シェア・関連・引き継ぎ導線・メール捕捉を落とす） */
  #results > *:not(.result-card):not(.card):not(.print-head){ display:none !important; }
  body{ background:#fff !important; color:#000; }
  .main{ max-width:100%; margin:0; padding:0; }
  #results{ display:block !important; }
  .result-card, #results .card{ box-shadow:none !important;
    border:1px solid #cbd5e1 !important; break-inside:avoid; }
  .print-only{ display:block !important; }
  @page{ margin:16mm; }

  /* 36協定チェック（LP型・独自構造）: 結果ボックスだけ残す */
  nav, footer, .lp-hero, .info-section, .lp-cta, .disclaimer,
  .checker-header, .field-row, .special-row, .btn-check,
  .result-cta-box, .btn-reset{ display:none !important; }
  #result-box{ display:block !important; box-shadow:none !important;
    border:1px solid #cbd5e1 !important; break-inside:avoid; padding:16px !important; }
  .checker-card, .checker-body{ border:none !important; box-shadow:none !important; padding:0 !important; }
}

/* 感想リンク(KoeWall収集リンク) — ツール完了時に js/track.js が結果領域へ差し込む。
   結果の邪魔をしないよう、結果カードの下に控えめに置く。 */
.voice-invite{
  margin-top:20px; padding:14px 16px;
  border:1px solid #e2e8f0; border-radius:10px;
  background:#f8fafc;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
}
.voice-invite-text{ margin:0; font-size:14px; color:#475569; }
.voice-invite-link{
  flex-shrink:0; font-size:14px; font-weight:600;
  color:#0f172a; text-decoration:underline; text-underline-offset:3px;
}
.voice-invite-link:hover{ color:#334155; }
.voice-invite-link:focus-visible{ outline:2px solid #0f172a; outline-offset:2px; border-radius:3px; }
@media print{ .voice-invite{ display:none !important; } }