/* ============================================================
   review.css — レビュー詳細ページ専用スタイル
   ============================================================ */

/* ── 記事ページタイトルバー ────────────────────────────── */
.rv-page-head {
  background: #191c22;
  border-bottom: 1px solid #252930;
  padding: 24px 0 28px;
}
.rv-page-head-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* カテゴリバッジ行 */
.rv-page-head-cats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rv-ph-badge {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity var(--trans);
}
.rv-ph-badge:hover { opacity: 0.8; }
.rv-ph-badge--parent {
  background: var(--accent);
  color: #fff;
}
.rv-ph-badge--child {
  background: rgba(255,255,255,0.12);
  color: #c8cdd8;
  border: 1px solid rgba(255,255,255,0.18);
}
.rv-ph-sep {
  color: #555c6a;
  font-size: var(--fs-sm);
}

/* タイトル行（編集ボタン + タイトル） */
.rv-page-head-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* 編集ボタン（黄色） */
.rv-ph-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #f0c000;
  color: #1a1c24;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: background var(--trans), opacity var(--trans);
  white-space: nowrap;
}
.rv-ph-edit-btn:hover {
  background: #ffd234;
}

/* 記事タイトル */
.rv-page-head-title {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 900;
  color: #e4e6ed;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin-bottom: 0;
}

/* 価格テキスト（末尾・縮めない） */
.rv-ph-price {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: #9aa0ae;
  font-weight: 600;
}
.rv-ph-price-sep {
  flex: 0 0 auto;
  color: #454c58;
  font-size: var(--fs-sm);
  margin: 0 2px;
}

/* 日付 ＋ メーカー・商品名（常に1行。商品名がはみ出す場合のみ省略表示） */
.rv-page-head-product {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
/* 日付（先頭・縮めない） */
.rv-ph-date {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: #9aa0ae;
  font-weight: 700;
}
.rv-ph-updated { color: #6b7280; font-weight: 600; }
/* 日付と商品名の区切り */
.rv-ph-dot {
  flex: 0 0 auto;
  color: #454c58;
  font-size: var(--fs-sm);
}
/* メーカー＋商品名のまとまり（残り幅を使い、超過分は商品名で省略） */
.rv-ph-product {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
}
.rv-ph-maker {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  color: #7e8698;
  font-weight: 600;
  white-space: nowrap;
}
.rv-ph-product-sep {
  flex: 0 0 auto;
  color: #454c58;
  font-size: var(--fs-sm);
}
/* 商品名：1行を超えたら … で省略 */
.rv-ph-product-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: #7e8698;
  font-weight: 600;
}
/* ブランドタイプ（メーカー区分）チップ：商品名の後ろに小さく表示（縮めない） */
.rv-ph-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  font-size: var(--fs-xs, 11px);
  line-height: 1.4;
  color: #aeb4c2;
  font-weight: 700;
  white-space: nowrap;
}

/* ===========================
   PV / UV カウンタ（サイドバー「アクセス数」ブロック内）
   Magazine 系: 直角・薄ボーダー・タグ + ラベル + 数字
   サイドバー幅いっぱいに広げ、.r2-reco 等の他ブロックと統一感を出す
   =========================== */
.rv-views {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1.5px solid var(--text);
}
.rv-views-row {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
}
.rv-views-tag {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 2px 0;
}
.rv-views-tag--uv {
  color: var(--text);
  border-color: var(--text);
}
.rv-views-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.rv-views-lbl {
  font-size: var(--fs-xs);
  color: var(--text3);
  font-weight: 700;
  letter-spacing: .04em;
}
.rv-views-num {
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

@media (max-width: 640px) {
  .rv-page-head { padding: 18px 0 22px; }
  .rv-page-head-inner { padding: 0 16px; }
  .rv-page-head-title { font-size: 1.1rem; }
  .rv-views { gap: 4px; }
  .rv-views-row { gap: 6px; }
  .rv-views-num { font-size: var(--fs-xs); }
}

/* ── 投稿者本人向け編集ボタン ──────────────────────────── */
.rv-owner-actions {
  display: flex;
  gap: 10px;
  margin: 12px 0 20px;
}

.rv-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: var(--bg4);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}

.rv-btn-edit:hover {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--text);
}

/* 更新日タグ */
.rv-updated-tag {
  color: var(--text3);
  font-size: 0.78rem;
  margin-left: 4px;
}

.rv-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ── 2セクション分割レイアウト ────────────────────────── */
/* list-mainのboxをリセット */
.rv-main {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* セクション間のダークグレー隙間 */
}

/* 各sectionがライトグレーのbox */
.rv-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 35px 40px;
  position: relative;
}

/* ── 右上固定の編集ボタン ──────────────────────────────── */
.rv-btn-edit-float {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: #f5c518;
  color: #111;
  font-size: var(--fs-sm);
  font-weight: 800;
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: background var(--trans), transform var(--trans);
  white-space: nowrap;
  flex-shrink: 0;
}

.rv-btn-edit-float:hover {
  background: #e6b800;
  transform: translateY(-1px);
}

/* ── パンくずリスト ───────────────────────────────────── */
.rv-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: var(--fs-sm);
  margin-bottom: 24px;
}

.rv-breadcrumb a {
  color: var(--text2);
  text-decoration: none;
  transition: color var(--trans);
}

.rv-breadcrumb a:hover {
  color: var(--accent);
}

.rv-breadcrumb-sep {
  color: var(--text3);
  padding: 0 4px;
}

/* ── ヘッダー ─────────────────────────────────────────── */
.rv-header {
  margin-bottom: 20px;
}

.rv-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.rv-badge {
  padding: 3px 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.rv-badge-parent {
  background: var(--accent);
  color: #fff;
}

.rv-badge-child {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
}

a.rv-badge {
  text-decoration: none;
  transition: opacity var(--trans);
}

a.rv-badge:hover {
  opacity: 0.8;
}

.rv-title {
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}

.rv-title-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.rv-title-stars .on {
  color: var(--star);
  font-size: 1.1rem;
}

.rv-title-stars .off {
  color: var(--text3);
  font-size: 1.1rem;
}

.rv-title-score {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text3);
  margin-left: 2px;
}

/* 製品名・価格・購入リンク行 */
.rv-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.rv-product-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rv-product-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* 星（rv-product内直接配置） */
.rv-product .on,
.rv-product .off {
  font-size: var(--fs-sm);
  line-height: 1;
}

.rv-product .on {
  color: var(--star);
}

.rv-product .off {
  color: var(--text3);
}

.rv-product-name {
  font-size: var(--fs-sm);
  color: var(--text2);
  font-weight: 600;
  line-height: 1;
}

.rv-price {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--text2);
  line-height: 1;
  white-space: nowrap;
}

.rv-buy-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: background var(--trans);
  white-space: nowrap;
}

.rv-buy-link:hover {
  background: var(--accent-dark);
}

/* ── 投稿者バー（rv-sectionの上部に全幅表示） ────────── */
.rv-author-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #e8ecf4;
  border-bottom: 1px solid #cdd3e0;
  border-radius: 0;
  padding: 14px 40px;
  margin: -35px -40px 28px -40px;
}

a.rv-author-left {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--trans);
}

a.rv-author-left:hover {
  opacity: 0.8;
}

.rv-author-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 右側: SNSボタン群 + ハートボタン + PR表記 */
.rv-author-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 320px;
}

/* PR表記（右下に小さく） */
.rv-ab-pr-note {
  width: 100%;
  text-align: right;
  font-size: 0.68rem;
  color: var(--text2);
  opacity: 0.6;
  line-height: 1;
  margin-top: -4px;
}

/* SNSボタン共通 */
.rv-ab-sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-xs);
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--text2);
  text-decoration: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
  flex-shrink: 0;
}
.rv-ab-sns-btn:hover { opacity: 0.85; }

/* X (Twitter) */
.rv-ab-sns-btn.rv-ab-sns-x  { color: #000; border-color: #bbb; }
.rv-ab-sns-btn.rv-ab-sns-x:hover  { background: #000; color: #fff; border-color: #000; opacity: 1; }

/* YouTube */
.rv-ab-sns-btn.rv-ab-sns-yt { color: #ff0000; border-color: #ffb3b3; }
.rv-ab-sns-btn.rv-ab-sns-yt:hover { background: #ff0000; color: #fff; border-color: #ff0000; opacity: 1; }

/* Instagram */
.rv-ab-sns-btn.rv-ab-sns-ig { color: #e1306c; border-color: #f0a0bc; }
.rv-ab-sns-btn.rv-ab-sns-ig:hover { background: #e1306c; color: #fff; border-color: #e1306c; opacity: 1; }

.rv-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border2);
  flex-shrink: 0;
}

.rv-ava-default {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  font-size: 1.2rem;
  border: 2px solid var(--border2);
  flex-shrink: 0;
}

.rv-author-name {
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rv-author-meta {
  font-size: var(--fs-sm);
  color: var(--text2);
  margin-top: 2px;
  white-space: nowrap;
}

/* ── 著者バー モバイル対応 ─────────────────────────────── */
@media (max-width: 640px) {
  .rv-section {
    padding: 20px 20px 24px;
  }
  .rv-author-bar {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px 20px;
    margin: -20px -20px 20px -20px;
    gap: 8px;
  }
  .rv-author-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .rv-author-right {
    flex: 0 0 100%;
    justify-content: center;
    max-width: 100%;
  }
  .rv-ab-pr-note {
    text-align: center;
  }
}

.rv-like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: var(--r-xs);
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  color: var(--text2);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--trans);
  flex-shrink: 0;
}

.rv-like-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.rv-like-btn.liked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── 写真ブロック ─────────────────────────────────────── */
.rv-photos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
}

.rv-photo-headline {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
  margin: 16px 0 5px;
  padding: 10px 16px;
  border-left: 4px solid var(--accent);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  letter-spacing: 0.02em;
}

/* ── Markdownレンダリングエリア（.md-content）共通スタイル ── */
.md-content {
  line-height: 1.75;
  color: var(--text2);
}

/* md-content の見出し（h1/h3/h4）：赤の細い縦線 + padding-left
   h2 は左線なし・文字色赤 */
.md-content h1,
.md-content h3,
.md-content h4 {
  font-weight: 900;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding: 0 0 0 8px;
  background: none;
  border-radius: 0;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.md-content h2 {
  font-weight: 900;
  color: var(--accent);
  background: none;
  border-radius: 0;
  letter-spacing: 0.02em;
  line-height: 1.3;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}

.md-content h1 { font-size: var(--fs-xl);  margin: 30px 0 6px; }
.md-content h2 { font-size: var(--fs-lg);  margin: 14px 0 6px; }
.md-content h3 { font-size: var(--fs-base);font-weight: 800; margin: 12px 0 4px; }
.md-content h4 { font-size: var(--fs-base);font-weight: 700; margin: 10px 0 4px; }

.md-content p {
  margin: 0;
}

/* 空行（段落区切り）はエディタで入れた「空行 1 行ぶん」に見えるよう
   行の高さ相当の隙間を空ける。単純改行(.md-line-gap)とはっきり区別する。 */
.md-content p + p {
  margin-top: 2em;
}

/* Enter による改行だけ行間を広げる（<br> は JS で .md-line-gap に置換） */
.md-content .md-line-gap {
  display: block;
  height: 0.7em;
}

.md-content ul,
.md-content ol {
  margin: 20px 0 20px 2.2em;
  padding: 0;
}

.md-content li {
  margin: 2px 0;
}

.md-content a {
  color: var(--accent);
  text-decoration: underline;
}

.md-content a:hover {
  opacity: 0.8;
}

.md-content strong,
.md-content b {
  color: var(--accent);
  font-weight: 700;
}

.rv-photo-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--bg3);
  position: relative;
}

/* YouTube埋め込みフレーム */
.rv-yt-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000;
}
.rv-yt-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* 1枚目のYouTube: 星評価を右下に重ねる */
.rv-yt-frame--first .rv-photo-stars {
  bottom: 10px;
  right: 12px;
}

/* 1枚目画像右下に重ねる星 */
.rv-photo-stars {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  border-radius: var(--r-xs);
  padding: 5px 10px;
}

.rv-photo-stars .on {
  color: var(--star);
  font-size: 1.05rem;
  line-height: 1;
}

.rv-photo-stars .off {
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.05rem;
  line-height: 1;
}

/* 16:10超の横長画像 — JSがクラス付与 */
.rv-photo-frame.is-wide {
  aspect-ratio: 16 / 10;
}

.rv-photo-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0;
}

.rv-photo-frame.is-wide .rv-photo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rv-photo-sep {
  display: none;
}

.rv-photo-caption {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 12px 0 24px;
}

.rv-photo-caption p {
  font-size: var(--fs-base);
  color: var(--text2);
  line-height: 1.65;
  margin: 0;
}

/* ── スコアカード ─────────────────────────────────────── */
/* スコアカード（rv-sectionの中に入るためbox設定は不要） */
.rv-score-card {
  padding: 0;
  margin-bottom: 0;
}

/* 総合評価：中央 */
.rv-score-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.rv-score-num {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -2px;
}

.rv-score-stars {
  display: flex;
  gap: 4px;
  font-size: 1.5rem;
}

.rv-score-stars .on {
  color: var(--star);
}

.rv-score-stars .off {
  color: var(--text3);
}

.rv-score-label {
  font-size: var(--fs-sm);
  color: var(--text3);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* サブ評価 */
.rv-score-sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.rv-score-sub-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px;
}

.rv-score-sub-label {
  font-size: var(--fs-sm);
  color: var(--text3);
  font-weight: 700;
}

.rv-score-sub-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--border2);
  overflow: hidden;
}

.rv-score-sub-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--star);
  transition: width 0.4s ease;
}

.rv-score-sub-num {
  font-size: var(--fs-sm);
  color: var(--text2);
  font-weight: 700;
  min-width: 20px;
  text-align: right;
}

/* ── 良かった点・気になった点 ─────────────────────────── */
.rv-verdict-card {
  margin: 0;
}

.rv-verdict {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rv-verdict-box {
  border-radius: var(--r-sm);
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: var(--bg3);
}

.rv-good {
  border-color: rgba(74, 222, 128, 0.25);
}

.rv-bad {
  border-color: rgba(251, 146, 60, 0.25);
}

.rv-verdict-heading {
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

.rv-good .rv-verdict-heading {
  color: #4ade80;
}

.rv-bad .rv-verdict-heading {
  color: #fb923c;
}

.rv-verdict-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rv-verdict-list li {
  font-size: var(--fs-base);
  color: var(--text2);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

.rv-verdict-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text3);
}

.rv-verdict-none {
  font-size: var(--fs-sm);
  color: var(--text3);
  margin: 0;
  font-style: italic;
}

/* ── まとめコメント ──────────────────────────────────── */
.rv-summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* 独立表示（rv-section内に入るためbox不要） */
.rv-summary-standalone {
  margin-top: 0;
  margin-bottom: 0;
  border-top: none;
  padding: 0;
}

.rv-summary-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.rv-summary-label {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  padding: 10px 16px;
  border-left: 4px solid var(--accent);
  background: rgba(220, 38, 38, 0.08);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  letter-spacing: 0.02em;
}

.rv-summary-text {
  font-size: var(--fs-base);
  color: var(--text2);
  line-height: 1.75;
  margin: 0;
}

.rv-summary-standalone .rv-summary-text {
  padding: 0;
}


/* ── 区切り線 ────────────────────────────────────────── */
.rv-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

/* ── 製品情報（rv-pi） ────────────────────────────────── */
.rv-pi {
  border-left: 4px solid var(--accent);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}

.rv-pi-label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.rv-pi-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rv-pi-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.rv-pi-key {
  flex-shrink: 0;
  width: 70px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text3);
}

.rv-pi-val {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.rv-pi-price {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.5px;
}

.rv-pi-item-link {
  align-items: center;
}

.rv-pi-buy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--trans), transform var(--trans);
}

.rv-pi-buy:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.rv-pi-buy svg {
  transition: transform var(--trans);
}

.rv-pi-buy:hover svg {
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .rv-pi {
    padding: 16px 18px;
  }
  .rv-pi-key {
    width: 60px;
  }
}

/* ── 関連レビュー ────────────────────────────────────── */
.rv-related-title {
  font-size: var(--fs-lg2);
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--text2);
  margin-bottom: 16px;
}

.rv-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* 関連レビューカード */
.rc3 {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}

.rc3:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border2);
}

.rc3-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg3);
}

.rc3-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.rc3:hover .rc3-img img {
  transform: scale(1.04);
}

.rc3-no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: var(--text3);
}

.rc3-cat {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-xs);
}

.rc3-score-wrap {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--star);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  letter-spacing: 1px;
}

.rc3-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.rc3-stars {
  display: flex;
  gap: 2px;
  font-size: 0.75rem;
}

.rc3-stars .s {
  color: var(--star);
}

.rc3-stars .e {
  color: var(--text3);
}

.rc3-meta {
  font-size: var(--fs-sm);
  color: var(--text3);
}

.rc3-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rc3-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.rc3-author {
  font-size: var(--fs-sm);
  color: var(--text2);
}

.rc3-likes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text2);
}

.rc3-likes .heart {
  color: var(--accent);
}

/* ── SNSシェアボタン ──────────────────────────────────── */
.rv-sns {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.rv-sns-top {
  margin-bottom: 20px;
}

.rv-sns-bottom {
  margin-bottom: 0;
  padding: 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.rv-sns-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.5px;
  margin-right: 4px;
  white-space: nowrap;
}

.rv-sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 7px 14px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  transition: opacity var(--trans), transform var(--trans);
  white-space: nowrap;
}

.rv-sns-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.rv-sns-x {
  background: #000;
}

.rv-sns-fb {
  background: #1877F2;
}

.rv-sns-line {
  background: #06C755;
}

.rv-sns-hb {
  background: #00A4DE;
}

.rv-sns-hb-icon {
  font-size: 0.8rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

/* ── レスポンシブ ────────────────────────────────────── */
@media (max-width: 640px) {
  .rv-wrap {
    padding: 0;
  }

  .rv-verdict {
    grid-template-columns: 1fr;
  }

  .rv-related-grid {
    grid-template-columns: 1fr;
  }

  .rv-score-num {
    font-size: 2.8rem;
  }

  .rv-score-sub-item {
    grid-template-columns: 80px 1fr auto;
  }

  .rv-sns-btn span:not(.rv-sns-hb-icon) {
    display: none;
  }

  /* スマホはアイコンのみ */
  .rv-sns-btn {
    padding: 8px 12px;
  }
}

/* ── 幅制限ラッパー — list-body と同じ max-width/padding に揃える */
.rv-draft-banner-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 28px 0;
  box-sizing: border-box;
}

.rv-draft-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(217, 119, 6, 0.12);
  border: 1.5px solid rgba(217, 119, 6, 0.4);
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.06);
}

.rv-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  animation: draft-pulse 2.4s ease-in-out infinite;
}

@keyframes draft-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(217, 119, 6, 0);
  }
}

.rv-draft-msg {
  flex: 1;
  font-size: var(--fs-sm);
  color: #92400e;
  font-weight: 600;
  min-width: 120px;
}

.rv-draft-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--r-xs);
  background: #d97706;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  text-decoration: none;
  transition: background var(--trans), transform var(--trans);
  white-space: nowrap;
  flex-shrink: 0;
}

.rv-draft-edit-btn:hover {
  background: #b45309;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .rv-draft-banner {
    gap: 8px;
  }

  .rv-draft-edit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── 公開中オーナーバナー（青系）────────────────────────────── */
.rv-banner-published {
  background: rgba(37, 99, 235, 0.07);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.05);
}

.rv-badge-published {
  background: #2563eb;
}

.rv-msg-published {
  color: #1e40af;
}

.rv-edit-btn-published {
  background: #2563eb;
}
.rv-edit-btn-published:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* ── コメントセクション ─────────────────────────────────────── */
.rv-comments {
  margin-top: 8px;
}

.rv-comments-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.rv-comments-heading {
  font-size: var(--fs-lg2);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.rv-comments-count {
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--bg4);
  color: var(--text3);
  padding: 2px 10px;
  border-radius: 99px;
}

/* エラー */
.rv-comment-error {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: rgba(200, 51, 51, 0.12);
  border: 1px solid rgba(200, 51, 51, 0.35);
  color: #fca5a5;
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}

/* 空メッセージ */
.rv-comment-empty {
  color: var(--text3);
  font-size: var(--fs-base);
  padding: 24px 0;
  text-align: center;
}

/* 一覧 */
.rv-comment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rv-comment-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.rv-comment-item:last-child {
  border-bottom: none;
}

/* アバター */
.rv-comment-ava {
  flex-shrink: 0;
  display: block;
  transition: opacity var(--trans);
}

.rv-comment-ava:hover {
  opacity: 0.8;
}

.rv-comment-ava-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rv-comment-ava-default {
  background: var(--bg4);
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コメント本文 */
.rv-comment-body {
  flex: 1;
  min-width: 0;
}

.rv-comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.rv-comment-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  transition: color var(--trans);
}

.rv-comment-name:hover {
  color: var(--accent);
}

.rv-comment-time {
  font-size: var(--fs-sm);
  color: var(--text3);
}

/* コメント削除ボタン（自分のコメントのみ表示） */
.rv-comment-del-btn {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: var(--r-xs);
  border: 1.5px solid rgba(220, 38, 38, 0.30);
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}
.rv-comment-del-btn:hover {
  background: rgba(220, 38, 38, 0.14);
  border-color: #dc2626;
}

.rv-comment-text {
  font-size: var(--fs-base);
  color: var(--text2);
  line-height: 1.7;
}

/* ── 2階層スレッド（返信）─────────────────────────────── */
/* 区切り線はスレッド単位で引き、内部の各コメントの線は消す */
.rv-thread {
  border-bottom: 1px solid var(--border);
}
.rv-thread:last-child {
  border-bottom: none;
}
.rv-thread .rv-comment-item {
  border-bottom: none;
}

/* 返信リスト：左にインデント＋ガイド線 */
.rv-reply-list {
  margin-left: 24px;
  padding-left: 24px;
  border-left: 2px solid var(--border);
}
.rv-reply-list:empty {
  display: none;
}

/* 返信コメントは少し小さめのアバター */
.rv-comment-reply {
  padding: 12px 0;
}
.rv-comment-reply .rv-comment-ava-img,
.rv-comment-reply .rv-comment-ava-default {
  width: 30px;
  height: 30px;
}

/* ＠返信先メンション */
.rv-comment-mention {
  color: var(--accent);
  font-weight: 700;
}

/* 返信ボタン */
.rv-comment-actions {
  margin-top: 6px;
}
.rv-reply-btn {
  padding: 2px 10px;
  border: 1px solid var(--border2);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text3);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.rv-reply-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 返信フォーム：通常フォームより控えめなマージン＋返信先ラベル */
.rv-reply-form {
  margin-top: 12px;
  margin-bottom: 8px;
}
.rv-reply-to {
  padding: 8px 16px 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}
.rv-reply-cancel {
  margin-right: auto;
  padding: 6px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text3);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
}
.rv-reply-cancel:hover {
  color: var(--text);
  border-color: var(--text3);
}
@media (max-width: 640px) {
  .rv-reply-list { margin-left: 12px; padding-left: 12px; }
}

/* フォーム */
.rv-comment-form {
  margin-top: 24px;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  background: var(--bg3);
  overflow: hidden;
}

.rv-comment-textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  max-height: 400px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.7;
  resize: vertical;
}

.rv-comment-textarea::placeholder {
  color: var(--text4);
}

.rv-comment-form-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg4);
}

.rv-comment-len {
  font-size: var(--fs-sm);
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

.rv-comment-submit {
  padding: 7px 22px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: background var(--trans), transform var(--trans), opacity var(--trans);
}

.rv-comment-submit:hover:not(:disabled) {
  background: #a72828;
  transform: translateY(-1px);
}

.rv-comment-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 未ログイン */
.rv-comment-login {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border2);
  text-align: center;
  font-size: var(--fs-base);
  color: var(--text3);
}

.rv-comment-login-link {
  color: var(--accent);
  font-weight: 700;
  transition: opacity var(--trans);
}

.rv-comment-login-link:hover {
  opacity: 0.8;
}

.rv-comment-login {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border2);
  text-align: center;
  font-size: var(--fs-base);
  color: var(--text3);
}

.rv-comment-login-link {
  color: var(--accent);
  font-weight: 700;
  transition: opacity var(--trans);
}

.rv-comment-login-link:hover {
  opacity: 0.8;
}

/* ── コメント並べ替えトグル ─────────────────────────────── */
.rv-comment-order {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.rv-comment-order-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: transparent;
  color: var(--text3);
  font-size: 0.75rem;
  font-weight: 700;
  transition: all var(--trans);
  white-space: nowrap;
}

.rv-comment-order-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.rv-comment-order-btn.on {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: default;
  pointer-events: none;
}

/* ── コメント「もっと見る」ボタン ────────────────────────── */
.rv-comment-more-wrap {
  text-align: center;
  padding: 20px 0 8px;
}

.rv-comment-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: transparent;
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), transform var(--trans);
}

.rv-comment-more-btn:hover {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.rv-comment-more-btn:active {
  transform: translateY(0);
}

.rv-comment-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   購入リンクカードセクション（rv-pl-*）
   ═══════════════════════════════════════════════════════════════ */

/* ラッパー：rv-section と同じbox */
.rv-pl-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 28px 32px 20px;
}

/* ── 商品基本情報 独立BOX ── */
.rv-pi-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 20px 32px 20px;
  margin-top: 0;
}

.rv-pi-box-label {
  font-size: var(--fs-base);
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--text);
  margin-bottom: 14px;
}

/* 基本製品情報（コンパクト版） */
.rv-pi-compact {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.rv-pi-compact .rv-pi-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rv-pi-compact .rv-pi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rv-pi-compact .rv-pi-key {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.rv-pi-compact .rv-pi-val {
  font-size: var(--fs-sm);
  color: var(--text2);
  font-weight: 600;
}
.rv-pi-price {
  color: var(--accent);
  font-weight: 800;
}
.rv-pi-compact .rv-pi-link {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  transition: opacity var(--trans);
}
.rv-pi-compact .rv-pi-link:hover {
  opacity: 0.75;
}

/* セクションラベル */
.rv-pl-label {
  font-size: var(--fs-base);
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--text);
  margin-bottom: 14px;
}

/* カードグリッド */
.rv-pl-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* 個別カード（横並び） */
.rv-pl-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.rv-pl-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* 商品画像エリア */
.rv-pl-img-wrap {
  width: 120px;
  min-width: 120px;
  aspect-ratio: 1 / 1;
  background: var(--bg4);
  overflow: hidden;
  flex-shrink: 0;
}
.rv-pl-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.rv-pl-img-none {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--text3);
}

/* 商品情報エリア */
.rv-pl-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

/* ショップラベル */
.rv-pl-src {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  width: fit-content;
}
.rv-pl-src--amazon  { background: #f90; color: #111; }
.rv-pl-src--rakuten { background: #bf0000; color: #fff; }
.rv-pl-src--yahoo   { background: #ff0033; color: #fff; }
.rv-pl-src--other   {
  background: var(--bg4);
  color: var(--text2);
  border: 1px solid var(--border2);
}

/* 商品名 */
.rv-pl-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* 価格 */
.rv-pl-price {
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.5px;
}

/* レビュー評価 */
.rv-pl-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rv-pl-stars {
  font-size: 0.75rem;
  color: var(--star);
  letter-spacing: -1px;
}
.rv-pl-rcount {
  font-size: 0.72rem;
  color: var(--text3);
}

/* CTAボタン風テキスト */
.rv-pl-btn {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* フッター */
.rv-pl-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rv-pl-pr-note {
  font-size: 0.7rem;
  color: var(--text3);
  margin-left: auto;
}
.rv-pl-yahoo-credit {
  font-size: 0.68rem;
  color: var(--text3);
  text-decoration: none;
  transition: color var(--trans);
}
.rv-pl-yahoo-credit:hover {
  color: var(--accent);
}

/* モバイル */
@media (max-width: 640px) {
  .rv-pl-wrap {
    padding: 20px 16px 16px;
  }
  .rv-pl-img-wrap {
    width: 90px;
    min-width: 90px;
  }
}

/* ============================================================
   review.php — Magazine デザイン（v5 系 outline）
     ・本文左 / サイドバー右の 2 カラム
     ・ブロック見出しは「赤 outline ラベル + 横線」（v5-block 風）
     ・本文フォントは --fs-base (1rem)、サブは --fs-sm / --fs-xs
     ・既存の .rv-comments-* / .rv-draft-banner-* は review.css のスタイルを流用
   ────────────────────────────────────────────────────────────
   2026-05 追記：FOUC（ちらつき）対策で review.php の inline <style> を
   こちらに統合。<head> から読み込まれることで本文描画前に適用される。
   ============================================================ */
.r2-wrap{max-width:1200px;margin:0 auto;padding:24px 28px 80px;color:var(--text);box-sizing:border-box;font-size:var(--fs-base)}
@media(max-width:640px){.r2-wrap{padding:18px 14px 60px}}

/* オーナー / 管理者バナー：.r2-wrap 内では二重に効く max-width / padding を打ち消し、
   横幅を r2-wrap の内側いっぱいに広げる（review.css 側の旧スタイルを上書き） */
.r2-wrap > .rv-draft-banner-wrap{max-width:none;margin:0 0 18px;padding:0}

.r2-grid{display:grid;grid-template-columns:1fr 300px;gap:28px}

/* ── モバイル：サイドバーをハンバーガードロワー化（list と同じ挙動） ── */
.r2-hamburger{display:none}
.r2-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:199
}
.r2-overlay.show{display:block}
@media(max-width:1000px){
  .r2-grid{grid-template-columns:1fr;gap:22px}
  .r2-side{
    position:fixed;top:0;left:-310px;width:300px;height:100dvh;
    overflow-y:auto;z-index:200;background:var(--bg2);
    border-right:1.5px solid var(--text);
    transition:left .28s ease;padding:14px;box-sizing:border-box;
    gap:18px
  }
  .r2-side.open{left:0}
  .r2-hamburger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:52px;height:52px;padding:10px;
    background:var(--accent);border:1.5px solid var(--text);
    border-radius:0;cursor:pointer;
    position:fixed;bottom:20px;left:16px;z-index:210;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    transition:left .28s ease
  }
  .r2-hamburger span{
    display:block;height:2px;background:#fff;border-radius:0;
    transition:transform .25s ease, opacity .2s ease
  }
  .r2-hamburger.active{left:calc(300px + 16px)}
  .r2-hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .r2-hamburger.active span:nth-child(2){opacity:0}
  .r2-hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ── メイン側 ────────────────────────────────────────── */
.r2-main{display:flex;flex-direction:column;gap:26px;min-width:0}
.r2-side{display:flex;flex-direction:column;gap:24px;min-width:0}

/* ── 投稿者カード＋アクションバー（いいね / Xポスト / 編集）──────────
   PC: アクションバーは margin-top:auto で列の最下部へ寄せ、sticky(bottom:16px)で
      常に画面下へ吸着（＝常時追従）。投稿者カードはカテゴリ直下に自然配置し、
      下スクロールでアクションバー直上の固定位置に到達したら JS が
      .r2-suser-docked を付与して position:fixed 化する（上へ戻すと自然位置へ）。
       バーは不透明・z-index 上位なので、流し込み中にカードが背後を通過しても隠れる。
   モバイル: アクションバーをドロワー最上部へ（order:-1・sticky 解除）。
            投稿者カードは記事冒頭の投稿者バーと重複するため非表示。 */
.r2-side-actions{margin-top:auto;position:sticky;bottom:16px;z-index:50}
/* 投稿者カードのドック状態（left / width / top は JS がインライン指定） */
.r2-side-user.r2-suser-docked{position:fixed;z-index:49;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.r2-side-actions-inner{
  display:flex;gap:8px;align-items:stretch;
  padding:10px;background:var(--bg2);
  border:1.5px solid var(--text);box-shadow:0 6px 18px rgba(0,0,0,.14)
}
/* アクションバーは用途ごとに色分け（サイト内の他ボタンと同系統で黒一色にしない）。
   いいね＝アクセント(赤)アウトライン→押下で赤塗り、X＝Xブランド黒（共有ボタン .r2-share-x と同色）、
   編集＝中間色アウトライン→hover で緑塗り。 */
.r2-sa-btn{
  flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 6px;border:1.5px solid var(--text);background:var(--bg);
  color:var(--text);font-weight:900;font-size:var(--fs-sm);line-height:1;
  text-decoration:none;cursor:pointer;transition:.15s
}
.r2-sa-ico{font-size:1.02rem;line-height:1}
.r2-sa-btn span:not(.r2-sa-ico){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* いいね：赤アウトライン → hover / 選択(liked) で赤塗り */
.r2-sa-like{border-color:var(--accent);color:var(--accent)}
.r2-sa-like:hover,.r2-sa-like.liked{background:var(--accent);color:#fff;border-color:var(--accent)}
/* X：Xブランドの黒（共有ボタン .r2-share-x と同色）。hover で白背景へ反転 */
.r2-sa-x{background:#0f1419;color:#fff;border-color:#0f1419}
.r2-sa-x:hover{background:var(--bg);color:#0f1419;border-color:#0f1419}
/* 編集：hover で緑塗り */
.r2-sa-edit:hover{background:#2c7a5b;color:#fff;border-color:#2c7a5b}
@media(max-width:1000px){
  /* ドロワー化時：アクションバーを最上部へ・追従解除 */
  .r2-side-actions{order:-1;margin-top:0;position:static;top:auto;bottom:auto}
  .r2-side-actions-inner{box-shadow:none}
  /* PC 専用カード。モバイルは記事冒頭の投稿者バーと重複するため隠す（ドック状態も解除） */
  .r2-side-user{display:none}
  .r2-side-user.r2-suser-docked{position:static;left:auto;width:auto;top:auto;bottom:auto;box-shadow:none}
}

/* ── 投稿者カード（PC・追従いいねバー直上） ───────────────── */
.r2-side-user{
  padding:16px;background:var(--bg2);border:1.5px solid var(--text)
}
/* アバター（左）＋ テキスト列（名前・その下に順位/ポイント）＝縦スペース節約 */
.r2-suser-head{display:flex;align-items:center;gap:11px}
.r2-suser-avalink{flex:0 0 auto;display:block;line-height:0}
.r2-suser-ava{
  width:48px;height:48px;border-radius:0;object-fit:cover;
  border:1.5px solid var(--text);flex:0 0 auto;background:var(--bg)
}
.r2-suser-ava-def{display:flex;align-items:center;justify-content:center;font-size:22px}
.r2-suser-headtext{min-width:0;display:flex;flex-direction:column;gap:3px}
.r2-suser-name{font-weight:900;font-size:var(--fs-base);line-height:1.3;word-break:break-word;text-decoration:none;color:var(--text)}
.r2-suser-name:hover{color:var(--accent)}
/* 総合ポイント／順位（名前の直下・左寄せの1行）。ランキングへのリンク。 */
.r2-suser-pts{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:var(--fs-xs);font-weight:700;color:var(--text2);text-decoration:none;line-height:1.25}
.r2-suser-pts:hover{color:var(--accent)}
.r2-suser-pts b{color:var(--accent);font-weight:900;font-size:var(--fs-sm)}
.r2-suser-pts small{font-weight:700;opacity:.75}
.r2-suser-pts-total b{font-size:var(--fs-base)}
.r2-suser-sns{margin-top:12px;justify-content:center}
.r2-suser-bio-wrap{margin-top:12px}
.r2-suser-bio{
  margin:0;font-size:var(--fs-sm);line-height:1.7;color:var(--text2);
  word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden
}
.r2-suser-bio.open{-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible}
.r2-suser-bio-toggle{
  margin-top:6px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent);font-weight:800;font-size:var(--fs-xs)
}
.r2-suser-bio-toggle:hover{text-decoration:underline}

/* ── ブロック見出し（赤 outline + 横線） ───────────────── */
.r2-block{}
.r2-block-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.r2-block-tag{font-size:var(--fs-xs);font-weight:900;letter-spacing:.14em;color:var(--accent);border:1.5px solid var(--accent);padding:3px 8px;background:transparent;flex-shrink:0}
.r2-block-title{font-size:var(--fs-base);font-weight:900;letter-spacing:.04em;margin:0;color:var(--text)}
.r2-comments-count{font-size:var(--fs-sm);font-weight:700;color:var(--text2);letter-spacing:0;margin-left:4px}
.r2-block-line{flex:1;height:1.5px;background:var(--text);opacity:.85}

/* ── 投稿者バー：PR は右下に絶対配置 ───────────────────── */
.r2-author{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  /* 横（左↔右）は 14px のまま。折り返し時の行間（SNS/いいね行の上下）は 1/3 に圧縮。 */
  column-gap:14px;row-gap:5px;flex-wrap:wrap;
  padding:14px;
  background:var(--bg2);border:1.5px solid var(--text);
}
.r2-author-left{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);min-width:0}
.r2-author-left:hover .r2-author-name{color:var(--accent)}
.r2-ava{width:40px;height:40px;border:1.5px solid var(--text);object-fit:cover;display:block;flex-shrink:0}
.r2-ava-def{display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:var(--fs-base);color:var(--text2)}
.r2-author-info{min-width:0}
.r2-author-name{font-size:var(--fs-base);font-weight:900;line-height:1.2;transition:color var(--trans, .15s)}
.r2-author-date{font-size:var(--fs-xs);color:var(--text2);opacity:.85;margin-top:3px;line-height:1.3}
.r2-author-updated{margin-left:4px;opacity:.7}
/* 総合ポイント／順位（名前・日付の下、コンパクトな1行） */
.r2-author-pts{display:inline-flex;align-items:baseline;gap:10px;margin-top:4px;font-size:var(--fs-xs);font-weight:700;color:var(--text2);line-height:1.2}
.r2-author-pts b{color:var(--accent);font-weight:900}
.r2-author-pts-rank,.r2-author-pts-total{white-space:nowrap}
/* 自己紹介（全幅で1行に独立配置・2行クランプ＋クリック開閉） */
.r2-author-bio-wrap{flex-basis:100%;width:100%;margin-top:2px}
.r2-author-bio{
  margin:0;font-size:var(--fs-sm);line-height:1.7;color:var(--text2);
  word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden
}
.r2-author-bio.open{-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible}
/* フッター行：左に「続きを読む」、右にPR注記（同じ行に並べる） */
.r2-author-foot{flex-basis:100%;width:100%;display:flex;align-items:baseline;gap:10px;margin-top:6px}
.r2-author-bio-toggle{
  flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent);font-weight:800;font-size:var(--fs-xs)
}
.r2-author-bio-toggle:hover{text-decoration:underline}
.r2-author-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.r2-author-sns{display:flex;gap:8px;align-items:center}
.r2-author-sns-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:30px;border:1.5px solid transparent;color:#fff;
  text-decoration:none;transition:.15s
}
/* 既定で各SNSのブランドカラー背景＋白アイコン（目立つように） */
.r2-author-sns-x{background:#0f1419;border-color:#0f1419}
.r2-author-sns-yt{background:#ff0033;border-color:#ff0033}
.r2-author-sns-ig{
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  border-color:#bc1888
}
.r2-author-sns-blog{background:#2c7a5b;border-color:#2c7a5b}
.r2-author-sns-btn:hover{filter:brightness(.9)}
.r2-like{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--bg);border:1.5px solid var(--accent);color:var(--accent);
  font-weight:900;font-size:var(--fs-sm);padding:6px 12px;border-radius:0;
  cursor:pointer;transition:.15s;line-height:1;text-decoration:none
}
.r2-like:hover{background:var(--accent);color:#fff}
.r2-like.liked{background:var(--accent);color:#fff}
.r2-like:disabled{opacity:.55;cursor:default;background:var(--bg);color:var(--accent)}
.r2-like:disabled:hover{background:var(--bg);color:var(--accent)}
.r2-author-pr{
  margin-left:auto;text-align:right;
  font-size:.62rem;color:var(--text2);opacity:.55;letter-spacing:.02em;line-height:1.3;
}
@media(max-width:640px){
  .r2-author{padding:12px}
  .r2-author-pr{font-size:.58rem}
  .r2-author-right{width:100%;justify-content:center}
  .r2-author-sns{justify-content:center;flex-wrap:wrap}
}

/* ── 写真 ────────────────────────────────────────────── */
.r2-photos{display:flex;flex-direction:column;gap:7px}
.r2-photo-headline{
  font-size:var(--fs-xl);font-weight:900;
  border-left:3px solid var(--accent);padding-left:8px;color:var(--text);line-height:1.3;
  margin-top:10px
}
.r2-photo-frame{background:var(--bg);border:1.5px solid var(--text);overflow:hidden;position:relative}
.r2-photo-frame img{width:100%;height:auto;display:block}
/* 黄金比横長 (1.618:1) より縦が長い画像：枠を黄金比横長に固定し、画像を内側に contain で収める。
   → 正方形・縦長すべてが左右余白付きで縮小表示される（縦方向の占有スペースを抑制） */
.r2-photo-frame.r2-photo-tall{
  aspect-ratio:1.618/1;
  display:flex;justify-content:center;align-items:center;
  background:var(--bg2)
}
.r2-photo-frame.r2-photo-tall img{
  width:auto;height:auto;
  max-width:100%;max-height:100%
}
.r2-photo-yt{aspect-ratio:16/9}
.r2-photo-yt iframe{width:100%;height:100%;display:block;border:none}
.r2-photo-stars{
  position:absolute;right:10px;bottom:10px;
  font-size:1.6rem;line-height:1;
  background:rgba(0,0,0,.7);color:#fff;
  padding:6px 12px;letter-spacing:3px;
  text-shadow:0 1px 2px rgba(0,0,0,.6)
}
.r2-photo-stars .on{color:#ffd84a}
.r2-photo-stars .off{color:rgba(255,255,255,.45)}
/* 品質バッジ（共通 .v5-badge は base.css）。記事表示の1枚目は大きい画像なので少し拡大。 */
.r2-photo-frame .v5-badge{width:44px;height:44px}
@media(max-width:640px){
  .r2-photo-frame .v5-badge{width:34px;height:34px}
  .r2-photo-stars{font-size:1.25rem;padding:5px 10px;letter-spacing:2px}
}
/* 画像下キャプション：左の薄灰縦線は削除済み、下側のみ padding */
.r2-photo-cap{font-size:var(--fs-base);color:var(--text2);line-height:1.7;padding:0 0 10px}
.r2-photo-cap p:last-child{margin-bottom:0}
.r2-photo-cap a{color:var(--accent);text-decoration:underline}

/* ── 画像ライトボックス（クリックで拡大表示） ───────────────── */
.r2-photo-frame.r2-zoomable{cursor:zoom-in}
.r2-lightbox{
  position:fixed;inset:0;z-index:100000;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.9);padding:24px;
  overscroll-behavior:contain;
}
.r2-lightbox.open{display:flex}
.r2-lb-stage{
  margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  max-width:100%;max-height:100%;
}
.r2-lb-img{
  max-width:min(100%,1400px);max-height:88vh;width:auto;height:auto;
  object-fit:contain;background:#fff;cursor:zoom-out;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.r2-lb-count{color:rgba(255,255,255,.85);font-size:.9rem;letter-spacing:1px}
.r2-lb-close,.r2-lb-nav{
  position:absolute;border:none;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);line-height:1;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.r2-lb-close:hover,.r2-lb-nav:hover{background:rgba(255,255,255,.28)}
.r2-lb-close{top:14px;right:18px;width:44px;height:44px;font-size:1.8rem}
.r2-lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.2rem}
.r2-lb-prev{left:18px}
.r2-lb-next{right:18px}
@media(max-width:640px){
  .r2-lightbox{padding:12px}
  .r2-lb-close{top:8px;right:8px;width:40px;height:40px}
  .r2-lb-nav{width:42px;height:42px;font-size:1.8rem}
  .r2-lb-prev{left:8px}
  .r2-lb-next{right:8px}
  .r2-lb-img{max-height:82vh}
}

/* ── まとめ / 良かった点・気になった点 ─────────────────── */
.r2-summary{
  background:var(--bg2);border:1.5px solid var(--text);padding:16px;
  font-size:var(--fs-base);line-height:1.75;color:var(--text)
}
.r2-summary p:last-child{margin-bottom:0}
.r2-summary a{color:var(--accent);text-decoration:underline}
.r2-verdict{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:640px){.r2-verdict{grid-template-columns:1fr}}
.r2-verdict-box{background:var(--bg2);border:1.5px solid var(--text);padding:14px}
.r2-verdict-head{font-size:var(--fs-base);font-weight:900;margin-bottom:8px}
.r2-good .r2-verdict-head{color:#1f7a3a}
.r2-bad  .r2-verdict-head{color:var(--accent)}
.r2-verdict-box ul{margin:0;padding-left:1.2em;font-size:var(--fs-base);line-height:1.6}
.r2-verdict-none{margin:0;color:var(--text2);opacity:.7;font-size:var(--fs-sm)}

/* ── スコア（総合評価欄を縦中央寄せ） ─────────────────── */
.r2-score{
  display:grid;grid-template-columns:200px 1fr;gap:24px;
  background:var(--bg2);border:1.5px solid var(--text);padding:18px;
  align-items:stretch
}
@media(max-width:640px){.r2-score{grid-template-columns:1fr;gap:16px}}
.r2-score-main{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;border-right:1.5px solid var(--text);padding-right:18px;gap:4px
}
@media(max-width:640px){.r2-score-main{border-right:none;border-bottom:1.5px solid var(--text);padding:0 0 14px}}
.r2-score-num{font-size:var(--fs-h1);font-weight:900;line-height:1;color:var(--accent)}
.r2-score-stars{font-size:var(--fs-base);letter-spacing:2px;margin-top:2px}
.r2-score-stars .on{color:#ffd84a}
.r2-score-stars .off{color:var(--text4)}
.r2-score-label{font-size:var(--fs-sm);color:var(--text2);margin-top:2px;letter-spacing:.04em}
.r2-score-sub{display:flex;flex-direction:column;gap:10px;justify-content:center}
.r2-score-item{display:grid;grid-template-columns:100px 1fr 56px;gap:10px;align-items:center;font-size:var(--fs-sm)}
.r2-score-item-lb{font-weight:700}
.r2-score-bar{height:8px;border:1.5px solid var(--text);background:var(--bg)}
.r2-score-bar-fill{height:100%;background:var(--accent)}
.r2-score-item-num{text-align:right;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
@media(max-width:640px){.r2-score-item{grid-template-columns:84px 1fr 50px;gap:8px}}

/* ── ショップ（横 1 列の行レイアウト） ─────────────────── */
.r2-shop{display:flex;flex-direction:column;gap:10px}
.r2-shop-row{
  display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:center;
  padding:12px;background:var(--bg2);border:1.5px solid var(--text);
  text-decoration:none;color:var(--text);transition:.15s
}
.r2-shop-row:hover{border-color:var(--accent);background:var(--bg)}
/* ボタン廃止カード（本文中の商品カード）：CTA列が無いので2列にする */
.r2-shop-row--nobtn{grid-template-columns:110px 1fr}
.r2-shop-row--nobtn:hover .r2-shop-name{text-decoration:underline}
.r2-shop-img{
  width:110px;height:110px;background:var(--bg);border:1.5px solid var(--text);
  display:flex;align-items:center;justify-content:center;color:var(--text4);
  font-size:var(--fs-xs);overflow:hidden;flex-shrink:0
}
.r2-shop-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.r2-shop-noimg{font-weight:700}
.r2-shop-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.r2-shop-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.r2-shop-src{
  font-size:var(--fs-xs);font-weight:900;letter-spacing:.06em;color:var(--accent);
  border:1.5px solid var(--accent);padding:2px 7px;background:transparent
}
.r2-shop-src--amazon { color:#ff9900; border-color:#ff9900 }
.r2-shop-src--rakuten{ color:#bf0000; border-color:#bf0000 }
.r2-shop-src--yahoo  { color:#7f00ff; border-color:#7f00ff }
.r2-shop-src--other  { color:var(--text2); border-color:var(--text2) }
.r2-shop-price{font-size:var(--fs-lg);font-weight:900;color:var(--accent);line-height:1}
.r2-shop-name{
  font-size:var(--fs-base);font-weight:700;line-height:1.4;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.r2-shop-rating{display:flex;gap:8px;align-items:center;font-size:var(--fs-xs);color:var(--text2)}
.r2-shop-stars{color:#ffb400;letter-spacing:1px}
.r2-shop-btn{
  font-size:var(--fs-sm);font-weight:900;color:var(--accent);
  white-space:nowrap;flex-shrink:0;align-self:center
}
.r2-shop-footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:10px;flex-wrap:wrap
}
.r2-shop-pr-wrap{display:flex;flex-direction:column;gap:4px;min-width:0}
.r2-shop-pr{font-size:var(--fs-xs);color:var(--text2);opacity:.85;line-height:1.5}
.r2-shop-note{font-size:var(--fs-xs);color:var(--text2);opacity:.85;line-height:1.5}
.r2-shop-credit{font-size:var(--fs-xs);color:var(--text2);text-decoration:none;opacity:.7}
.r2-shop-credit:hover{color:var(--accent);text-decoration:underline}
@media(max-width:640px){
  .r2-shop-row{grid-template-columns:90px 1fr;gap:10px;padding:10px}
  .r2-shop-img{width:90px;height:90px}
  .r2-shop-btn{display:none}
}

/* ── 本文に挿入された商品カード（[[shop:N]] 由来）─────────── */
/*   .md-content 内の a スタイル（下線・accent色）を打ち消してカード見た目を維持 */
.rv-inline-shop{position:relative;margin:18px 0}
.md-content .rv-inline-shop{position:relative;margin:18px 0}
.md-content .rv-inline-shop a.r2-shop-row,
.md-content .rv-inline-shop a.r2-shop-row:hover{
  text-decoration:none;color:var(--text)
}
/* 記事途中カードの右上 PR バッジ（既存 .r2-block-tag のトーンに合わせる）*/
.rv-inline-pr{
  position:absolute;top:6px;right:6px;z-index:2;
  font-size:var(--fs-xs);font-weight:900;letter-spacing:.14em;
  color:var(--accent);border:1.5px solid var(--accent);
  padding:2px 7px;background:var(--bg2);line-height:1.3;pointer-events:none
}

/* ── 商品情報（DL）───────────────────────────────────── */
.r2-info{display:flex;flex-direction:column;gap:0;border:1.5px solid var(--text);background:var(--bg2);margin:0}
.r2-info > div{display:grid;grid-template-columns:140px 1fr;border-top:1.5px solid var(--text);font-size:var(--fs-base)}
.r2-info > div:first-child{border-top:none}
.r2-info dt{padding:10px 12px;background:var(--bg);font-size:var(--fs-sm);font-weight:900;letter-spacing:.04em;border-right:1.5px solid var(--text);margin:0;color:var(--text)}
.r2-info dd{padding:10px 12px;margin:0;color:var(--text);overflow-wrap:anywhere}
.r2-info-link{color:var(--accent);text-decoration:underline}
@media(max-width:640px){.r2-info > div{grid-template-columns:96px 1fr} .r2-info dt{padding:8px 10px} .r2-info dd{padding:8px 10px}}

/* ── SNS シェア（各ブランドカラーを初期表示） ─────────── */
.r2-share{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  border-top:1.5px solid var(--text);border-bottom:1.5px solid var(--text);padding:14px 0
}
.r2-share-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);font-weight:900;padding:8px 16px;
  border:1.5px solid;color:#fff;text-decoration:none;
  transition:opacity .15s, transform .15s
}
.r2-share-btn:hover{opacity:.85;transform:translateY(-1px)}
.r2-share-x   {background:#0f1419;border-color:#0f1419}
.r2-share-fb  {background:#1877f2;border-color:#1877f2}
.r2-share-line{background:#06c755;border-color:#06c755}
.r2-share-hb  {background:#00a5de;border-color:#00a5de}
.r2-share-rss {background:#ee802f;border-color:#ee802f}
/* はてなの「B!」マーク（青背景に白角丸 + 中の文字は青） */
.r2-share-hb-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;
  background:#fff;color:#00a5de;
  font-size:.7rem;font-weight:900;line-height:1;border-radius:2px
}
@media(max-width:640px){
  /* モバイル：共有ボタンはアイコンのみ（文字ラベルを隠して 1 行に収める）。
     はてなの「B!」マーク（.r2-share-hb-icon）はアイコンなので隠さない。 */
  .r2-share{flex-wrap:nowrap;gap:10px}
  .r2-share-btn{padding:9px 14px;gap:0}
  .r2-share-btn span:not(.r2-share-hb-icon){display:none}
}

/* ── コメント並び替えの行（Magazine 用調整） ───────────── */
.r2-comments-order-row{border:none !important;padding:0 !important;margin:0 0 12px !important;background:transparent !important}
.r2-comments-block .rv-comments{border:none;padding:0;background:transparent}

/* ── コメントフォーム / 未ログイン枠（Magazine 用シャープ化） ───────────
   review.css のオリジナルは丸角＋薄灰背景で柔らかい雰囲気だが、Magazine
   デザインは「直角 + 1.5px solid var(--text) + 白/オフ白」が基調。
   ここで上書きして、周りのカードと統一感を出す。 */
.r2-comments-block .rv-comment-form{
  border:1.5px solid var(--text);
  border-radius:0;
  background:var(--bg2);
  overflow:hidden;
  margin-top:18px
}
.r2-comments-block .rv-comment-textarea{
  background:var(--bg2);
  font-size:var(--fs-base);
  line-height:1.7;
  padding:14px 14px
}
.r2-comments-block .rv-comment-form-foot{
  border-top:1.5px solid var(--text);
  background:var(--bg);
  padding:10px 12px
}
/* 送信ボタン：削除ボタンと同じ赤線・赤文字。フッターが灰色なので背景は白で立たせる */
.r2-comments-block .rv-comment-submit{
  border-radius:0;
  background:var(--bg2);
  color:var(--accent);
  font-weight:900;
  letter-spacing:.04em;
  padding:8px 22px;
  border:1.5px solid var(--accent);
  transition:.15s
}
.r2-comments-block .rv-comment-submit:hover:not(:disabled){
  background:var(--accent);color:#fff;border-color:var(--accent)
}
.r2-comments-block .rv-comment-submit:disabled{
  background:var(--bg2);color:var(--text4);border-color:var(--border2);opacity:1
}
.r2-comments-block .rv-comment-login{
  margin-top:18px;
  border:1.5px solid var(--text);
  border-radius:0;
  background:var(--bg2);
  padding:16px;
  text-align:center;
  color:var(--text2)
}
.r2-comments-block .rv-comment-login-link{
  color:var(--accent);
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:2px
}
/* コメント 1 件 1 件の枠も Magazine 寄りに */
.r2-comments-block .rv-comment{
  border:1.5px solid var(--text);
  border-radius:0;
  background:var(--bg);
  padding:14px
}
.r2-comments-block .rv-comment + .rv-comment{margin-top:10px}
.r2-comments-block .rv-comment-del-btn{
  border-radius:0;
  border:1.5px solid var(--accent);
  background:transparent;
  color:var(--accent);
  font-weight:900;
  padding:3px 10px
}
.r2-comments-block .rv-comment-del-btn:hover{
  background:var(--accent);color:#fff;border-color:var(--accent)
}
/* もっと見るボタン */
.r2-comments-block .rv-comments-more-btn{
  border-radius:0;
  border:1.5px solid var(--text);
  background:var(--bg);
  color:var(--text);
  font-weight:900;
  padding:8px 22px
}
.r2-comments-block .rv-comments-more-btn:hover{
  background:var(--text);color:var(--bg)
}

/* ── 関連レビュー（3 列 × 最大 3 行 = 最大 9 件カード） ─── */
/* minmax(0,1fr) で 3 列を完全等幅に固定する。
   素の 1fr (= minmax(auto,1fr)) だと、グリッドアイテムの min-width:auto により
   最小コンテンツ幅（長い投稿者名・タイトル・画像の固有幅等）が最も大きい列だけ
   トラックが膨張し、その列の写真枠(aspect-ratio)が縦横とも大きくなって崩れる。 */
/* ── 前/次の記事ページャ（コメント欄直下・サムネ付き・コンパクト）──── */
.r2-pager{display:flex;gap:12px;margin:0 0 6px}
.r2-pager-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:8px;
  padding:12px;background:var(--bg2);border:1.5px solid var(--text);
  text-decoration:none;color:var(--text);transition:.15s
}
.r2-pager-item:hover{border-color:var(--accent);background:var(--bg)}
.r2-pager-dir{font-size:var(--fs-xs);font-weight:900;color:var(--accent);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r2-pager-next .r2-pager-dir{text-align:right}
/* 次の記事：見出し・本文（タイトル＋サムネ）をアイコン含めて右揃え */
.r2-pager-next .r2-pager-body{justify-content:flex-end}
.r2-pager-body{display:flex;align-items:center;gap:10px;min-width:0}
/* サムネは黄金比（横:縦 = 1.618:1）の横長長方形 */
.r2-pager-thumb{
  flex:0 0 auto;width:92px;aspect-ratio:1.618/1;overflow:hidden;
  background:var(--bg);border:1.5px solid var(--text);
  display:flex;align-items:center;justify-content:center
}
.r2-pager-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.r2-pager-thumb b{font-size:10px;font-weight:900;color:var(--text4);text-align:center;line-height:1.05}
.r2-pager-title{
  min-width:0;font-size:var(--fs-sm);font-weight:700;line-height:1.45;color:var(--text);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;word-break:break-word
}
@media(max-width:560px){
  /* モバイル：2段に折り返さず左右に並べたまま。タイトルは隠してサムネのみ表示。
     前＝見出し左／サムネ左、次＝見出し右／サムネ右の左右対称を維持。 */
  .r2-pager{gap:8px}
  .r2-pager-item{padding:10px}
  .r2-pager-title{display:none}
}

.r2-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.r2-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.r2-related{grid-template-columns:minmax(0,1fr)}}
.r2-related-card{
  display:flex;flex-direction:column;min-width:0;background:var(--bg2);border:1.5px solid var(--text);
  padding:12px;text-decoration:none;color:var(--text);transition:.15s
}
.r2-related-card:hover{border-color:var(--accent);background:var(--bg)}
.r2-related-photo{
  position:relative;aspect-ratio:1.618/1;background:var(--bg);border:1.5px solid var(--text);
  overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--text4);font-size:var(--fs-sm)
}
.r2-related-photo img{width:100%;height:100%;object-fit:cover;display:block}
.r2-related-stars{
  position:absolute;right:6px;bottom:6px;font-size:var(--fs-xs);
  background:rgba(0,0,0,.55);color:#fff;padding:3px 6px;letter-spacing:1px
}
.r2-related-stars .on{color:#ffd84a}
.r2-related-stars .off{color:rgba(255,255,255,.45)}
.r2-related-card h3{
  font-size:var(--fs-base);font-weight:900;line-height:1.38;margin:10px 0 6px;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.38em * 2)
}
.r2-related-foot{
  display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);
  border-top:1.5px solid var(--text);padding-top:8px;margin-top:auto;color:var(--text2)
}
.r2-related-author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.r2-related-foot strong{color:var(--accent);font-weight:900;flex-shrink:0;margin-left:8px}

/* ── いいねしたユーザー一覧（コメント上） ───────────── */
.rv-likers{
  list-style:none;margin:0;padding:14px;
  display:flex;flex-wrap:wrap;gap:8px;
  background:var(--bg2);border:1.5px solid var(--text)
}
.rv-likers li{margin:0;padding:0;line-height:0}
.rv-liker{
  display:inline-block;width:36px;height:36px;border-radius:50%;
  overflow:hidden;background:var(--bg);border:1.5px solid var(--text);
  text-decoration:none;color:var(--text);
  transition:transform .15s ease, border-color .15s ease
}
.rv-liker:hover{transform:translateY(-2px);border-color:var(--accent)}
.rv-liker img{width:100%;height:100%;object-fit:cover;display:block}
.rv-liker-def{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:18px;line-height:1
}
.rv-liker-more{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border-radius:18px;
  background:var(--text);color:#fff;
  font-size:var(--fs-xs);font-weight:900;letter-spacing:.04em
}
/* 非ログイン（匿名）いいね数の丸枠。アイコン群の中に1つだけ表示する。 */
.rv-liker-anon{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  min-width:36px;height:36px;padding:0 11px;border-radius:18px;line-height:1;
  background:var(--bg);color:var(--text2,var(--text));
  border:1.5px dashed var(--text);
  font-size:var(--fs-xs);font-weight:900;letter-spacing:.02em
}
.rv-liker-anon-ico{font-size:15px;line-height:1}
.rv-liker-anon-num{line-height:1}
.rv-likers-empty{
  margin:0;padding:18px;text-align:center;color:var(--text3);
  font-size:var(--fs-sm);
  background:var(--bg2);border:1.5px solid var(--text)
}

/* ── いいね CTA（大きいボタン） ────────────────────── */
.rv-like-cta{margin-top:14px;display:flex;justify-content:center}
.rv-like-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;min-width:280px;justify-content:center;
  background:var(--bg);border:2px solid var(--accent);color:var(--accent);
  font-weight:900;font-size:var(--fs-md);letter-spacing:.04em;
  text-decoration:none;cursor:pointer;border-radius:0;
  transition:background .15s ease, color .15s ease, transform .1s ease;
  line-height:1.1
}
.rv-like-btn:hover{background:var(--accent);color:#fff}
.rv-like-btn:active{transform:translateY(1px)}
.rv-like-btn.liked{background:var(--accent);color:#fff}
.rv-like-btn:disabled{opacity:.7;cursor:default}
.rv-like-btn-icon{font-size:1.3em;line-height:1}
.rv-like-btn-label{font-weight:900}
.rv-like-btn-count{
  margin-left:6px;padding:3px 10px;font-size:var(--fs-sm);
  background:rgba(255,255,255,.18);border:1.5px solid currentColor;
  min-width:32px;text-align:center
}
.rv-like-btn:not(.liked):not(:hover) .rv-like-btn-count{
  background:var(--bg2);color:var(--accent)
}
@media(max-width:640px){
  .rv-like-btn{min-width:0;width:100%;padding:14px 18px;font-size:var(--fs-sm)}
}

/* ── サイドバー：こちらもおすすめ ──────────────────── */
.r2-reco{list-style:none;margin:0;padding:0;border:1.5px solid var(--text);background:var(--bg2)}
.r2-reco li{border-top:1.5px solid var(--text)}
.r2-reco li:first-child{border-top:none}
.r2-reco a{display:flex;gap:10px;padding:10px;text-decoration:none;color:var(--text);transition:.15s}
.r2-reco a:hover{background:var(--bg)}
.r2-reco a:hover .r2-reco-title-txt{color:var(--accent)}
.r2-reco-thumb{
  position:relative;flex:0 0 56px;width:56px;height:56px;border:1.5px solid var(--text);
  overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center;
  color:var(--text4);font-size:var(--fs-sm)
}
.r2-reco-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.r2-reco-new{
  position:absolute;top:0;left:0;background:var(--accent);color:#fff;
  font-size:.58rem;font-weight:900;padding:0 4px;letter-spacing:.06em
}
.r2-reco-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.r2-reco-title-txt{
  font-size:var(--fs-sm);font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--trans, .15s)
}
.r2-reco-sub{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--text2);opacity:.8}
.r2-reco-author{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r2-reco-likes{color:var(--accent);font-weight:900;flex-shrink:0;margin-left:6px}

/* ── サイドバー：カテゴリ ─────────────────────────── */
.r2-cat-all,.r2-cat-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;background:var(--bg2);border:1.5px solid var(--text);border-top:none;
  text-decoration:none;color:var(--text);font-size:var(--fs-sm);font-weight:700;transition:.15s
}
.r2-cat-all{border-top:1.5px solid var(--text)}
.r2-cat-all span,.r2-cat-row em{font-style:normal;font-size:var(--fs-xs);color:var(--accent);font-weight:900}
.r2-cat-row.on{background:var(--accent);color:#fff}
.r2-cat-row.on em{color:#fff}
.r2-cat-row:hover{background:var(--bg);color:var(--accent)}
.r2-cat-row.on:hover{background:var(--accent);color:#fff}
/* 表示中レビューが属する親カテゴリ（子を展開表示中）：左に縦アクセントライン */
.r2-cat-row.open:not(.on){box-shadow:inset 3px 0 0 var(--accent)}
/* 子カテゴリ：インデント＋小さめフォント＋淡背景 */
.r2-cat-row-child{
  padding-left:28px;font-size:var(--fs-xs);font-weight:600;
  background:var(--bg);position:relative
}
.r2-cat-row-child::before{
  content:"";position:absolute;left:14px;top:50%;width:8px;height:1.5px;
  background:var(--text);opacity:.55
}
.r2-cat-row-child.on::before{background:#fff;opacity:1}

/* ── 非ログインいいね：選択ポップアップ ─────────────────────── */
.anl-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.anl-modal[hidden]{display:none}
.anl-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.anl-card{
  position:relative;z-index:1;width:100%;max-width:360px;
  background:var(--bg);border:2px solid var(--text);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  padding:26px 22px 22px;text-align:center;
  animation:anlPop .16s ease-out
}
@keyframes anlPop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.anl-x{
  position:absolute;top:8px;right:10px;border:0;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--text3);padding:4px
}
.anl-x:hover{color:var(--text)}
.anl-ico{font-size:34px;line-height:1;color:#e0245e;margin-bottom:8px}
.anl-title{margin:0 0 8px;font-size:var(--fs-lg);font-weight:900;color:var(--text)}
.anl-desc{margin:0 0 18px;font-size:var(--fs-sm);line-height:1.7;color:var(--text2,var(--text))}
.anl-actions{display:flex;flex-direction:column;gap:10px}
.anl-btn{
  display:block;width:100%;padding:13px 14px;border-radius:10px;cursor:pointer;
  font-size:var(--fs-md);font-weight:800;border:2px solid var(--text);line-height:1.2
}
.anl-btn-login{background:var(--text);color:#fff}
.anl-btn-login:hover{opacity:.88}
.anl-btn-anon{background:var(--bg);color:var(--text)}
.anl-btn-anon:hover{background:var(--bg2)}
.anl-btn:disabled{opacity:.5;cursor:default}