/* ══════════════════════════════════════════════════════════════
   components_pr.css
   Hero / Wisdom / Closing サンドイッチUI 共通スタイル
   案B: Superhuman — Mysteria Purple hero / 圧縮タイポ / 暖クリーム
   紫・金・水色の神秘パレット + Lavender Glow アクセント
   無料版・プレミアム版・個別鑑定・相性診断 で共用
   ═══════════════════════════════════════════════════════════════ */

/* ---------- デザイントークン ---------- */
:root {
  --pr-bg: #0B0B14;
  --pr-card-bg: rgba(255,255,255,0.04);
  --pr-card-border: rgba(255,255,255,0.08);
  --pr-card-border-strong: rgba(255,255,255,0.16);
  --pr-text: #E8E8F0;
  --pr-text-muted: #A8A8B8;
  --pr-text-strong: #FFFFFF;

  /* Superhuman コア パレット（占い適合版） */
  --pr-mysteria: #1B1938;          /* Mysteria Purple — Hero 深紫 */
  --pr-mysteria-tint: #2A2450;     /* Hero 中間色 */
  --pr-lavender: #CBB7FB;          /* Lavender Glow — 主アクセント */
  --pr-amethyst: #714CB6;          /* Amethyst Link — リンク */
  --pr-warm-cream: #E9E5DD;        /* Warm Cream — ボタン */
  --pr-charcoal: #292827;          /* Charcoal Ink — ボタン内テキスト */
  --pr-parchment: #DCD7D3;         /* Parchment Border */
  --pr-gold: #E5C07B;              /* 神秘の金 */
  --pr-gold-soft: rgba(229,192,123,0.45);
  --pr-mist-blue: #7FD4FF;         /* 水色アクセント */

  /* 個別鑑定テーマ（Superhuman再調整：Lavender基調 + 各テーマに副色） */
  --pr-accent-cosmic: #CBB7FB;     /* 総合：Lavender Glow */
  --pr-accent-love: #F9A8D4;       /* 恋愛：ソフトピンク（Lavender寄り） */
  --pr-accent-work: #9BB3FF;       /* 仕事：ミストブルー */
  --pr-accent-money: #E5C07B;      /* 金運：神秘の金 */
  --pr-accent-spiritual: #A5E9D6;  /* 霊感：薄翠水 */
  --pr-accent-special: #E5C07B;    /* 開運：金 */

  /* サイズトークン（Superhuman: 8/16 の二値） */
  --pr-radius: 8px;
  --pr-radius-lg: 16px;
  --pr-card-padding: 24px;
  --pr-card-padding-sm: 18px;
  --pr-card-gap: 16px;
}

/* ---------- 共通コンテナ ---------- */
.pr-themed{
  position:relative;
  color:var(--pr-text);
}
.pr-themed p{
  opacity:1 !important;
  transform:none !important;
  margin:0 !important;
  line-height:1.85;
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  font-weight:400;
  color:var(--pr-text);
}
.pr-themed p + p{ margin-top:12px !important; }

/* ══════════════════════════════════════
   Hero カード（Mysteria Purple グラデ）
══════════════════════════════════════ */
.pr-hero{
  position:relative;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  align-items:flex-start;
  padding:28px var(--pr-card-padding) var(--pr-card-padding);
  margin:0 0 var(--pr-card-gap);
  border-radius:var(--pr-radius-lg);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(203,183,251,0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--pr-mysteria) 0%, var(--pr-mysteria-tint) 100%);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  animation:pr-hero-in .7s cubic-bezier(.22,.9,.3,1) both;
}
/* 金の薄いトップライン（Superhuman の「唯一の一撃」感） */
.pr-hero::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--pr-gold-soft) 50%, transparent 100%);
  pointer-events:none;
}
.pr-hero-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  color:var(--pr-lavender);
  filter:drop-shadow(0 0 14px rgba(203,183,251,0.55));
}
.pr-hero-body{
  font-family:"Noto Serif JP",serif;
  font-size:16px;
  line-height:1.78;
  color:rgba(255,255,255,0.92);
  letter-spacing:.01em;
}
.pr-hero-body p:first-child{
  font-family:"Noto Serif JP",serif;
  font-size:20px;
  font-weight:600;
  line-height:1.35;               /* Superhuman 圧縮タイポ寄り */
  letter-spacing:-0.01em;
  color:#FFFFFF;
  margin-bottom:12px !important;
}
.pr-hero-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:11px;
  font-weight:700;                /* Superhuman micro label */
  color:var(--pr-lavender);
  letter-spacing:.38em;
  text-transform:uppercase;
}
.pr-hero-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  color:rgba(255,255,255,0.82);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--pr-radius);
  text-transform:none;
}
body.is-free .pr-hero-badge{ display:none; }
@keyframes pr-hero-in{
  0%   { opacity:0; transform:translateY(-10px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════
   Wisdom カード（本文・積層）
══════════════════════════════════════ */
.pr-body{
  display:flex; flex-direction:column;
  gap:var(--pr-card-gap);
  margin:0 0 var(--pr-card-gap);
}
.pr-wisdom{
  position:relative;
  display:grid;
  grid-template-columns:36px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:var(--pr-card-padding);
  border-radius:var(--pr-radius-lg);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--pr-card-border);
  opacity:0;
  transform:translateY(10px);
  animation:pr-wisdom-in .55s cubic-bezier(.22,.9,.3,1) forwards;
}
/* 要件仕様: animation-delay .25 / .34 / .43 */
.pr-wisdom:nth-child(1){ animation-delay:.25s; }
.pr-wisdom:nth-child(2){ animation-delay:.34s; }
.pr-wisdom:nth-child(3){ animation-delay:.43s; }
.pr-wisdom-mark{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  color:var(--pr-lavender);
  font-size:1.2rem;
  flex-shrink:0;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(203,183,251,0.35));
}
.pr-wisdom-body{
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  font-size:15px;
  line-height:1.85;               /* Superhuman body 生成 1.50 に近い数字 */
  color:var(--pr-text);
  letter-spacing:.01em;
}
/* Phase 1.5-D v2: simpleMarkdown が生成する <p> の段落間スペースを統一 */
.pr-wisdom-body p,
.pr-hero-body p,
.pr-closing-body p {
  margin: 0 0 .9em 0;
}
.pr-wisdom-body p:last-child,
.pr-hero-body p:last-child,
.pr-closing-body p:last-child {
  margin-bottom: 0;
}
@keyframes pr-wisdom-in{
  0%   { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════
   Closing カード（金のアンダーライン・中央寄せ）
══════════════════════════════════════ */
.pr-closing{
  position:relative;
  margin:0 0 var(--pr-card-gap);
  padding:28px var(--pr-card-padding);
  border-radius:var(--pr-radius-lg);
  background:linear-gradient(180deg, rgba(203,183,251,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border:1px solid var(--pr-card-border-strong);
  text-align:center;
  animation:pr-wisdom-in .6s cubic-bezier(.22,.9,.3,1) .55s both;
}
.pr-closing-label{
  display:inline-block;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:11px;
  font-weight:700;
  color:var(--pr-gold);
  letter-spacing:.42em;
  padding-bottom:10px;
  margin-bottom:16px;
  border-bottom:1px solid var(--pr-gold-soft);
  text-transform:uppercase;
}
.pr-closing-body{
  font-family:"Noto Serif JP",serif;
  font-size:15px;
  line-height:1.82;
  color:var(--pr-text);
  font-style:italic;
  letter-spacing:.02em;
}

/* ══════════════════════════════════════
   テーマ別アクセント（hero-icon / wisdom-mark / closing-label 色差し替え）
   Superhuman の「アクセントは1色だけ」原則に従い、金はラベルのみ保持、
   テーマ色は hero-icon と wisdom-mark に適用（全体の紫ベースは共通）
══════════════════════════════════════ */
.pr-theme-cosmic .pr-hero-icon,
.pr-theme-cosmic .pr-wisdom-mark{ color:var(--pr-accent-cosmic); }
.pr-theme-cosmic .pr-hero-icon{ filter:drop-shadow(0 0 14px rgba(203,183,251,0.55)); }

.pr-theme-love .pr-hero-icon,
.pr-theme-love .pr-wisdom-mark{ color:var(--pr-accent-love); }
.pr-theme-love .pr-hero-icon{ filter:drop-shadow(0 0 14px rgba(249,168,212,0.5)); }

.pr-theme-work .pr-hero-icon,
.pr-theme-work .pr-wisdom-mark{ color:var(--pr-accent-work); }
.pr-theme-work .pr-hero-icon{ filter:drop-shadow(0 0 14px rgba(155,179,255,0.5)); }

.pr-theme-money .pr-hero-icon,
.pr-theme-money .pr-wisdom-mark{ color:var(--pr-accent-money); }
.pr-theme-money .pr-hero-icon{ filter:drop-shadow(0 0 14px rgba(229,192,123,0.55)); }

.pr-theme-spiritual .pr-hero-icon,
.pr-theme-spiritual .pr-wisdom-mark{ color:var(--pr-accent-spiritual); }
.pr-theme-spiritual .pr-hero-icon{ filter:drop-shadow(0 0 14px rgba(165,233,214,0.5)); }

/* 開運（special / gold）: Hero 背景に金のオーラを追加 */
.pr-theme-special .pr-hero{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(229,192,123,0.24) 0%, transparent 60%),
    linear-gradient(135deg, var(--pr-mysteria) 0%, var(--pr-mysteria-tint) 100%);
}
.pr-theme-special .pr-hero-icon,
.pr-theme-special .pr-wisdom-mark{ color:var(--pr-accent-special); }
.pr-theme-special .pr-hero-icon{ filter:drop-shadow(0 0 16px rgba(229,192,123,0.7)); }

/* ══════════════════════════════════════
   SP 最適化（≤540px）
══════════════════════════════════════ */
@media (max-width:540px){
  .pr-hero{
    grid-template-columns:1fr;
    padding:22px var(--pr-card-padding-sm);
    gap:10px;
    text-align:left;
    border-radius:var(--pr-radius-lg);
  }
  .pr-hero-icon{
    margin:0;
    width:40px; height:40px;
    font-size:1.6rem;
  }
  .pr-hero-body{ font-size:15px; line-height:1.76; }
  .pr-hero-body p:first-child{ font-size:18px; line-height:1.38; }

  .pr-wisdom{
    display:block;
    padding:var(--pr-card-padding-sm);
    border-radius:var(--pr-radius-lg);
  }
  .pr-wisdom-mark{
    display:inline-block;
    width:auto; height:auto;
    margin:0 6px 0 0;
    vertical-align:baseline;
    font-size:1em;
    line-height:1;
  }
  .pr-wisdom-body{
    display:inline;
    font-size:15px;
    line-height:1.8;
  }
  .pr-wisdom-body p{ display:block; }
  .pr-wisdom-body p:first-child{ display:inline; }

  .pr-closing{ padding:22px var(--pr-card-padding-sm); }
  .pr-closing-label{ font-size:10px; letter-spacing:.36em; }
  .pr-closing-body{ font-size:14px; line-height:1.76; }
}

/* ══════════════════════════════════════
   天命誘導バナー（案α: x.ai × Apple / 大型インパクト）
   Phase 2.5 共通スタイル
══════════════════════════════════════ */
.tenme-cta-banner{
  display:block;
  width:100%;
  margin:32px 0 16px;
  padding:32px 24px;
  border:none;
  border-radius:var(--pr-radius-lg);
  background:linear-gradient(135deg, #1E1B4B 0%, #4C1D95 50%, #8B5CF6 100%);
  color:#FFFFFF;
  box-shadow:0 10px 40px rgba(139,92,246,0.3);
  text-align:center;
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.tenme-cta-banner:hover,
.tenme-cta-banner:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 50px rgba(139,92,246,0.45);
  outline:none;
}
.tenme-cta-banner::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.18) 0%, transparent 60%);
  pointer-events:none;
}
.tenme-cta-banner .star-icon{
  display:block;
  font-size:48px;
  color:#D4AF37;
  margin:0 auto 12px;
  filter:drop-shadow(0 0 16px rgba(212,175,55,0.8));
  animation:starPulse 2s ease-in-out infinite;
  position:relative;
}
.tenme-cta-banner .main-copy{
  font-family:"Noto Serif JP",serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.5;
  margin:0 0 8px;
  color:#FFFFFF;
  text-shadow:0 2px 12px rgba(0,0,0,0.4);
  position:relative;
}
.tenme-cta-banner .sub-copy{
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:.12em;
  color:rgba(255,255,255,0.82);
  margin:0;
  position:relative;
}
@keyframes starPulse{
  0%,100% { transform:scale(1); opacity:.95; }
  50%     { transform:scale(1.1);  opacity:1; }
}
@media (max-width:540px){
  .tenme-cta-banner{ padding:26px 18px; margin:24px 0 12px; }
  .tenme-cta-banner .star-icon{ font-size:40px; }
  .tenme-cta-banner .main-copy{ font-size:18px; }
  .tenme-cta-banner .sub-copy{ font-size:13px; }
}

/* ══════════════════════════════════════
   Phase J: ロックゲート（無料版 相性タブ専用）
   - compat: hero + wisdom冒頭25%(フェード) + 強化ゲート
   - gold  : hero 2文のみ + 強化ゲート（wisdom/closing 完全非表示）
══════════════════════════════════════ */
.pr-wisdom--fade{
  position:relative;
  max-height:220px;
  overflow:hidden;
}
.pr-wisdom--fade .pr-wisdom-body{
  color:var(--pr-text-muted);
  opacity:.75;
}
.pr-wisdom--fade::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:70%;
  background:linear-gradient(180deg, transparent 0%, var(--pr-bg) 92%);
  pointer-events:none;
}

.pr-lock-gate{
  position:relative;
  margin:0 0 var(--pr-card-gap);
  padding:28px 24px 24px;
  border-radius:var(--pr-radius-lg);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(229,192,123,0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(203,183,251,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(229,192,123,0.28);
  text-align:center;
  animation:pr-wisdom-in .6s cubic-bezier(.22,.9,.3,1) .45s both;
}
/* 開運タブ: 金のオーラを強める */
.pr-lock-gate--gold{
  border-color:rgba(229,192,123,0.48);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(229,192,123,0.22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(229,192,123,0.08) 0%, rgba(27,25,56,0.4) 100%);
}
.pr-lock-gate-label{
  display:inline-block;
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size:10px;
  font-weight:700;
  color:var(--pr-gold);
  letter-spacing:.42em;
  padding:4px 12px;
  border:1px solid var(--pr-gold-soft);
  border-radius:999px;
  margin-bottom:16px;
  text-transform:uppercase;
}
.pr-lock-hook{
  font-family:"Noto Serif JP",serif;
  font-size:17px;
  font-weight:600;
  line-height:1.55;
  color:#FFFFFF;
  letter-spacing:.02em;
  margin:0 0 18px;
}
.pr-lock-benefits{
  list-style:none;
  padding:0;
  margin:0 auto 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  max-width:400px;
}
.pr-lock-benefits li{
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,0.88);
  padding:10px 14px;
  border-radius:var(--pr-radius);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  letter-spacing:.01em;
}
.pr-lock-btn{
  display:inline-block;
  padding:14px 32px;
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--pr-charcoal);
  background:var(--pr-warm-cream);
  border:none;
  border-radius:var(--pr-radius);
  text-decoration:none;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 4px 20px rgba(229,192,123,0.28);
}
.pr-lock-btn:hover,
.pr-lock-btn:focus-visible{
  opacity:.92;
  transform:translateY(-1px);
  box-shadow:0 6px 26px rgba(229,192,123,0.4);
  outline:none;
}
.pr-lock-note{
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,0.55);
  letter-spacing:.14em;
  margin:14px 0 0;
}

@media (max-width:540px){
  .pr-lock-gate{ padding:24px 18px 20px; }
  .pr-lock-hook{ font-size:15px; }
  .pr-lock-benefits li{ font-size:12px; padding:9px 12px; }
  .pr-lock-btn{ width:100%; padding:14px 20px; font-size:14px; }
  .pr-wisdom--fade{ max-height:180px; }
}

/* ══════════════════════════════════════
   モーション低減（アクセシビリティ）
══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .pr-hero, .pr-wisdom, .pr-closing, .pr-lock-gate,
  .tenme-cta-banner .star-icon{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .tenme-cta-banner:hover{ transform:none; }
}