/* ============================================================
   占い師.com 個別ページ 追加 override (10項目改善 2026-05-24)
   uranaishi-post.css の後に load される追加CSS
   ============================================================ */

/* ====== ステータス色ルール統一 ====== */
/* 待機中=緑（接続可・ポジティブ）、鑑定中=赤（接続不可・警告）、
   予約待ち=橙金（少し待てば接続）、時間外=グレー */
#uranaishi-post .status--waiting::before {
  background: var(--status-waiting) !important; /* 緑 #6ec39b */
  box-shadow: 0 0 0 3px rgba(110, 195, 155, 0.20);
}
#uranaishi-post .status--busy::before {
  background: var(--status-busy) !important; /* 赤 #c2545a */
}
#uranaishi-post .status--queued::before {
  background: var(--status-queued) !important; /* 橙金 #d4a04a */
}
#uranaishi-post .status--offline::before {
  background: var(--status-offline) !important; /* グレー #6b6680 */
}
/* portrait オーバーレイも同じルール（live class は廃止） */
#uranaishi-post .status--overlay.status--waiting::before {
  background: var(--status-waiting) !important;
}
#uranaishi-post .status__live { display: none !important; } /* LIVEラベル廃止 */

/* ====== SWELL 自動目次を非表示 ======
   .p-toc は SWELL が the_content filter で自動挿入する目次。
   SWELL カスタマイザー UI に明示的なOFFキーが見つからないため一旦CSSで対応。
   TODO: SWELL の正しい設定キー or filter を見つけたら撤去 */
body:has(#uranaishi-post) .p-toc,
body:has(#uranaishi-post) .swell-toc {
  display: none !important;
}

/* ====== teacher-fv の見出し（h1→span 化対応） ======
   元の pages.css の .teacher-fv h1 セレクタが H1重複解消で span 化されたため
   .teacher-fv__name にも同じスタイルを当てる */
#uranaishi-post .teacher-fv .teacher-fv__name,
#uranaishi-post .teacher-fv .h1-replaced {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: clamp(48px, 6vw, 72px) !important;
  line-height: 1.1 !important;
  color: var(--text-heading) !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  margin: 0 !important;
}

/* ====== CTAボタンの文字色を白に（コントラスト比改善 WCAG AA以上） ====== */
#uranaishi-post .btn--primary,
#uranaishi-post a.btn--primary,
#uranaishi-post button.btn--primary {
  color: #ffffff !important;
}
#uranaishi-post .btn--primary:hover,
#uranaishi-post a.btn--primary:hover {
  color: #ffffff !important;
}
/* CTAボタン内の矢印 → も白 */
#uranaishi-post .btn--primary .arrow,
#uranaishi-post .btn--primary span {
  color: #ffffff !important;
}

/* ====== status ドットを常時点滅（status--pulseクラス不要） ======
   待機中=緑/鑑定中=赤/予約待ち=橙金、portrait/main 両方とも自動pulse */
#uranaishi-post .status--waiting::before,
#uranaishi-post .status--busy::before,
#uranaishi-post .status--queued::before {
  animation: statusPulse 1.6s ease-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  #uranaishi-post .status--waiting::before,
  #uranaishi-post .status--busy::before,
  #uranaishi-post .status--queued::before {
    animation: none !important;
  }
}

/* ====== セクション見出し h2 の border 完全リセット ====== */
#uranaishi-post .section-head,
#uranaishi-post .section-head h2,
#uranaishi-post section h2 {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* SWELLの h2 デフォルト疑似要素も消す */
#uranaishi-post h2::before,
#uranaishi-post h2::after {
  display: none !important;
  content: none !important;
}
/* .section-head の .rule（短い金線60px）だけは残す */
#uranaishi-post .section-head .rule {
  display: block !important;
  width: 60px !important;
  height: 1px !important;
  background: var(--gold-bright) !important;
  margin-top: 28px !important;
}

/* ====== レーダースコアバー幅を data-score 属性から計算 ====== */
/* [data-score="4.8"] → width: 96% (4.8/5.0) */
#uranaishi-post .radar-row__bar {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  background: var(--gold-line);
  border-radius: 2px;
  overflow: hidden;
}
#uranaishi-post .radar-row__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--score, 0) * 1%);
  background: var(--gold-bright);
  border-radius: 2px;
}
/* score を data 属性から CSS変数化（CSS attr() の type 引数は実験的なので
   インラインstyleで設定する方式を投稿content側で対応する） */
#uranaishi-post .radar-row__bar[data-score="5.0"]::after { width: 100%; }
#uranaishi-post .radar-row__bar[data-score="4.9"]::after { width: 98%; }
#uranaishi-post .radar-row__bar[data-score="4.8"]::after { width: 96%; }
#uranaishi-post .radar-row__bar[data-score="4.7"]::after { width: 94%; }
#uranaishi-post .radar-row__bar[data-score="4.6"]::after { width: 92%; }
#uranaishi-post .radar-row__bar[data-score="4.5"]::after { width: 90%; }
#uranaishi-post .radar-row__bar[data-score="4.4"]::after { width: 88%; }
#uranaishi-post .radar-row__bar[data-score="4.3"]::after { width: 86%; }
#uranaishi-post .radar-row__bar[data-score="4.2"]::after { width: 84%; }
#uranaishi-post .radar-row__bar[data-score="4.1"]::after { width: 82%; }
#uranaishi-post .radar-row__bar[data-score="4.0"]::after { width: 80%; }
#uranaishi-post .radar-row__bar[data-score="3.9"]::after { width: 78%; }
#uranaishi-post .radar-row__bar[data-score="3.8"]::after { width: 76%; }
#uranaishi-post .radar-row__bar[data-score="3.7"]::after { width: 74%; }
#uranaishi-post .radar-row__bar[data-score="3.6"]::after { width: 72%; }
#uranaishi-post .radar-row__bar[data-score="3.5"]::after { width: 70%; }
#uranaishi-post .radar-row__bar[data-score="3.4"]::after { width: 68%; }
#uranaishi-post .radar-row__bar[data-score="3.3"]::after { width: 66%; }
#uranaishi-post .radar-row__bar[data-score="3.2"]::after { width: 64%; }
#uranaishi-post .radar-row__bar[data-score="3.1"]::after { width: 62%; }
#uranaishi-post .radar-row__bar[data-score="3.0"]::after { width: 60%; }

/* ====== 引用ブロック(口コミ)の幅を container と揃える ====== */
#uranaishi-post .review-quote,
#uranaishi-post blockquote {
  max-width: var(--container, 1080px);
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  box-sizing: border-box;
}

/* ====== 良い口コミ傾向の summary 文を横幅一杯に解放 ====== */
#uranaishi-post .review-summary {
  max-width: none !important;
  width: 100% !important;
}

/* ====== まとめ本文も横幅一杯に解放 ====== */
#uranaishi-post .summary-body {
  max-width: none !important;
  width: 100% !important;
}
/* 引用ブロック内の citation も色統一 */
#uranaishi-post .review-quote cite,
#uranaishi-post blockquote cite {
  color: var(--text-muted) !important;
}

/* ====== 基本情報テーブルのpadding/border修正 ====== */
#uranaishi-post .basic-info table,
#uranaishi-post .info-table,
#uranaishi-post table {
  width: 100%;
  border-collapse: collapse;
  border: 0 !important;
  background: transparent !important;
  margin: 0;
}
#uranaishi-post table th,
#uranaishi-post table td {
  padding: 16px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gold-line) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  vertical-align: top;
  text-align: left;
}
#uranaishi-post table th {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-muted) !important;
  letter-spacing: 0.04em;
  width: 32%;
  white-space: nowrap;
}
#uranaishi-post table tr:last-child th,
#uranaishi-post table tr:last-child td {
  border-bottom: 0 !important;
}

/* ====== パンくず表示+デザイン（強化版） ====== */
body:has(#uranaishi-post) .p-breadcrumb,
body:has(#uranaishi-post) #breadcrumb {
  display: block !important;
  background: var(--bg-section) !important;
  border-top: 1px solid var(--gold-line) !important;
  border-bottom: 1px solid var(--gold-line) !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
body:has(#uranaishi-post) .p-breadcrumb__list,
body:has(#uranaishi-post) #breadcrumb ol {
  max-width: var(--container, 1080px) !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
body:has(#uranaishi-post) .p-breadcrumb__item,
body:has(#uranaishi-post) #breadcrumb li {
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  color: var(--text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
}
body:has(#uranaishi-post) .p-breadcrumb__item:not(:last-child)::after,
body:has(#uranaishi-post) #breadcrumb li:not(:last-child)::after {
  content: "›" !important;
  margin: 0 10px !important;
  color: var(--gold-bright) !important;
  font-size: 16px !important;
}
body:has(#uranaishi-post) .p-breadcrumb a,
body:has(#uranaishi-post) #breadcrumb a {
  color: var(--text-primary) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
}
body:has(#uranaishi-post) .p-breadcrumb a:hover {
  color: var(--text-heading) !important;
}
body:has(#uranaishi-post) .p-breadcrumb [aria-current],
body:has(#uranaishi-post) .p-breadcrumb__item:last-child,
body:has(#uranaishi-post) #breadcrumb li:last-child {
  color: var(--text-heading) !important;
  font-weight: 600 !important;
}
body:has(#uranaishi-post) .p-breadcrumb .icon-home,
body:has(#uranaishi-post) .p-breadcrumb .__home {
  color: var(--text-muted) !important;
  margin-right: 4px !important;
}

/* ====== portrait プレースホルダーを実画像に対応 ====== */
#uranaishi-post .portrait__monogram { display: none !important; }
/* 画像上の PR バッジを非表示（PR表記はCTA近傍の「※広告を含みます」で代替） */
#uranaishi-post .portrait__pr { display: none !important; }

/* ====== SWELL の大型アイキャッチ自動表示を非表示 ======
   OGP/SNS用 featured_media は維持しつつ、投稿冒頭の巨大アイキャッチだけ消す */
body:has(#uranaishi-post) .p-articleThumb,
body:has(#uranaishi-post) figure.p-articleThumb {
  display: none !important;
}

/* ====== SWELL 自動 PR 表記バッジを非表示（パンくず下の余白原因）======
   CTA 直下に独自「※広告を含みます」を配置しているため SWELL 自動表記は冗長。
   article 直下の .c-prNotation が height 47.95px + margin上下 22.8px×2 = 93.55px の
   無駄余白をパンくず〜FV 間に作っていたので消す（投稿表示時のみ）。 */
body:has(#uranaishi-post) .c-prNotation,
body:has(#uranaishi-post) .c-prNotation.is-style-bg_stripe {
  display: none !important;
}
/* SWELLが post_content の上にmargin 64px入れるので除去 */
body:has(#uranaishi-post) .post_content {
  margin-top: 0 !important;
}
#uranaishi-post .portrait img,
#uranaishi-post .teacher-fv__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#uranaishi-post .portrait::before { opacity: 0.15 !important; }