/* ============================================================
   占い師詳細ページ v4（デザイン: 慈留先生 詳細ページ（スタンドアロン））
   カラーは app.css :root の v4 tokens（--v4-*）を参照（カテゴリv4と共通トークン）
   ============================================================ */

.teller-v4 {
  background: var(--v4-zone);
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--v4-text);
}
.teller-v4 a { color: var(--v4-purple-light); text-decoration: none; }
.teller-v4 a:hover { color: var(--v4-purple); text-decoration: underline; }
.ftv4-inner {
  max-width: 430px;
  margin: 0 auto;
  background: var(--v4-bg);
  min-height: 100vh;
  padding-bottom: 96px;
}

/* ---- 見出し（デザインシステム: 見出し=Shippori Mincho / 本文=Zen Maru Gothic） ----
   .teller-v4 で修飾し、各セクション側の font-weight 指定より優先させる */
.teller-v4 .ftv4-name,
.teller-v4 .ftv4-summary-title,
.teller-v4 .fs-impression__title,
.teller-v4 .ftv4-section-title,
.teller-v4 .ftv4-related-heading,
.teller-v4 .ftv4-faq-heading {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
}

/* ---- 星（rating に応じた塗り分けは style 属性の --pct で行う） ---- */
.ftv4-stars {
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--v4-gold-light) var(--pct, 0%), var(--star-base, var(--white)) var(--pct, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.7px var(--v4-gold);
}

/* ---- パンくず + バッジ ---- */
.ftv4-head { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 10px; }
/* パンくずは v2（.ft-v2 .v2-breadcrumb）と同じ見た目に揃える */
.teller-v4 .v2-breadcrumb {
  /* app.css のグローバル nav（max-width/margin auto/flex）を打ち消して左寄せにする */
  display: block;
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: 0.75rem;
  color: var(--v4-text-faint);
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.teller-v4 .v2-breadcrumb::-webkit-scrollbar { display: none; }
.teller-v4 .v2-breadcrumb a { color: var(--v4-text-faint); text-decoration: none; transition: color 0.3s; }
.teller-v4 .v2-breadcrumb a:hover { color: var(--v4-purple-light); text-decoration: none; }
.teller-v4 .v2-breadcrumb span { margin: 0 0.4rem; }

/* PR表記も v2（.ft-v2 .v2-pr-notice）に合わせる。左右余白は .ftv4-head が持つ */
.teller-v4 .v2-pr-notice { font-size: 0.75rem; color: var(--v4-text-faint); }
.teller-v4 .v2-pr-date { margin-left: 0.5em; }
.ftv4-badge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftv4-rank-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--v4-gold-bg); border: 1px solid var(--v4-gold-light); border-radius: 999px; padding: 5px 12px;
}
.ftv4-rank-badge-mark { color: var(--v4-gold); font-size: 12px; }
.ftv4-rank-badge-label { font-size: 12px; font-weight: 900; color: var(--v4-gold-deep); }
.ftv4-rank-link { font-size: 10.5px; }

/* ---- プロフィールヘッダー ---- */
.ftv4-profile {
  margin: 12px 12px 0; background: var(--white); border-radius: 16px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 2px 12px var(--v4-shadow);
}
.ftv4-profile-top { display: flex; gap: 14px; align-items: flex-start; }
.ftv4-photo {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--v4-purple-pale); background: var(--v4-zone); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.ftv4-photo img { width: 100%; height: 100%; object-fit: cover; }
.ftv4-profile-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ftv4-name { font-size: 19px; font-weight: 900; color: var(--v4-text); line-height: 1.3; }
.ftv4-affiliation { font-size: 11px; color: var(--v4-purple-muted); }
.ftv4-rating-row { display: flex; align-items: center; gap: 6px; }
.ftv4-rating-row .ftv4-stars { font-size: 16px; -webkit-text-stroke-width: 0.8px; }
.ftv4-rating-num { font-size: 1.5rem; font-weight: 900; color: var(--v4-purple); }
.ftv4-rating-link { font-size: 11px; }
.ftv4-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ftv4-chip { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ftv4-chip--gold { background: var(--v4-gold-pale); color: var(--v4-gold-deep); }
.ftv4-chip--green { background: var(--v4-green-pale); color: var(--v4-green); }
.ftv4-chip--purple { background: var(--v4-purple-pale); color: var(--v4-purple); }
.ftv4-intro-wrap { display: flex; flex-direction: column; gap: 4px; }
.ftv4-intro { font-size: 12.5px; line-height: 1.9; color: var(--v4-text-mid); }
.ftv4-intro.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ftv4-text-btn {
  align-self: flex-start; background: none; border: none; padding: 0;
  font-size: 11.5px; color: var(--v4-purple-light); font-weight: 700; cursor: pointer; font-family: inherit;
}
.ftv4-cta-wrap { display: flex; flex-direction: column; gap: 7px; }
.teller-v4 .ftv4-cta {
  background: var(--v4-cta); color: var(--white); border: none; text-align: center; padding: 14px;
  border-radius: 999px; font-size: 15px; font-weight: 900; letter-spacing: 0.04em;
  cursor: pointer; font-family: inherit; box-shadow: 0 3px 10px var(--v4-cta-shadow);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.teller-v4 .ftv4-cta:hover { filter: brightness(0.96); color: var(--white); text-decoration: none; }
.ftv4-cta-note { font-size: 11.5px; color: var(--v4-purple-muted); text-align: center; }
/* 提供元・PR表記 */
.teller-v4 .cta-provider-note { font-size: 0.6rem; color: var(--v4-text-faint); text-align: right; margin: 0; }
/* フッターは通常ボタン1枚のみの横並び。表記がある場合だけ縦積みにする */
.ftv4-footer-cta-inner:has(.cta-provider-note) { flex-direction: column; align-items: stretch; gap: 2px; }
.ftv4-cta-note strong { color: var(--v4-cta-deep); }

/* ---- 口コミサマリーゾーン ---- */
.ftv4-summary {
  margin: 16px 0 0; background: var(--v4-zone); padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.ftv4-summary-head { display: flex; align-items: baseline; gap: 8px; }
.ftv4-summary-title { font-size: 16px; font-weight: 900; color: var(--v4-text); }
.ftv4-summary-count { font-size: 12px; font-weight: 700; color: var(--v4-purple-muted); }
.ftv4-panel { background: var(--white); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }

/* 口コミ項目別平均：レイアウトは v2 の .v2-quick-rating-* 由来、カラーは v4 トークンに統一
   （カード枠は .ftv4-panel が担うため、items 側の背景・枠線・余白は持たせない） */
.teller-v4 .v2-quick-rating-items { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.teller-v4 .v2-quick-rating-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.teller-v4 .v2-quick-rating-label { min-width: 70px; font-weight: 500; color: var(--v4-text-mid); }
.teller-v4 .v2-quick-rating-row .star-rating { font-size: 0.9rem; }
.teller-v4 .v2-quick-rating-value { font-weight: 700; color: var(--v4-purple); margin-left: auto; }

/* star-rating コンポーネント（fortune-teller-detail.css を読まないため v4 に複製）。
   星色は v4 トークンの金（--v4-gold）に揃える */
.teller-v4 .star-rating { color: var(--v4-gold); letter-spacing: 1px; }
.teller-v4 .star-rating .half-star { display: inline-block; position: relative; color: transparent; }
.teller-v4 .star-rating .half-star::before {
  content: '★'; position: absolute; left: 0; width: 50%; overflow: hidden; color: var(--v4-gold);
}
.teller-v4 .star-rating .half-star::after { content: '☆'; color: var(--v4-gold); }

/* ---- 鑑定スタイル「口コミが語る先生の印象」（mock/260709/kantei-style 4a採用版） ---- */
.fs-impression {
  --fsi-ink: var(--v4-text);        /* 見出し・本文の濃色 */
  --fsi-primary: var(--v4-purple);    /* 主役色(1位・ドーナツ1位) */
  --fsi-muted: var(--v4-text-faint);      /* 注記・補足 */
  --fsi-sub: var(--v4-purple-muted);        /* 2次テキスト */
  --fsi-card-bg: var(--white);
  --fsi-card-shadow: 0 2px 10px var(--v4-shadow);
  background: var(--fsi-card-bg);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--fsi-card-shadow);
  color: var(--fsi-ink);
}
.fs-impression__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.fs-impression__title {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}
.fs-impression__note {
  font-size: 9.5px;
  color: var(--fsi-muted);
}
.fs-impression__hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fs-impression__hero-lead {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fsi-muted);
}
.fs-impression__hero-word {
  font-size: 21px;
  font-weight: 900;
  color: var(--fsi-primary);
  line-height: 1.3;
}
.fs-impression__hero-word small {
  font-size: 13px;
  font-weight: 700;
  color: var(--fsi-sub);
}
.fs-impression__body {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ドーナツ: conic-gradient はインラインで注入 */
.fs-impression__donut {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-impression__donut-hole {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fsi-card-bg);
}
.fs-impression__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.fs-impression__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fs-impression__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.fs-impression__label {
  font-size: 10.5px;
}
.fs-impression__pct {
  margin-left: auto;
  font-size: 10px;
  color: var(--fsi-muted);
}

/* ---- 両面表示ポリシー ---- */
.ftv4-policy { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px; }
.ftv4-policy-icon { font-size: 13px; }
.ftv4-policy-text { font-size: 11px; line-height: 1.7; color: var(--v4-text-mid); }

/* ---- フィルタチップ ---- */
.ftv4-filterbar {
  position: sticky; top: 0; z-index: 5; background: var(--v4-bg);
  padding: 10px 12px 8px; display: flex; gap: 6px; align-items: center;
  overflow-x: auto; border-bottom: 1px solid var(--v4-border);
}
.ftv4-filter-chip {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--v4-border-strong); background: var(--white); color: var(--v4-text-mid);
  cursor: pointer; font-family: inherit;
}
.ftv4-filter-chip.is-active { border-color: var(--v4-purple); background: var(--v4-purple); color: var(--white); }
.ftv4-filter-sort { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--v4-purple-muted); padding: 6px 4px; }

/* ---- 口コミカード ---- */
.ftv4-reviews { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ftv4-review {
  background: var(--white); border-radius: 14px; padding: 15px 14px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 1px 6px var(--v4-shadow-soft);
}
.ftv4-review.is-hidden-by-filter,
.ftv4-review.is-hidden-by-more { display: none; }
.ftv4-review-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ftv4-reviewer { display: flex; gap: 9px; align-items: center; min-width: 0; }
.ftv4-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--v4-zone); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--v4-gray);
}
.ftv4-reviewer-name-row { display: flex; gap: 6px; align-items: baseline; }
.ftv4-reviewer-name { font-size: 12.5px; font-weight: 700; color: var(--v4-text); }
.ftv4-reviewer-age, .ftv4-review-date { font-size: 10.5px; color: var(--v4-text-faint); }
.ftv4-review-date { flex-shrink: 0; }
.ftv4-review-rating { display: flex; align-items: center; gap: 6px; }
.ftv4-review-rating .ftv4-stars { font-size: 14px; }
.ftv4-review-rating-num { font-size: 13px; font-weight: 900; color: var(--v4-purple); }
.ftv4-review-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.ftv4-review-tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ftv4-review-tag--topic { background: var(--v4-purple-pale); color: var(--v4-purple); }
.ftv4-review-tag--gold { background: var(--v4-gold-pale); color: var(--v4-gold-deep); }
.ftv4-review-body-wrap { display: flex; flex-direction: column; gap: 6px; }
.ftv4-review-body { font-size: 12.5px; line-height: 1.9; color: var(--v4-text-mid); }
.ftv4-review .ftv4-review-collapsed .ftv4-review-body {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ftv4-review-expanded { display: none; flex-direction: column; gap: 12px; }
.ftv4-review.is-expanded .ftv4-review-expanded { display: flex; }
.ftv4-review.is-expanded .ftv4-review-collapsed { display: none; }
.ftv4-points { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.ftv4-points--good { background: var(--v4-green-pale); }
.ftv4-points--good .ftv4-points-title { font-size: 11px; font-weight: 900; color: var(--v4-green); }
.ftv4-points--good .ftv4-points-body { font-size: 12px; line-height: 1.8; color: var(--v4-green-deep); }
.ftv4-points--bad { background: var(--v4-amber-pale); }
.ftv4-points--bad .ftv4-points-title { font-size: 11px; font-weight: 900; color: var(--v4-amber); }
.ftv4-points--bad .ftv4-points-body { font-size: 12px; line-height: 1.8; color: var(--v4-amber-deep); }
.ftv4-subs {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--v4-bg); border-radius: 10px; padding: 11px 12px;
}
.ftv4-subs-title { font-size: 11px; font-weight: 900; color: var(--v4-text-mid); }
.ftv4-sub-row { display: flex; justify-content: space-between; align-items: center; }
.ftv4-sub-label { font-size: 11.5px; color: var(--v4-text-mid); }
.ftv4-sub-rating { display: flex; align-items: center; gap: 6px; }
.ftv4-sub-rating .ftv4-stars { font-size: 12px; -webkit-text-stroke-width: 0.6px; }
.ftv4-sub-val { font-size: 11.5px; font-weight: 900; color: var(--v4-purple); width: 24px; text-align: right; }
.ftv4-review-actions { display: flex; align-items: center; gap: 8px; }
.ftv4-close-btn { margin-left: auto; }
.ftv4-review-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--v4-border); padding-top: 8px;
}
.ftv4-review-meta { font-size: 10.5px; color: var(--v4-text-faint); }
.ftv4-no-results {
  background: var(--white); border-radius: 14px; padding: 20px 16px; text-align: center;
  font-size: 12px; color: var(--v4-purple-muted); line-height: 1.8; display: none;
}
.ftv4-no-results.is-visible { display: block; }
.ftv4-more-btn {
  background: var(--white); border: 1.5px solid var(--v4-border-strong); color: var(--v4-purple); border-radius: 999px;
  padding: 12px; font-size: 13px; font-weight: 900; cursor: pointer; font-family: inherit;
}

/* ---- 古い口コミ ---- */
.ftv4-old-toggle {
  background: none; border: none; padding: 8px 4px; font-size: 12px; color: var(--v4-purple-muted);
  font-weight: 700; cursor: pointer; font-family: inherit; text-align: left;
}
.ftv4-old-list { display: none; flex-direction: column; gap: 10px; }
.ftv4-old-list.is-open { display: flex; }
.ftv4-old-note { font-size: 10.5px; color: var(--v4-text-faint); padding: 0 4px; }
.ftv4-review--old { background: var(--v4-purple-bg); opacity: 0.85; box-shadow: none; }
.ftv4-review--old .ftv4-reviewer-name { color: var(--v4-text-weak); }
.ftv4-review--old .ftv4-review-body { font-size: 12px; color: var(--v4-text-weak); }
.ftv4-review--old .ftv4-stars { --star-base: var(--v4-purple-bg); -webkit-text-stroke-color: var(--v4-gold-dim); }
.ftv4-review--old .ftv4-review-rating-num { color: var(--v4-purple-muted); font-size: 12px; }
.ftv4-old-badge {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px;
  background: var(--v4-border); color: var(--v4-purple-muted); border-radius: 999px;
}

/* ---- 下層アコーディオン ---- */
.ftv4-sections { padding: 4px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.ftv4-section {
  background: var(--white); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 6px var(--v4-shadow-soft);
}
.ftv4-section-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; padding: 15px 16px; cursor: pointer; font-family: inherit;
}
.ftv4-section-title {
  font-size: 13.5px; font-weight: 900; color: var(--v4-text);
  display: flex; align-items: center; gap: 8px;
}
.ftv4-section-icon { color: var(--v4-purple-light); }
.ftv4-section-chev { font-size: 12px; color: var(--v4-text-faint); }
.ftv4-section-body {
  display: none; padding: 0 16px 16px;
  font-size: 12.5px; line-height: 1.9; color: var(--v4-text-mid); white-space: pre-line;
}
.ftv4-section.is-open .ftv4-section-body { display: block; }

/* ---- 関連占い師 ---- */
.ftv4-related { padding: 20px 12px 0; display: flex; flex-direction: column; gap: 14px; }
.ftv4-related-group { display: flex; flex-direction: column; gap: 8px; }
.ftv4-related-heading { font-size: 13.5px; font-weight: 900; color: var(--v4-text); }
.ftv4-related-row { display: flex; gap: 8px; }
.ftv4-related-card {
  flex: 1; background: var(--white); border-radius: 14px; padding: 13px 12px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  box-shadow: 0 1px 6px var(--v4-shadow-soft); color: inherit;
}
.ftv4-related-card:hover { text-decoration: none; color: inherit; }
.ftv4-related-photo {
  width: 52px; height: 52px; border-radius: 50%; background: var(--v4-zone); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.ftv4-related-photo img { width: 100%; height: 100%; object-fit: cover; }
.ftv4-related-name { font-size: 12.5px; font-weight: 900; color: var(--v4-text); }
.ftv4-related-rating { display: flex; align-items: center; gap: 4px; }
.ftv4-related-star { font-size: 11px; color: var(--v4-gold); }
.ftv4-related-num { font-size: 12px; font-weight: 900; color: var(--v4-purple); }
.ftv4-related-count { font-size: 10px; color: var(--v4-text-faint); }
.ftv4-related-tag {
  font-size: 10px; font-weight: 700; padding: 2px 9px;
  background: var(--v4-purple-pale); color: var(--v4-purple); border-radius: 999px;
}

/* ---- FAQ ---- */
.ftv4-faq { padding: 20px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.ftv4-faq-heading { font-size: 15px; font-weight: 900; color: var(--v4-text); }
.ftv4-faq-card {
  background: var(--white); border-radius: 14px; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 1px 6px var(--v4-shadow-soft);
}
.ftv4-faq-row { display: flex; gap: 8px; align-items: flex-start; }
.ftv4-faq-q-mark { font-size: 12px; font-weight: 900; color: var(--v4-cta); flex-shrink: 0; }
.ftv4-faq-a-mark { font-size: 12px; font-weight: 900; color: var(--v4-purple-light); flex-shrink: 0; }
.ftv4-faq-q { font-size: 12.5px; font-weight: 700; color: var(--v4-text); line-height: 1.6; }
.ftv4-faq-a { font-size: 12px; color: var(--v4-text-mid); line-height: 1.85; }
.ftv4-faq-guide-link { font-size: 11.5px; align-self: center; padding: 6px; }

/* ---- 掲載情報について（本文より視覚的優先度を下げた注記） ---- */
.teller-v4 .page-info-note {
  padding: 18px 16px 4px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10.5px; line-height: 1.8; color: var(--v4-text-faint);
}
.teller-v4 .page-info-note a { color: var(--v4-text-faint); text-decoration: underline; }
.teller-v4 .page-info-note a:hover { color: var(--v4-purple-light); }

/* ---- 固定フッターCTA ---- */
.ftv4-footer-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; pointer-events: none;
}
.ftv4-footer-cta-inner {
  width: 100%; max-width: 430px; background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px); border-top: 1px solid var(--v4-border);
  padding: 10px 14px 14px; display: flex; align-items: center; gap: 12px;
  pointer-events: auto; box-sizing: border-box;
}
/* `.teller-v4 a` の色指定に勝つよう .teller-v4 で修飾して白文字を確定させる */
.teller-v4 .ftv4-footer-btn {
  flex: 1; background: var(--v4-cta); color: var(--white); border: none; padding: 13px;
  border-radius: 999px; font-size: 14px; font-weight: 900; cursor: pointer;
  font-family: inherit; box-shadow: 0 3px 10px var(--v4-cta-shadow);
  text-align: center;
}
.teller-v4 .ftv4-footer-btn:hover { filter: brightness(0.96); color: var(--white); text-decoration: none; }